chore(richtext): astro richtext render logic added in playground

Author: dipankarmaikap

packages/richtext/package.json

@@ -68,6 +68,7 @@
     "playground": "cd playground && npm run dev",
     "playground:vue": "cd playground/vue && npm run dev",
     "playground:react": "cd playground/react && npm run dev",
+    "playground:astro": "pnpm run --filter ./playground/astro dev",
     "playground:all": "pnpm -r --parallel --filter='./playground/*' run dev",
     "release": "release-it",
     "release:dry": "release-it --dry-run"

packages/richtext/playground/astro/astro.config.mjs

@@ -11,7 +11,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 export default defineConfig({
   integrations: [
     storyblok({
-      accessToken: 'xUMqa0Ka06Cfnrjb4M1e5Qtt',
+      accessToken: 'OurklwV5XsDJTIE1NJaD2wtt',
       enableFallbackComponent: true,
     }),
   ],

packages/richtext/playground/astro/src/components/BlokRender.astro

@@ -0,0 +1,8 @@
+---
+import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
+import { type SbBlokData } from '@storyblok/astro';
+
+const body = Astro.props.body as SbBlokData[];
+---
+
+{body.map((blok) => <StoryblokComponent blok={blok} />)}

packages/richtext/playground/astro/src/components/CustomLink.astro

@@ -0,0 +1,5 @@
+---
+console.log(Astro.props);
+---
+
+<span>This is custom link</span>

packages/richtext/playground/astro/src/components/RichTextNode.astro

@@ -0,0 +1,58 @@
+---
+import type { AstroRenderNode, StoryblokComponentMap } from '../utils';
+
+interface Props {
+  node: AstroRenderNode;
+  components?: StoryblokComponentMap;
+}
+
+const { node, components } = Astro.props;
+
+function isText(n: AstroRenderNode): n is string {
+  return typeof n === 'string';
+}
+
+function isComponent(n: AstroRenderNode): n is Extract<AstroRenderNode, { component: unknown }> {
+  return typeof n === 'object' && n !== null && 'component' in n;
+}
+
+function isTag(n: AstroRenderNode): n is Extract<AstroRenderNode, { tag: unknown }> {
+  return typeof n === 'object' && n !== null && 'tag' in n;
+}
+---
+
+{isText(node) && node}
+
+{
+  isComponent(node) &&
+    (() => {
+      if (!components) {
+        console.warn(`No components provided for rendering component node: ${node.component}`);
+        return null;
+      }
+      const Component = components[node.component];
+      if (!Component) return null;
+
+      return (
+        <Component {...node.props}>
+          {node.children?.map((child) => (
+            <Astro.self node={child} components={components} />
+          ))}
+        </Component>
+      );
+    })()
+}
+
+{
+  isTag(node) &&
+    (() => {
+      const Tag = node.tag;
+      return (
+        <Tag {...node.attrs}>
+          {node.children?.map((child) => (
+            <Astro.self node={child} components={components} />
+          ))}
+        </Tag>
+      );
+    })()
+}

packages/richtext/playground/astro/src/components/StoryblokRichtext.astro

@@ -0,0 +1,18 @@
+---
+import type { StoryblokRichTextNode } from '@storyblok/astro';
+import { getRichTextSegments, renderSegments, type StoryblokSegmentType } from '@storyblok/richtext';
+import { createAstroAdapter, type StoryblokComponentMap } from '../utils';
+import RichTextNode from './RichTextNode.astro';
+
+interface Props {
+  doc: StoryblokRichTextNode;
+  components?: StoryblokComponentMap;
+}
+const { doc, components } = Astro.props;
+const segments = getRichTextSegments(doc);
+const adapter = createAstroAdapter();
+const keys = Object.keys(components || {}) as StoryblokSegmentType[];
+const content = renderSegments(segments, adapter, keys);
+---
+
+{content.map((node) => <RichTextNode node={node} components={components} />)}

packages/richtext/playground/astro/src/components/Welcome.astro

@@ -24,7 +24,7 @@ const options: StoryblokRichTextOptions = {
     }),
   },
 };
-const renderedRichTextStory = segmentStoryblokRichText(data.story.content.richtext);
+const renderedRichTextStory = segmentStoryblokRichText(data.story.content.richText);
 
 import testMarkdown from '/test.md?url&raw';
 

packages/richtext/playground/astro/src/pages/index.astro

@@ -0,0 +1,22 @@
+---
+import { useStoryblokApi, type SbBlokData } from '@storyblok/astro';
+import StoryblokRichtext from '../components/StoryblokRichtext.astro';
+import CustomLink from '../components/CustomLink.astro';
+import BlokRender from '../components/BlokRender.astro';
+
+const storyblokApi = useStoryblokApi();
+const { data } = await storyblokApi.get('cdn/stories/richtext', {
+  version: 'draft',
+});
+const doc = data.story.content.richText;
+---
+
+<h1>Hello Astro</h1>
+<p>Welcome to your new Astro site.</p>
+<StoryblokRichtext
+  doc={doc}
+  components={{
+    link: CustomLink,
+    blok: BlokRender,
+  }}
+/>