support expressive code in docs

mattjennings · Dec 4, 2023 · 37eb29e · 37eb29e
1 parent 411b61b
commit 37eb29e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 62 deletions.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -30,14 +30,12 @@ export default defineConfig({
     },
   },
   integrations: [
-    liveExamples({
-      commonMeta: 'client:only',
-      wrapper: '/src/layouts/examples/wrappers/WithApp.svelte',
-    }),
     starlight({
       title: 'Svelte Pixi',
       customCss: ['./src/tailwind.css'],
-      expressiveCode: false,
+      expressiveCode: {
+        themes: [codeTheme],
+      },
       social: {
         github: 'https://github.com/mattjennings/svelte-pixi',
       },
@@ -115,6 +113,10 @@ export default defineConfig({
         },
       ],
     }),
+    liveExamples({
+      commonMeta: 'client:only',
+      wrapper: '/src/layouts/examples/wrappers/WithApp.svelte',
+    }),
     svelte({
       extensions: ['.svelte'],
     }),

diff --git a/docs/integrations/live-examples/index.mjs b/docs/integrations/live-examples/index.mjs
@@ -1,6 +1,5 @@
 import remark from './remark.mjs'
 import vite from './vite.mjs'
-import mdx from '@astrojs/mdx'
 import recast from 'recast'
 
 /**
@@ -29,30 +28,11 @@ export default function (options) {
   return {
     name: 'live-examples',
     hooks: {
-      'astro:config:setup': ({ config, updateConfig }) => {
+      'astro:config:setup': ({ updateConfig }) => {
         updateConfig({
-          integrations: [
-            mdx({
-              syntaxHighlight: 'shiki',
-              shikiConfig: config.markdown?.shikiConfig,
-              remarkPlugins: [
-                [
-                  remark,
-                  { ...options, theme: config.markdown?.shikiConfig?.theme },
-                ],
-              ],
-              recmaPlugins: [
-                () => (tree) => {
-                  // console.log(
-                  //   recast.prettyPrint(tree, {
-                  //     tabWidth: 2,
-                  //     quote: 'single',
-                  //   }),
-                  // )
-                },
-              ],
-            }),
-          ],
+          markdown: {
+            remarkPlugins: [[remark, options]],
+          },
           vite: {
             plugins: [vite(options)],
           },

diff --git a/docs/integrations/live-examples/remark.mjs b/docs/integrations/live-examples/remark.mjs
@@ -22,6 +22,7 @@ export default function examples(options) {
 
       if (node.meta && node.meta.split(' ').includes('live')) {
         const meta = [options.commonMeta ?? '', node.meta].join(' ')
+
         const src = node.value
         const i = examples.length
 
@@ -79,6 +80,7 @@ export default function examples(options) {
           default: true,
         })
 
+        const codeNode = { ...node }
         const commonProps = [
           {
             type: 'mdxJsxAttribute',
@@ -133,7 +135,7 @@ export default function examples(options) {
                         type: 'ArrayExpression',
                         elements: meta.split(' ').map((value) => ({
                           type: 'Literal',
-                          value,
+                          value: value ?? '',
                         })),
                       },
                     },
@@ -213,38 +215,7 @@ export default function examples(options) {
                   value: 'code',
                 },
               ],
-              children: [
-                {
-                  type: 'mdxJsxFlowElement',
-                  name: 'Code',
-                  attributes: [
-                    {
-                      type: 'mdxJsxAttribute',
-                      name: 'code',
-                      value: node.value,
-                    },
-                    {
-                      type: 'mdxJsxAttribute',
-                      name: 'lang',
-                      value: node.lang,
-                    },
-                    ...(options.theme
-                      ? [
-                          {
-                            type: 'mdxJsxAttribute',
-                            name: 'theme',
-                            value: options.theme,
-                          },
-                        ]
-                      : []),
-                  ],
-                  children: [],
-                  data: {
-                    _mdxExplicitJsx: true,
-                    _src: node.value,
-                  },
-                },
-              ],
+              children: [codeNode],
             },
           ],
         }
@@ -333,6 +304,8 @@ function getWrapperPathFromMeta(meta) {
 }
 
 function toPOSIX(path) {
+  if (!path) return path
+
   return path.replace(/\\/g, '/')
 }