small fix for shiki link transformer

astro.config.mjs

@@ -7,6 +7,7 @@ import { markdownConfig } from "./src/config/io/markdown.ts";
 
 // https://astro.build/config
 export default defineConfig({
+  markdown: markdownConfig,
   integrations: [
     solidJs({
       devtools: true,
@@ -14,5 +15,4 @@ export default defineConfig({
     mdx(),
     pagefind(),
   ],
-  markdown: markdownConfig,
 });

src/config/io/markdown.ts

@@ -1,7 +1,7 @@
 import type { Parent, Node } from "unist";
 import { visit, CONTINUE, SKIP } from "unist-util-visit";
 import { fromHtml } from "hast-util-from-html";
-import type { Root, Element } from "hast";
+import type { Root } from "hast";
 import type {
   AstroMarkdownOptions,
   MarkdownProcessor,
@@ -69,34 +69,21 @@ const rehypeRewriteTypelinks: RehypePlugin<[]> = () => {
   };
 };
 
-const shikiRewriteTypelinks = (): ShikiTransformer => {
+const shikiRewriteTypelinks: ShikiTransformer = {
-  return {
+  name: "rewrite-typelinks",
-    name: "rewrite-typelinks",
+  postprocess(code, _options) {
-    preprocess(code, _options) {
+    // WARN: need to change the code link identifier to this
-      const qtRegExp = /QT_(\w+)/g;
+    const regExp = /TYPE99(\w+.)99TYPE/g;
-      const qsRegExp = /QS_(\w+)/g;
+    const hasTypelinks = code.search(regExp) !== -1;
-      // WARN: need to change the code link identifier to this
-      // const hasTypelinks = code.search(/TYPE99(\w+.)99TYPE/g) !== -1;
-      const hasQTLink = code.search(qtRegExp) !== -1;
-      const hasQSLink = code.search(qsRegExp) !== -1;
 
-      if (hasQTLink) {
+    if (hasTypelinks) {
-        code.replace(qtRegExp, (_full: string, match: string) => {
+      code.replace(regExp, (_full: string, match: string) => {
-          const linkObject = getQMLTypeLinkObject(match);
+        const linkObject = getQMLTypeLinkObject(match);
-          const link = getQMLTypeLink(linkObject);
+        const link = getQMLTypeLink(linkObject);
-          return `<a href=${link}>${linkObject.name ?? ""}</a>`;
+        return `<a href=${link}>${linkObject.name ?? ""}</a>`;
-        });
+      });
-      }
+    }
-
+  },
-      if (hasQSLink) {
-        code.replace(qsRegExp, (_full: string, match: string) => {
-          const linkObject = getQMLTypeLinkObject(match);
-          const link = getQMLTypeLink(linkObject);
-          return `<a href=${link}>${linkObject.name ?? ""}</a>`;
-        });
-      }
-    },
-  };
 };
 
 export const markdownConfig: AstroMarkdownOptions = {
@@ -104,7 +91,7 @@ export const markdownConfig: AstroMarkdownOptions = {
   shikiConfig: {
     theme: "material-theme-ocean",
     wrap: true,
-    transformers: [shikiRewriteTypelinks()],
+    transformers: [shikiRewriteTypelinks],
   },
   remarkPlugins: [[remarkAlert, { legacyTitle: true }]],
   rehypePlugins: [

src/pages/docs/configuration/index.mdx

@@ -3,9 +3,11 @@ layout: "@layouts/ConfigLayout.astro"
 title: "Configuration"
 description: "Configuring the shell"
 ---
-import MD_Title from "@components/MD_Title.tsx"
+
+import MD_Title from "@components/MD_Title.tsx";
 
 # <MD_Title titleVar={1}> {frontmatter.title} </MD_Title>
+
 You should start with the [Introduction](./configuration/intro) which will guide you
 through the basics of QML by creating a simple topbar with a clock.