@studio-fes/layer-strapi 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @studio-fes/layer-strapi
 
+## 0.1.3
+
+### Patch Changes
+
+- Add Video and Media component to render image or video based on context, update useStrapiSEO
+
 ## 0.1.2
 
 ### Patch Changes

package/app/components/StrapiImage.vue

@@ -2,13 +2,13 @@
 import type { NuxtImgProps } from '@studio-fes/layer-base/app/components/Image.vue'
 import type { StrapiFileFragment } from '~/types/graphql-operations'
 
-interface CraftImageProps {
+export interface StrapiImageProps extends NuxtImgProps {
   image?: StrapiFileFragment
 }
 
-const props = defineProps<NuxtImgProps & CraftImageProps>()
+const props = defineProps<StrapiImageProps>()
 const imageProps = computed(() => ({
-  ...props,
+  ...reactiveOmit(props, 'image'),
   ...parseStrapiImage(props.image),
 }))
 </script>

package/app/components/StrapiMedia.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { StrapiImageProps } from '@studio-fes/layer-strapi/app/components/StrapiImage.vue'
+import type { StrapiVideoProps } from '~/components/StrapiVideo.vue'
+import type { StrapiFileFragment } from '~/types/graphql-operations'
+
+const props = defineProps<{
+  media: StrapiFileFragment
+  imgProps?: StrapiImageProps
+  videoProps?: StrapiVideoProps
+}>()
+
+const isVideo = computed(() => !mediaIsImage(props.media))
+const isImage = computed(() => mediaIsImage(props.media))
+</script>
+
+<template>
+  <StrapiImage
+    v-if="isImage"
+    v-bind="imgProps"
+    :image="media"
+  />
+  <StrapiVideo
+    v-else-if="isVideo"
+    v-bind="videoProps"
+    :video="media"
+  >
+    <template #default="{ progress, isPlaying }">
+      <slot name="media-chrome" :progress :is-playing />
+    </template>
+  </StrapiVideo>
+  <pre v-else>There is no format for you.</pre>
+</template>

package/app/components/StrapiVideo.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { VideoProps } from '@studio-fes/layer-base/app/components/Video.vue'
+import type { StrapiFileFragment } from '~/types/graphql-operations'
+import Video from '@studio-fes/layer-base/app/components/Video.vue'
+
+export interface StrapiVideoProps extends VideoProps {
+  video?: StrapiFileFragment
+}
+
+const props = defineProps<StrapiVideoProps>()
+
+const videoProps = computed(() => ({
+  ...reactiveOmit(props, 'video'),
+  ...parseStrapiVideo(props.video),
+}))
+</script>
+
+<template>
+  <Video
+    v-if="videoProps"
+    v-bind="videoProps"
+  >
+    <template #default="{ progress, isPlaying }">
+      <slot :progress :is-playing />
+    </template>
+  </Video>
+</template>

package/app/composables/useStrapiSEO.ts

@@ -1,37 +1,15 @@
-import type { MetaSocialFragment, SeoMetaFragment } from '~/types/graphql-operations'
+import type { SeoMetaFragment } from '~/types/graphql-operations'
 
 export function useStrapiSEO(seoData?: MaybeRefOrGetter<SeoMetaFragment>) {
   const nuxtApp = useNuxtApp()
   const runtimeConfig = useRuntimeConfig()
+  const nuxtImage = useImage()
 
   const seo = computed(() => {
     if (!seoData)
       return {}
 
-    const { metaTitle, metaDescription, metaImage, metaSocial, metaRobots, keywords } = toValue(seoData)
-
-    const metaSocials = (metaSocial as MetaSocialFragment[]).map((social: MetaSocialFragment) => {
-      let key = null
-
-      switch (social.socialNetwork) {
-        case 'Facebook':
-          key = 'og'
-          break
-        case 'Twitter':
-          key = 'twitter'
-          break
-      }
-
-      if (!key)
-        return []
-
-      return [
-        { property: `${key}:title`, content: social.title || metaTitle },
-        { property: `${key}:description`, content: social.description || metaDescription },
-        { property: `${key}:image`, content: runtimeConfig.public.imageDomain + (social.image || metaImage)?.url },
-        { property: `${key}:image:alt`, content: (social.image || metaImage)?.alternativeText || metaTitle },
-      ]
-    })
+    const { metaTitle, metaDescription, metaImage, openGraph, metaRobots, keywords } = toValue(seoData)
 
     return {
       title: metaTitle,
@@ -39,8 +17,11 @@ export function useStrapiSEO(seoData?: MaybeRefOrGetter<SeoMetaFragment>) {
         { name: 'description', content: metaDescription },
         { name: 'robots', content: metaRobots },
         { name: 'keywords', content: keywords },
+        { property: `og:title`, content: openGraph?.ogTitle || metaTitle },
+        { property: `og:description`, content: openGraph?.ogDescription || metaDescription },
+        { property: `og:image`, content: nuxtImage(runtimeConfig.public.imageDomain + (openGraph?.ogImage || metaImage)?.url, { width: 1200, height: 630, quality: 60 }) },
+        { property: `og:image:alt`, content: (openGraph?.ogImage || metaImage)?.alternativeText || metaTitle },
         { property: 'twitter:card', content: 'summary_large_image' },
-        ...metaSocials.flat(),
       ],
     }
   })

package/app/types/graphql-operations.ts

@@ -36,8 +36,8 @@ export interface EntryInterfaceTypeFragment {
  *   metaImage {
  *     ...StrapiFile
  *   }
- *   metaSocial {
- *     ...MetaSocial
+ *   openGraph {
+ *     ...OpenGraph
  *   }
  *   keywords
  *   metaRobots
@@ -52,14 +52,37 @@ export interface SeoMetaFragment {
   id: string | number
   keywords?: string
   metaDescription: string
-  metaImage: StrapiFileFragment
+  metaImage?: StrapiFileFragment
   metaRobots?: string
-  metaSocial?: (MetaSocialFragment | null)[]
   metaTitle: string
   metaViewport?: string
+  openGraph?: OpenGraphFragment
   structuredData?: any
 }
 
+/**
+ *
+ * @example
+ * ```graphql
+ * fragment OpenGraph on ComponentSharedOpenGraph {
+ *   ogTitle
+ *   ogDescription
+ *   ogImage {
+ *     ...StrapiFile
+ *   }
+ *   ogUrl
+ *   ogType
+ * }
+ * ```
+ */
+export interface OpenGraphFragment {
+  ogDescription: string
+  ogImage?: StrapiFileFragment
+  ogTitle: string
+  ogType?: string
+  ogUrl?: string
+}
+
 /**
  *
  * @example
@@ -82,26 +105,3 @@ export interface StrapiFileFragment {
   url: string
   width?: number
 }
-
-/**
- *
- * @example
- * ```graphql
- * fragment MetaSocial on ComponentSharedMetaSocial {
- *   description
- *   id
- *   socialNetwork
- *   title
- *   image {
- *     ...StrapiFile
- *   }
- * }
- * ```
- */
-export interface MetaSocialFragment {
-  description: string
-  id: string | number
-  image?: StrapiFileFragment
-  socialNetwork: EnumComponentsharedmetasocialSocialnetwork
-  title: string
-}

package/app/utils/check-page-data.ts

@@ -16,8 +16,8 @@ export function throw404(
   message: string = 'Page Not Found.',
 ): never {
   throw createError({
-    statusCode: 404,
-    statusMessage: message,
+    status: 404,
+    statusText: message,
     fatal: true,
   })
 }
@@ -33,8 +33,8 @@ export function throw500(
   message: string = 'Server Error',
 ): never {
   throw createError({
-    statusCode: 500,
-    statusMessage: message,
+    status: 500,
+    statusText: message,
     fatal: true,
   })
 }
@@ -67,7 +67,7 @@ export function checkPageData(response: Awaited<ReturnType<typeof useAsyncData<G
     throw500('No data returned from the server.')
   }
   if (response.error.value || response.data.value?.errors?.length) {
-    throw500(response.error.value?.statusMessage || response.error.value?.message || response.data.value?.errors?.map((e: any) => e.message).join(', ') || 'Unknown error occurred.')
+    throw500(response.error.value?.statusText || response.error.value?.message || response.data.value?.errors?.map((e: any) => e.message).join(', ') || 'Unknown error occurred.')
   }
 
   if (!response.data.value?.data) {

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

@@ -14,12 +14,10 @@ export function parseStrapiImage(image: StrapiFileFragment | undefined): NuxtImg
     height,
     src: runtimeConfig.public.imageDomain + src,
     alt,
-    format: 'webp',
   } as {
     width: number
     height: number
     src: string
     alt: string
-    format?: string
   }
 }

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

@@ -0,0 +1,17 @@
+import type { VideoProps } from '@studio-fes/layer-base/app/components/Video.vue'
+import type { StrapiFileFragment } from '~/types/graphql-operations'
+
+export function parseStrapiVideo(video: StrapiFileFragment | null | undefined): VideoProps {
+  if (!video)
+    return {}
+
+  const runtimeConfig = useRuntimeConfig()
+  const id = useState(() => uuidv4())
+
+  return {
+    id: `video-${id.value}`,
+    src: runtimeConfig.public.imageDomain + video.url,
+    width: video.width,
+    height: video.height,
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studio-fes/layer-strapi",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev",
@@ -20,9 +20,9 @@
   },
   "devDependencies": {
     "@studio-fes/layer-base": "workspace:*",
-    "@types/node": "^25.1.0",
-    "eslint": "^9.39.2",
-    "nuxt": "^4.3.0",
+    "@types/node": "^25.2.3",
+    "eslint": "^10.0.0",
+    "nuxt": "^4.3.1",
     "typescript": "^5.9.3",
     "vue": "latest"
   },