@studio-fes/layer-strapi 0.2.18 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @studio-fes/layer-strapi
 
+## 0.3.1
+
+### Patch Changes
+
+- fix strapi media url resolution and update both craft and strapi seo to have a fallback png image
+
+## 0.3.0
+
+### Minor Changes
+
+- Simplified env variables and fixed minor changes on components
+
 ## 0.2.18
 
 ### Patch Changes

package/app/components/StrapiMedia.vue

@@ -14,12 +14,12 @@ const isImage = computed(() => mediaIsImage(props.media))
 </script>
 
 <template>
-  <StrapiImage
+  <LazyStrapiImage
     v-if="isImage"
     v-bind="imgProps"
     :image="media"
   />
-  <StrapiVideo
+  <LazyStrapiVideo
     v-else-if="isVideo"
     v-bind="videoProps"
     :video="media"
@@ -27,6 +27,10 @@ const isImage = computed(() => mediaIsImage(props.media))
     <template #default="{ progress, isPlaying }">
       <slot name="media-chrome" :progress :is-playing />
     </template>
-  </StrapiVideo>
-  <pre v-else>There is no format for you.</pre>
+  </LazyStrapiVideo>
+  <slot v-else name="empty">
+    <DevOnly>
+      There is no format for you.
+    </DevOnly>
+  </slot>
 </template>

package/app/composables/useStrapiSEO.ts

@@ -1,5 +1,11 @@
 import type { SeoMetaFragment } from '~/types/graphql-operations'
 
+function getFallbackImage(): string | null {
+  const runtimeConfig = useRuntimeConfig()
+  const nuxtImage = useImage()
+  return nuxtImage(`/${runtimeConfig.public.ogImageFallback}`, { width: 1200, height: 630, quality: 80 })
+}
+
 export function useStrapiSEO(seoData?: MaybeRefOrGetter<SeoMetaFragment>) {
   const runtimeConfig = useRuntimeConfig()
   const nuxtImage = useImage()
@@ -10,13 +16,18 @@ export function useStrapiSEO(seoData?: MaybeRefOrGetter<SeoMetaFragment>) {
 
   const { metaTitle, metaDescription, metaImage, openGraph, metaRobots, keywords } = toValue(seoData)
 
+  const ogImageData = openGraph?.ogImage || metaImage
+  const ogImage = ogImageData?.url
+    ? nuxtImage(runtimeConfig.public.backendUrl + ogImageData.url, { width: 1200, height: 630, quality: 80 })
+    : getFallbackImage()
+
   useSeoMeta({
     title: metaTitle,
     description: metaDescription,
-    ogImage: nuxtImage(runtimeConfig.public.imageDomain + (openGraph?.ogImage || metaImage)?.url, { width: 1200, height: 630, quality: 60 }),
+    ogImage,
     ogTitle: openGraph?.ogTitle || metaTitle,
     ogDescription: openGraph?.ogDescription || metaDescription,
-    ogImageAlt: (openGraph?.ogImage || metaImage)?.alternativeText || metaTitle,
+    ogImageAlt: ogImageData?.alternativeText || metaTitle,
     twitterCard: 'summary_large_image',
     robots: metaRobots,
     keywords,

package/app/utils/parse-strapi-image.ts

@@ -5,13 +5,13 @@ export function parseStrapiImage(image: StrapiFileFragment | undefined): NuxtImg
   if (!image)
     return null
 
-  const runtimeConfig = useRuntimeConfig()
+  const config = useRuntimeConfig()
   const { width, height, url: src, alternativeText: alt } = image
 
   return {
     width,
     height,
-    src: runtimeConfig.public.imageDomain + src,
+    src: `${config.public.backendUrl}${src}`,
     alt,
   } as {
     width: number

package/app/utils/parse-strapi-video.ts

@@ -5,12 +5,12 @@ export function parseStrapiVideo(video: StrapiFileFragment | null | undefined):
   if (!video)
     return {}
 
-  const runtimeConfig = useRuntimeConfig()
+  const config = useRuntimeConfig()
   const id = useId()
 
   return {
     id: `video-${id}`,
-    src: runtimeConfig.public.imageDomain + video.url,
+    src: `${config.public.backendUrl}${video.url}`,
     width: video.width,
     height: video.height,
   }

package/nuxt.config.ts

@@ -1,4 +1,7 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+import { parseEnv } from './parse-env'
+
+const { graphqlEndpoint, hostname } = parseEnv()
+
 export default defineNuxtConfig({
   extends: ['@studio-fes/layer-base'],
 
@@ -9,15 +12,22 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     multiCacheEnabled: import.meta.env.NUXT_CACHE_ENABLED === 'true',
+    public: {
+      backendUrl: '',
+    },
   },
 
   graphqlMiddleware: {
     downloadSchema: false,
-    graphqlEndpoint: 'https://example.com/graphql',
+    graphqlEndpoint,
     serverApiPrefix: '/gql',
     clientCache: {
       enabled: true,
     },
     autoImportPatterns: ['./queries/**/*.gql'],
   },
+
+  image: {
+    domains: [hostname],
+  },
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studio-fes/layer-strapi",
   "type": "module",
-  "version": "0.2.18",
+  "version": "0.3.1",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@nuxt/eslint": "latest",
@@ -10,12 +10,12 @@
     "vue-strapi-blocks-renderer": "1.1.1"
   },
   "devDependencies": {
-    "@types/node": "^25.6.0",
-    "eslint": "^10.2.1",
-    "nuxt": "^4.4.2",
+    "@types/node": "^25.9.3",
+    "eslint": "^10.5.0",
+    "nuxt": "^4.4.8",
     "typescript": "^6.0.3",
     "vue": "latest",
-    "@studio-fes/layer-base": "0.2.18"
+    "@studio-fes/layer-base": "0.3.1"
   },
   "description": "Create Nuxt extendable layer with this GitHub template.",
   "repository": {

package/parse-env.ts

@@ -0,0 +1,23 @@
+export function parseEnv() {
+  const backendUrl = import.meta.env.NUXT_PUBLIC_BACKEND_URL
+  if (!backendUrl) {
+    throw new Error('NUXT_PUBLIC_BACKEND_URL environment variable is not set')
+  }
+
+  let graphqlEndpoint: string
+  let hostname: string
+  try {
+    const baseUrl = new URL(backendUrl)
+    hostname = baseUrl.hostname
+    if (!hostname) {
+      throw new Error('Missing hostname in NUXT_PUBLIC_BACKEND_URL environment variable')
+    }
+    graphqlEndpoint = new URL('graphql', baseUrl).toString()
+  }
+
+  catch {
+    throw new Error('Invalid NUXT_PUBLIC_BACKEND_URL environment variable')
+  }
+
+  return { graphqlEndpoint, hostname }
+}