From 4918c638ab8920963c56b4df07bc4bb15e45f387 Mon Sep 17 00:00:00 2001 From: Pascal Martineau Date: Fri, 30 Jan 2026 08:48:27 -0500 Subject: [PATCH] feat: AcfImage component based on @nuxt/image --- .../app/components/acf/AcfImage.fragment.gql | 9 ++ .../moonshine/app/components/acf/AcfImage.vue | 18 +++ wp-content/themes/moonshine/nuxt.config.ts | 10 +- wp-content/themes/moonshine/package.json | 1 + wp-content/themes/moonshine/pnpm-lock.yaml | 110 ++++++++++++++++++ 5 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/moonshine/app/components/acf/AcfImage.fragment.gql create mode 100644 wp-content/themes/moonshine/app/components/acf/AcfImage.vue diff --git a/wp-content/themes/moonshine/app/components/acf/AcfImage.fragment.gql b/wp-content/themes/moonshine/app/components/acf/AcfImage.fragment.gql new file mode 100644 index 0000000..50712f2 --- /dev/null +++ b/wp-content/themes/moonshine/app/components/acf/AcfImage.fragment.gql @@ -0,0 +1,9 @@ +fragment AcfImage on MediaItem { + src: sourceUrl + alt: altText + mediaDetails { + width + height + } + objectPosition +} diff --git a/wp-content/themes/moonshine/app/components/acf/AcfImage.vue b/wp-content/themes/moonshine/app/components/acf/AcfImage.vue new file mode 100644 index 0000000..45c9369 --- /dev/null +++ b/wp-content/themes/moonshine/app/components/acf/AcfImage.vue @@ -0,0 +1,18 @@ + + + diff --git a/wp-content/themes/moonshine/nuxt.config.ts b/wp-content/themes/moonshine/nuxt.config.ts index 851c059..e8476cb 100644 --- a/wp-content/themes/moonshine/nuxt.config.ts +++ b/wp-content/themes/moonshine/nuxt.config.ts @@ -1,5 +1,7 @@ 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.`); @@ -9,6 +11,7 @@ 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.`); } +const wpDomain = new URL(wpUrl).hostname; // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ @@ -16,6 +19,7 @@ export default defineNuxtConfig({ modules: [ "@lewebsimple/nuxt-graphql", "@nuxt/eslint", + "@nuxt/image", "@nuxt/ui", "@nuxtjs/device", "@nuxtjs/seo", @@ -103,6 +107,11 @@ export default defineNuxtConfig({ }, }, + image: { + ...isDev ? {} : { provider: "cloudflare", cloudflare: { baseURL: "/" } }, + domains: [wpDomain], + }, + robots: { sitemap: `${wpUrl}/sitemap_index.xml`, }, @@ -114,5 +123,4 @@ export default defineNuxtConfig({ componentPrefix: "Svg", defaultImport: "component", }, - }); diff --git a/wp-content/themes/moonshine/package.json b/wp-content/themes/moonshine/package.json index 2e3b5a3..fbf9118 100644 --- a/wp-content/themes/moonshine/package.json +++ b/wp-content/themes/moonshine/package.json @@ -17,6 +17,7 @@ "dependencies": { "@iconify-json/lucide": "^1.2.87", "@lewebsimple/nuxt-graphql": "^0.6.7", + "@nuxt/image": "^2.0.0", "@nuxt/ui": "4.3.0", "@nuxtjs/device": "4.0.0", "@nuxtjs/seo": "^3.4.0", diff --git a/wp-content/themes/moonshine/pnpm-lock.yaml b/wp-content/themes/moonshine/pnpm-lock.yaml index 896f2ab..ba5b451 100644 --- a/wp-content/themes/moonshine/pnpm-lock.yaml +++ b/wp-content/themes/moonshine/pnpm-lock.yaml @@ -18,6 +18,9 @@ importers: '@lewebsimple/nuxt-graphql': specifier: ^0.6.7 version: 0.6.7(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) '@nuxt/ui': specifier: 4.3.0 version: 4.3.0(591bb4b8e9462081241725e97ecb3569) @@ -867,6 +870,9 @@ packages: resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@fastify/accept-negotiator@2.0.1': + resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==} + '@fastify/busboy@3.2.0': resolution: {integrity: sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==} @@ -1346,6 +1352,10 @@ packages: '@nuxt/icon@2.2.1': resolution: {integrity: sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==} + '@nuxt/image@2.0.0': + resolution: {integrity: sha512-otHi6gAoYXKLrp8m27ZjX1PjxOPaltQ4OiUs/BhkW995mF/vXf8SWQTw68fww+Uric0v+XgoVrP9icDi+yT6zw==} + engines: {node: '>=18.20.6'} + '@nuxt/kit@3.21.0': resolution: {integrity: sha512-KMTLK/dsGaQioZzkYUvgfN9le4grNW54aNcA1jqzgVZLcFVy4jJfrJr5WZio9NT2EMfajdoZ+V28aD7BRr4Zfw==} engines: {node: '>=18.12.0'} @@ -3470,6 +3480,9 @@ packages: engines: {node: '>=4'} hasBin: true + cssfilter@0.0.10: + resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==} + cssnano-preset-default@7.0.10: resolution: {integrity: sha512-6ZBjW0Lf1K1Z+0OKUAUpEN62tSXmYChXWi2NAA0afxEVsj9a+MbcB1l5qel6BHJHmULai2fCGRthCeKSFbScpA==} engines: {node: ^18.12.0 || ^20.9.0 || >=22.0} @@ -4260,6 +4273,10 @@ packages: resolution: {integrity: sha512-tAAg/72/VxOUW7RQSX1pIxJVucYKcjFjfvj60L57jrZpYCHC3XN0WCQ3sNYL4Gmvv+7GPvTAjc+KSdeNuE8oWQ==} engines: {node: '>=12.22.0'} + ipx@3.1.1: + resolution: {integrity: sha512-7Xnt54Dco7uYkfdAw0r2vCly3z0rSaVhEXMzPvl3FndsTVm5p26j+PO+gyinkYmcsEUvX2Rh7OGK7KzYWRu6BA==} + hasBin: true + iron-webcrypto@1.2.1: resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==} @@ -6445,6 +6462,11 @@ packages: resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} engines: {node: '>=12'} + xss@1.0.15: + resolution: {integrity: sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==} + engines: {node: '>= 0.10.0'} + hasBin: true + y-protocols@1.0.7: resolution: {integrity: sha512-YSVsLoXxO67J6eE/nV4AtFtT3QEotZf5sK5BHxFBXso7VDUT3Tx07IfA6hsu5Q5OmBdMkQVmFZ9QOA7fikWvnw==} engines: {node: '>=16.0.0', npm: '>=8.0.0'} @@ -7139,6 +7161,9 @@ snapshots: '@eslint/core': 0.17.0 levn: 0.4.1 + '@fastify/accept-negotiator@2.0.1': + optional: true + '@fastify/busboy@3.2.0': {} '@fingerprintjs/botd@2.0.0': {} @@ -7898,6 +7923,42 @@ snapshots: - vite - vue + '@nuxt/image@2.0.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)': + dependencies: + '@nuxt/kit': 4.3.0(magicast@0.5.1) + consola: 3.4.2 + defu: 6.1.4 + h3: 1.15.5 + image-meta: 0.2.2 + knitwork: 1.3.0 + ohash: 2.0.11 + pathe: 2.0.3 + std-env: 3.10.0 + ufo: 1.6.3 + optionalDependencies: + ipx: 3.1.1(db0@0.3.4)(ioredis@5.9.2) + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@deno/kv' + - '@netlify/blobs' + - '@planetscale/database' + - '@upstash/redis' + - '@vercel/blob' + - '@vercel/functions' + - '@vercel/kv' + - aws4fetch + - db0 + - idb-keyval + - ioredis + - magicast + - uploadthing + '@nuxt/kit@3.21.0(magicast@0.5.1)': dependencies: c12: 3.3.3(magicast@0.5.1) @@ -10131,6 +10192,9 @@ snapshots: cssesc@3.0.0: {} + cssfilter@0.0.10: + optional: true + cssnano-preset-default@7.0.10(postcss@8.5.6): dependencies: browserslist: 4.28.1 @@ -11064,6 +11128,46 @@ snapshots: transitivePeerDependencies: - supports-color + ipx@3.1.1(db0@0.3.4)(ioredis@5.9.2): + dependencies: + '@fastify/accept-negotiator': 2.0.1 + citty: 0.1.6 + consola: 3.4.2 + defu: 6.1.4 + destr: 2.0.5 + etag: 1.8.1 + h3: 1.15.5 + image-meta: 0.2.2 + listhen: 1.9.0 + ofetch: 1.5.1 + pathe: 2.0.3 + sharp: 0.34.5 + svgo: 4.0.0 + ufo: 1.6.3 + unstorage: 1.17.4(db0@0.3.4)(ioredis@5.9.2) + xss: 1.0.15 + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@deno/kv' + - '@netlify/blobs' + - '@planetscale/database' + - '@upstash/redis' + - '@vercel/blob' + - '@vercel/functions' + - '@vercel/kv' + - aws4fetch + - db0 + - idb-keyval + - ioredis + - uploadthing + optional: true + iron-webcrypto@1.2.1: {} is-absolute@1.0.0: @@ -13583,6 +13687,12 @@ snapshots: xml-name-validator@4.0.0: {} + xss@1.0.15: + dependencies: + commander: 2.20.3 + cssfilter: 0.0.10 + optional: true + y-protocols@1.0.7(yjs@13.6.29): dependencies: lib0: 0.2.117