@studio-fes/layer-strapi 0.1.5 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @studio-fes/layer-strapi
 
+## 0.2.0
+
+### Minor Changes
+
+- Media renderer is now stable, added Anchor component and CraftLink renderer. Replaced StrapiRichText with external dependency `vue-strapi-blocks-renderer`
+
 ## 0.1.5
 
 ### Patch Changes

package/app/composables/useStrapiSEO.ts

@@ -1,30 +1,24 @@
 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 {}
+  if (!seoData) {
+    return
+  }
 
-    const { metaTitle, metaDescription, metaImage, openGraph, metaRobots, keywords } = toValue(seoData)
+  const { metaTitle, metaDescription, metaImage, openGraph, metaRobots, keywords } = toValue(seoData)
 
-    return {
-      title: metaTitle,
-      meta: [
-        { 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' },
-      ],
-    }
+  useSeoMeta({
+    title: metaTitle,
+    description: metaDescription,
+    ogImage: nuxtImage(runtimeConfig.public.imageDomain + (openGraph?.ogImage || metaImage)?.url, { width: 1200, height: 630, quality: 60 }),
+    ogTitle: openGraph?.ogTitle || metaTitle,
+    ogDescription: openGraph?.ogDescription || metaDescription,
+    ogImageAlt: (openGraph?.ogImage || metaImage)?.alternativeText || metaTitle,
+    twitterCard: 'summary_large_image',
+    robots: metaRobots,
+    keywords,
   })
-
-  nuxtApp.runWithContext(() => useHead(seo.value))
 }

package/app/plugins/vue-strapi-blocks-renderer.ts

@@ -0,0 +1,5 @@
+import { StrapiBlocks } from 'vue-strapi-blocks-renderer'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('StrapiBlocks', StrapiBlocks)
+})

package/nuxt.config.ts

