feat: parseAcfMedia

README.md

@@ -3,4 +3,3 @@
 Headless WordPress project boilerplate using Nuxt.
 
 [✨  Release notes](/wp-content/themes/moonshine/CHANGELOG.md)
- 

composer.json

@@ -33,6 +33,7 @@
   },
   "require": {
     "axepress/wp-graphql-rank-math": "*",
+    "lewebsimple/acf-phone": "*",
     "lewebsimple/advanced-custom-fields-pro": "*",
     "lewebsimple/kaliroots": "*",
     "lewebsimple/wp-graphql-headless-login": "*",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "f563233465b6f95dac3c6b33962f6aed",
+    "content-hash": "e3ce417e8c09ed84502559af141f6530",
     "packages": [
         {
             "name": "axepress/wp-graphql-plugin-boilerplate",
@@ -313,6 +313,43 @@
             ],
             "time": "2024-06-24T20:46:46+00:00"
         },
+        {
+            "name": "lewebsimple/acf-phone",
+            "version": "v3.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/lewebsimple/acf-phone.git",
+                "reference": "cf4c6440e0c2cdf7e422423bb629014204e721bf"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://satis.ledevsimple.ca/dist/lewebsimple/acf-phone/lewebsimple-acf-phone-cf4c6440e0c2cdf7e422423bb629014204e721bf-zip-439080.zip",
+                "reference": "cf4c6440e0c2cdf7e422423bb629014204e721bf",
+                "shasum": "f9d7cbcf27985656245285e5bc035578621f1a69"
+            },
+            "require-dev": {
+                "lewebsimple/wp-phpcs-ruleset": "*",
+                "php-stubs/acf-pro-stubs": "*",
+                "squizlabs/php_codesniffer": "*"
+            },
+            "type": "wordpress-plugin",
+            "scripts": {
+                "post-create-project-cmd": [
+                    "./scripts/post-create.sh"
+                ],
+                "lint": [
+                    "vendor/bin/phpcs"
+                ],
+                "lintfix": [
+                    "vendor/bin/phpcbf"
+                ]
+            },
+            "support": {
+                "source": "https://github.com/lewebsimple/acf-phone/tree/v3.1.0",
+                "issues": "https://github.com/lewebsimple/acf-phone/issues"
+            },
+            "time": "2026-01-30T15:01:34+00:00"
+        },
         {
             "name": "lewebsimple/advanced-custom-fields-pro",
             "version": "v6.7.0.2",

wp-content/themes/moonshine/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## v0.1.11
+
+[compare changes](https://gitea.websimple.com/wp-sites/wp-headless/compare/v0.1.10...v0.1.11)
+
+### 🚀 Enhancements
+
+- MapSocialIcon (6dd13ea)
+- AcfSocial / parseAcfSocial (3199835)
+
+### 🩹 Fixes
+
+- Remove unneeded wrangler main / assets (eea020b)
+- Cloudflare image provider only in production (291fa6e)
+- Wrangler project name (8f037b5)
+- ENABLE_CLOUDFLARE_IMAGE (9c3dcee)
+
+## v0.1.10
+
+[compare changes](https://gitea.websimple.com/templates/wp-headless/compare/v0.1.9...v0.1.10)
+
+### 🚀 Enhancements
+
+- GroupSiteOptions.phoneNumber (ad3c53c)
+- AcfPhone component (6b17201)
+- AcfLink / AcfLinkButton components (115a5d2)
+
+### 💅 Refactors
+
+- OptionsSite => SiteOptions for clearer naming (fefa980)
+
 ## v0.1.9
 
 [compare changes](https://gitea.websimple.com/templates/wp-headless/compare/v0.1.8...v0.1.9)

wp-content/themes/moonshine/README.md

@@ -6,7 +6,14 @@ Thème WordPress en headless basé sur Nuxt.
 
 | Nom | Description | Exemple | Requise |
 |-----|-------------|---------|---------|
-| `NUXT_SESSION_PASSWORD` | Clé secrète pour l'authentification | `date \| md5sum` | ✅ |
-| `NUXT_WP_URL` | URL du backend WordPress | https://wp.exemple.com | ✅ |
-| `NUXT_SITE_URL` | URL du frontend Nuxt | https://www.example.com | ➖ |
 | `NUXT_SITE_ENV` | Environnement | staging \| production | ➖ |
+| `NUXT_SITE_URL` | URL du frontend Nuxt | https://www.example.com | ➖ |
+| `NUXT_WP_URL` | URL du backend WordPress | https://wp.exemple.com | ✅ |
+
+## Secrets
+
+Configurer les secrets nécessaires au projet:
+
+```sh
+pnpm wrangler secret put NUXT_SESSION_PASSWORD
+```

wp-content/themes/moonshine/acf-json/group_abstract_social.json

@@ -0,0 +1,86 @@
+{
+    "key": "group_abstract_social",
+    "title": "Abstract - Social",
+    "fields": [
+        {
+            "key": "field_6855a1d643408",
+            "label": "Médias sociaux",
+            "name": "profiles",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "acfe_repeater_stylised_button": 0,
+            "layout": "table",
+            "pagination": 0,
+            "min": 0,
+            "max": 0,
+            "collapsed": "",
+            "button_label": "Ajouter un élément",
+            "show_in_graphql": 1,
+            "graphql_description": "",
+            "graphql_field_name": "profiles",
+            "graphql_non_null": 1,
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_6855a7e143409",
+                    "label": "URL",
+                    "name": "url",
+                    "aria-label": "",
+                    "type": "url",
+                    "instructions": "",
+                    "required": 1,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "show_in_graphql": 1,
+                    "graphql_description": "",
+                    "graphql_field_name": "url",
+                    "graphql_non_null": 1,
+                    "parent_repeater": "field_6855a1d643408"
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "abstract"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "seamless",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfe_form": 0,
+    "show_in_graphql": 1,
+    "graphql_field_name": "GroupAbstractSocial",
+    "map_graphql_types_from_location_rules": 0,
+    "graphql_types": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1769788591
+}

wp-content/themes/moonshine/acf-json/group_options_site.json

@@ -25,6 +25,104 @@
             "graphql_description": "",
             "graphql_field_name": "email",
             "graphql_non_null": 1
+        },
+        {
+            "key": "field_697cbf414fdd5",
+            "label": "Phone number",
+            "name": "phone_number",
+            "aria-label": "",
+            "type": "phone",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "initial_country": "CA",
+            "return_format": "national",
+            "allow_in_bindings": 0,
+            "show_in_graphql": 1,
+            "graphql_description": "",
+            "graphql_field_name": "phoneNumber",
+            "graphql_non_null": 1
+        },
+        {
+            "key": "field_697cd4c5fc56a",
+            "label": "Médias sociaux",
+            "name": "social",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "graphql_field_name": "social",
+            "clone": [
+                "group_abstract_social"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        },
+        {
+            "key": "field_697cc921234cc",
+            "label": "Liens globaux",
+            "name": "links",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "row",
+            "acfe_seamless_style": 0,
+            "acfe_group_modal": 0,
+            "show_in_graphql": 1,
+            "graphql_description": "",
+            "graphql_field_name": "links",
+            "graphql_non_null": 0,
+            "sub_fields": [
+                {
+                    "key": "field_697cc93e234cd",
+                    "label": "Contact",
+                    "name": "contact",
+                    "aria-label": "",
+                    "type": "link",
+                    "instructions": "",
+                    "required": 1,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "allow_in_bindings": 0,
+                    "show_in_graphql": 1,
+                    "graphql_description": "",
+                    "graphql_field_name": "contact",
+                    "graphql_non_null": 1
+                }
+            ],
+            "acfe_group_modal_close": 0,
+            "acfe_group_modal_button": "",
+            "acfe_group_modal_size": "large"
         }
     ],
     "location": [
@@ -51,10 +149,10 @@
     ],
     "acfe_form": 0,
     "show_in_graphql": 1,
-    "graphql_field_name": "GroupSite",
+    "graphql_field_name": "GroupSiteOptions",
     "map_graphql_types_from_location_rules": 0,
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1769087407
+    "modified": 1769788698
 }

wp-content/themes/moonshine/acf-json/ui_options_page_site.json

@@ -20,6 +20,6 @@
     "post_id": "",
     "autoload": 0,
     "show_in_graphql": 1,
-    "graphql_type_name": "OptionsSite",
+    "graphql_type_name": "SiteOptions",
-    "modified": 1769086997
+    "modified": 1769693948
 }

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

@@ -1,9 +1,13 @@
+<script setup lang="ts">
+import { fr } from "@nuxt/ui/locale";
+</script>
+
 <template>
-  <div>
+  <UApp :locale="fr">
     <NuxtRouteAnnouncer />
     <NuxtLoadingIndicator />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-  </div>
+  </UApp>
 </template>

wp-content/themes/moonshine/app/components/acf/AcfImage.vue

@@ -12,7 +12,6 @@ defineProps<{ image?: AcfImageFragment }>();
     :width="image.mediaDetails?.width"
     :height="image.mediaDetails?.height"
     :style="{ objectPosition: image.objectPosition || 'center' }"
-    format="avif,webp"
     placeholder
   />
 </template>

wp-content/themes/moonshine/app/components/acf/AcfLink.fragment.gql

@@ -0,0 +1,5 @@
+fragment AcfLink on AcfLink {
+  title
+  url
+  target
+}

wp-content/themes/moonshine/app/components/acf/AcfLink.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AcfLinkFragment } from "#graphql/operations";
+import type { LinkProps } from "@nuxt/ui";
+
+type AcfLinkProps = Omit<LinkProps, "to" | "target" | "href"> & {
+  link?: AcfLinkFragment;
+};
+
+const { link, ...linkProps } = defineProps<AcfLinkProps>();
+</script>
+
+<template>
+  <ULink
+    v-if="link?.url && link?.title"
+    v-bind="linkProps"
+    :to="link.url"
+    :target="link.target"
+    :external="link.target === '_blank'"
+    :rel="link.target === '_blank' ? 'noopener noreferrer' : undefined"
+  >
+    <slot>{{ link.title }}</slot>
+  </ULink>
+</template>

wp-content/themes/moonshine/app/components/acf/AcfLinkButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AcfLinkFragment } from "#graphql/operations";
+import type { ButtonProps } from "@nuxt/ui";
+
+type AcfLinkButtonProps = & Omit<ButtonProps, "to" | "target" | "href"> & {
+  link?: AcfLinkFragment;
+  showLabel?: boolean;
+};
+
+const { link, showLabel, ...buttonProps } = defineProps<AcfLinkButtonProps>();
+</script>
+
+<template>
+  <UButton
+    v-if="link?.url && link?.title"
+    v-bind="buttonProps"
+    :to="link.url"
+    :target="link.target"
+    :external="link.target === '_blank'"
+    :rel="link.target === '_blank' ? 'noopener noreferrer' : undefined"
+  >
+    <slot>{{ showLabel ? link.title : "" }}</slot>
+  </UButton>
+</template>

wp-content/themes/moonshine/app/components/acf/AcfMedia.fragment.gql

@@ -1,9 +1,5 @@
 fragment AcfMedia on GroupAbstractMedia_Fields {
-  image {
+  image { node { ... AcfImage } }
-    node {
-      ...AcfImage
-    }
-  }
   aspectRatio
   objectFit
-}
+}

