@levo-so/blocks 0.1.75 → 0.1.76

package/src/blocks/blogs/blog-post-1.tsx

@@ -1,41 +1,230 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import { BlogContent, Box, Container, Heading, Icon, Media, Section, Typography } from "@levo-so/studio";
+import {
+  Avatar,
+  AvatarFallbackV2,
+  AvatarImageV2,
+  BlogContent,
+  Box,
+  Container,
+  Heading,
+  Icon,
+  Media,
+  Section,
+  Typography,
+  usePageContext,
+} from "@levo-so/studio";
 import dayjs from "dayjs";
 import type React from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import type { IBlogPost1Content } from "./blog-post-1.schema";
+import { ClientOnly } from "./ClientOnly";
 
-const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = ({ content }) => (
-  <Section elementKey="layout">
-    <Container elementKey="container">
-      <Box elementKey="header-section">
-        <Box elementKey="header-content">
-          <Box elementKey="tag-container">
-            <Typography elementKey="tag" />
+interface ITocItem {
+  id: string;
+  text: string;
+  level: number;
+}
+
+interface IContentNode {
+  type: string;
+  attrs?: { id?: string; level?: number };
+  content?: IContentNode[];
+  marks?: Array<{ type: string }>;
+  text?: string;
+}
+
+interface IContent {
+  json?: {
+    content: IContentNode[];
+  };
+  html?: string;
+}
+
+const extractHeadingsFromContent = (content: IContent): ITocItem[] => {
+  if (!content?.json?.content) return [];
+
+  const headings: ITocItem[] = [];
+
+  const traverse = (nodes: IContentNode[]) => {
+    nodes.forEach((node) => {
+      if (node.type === "heading" && node.content) {
+        const text = node.content
+          .filter((item) => item.type === "text")
+          .map((item) => item.text || "")
+          .join("");
+
+        if (text.length > 0) {
+          headings.push({
+            id: node.attrs?.id || `heading-${headings.length}`,
+            text: text.trim(),
+            level: node.attrs?.level || 2,
+          });
+        }
+      }
+
+      if (node.content && Array.isArray(node.content)) {
+        traverse(node.content);
+      }
+    });
+  };
+
+  traverse(content.json.content);
+  return headings;
+};
+
+const TableOfContents: React.FC<{ headings: ITocItem[] }> = ({ headings }) => {
+  const [activeId, setActiveId] = useState<string>("");
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      { rootMargin: "-100px 0px -66%" },
+    );
+
+    const elements = headings
+      .map((h) => document.getElementById(h.id))
+      .filter((el): el is HTMLElement => el !== null);
+
+    elements.forEach((el) => {
+      observer.observe(el);
+    });
+
+    return () => observer.disconnect();
+  }, [headings]);
+
+  const handleClick = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      const offset = 100;
+      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
+      window.scrollTo({
+        top: elementPosition - offset,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  if (headings.length === 0) return null;
+
+  return (
+    <Box elementKey="toc-container">
+      <Heading elementKey="toc-title" />
+      <Box elementKey="toc-list">
+        {headings.map((heading) => (
+          <Box elementKey="toc-item-container" key={heading.id}>
+            <Icon elementKey="toc-item-icon" />
+            <Typography
+              elementKey="toc-item"
+              onClick={() => handleClick(heading.id)}
+              style={{
+                cursor: "pointer",
+                opacity: activeId === heading.id ? 1 : 0.8,
+                transition: "opacity 0.2s",
+              }}
+            >
+              {heading.text}
+            </Typography>
           </Box>
-          <Box elementKey="title-section">
-            <Heading elementKey="title" />
-            <Box elementKey="meta-info">
-              <Box elementKey="author-container">
-                <Icon elementKey="author-image" />
-                <Heading elementKey="author-name" />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = () => {
+  const data = usePageContext("blog");
+  const headings = useMemo(() => extractHeadingsFromContent(data.content), [data.content]);
+
+  useEffect(() => {
+    if (!data.content?.html || headings.length === 0) return;
+
+    const contentElement = document.querySelector('[data-element-key="content"]');
+    if (!contentElement) return;
+
+    const headingElements = contentElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
+
+    headingElements.forEach((el) => {
+      const dataId = el.getAttribute("data-id");
+      const match = headings.find((h) => h.id === dataId);
+      if (match) {
+        el.id = match.id;
+        (el as HTMLElement).style.scrollMarginTop = "100px";
+      }
+    });
+  }, [data.content?.html, headings]);
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-section">
+          <Box elementKey="header-content">
+            {(data.categories?.[0]?.name || data.tags?.[0]?.name) && (
+              <Box elementKey="tag-container">
+                <Typography elementKey="tag">
+                  {data.categories?.[0]?.name || data.tags?.[0]?.name}
+                </Typography>
+              </Box>
+            )}
+            <Box elementKey="title-section">
+              <Heading elementKey="title">{data.title}</Heading>
+              <Box elementKey="meta-info">
+                <Box elementKey="author-container">
+                  <Avatar className="h-10 w-10">
+                    <AvatarImageV2 src={data?.authors?.[0]?.profile_picture?.location} />
+                    <AvatarFallbackV2>
+                      {[data?.authors?.[0]?.first_name, data?.authors?.[0]?.last_name]
+                        ?.map((v) => v?.[0])
+                        .filter(Boolean)
+                        .join("")
+                        .toUpperCase()}
+                    </AvatarFallbackV2>
+                  </Avatar>
+                  <Box elementKey="author-info-wrapper">
+                    <Heading elementKey="author-name">
+                      {data?.authors?.[0]
+                        ? [data?.authors?.[0]?.first_name, data?.authors?.[0]?.last_name]
+                            .filter(Boolean)
+                            .join(" ")
+                        : "Anonymous"}
+                    </Heading>
+                    <Typography elementKey="author-description">
+                      {data?.authors?.[0]?.bio || "Author"}
+                    </Typography>
+                  </Box>
+                </Box>
+                <ClientOnly>
+                  <Typography elementKey="publish-date">
+                    {data.published_at
+                      ? dayjs(data.published_at ?? data.created_at).format("DD MMM, YYYY")
+                      : ""}
+                  </Typography>
+                </ClientOnly>
+                <Typography elementKey="reading-time">{data.reading_time || 0} min</Typography>
               </Box>
-              <Typography elementKey="publish-date">
-                {content?.["publish-date"] && dayjs(content?.["publish-date"]).isValid()
-                  ? dayjs(content?.["publish-date"]).format("DD MMM, YYYY")
-                  : " "}
-              </Typography>
-              <Typography elementKey="reading-time" />
             </Box>
           </Box>
+          <Media elementKey="blog-cover" alt="Blog Cover" media={data.cover_image} />
         </Box>
-        <Media elementKey="blog-cover" alt="Blog Cover" />
-      </Box>
-      <Box elementKey="content-section">
-        <BlogContent elementKey="content" />
-      </Box>
-    </Container>
-  </Section>
-);
+        <Box elementKey="content-wrapper">
+          {headings.length > 0 && (
+            <ClientOnly>
+              <TableOfContents headings={headings} />
+            </ClientOnly>
+          )}
+          <Box elementKey="content-section">
+            <BlogContent elementKey="content" content={data.content?.html || ""} />
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
 
 export default BlogPost1;