@studio-fes/layer-strapi 0.1.0

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @studio-fes/layer-strapi
+
+## 0.1.0
+
+### Minor Changes
+
+- first beta release for base, craft and strapi layers

package/README.md

@@ -0,0 +1,69 @@
+# Nuxt Layer Starter
+
+Create Nuxt extendable layer with this GitHub template.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Working on your layer
+
+Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+
+## Distributing your layer
+
+Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+
+To do so, you only have to check if `files` in `package.json` are valid, then run:
+
+```bash
+npm publish --access public
+```
+
+Once done, your users will only have to run:
+
+```bash
+npm install --save your-layer
+```
+
+Then add the dependency to their `extends` in `nuxt.config`:
+
+```ts
+defineNuxtConfig({
+  extends: 'your-layer'
+})
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Or statically generate it with:
+
+```bash
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app/components/StrapiImage.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NuxtImgProps } from '@studio-fes/layer-base/app/components/Image.vue'
+import type { StrapiFileFragment } from '~/types/graphql-operations'
+
+interface CraftImageProps {
+  image?: StrapiFileFragment
+}
+
+const props = defineProps<NuxtImgProps & CraftImageProps>()
+const imageProps = computed(() => ({
+  ...props,
+  ...parseStrapiImage(props.image),
+}))
+</script>
+
+<template>
+  <Image v-if="imageProps" v-bind="imageProps" />
+</template>

package/app/components/StrapiRichText.vue

@@ -0,0 +1,47 @@
+<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/composables/useStrapiPage.ts

@@ -0,0 +1,18 @@
+export async function useStrapiPage<T>(queryName: never, variables?: Record<string, unknown>): Promise<T> {
+  const nuxtApp = useNuxtApp()
+
+  // @ts-expect-error i18n is not used yet
+  const locale = '$i18n' in nuxtApp ? [nuxtApp.$i18n?.locale?.value] : undefined
+
+  // @ts-expect-error queryName is not used yet
+  const response = await useAsyncGraphqlQuery(queryName, {
+    locale,
+    status: 'PUBLISHED',
+    graphqlCaching: { client: true },
+    ...variables,
+  })
+
+  checkPageData(response)
+
+  return response.data.value?.data as T
+}

package/app/composables/useStrapiSEO.ts

@@ -0,0 +1,49 @@
+import type { MetaSocialFragment, SeoMetaFragment } from '~/types/graphql-operations'
+
+export function useStrapiSEO(seoData?: MaybeRefOrGetter<SeoMetaFragment>) {
+  const nuxtApp = useNuxtApp()
+  const runtimeConfig = useRuntimeConfig()
+
+  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 },
+      ]
+    })
+
+    return {
+      title: metaTitle,
+      meta: [
+        { name: 'description', content: metaDescription },
+        { name: 'robots', content: metaRobots },
+        { name: 'keywords', content: keywords },
+        { property: 'twitter:card', content: 'summary_large_image' },
+        ...metaSocials.flat(),
+      ],
+    }
+  })
+
+  nuxtApp.runWithContext(() => useHead(seo.value))
+}

package/app/types/StrapiRichText.d.ts

@@ -0,0 +1,52 @@
+// 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/types/graphql-operations.ts

