feat(@dpc-sdp/nuxt-ripple): ✨ adds nuxt image to support prerendering…

… images
dpc-sdp · Jan 24, 2025 · a389b88 · a389b88
1 parent dec415c
commit a389b88
Show file tree

Hide file tree

Showing 9 changed files with 910 additions and 327 deletions.
diff --git a/examples/nuxt-app/nuxt.config.ts b/examples/nuxt-app/nuxt.config.ts
@@ -3,6 +3,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 export default defineNuxtConfig({
   runtimeConfig: {
     public: {
+      isDREnv: false,
       siteUrl: '',
       apiUrl: '',
       tide: {
@@ -40,5 +41,15 @@ export default defineNuxtConfig({
         clientPort: 3000
       }
     }
+  },
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+      failOnError: false,
+      retryDelay: 4000,
+      retry: 3,
+      interval: 3000,
+      routes: ['/', '/search']
+    }
   }
 })
diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
@@ -10,6 +10,7 @@
     "dev": "nuxt dev",
     "dev:mock": "NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 pnpm dev",
     "build": "nuxi build",
+    "generate": "nuxi generate",
     "preview": "nuxi preview",
     "compile": "tsc --build",
     "start": "node .output/server/index.mjs",
@@ -26,7 +27,8 @@
     "@dpc-sdp/nuxt-ripple-cli": "workspace:*",
     "@dpc-sdp/nuxt-ripple-preview": "workspace:*",
     "@dpc-sdp/ripple-sdp-core": "workspace:*",
-    "@dpc-sdp/ripple-ui-maps": "workspace:*"
+    "@dpc-sdp/ripple-ui-maps": "workspace:*",
+    "@nuxt/image": "^1.9.0"
   },
   "devDependencies": {
     "@dpc-sdp/ripple-test-utils": "workspace:*",

diff --git a/packages/nuxt-ripple/components/global/RplImg.vue b/packages/nuxt-ripple/components/global/RplImg.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useProviderImage from '../../composables/use-provider-image'
 import { computed } from 'vue'
 
 interface Props {
@@ -23,21 +22,20 @@ const props = withDefaults(defineProps<Props>(), {
   drupal_internal__target_id: undefined
 })
 
-// Composable handles all the logic for determining the correct image to use
-const { providerSrcSet, providerSizes } = useProviderImage(props)
+const {
+  public: { isDREnv }
+} = useRuntimeConfig()
 
-const initialSrc = computed(() =>
-  props.width
-    ? `${props.src}?w=${props.width * 2 < 1984 ? props.width * 2 : 1984}`
-    : props.src
-)
+const imageSrc = computed(() => {
+  const baseUrl = isDREnv ? 'images' : ''
+  return `${baseUrl}${props.src.replace(/\/$/, '')}`
+})
 </script>
 
 <template>
-  <img
-    :src="initialSrc"
-    :srcSet="providerSrcSet"
-    :sizes="providerSizes"
+  <NuxtImg
+    :src="imageSrc"
+    :sizes="sizes"
     :width="width"
     :height="height"
     :alt="alt || ''"

diff --git a/packages/nuxt-ripple/composables/use-provider-image.ts b/packages/nuxt-ripple/composables/use-provider-image.ts
diff --git a/packages/nuxt-ripple/nuxt.config.ts b/packages/nuxt-ripple/nuxt.config.ts
@@ -62,7 +62,29 @@ export default defineNuxtConfig({
       }
     }
   },
+  // defaults for static prerendering - can be overridden in the project
+  prerender: {
+    crawlLinks: process.env.NUXT_PUBLIC_TIDE_IS_DR_ENV === 'true',
+    failOnError: false,
+    retryDelay: 4000,
+    retry: 3,
+    interval: 3000
+  },
+  image: {
+    domains: [process.env.NUXT_PUBLIC_TIDE_BASE_URL || ''],
+    provider:
+      process.env.NUXT_PUBLIC_TIDE_IS_DR_ENV === 'true' ? 'ipx' : 'section',
+    providers: {
+      section: {
+        provider: resolve('./providers/section.ts') // Path to custom provider
+      }
+    },
+    alias: {
+      images: 'https://develop.content.reference.sdp.vic.gov.au'
+    }
+  },
   modules: [
+    '@nuxt/image',
     'nuxt-proxy',
     '@dpc-sdp/ripple-ui-core/nuxt',
     '@dpc-sdp/ripple-ui-forms/nuxt',

diff --git a/packages/nuxt-ripple/providers/section.ts b/packages/nuxt-ripple/providers/section.ts
@@ -0,0 +1,9 @@
+import type { ProviderGetImage } from '@nuxt/image'
+
+export const getImage: ProviderGetImage = (src, { modifiers = {} } = {}) => {
+  const width = modifiers.width || null
+
+  return {
+    url: `${src.replace(/\/$/, '')}${width ? '?' + `width=${width}` : ''}`
+  }
+}
diff --git a/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue b/packages/ripple-ui-core/src/components/header/RplHeroHeader.vue
@@ -120,7 +120,7 @@ const handleClick = (event) => {
         v-bind="background"
         priority="high"
         :aspect="backImageRatio"
-        sizes="xs:100vw"
+        sizes="100vw sm:41vw md:50vw lg:100vw"
       />
       <RplHeaderGraphic v-if="cornerTop" :image="cornerTop" placement="top" />
       <RplHeaderGraphic

diff --git a/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue b/packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue
@@ -94,13 +94,13 @@ const handleToggleItem = (level: number, item: IRplPrimaryNavItem) => {
           :aria-label="primaryLogo.altText"
           class="rpl-primary-nav__primary-logo-image"
         />
-        <img
+        <RplImg
           v-else
           class="rpl-primary-nav__primary-logo-image rpl-u-screen-only"
           :src="primaryLogo.src"
           :alt="primaryLogo.altText"
         />
-        <img
+        <RplImg
           v-if="primaryLogo?.src"
           class="rpl-primary-nav__primary-logo-image rpl-primary-nav__logo-alt rpl-u-print-only"
           :src="primaryLogo?.printSrc ? primaryLogo?.printSrc : primaryLogo.src"
@@ -120,12 +120,12 @@ const handleToggleItem = (level: number, item: IRplPrimaryNavItem) => {
         class="rpl-primary-nav__secondary-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border"
         :url="secondaryLogo.href"
       >
-        <img
+        <RplImg
           class="rpl-primary-nav__secondary-logo-image rpl-u-screen-only"
           :src="secondaryLogo.src"
           :alt="secondaryLogo.altText"
         />
-        <img
+        <RplImg
           v-if="secondaryLogo.printSrc"
           class="rpl-primary-nav__secondary-logo-image rpl-primary-nav__logo-alt rpl-u-print-only"
           :src="secondaryLogo.printSrc"