nuxt-strapi-blocks-renderer 1.0.16 → 1.0.17

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img width="320" src="https://raw.githubusercontent.com/freb97/nuxt-strapi-blocks-renderer/refs/heads/main/.github/public/nuxt-strapi-blocks-renderer.png">
+</p>
+
 # Nuxt Strapi Blocks Renderer
 
 [![Github Actions][github-actions-src]][github-actions-href]
@@ -10,7 +14,7 @@ A fully customizable Nuxt 3 module for rendering text with the new Blocks rich t
 The implementation is based on Strapi's [Blocks React Renderer](https://github.com/strapi/blocks-react-renderer/).
 
 - ✨ [Release notes](/CHANGELOG.md)
-- 🏀 [Online stackblitz playground](https://stackblitz.com/github/freb97/nuxt-strapi-blocks-renderer?file=playground%2Fbasic%2Fpages%2Findex.vue)
+- 🏀 [Online stackblitz playground](https://stackblitz.com/github/freb97/nuxt-strapi-blocks-renderer?file=playground%2Fcustom%2Fpages%2Findex.vue)
 
 ## Installation
 
@@ -23,7 +27,9 @@ The implementation is based on Strapi's [Blocks React Renderer](https://github.c
 2. Add the module to `nuxt.config.{ts|js}`:
 
     ```typescript
-    modules: ['nuxt-strapi-blocks-renderer']
+    export default defineNuxtConfig({
+        modules: [ 'nuxt-strapi-blocks-renderer' ]
+    })
     ```
 
 ## Usage
@@ -73,15 +79,18 @@ This step is crucial for your custom components to be recognized and used by the
 
 In your Nuxt configuration (`nuxt.config.{js|ts}`), add:
 
-```typescript
-components: {
-    dirs: [
-        {
-            path: '~/components',
-        },
-    ],
-    global: true,
-},
+```ts
+export default defineNuxtConfig({
+    components: {
+        dirs: [
+            {
+                path: '~/components/blocks',
+                pathPrefix: false,
+                global: true,
+            },
+        ],
+    },
+})
 ```
 
 #### Customizing the Paragraph Tag
@@ -90,8 +99,8 @@ To customize the rendering of the paragraph (`<p>`) tag, you need to create a co
 The name of the component follows a predefined pattern: `'StrapiBlocksText' + [NodeName] + 'Node.vue'`.
 To override the default paragraph tag, we create a file called `StrapiBlocksTextParagraphNode.vue`.
 
-```vue
-<!-- components/StrapiBlocksTextParagraphNode.vue -->
+```html
+<!-- components/blocks/StrapiBlocksTextParagraphNode.vue -->
 <template>
     <p class="my-custom-class-for-p">
         <slot />
@@ -103,12 +112,13 @@ This component assigns a custom class `my-custom-class-for-p` to the paragraph t
 
 The prefix for the custom components can be adjusted in your `nuxt.config.{js|ts}`:
 
-```typescript
-modules: ['nuxt-strapi-blocks-renderer'],
-strapiBlocksRenderer: {
-    prefix: 'MyCustomPrefix'
-    blocksPrefix: 'MyCustomBlocksPrefix',
-},
+```ts
+export default defineNuxtConfig({
+    strapiBlocksRenderer: {
+        prefix: 'MyCustomPrefix',
+        blocksPrefix: 'MyCustomBlocksPrefix',
+    },
+})
 ```
 
 With this configuration, the `StrapiBlocksText` component becomes `MyCustomPrefixStrapiBlocksText` and the custom
@@ -123,15 +133,15 @@ You can apply similar customizations to all other HTML tags used by the renderer
 
 Custom heading tags (`<h1>`, `<h2>`, `<h3>`, etc.):
 
-```vue
-<!-- components/StrapiBlocksTextHeading1Node.vue -->
+```html
+<!-- components/blocks/StrapiBlocksTextHeading1Node.vue -->
 <template>
     <h1 class="my-custom-class-for-h1">
         <slot />
     </h1>
 </template>
 
-<!-- components/StrapiBlocksTextHeading2Node.vue -->
+<!-- components/blocks/StrapiBlocksTextHeading2Node.vue -->
 <template>
     <h2 class="my-custom-class-for-h2">
         <slot />
@@ -147,22 +157,22 @@ This pattern also extends to the `h3`, `h4`, `h5` and `h6` tags.
 
 Custom list tags (`<ol>`, `<ul>` and `<li>`):
 
-```vue
-<!-- components/StrapiBlocksTextOrderedListNode.vue -->
+```html
+<!-- components/blocks/StrapiBlocksTextOrderedListNode.vue -->
 <template>
     <ol class="my-custom-class-for-ol">
         <slot />
     </ol>
 </template>
 
-<!-- components/StrapiBlocksTextUnorderedListNode.vue -->
+<!-- components/blocks/StrapiBlocksTextUnorderedListNode.vue -->
 <template>
     <ul class="my-custom-class-for-ul">
         <slot />
     </ul>
 </template>
 
-<!-- components/StrapiBlocksTextListItemInlineNode.vue -->
+<!-- components/blocks/StrapiBlocksTextListItemInlineNode.vue -->
 <template>
     <li class="my-custom-class-for-li">
         <slot />
@@ -176,15 +186,15 @@ Custom list tags (`<ol>`, `<ul>` and `<li>`):
 
 Custom blockquote and code tags (`<blockquote>`, `<pre>`):
 
-```vue
-<!-- components/StrapiBlocksTextQuoteNode.vue -->
+```html
+<!-- components/blocks/StrapiBlocksTextQuoteNode.vue -->
 <template>
     <blockquote class="my-custom-class-for-blockquote">
         <slot />
     </blockquote>
 </template>
 
-<!-- components/StrapiBlocksTextCodeNode.vue -->
+<!-- components/blocks/StrapiBlocksTextCodeNode.vue -->
 <template>
     <pre class="my-custom-class-for-pre"><slot /></pre>
 </template>
@@ -196,36 +206,36 @@ Custom blockquote and code tags (`<blockquote>`, `<pre>`):
 
 Custom inline text nodes (`<strong>`, `<em>`, `<u>`, `<del>`, `<code>`):
 
-```vue
-<!-- components/StrapiBlocksTextBoldInlineNode.vue -->
+```html
+<!-- components/blocks/StrapiBlocksTextBoldInlineNode.vue -->
 <template>
     <strong class="my-custom-class-for-strong">
         <slot />
     </strong>
 </template>
 
-<!-- components/StrapiBlocksTextItalicInlineNode.vue -->
+<!-- components/blocks/StrapiBlocksTextItalicInlineNode -->
 <template>
     <em class="my-custom-class-for-em">
         <slot />
     </em>
 </template>
 
-<!-- components/StrapiBlocksTextUnderlineInlineNode.vue -->
+<!-- components/blocks/StrapiBlocksTextUnderlineInlineNode -->
 <template>
     <u class="my-custom-class-for-u">
         <slot />
     </u>
 </template>
 
-<!-- components/StrapiBlocksTextStrikethroughInlineNode.vue -->
+<!-- components/blocks/StrapiBlocksTextStrikethroughInlineNode -->
 <template>
     <del class="my-custom-class-for-del">
         <slot />
     </del>
 </template>
 
-<!-- components/StrapiBlocksTextCodeInlineNode.vue -->
+<!-- components/blocks/StrapiBlocksTextCodeInlineNode.vue -->
 <template>
     <code class="my-custom-class-for-code">
         <slot />
@@ -239,8 +249,8 @@ Custom inline text nodes (`<strong>`, `<em>`, `<u>`, `<del>`, `<code>`):
 
 Custom link tag (`<a>`):
 
-```vue
-<!-- components/StrapiBlocksTextLinkInlineNode.vue -->
+```html
+<!-- components/blocks/StrapiBlocksTextLinkInlineNode.vue -->
 <script setup lang="ts">
     const props = defineProps<{
         url: string;
@@ -262,8 +272,8 @@ When rendering a link tag, the url gets passed as the `url` component property.
 
 Custom image tag (`<img>`):
 
-```vue
-<!-- components/StrapiBlocksTextImageNode.vue -->
+```html
+<!-- components/blocks/StrapiBlocksTextImageNode.vue -->
 <script setup lang="ts">
     const props = defineProps<{
         image: any;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-strapi-blocks-renderer",
   "configKey": "strapiBlocksRenderer",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/composables/useBlocksText.js

@@ -1,6 +1,8 @@
+import { useRuntimeConfig } from "#imports";
 import { renderBlocks } from "#strapi-blocks-renderer/utils";
 export const useBlocksText = (blockNodes) => {
-  const textNodes = renderBlocks(blockNodes);
+  const prefix = useRuntimeConfig().public.strapiBlocksRenderer.blocksPrefix;
+  const textNodes = renderBlocks(blockNodes, prefix);
   return {
     text: textNodes
   };

package/dist/runtime/utils/index.d.ts

@@ -1,13 +1,13 @@
 import type { BlockNode, CodeBlockNode, DefaultInlineNode, HeadingBlockNode, ImageBlockNode, LinkInlineNode, ListBlockNode, ListItemInlineNode, ParagraphBlockNode, QuoteBlockNode, TextInlineNode } from '#strapi-blocks-renderer/types';
 import type { VNode } from 'vue';
-export declare const textInlineNode: (node: TextInlineNode) => (VNode | string)[] | VNode;
-export declare const linkInlineNode: (node: LinkInlineNode) => VNode;
-export declare const defaultInlineNode: (node: DefaultInlineNode) => (VNode | string)[] | VNode | undefined;
-export declare const listItemInlineNode: (node: ListItemInlineNode) => VNode;
-export declare const headingBlockNode: (node: HeadingBlockNode) => VNode;
-export declare const paragraphBlockNode: (node: ParagraphBlockNode) => VNode;
-export declare const codeBlockNode: (node: CodeBlockNode) => VNode;
-export declare const quoteBlockNode: (node: QuoteBlockNode) => VNode;
-export declare const listBlockNode: (node: ListBlockNode) => VNode;
-export declare const imageBlockNode: (node: ImageBlockNode) => VNode;
-export declare const renderBlocks: (blockNodes: BlockNode[]) => VNode[];
+export declare const textInlineNode: (node: TextInlineNode, prefix: string) => (VNode | string)[] | VNode;
+export declare const linkInlineNode: (node: LinkInlineNode, prefix: string) => VNode;
+export declare const defaultInlineNode: (node: DefaultInlineNode, prefix: string) => (VNode | string)[] | VNode | undefined;
+export declare const listItemInlineNode: (node: ListItemInlineNode, prefix: string) => VNode;
+export declare const headingBlockNode: (node: HeadingBlockNode, prefix: string) => VNode;
+export declare const paragraphBlockNode: (node: ParagraphBlockNode, prefix: string) => VNode;
+export declare const codeBlockNode: (node: CodeBlockNode, prefix: string) => VNode;
+export declare const quoteBlockNode: (node: QuoteBlockNode, prefix: string) => VNode;
+export declare const listBlockNode: (node: ListBlockNode, prefix: string) => VNode;
+export declare const imageBlockNode: (node: ImageBlockNode, prefix: string) => VNode;
+export declare const renderBlocks: (blockNodes: BlockNode[], prefix: string) => VNode[];

package/dist/runtime/utils/index.js

@@ -1,8 +1,4 @@
-import { h, resolveComponent, useRuntimeConfig } from "#imports";
-const prefix = () => {
-  const { public: { strapiBlocksRenderer } } = useRuntimeConfig();
-  return strapiBlocksRenderer.blocksPrefix;
-};
+import { h, resolveComponent } from "vue";
 const getNodeText = (node) => {
   const lines = [];
   node.text.split("\n").forEach((line, index, array) => {
@@ -13,91 +9,91 @@ const getNodeText = (node) => {
   });
   return lines;
 };
-export const textInlineNode = (node) => {
+export const textInlineNode = (node, prefix) => {
   const text = getNodeText(node);
-  if (node.bold) return h(resolveComponent(`${prefix()}BoldInlineNode`), () => text);
-  if (node.italic) return h(resolveComponent(`${prefix()}ItalicInlineNode`), () => text);
-  if (node.underline) return h(resolveComponent(`${prefix()}UnderlineInlineNode`), () => text);
-  if (node.strikethrough) return h(resolveComponent(`${prefix()}StrikethroughInlineNode`), () => text);
-  if (node.code) return h(resolveComponent(`${prefix()}CodeInlineNode`), () => text);
+  if (node.bold) return h(resolveComponent(`${prefix}BoldInlineNode`), () => text);
+  if (node.italic) return h(resolveComponent(`${prefix}ItalicInlineNode`), () => text);
+  if (node.underline) return h(resolveComponent(`${prefix}UnderlineInlineNode`), () => text);
+  if (node.strikethrough) return h(resolveComponent(`${prefix}StrikethroughInlineNode`), () => text);
+  if (node.code) return h(resolveComponent(`${prefix}CodeInlineNode`), () => text);
   return text;
 };
-export const linkInlineNode = (node) => {
-  const linkComponent = resolveComponent(`${prefix()}LinkInlineNode`);
+export const linkInlineNode = (node, prefix) => {
+  const linkComponent = resolveComponent(`${prefix}LinkInlineNode`);
   return h(linkComponent, { url: node.url }, () => node.children.map((childNode) => {
-    return textInlineNode(childNode);
+    return textInlineNode(childNode, prefix);
   }));
 };
-export const defaultInlineNode = (node) => {
+export const defaultInlineNode = (node, prefix) => {
   if (node.type === "link") {
-    return linkInlineNode(node);
+    return linkInlineNode(node, prefix);
   } else if (node.type === "text") {
-    return textInlineNode(node);
+    return textInlineNode(node, prefix);
   }
 };
-export const listItemInlineNode = (node) => {
-  const listItemComponent = resolveComponent(`${prefix()}ListItemInlineNode`);
+export const listItemInlineNode = (node, prefix) => {
+  const listItemComponent = resolveComponent(`${prefix}ListItemInlineNode`);
   return h(listItemComponent, () => node.children.map(
-    (childNode) => defaultInlineNode(childNode)
+    (childNode) => defaultInlineNode(childNode, prefix)
   ));
 };
-export const headingBlockNode = (node) => {
-  const headingComponent = resolveComponent(`${prefix()}Heading${node.level}Node`);
+export const headingBlockNode = (node, prefix) => {
+  const headingComponent = resolveComponent(`${prefix}Heading${node.level}Node`);
   return h(headingComponent, () => node.children.map(
-    (childNode) => defaultInlineNode(childNode)
+    (childNode) => defaultInlineNode(childNode, prefix)
   ));
 };
-export const paragraphBlockNode = (node) => {
-  const paragraphComponent = resolveComponent(`${prefix()}ParagraphNode`);
+export const paragraphBlockNode = (node, prefix) => {
+  const paragraphComponent = resolveComponent(`${prefix}ParagraphNode`);
   return h(paragraphComponent, () => node.children.map(
-    (childNode) => defaultInlineNode(childNode)
+    (childNode) => defaultInlineNode(childNode, prefix)
   ));
 };
-export const codeBlockNode = (node) => {
-  const codeComponent = resolveComponent(`${prefix()}CodeNode`);
+export const codeBlockNode = (node, prefix) => {
+  const codeComponent = resolveComponent(`${prefix}CodeNode`);
   return h(codeComponent, () => node.children.map(
-    (childNode) => textInlineNode(childNode)
+    (childNode) => textInlineNode(childNode, prefix)
   ));
 };
-export const quoteBlockNode = (node) => {
-  const quoteComponent = resolveComponent(`${prefix()}QuoteNode`);
+export const quoteBlockNode = (node, prefix) => {
+  const quoteComponent = resolveComponent(`${prefix}QuoteNode`);
   return h(quoteComponent, () => node.children.map(
-    (childNode) => defaultInlineNode(childNode)
+    (childNode) => defaultInlineNode(childNode, prefix)
   ));
 };
-export const listBlockNode = (node) => {
+export const listBlockNode = (node, prefix) => {
   const listType = node.format === "ordered" ? "OrderedListNode" : "UnorderedListNode";
-  const listComponent = resolveComponent(prefix() + listType);
+  const listComponent = resolveComponent(`${prefix}${listType}`);
   return h(listComponent, () => node.children.map(
     (childNode) => {
       if (childNode.type === "list-item") {
-        return listItemInlineNode(childNode);
+        return listItemInlineNode(childNode, prefix);
       }
-      return listBlockNode(childNode);
+      return listBlockNode(childNode, prefix);
     }
   ));
 };
-export const imageBlockNode = (node) => {
-  const imageComponent = resolveComponent(`${prefix()}ImageNode`);
+export const imageBlockNode = (node, prefix) => {
+  const imageComponent = resolveComponent(`${prefix}ImageNode`);
   return h(imageComponent, {
     image: node.image
   });
 };
-export const renderBlocks = (blockNodes) => {
+export const renderBlocks = (blockNodes, prefix) => {
   return blockNodes.map((blockNode) => {
     switch (blockNode.type) {
       case "heading":
-        return headingBlockNode(blockNode);
+        return headingBlockNode(blockNode, prefix);
       case "code":
-        return codeBlockNode(blockNode);
+        return codeBlockNode(blockNode, prefix);
       case "list":
-        return listBlockNode(blockNode);
+        return listBlockNode(blockNode, prefix);
       case "quote":
-        return quoteBlockNode(blockNode);
+        return quoteBlockNode(blockNode, prefix);
       case "image":
-        return imageBlockNode(blockNode);
+        return imageBlockNode(blockNode, prefix);
       default:
-        return paragraphBlockNode(blockNode);
+        return paragraphBlockNode(blockNode, prefix);
     }
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-strapi-blocks-renderer",
-    "version": "1.0.16",
+    "version": "1.0.17",
     "description": "Renderer for the strapi CMS blocks text content element.",
     "license": "MIT",
     "repository": {
@@ -53,6 +53,7 @@
         "@nuxt/module-builder": "^1.0.1",
         "@nuxt/schema": "^3.16.2",
         "@nuxt/test-utils": "^3.17.2",
+        "@nuxtjs/tailwindcss": "^6.13.2",
         "eslint": "^9.24.0",
         "nuxt": "^3.16.2",
         "renovate": "^39.240.1",
@@ -75,6 +76,6 @@
         "node": "^18.x || ^20.x || ^22.x"
     },
     "stackblitz": {
-        "startCommand": "npm run dev:prepare && npm run dev"
+        "startCommand": "npm run dev:prepare && npm run dev:custom"
     }
 }