chore(release): v0.1.2

.github/copilot-instructions.md

@@ -0,0 +1,34 @@
+# Copilot instructions (wp-headless)
+
+## Overview
+- This project is a full WordPress install (core lives in `wp-admin/` + `wp-includes/`). Treat core files as upstream: **don’t implement features by editing WordPress core or plugins**.
+- Project-specific code lives in `wp-content/themes/moonshine/`:
+- “Headless” stack is assembled via custom theme and plugins:
+  - `wp-content/themes/moonshine/` provides the WordPress PHP theme logic and Nuxt frontend.
+  - `wp-content/plugins/wp-graphql/` provides the GraphQL endpoint (typically `/graphql`).
+  - `wp-content/plugins/wpgraphql-acf/` exposes ACF fields in the GraphQL schema.
+  - `wp-content/plugins/wp-graphql-headless-login/` provides GraphQL-based authentication flows.
+
+## Where to make changes
+- **Changes should only be made in the Moonshine theme `wp-content/themes/moonshine/`**
+- WordPress PHP theme logic lives in `wp-content/themes/moonshine/includes/`.
+- Nuxt frontend (Nuxt 4): `wp-content/themes/moonshine/`
+  - App entry & routes: `wp-content/themes/moonshine/app/` (catch-all route is `app/pages/[...uri].vue`).
+  - Config: `wp-content/themes/moonshine/nuxt.config.ts`.
+  - Package manager: **pnpm** (`pnpm-lock.yaml` is present).
+
+## Developer workflows
+- **WP Headless** - WordPress Composer project (root folder):
+  - Install PHP deps (also manages WP plugins/themes via Composer repos): `composer install`.
+  - Update PHP deps / WordPress plugins: `composer update`.
+  - Composer uses an internal Satis repo (`https://satis.ledevsimple.ca`) plus `wpackagist.org`.
+  - PHP linting (phpcs):`composer lint`
+  - PHP beautifier (phpcbf): `composer lintfix`
+- **Moonshine** - Headless WordPress theme based on Nuxt 4 (`wp-content/themes/moonshine/`):
+  - Dev: `pnpm dev`
+  - Build: `pnpm build`
+  - Lint (autofix): `pnpm lint`
+
+## Conventions to follow
+- Prefer adding project behavior via WordPress hooks/filters in the theme (`moonshine_*` functions) or via plugins—avoid editing WP core at all cost.
+- In the Nuxt app, prefer the repo’s ESLint/Tailwind conventions (VS Code settings treat `*.css` as TailwindCSS and support Nuxt UI `ui` attributes).

.gitignore