wp-content/themes/moonshine/app/components/acf/AcfPhone.fragment.gql

@@ -0,0 +1,5 @@
+fragment AcfPhone on AcfPhone {
+  national
+  e164
+  extension
+}

wp-content/themes/moonshine/app/components/acf/AcfPhone.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { AcfPhoneFragment } from "#graphql/operations";
+
+defineProps<{
+  phone?: AcfPhoneFragment;
+  link?: boolean;
+}>();
+</script>
+
+<template>
+  <Component :is="link ? 'a' : 'span'" v-if="phone" :href="link ? `tel:${phone.e164}` : undefined">
+    {{ phone.national }}{{ phone.extension ? ` ext. ${phone.extension}` : "" }}
+  </Component>
+</template>

wp-content/themes/moonshine/app/components/acf/AcfSocial.fragment.gql

@@ -0,0 +1,5 @@
+fragment AcfSocial on GroupAbstractSocial_Fields {
+  profiles {
+    url
+  }
+}

wp-content/themes/moonshine/app/components/acf/AcfSocial.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ social?: AcfSocialOutput }>();
+</script>
+
+<template>
+  <div v-if="social?.profiles" class="flex gap-1.5">
+    <a v-for="({ url, icon }, key) in social.profiles" :key="key" :href="url" target="_blank" rel="noopener noreferrer" class="flex">
+      <UIcon :name="icon" />
+    </a>
+  </div>
+</template>

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

