@levo-so/blocks 0.1.101 → 0.1.102

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

@@ -0,0 +1,121 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  usePageContext,
+} from "@levo-so/studio";
+import type React from "react";
+
+import { type IBlogAuthor1Content, MEDIA } from "./blog-author-1.schema";
+
+/** 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 BlogAuthor1: React.FC<ILevoBlockBaseProps<IBlogAuthor1Content>> = () => {
+  // On an author page the blog context exposes the author as the primary entity
+  // via the same authors array shape used across the blog module.
+  const data = usePageContext("blog_author") as {
+    account: any;
+    blogs: string[];
+    post_count?: number | null;
+  };
+  const author = data?.account;
+
+  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 (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="author-card-section">
+          <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 */}
+              <Typography elementKey="author-bio">{author?.bio}</Typography>
+              {/* 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">
+                  {data?.post_count ?? 0} contributions made so far
+                </Button>
+                {/* <Button elementKey="author-card-cta-second">View Profile</Button> */}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default BlogAuthor1;

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

@@ -2,6 +2,8 @@ import type { IModuleStudioConfig, IPost } from "@levo-so/core";
 import {
   Avatar,
   AvatarFallbackV2,
+  AvatarGroup,
+  AvatarGroupCount,
   AvatarImageV2,
   Box,
   Button,
@@ -10,6 +12,7 @@ import {
   Icon,
   type ILevoBlockBaseProps,
   Image,
+  type IStudioSource,
   Section,
   Typography,
   useBlockContext,
@@ -24,11 +27,106 @@ import type { IBlogListing1Content } from "./blog-listing-1.schema";
 interface IBlogMeta {
   total: number;
   pages: number;
-  blog?: {
-    studio_config?: IModuleStudioConfig[];
-  };
+  studio_config?: (IModuleStudioConfig & {
+    module: IStudioSource["module"];
+  })[];
 }
 
+const getAuthorsText = (authors: any[]): string => {
+  const names = authors.map((a) => [a?.first_name].filter(Boolean).join(" ") || "Anonymous");
+
+  if (names.length === 2) return `${names[0]} and ${names[1]}`;
+  // if (names.length === 3) return `${names[0]}, ${names[1]}, and ${names[2]}`;
+
+  // 4+ authors: show first 3 names then remaining count
+  const remaining = names.length - 2;
+  return `${names[0]}, ${names[1]} and ${remaining} ${remaining === 1 ? "other" : "others"}`;
+};
+
+const AuthorRenderer: React.FC<{
+  index: number;
+  authors: any[];
+}> = ({ authors, index }) => {
+  if (authors?.length === 1) {
+    const authorNameArr = [authors?.[0]?.first_name, authors?.[0]?.last_name].filter(Boolean);
+
+    const authorName = authorNameArr.join(" ");
+
+    const authorNameFallback = authorNameArr
+      ?.map((v) => v?.[0])
+      .join("")
+      .toUpperCase();
+
+    return (
+      <Box elementKey={`blogs.${index}.author_wrapper`}>
+        <Avatar className="h-10 w-10">
+          <AvatarImageV2 src={authors?.[0]?.profile_picture?.location} />
+          <AvatarFallbackV2>{authorNameFallback}</AvatarFallbackV2>
+        </Avatar>
+        <Box elementKey={`blogs.${index}.author-info-wrapper`}>
+          <Typography elementKey={`blogs.${index}.author-name`}>
+            {authorName ? authorName : "Anonymous"}
+          </Typography>
+          {/* <Typography elementKey={`blogs.${index}.author-description`}>
+            {authors?.[0]?.username}
+          </Typography> */}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (authors?.length > 1) {
+    const firstThreeAuthors = authors?.slice(0, 2);
+    const remainingAuthors = authors?.slice(2);
+
+    return (
+      <Box elementKey={`blogs.${index}.author_wrapper`}>
+        <AvatarGroup className="">
+          {firstThreeAuthors?.map((author, authorIndex) => {
+            const authorNameArr = [author?.first_name, author?.last_name].filter(Boolean);
+
+            const authorName = authorNameArr.join(" ");
+
+            const authorNameFallback = authorNameArr
+              ?.map((v) => v?.[0])
+              .join("")
+              .toUpperCase();
+
+            return (
+              <Avatar key={`blogs.${index}.blog-author.${authorIndex}`} className="h-10 w-10">
+                <AvatarImageV2
+                  src={author?.profile_picture?.location}
+                  className="object-cover"
+                  alt={authorName}
+                />
+                <AvatarFallbackV2>{authorNameFallback}</AvatarFallbackV2>
+              </Avatar>
+            );
+          })}
+          {remainingAuthors?.length > 0 && (
+            <AvatarGroupCount
+              className="h-10 w-10"
+              style={{
+                background: "var(--color-brand-secondary)",
+              }}
+            >
+              +{remainingAuthors?.length}
+            </AvatarGroupCount>
+          )}
+        </AvatarGroup>
+        <Typography
+          elementKey={`blogs.${index}.author-name`}
+          title={authors?.map((v) => v?.first_name)?.join(", ")}
+        >
+          {getAuthorsText(authors)}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return <Box elementKey={`blogs.${index}.author_wrapper`} />;
+};
+
 const BlogListing1: React.FC<ILevoBlockBaseProps<IBlogListing1Content>> = ({ content }) => {
   const { response, query, setQuery } = useContextEngine<IPost, IBlogMeta>("blogs");
   const { isStudio, blockData } = useBlockContext();
@@ -36,7 +134,9 @@ const BlogListing1: React.FC<ILevoBlockBaseProps<IBlogListing1Content>> = ({ con
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
   const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
 
-  const studioConfig = response?.meta?.blog?.studio_config?.find((item) => !item.block_instance_id);
+  const blogStudioConfig = response?.meta?.studio_config?.find(
+    (item) => !item.block_instance_id && item?.module === "blog",
+  );
   const fallbackConfig = (blockData as any)?.config?.blogs?.[0]?.blog?.action?.value;
 
   return (
@@ -67,15 +167,16 @@ const BlogListing1: React.FC<ILevoBlockBaseProps<IBlogListing1Content>> = ({ con
                 key={index}
                 elementKey={`blogs.${index}.blog`}
                 config={
-                  (isStudio && studioConfig?.preview_url) || (!isStudio && studioConfig?.live_url)
+                  (isStudio && blogStudioConfig?.preview_url) ||
+                  (!isStudio && blogStudioConfig?.live_url)
                     ? {
                         action: {
                           type: "external_link",
                           value:
-                            isStudio && studioConfig.preview_url
-                              ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
-                              : !isStudio && studioConfig.live_url
-                                ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
+                            isStudio && blogStudioConfig.preview_url
+                              ? blogStudioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
+                              : !isStudio && blogStudioConfig.live_url
+                                ? blogStudioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
                                 : "",
                           options: {},
                         },
@@ -128,30 +229,7 @@ const BlogListing1: React.FC<ILevoBlockBaseProps<IBlogListing1Content>> = ({ con
                         {item?.summary}
                       </Typography>
                     </Box>
-                    <Box elementKey={`blogs.${index}.author_wrapper`}>
-                      <Avatar className="h-10 w-10">
-                        <AvatarImageV2 src={item?.authors?.[0]?.profile_picture?.location} />
-                        <AvatarFallbackV2>
-                          {[item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
-                            ?.map((v) => v?.[0])
-                            .filter(Boolean)
-                            .join("")
-                            .toUpperCase()}
-                        </AvatarFallbackV2>
-                      </Avatar>
-                      <Box elementKey={`blogs.${index}.author_info_wrapper`}>
-                        <Heading elementKey={`blogs.${index}.author_name`}>
-                          {item?.authors?.[0]
-                            ? [item.authors[0].first_name, item.authors[0].last_name]
-                                .filter(Boolean)
-                                .join(" ")
-                            : "Anonymous"}
-                        </Heading>
-                        <Typography elementKey={`blogs.${index}.author_description`}>
-                          {item?.authors?.[0]?.bio || "Author"}
-                        </Typography>
-                      </Box>
-                    </Box>
+                    <AuthorRenderer authors={item?.authors ?? []} index={index} />
                   </Box>
                   <Button elementKey={`blogs.${index}.cta`} />
                 </Box>

package/src/blocks/blogs/blog-listing-2.schema.ts

@@ -945,18 +945,12 @@ export const BlogListing2: IBlock = {
           "column-gap": "md",
           "align-items": "center",
         },
-        "header-ctas": [
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
-          },
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
+        "header-ctas_levoGroupItem": {
+          "header-cta": {
+            "white-space": "nowrap",
           },
-        ],
+        },
+        "header-ctas": [{}, {}],
         blogs_levoGroup: {
           display: "grid",
           width: "full",
@@ -1329,18 +1323,12 @@ export const BlogListing2: IBlock = {
           "column-gap": "md",
           "align-items": "center",
         },
-        "header-ctas": [
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
-          },
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
+        "header-ctas_levoGroupItem": {
+          "header-cta": {
+            "white-space": "nowrap",
           },
-        ],
+        },
+        "header-ctas": [{}, {}],
         blogs_levoGroup: {
           display: "grid",
           width: "full",
@@ -1721,18 +1709,12 @@ export const BlogListing2: IBlock = {
           "column-gap": "md",
           "align-items": "center",
         },
-        "header-ctas": [
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
+        "header-ctas_levoGroupItem": {
+          "header-cta": {
+            "white-space": "nowrap",
           },
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
-          },
-        ],
+        },
+        "header-ctas": [{}, {}],
         blogs_levoGroup: {
           display: "grid",
           width: "full",

package/src/blocks/blogs/blog-listing-2.tsx

@@ -2,6 +2,8 @@ import type { IModuleStudioConfig, IPost } from "@levo-so/core";
 import {
   Avatar,
   AvatarFallbackV2,
+  AvatarGroup,
+  AvatarGroupCount,
   AvatarImageV2,
   Box,
   Button,
@@ -9,6 +11,7 @@ import {
   Heading,
   Icon,
   type ILevoBlockBaseProps,
+  type IStudioSource,
   Media,
   Section,
   Typography,
@@ -20,15 +23,117 @@ import dayjs from "dayjs";
 import { ClientOnly } from "../event/ClientOnly";
 import type { IBlogListing2Content } from "./blog-listing-2.schema";
 
+const getAuthorsText = (authors: any[]): string => {
+  const names = authors.map((a) => [a?.first_name].filter(Boolean).join(" ") || "Anonymous");
+
+  if (names.length === 2) return `${names[0]} and ${names[1]}`;
+  // if (names.length === 3) return `${names[0]}, ${names[1]}, and ${names[2]}`;
+
+  // 4+ authors: show first 3 names then remaining count
+  const remaining = names.length - 2;
+  return `${names[0]}, ${names[1]} and ${remaining} ${remaining === 1 ? "other" : "others"}`;
+};
+
 /** */
 interface IBlogMeta {
   total: number;
   pages: number;
-  blog?: {
-    studio_config?: IModuleStudioConfig[];
-  };
+  studio_config?: (IModuleStudioConfig & {
+    module: IStudioSource["module"];
+  })[];
 }
 
+const AuthorRenderer: React.FC<{
+  index: number;
+  authors: any[];
+}> = ({ authors, index }) => {
+  if (authors?.length === 1) {
+    const authorNameArr = [authors?.[0]?.first_name, authors?.[0]?.last_name].filter(Boolean);
+
+    const authorName = authorNameArr.join(" ");
+
+    const authorNameFallback = authorNameArr
+      ?.map((v) => v?.[0])
+      .join("")
+      .toUpperCase();
+
+    return (
+      <Box elementKey={`blogs.${index}.blog-author`}>
+        <Avatar className="h-8 w-8">
+          <AvatarImageV2 src={authors?.[0]?.profile_picture?.location} />
+          <AvatarFallbackV2>{authorNameFallback}</AvatarFallbackV2>
+        </Avatar>
+        <Box elementKey={`blogs.${index}.author-info-wrapper`}>
+          <Typography elementKey={`blogs.${index}.author-name`}>
+            {authorName ? authorName : "Anonymous"}
+          </Typography>
+          {/* <Typography elementKey={`blogs.${index}.author-description`}>
+            {authors?.[0]?.username}
+          </Typography> */}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (authors?.length > 1) {
+    const firstThreeAuthors = authors?.slice(0, 2);
+    const remainingAuthors = authors?.slice(2);
+
+    return (
+      <Box
+        elementKey={`blogs.${index}.blog-authors`}
+        style={{
+          display: "flex",
+          gap: "16px",
+          alignItems: "center",
+        }}
+      >
+        <AvatarGroup className="">
+          {firstThreeAuthors?.map((author, authorIndex) => {
+            const authorNameArr = [author?.first_name, author?.last_name].filter(Boolean);
+
+            const authorName = authorNameArr.join(" ");
+
+            const authorNameFallback = authorNameArr
+              ?.map((v) => v?.[0])
+              .join("")
+              .toUpperCase();
+
+            return (
+              <Avatar key={`blogs.${index}.blog-author.${authorIndex}`} className="h-8 w-8">
+                <AvatarImageV2
+                  src={author?.profile_picture?.location}
+                  className="object-cover"
+                  alt={authorName}
+                />
+                <AvatarFallbackV2>{authorNameFallback}</AvatarFallbackV2>
+              </Avatar>
+            );
+          })}
+          {remainingAuthors?.length > 0 && (
+            <AvatarGroupCount
+              className="h-8 w-8"
+              style={{
+                background: "var(--color-brand-secondary)",
+              }}
+            >
+              +{remainingAuthors?.length}
+            </AvatarGroupCount>
+          )}
+        </AvatarGroup>
+        <Typography
+          elementKey={`blogs.${index}.author-name`}
+          title={authors?.map((v) => v?.first_name)?.join(", ")}
+        >
+          {getAuthorsText(authors)}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return <Box elementKey={`blogs.${index}.blog-author`} />;
+};
+
 const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = ({ content }) => {
   const { response, query, setQuery } = useContextEngine<IPost, IBlogMeta>("blogs");
   const { isStudio, blockData } = useBlockContext();
@@ -36,7 +141,9 @@ const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = ({ con
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
   const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
 
-  const studioConfig = response?.meta?.blog?.studio_config?.find((item) => !item.block_instance_id);
+  const blogStudioConfig = response?.meta?.studio_config?.find(
+    (item) => !item.block_instance_id && item?.module === "blog",
+  );
   const fallbackConfig = (blockData as any)?.config?.blogs?.[0]?.blog?.action?.value;
 
   return (
@@ -67,15 +174,16 @@ const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = ({ con
               data-levo_group_item
               elementKey={`blogs.${index}.blog`}
               config={
-                (isStudio && studioConfig?.preview_url) || (!isStudio && studioConfig?.live_url)
+                (isStudio && blogStudioConfig?.preview_url) ||
+                (!isStudio && blogStudioConfig?.live_url)
                   ? {
                       action: {
                         type: "external_link",
                         value:
-                          isStudio && studioConfig.preview_url
-                            ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
-                            : !isStudio && studioConfig.live_url
-                              ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
+                          isStudio && blogStudioConfig.preview_url
+                            ? blogStudioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
+                            : !isStudio && blogStudioConfig.live_url
+                              ? blogStudioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
                               : "",
                         options: {},
                       },
@@ -123,30 +231,7 @@ const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = ({ con
                     </Typography>
                   </Box>
                   <Box elementKey={`blogs.${index}.blog-footer`}>
-                    <Box elementKey={`blogs.${index}.blog-author`}>
-                      <Avatar className="h-10 w-10">
-                        <AvatarImageV2 src={item?.authors?.[0]?.profile_picture?.location} />
-                        <AvatarFallbackV2>
-                          {[item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
-                            ?.map((v) => v?.[0])
-                            .filter(Boolean)
-                            .join("")
-                            .toUpperCase()}
-                        </AvatarFallbackV2>
-                      </Avatar>
-                      <Box elementKey={`blogs.${index}.author-info-wrapper`}>
-                        <Typography elementKey={`blogs.${index}.author-name`}>
-                          {item?.authors?.[0]
-                            ? [item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
-                                .filter(Boolean)
-                                .join(" ")
-                            : "Anonymous"}
-                        </Typography>
-                        <Typography elementKey={`blogs.${index}.author-description`}>
-                          {item?.authors?.[0]?.bio || "Author"}
-                        </Typography>
-                      </Box>
-                    </Box>
+                    <AuthorRenderer authors={item?.authors ?? []} index={index} />
                     <Box elementKey={`blogs.${index}.blog-reading-time-wrapper`}>
                       <Icon elementKey={`blogs.${index}.reading-time-icon`} />
                       <Typography elementKey={`blogs.${index}.reading-time`}>

package/src/blocks/blogs/blog-listing-3.schema.ts

@@ -594,18 +594,12 @@ export const BlogListing3: IBlock = {
           "column-gap": "md",
           "align-items": "center",
         },
-        "header-ctas": [
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
-          },
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
+        "header-ctas_levoGroupItem": {
+          "header-cta": {
+            "white-space": "nowrap",
           },
-        ],
+        },
+        "header-ctas": [{}, {}],
         blogs_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -893,18 +887,12 @@ export const BlogListing3: IBlock = {
           "column-gap": "md",
           "align-items": "center",
         },
-        "header-ctas": [
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
-          },
-          {
-            "header-cta": {
-              "white-space": "nowrap",
-            },
+        "header-ctas_levoGroupItem": {
+          "header-cta": {
+            "white-space": "nowrap",
           },
-        ],
+        },
+        "header-ctas": [{}, {}],
         blogs_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",