feat: improve card UX (#18)

* feat: improve card on mobile, in light mode
* feat improve card design
* feat: add media handling
* refactor: replace Astro with React
* feat: improve remark (#20)
* feat: remove integration, turn into plain `remark` plugin
* feat: isolate styles from the host page

Closes #20

.github/workflows/action.yml

@@ -26,5 +26,5 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: npm install pnpm --location=global
       - run: pnpm i --frozen-lockfile
-      - run: pnpm build
+      - run: pnpm build:prod
       - run: pnpm test

.gitignore

@@ -128,3 +128,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+.astro

README.md

@@ -1,31 +1,37 @@
 # Astro Mastodon
 
-> Work in Progress
-
-Easily embed Mastodon posts (and eventually other ActivityPub posts) into your Astro blog posts.
+Easily embed Mastodon posts into your Astro blog posts.
 
 ![Example in Dark Mode](./assets/example-dark.png)
 
-![Example in Light Mode](./assets/example-light.png)
+## Features
+
+- Works with `.md`, `.mdx` and `.astro` files
+- Embed posts from Mastodon (other ActivityPub embeds are coming!)
+- Embed posts with plain text, images, link cards, videos, embedded YouTube players, gifs, and more!
+- No client-side JavaScript, cards are generated at build time
 
 ## How to use
 
 Install the package:
 
 ```shell
-pnpx astro add astro-mastodon
+pnpm add astro-mastodon
 ```
 
 Update your `astro.config.mjs` file:
 
 ```js
 // Other imports
-import astroMastodon, { remarkMastodonEmbed } from "astro-mastodon";
+import { remarkMastodonEmbed } from "astro-mastodon";
 
 export default defineConfig({
   // ...
   markdown: {
-    remarkPlugins: [remarkMastodonEmbed],
+    remarkPlugins: [
+      remarkMastodonEmbed,
+      // other plugins
+    ],
   },
   // ...
 });
@@ -49,12 +55,21 @@ The anatomy of the embed is as follows:
 
 `@[email protected]:postId`
 
-## Features
+## Development
+
+Clone the repo and run
+
+```sh
+pnpm i
+pnpm dev
+```
+
+Open `http://localhost:4321` and have fun!
+
+## Screenshots
+
+![Example in Light Mode](./assets/example-light.png)
+
+![Example with photos](./assets/example-photos.png)
 
-- [x] Embed Mastodon posts in any Astro component
-- [x] Embed Mastodon posts in `mdx` [content](https://docs.astro.build/en/guides/content-collections/) files
-- [x] Embeds are generated at build time (no client-side JavaScript)
-- [x] Install Astro Mastodon as [Astro Integration](https://astro.build/integrations/) with `astro add`
-- [ ] Embed profiles, polls, posts with media attachments
-- [x] Embed all of the above in [plain `markdown` content](https://docs.astro.build/en/guides/markdown-content/)
-- [ ] Embed other ActivityPub post types (PeerTube videos, BookWyrm books, Pixelfed photos, etc)
+![Example in Light Mode](./assets/example-with-link-card.png)

astro.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+
+import { remarkMastodonEmbed } from "astro-mastodon";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()],
+  markdown: {
+    remarkPlugins: [remarkMastodonEmbed],
+  },
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-mastodon",
-  "version": "0.2.3",
-  "description": "🐘 🚀 Mastodon embeds and mentions for Astro websites",
+  "version": "0.3.0",
+  "description": "🐘🚀 Mastodon embeds and mentions for Astro websites",
   "main": "./dist/index.js",
   "type": "module",
   "module": "./dist/index.js",
@@ -23,8 +23,10 @@
     "node": ">=20.5.1"
   },
   "scripts": {
-    "build": "npx tailwindcss -i ./src/global.css -o ./dist/output.css && tsc",
-    "dev": "concurrently \"npx tailwindcss -i ./src/global.css -o ./dist/output.css -w\" \"tsc -w\"",
+    "build:prod": "rm -rf ./dist && npx tailwindcss -i ./src/global.css -o ./dist/output.css  && tsc",
+    "build:dev": "npx tailwindcss -i ./src/global.dev.css -o ./dist/output.dev.css -w && tsc -w",
+    "dev": "concurrently \"npx tailwindcss -i ./src/global.dev.css -o ./dist/output.dev.css -w\" \"tsc -w\" \"astro dev --host\"",
+    "dev:astro": "astro dev --host",
     "commit": "cz",
     "release": "standard-version",
     "prepare": "husky install",
@@ -37,6 +39,8 @@
     "embeds",
     "mentions",
     "withastro",
+    "remark",
+    "remark-plugin",
     "astro-integration"
   ],
   "author": "Art Rosnovsky <[email protected]>",
@@ -46,20 +50,26 @@
     "type": "git"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
-    "@types/node": "^20.11.19",
-    "astro": "^4.4.4",
+    "@astrojs/check": "^0.5.6",
+    "@astrojs/react": "^3.0.10",
+    "@commitlint/cli": "^19.0.3",
+    "@commitlint/config-conventional": "^19.0.3",
+    "@headlessui/react": "^1.7.18",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@types/sanitize-html": "^2.11.0",
+    "astro": "^4.4.8",
+    "astro-mastodon": "link:./",
     "commitizen": "^4.3.0",
     "concurrently": "^8.2.2",
     "cz-conventional-changelog": "^3.3.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.1.0",
-    "prettier": "3.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "3.2.5",
     "standard-version": "^9.5.0",
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2",
-    "@astrojs/check": "^0.5.5",
     "typescript": "^5.3.3"
   },
   "config": {
@@ -71,7 +81,11 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "fast-glob": "^3.3.2",
+    "isomorphic-dompurify": "^2.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {