Add a rehype plugin to convert static to dynamic config

Author: satya164

docusaurus.config.js

@@ -1,5 +1,6 @@
 import remarkNpm2Yarn from '@docusaurus/remark-plugin-npm2yarn';
 import rehypeCodeblockMeta from './src/plugins/rehype-codeblock-meta.mjs';
+import rehypeStaticToDynamic from './src/plugins/rehype-static-to-dynamic.mjs';
 
 export default {
   future: {
@@ -148,6 +149,7 @@ export default {
               rehypeCodeblockMeta,
               { match: { snack: true, lang: true, tabs: true } },
             ],
+            rehypeStaticToDynamic,
           ],
         },
         blog: {

package.json

@@ -31,9 +31,11 @@
     "react-simple-code-editor": "^0.14.1"
   },
   "devDependencies": {
+    "@babel/types": "^7.28.5",
     "markdownlint": "^0.36.1",
     "markdownlint-cli2": "^0.14.0",
-    "prettier": "^3.3.3"
+    "prettier": "^3.6.2",
+    "recast": "^0.23.11"
   },
   "resolutions": {
     "@rspack/core": "1.0.14"

src/css/custom.css

@@ -10,12 +10,13 @@
   --primary-saturation: 53.2%;
   --primary-lightness: 50.2%;
 
-  --ifm-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,
-    Consolas, Liberation Mono, Courier New, monospace;
-  --ifm-font-family-base: ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
-    Noto Color Emoji;
+  --ifm-font-family-monospace:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
+    Courier New, monospace;
+  --ifm-font-family-base:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+    Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 
   --ifm-code-font-size: 85%;