Merge pull request #464 from thejackshelton/cloudflare-shiki

revert to pr 458

Author: thejackshelton

apps/website/README.md

@@ -63,9 +63,3 @@ The production build will generate client and server modules by running both cli
 ```shell
 pnpm build # or `yarn build`
 ```
-
-## Static Site Generator (Node.js)
-
-```
-pnpm build.server
-```

apps/website/adapters/static/vite.config.ts renamed to apps/website/adapters/cloudflare-pages/vite.config.ts

@@ -1,4 +1,4 @@
-import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite';
+import { cloudflarePagesAdapter } from '@builder.io/qwik-city/adapters/cloudflare-pages/vite';
 import { extendConfig } from '@builder.io/qwik-city/vite';
 import baseConfig from '../../vite.config';
 
@@ -7,12 +7,14 @@ export default extendConfig(baseConfig, () => {
     build: {
       ssr: true,
       rollupOptions: {
-        input: ['@qwik-city-plan'],
+        input: ['apps/website/src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
       },
     },
     plugins: [
-      staticAdapter({
-        origin: 'https://qwikui.com/',
+      cloudflarePagesAdapter({
+        // ssg: {
+        //   include: ['/*'],
+        // }
       }),
     ],
   };

apps/website/package.json

@@ -9,8 +9,5 @@
     "@qwik-ui/fluffy": "workspace:*",
     "@qwik-ui/material": "workspace:*",
     "@qwik-ui/primitives": "workspace:*"
-  },
-  "scripts": {
-    "build.server": "vite build -c adapters/static/vite.config.ts"
   }
 }

apps/website/project.json

@@ -55,7 +55,7 @@
           "mode": "production"
         },
         "production": {
-          "configFile": "apps/website/adapters/static/vite.config.ts"
+          "configFile": "apps/website/adapters/cloudflare-pages/vite.config.ts"
         }
       },
       "dependsOn": []
@@ -67,6 +67,22 @@
         "cwd": "apps/website"
       }
     },
+    "deploy": {
+      "executor": "@k11r/nx-cloudflare-wrangler:deploy-page",
+      "options": {
+        "dist": "dist/apps/website/client",
+        "branch": "main",
+        "projectName": "qwik-ui"
+      },
+      "dependsOn": ["build-cloudflare"]
+    },
+    "preview-cloudflare": {
+      "executor": "@k11r/nx-cloudflare-wrangler:serve-page",
+      "options": {
+        "dist": "dist/apps/website/client"
+      },
+      "dependsOn": ["build-cloudflare"]
+    },
     "build-cloudflare": {
       "executor": "nx:run-commands",
       "options": {

apps/website/src/entry.cloudflare-pages.tsx

@@ -0,0 +1,24 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the  entry point for cloudflare-pages when building for production.
+ *
+ * Learn more about the cloudflare integration here:
+ * - https://qwik.builder.io/integrations/deployments/cloudflare-pages/
+ *
+ */
+import {
+  createQwikCity,
+  type PlatformCloudflarePages,
+} from '@builder.io/qwik-city/middleware/cloudflare-pages';
+import qwikCityPlan from '@qwik-city-plan';
+import { manifest } from '@qwik-client-manifest';
+import render from './entry.ssr';
+
+declare global {
+  interface QwikCityPlatform extends PlatformCloudflarePages {}
+}
+
+const fetch = createQwikCity({ render, qwikCityPlan, manifest });
+
+export { fetch };

apps/website/src/routes/docs/_components/highlight/highlight.tsx

@@ -42,6 +42,7 @@ export const Highlight = component$(
         modifiedCode = partsOfCode[0];
       }
 
+      console.log(highlighter);
       codeSig.value = highlighter.codeToHtml(modifiedCode, { lang: language });
     });
 

apps/website/src/routes/docs/headless/(components)/badge/index.tsx

@@ -0,0 +1,59 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Badge } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStylesScoped$(`
+    h1 { margin: 0.5rem 0 1rem 0; padding-top: 1rem; font-weight: bold; }
+    .container { display: flex; gap: 10px; } .customBtnCls { background-color: lightcoral;}
+    svg { width: 1rem; height: 1rem; stroke: currentColor }
+    .badge-lg {height: 1.5rem;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      padding-left: 0.688rem;
+      padding-right: 0.688rem;
+    }
+  `);
+  return (
+    <>
+      <h2>This is the documentation for the Badge</h2>
+
+      <h1>Badge Example</h1>
+
+      <Badge class="badge">badge</Badge>
+
+      <h1>Color</h1>
+
+      <div class="container">
+        <Badge class="badge">neutral</Badge>
+        <Badge class="badge" style="background-color: lightblue">
+          lightblue
+        </Badge>
+      </div>
+
+      <h1>Badge sizes</h1>
+      <Badge class="badge badge-lg">Badge lg</Badge>
+
+      <h1>Empty badge</h1>
+      <Badge class="badge" />
+
+      <h1>Badge with state colors</h1>
+      <Badge class="badge">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+        info
+      </Badge>
+
+      <h1>Badge in a text</h1>
+      <h2>
+        Heading
+        <Badge class="badge">NEW</Badge>
+      </h2>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/(components)/toggle/index.mdx

@@ -16,6 +16,12 @@ A toggle component is a primitive that us used to quickly switch between two pos
 
 {' '}
 
+<Example01>
+  ```tsx
+  <Toggle pressed onClick$={$(() => console.log('Toggle'))} />
+  ```
+</Example01>
+
 ## Building blocks
 
   <CodeExample>

package.json

@@ -34,6 +34,7 @@
     "@fontsource-variable/inter": "5.0.8",
     "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
     "@jscutlery/semver": "^3.1.0",
+    "@k11r/nx-cloudflare-wrangler": "2.7.1",
     "@nx/cypress": "16.9.1",
     "@nx/eslint-plugin": "16.9.1",
     "@nx/js": "16.9.1",