@@ -2,8 +2,10 @@
 /*
 !/.cpanel.yml
 !/.gitea
+!/.github
 !/.gitignore
 !/.vscode
+!/README.md
 !/composer.*
 !/phpcs.xml
 !/wp-content/

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "graphql-config.load.rootDir": "wp-content/themes/moonshine",
+  "tailwindCSS.classAttributes": [
+    "class",
+    "ui"
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "ui:\\s*{([^)]*)\\s*}",
+      "(?:'|\"|`)([^']*)(?:'|\"|`)"
+    ]
+  ],
+  "typescript.tsdk": "wp-content/themes/moonshine/node_modules/typescript/lib"
+}

README.md

@@ -0,0 +1,6 @@
+# WP Headless
+
+Headless WordPress project boilerplate using Nuxt.
+
+[✨  Release notes](/wp-content/themes/moonshine/CHANGELOG.md)
+ 

phpcs.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
 <ruleset name="wp-boilerplate">
   <rule ref="WebsimpleWP"/>
-  <file>wp-content/themes/wp-boilerplate/</file>
+  <file>wp-content/themes/moonshine/</file>
 </ruleset>

wp-content/themes/moonshine/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

wp-content/themes/moonshine/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## v0.1.2
+
+[compare changes](https://gitea.websimple.com/templates/wp-headless/compare/v0.1.1...v0.1.2)
+
+### 🚀 Enhancements
+
+- Initial Nuxt UI configuration (ca2e660)
+- Initial layout with SiteHeader / SiteFooter (3d7a2b2)
+- Update .gitignore and add Copilot instructions (f520db7)
+- Optional SSL for dev server (9b6a86f)
+- Typecheck npm script (33589d4)
+- Initial theme setup (theme features, locale, main menu) (a286047)
+- Initial GraphQL setup with remote WP schema (d0244eb)
+- Initial authentication logic and UX (c109423)
+
 ## v0.1.1
 
 
@@ -8,8 +23,3 @@
 - Initial Moonshine theme - Headless WordPress theme based on Nuxt (b3134fe)
 - CHANGELOG generation using conventional commits (55e16ab)
 - ESLint configuration (e95bbfb)
-
-### ❤️ Contributors
-
-- Pascal Martineau <pascal@lewebsimple.ca>
-

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

@@ -0,0 +1,13 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: "indigo",
+      neutral: "neutral",
+    },
+    button: {
+      slots: {
+        base: "cursor-pointer",
+      },
+    },
+  },
+});

wp-content/themes/moonshine/app/assets/css/_main.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@import "./containers.css";

wp-content/themes/moonshine/app/assets/css/containers.css

@@ -0,0 +1,47 @@
+:root {
+  --ui-container: var(--breakpoint-2xl);
+}
+
+/* Container padding */
+@utility px-container {
+  @apply px-4 sm:px-6 lg:px-8;
+}
+
+/* Container sizes */
+@utility container { @apply mx-auto px-container max-w-(--breakpoint-2xl); }
+@utility container-xl { @apply container max-w-(--breakpoint-xl); }
+@utility container-lg { @apply container max-w-(--breakpoint-lg); }
+@utility container-md { @apply container max-w-(--breakpoint-md); }
+@utility container-sm { @apply container max-w-(--breakpoint-sm); }
+@utility container-fluid { @apply container max-w-screen; }
+@utility container-none { @apply w-full max-w-screen; }
+
+/* Split containers */
+:root {
+  --container-outside-margin: 0;
+  --container-width: 100vw;
+  @variant sm {
+    --container-outside-margin: calc(50vw - theme("screens.sm") / 2);
+    --container-width: theme("screens.sm");
+  }
+  @variant md {
+    --container-outside-margin: calc(50vw - theme("screens.md") / 2);
+    --container-width: theme("screens.md");
+  }
+  @variant lg {
+    --container-outside-margin: calc(50vw - theme("screens.lg") / 2);
+    --container-width: theme("screens.lg");
+  }
+  @variant xl {
+    --container-outside-margin: calc(50vw - theme("screens.xl") / 2);
+    --container-width: theme("screens.xl");
+  }
+  @variant 2xl {
+    --container-outside-margin: calc(50vw - theme("screens.2xl") / 2);
+    --container-width: theme("screens.2xl");
+  }
+}
+
+@utility container-left { @apply ml-(--container-outside-margin) px-container;}
+@utility container-right { @apply mr-(--container-outside-margin) px-container;}
+@utility container-half {  width: calc(var(--container-width) / 2);}

wp-content/themes/moonshine/app/components/auth/AuthConnexionButton.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { isLoggedIn } = useAuth();
+const attrs = computed(() => {
+  return isLoggedIn.value
+    ? {
+        label: "Déconnexion",
+        icon: "i-lucide-log-out",
+      }
+    : {
+        label: "Connexion",
+        icon: "i-lucide-log-in",
+      };
+});
+</script>
+
+<template>
+  <AuthState>
+    <UButton to="/connexion" v-bind="attrs" color="neutral" />
+  </AuthState>
+</template>

wp-content/themes/moonshine/app/components/auth/AuthLoginForm.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { login } = useAuthConnexion();
+const fields = [
+  {
+    name: "username",
+    type: "text" as const,
+    label: "Courriel",
+    placeholder: "Entrez votre courriel",
+    required: true,
+  }, {
+    name: "password",
+    label: "Mot de passe",
+    type: "password" as const,
+    placeholder: "Entrez votre mot de passe",
+    required: true,
+  },
+];
+</script>
+
+<template>
+  <UAuthForm
+    :schema="authLoginFormSchema"
+    :fields="fields"
+    title="Connexion"
+    description="Veuillez vous identifier."
+    loading-auto
+    @submit="login"
+  />
+</template>

