chore: migrate to Astro 7 and Sätteri

Author: trueberryless

packages/docs/astro.config.ts

@@ -1,9 +1,9 @@
+import { satteri } from '@astrojs/markdown-satteri';
 import starlight from '@astrojs/starlight';
 import type { ExpressiveCodeTheme } from '@astrojs/starlight/expressive-code';
 import { defineConfig } from 'astro/config';
-import remarkDirective from 'remark-directive';
-import { fixInternalLinks } from './remark/fixInternalLinks.ts';
-import { transformDirectives } from './remark/transformDirectives.ts';
+import { fixInternalLinks } from './plugins/fixInternalLinks.ts';
+import { transformDirectives } from './plugins/transformDirectives.ts';
 
 const setForeground = (theme: ExpressiveCodeTheme, scope: string, value: string) => {
   const settings = theme.settings.find(setting => setting.scope?.includes(scope));
@@ -21,7 +21,10 @@ export default defineConfig({
     '/guides/writing-a-plugin': '/writing-a-plugin',
   },
   markdown: {
-    remarkPlugins: [fixInternalLinks, transformDirectives, remarkDirective],
+    processor: satteri({
+      features: { directive: true },
+      mdastPlugins: [fixInternalLinks, transformDirectives],
+    }),
   },
   integrations: [
     starlight({

packages/docs/package.json

@@ -19,25 +19,16 @@
   },
   "dependencies": {
     "@astro-community/astro-embed-youtube": "0.5.10",
-    "@astrojs/starlight": "0.40.0",
+    "@astrojs/markdown-satteri": "0.3.3",
+    "@astrojs/starlight": "0.41.3",
+    "satteri": "0.9.4",
     "sharp": "0.35.1"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.9",
     "@octokit/graphql": "^9.0.3",
-    "@types/mdast": "4.0.4",
-    "@types/unist": "3.0.3",
-    "astro": "6.4.8",
-    "hastscript": "9.0.1",
-    "picocolors": "^1.1.1",
-    "remark-directive": "4.0.0",
-    "remark-frontmatter": "5.0.0",
-    "remark-gfm": "4.0.1",
-    "remark-parse": "11.0.0",
-    "remark-stringify": "11.0.0",
-    "unified": "11.0.5",
-    "unist-builder": "4.0.0",
-    "unist-util-visit": "5.1.0"
+    "astro": "7.0.6",
+    "picocolors": "^1.1.1"
   },
   "engines": {
     "node": ">=22.0.0"

packages/docs/plugins/fixInternalLinks.ts

@@ -0,0 +1,33 @@
+import pc from 'picocolors';
+import { defineMdastPlugin } from 'satteri';
+
+const dateTimeFormat = new Intl.DateTimeFormat([], {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: false,
+});
+
+const rewrite = (url: string) => url.replace(/(?:\/index)?\.mdx?(#.+)?$/, '$1');
+
+const log = (from: string, to: string) => {
+  console.log(`${pc.dim(dateTimeFormat.format(new Date()))} ${pc.cyan('[fix-link]')} Modify ${from} → ${to}`);
+};
+
+export const fixInternalLinks = defineMdastPlugin({
+  name: 'fix-internal-links',
+  link(node, ctx) {
+    if (node.url.startsWith('.')) {
+      const next = rewrite(node.url);
+      ctx.setProperty(node, 'url', next);
+      log(node.url, next);
+    }
+  },
+  definition(node, ctx) {
+    if (node.url.startsWith('.')) {
+      const next = rewrite(node.url);
+      ctx.setProperty(node, 'url', next);
+      log(node.url, next);
+    }
+  },
+});

packages/docs/plugins/transformDirectives.ts

@@ -0,0 +1,23 @@
+import { defineMdastPlugin } from 'satteri';
+
+export const transformDirectives = defineMdastPlugin({
+  name: 'transform-directives',
+  containerDirective(node, ctx) {
+    ctx.setProperty(node, 'data', {
+      hName: node.name,
+      hProperties: node.attributes ?? {},
+    });
+  },
+  leafDirective(node, ctx) {
+    ctx.setProperty(node, 'data', {
+      hName: node.name,
+      hProperties: node.attributes ?? {},
+    });
+  },
+  textDirective(node, ctx) {
+    ctx.setProperty(node, 'data', {
+      hName: node.name,
+      hProperties: node.attributes ?? {},
+    });
+  },
+});