feat: Deploy to Cloudflare workers

.gitea/workflows/deploy.yaml

@@ -0,0 +1,56 @@
+name: Deployment
+run-name: ${{ gitea.actor }} deploying ${{ gitea.repository.name }}
+on: [push]
+
+env:
+  NUXT_PROJECT_PATH: wp-content/themes/moonshine
+  PNPM_STORE_DIR: /cache/wp-scripts/pnpm
+
+jobs:
+  
+  wordpress:
+    runs-on: ubuntu-websimple
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install WordPress scripts
+        env:
+          TEMPLATES_REPO_TOKEN: ${{ secrets.TEMPLATES_REPO_TOKEN }}
+        run: |
+          git clone https://$TEMPLATES_REPO_TOKEN@gitea.websimple.com/templates/wp-scripts.git /tmp/wp-scripts
+
+      - name: Run deployment script
+        env:
+          REMOTE_HOST: ${{ vars.REMOTE_HOST }}
+          REMOTE_PORT: ${{ vars.REMOTE_PORT }}
+          REMOTE_USER: ${{ vars.REMOTE_USER }}
+          REMOTE_PATH: ${{ vars.REMOTE_PATH }}
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+        run: /tmp/wp-scripts/wp-deploy.sh --skip-node
+
+  nuxt:
+    runs-on: ubuntu-websimple
+    defaults:
+      run:
+        working-directory: ${{ env.NUXT_PROJECT_PATH }}
+    env:
+      NUXT_SITE_ENV: ${{ vars.NUXT_SITE_ENV }}
+      NUXT_SITE_URL: ${{ vars.NUXT_SITE_URL }}
+      NUXT_WP_URL: ${{ vars.NUXT_WP_URL }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js dependencies
+        run: pnpm install --frozen-lockfile --store-dir $PNPM_STORE_DIR
+          
+      - name: Build Nuxt project
+        run: pnpm build
+
+      - name: Deploy to Cloudflare Workers
+        run: pnpm wrangler deploy
+        env:
+          CLOUDFLARE_ACCOUNT_ID: ${{ vars.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

wp-content/themes/moonshine/.gitignore

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# Wrangler files
+.wrangler

wp-content/themes/moonshine/README.md

@@ -2,7 +2,7 @@
 
 Thème WordPress en headless basé sur Nuxt.
 
-## Varaibles d'environnement
+## Variables d'environnement
 
 | Nom | Description | Exemple | Requise |
 |-----|-------------|---------|---------|

wp-content/themes/moonshine/app/pages/[...uri].vue

@@ -2,7 +2,7 @@
 // Resolve Node component from URI
 const { path: uri } = useRoute();
 const { data } = await useAsyncGraphQLQuery("NodeByUri", { uri });
-if (!data.value.nodeByUri) {
+if (!data.value?.nodeByUri) {
   throw createError({ statusCode: 404, message: `La page demandée est introuvable: ${uri}`, fatal: true });
 }
 const componentName = `Node${data.value.nodeByUri.__typename}`;
@@ -14,8 +14,7 @@ useNodeSeo(data.value.nodeByUri);
 </script>
 
 <template>
-  <div v-if="data.nodeByUri" id="page-node-from-uri">
+  <div v-if="data?.nodeByUri" id="page-node-from-uri">
     <Component :is="componentName" v-bind="data.nodeByUri" />
-    <pre>{{ data.nodeByUri }}</pre>
   </div>
 </template>

wp-content/themes/moonshine/nuxt.config.ts

@@ -1,3 +1,13 @@
+const siteUrl = process.env.NUXT_SITE_URL;
+if (!siteUrl) {
+  throw new Error(`NUXT_SITE_URL is not defined. Make sure to set it in your build environment variables.`);
+}
+
+const wpUrl = process.env.NUXT_WP_URL;
+if (!wpUrl) {
+  throw new Error(`NUXT_WP_URL is not defined. Make sure to set it in your build environment variables.`);
+}
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 
@@ -20,7 +30,7 @@ export default defineNuxtConfig({
   css: ["~/assets/css/_main.css"],
 
   site: {
-    url: process.env.NUXT_SITE_URL || undefined,
+    url: siteUrl,
     name: "WP Headless",
     defaultLocale: "fr",
   },
@@ -31,6 +41,23 @@ export default defineNuxtConfig({
 
   compatibilityDate: "2026-01-01",
 
+  nitro: {
+    preset: "cloudflare_module",
+    cloudflare: {
+      deployConfig: true,
+      nodeCompat: true,
+      wrangler: {
+        name: "foobar",
+        compatibility_date: "2026-01-27",
+        vars: {
+          NODE_ENV: "production",
+          NUXT_SITE_URL: siteUrl,
+          NUXT_WP_URL: wpUrl,
+        },
+      },
+    },
+  },
+
   eslint: {
     config: {
       stylistic: {
@@ -45,19 +72,15 @@ export default defineNuxtConfig({
 
   graphql: {
     server: {
-      context: ["~~/server/graphql/context"],
+      context: ["server/graphql/context"],
       schema: {
-        wp: {
+        wp: { type: "remote", endpoint: `${wpUrl}/graphql`, hooks: ["server/graphql/wp-hooks"] },
-          type: "remote",
-          endpoint: `${process.env.NUXT_WP_URL}/graphql`,
-          hooks: ["~~/server/graphql/wp-hooks"],
-        },
       },
     },
   },
 
   robots: {
-    sitemap: `${process.env.NUXT_WP_URL}/sitemap_index.xml`,
+    sitemap: `${wpUrl}/sitemap_index.xml`,
   },
 
   sitemap: false,

wp-content/themes/moonshine/package.json

@@ -9,20 +9,19 @@
     "editor-style": "pnpx @tailwindcss/cli -i ./app/assets/css/_main.css -o ./editor-style.css --minify",
     "dev": "nuxt dev",
     "lint": "eslint --fix .",
-    "postinstall": "pnpm --sequential /postinstall:.*/",
+    "postinstall": "nuxt prepare",
-    "postinstall:nuxt": "nuxt prepare",
+    "preview": "pnpm run build && wrangler dev --port 3000",
-    "preview": "nuxt preview",
     "release": "pnpm lint && changelogen --noAuthors --release --push",
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
     "@iconify-json/lucide": "^1.2.87",
-    "@lewebsimple/nuxt-graphql": "^0.5.13",
+    "@lewebsimple/nuxt-graphql": "^0.6.1",
     "@nuxt/ui": "4.3.0",
     "@nuxtjs/seo": "^3.3.0",
     "jwt-decode": "^4.0.0",
     "nuxt": "^4.3.0",
-    "nuxt-auth-utils": "^0.5.27",
+    "nuxt-auth-utils": "^0.5.28",
     "tailwindcss": "^4.1.18",
     "vue": "^3.5.27",
     "vue-router": "^4.6.4",
@@ -33,13 +32,22 @@
     "changelogen": "^0.6.2",
     "eslint": "^9.39.2",
     "typescript": "^5.9.3",
-    "vue-tsc": "^3.2.4"
+    "vue-tsc": "^3.2.4",
+    "wrangler": "^4.61.0"
   },
   "pnpm": {
     "overrides": {
       "@tiptap/core": "3.14.0",
       "@tiptap/pm": "3.14.0"
-    }
+    },
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "sharp",
+      "unrs-resolver",
+      "vue-demi",
+      "workerd"
+    ]
   },
   "changelog": {
     "types": {

wp-content/themes/moonshine/pnpm-workspace.yaml

@@ -1,5 +0,0 @@
-onlyBuiltDependencies:
-  - '@parcel/watcher'
-  - esbuild
-  - unrs-resolver
-  - vue-demi

wp-content/themes/moonshine/server/api/login.post.ts

@@ -1,7 +1,7 @@
 export default defineEventHandler(async (event) => {
   try {
     const variables = await readBody<AuthLoginForm>(event);
-    const { data } = await useServerGraphQLMutation(event, "AuthLogin", variables);
+    const { data } = await useGraphQLOperation(event, "AuthLogin", variables);
     if (!data?.login) {
       throw new Error("INVALID_LOGIN");
     }

wp-content/themes/moonshine/server/utils/auth.ts

@@ -1,9 +1,9 @@
 import type { H3Event } from "h3";
-import { GraphQLClient } from "graphql-request";
 import { jwtDecode } from "jwt-decode";
 import type { User } from "#auth-utils";
 import type { AuthUserFragment, AuthLoginMutationResult } from "#graphql/operations";
 import { AuthRefreshTokenDocument } from "#graphql/operations";
+import type { ResultOf } from "#graphql/registry";
 
 // Handle login result and store user session
 export async function handleLogin(event: H3Event, loginResult: AuthLoginMutationResult) {
@@ -42,9 +42,13 @@ function getAuthUser(user: AuthUserFragment): User {
 
 // Refresh auth token by calling remote GraphQL endpoint directly
 export async function refreshAuthToken(refreshToken: string): Promise<string | undefined> {
-  const client = new GraphQLClient(`${process.env.NUXT_WP_URL || "https://wp-headless.ledevsimple.ca"}/graphql`);
+  // TODO: const { public: { graphql: { endpoint } } } = useRuntimeConfig();
-  const data = await client.request(AuthRefreshTokenDocument, { refreshToken });
+  const endpoint = `${process.env.NUXT_WP_URL || "https://cultureat.ledevsimple.ca"}/graphql`;
-  return data.refreshToken?.authToken || undefined;
+  const { data } = await executeGraphQLHTTP<ResultOf<"AuthRefreshToken">>({
+    query: AuthRefreshTokenDocument,
+    variables: { refreshToken },
+  }, { endpoint });
+  return data?.refreshToken?.authToken || undefined;
 }
 
 // Get auth token from user session (refresh if needed)

wp-content/themes/moonshine/style.css

@@ -3,7 +3,7 @@ Theme Name:  Moonshine
 Author:      Pascal Martineau <pascal@lewebsimple.ca>
 Author URI:  https://websimple.com/
 Description: Headless WordPress theme based on Nuxt.
-Version:     0.1.0
+Version:     0.1.6
 Text Domain: moonshine
 Template:    kaliroots
 */

wp-content/themes/moonshine/wrangler.jsonc

@@ -0,0 +1,21 @@
+/**
+ * For more details on how to configure Wrangler, refer to:
+ * https://developers.cloudflare.com/workers/wrangler/configuration/
+ */
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": "./.output/server/index.mjs",
+  /**
+   * Static Assets Binding
+   */
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./.output/public/"
+  },
+  /**
+   * Observability & Analytics
+   */
+  "observability": {
+    "enabled": true
+  },
+}