wp-content/themes/moonshine/app/components/auth/AuthLogoutForm.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { logout } = useAuthConnexion();
+</script>
+
+<template>
+  <div class="w-full space-y-6">
+    <div class="flex flex-col text-center">
+      <div class="text-xl text-pretty font-semibold text-highlighted">
+        Déconnexion
+      </div>
+      <div class="mt-1 text-base text-pretty text-muted">
+        Veuillez confirmer la déconnexion.
+      </div>
+    </div>
+    <UButton
+      icon="i-lucide-log-out"
+      block
+      loading-auto
+      to="#"
+      label="Déconnexion"
+      @click="logout()"
+    />
+  </div>
+</template>

wp-content/themes/moonshine/app/components/auth/AuthRedirecting.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="w-full space-y-6">
+    <div class="flex flex-col text-center">
+      <div class="text-xl text-pretty font-semibold text-highlighted">
+        Redirection en cours
+      </div>
+      <div class="mt-1 text-base text-pretty text-muted">
+        Veuillez patienter...
+      </div>
+    </div>
+  </div>
+</template>

wp-content/themes/moonshine/app/components/sections/SectionAuthConnexion.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { isLoggedIn } = useAuth();
+const { isRedirecting } = useAuthConnexion();
+</script>
+
+<template>
+  <section data-section-name="auth-connexion" class="py-12">
+    <div class="container-sm">
+      <AuthState>
+        <AuthRedirecting v-if="isRedirecting" />
+        <template v-else>
+          <AuthLogoutForm v-if="isLoggedIn" />
+          <AuthLoginForm v-else />
+        </template>
+      </AuthState>
+    </div>
+  </section>
+</template>

wp-content/themes/moonshine/app/components/site/SiteFooter.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <UFooter id="site-footer">
+    <template #left>
+      <SiteFooterCopyright />
+    </template>
+    <template #right>
+      <SiteFooterCredits />
+    </template>
+  </UFooter>
+</template>

wp-content/themes/moonshine/app/components/site/SiteFooterCopyright.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { data } = await useGraphQLQuery("GeneralSettings", undefined, { cache: { ttl: 0 } });
+</script>
+
+<template>
+  <div>
+    © {{ new Date().getFullYear() }}
+    <span v-if="data.generalSettings?.title">{{ data.generalSettings.title }}</span>
+  </div>
+</template>

wp-content/themes/moonshine/app/components/site/SiteFooterCredits.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-center gap-1">
+    Fait avec <UIcon name="i-lucide-heart" /> par
+    <ULink href="https://websimple.com" target="_blank" external title="Site web développé par Websimple">Websimple</ULink>
+  </div>
+</template>

wp-content/themes/moonshine/app/components/site/SiteHeader.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const title = "Moonshine";
+</script>
+
+<template>
+  <UHeader :title="title">
+    <template #right>
+      <AuthConnexionButton />
+    </template>
+  </UHeader>
+</template>

wp-content/themes/moonshine/app/composables/useAuth.ts

@@ -0,0 +1,6 @@
+export function useAuth() {
+  const { loggedIn: isLoggedIn, session } = useUserSession();
+  const hasRole = (role: string) => session.value?.user?.roles?.includes(role) || false;
+  const isAdmin = computed(() => hasRole("administrator"));
+  return { isLoggedIn, hasRole, isAdmin };
+}

wp-content/themes/moonshine/app/composables/useAuthConnexion.ts

