@studio-fes/layer-strapi 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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

@@ -12,6 +12,9 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     multiCacheEnabled: import.meta.env.NUXT_CACHE_ENABLED === 'true',
+    public: {
+      backendUrl: '',
+    },
   },
 
   graphqlMiddleware: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studio-fes/layer-strapi",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@nuxt/eslint": "latest",
@@ -15,7 +15,7 @@
     "nuxt": "^4.4.8",
     "typescript": "^6.0.3",
     "vue": "latest",
-    "@studio-fes/layer-base": "0.3.0"
+    "@studio-fes/layer-base": "0.3.1"
   },
   "description": "Create Nuxt extendable layer with this GitHub template.",
   "repository": {