diff --git a/apps/website/README.md b/apps/website/README.md index 3705c3c6a..69c7f279d 100644 --- a/apps/website/README.md +++ b/apps/website/README.md @@ -35,7 +35,7 @@ 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 @@ -43,7 +43,7 @@ pnpm qwik add # or `yarn qwik add` 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,7 +53,7 @@ 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 @@ -61,5 +61,11 @@ pnpm preview # or `yarn preview` 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 ``` diff --git a/apps/website/adapters/cloudflare-pages/vite.config.ts b/apps/website/adapters/cloudflare-pages/vite.config.ts deleted file mode 100644 index 8f3036425..000000000 --- a/apps/website/adapters/cloudflare-pages/vite.config.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { cloudflarePagesAdapter } from '@builder.io/qwik-city/adapters/cloudflare-pages/vite'; -import { extendConfig } from '@builder.io/qwik-city/vite'; -import baseConfig from '../../vite.config'; - -export default extendConfig(baseConfig, () => { - return { - build: { - ssr: true, - rollupOptions: { - input: ['apps/website/src/entry.cloudflare-pages.tsx', '@qwik-city-plan'], - }, - }, - plugins: [ - cloudflarePagesAdapter({ - ssg: { - include: ['/*'], - origin: 'https://qwikui.com', - }, - }), - ], - }; -}); diff --git a/apps/website/adapters/static/vite.config.ts b/apps/website/adapters/static/vite.config.ts new file mode 100644 index 000000000..5a0a297d1 --- /dev/null +++ b/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', + }), + ], + }; +}); diff --git a/apps/website/project.json b/apps/website/project.json index b1aa7c9b6..aff989143 100644 --- a/apps/website/project.json +++ b/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": [] diff --git a/apps/website/src/components/highlight/highlight.tsx b/apps/website/src/components/highlight/highlight.tsx index 06bed0143..5bc47d5be 100644 --- a/apps/website/src/components/highlight/highlight.tsx +++ b/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 ( diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts index 19fe368ec..7d3229ee8 100644 --- a/apps/website/vite.config.ts +++ b/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'], + }, }; });