@@ -0,0 +1,56 @@
+import z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+export const authLoginFormSchema = z.object({
+  username: z.email("Courriel invalide"),
+  password: z.string("Veuillez saisir votre mot de passe"),
+});
+
+export type AuthLoginForm = z.infer<typeof authLoginFormSchema>;
+
+const isRedirecting = ref(false);
+
+export function useAuthConnexion() {
+  const { fetch: refreshUserSession } = useUserSession();
+  const routeRedirect = useRoute().query.redirect as string || undefined;
+
+  // Helper: Redirect after login / logout
+  async function redirectTo(to: string | undefined) {
+    isRedirecting.value = true;
+    await delay(1000);
+    await refreshUserSession();
+    await navigateTo(to || routeRedirect || "/");
+    isRedirecting.value = false;
+  }
+
+  // Login
+  const { mutate: loginMutate } = useGraphQLMutation("AuthLogin");
+  async function login({ data: variables }: FormSubmitEvent<AuthLoginForm>, redirect?: string) {
+    try {
+      const { data } = await loginMutate(variables);
+      if (!data.login) {
+        throw new Error(`Échec de la connexion par mot de passe.`);
+      }
+      await redirectTo(redirect);
+    }
+    catch (error) {
+      console.log(error);
+    }
+  }
+
+  // Logout
+  async function logout(redirect?: string) {
+    try {
+      const result = await $fetch("/api/logout", { method: "POST" });
+      if (!result.success) {
+        throw new Error("Échec de la déconnexion.");
+      }
+      await redirectTo(redirect);
+    }
+    catch (error) {
+      console.log(error);
+    }
+  }
+
+  return { isRedirecting, login, logout };
+}

wp-content/themes/moonshine/app/error.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { fr } from "@nuxt/ui/locale";
+import type { NuxtError } from "#app";
+
+const props = defineProps<{ error: NuxtError }>();
+const formattedError = computed(() => {
+  const error = {
+    statusCode: props.error.statusCode,
+    statusMessage: props.error.statusMessage,
+    message: props.error.message,
+  };
+  switch (error.statusCode) {
+    case 404:
+      error.statusMessage = "Page non trouvée";
+      break;
+    case 500:
+      error.message = "Erreur interne du serveur.";
+      break;
+  }
+  return error;
+});
+</script>
+
+<template>
+  <UApp :locale="fr">
+    <UError :error="formattedError" />
+  </UApp>
+</template>

wp-content/themes/moonshine/app/graphql/AuthLogin.mutation.gql

@@ -0,0 +1,19 @@
+fragment AuthUser on User {
+	id
+	email
+	roles {
+		nodes {
+			name
+		}
+	}
+}
+
+mutation AuthLogin($username: String!, $password: String!) {
+login( input: { provider: PASSWORD, credentials: { username: $username, password: $password }}) {
+    authToken
+    refreshToken
+    user {
+      ...AuthUser
+    }
+  }
+}

wp-content/themes/moonshine/app/graphql/AuthRefreshToken.mutation.gql

@@ -0,0 +1,5 @@
+mutation AuthRefreshToken($refreshToken: String!) {
+	refreshToken( input: { refreshToken: $refreshToken }) {
+		authToken
+	}
+}

wp-content/themes/moonshine/app/graphql/GeneralSettings.query.gql

@@ -0,0 +1,6 @@
+query GeneralSettings {
+  generalSettings {
+    title
+    description
+  }
+}

wp-content/themes/moonshine/app/layouts/default.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import { fr } from "@nuxt/ui/locale";
 </script>
 
 <template>
-  <div id="layout-default">
-    <NuxtPage />
-  </div>
+  <UApp id="layout-default" :locale="fr">
+    <SiteHeader />
+    <UMain>
+      <slot />
+    </UMain>
+    <SiteFooter />
+  </UApp>
 </template>

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

@@ -2,7 +2,5 @@
 </script>
 
 <template>
-  <div id="page-node-from-uri">
-    <h1>Moonshine</h1>
-  </div>
+  <div id="page-node-from-uri" />
 </template>

wp-content/themes/moonshine/app/pages/connexion.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div id="page-connexion">
+    <SectionAuthConnexion />
+  </div>
+</template>

wp-content/themes/moonshine/functions.php

@@ -1 +1,4 @@
 <?php
