move to SSG adapter

apps/website/README.md

@@ -35,15 +35,15 @@ Inside your project, you'll see the following directory structure:
 Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
 
 ```shell
-pnpm qwik add # or `yarn qwik add`
+pnpm qwik add # or `pnpm qwik add`
 ```
 
 ## Development
 
 Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
 
 ```shell
-npm start # or `yarn start`
+npm start # or `pnpm start`
 ```
 
 > Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
@@ -53,13 +53,19 @@ npm start # or `yarn start`
 The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
 
 ```shell
-pnpm preview # or `yarn preview`
+pnpm preview # or `pnpm preview`
 ```
 
 ## Production
 
 The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
 
 ```shell
-pnpm build # or `yarn build`
+pnpm build # or `pnpm build`
+```
+
+## Static Site Generator (Node.js)
+
+```shell
+pnpm build.server
 ```

apps/website/adapters/static/vite.config.ts

@@ -0,0 +1,19 @@
+import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite';
+import { extendConfig } from '@builder.io/qwik-city/vite';
+import baseConfig from '../../vite.config';
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ['@qwik-city-plan'],
+      },
+    },
+    plugins: [
+      staticAdapter({
+        origin: 'https://qwikui.com',
+      }),
+    ],
+  };
+});

apps/website/project.json

@@ -47,7 +47,7 @@
           "mode": "production"
         },
         "production": {
-          "configFile": "apps/website/adapters/cloudflare-pages/vite.config.ts"
+          "configFile": "apps/website/adapters/static/vite.config.ts"
         }
       },
       "dependsOn": []

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

@@ -1,23 +1,12 @@
-import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { ClassList, PropsOf, component$, useSignal, useTask$, $ } from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
 import { cn } from '@qwik-ui/utils';
-import poimandres from 'shiki/themes/poimandres.mjs';
-import html from 'shiki/langs/html.mjs';
-import css from 'shiki/langs/css.mjs';
-import tsx from 'shiki/langs/tsx.mjs';
-import { createHighlighterCore, BundledLanguage } from 'shiki/index.mjs';
-
-// Create a single highlighter instance
-const highlighterPromise = createHighlighterCore({
-  themes: [poimandres],
-  langs: [html, css, tsx],
-  loadWasm: import('shiki/wasm'),
-});
+import { codeToHtml } from 'shiki';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
   copyCodeClass?: ClassList;
-  language?: BundledLanguage;
+  language?: 'tsx' | 'html' | 'css';
   splitCommentStart?: string;
   splitCommentEnd?: string;
 };
@@ -33,26 +22,32 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    useTask$(async ({ track }) => {
-      track(() => code);
+    const addShiki$ = $(async () => {
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);
+
       if (partsOfCode.length > 1) {
         modifiedCode = partsOfCode[1];
       }
 
       partsOfCode = modifiedCode.split(splitCommentEnd);
+
       if (partsOfCode.length > 1) {
         modifiedCode = partsOfCode[0];
       }
 
-      const highlighter = await highlighterPromise;
-      const str = highlighter.codeToHtml(modifiedCode, {
+      const str = await codeToHtml(modifiedCode, {
         lang: language,
         theme: 'poimandres',
       });
-      codeSig.value = str;
+
+      codeSig.value = str.toString();
+    });
+
+    useTask$(async ({ track }) => {
+      track(() => code);
+      await addShiki$();
     });
 
     return (

apps/website/vite.config.ts

@@ -105,5 +105,10 @@ export default defineConfig(async () => {
         'Cache-Control': 'public, max-age=600',
       },
     },
+    optimizeDeps: {
+      // Put problematic deps that break bundling here, mostly those with binaries.
+      // For example ['better-sqlite3'] if you use that in server functions.
+      exclude: ['shiki'],
+    },
   };
 });