@@ -0,0 +1,107 @@
+/**
+ * @example
+ * ```graphql
+ * enum ENUM_COMPONENTSHAREDMETASOCIAL_SOCIALNETWORK {
+ *   Facebook
+ *   Twitter
+ * }
+ * ```
+ */
+export type EnumComponentsharedmetasocialSocialnetwork = 'Facebook' | 'Twitter'
+
+/**
+ *
+ * @example
+ * ```graphql
+ * fragment EntryInterfaceType {
+ *   id
+ *   __typename
+ * }
+ * ```
+ */
+export interface EntryInterfaceTypeFragment {
+  __typename: string
+  /** The ID of the entity */
+  documentId?: string | number
+}
+
+/**
+ *
+ * @example
+ * ```graphql
+ * fragment SeoMeta on ComponentSharedSeo {
+ *   id
+ *   metaTitle
+ *   metaDescription
+ *   metaImage {
+ *     ...StrapiFile
+ *   }
+ *   metaSocial {
+ *     ...MetaSocial
+ *   }
+ *   keywords
+ *   metaRobots
+ *   structuredData
+ *   metaViewport
+ *   canonicalURL
+ * }
+ * ```
+ */
+export interface SeoMetaFragment {
+  canonicalURL?: string
+  id: string | number
+  keywords?: string
+  metaDescription: string
+  metaImage: StrapiFileFragment
+  metaRobots?: string
+  metaSocial?: (MetaSocialFragment | null)[]
+  metaTitle: string
+  metaViewport?: string
+  structuredData?: any
+}
+
+/**
+ *
+ * @example
+ * ```graphql
+ * fragment StrapiFile on UploadFile {
+ *   alternativeText
+ *   height
+ *   width
+ *   url
+ *   mime
+ *   ext
+ * }
+ * ```
+ */
+export interface StrapiFileFragment {
+  alternativeText?: string
+  ext?: string
+  height?: number
+  mime: string
+  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

@@ -0,0 +1,76 @@
+// import type { EntryQuery } from '#graphql-operations'
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response'
+import type { NuxtError } from 'nuxt/app'
+import type { EntryInterfaceTypeFragment } from '~/types/graphql-operations'
+
+import { createError } from 'nuxt/app'
+
+/**
+ * Throws a 404 error with a specified message.
+ *
+ * @param {string} [message] - The error message to be displayed.
+ * @throws {Error} Throws an error with a status code of 404.
+ * @returns {never} This function does not return a value; it always throws an error.
+ */
+export function throw404(
+  message: string = 'Page Not Found.',
+): never {
+  throw createError({
+    statusCode: 404,
+    statusMessage: message,
+    fatal: true,
+  })
+}
+
+/**
+ * Throws a 404 error with a specified message.
+ *
+ * @param {string} [message] - The error message to be displayed.
+ * @throws {Error} Throws an error with a status code of 404.
+ * @returns {never} This function does not return a value; it always throws an error.
+ */
+export function throw500(
+  message: string = 'Server Error',
+): never {
+  throw createError({
+    statusCode: 500,
+    statusMessage: message,
+    fatal: true,
+  })
+}
+
+/**
+ * Checks for errors in an AsyncData response from a GraphQL query and throws appropriate HTTP errors.
+ *
+ * @remarks
+ * This function performs validation on the response of an asynchronous GraphQL query and throws
+ * specific errors based on the validation outcome. It checks for missing data, GraphQL errors,
+ * and server errors in a specific order.
+ *
+ * @param response - The AsyncData object containing either GraphQL response data or a NuxtError
+ *
+ * @throws {Error} Throws a 500 error if:
+ * - No response is provided
+ * - The response contains an error value
+ * - The GraphQL response contains errors in the errors array
+ *
+ * @throws {Error} Throws a 404 error if the response.data.value is undefined or null
+ *
+ * @example
+ * ```typescript
+ * const response = await useAsyncData('query', () => fetchGraphQL());
+ * checkPageData(response);
+ * ```
+ */
+export function checkPageData(response: Awaited<ReturnType<typeof useAsyncData<GraphqlResponse<EntryInterfaceTypeFragment> | undefined, NuxtError | undefined>>>): void {
+  if (!response) {
+    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.')
+  }
+
+  if (!response.data.value?.data) {
+    throw404()
+  }
+}

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

@@ -0,0 +1,25 @@
+// import type { StrapiFileFragment } from '#graphql-operations'
+import type { NuxtImgProps } from '@studio-fes/layer-base/app/components/Image.vue'
+import type { StrapiFileFragment } from '~/types/graphql-operations'
+
+export function parseStrapiImage(image: StrapiFileFragment | undefined): NuxtImgProps | null {
+  if (!image)
+    return null
+
+  const runtimeConfig = useRuntimeConfig()
+  const { width, height, url: src, alternativeText: alt } = image
+
+  return {
+    width,
+    height,
+    src: runtimeConfig.public.imageDomain + src,
+    alt,
+    format: 'webp',
+  } as {
+    width: number
+    height: number
+    src: string
+    alt: string
+    format?: string
+  }
+}

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

@@ -0,0 +1,97 @@
+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
+}

package/eslint.config.js