+
+// Core
+require_once __DIR__ . '/includes/core/theme-setup.php';

wp-content/themes/moonshine/graphql.config.json

@@ -0,0 +1,4 @@
+{
+  "schema": "./server/graphql/schema.graphql",
+  "documents": "**/*.gql"
+}

wp-content/themes/moonshine/includes/core/theme-setup.php

@@ -0,0 +1,18 @@
+<?php
+
+// Setup theme
+add_action( 'after_setup_theme', 'moonshine_after_setup_theme' );
+function moonshine_after_setup_theme() {
+	// Load textdomain
+	load_theme_textdomain( 'moonshine', get_theme_file_path( 'languages' ) );
+
+	// Theme features
+	add_theme_support( 'custom-logo' );
+	add_theme_support( 'editor-styles' );
+	remove_theme_support( 'core-block-patterns' );
+
+	// Register menus
+	register_nav_menu( 'main', __( "Main menu", 'moonshine' ) );
+
+	// Register sidebars
+}

wp-content/themes/moonshine/languages/fr_CA.l10n.php

@@ -0,0 +1,24 @@
+<?php
+return array(
+	'project-id-version'        => 'Moonshine',
+	'report-msgid-bugs-to'      => '',
+	'pot-creation-date'         => '2026-01-13 15:52+0000',
+	'po-revision-date'          => '2026-01-13 15:53+0000',
+	'last-translator'           => '',
+	'language-team'             => 'Français du Canada',
+	'language'                  => 'fr_CA',
+	'plural-forms'              => 'nplurals=2; plural=n > 1;',
+	'mime-version'              => '1.0',
+	'content-type'              => 'text/plain; charset=UTF-8',
+	'content-transfer-encoding' => '8bit',
+	'x-generator'               => 'Loco https://localise.biz/',
+	'x-loco-version'            => '2.8.1; wp-6.9; php-8.3.27',
+	'x-domain'                  => 'moonshine',
+	'messages'                  => array(
+		'Headless WordPress theme based on Nuxt.' => 'Thème Wordpress headless basé sur Nuxt.',
+		'https://websimple.com/'                  => 'https://websimple.com/',
+		'Main menu'                               => 'Menu principal',
+		'Moonshine'                               => 'Moonshine',
+		'Pascal Martineau '                       => 'Pascal Martineau ',
+	),
+);

wp-content/themes/moonshine/languages/fr_CA.po

@@ -0,0 +1,36 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Moonshine\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2026-01-13 15:52+0000\n"
+"PO-Revision-Date: 2026-01-13 15:53+0000\n"
+"Last-Translator: \n"
+"Language-Team: Français du Canada\n"
+"Language: fr_CA\n"
+"Plural-Forms: nplurals=2; plural=n > 1;\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Loco https://localise.biz/\n"
+"X-Loco-Version: 2.8.1; wp-6.9; php-8.3.27\n"
+"X-Domain: moonshine"
+
+#. Description of the theme
+msgid "Headless WordPress theme based on Nuxt."
+msgstr "Thème Wordpress headless basé sur Nuxt."
+
+#. Author URI of the theme
+msgid "https://websimple.com/"
+msgstr "https://websimple.com/"
+
+#: includes/core/theme-setup.php:15
+msgid "Main menu"
+msgstr "Menu principal"
+
+#. Name of the theme
+msgid "Moonshine"
+msgstr "Moonshine"
+
+#. Author of the theme
+msgid "Pascal Martineau "
+msgstr "Pascal Martineau "

wp-content/themes/moonshine/languages/moonshine.pot

@@ -0,0 +1,37 @@
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Moonshine\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2026-01-13 15:52+0000\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: \n"
+"Language: \n"
+"Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Loco https://localise.biz/\n"
+"X-Loco-Version: 2.8.1; wp-6.9; php-8.3.27\n"
+"X-Domain: moonshine"
+
+#. Description of the theme
+msgid "Headless WordPress theme based on Nuxt."
+msgstr ""
+
+#. Author URI of the theme
+msgid "https://websimple.com/"
+msgstr ""
+
+#: includes/core/theme-setup.php:15
+msgid "Main menu"
+msgstr ""
+
+#. Name of the theme
+msgid "Moonshine"
+msgstr ""
+
+#. Author of the theme
+msgid "Pascal Martineau "
+msgstr ""

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