@@ -1,20 +0,0 @@
-<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/sections/SectionHeroSplit.global.vue

@@ -34,7 +34,7 @@ const classes = tvSectionHeroSplit({
   <section :class="classes.base()">
     <div :class="classes.container()">
       <UiProse :content="content" :class="classes.content()" />
-      <AcfMedia :media="$props" :class="classes.media()" />
+      <AcfMedia :media="parseAcfMedia(props)" :class="classes.media()" />
     </div>
   </section>
 </template>

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

@@ -1,13 +1,12 @@
 <script setup lang="ts">
+const { data: siteOptions } = await useSiteOptions();
 </script>
 
 <template>
-  <UFooter id="site-footer">
+  <footer class="bg-accented links:link-prose">
-    <template #left>
+    <div class="container py-6">
-      <SiteFooterCopyright />
+      <AcfSocial :social="parseAcfSocial(siteOptions)" />
-    </template>
+    </div>
-    <template #right>
+    <SiteFooterBottom />
-      <SiteFooterCredits />
+  </footer>
-    </template>
-  </UFooter>
 </template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { connexionButton } = useAuthConnexion();
+</script>
+
+<template>
+  <div class="bg-inverted text-inverted py-1.5">
+    <div class="container flex flex-col sm:flex-row items-center gap-3">
+      <SiteFooterCopyright class="sm:mr-auto" />
+      <UButton v-bind="connexionButton" color="neutral" variant="link" />
+      <SiteFooterCredits />
+    </div>
+  </div>
+</template>

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

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

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

@@ -8,8 +8,5 @@
         <SvgSiteLogo class="h-12 w-auto" />
       </NuxtLink>
     </template>
-    <template #right>
-      <AuthConnexionButton />
-    </template>
   </UHeader>
 </template>

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

@@ -2,5 +2,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

@@ -3,6 +3,7 @@ import type { FormSubmitEvent } from "@nuxt/ui";
 const isRedirecting = ref(false);
 
 export function useAuthConnexion() {
+  const { isLoggedIn } = useAuth();
   const toast = useToast();
   const { fetch: refreshUserSession } = useUserSession();
   const routeRedirect = useRoute().query.redirect as string || undefined;
@@ -67,5 +68,12 @@ export function useAuthConnexion() {
     }
   }
 
-  return { isRedirecting, login, logout };
+  // Dynamic connexion link
+  const connexionButton = computed(() => ({
+    label: isLoggedIn.value ? "Déconnexion" : "Connexion",
+    icon: isLoggedIn.value ? "i-lucide-log-out" : "i-lucide-log-in",
+    to: "/connexion",
+  }));
+
+  return { isRedirecting, login, logout, connexionButton };
 }

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

@@ -0,0 +1,3 @@
+export const useGeneralSettings = () => useAsyncGraphQLQuery("GeneralSettings", {}, {
+  transform: ({ generalSettings }) => generalSettings,
+});

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

@@ -0,0 +1,3 @@
+export const useSiteOptions = () => useAsyncGraphQLQuery("SiteOptions", {}, {
+  transform: ({ siteOptions }) => siteOptions?.groupSiteOptions,
+});

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

@@ -1,11 +0,0 @@
-fragment SiteOptions on GroupSite_Fields {
-  email
-}
-
-query OptionsSite {
-  optionsSite {
-    groupSite {
-      ... SiteOptions
-    }
-  }
-}

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

@@ -0,0 +1,16 @@
+fragment SiteOptions on GroupSiteOptions {
+  email
+  phoneNumber { ... AcfPhone }
+  ...AcfSocial
+  links {
+    contact { ... AcfLink}
+  }
+}
+
+query SiteOptions {
+  siteOptions {
+    groupSiteOptions {
+      ... SiteOptions
+    }
+  }
+}

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

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

wp-content/themes/moonshine/app/utils/acf-link.ts

@@ -0,0 +1,18 @@
+import * as z from "zod";
+import type { AcfLinkFragment } from "#graphql/operations";
+
+const acfLinkSchema = z.object({
+  title: z.string(),
+  url: z.string(),
+  target: z.string().optional().default(""),
+});
+export type AcfLinkOutput = z.infer<typeof acfLinkSchema>;
+
+export function parseAcfLink(data?: Partial<AcfLinkFragment>) {
+  try {
+    return acfLinkSchema.parse(data);
+  }
+  catch {
+    return undefined;
+  }
+}

wp-content/themes/moonshine/app/utils/acf-media.ts

@@ -0,0 +1,29 @@
+import type { AcfMediaFragment } from "#graphql/operations";
+import * as z from "zod";
+
+export const acfImageSchema = z.object({
+  src: z.url(),
+  alt: z.string(),
+  mediaDetails: z.object({
+    width: z.number(),
+    height: z.number(),
+  }),
+  objectPosition: z.string().optional().default("center"),
+});
+
+export const acfMediaSchema = z.object({
+  image: z.object({
+    node: acfImageSchema,
+  }),
+  aspectRatio: z.enum(["square", "video", "portrait", "auto"]).optional().default("auto"),
+  objectFit: z.enum(["cover", "contain"]).optional().default("cover"),
+});
+
+export function parseAcfMedia(data?: Partial<AcfMediaFragment>) {
+  try {
+    return acfMediaSchema.parse(data);
+  }
+  catch {
+    return undefined;
+  }
+}

wp-content/themes/moonshine/app/utils/acf-social.ts

@@ -0,0 +1,32 @@
+import * as z from "zod";
+import type { AcfSocialFragment } from "#graphql/operations";
+
+const socialProfile = z.object({ url: z.url() }).transform(({ url }) => ({ url, icon: getSocialIcon(url) }));
+const acfSocialSchema = z.object({
+  profiles: z.array(socialProfile),
+});
+export type AcfSocialOutput = z.infer<typeof acfSocialSchema>;
+
+export function parseAcfSocial(data?: AcfSocialFragment) {
+  try {
+    return acfSocialSchema.parse(data);
+  }
+  catch {
+    return undefined;
+  }
+}
+
+const socialIconMap = {
+  "facebook.com": "i-cib-facebook-f",
+  "twitter.com": "i-cib-twitter",
+  "x.com": "i-cib-twitter",
+  "instagram.com": "i-cib-instagram",
+  "youtube.com": "i-cib-youtube",
+  "linkedin.com": "i-cib-linkedin",
+  "tiktok.com": "i-cib-tiktok",
+};
+
+function getSocialIcon(url: string): string {
+  const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
+  return socialIconMap[domain as keyof typeof socialIconMap] ?? "i-lucide-globe";
+}

wp-content/themes/moonshine/includes/wpgraphql/term-connection.php

@@ -1,6 +1,6 @@
 <?php
 
-// Override TermConnection query args
+// Override term connection query args
 add_filter( 'graphql_term_object_connection_query_args', 'moonshine_graphql_term_object_connection_query_args', 10, 3 );
 function moonshine_graphql_term_object_connection_query_args( $query_args, $source, $args ) {
 	// Sort by 'order' meta value instead of legacy 'term_order' field

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

@@ -1,7 +1,5 @@
 import { version } from "./package.json";
 
-const isDev = process.env.NODE_ENV !== "production";
-
 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.`);
@@ -13,6 +11,8 @@ if (!wpUrl) {
 }
 const wpDomain = new URL(wpUrl).hostname;
 
+const enableCloudflareImage = Boolean(process.env.ENABLE_CLOUDFLARE_IMAGE);
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 
@@ -60,10 +60,9 @@ export default defineNuxtConfig({
       nodeCompat: true,
       wrangler: {
         // Project name
-        name: "moonshine",
+        name: "wp-headless",
         // Cloudflare Workers settings
         compatibility_date: "2026-01-27",
-        main: "./.output/server/index.mjs",
         observability: { enabled: true },
         preview_urls: false,
         // Environment variables
@@ -72,11 +71,6 @@ export default defineNuxtConfig({
           NUXT_SITE_URL: siteUrl,
           NUXT_WP_URL: wpUrl,
         },
-        // Bindings
-        assets: {
-          binding: "ASSETS",
-          directory: "./.output/public/",
-        },
       },
     },
   },
@@ -108,8 +102,10 @@ export default defineNuxtConfig({
   },
 
   image: {
-    ...isDev ? {} : { provider: "cloudflare", cloudflare: { baseURL: "/" } },
+    provider: enableCloudflareImage ? "cloudflare" : "none",
+    cloudflare: { baseURL: `${siteUrl}/` },
     domains: [wpDomain],
+    format: ["avif", "webp"],
   },
 
   robots: {
@@ -123,4 +119,5 @@ export default defineNuxtConfig({
     componentPrefix: "Svg",
     defaultImport: "component",
   },
+
 });

wp-content/themes/moonshine/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lewebsimple/moonshine",
   "description": "Headless WordPress theme based on Nuxt.",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "private": true,
   "scripts": {
@@ -10,13 +10,14 @@
     "dev": "nuxt dev",
     "lint": "eslint --fix .",
     "postinstall": "nuxt prepare",
-    "preview": "pnpm run build && wrangler dev --port 3000",
+    "preview": "WRANGLER_ENV=dev pnpm run build && wrangler dev --port 3000",
     "release": "pnpm lint && changelogen --noAuthors --release --push",
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
+    "@iconify-json/cib": "^1.2.3",
     "@iconify-json/lucide": "^1.2.87",
-    "@lewebsimple/nuxt-graphql": "^0.6.7",
+    "@lewebsimple/nuxt-graphql": "^0.6.8",
     "@nuxt/image": "^2.0.0",
     "@nuxt/ui": "4.3.0",
     "@nuxtjs/device": "4.0.0",

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

@@ -12,12 +12,15 @@ importers:
 
   .:
     dependencies:
+      '@iconify-json/cib':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@iconify-json/lucide':
         specifier: ^1.2.87
         version: 1.2.87
       '@lewebsimple/nuxt-graphql':
-        specifier: ^0.6.7
+        specifier: ^0.6.8
-        version: 0.6.7(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)
+        version: 0.6.8(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)
       '@nuxt/image':
         specifier: ^2.0.0
         version: 2.0.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)
@@ -836,8 +839,8 @@ packages:
     resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.5.1':
+  '@eslint/config-helpers@0.5.2':
-    resolution: {integrity: sha512-QN8067dXsXAl9HIvqws7STEviheRFojX3zek5OpC84oBxDGqizW9731ByF/ASxqQihbWrVDdZXS+Ihnsckm9dg==}
+    resolution: {integrity: sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
   '@eslint/config-inspector@1.4.2':
@@ -850,8 +853,8 @@ packages:
     resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@1.0.1':
+  '@eslint/core@1.1.0':
-    resolution: {integrity: sha512-r18fEAj9uCk+VjzGt2thsbOmychS+4kxI14spVNibUO2vqKX7obOG+ymZljAwuPZl+S3clPGwCwTDtrdqTiY6Q==}
+    resolution: {integrity: sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
   '@eslint/eslintrc@3.3.3':
@@ -1060,6 +1063,9 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/cib@1.2.3':
+    resolution: {integrity: sha512-MMvRXVTHt82z3bYN19JDAjv/X8OBNC/1B3I334SV/1nyhdPeeyvJZVoI1cGuNqYznBjMnWxKPtIhhiVgGQ1CzQ==}
+
   '@iconify-json/lucide@1.2.87':
     resolution: {integrity: sha512-wxYIAp0f8Uw0rJa6BMWMaRbiHk3yV4XczA38GKXFlqyZtTdmHM1QOF4NZw5xpMlRDzbh2MnB7wjteLeFnn/ciQ==}
 
@@ -1267,8 +1273,8 @@ packages:
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
-  '@lewebsimple/nuxt-graphql@0.6.7':
+  '@lewebsimple/nuxt-graphql@0.6.8':
-    resolution: {integrity: sha512-/7jol50YtpKdUlVIliDI0IH9z9D8Gk0pm6Jc1q7CL6TTOKlJKnCmLw0KsjmmmniUgtBQjyh/G+VqXu60iRgRYg==}
+    resolution: {integrity: sha512-b7QYVQx4OeiWmO8qY5CDxFC+Vnafn92ak8ApijA4C4t1lrJ/QjFl5avdATOWeTsskHBvq0QI3rGE2O144iBZGA==}
 
   '@mapbox/node-pre-gyp@2.0.3':
     resolution: {integrity: sha512-uwPAhccfFJlsfCxMYTwOdVfOz3xqyj8xYL3zJj8f0pb30tLohnnFPhLuqp4/qoEz8sNxe4SESZedcBojRefIzg==}
@@ -4078,8 +4084,8 @@ packages:
     resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
     engines: {node: '>=18'}
 
-  get-tsconfig@4.13.0:
+  get-tsconfig@4.13.1:
-    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+    resolution: {integrity: sha512-EoY1N2xCn44xU6750Sx7OjOIT59FkmstNc3X6y5xpz7D5cBtZRe/3pSlTkDJgqsOk3WwZPkWfonhhUJfttQo3w==}
 
   giget@2.0.0:
     resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
@@ -5219,8 +5225,8 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
-  playwright-core@1.58.0:
+  playwright-core@1.58.1:
-    resolution: {integrity: sha512-aaoB1RWrdNi3//rOeKuMiS65UCcgOVljU46At6eFcOFPFHWtd2weHRRow6z/n+Lec0Lvu0k9ZPKJSjPugikirw==}
+    resolution: {integrity: sha512-bcWzOaTxcW+VOOGBCQgnaKToLJ65d6AqfLVKEWvexyS3AS6rbXl+xdpYRMGSRBClPvyj44njOWoxjNdL/H9UNg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -7111,9 +7117,9 @@ snapshots:
     dependencies:
       '@eslint/core': 0.17.0
 
-  '@eslint/config-helpers@0.5.1':
+  '@eslint/config-helpers@0.5.2':
     dependencies:
-      '@eslint/core': 1.0.1
+      '@eslint/core': 1.1.0
 
   '@eslint/config-inspector@1.4.2(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
@@ -7134,7 +7140,7 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/core@1.0.1':
+  '@eslint/core@1.1.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
@@ -7376,7 +7382,7 @@ snapshots:
       '@whatwg-node/promise-helpers': 1.3.2
       cross-inspect: 1.0.1
       graphql: 16.12.0
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   '@graphql-tools/utils@11.0.0(graphql@16.12.0)':
     dependencies:
@@ -7426,6 +7432,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/cib@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/lucide@1.2.87':
     dependencies:
       '@iconify/types': 2.0.0
@@ -7609,7 +7619,7 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
-  '@lewebsimple/nuxt-graphql@0.6.7(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)':
+  '@lewebsimple/nuxt-graphql@0.6.8(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)':
     dependencies:
       '@graphql-codegen/core': 5.0.0(graphql@16.12.0)
       '@graphql-codegen/typed-document-node': 6.1.5(graphql@16.12.0)
@@ -10493,12 +10503,12 @@ snapshots:
 
   eslint-flat-config-utils@3.0.0:
     dependencies:
-      '@eslint/config-helpers': 0.5.1
+      '@eslint/config-helpers': 0.5.2
       pathe: 2.0.3
 
   eslint-import-context@0.1.9(unrs-resolver@1.11.1):
     dependencies:
-      get-tsconfig: 4.13.0
+      get-tsconfig: 4.13.1
       stable-hash-x: 0.2.0
     optionalDependencies:
       unrs-resolver: 1.11.1
@@ -10909,7 +10919,7 @@ snapshots:
       '@sec-ant/readable-stream': 0.4.1
       is-stream: 4.0.1
 
-  get-tsconfig@4.13.0:
+  get-tsconfig@4.13.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -11906,7 +11916,7 @@ snapshots:
       ohash: 2.0.11
       pathe: 2.0.3
       pkg-types: 2.3.0
-      playwright-core: 1.58.0
+      playwright-core: 1.58.1
       radix3: 1.1.2
       satori: 0.18.4
       satori-html: 0.3.2
@@ -12387,7 +12397,7 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
-  playwright-core@1.58.0: {}
+  playwright-core@1.58.1: {}
 
   pluralize@8.0.0: {}
 

wp-content/themes/moonshine/server/graphql/schema.graphql

@@ -51,6 +51,18 @@ interface AcfFieldGroupFields {
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
 }
 
+"""ACF Link field"""
+type AcfLink {
+  """The target of the link (_blank, etc)"""
+  target: String
+
+  """The title of the link"""
+  title: String
+
+  """The url of the link"""
+  url: String
+}
+
 """
 Connection between the GroupAbstractBuilderSectionsHeroSplitLayout_Fields type and the MediaItem type
 """
@@ -79,6 +91,21 @@ interface AcfOptionsPage implements Node {
   parentId: String
 }
 
+"""ACF Phone field"""
+type AcfPhone {
+  """The country code associated with the phone number"""
+  country: String!
+
+  """The phone number in E.164 format"""
+  e164: String!
+
+  """The phone number extension, if any"""
+  extension: String
+
+  """The phone number in national format"""
+  national: String!
+}
+
 """The Headless Login authentication data."""
 type AuthenticationData {
   """A new authentication token to use in future requests."""
@@ -3612,6 +3639,58 @@ interface GroupAbstractMedia_Fields implements AcfFieldGroup & AcfFieldGroupFiel
   objectFit: String!
 }
 
+"""
+The "GroupAbstractSocial" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type GroupAbstractSocial implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstractSocial_Fields {
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "repeater" Field Type added to the schema as part of the "GroupAbstractSocial" Field Group
+  """
+  profiles: [GroupAbstractSocialProfiles]!
+}
+
+"""
+The "GroupAbstractSocialProfiles" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type GroupAbstractSocialProfiles implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstractSocialProfiles_Fields {
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "url" Field Type added to the schema as part of the "GroupAbstractSocialProfiles" Field Group
+  """
+  url: String!
+}
+
+"""
+Interface representing fields of the ACF "GroupAbstractSocialProfiles" Field Group
+"""
+interface GroupAbstractSocialProfiles_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "url" Field Type added to the schema as part of the "GroupAbstractSocialProfiles" Field Group
+  """
+  url: String!
+}
+
+"""
+Interface representing fields of the ACF "GroupAbstractSocial" Field Group
+"""
+interface GroupAbstractSocial_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "repeater" Field Type added to the schema as part of the "GroupAbstractSocial" Field Group
+  """
+  profiles: [GroupAbstractSocialProfiles]!
+}
+
 """
 The "GroupLayoutContained" Field Group. Added to the Schema by "WPGraphQL for ACF".
 """
@@ -3685,29 +3764,85 @@ interface GroupPostPage_Fields implements AcfFieldGroup & AcfFieldGroupFields &
 }
 
 """
-The "GroupSite" Field Group. Added to the Schema by "WPGraphQL for ACF".
+The "GroupSiteOptions" Field Group. Added to the Schema by "WPGraphQL for ACF".
 """
-type GroupSite implements AcfFieldGroup & AcfFieldGroupFields & GroupSite_Fields {
+type GroupSiteOptions implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstractSocial_Fields & GroupSiteOptions_Fields {
   """
-  Field of the "email" Field Type added to the schema as part of the "GroupSite" Field Group
+  Field of the "email" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
   """
   email: String!
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "group" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
+  """
+  links: GroupSiteOptionsLinks
+
+  """
+  Field of the "phone" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
+  """
+  phoneNumber: AcfPhone!
+
+  """
+  Field of the "repeater" Field Type added to the schema as part of the "GroupAbstractSocial" Field Group
+  """
+  profiles: [GroupAbstractSocialProfiles]!
+}
+
+"""
+The "GroupSiteOptionsLinks" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type GroupSiteOptionsLinks implements AcfFieldGroup & AcfFieldGroupFields & GroupSiteOptionsLinks_Fields {
+  """
+  Field of the "link" Field Type added to the schema as part of the "GroupSiteOptionsLinks" Field Group
+  """
+  contact: AcfLink!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
 }
 
 """
-Interface representing fields of the ACF "GroupSite" Field Group
+Interface representing fields of the ACF "GroupSiteOptionsLinks" Field Group
 """
-interface GroupSite_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+interface GroupSiteOptionsLinks_Fields implements AcfFieldGroup & AcfFieldGroupFields {
   """
-  Field of the "email" Field Type added to the schema as part of the "GroupSite" Field Group
+  Field of the "link" Field Type added to the schema as part of the "GroupSiteOptionsLinks" Field Group
+  """
+  contact: AcfLink!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
+"""
+Interface representing fields of the ACF "GroupSiteOptions" Field Group
+"""
+interface GroupSiteOptions_Fields implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstractSocial_Fields {
+  """
+  Field of the "email" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
   """
   email: String!
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "group" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
+  """
+  links: GroupSiteOptionsLinks
+
+  """
+  Field of the "phone" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
+  """
+  phoneNumber: AcfPhone!
+
+  """
+  Field of the "repeater" Field Type added to the schema as part of the "GroupAbstractSocial" Field Group
+  """
+  profiles: [GroupAbstractSocialProfiles]!
 }
 
 """
@@ -6177,23 +6312,6 @@ interface OneToOneConnection implements Edge {
   node: Node!
 }
 
-type OptionsSite implements AcfOptionsPage & Node & WithAcfGroupSite {
-  """Fields of the GroupSite ACF Field Group"""
-  groupSite: GroupSite
-
-  """The globally unique ID for the object"""
-  id: ID!
-
-  """"""
-  menuTitle: String
-
-  """"""
-  pageTitle: String
-
-  """"""
-  parentId: String
-}
-
 """
 Sort direction for ordered results. Determines whether items are returned in ascending or descending order.
 """
@@ -8860,7 +8978,7 @@ interface Previewable {
 }
 
 """The root entry point into the Graph"""
-type Query implements WithAcfOptionsPageOptionsSite {
+type Query implements WithAcfOptionsPageSiteOptions {
   """Entry point to get all settings for the site"""
   allSettings: Settings
 
@@ -9145,9 +9263,6 @@ type Query implements WithAcfOptionsPageOptionsSite {
     uri: String!
   ): UniformResourceIdentifiable
 
-  """"""
-  optionsSite: OptionsSite
-
   """An object of the page Type. """
   page(
     """
@@ -9372,6 +9487,9 @@ type Query implements WithAcfOptionsPageOptionsSite {
     where: RootQueryToRevisionsConnectionWhereArgs
   ): RootQueryToRevisionsConnection
 
+  """"""
+  siteOptions: SiteOptions
+
   """A 0bject"""
   tag(
     """The globally unique identifier of the object."""
@@ -13608,6 +13726,23 @@ type Settings {
   writingSettingsUseSmilies: Boolean
 }
 
+type SiteOptions implements AcfOptionsPage & Node & WithAcfGroupSiteOptions {
+  """Fields of the GroupSiteOptions ACF Field Group"""
+  groupSiteOptions: GroupSiteOptions
+
+  """The globally unique ID for the object"""
+  id: ID!
+
+  """"""
+  menuTitle: String
+
+  """"""
+  pageTitle: String
+
+  """"""
+  parentId: String
+}
+
 """The Login client options for the siteToken provider."""
 type SiteTokenClientOptions implements LoginClientOptions {
   """
@@ -16559,17 +16694,17 @@ interface WithAcfGroupPostPage {
 }
 
 """
-Provides access to fields of the "GroupSite" ACF Field Group via the "groupSite" field
+Provides access to fields of the "GroupSiteOptions" ACF Field Group via the "groupSiteOptions" field
 """
-interface WithAcfGroupSite {
+interface WithAcfGroupSiteOptions {
-  """Fields of the GroupSite ACF Field Group"""
+  """Fields of the GroupSiteOptions ACF Field Group"""
-  groupSite: GroupSite
+  groupSiteOptions: GroupSiteOptions
 }
 
-"""Access point for the "OptionsSite" ACF Options Page"""
+"""Access point for the "SiteOptions" ACF Options Page"""
-interface WithAcfOptionsPageOptionsSite {
+interface WithAcfOptionsPageSiteOptions {
   """"""
-  optionsSite: OptionsSite
+  siteOptions: SiteOptions
 }
 
 """The writing setting type"""