@levo-so/blocks 0.1.1 → 0.1.2

package/src/blocks/blogs/blog-post-1.schema.ts

@@ -0,0 +1,392 @@
+import type { IBlock } from "@levo-so/studio";
+
+const MEDIA = {
+  placeholder: {
+    id: "7141014160938075687",
+    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "1080w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    },
+  },
+};
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-section": null,
+  "header-content": null,
+  "tag-container": null,
+  tag: "Financial Planning",
+  "title-section": null,
+  title: "Investment Solutions That Work",
+  "meta-info": null,
+  "author-container": null,
+  "author-image-container": null,
+  "author-image": DUMMY_ICON,
+  "author-name": "John Doe",
+  "publish-date": "2025-05-20T10:23:31.297Z",
+  "reading-time": "10 Minutes",
+  "blog-cover": MEDIA.placeholder,
+  "content-section": null,
+  content:
+    "Experience the difference of professional financial planning with our proven methodologies.",
+};
+
+export type IBlogPost1Content = typeof DEFAULT_CONTENT;
+
+export const BlogPost1: IBlock = {
+  category_id: "blogs",
+  title: "Blog Post 1",
+  key: "blog-post-1",
+  version: "v1",
+  prompt_description:
+    "Centered layout with a category label above a large headline, author and details underneath, a wide featured image, and a brief supporting text at the bottom left.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall page structure and layout. No content needed.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Wraps the central content and ensures proper spacing on the page. No content needed.",
+      },
+    },
+    {
+      key: "header-section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Section grouping the blog post header information—tag, title, meta, and cover image. No content needed.",
+      },
+    },
+    {
+      key: "header-content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Groups elements within the header: tag, title, meta, before the cover image. For structural use.",
+      },
+    },
+    {
+      key: "tag-container",
+      label: "Tag Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Holds the category or tag label for the article. No content needed in this container.",
+      },
+    },
+    {
+      key: "tag",
+      label: "Tag",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "A short, descriptive blog post tag or category, such as 'Financial Planning'. Use 1–3 words. Neutral and factual.",
+        min_characters: 7,
+        max_characters: 28,
+      },
+    },
+    {
+      key: "title-section",
+      label: "Title Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the main blog post headline. No content needed here.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main headline for the blog post. Clear, compelling, and professional. Use sentence case. Aim for strong impact; avoid jargon.",
+        min_characters: 28,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "meta-info",
+      label: "Meta Info",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Holds author’s name, publication date, and estimated reading time. No content needed here.",
+      },
+    },
+    {
+      key: "author-container",
+      label: "Author Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Groups the author’s profile image and information. No direct content needed.",
+      },
+    },
+    {
+      key: "author-image",
+      label: "Author Image",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description:
+          "Square profile photo of the author, small in size, used as an avatar next to the name.",
+        orientation: "square",
+        size: "icon",
+        usecase: "avatar",
+      },
+    },
+    {
+      key: "author-name",
+      label: "Author Name",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Author’s full name. Use proper capitalization, 2–3 words, simple formality.",
+        min_characters: 5,
+        max_characters: 28,
+      },
+    },
+    {
+      key: "publish-date",
+      label: "Publish Date",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Date the article was published. Human-readable, e.g., 'April 25, 2025'. Month spelled out.",
+        min_characters: 10,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "reading-time",
+      label: "Reading Time",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Estimated reading time in minutes. Use short format: '10 Minutes' or '8 Min'.",
+        min_characters: 6,
+        max_characters: 13,
+      },
+    },
+    {
+      key: "blog-cover",
+      label: "Blog Cover",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Large, visually engaging banner illustrating the article’s theme. Use abstract, thematic, or relevant imagery. Should be clear and unobtrusive for a blog hero.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+    {
+      key: "content-section",
+      label: "Content Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main body container for the blog content. No direct content needed here.",
+      },
+    },
+    {
+      key: "content",
+      label: "Content",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Full blog article body. Use formal, professional tone suitable for financial topics. Include headings, paragraphs, and clear explanations. Length should be 800–2000 words for a comprehensive post.",
+        min_characters: 800,
+        max_characters: 12000,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          "padding-right": "8xl",
+          "padding-left": "8xl",
+          "media:max:768px": {
+            "padding-top": "5xl",
+            "padding-bottom": "5xl",
+            "padding-right": "5xl",
+            "padding-left": "5xl",
+          },
+          "media:max:480px": {
+            // "padding-top": "2xl",
+            // "padding-bottom": "2xl",
+            "padding-right": "2xl",
+            "padding-left": "2xl",
+            "padding-top": "7xl",
+            "padding-bottom": "7xl",
+          },
+        },
+        container: {
+          width: "100%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+        },
+        "header-section": {
+          display: "flex",
+          width: "full",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+        },
+        "header-content": {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "sm",
+        },
+        "tag-container": {
+          width: "fit-content",
+          "border-radius": "lg",
+          border: "1px solid",
+          "border-color": "var(--color-border)",
+          "background-color": "#E9E9EB",
+          "padding-bottom": "2xs",
+          "padding-left": "base",
+          "padding-right": "base",
+          "padding-top": "2xs",
+        },
+        tag: {
+          "font-size": "xs",
+          "font-weight": "semibold",
+          color: "var(--color-text-1)",
+        },
+        "title-section": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        title: {
+          "text-align": "center",
+          "font-size": "5xl",
+          "font-weight": "bold",
+          mobile: {
+            "font-size": "3xl",
+          },
+        },
+        "meta-info": {
+          display: "flex",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+          "justify-content": "center",
+          "column-gap": "xs",
+          "row-gap": "xs",
+          "font-size": "sm",
+          "font-weight": "normal",
+          color: "var(--color-text-2)",
+        },
+        "author-container": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "2xs",
+          "row-gap": "2xs",
+        },
+        "author-image": {
+          height: "24px",
+          width: "24px",
+          "border-radius": "100%",
+        },
+        "author-name": {
+          "font-size": "sm",
+          "font-weight": "normal",
+          color: "var(--color-text-2)",
+        },
+        "publish-date": {
+          "font-size": "sm",
+          "font-weight": "normal",
+          color: "var(--color-text-2)",
+        },
+        "reading-time": {
+          "font-size": "sm",
+          "font-weight": "normal",
+          color: "var(--color-text-2)",
+        },
+        "blog-cover": {
+          height: "472px",
+          width: "100%",
+          "object-fit": "cover",
+          "border-radius": "xl",
+          tablet: {
+            height: "314px",
+          },
+          mobile: {
+            height: "164px",
+          },
+        },
+        "content-section": {
+          display: "flex",
+          width: "full",
+          "flex-direction": "column",
+          "justify-content": "between",
+          "row-gap": "3xl",
+          "padding-bottom": "xl",
+          tablet: {
+            "padding-bottom": "xl",
+          },
+          mobile: {
+            "padding-bottom": "xl",
+          },
+        },
+        content: {
+          display: "flex",
+          width: "full",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,52 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Container,
+  Heading,
+  Icon,
+  Media,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+import type React from "react";
+
+import type { IBlogPost1Content } from "./blog-post-1.schema";
+
+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" />
+          </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>
+              <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>
+        </Box>
+        <Media elementKey="blog-cover" alt="Blog Cover" />
+      </Box>
+      <Box elementKey="content-section">
+        <Typography elementKey="content" className="prose" />
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default BlogPost1;