@@ -7,6 +7,13 @@ export default defineNuxtConfig({
     'nuxt-multi-cache',
   ],
 
+  imports: {
+    imports: [
+      { name: 'useStrapiBlocksContext', from: 'vue-strapi-blocks-renderer' },
+      { name: 'StrapiBlocks', from: 'vue-strapi-blocks-renderer', type: true },
+    ],
+  },
+
   runtimeConfig: {
     multiCacheEnabled: import.meta.env.NUXT_CACHE_ENABLED === 'true',
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studio-fes/layer-strapi",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev",
@@ -16,7 +16,8 @@
   "dependencies": {
     "@nuxt/eslint": "latest",
     "nuxt-graphql-middleware": "^5.3.2",
-    "nuxt-multi-cache": "^4.0.3"
+    "nuxt-multi-cache": "^4.0.3",
+    "vue-strapi-blocks-renderer": "1.1.1"
   },
   "devDependencies": {
     "@studio-fes/layer-base": "workspace:*",

package/app/components/StrapiRichText.vue

@@ -1,47 +0,0 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-
-import type * as StrapiRichText from '~/types/StrapiRichText'
-
-export type StrapiRichTextBlocks = StrapiRichText.BlockNode[]
-
-export default defineComponent({
-  props: {
-    blocks: { type: Array as PropType<StrapiRichTextBlocks>, default: () => [] },
-    inline: { type: Boolean, default: false },
-    tag: { type: String, default: undefined },
-  },
-  setup(props) {
-    return () => {
-      const tag = props.tag || (props.inline ? 'p' : 'div')
-      const children = renderStrapiRichText(props.blocks, props.inline)
-      const selector = props.inline ? 'inline-richtext' : 'richtext'
-      return h(tag, {
-        class: selector,
-      }, children)
-    }
-  },
-})
-</script>
-
-<style scoped>
-[class*='richtext'] {
-  &:not(.inline-richtext) {
-    display: block;
-
-    :deep(br) {
-      display: block;
-      height: 1em;
-      line-height: 1;
-
-      content: '';
-    }
-  }
-
-  &.inline-richtext {
-    :deep(span) {
-      display: block;
-    }
-  }
-}
-</style>

package/app/types/StrapiRichText.d.ts

@@ -1,52 +0,0 @@
-// import type { StrapiFileFragment } from '#graphql-operations'
-import type { StrapiFileFragment } from '~/types/graphql-operations'
-
-export interface HeadingNode {
-  type: 'heading'
-  level: 1 | 2 | 3 | 4 | 5 | 6
-  children: (TextNode | LinkNode)[]
-}
-
-export interface ParagraphNode {
-  type: 'paragraph'
-  children: (TextNode | LinkNode)[]
-}
-
-export interface TextNode {
-  text: string
-  type: 'text'
-  bold?: boolean
-  underline?: boolean
-  italic?: boolean
-  strikethrough?: boolean
-  code?: boolean
-}
-
-export interface LinkNode {
-  url: string
-  type: 'link'
-  children: TextNode[]
-}
-
-export interface ListNode {
-  type: 'list'
-  format: 'unordered' | 'ordered'
-  children: ListItemNode[]
-}
-
-export interface ListItemNode {
-  type: 'list-item'
-  children: (TextNode | LinkNode | ListNode)[]
-}
-
-export interface QuoteNode {
-  type: 'quote'
-  children: (TextNode | LinkNode)[]
-}
-
-export interface ImageNode {
-  type: 'image'
-  image: StrapiFileFragment
-}
-
-export type BlockNode = HeadingNode | ParagraphNode | TextNode | LinkNode | ListNode | ListItemNode | QuoteNode | ImageNode

package/app/utils/render-strapi-richtext.ts

@@ -1,97 +0,0 @@
-import type * as RichText from '~/types/StrapiRichText'
-
-import { Comment, Fragment } from 'vue'
-
-function renderParagraphBlock(block: RichText.ParagraphNode, inline?: boolean) {
-  const children = renderStrapiRichText(block.children, inline)
-  const tag = inline ? 'fragment' : 'p'
-  return children.length ? h(tag, children) : h('br')
-}
-
-function renderTextBlock(block: RichText.TextNode) {
-  const lines = block.text.split('\n')
-  const children = lines.reduce((acc, line, i) => {
-    if (i < lines.length - 1) {
-      acc.push(`${line} `.replace(/\s+/g, ' '), h('br'))
-    }
-    else {
-      acc.push(line)
-    }
-    return acc
-  }, [] as (string | VNode)[])
-
-  if (block.bold)
-    return h('strong', children)
-  if (block.code)
-    return h('code', children)
-  if (block.italic)
-    return h('em', children)
-  if (block.strikethrough)
-    return h('span', { class: 'line-through' }, children)
-  if (block.underline)
-    return h('span', { class: 'underline' }, children)
-  return h(Fragment, children)
-}
-
-export function renderInlineBlock(block: RichText.BlockNode): VNode {
-  switch (block.type) {
-    case 'heading':
-    case 'list-item':
-    case 'quote':
-      return h('span', renderStrapiRichText(block.children, true))
-    case 'image':
-      return h(Fragment)
-    case 'link':
-      return h('a', { href: block.url, target: '_blank', rel: 'noopener noreferrer' }, renderStrapiRichText(block.children, true))
-    case 'list':
-      return h(Fragment, renderStrapiRichText(block.children, true))
-    case 'paragraph':
-      return renderParagraphBlock(block, true)
-    case 'text':
-      return renderTextBlock(block)
-    default:
-      return h(Comment, 'Unknown block type')
-  }
-}
-
-export function renderBlock(block: RichText.BlockNode): VNode {
-  switch (block.type) {
-    case 'heading':
-      return h(`h${block.level}`, renderStrapiRichText(block.children))
-    case 'image':
-      return h('img', { src: block.image.url, width: block.image.width, height: block.image.height, alt: block.image.alternativeText })
-    case 'link':
-      return h('a', { title: getPlainText(block.children), href: block.url, target: '_blank', rel: 'noopener noreferrer' }, h('span', renderStrapiRichText(block.children)))
-    case 'list':
-      return h(block.format === 'ordered' ? 'ol' : 'ul', renderStrapiRichText(block.children))
-    case 'list-item':
-      return h('li', renderStrapiRichText(block.children))
-    case 'paragraph':
-      return renderParagraphBlock(block)
-    case 'quote':
-      return h('blockquote', renderStrapiRichText(block.children))
-    case 'text':
-      return renderTextBlock(block)
-    default:
-      return h(Comment, 'Unknown block type')
-  }
-}
-
-export function renderStrapiRichText(blocks: RichText.BlockNode[], inline?: boolean): VNode[] {
-  const render = inline ? renderInlineBlock : renderBlock
-  return blocks.map(render)
-}
-
-export function getPlainText(block: RichText.BlockNode[]) {
-  if (!block)
-    return ''
-
-  const text: string = block.reduce((acc, node) => {
-    if (node.type === 'text') {
-      return acc + node.text
-    }
-    return acc + getPlainText(node.children)
-  }, '')
-
-  return text
-}