@@ -2,11 +2,26 @@
 export default defineNuxtConfig({
 
   modules: [
+    "@lewebsimple/nuxt-graphql",
     "@nuxt/eslint",
+    "@nuxt/ui",
+    "nuxt-auth-utils",
   ],
 
+  components: {
+    dirs: [
+      { path: "~/components", pathPrefix: false },
+    ],
+  },
+
   devtools: { enabled: true },
 
+  css: ["~/assets/css/_main.css"],
+
+  ui: {
+    colorMode: false,
+  },
+
   compatibilityDate: "2026-01-01",
 
   eslint: {
@@ -21,4 +36,15 @@ export default defineNuxtConfig({
     },
   },
 
+  graphql: {
+    context: "server/graphql/context.ts",
+    schemas: {
+      wp: {
+        type: "remote",
+        url: `${process.env.NUXT_WP_URL || "https://wp-headless.ledevsimple.ca"}/graphql`,
+        middleware: "server/graphql/wp-middleware.ts",
+      },
+    },
+    saveSdl: "server/graphql/schema.graphql",
+  },
 });

wp-content/themes/moonshine/package.json

@@ -1,27 +1,43 @@
 {
   "name": "@lewebsimple/moonshine",
   "description": "Headless WordPress theme based on Nuxt.",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev --host 0.0.0.0",
+    "dev": "nuxt dev",
     "lint": "eslint --fix .",
     "postinstall": "pnpm --sequential /postinstall:.*/",
     "postinstall:nuxt": "nuxt prepare",
     "preview": "nuxt preview",
-    "release": "pnpm lint && changelogen --release --push"
+    "release": "pnpm lint && pnpm typecheck && changelogen --noAuthors --release --push",
+    "typecheck": "nuxt typecheck"
   },
   "dependencies": {
+    "@iconify-json/lucide": "^1.2.84",
+    "@lewebsimple/nuxt-graphql": "^0.4.0",
+    "@nuxt/ui": "4.3.0",
+    "jwt-decode": "^4.0.0",
     "nuxt": "^4.2.2",
+    "nuxt-auth-utils": "^0.5.27",
+    "tailwindcss": "^4.1.18",
     "vue": "^3.5.26",
-    "vue-router": "^4.6.4"
+    "vue-router": "^4.6.4",
+    "zod": "^4.3.5"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.12.1",
     "changelogen": "^0.6.2",
-    "eslint": "^9.39.2"
+    "eslint": "^9.39.2",
+    "typescript": "^5.9.3",
+    "vue-tsc": "^3.2.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "@tiptap/core": "3.14.0",
+      "@tiptap/pm": "3.14.0"
+    }
   },
   "changelog": {
     "types": {

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

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

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

@@ -0,0 +1,12 @@
+import { defineEventHandler } from "h3";
+
+export default defineEventHandler(async (event) => {
+  try {
+    await handleLogout(event);
+    return { success: true, message: "Déconnexion réussie" };
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : "Une erreur est survenue lors de la déconnexion.";
+    return { success: false, message };
+  }
+});

wp-content/themes/moonshine/server/graphql/context.ts

@@ -0,0 +1,11 @@
+import { defineGraphQLContext } from "@lewebsimple/nuxt-graphql/helpers";
+import type { AuthLoginMutation } from "#graphql/typed-documents";
+
+export default defineGraphQLContext(async (event) => {
+  const authToken = await getAuthToken(event);
+
+  return {
+    authToken,
+    handleLogin: async (loginData: AuthLoginMutation) => handleLogin(event, loginData),
+  };
+});

wp-content/themes/moonshine/server/graphql/wp-middleware.ts

@@ -0,0 +1,20 @@
+import type { AuthLoginMutation } from "#build/graphql/typed-documents";
+import { defineRemoteExecMiddleware } from "@lewebsimple/nuxt-graphql/helpers";
+
+export default defineRemoteExecMiddleware({
+  onRequest({ context, fetchOptions }) {
+    // Attach auth token from context to request headers
+    if (context.authToken) {
+      fetchOptions.headers.set("Authorization", `Bearer ${context.authToken}`);
+    }
+  },
+  async onResponse({ operationName, response, context }) {
+    // Save auth token in user session
+    if (operationName === "AuthLogin") {
+      const { data } = await response.json() as { data?: AuthLoginMutation };
+      if (data) {
+        await context.handleLogin(data);
+      }
+    }
+  },
+});

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

@@ -0,0 +1,75 @@
+import type { H3Event } from "h3";
+import { GraphQLClient } from "graphql-request";
+import { jwtDecode } from "jwt-decode";
+import type { User } from "#auth-utils";
+import { type AuthUserFragment, type AuthLoginMutation, AuthRefreshTokenDocument } from "#graphql/typed-documents";
+
+// Handle login result and store user session
+export async function handleLogin(event: H3Event, loginData: AuthLoginMutation) {
+  if (!loginData?.login) {
+    return;
+  }
+  const { user, authToken, refreshToken } = loginData.login;
+  if (!user || !authToken || !refreshToken) {
+    return;
+  }
+  await setUserSession(event, {
+    user: getAuthUser(user),
+    secure: {
+      authToken,
+      refreshToken,
+    },
+    loggedInAt: new Date().toISOString(),
+  });
+}
+
+// Handle user logout by clearing session
+export async function handleLogout(event: H3Event) {
+  await clearUserSession(event);
+}
+
+// Convert AuthUserFragment to nuxt-auth-utils User
+function getAuthUser(user: AuthUserFragment): User {
+  return {
+    id: Number(user.id),
+    email: user.email!,
+    roles: extractNodes(user.roles).map(({ name }) => name!) || [],
+  };
+}
+
+// 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`);
+  const data = await client.request(AuthRefreshTokenDocument, { refreshToken });
+  return data.refreshToken?.authToken || undefined;
+}
+
+// Get auth token from user session (refresh if needed)
+export async function getAuthToken(event: H3Event): Promise<string | undefined> {
+  // Retrieve user session, return if none
+  const session = await getUserSession(event);
+  if (!session.secure) {
+    return;
+  }
+
+  // Extract tokens and check expiration
+  const { authToken, refreshToken } = session.secure;
+  const decoded = jwtDecode<{ exp: number }>(authToken);
+  const isExpired = decoded.exp * 1000 < Date.now();
+  if (isExpired) {
+    try {
+      const newAuthToken = await refreshAuthToken(refreshToken);
+      if (!newAuthToken) {
+        throw new Error("Impossible de rafraîchir le jeton d'authentification.");
+      }
+      session.secure.authToken = newAuthToken;
+      await setUserSession(event, session);
+    }
+    catch {
+      await clearUserSession(event);
+      return;
+    }
+  }
+
+  return session.secure.authToken;
+}

wp-content/themes/moonshine/shared/types/auth.d.ts

@@ -0,0 +1,19 @@
+// auth.d.ts
+declare module "#auth-utils" {
+  interface User {
+    id: number;
+    email: string;
+    roles: string[];
+  }
+
+  interface UserSession {
+    loggedInAt: string;
+  }
+
+  interface SecureSessionData {
+    authToken: string;
+    refreshToken: string;
+  }
+}
+
+export { };

wp-content/themes/moonshine/shared/utils/delay.ts

@@ -0,0 +1,3 @@
+export async function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

wp-content/themes/moonshine/shared/utils/graphql.ts

@@ -0,0 +1,4 @@
+// Helper: Extracts nodes from a GraphQL connection object, returning an empty array if nodes are absent.
+export function extractNodes<T>(connection: { nodes?: T[] } | null | undefined): T[] {
+  return connection?.nodes || [] as T[];
+}