Co-authored-by: Jack Shelton <[email protected]>

docs(shiki): use cloudflareAdapter SSG mode for every page

Author: maiieul

apps/website/adapters/cloudflare-pages/vite.config.ts

@@ -16,9 +16,9 @@ export default extendConfig(baseConfig, () => {
     },
     plugins: [
       cloudflarePagesAdapter({
-        // ssg: {
-        //   include: ['/*'],
-        // }
+        ssg: {
+          include: ['/*'],
+        },
       }),
     ],
   };

apps/website/src/components/highlight/highlight.tsx

@@ -1,12 +1,6 @@
-import {
-  ClassList,
-  PropsOf,
-  component$,
-  useSignal,
-  useVisibleTask$,
-} from '@builder.io/qwik';
+import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
-import { codeToHtml } from 'shikiji';
+import { codeToHtml } from 'shiki';
 import { cn } from '@qwik-ui/utils';
 
 export type HighlightProps = PropsOf<'div'> & {
@@ -29,31 +23,28 @@ export const Highlight = component$(
     const codeSig = useSignal('');
 
     // eslint-disable-next-line qwik/no-use-visible-task
-    useVisibleTask$(
-      async function createHighlightedCode() {
-        let modifiedCode: string = code;
+    useTask$(async function createHighlightedCode() {
+      let modifiedCode: string = code;
 
-        let partsOfCode = modifiedCode.split(splitCommentStart);
-        if (partsOfCode.length > 1) {
-          modifiedCode = partsOfCode[1];
-        }
+      let partsOfCode = modifiedCode.split(splitCommentStart);
+      if (partsOfCode.length > 1) {
+        modifiedCode = partsOfCode[1];
+      }
 
-        partsOfCode = modifiedCode.split(splitCommentEnd);
-        if (partsOfCode.length > 1) {
-          modifiedCode = partsOfCode[0];
-        }
+      partsOfCode = modifiedCode.split(splitCommentEnd);
+      if (partsOfCode.length > 1) {
+        modifiedCode = partsOfCode[0];
+      }
 
-        const str = await codeToHtml(modifiedCode, {
-          lang: language,
-          themes: {
-            light: 'poimandres',
-            dark: 'poimandres',
-          },
-        });
-        codeSig.value = str.toString();
-      },
-      { strategy: 'document-idle' },
-    );
+      const str = await codeToHtml(modifiedCode, {
+        lang: language,
+        themes: {
+          light: 'poimandres',
+          dark: 'poimandres',
+        },
+      });
+      codeSig.value = str.toString();
+    });
 
     return (
       <div class="code-example relative max-h-[31.25rem] rounded-b-sm">

package.json

@@ -176,9 +176,9 @@
     "qwik-themes": "^0.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rehype-pretty-code": "^0.10.2",
+    "rehype-pretty-code": "^0.13.0",
     "sass": "^1.66.1",
-    "shikiji": "0.9.18",
+    "shiki": "1.1.7",
     "specificity": "^1.0.0",
     "storybook": "^7.4.0",
     "storybook-framework-qwik": "^0.2.3",
@@ -215,6 +215,5 @@
   ],
   "nx": {
     "includedScripts": []
-  },
-  "dependencies": {}
+  }
 }