@@ -0,0 +1,74 @@
+// @ts-check
+import antfu from '@antfu/eslint-config'
+import graphqlPlugin from '@graphql-eslint/eslint-plugin'
+import { globalIgnores } from 'eslint/config'
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+// export default withNuxt(
+export default withNuxt(
+  // Your custom configs here
+  antfu(
+    {
+      formatters: true,
+      vue: true,
+      pnpm: false,
+      unocss: true,
+    },
+  ),
+  globalIgnores([
+    'dist',
+    'node_modules',
+    '.output',
+    '.nuxt',
+    '.storybook',
+    'storybook-static',
+    '.github',
+    'coverage',
+    '*.log',
+    'nuxt.d.ts',
+    '.output',
+    '.DS_Store',
+    '.vscode',
+    '*.md',
+    'package.json',
+    'package-lock.json',
+    'babel.config.js',
+    'graphql',
+    'types.ts',
+    'generated',
+    'components.d.ts',
+    'icons.d.ts',
+    'auto.d.ts',
+    'src-tauri',
+    'auto-imports.d.ts',
+    'schema.graphql',
+  ]),
+  {
+    rules: {
+      'unocss/order': 'error', // or "error",
+    },
+  },
+  // @ts-expect-error
+  {
+    files: ['**/*.graphql', '**/*.gql'],
+    languageOptions: {
+      parser: graphqlPlugin.parser,
+    },
+    plugins: {
+      '@graphql-eslint': graphqlPlugin,
+    },
+    rules: {
+      '@graphql-eslint/no-anonymous-operations': 'error',
+      '@graphql-eslint/naming-convention': [
+        'error',
+        {
+          OperationDefinition: {
+            style: 'PascalCase',
+            forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'],
+            forbiddenSuffixes: ['Query', 'Mutation', 'Subscription'],
+          },
+        },
+      ],
+    },
+  },
+)

package/graphql.config.ts

@@ -0,0 +1,4 @@
+export default {
+  schema: 'schema.graphql',
+  documents: '**/*.{graphql,gql}',
+}

package/nuxt.config.ts

@@ -0,0 +1,23 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  extends: ['@studio-fes/layer-base'],
+
+  modules: [
+    'nuxt-graphql-middleware',
+    'nuxt-multi-cache',
+  ],
+
+  runtimeConfig: {
+    multiCacheEnabled: import.meta.env.NUXT_CACHE_ENABLED === 'true',
+  },
+
+  graphqlMiddleware: {
+    downloadSchema: false,
+    graphqlEndpoint: 'https://example.com/graphql',
+    serverApiPrefix: '/gql',
+    clientCache: {
+      enabled: true,
+    },
+    autoImportPatterns: ['./queries/**/*.gql'],
+  },
+})

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@studio-fes/layer-strapi",
+  "type": "module",
+  "version": "0.1.0",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "nuxi preview",
+    "prepare": "nuxi prepare",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "latest",
+    "@studio-fes/layer-base": "workspace:*",
+    "@types/node": "^24.10.4",
+    "eslint": "^9.39.2",
+    "nuxt": "^4.2.2",
+    "nuxt-graphql-middleware": "^5.3.2",
+    "nuxt-multi-cache": "^4.0.3",
+    "typescript": "^5.9.3",
+    "vue": "latest"
+  },
+  "description": "Create Nuxt extendable layer with this GitHub template.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rondodevs/nuxt-layers.git"
+  },
+  "author": "studio fes",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rondodevs/nuxt-layers/issues"
+  },
+  "homepage": "https://github.com/rondodevs/nuxt-layers#readme"
+}

package/server/graphqlMiddleware.serverOptions.ts

@@ -0,0 +1,32 @@
+import type { FetchResponse } from 'ofetch'
+import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
+
+export default defineGraphqlServerOptions({
+  async doGraphqlRequest(context) {
+    const { operationName, variables, operationDocument } = context
+
+    const config = useRuntimeConfig()
+
+    function doRequest(): Promise<FetchResponse<{ data: any, errors: any[] }>> {
+      return $fetch.raw(config.graphqlMiddleware.graphqlEndpoint, {
+        method: 'POST',
+        ignoreResponseError: true,
+        body: {
+          query: operationDocument,
+          variables,
+          operationName,
+        }
+      })
+    }
+
+    const res = await doRequest()
+
+    return {
+      data: res._data?.data,
+      errors: res._data?.errors?.map(e => ({
+        ...e,
+        path: Array.isArray(e.path) ? e.path : [],
+      })) || [],
+    }
+  },
+})

package/server/multiCache.serverOprtions.ts

@@ -0,0 +1,22 @@
+/// <reference types="vite/client" />
+
+import { defineMultiCacheOptions } from 'nuxt-multi-cache/server-options'
+import fsDriver from 'unstorage/drivers/fs'
+import nullDriver from 'unstorage/drivers/null'
+
+export default defineMultiCacheOptions(() => {
+  const config = useRuntimeConfig()
+  const { multiCacheEnabled } = config
+
+  const driver = multiCacheEnabled
+    ? fsDriver({ base: '.nuxt-multi-cache' })
+    : nullDriver()
+
+  return {
+    data: {
+      storage: {
+        driver,
+      },
+    },
+  }
+})

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}