feat: migrate to Markdoc (#18)

* feat: migrate to Markdoc * nit: remove some unnecessary change * feat: migrate rest of images * chore: lockfile * chore: use preview release
Princesseuh · Feb 3, 2024 · 03eb7d5 · 03eb7d5
1 parent 30e9e11
commit 03eb7d5
Show file tree

Hide file tree

Showing 245 changed files with 498 additions and 1,085 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -1,24 +1,13 @@
-import mdx from "@astrojs/mdx";
 import tailwind from "@astrojs/tailwind";
-import AutoImport from "astro-auto-import";
+import expressiveCode from "astro-expressive-code";
 import { defineConfig } from "astro/config";
 
-import expressiveCode from "astro-expressive-code";
-import { remarkConvertImports } from "./src/remark-convert-imports.ts";
+import markdoc from "@astrojs/markdoc";
 
 // https://astro.build/config
 export default defineConfig({
 	publicDir: "./static",
 	site: "https://erika.florist/",
-	markdown: {
-		syntaxHighlight: "shiki",
-		shikiConfig: {
-			theme: "material-theme-darker",
-			langs: [],
-			wrap: false,
-		},
-		remarkPlugins: [remarkConvertImports],
-	},
 	image: {
 		service: {
 			entrypoint: "./src/imageService.ts",
@@ -28,59 +17,9 @@ export default defineConfig({
 		tailwind({
 			applyBaseStyles: false,
 		}),
-		AutoImport({
-			imports: [
-				{
-					// Explicitly alias a default export
-					// generates:
-					// import { default as B } from './src/components/B.astro';
-					"./src/components/MarkdownImage.astro": [["default", "Image"]],
-					"./src/components/MarkdownNoteBlock.astro": [["default", "Blocknote"]],
-				},
-			],
-		}),
-		expressiveCode({
-			themes: ["material-theme-darker"],
-			plugins: [
-				{
-					name: "custom-style",
-					baseStyles: () => `
-            .frame.is-terminal:not(.has-title) .header {display: none;}
-            .frame .header {border-bottom: 2px solid #313131;}
-            .frame.is-terminal .header::before {display: none;}
-            .frame.is-terminal:not(.has-title) {
-              --button-spacing: 0.4rem;
-            }
-            .frame.is-terminal:not(.has-title) code, .frame.is-terminal:not(.has-title) pre {
-              border-radius: 4px
-            }
-            .frame.is-terminal .header {
-              justify-content: initial;
-              font-weight: initial;
-              padding-left: 1rem;
-              color: #fff;
-            }
-            `,
-					hooks: {},
-				},
-			],
-			useThemedScrollbars: false,
-			useThemedSelectionColors: false,
-			styleOverrides: {
-				frames: {
-					frameBoxShadowCssValue: "none",
-					tooltipSuccessBackground: "#e65161",
-				},
-				uiLineHeight: "inherit",
-				codeFontSize: "0.875rem",
-				codeLineHeight: "1.25rem",
-				borderRadius: "4px",
-				borderWidth: "0px",
-				codePaddingInline: "1rem",
-				codeFontFamily:
-					'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;',
-			},
+		expressiveCode(),
+		markdoc({
+			allowHTML: true,
 		}),
-		mdx(),
 	],
 });
diff --git a/ec.config.mjs b/ec.config.mjs
@@ -0,0 +1,42 @@
+export default {
+	themes: ["material-theme-darker"],
+	plugins: [
+		{
+			name: "custom-style",
+			baseStyles: `
+          .frame.is-terminal:not(.has-title) .header {display: none;}
+          .frame .header {border-bottom: 2px solid #313131;}
+          .frame.is-terminal .header::before {display: none;}
+          .frame.is-terminal:not(.has-title) {
+            --button-spacing: 0.4rem;
+          }
+          .frame.is-terminal:not(.has-title) code, .frame.is-terminal:not(.has-title) pre {
+            border-radius: 4px
+          }
+          .frame.is-terminal .header {
+            justify-content: initial;
+            font-weight: initial;
+            padding-left: 1rem;
+            color: #fff;
+          }
+          `,
+			hooks: {},
+		},
+	],
+	useThemedScrollbars: false,
+	useThemedSelectionColors: false,
+	styleOverrides: {
+		frames: {
+			frameBoxShadowCssValue: "none",
+			tooltipSuccessBackground: "#e65161",
+		},
+		uiLineHeight: "inherit",
+		codeFontSize: "0.875rem",
+		codeLineHeight: "1.25rem",
+		borderRadius: "4px",
+		borderWidth: "0px",
+		codePaddingInline: "1rem",
+		codeFontFamily:
+			'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;',
+	},
+};
diff --git a/markdoc.config.mjs b/markdoc.config.mjs
@@ -0,0 +1,36 @@
+import { component, defineMarkdocConfig, nodes } from "@astrojs/markdoc/config";
+
+export default defineMarkdocConfig({
+	nodes: {
+		fence: {
+			attributes: { ...nodes.fence.attributes, title: { type: String, render: "title" } },
+			render: component("./src/components/content/Code.astro"),
+		},
+		blockquote: {
+			attributes: { ...nodes.blockquote.attributes, title: { type: String, render: "title" } },
+			render: component("./src/components/content/Blocknote.astro"),
+		},
+		link: {
+			attributes: nodes.link.attributes,
+			render: component("./src/components/ExternalLink.astro"),
+		},
+	},
+	tags: {
+		blockquote: {
+			attributes: {
+				title: { type: String, render: "title" },
+				block: { type: Boolean, default: true },
+			},
+			render: component("./src/components/content/Blocknote.astro"),
+		},
+		image: {
+			attributes: {
+				...nodes.image.attributes,
+				src: { type: String },
+				figureProps: { type: Object },
+			},
+			children: ["text"],
+			render: component("./src/components/content/Image.astro"),
+		},
+	},
+});
diff --git a/package.json b/package.json
@@ -18,26 +18,25 @@
 		"@astrojs/tailwind": "^5.1.0",
 		"@types/eslint": "^8.56.2",
 		"@types/markdown-it": "^13.0.7",
-		"@types/node": "^20.11.0",
+		"@types/node": "^20.11.16",
 		"@types/prettier": "^2.7.3",
-		"@typescript-eslint/eslint-plugin": "^6.18.1",
-		"@typescript-eslint/parser": "^6.18.1",
-		"astro": "^4.1.2",
-		"astro-auto-import": "^0.4.2",
+		"@typescript-eslint/eslint-plugin": "^6.20.0",
+		"@typescript-eslint/parser": "^6.20.0",
+		"astro": "^4.3.1",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-astro": "^0.31.0",
+		"eslint-plugin-astro": "^0.31.4",
 		"kleur": "^4.1.5",
-		"prettier": "^3.1.1",
-		"prettier-plugin-astro": "^0.12.3",
+		"prettier": "^3.2.4",
+		"prettier-plugin-astro": "^0.13.0",
 		"quick-score": "^0.2.0",
 		"quicklink": "^2.3.0",
 		"typescript": "^5.3.3"
 	},
 	"pnpm": {
-    "overrides": {
-      "sharp": "^0.33.0"
-    },
+		"overrides": {
+			"sharp": "^0.33.0"
+		},
 		"packageExtensions": {
 			"quicklink": {
 				"peerDependenciesMeta": {
@@ -55,23 +54,24 @@
 	"dependencies": {
 		"@11ty/eleventy-fetch": "^4.0.0",
 		"@astrojs/check": "^0.4.1",
-		"@astrojs/mdx": "2.0.4",
-		"@types/better-sqlite3": "^7.6.8",
+		"@astrojs/markdoc": "0.0.0-markdoc-image-20240203035252",
+		"@types/better-sqlite3": "^7.6.9",
 		"@types/igdb-api-node": "^5.0.3",
 		"astro-capo": "^0.0.1",
-		"astro-expressive-code": "^0.31.0",
-		"better-sqlite3": "^9.2.2",
-		"dotenv": "^16.3.1",
+		"astro-expressive-code": "^0.32.3",
+		"better-sqlite3": "^9.3.0",
+		"dotenv": "^16.4.1",
 		"github-slugger": "^2.0.0",
 		"gray-matter": "^4.0.3",
 		"igdb-api-node": "^5.0.2",
 		"kysely": "^0.27.2",
-		"linkedom": "^0.16.6",
+		"linkedom": "^0.16.8",
 		"markdown-it": "^14.0.0",
 		"prettier-plugin-tailwindcss": "^0.5.11",
-		"sharp": "^0.33.1",
+		"sharp": "^0.33.2",
 		"tailwindcss": "^3.4.1",
+		"tiny-decode": "^0.1.3",
 		"tsx": "^4.7.0",
-		"vercel": "^33.1.0"
+		"vercel": "^33.4.1"
 	}
 }