@levo-so/blocks 0.1.101 → 0.1.103

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

@@ -1,23 +1,30 @@
-import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import type { IModuleStudioConfig } from "@levo-so/core";
+import type { ILevoBlockBaseProps, IStudioSource } from "@levo-so/studio";
 import {
   Avatar,
   AvatarFallbackV2,
   AvatarImageV2,
   BlogContent,
   Box,
+  Button,
   Container,
+  convertHtmlToJSON,
   Heading,
   Icon,
+  Image,
   Media,
   Section,
   Typography,
+  useBlockContext,
   usePageContext,
+  usePageMeta,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
+import { ChevronDown } from "lucide-react";
 import type React from "react";
 import { useEffect, useMemo, useState } from "react";
 
-import type { IBlogPost1Content } from "./blog-post-1.schema";
+import { type IBlogPost1Content, MEDIA } from "./blog-post-1.schema";
 import { ClientOnly } from "./ClientOnly";
 
 interface ITocItem {
@@ -42,7 +49,12 @@ interface IContent {
 }
 
 const extractHeadingsFromContent = (content: IContent): ITocItem[] => {
-  if (!content?.json?.content) return [];
+  if (!content?.json?.content) {
+    // Fallback: convert HTML to JSON when content.json is absent
+    if (!content?.html) return [];
+    const parsed = convertHtmlToJSON(content.html);
+    return extractHeadingsFromContent({ json: parsed } as IContent);
+  }
 
   const headings: ITocItem[] = [];
 
@@ -103,7 +115,7 @@ const TableOfContents: React.FC<{ headings: ITocItem[] }> = ({ headings }) => {
     const element = document.getElementById(id);
     if (element) {
       const offset = 100;
-      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
+      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
       window.scrollTo({
         top: elementPosition - offset,
         behavior: "smooth",
@@ -117,7 +129,7 @@ const TableOfContents: React.FC<{ headings: ITocItem[] }> = ({ headings }) => {
     <Box elementKey="toc-container">
       <Heading elementKey="toc-title" />
       <Box elementKey="toc-list">
-        {headings.map((heading) => (
+        {headings?.map((heading) => (
           <Box elementKey="toc-item-container" key={heading.id}>
             <Icon elementKey="toc-item-icon" />
             <Typography
@@ -138,21 +150,92 @@ const TableOfContents: React.FC<{ headings: ITocItem[] }> = ({ headings }) => {
   );
 };
 
+/** Canonical display order for social platform icons. */
+const SOCIAL_ORDER = [
+  "instagram",
+  "twitter",
+  "linkedin",
+  "facebook",
+  "youtube",
+  "github",
+  "tiktok",
+  "website",
+];
+
+const sortSocials = (entries: [string, unknown][]) =>
+  [...entries].sort(([a], [b]) => {
+    const aIdx = SOCIAL_ORDER.indexOf(a);
+    const bIdx = SOCIAL_ORDER.indexOf(b);
+    return (aIdx === -1 ? SOCIAL_ORDER.length : aIdx) - (bIdx === -1 ? SOCIAL_ORDER.length : bIdx);
+  });
+
+const BIO_CHAR_LIMIT = 180;
+
+const AuthorBioRenderer: React.FC<{
+  author: any;
+  expandedBios: Record<number, boolean>;
+  setExpandedBios: React.Dispatch<React.SetStateAction<Record<number, boolean>>>;
+  index: number;
+}> = ({ author, expandedBios, setExpandedBios, index }) => {
+  const bio = author?.bio ?? "";
+  const isExpanded = expandedBios[index] ?? false;
+  const isTruncated = bio.length > BIO_CHAR_LIMIT;
+  const displayBio = !isExpanded && isTruncated ? `${bio.slice(0, BIO_CHAR_LIMIT)}…` : bio;
+  return (
+    <Box elementKey="author-bio-wrapper">
+      <Typography elementKey="author-bio">{displayBio}</Typography>
+      {isTruncated && (
+        <Button
+          elementKey="author-bio-read-more"
+          type="button"
+          onClick={() => setExpandedBios((prev) => ({ ...prev, [index]: !isExpanded }))}
+        >
+          {isExpanded ? "Read Less" : "Read More"}
+          <ChevronDown
+            style={{
+              float: "right",
+              rotate: isExpanded ? "180deg" : "0deg",
+              transition: "rotate 0.2s ease-in-out",
+              marginLeft: "4px",
+              marginTop: "2px",
+            }}
+            size={16}
+          />
+        </Button>
+      )}
+    </Box>
+  );
+};
+
 const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = () => {
+  const { isStudio } = useBlockContext();
   const data = usePageContext("blog");
-  const headings = useMemo(() => extractHeadingsFromContent(data.content), [data.content]);
+  /**
+   * Tracks which author bios are expanded, keyed by author index.
+   * Absent keys default to collapsed.
+   */
+  const [expandedBios, setExpandedBios] = useState<Record<number, boolean>>({});
+  const meta = usePageMeta("blog") as {
+    studio_config?: (IModuleStudioConfig & {
+      module: IStudioSource["module"];
+    })[];
+  };
+  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"]');
+    const contentElement = document.querySelector('[data-levo_element_key="content"]');
     if (!contentElement) return;
 
-    const headingElements = contentElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    const headingElements = Array.from(
+      contentElement.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+    ).filter((el) => el.textContent?.trim().length > 0);
 
-    headingElements.forEach((el) => {
+    headingElements.forEach((el, index) => {
       const dataId = el.getAttribute("data-id");
-      const match = headings.find((h) => h.id === dataId);
+      const match = dataId ? headings.find((h) => h.id === dataId) : headings[index];
+
       if (match) {
         el.id = match.id;
         (el as HTMLElement).style.scrollMarginTop = "100px";
@@ -160,6 +243,10 @@ const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = () => {
     });
   }, [data.content?.html, headings]);
 
+  const blogAuthorStudioConfig = meta?.studio_config?.find(
+    (item) => !item.block_instance_id && item?.module === "blog_author",
+  );
+
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
@@ -175,38 +262,57 @@ const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = () => {
             <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])
+                {data?.authors && Array.isArray(data?.authors) && (
+                  <Box elementKey="authors-container">
+                    {data?.authors?.map((v: any, index: number) => {
+                      const authorName = [v?.first_name, v?.last_name]
                         .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>
+                        .join(" ")
+                        .trim();
+                      const authorAltStr = authorName
+                        ? `Profile photo of ${authorName}`
+                        : "Author profile photo";
+                      return (
+                        <Box
+                          key={`${v?.first_name}-${v?.last_name}-${index}`}
+                          elementKey="author-container"
+                        >
+                          <Avatar className="h-10 w-10">
+                            <AvatarImageV2
+                              src={v?.profile_picture?.location}
+                              className="object-cover"
+                              alt={authorAltStr}
+                            />
+                            <AvatarFallbackV2>
+                              {[v?.first_name, v?.last_name]
+                                ?.map((v) => v?.[0])
+                                .filter(Boolean)
+                                .join("")
+                                .toUpperCase()}
+                            </AvatarFallbackV2>
+                          </Avatar>
+                          <Box elementKey="author-info-wrapper">
+                            <Heading elementKey="author-name">{authorName || "Anonymous"}</Heading>
+                            <Typography elementKey="author-description">
+                              {/* {v?.bio || "Author"} */}
+                              {`@${v?.username}`}
+                            </Typography>
+                          </Box>
+                        </Box>
+                      );
+                    })}
                   </Box>
+                )}
+                <Box elementKey="meta-info-sub-container">
+                  <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} mins`}</Typography>
                 </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} mins`}</Typography>
               </Box>
             </Box>
           </Box>
@@ -222,6 +328,133 @@ const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = () => {
             <BlogContent elementKey="content" content={data.content?.html || ""} />
           </Box>
         </Box>
+        {data?.authors && Array.isArray(data?.authors) && (
+          <Box elementKey="author-cards-container">
+            {data?.authors?.map((author: any, index: number) => {
+              const authorName = [author?.first_name, author?.last_name]
+                .filter(Boolean)
+                .join(" ")
+                .trim();
+              const authorAltStr = authorName
+                ? `Profile photo of ${authorName}`
+                : "Author profile photo";
+
+              const socials = sortSocials(
+                Object.entries((author?.socials as Record<string, string>) ?? {}).filter(
+                  ([_key, value]) => Boolean(value),
+                ),
+              ) as [string, string][];
+
+              return (
+                <Box
+                  elementKey="author-card-section"
+                  key={`${author?.first_name}-${author?.last_name}-${index}`}
+                >
+                  <Box elementKey="author-card-inner">
+                    {/* Left: Avatar — plain img for grayscale hover effect */}
+                    <Image
+                      elementKey="author-card-image"
+                      image={author?.profile_picture ?? MEDIA}
+                      alt={authorAltStr}
+                    />
+
+                    {/* Right: Content */}
+                    <Box elementKey="author-card-content">
+                      {/* Name + social row */}
+                      <Box
+                        elementKey="author-card-content-header"
+                        className="mb-4 flex flex-col justify-between gap-4 sm:flex-row sm:items-center"
+                      >
+                        <Box elementKey="author-card-content-info">
+                          <Heading elementKey="author-card-name">{authorName}</Heading>
+                          <Typography elementKey="author-card-designation">
+                            {/* {(author as { designation?: string }).designation ?? ""} */}
+                            {`@${author?.username}`}
+                          </Typography>
+                        </Box>
+                        {/* Social icons — plain HTML per exec spec */}
+                        <Box
+                          elementKey="author-card-content-socials"
+                          className="flex items-center gap-3"
+                        >
+                          {socials?.map(([key, value]) => {
+                            return (
+                              <Box
+                                config={{
+                                  action: {
+                                    type: "external_link",
+                                    value,
+                                    options: {
+                                      openInNewTab: true,
+                                    },
+                                  },
+                                }}
+                                elementKey={`author-card-content-socials-${key}-wrapper`}
+                                key={key}
+                              >
+                                <Icon elementKey={`author-card-content-socials-${key}-icon`} />
+                              </Box>
+                            );
+                          })}
+                        </Box>
+                      </Box>
+                      {/* Bio with Read More / Read Less toggle */}
+                      <AuthorBioRenderer
+                        index={index}
+                        author={author}
+                        expandedBios={expandedBios}
+                        setExpandedBios={setExpandedBios}
+                      />
+                      {/* Action buttons — plain HTML per exec spec */}
+                      <Box
+                        elementKey="author-card-ctas"
+                        className="flex flex-wrap items-center gap-4"
+                      >
+                        <Button elementKey="author-card-cta-first">
+                          Follow {author.first_name}
+                        </Button>
+                        <Button
+                          elementKey="author-card-cta-second"
+                          config={
+                            (isStudio && blogAuthorStudioConfig?.preview_url) ||
+                            (!isStudio && blogAuthorStudioConfig?.live_url)
+                              ? {
+                                  action: {
+                                    type: "external_link",
+                                    value:
+                                      isStudio && blogAuthorStudioConfig.preview_url
+                                        ? blogAuthorStudioConfig.preview_url.replace(
+                                            /\{[^}]+\}/g,
+                                            author?.username,
+                                          )
+                                        : !isStudio && blogAuthorStudioConfig.live_url
+                                          ? blogAuthorStudioConfig.live_url.replace(
+                                              /\{[^}]+\}/g,
+                                              author?.username,
+                                            )
+                                          : "",
+                                    options: {},
+                                  },
+                                }
+                              : {}
+                          }
+                        >
+                          View Profile
+                        </Button>
+                      </Box>
+                    </Box>
+                  </Box>
+                  {/* Footer divider */}
+                  {index === data?.authors?.length - 1 && (
+                    <Box elementKey="author-card-section-footer">
+                      <Typography elementKey="author-card-editorial" />
+                    </Box>
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+        )}
       </Container>
     </Section>
   );