@levo-so/blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,608 @@
+import type { IBlock } from "@levo-so/studio";
+
+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 MEDIA = {
+  arrow: {
+    object: "media",
+    id: "NczdXHUK7b1J",
+    workspace_id: "WLZ1TXTD",
+    filename: "icons.svg",
+    kind: "image",
+    path: "WLZ1TXTD/icons-ImvoBQBYpU7f.svg",
+    location: "https://space.levo.in.net/WLZ1TXTD/icons-ImvoBQBYpU7f.svg",
+    metadata: {
+      etag: '"629d0f3d4861cce442cf074b341088ec"',
+      mimetype: "image/svg+xml",
+      size: 359,
+    },
+    srcset: {},
+    created_at: "2025-04-26T08:45:45.360Z",
+    updated_at: "2025-04-26T08:45:45.360Z",
+    created_by: null,
+    updated_by: null,
+  },
+  article: {
+    object: "media",
+    id: "A8sa1FGEQyvw",
+    workspace_id: "WLZ1TXTD",
+    filename: "icons copy 4.svg",
+    kind: "image",
+    path: "WLZ1TXTD/iconscopy4-rSC4lH4e0QFB.svg",
+    location: "https://space.levo.in.net/WLZ1TXTD/iconscopy4-rSC4lH4e0QFB.svg",
+    metadata: {
+      etag: '"9d4baa51fb176f2edb5c89f785d7a018"',
+      mimetype: "image/svg+xml",
+      size: 754,
+    },
+    srcset: {},
+    created_at: "2025-04-25T09:24:43.410Z",
+    updated_at: "2025-04-25T09:24:43.410Z",
+    created_by: null,
+    updated_by: null,
+  },
+  clock: {
+    object: "media",
+    id: "PzNDMe376Hb2",
+    workspace_id: "WLZ1TXTD",
+    filename: "icons copy 5.svg",
+    kind: "image",
+    path: "WLZ1TXTD/iconscopy5-R6exN52A9lz1.svg",
+    location: "https://space.levo.in.net/WLZ1TXTD/iconscopy5-R6exN52A9lz1.svg",
+    metadata: {
+      etag: '"2e33826fc7828bb2be1e7d3117756eb1"',
+      mimetype: "image/svg+xml",
+      size: 713,
+    },
+    srcset: {},
+    created_at: "2025-04-25T09:25:12.863Z",
+    updated_at: "2025-04-25T09:25:12.863Z",
+    created_by: null,
+    updated_by: null,
+  },
+  blog_cover: {
+    object: "media",
+    id: "9GFLqRMjHAvm",
+    workspace_id: "WLZ1TXTD",
+    filename: "pexels-2147499152-29632553.jpg",
+    kind: "image",
+    path: "WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo.jpg",
+    location:
+      "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo.jpg",
+    metadata: {
+      etag: '"d2ab426d617eec426c1e6ba5605ab5d6"',
+      mimetype: "image/jpeg",
+      size: 2688667,
+    },
+    srcset: {
+      "1080w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1080w.webp",
+      "1200w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1200w.webp",
+      "1920w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1920w.webp",
+      "320w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-320w.webp",
+      "640w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-640w.webp",
+      "750w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-750w.webp",
+      "828w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-828w.webp",
+      path: "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1920w.webp 1920w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-320w.webp 320w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-640w.webp 640w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-750w.webp 750w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-828w.webp 828w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1080w.webp 1080w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1200w.webp 1200w",
+    },
+    created_at: "2025-04-25T09:26:00.096Z",
+    updated_at: "2025-04-25T09:26:00.096Z",
+    created_by: null,
+    updated_by: null,
+  },
+};
+
+const BLOG_CONTENT = {
+  blog: null,
+  media: MEDIA.blog_cover,
+  "blog-content-wrapper": null,
+  "blog-header": null,
+  "header-icon": DUMMY_ICON,
+  "blog-type": "Article / Lifestyle",
+  "blog-content": null,
+  title: "A glimpse of the world's heart",
+  description:
+    "I wanted to visit Colombia’s sacred mountains. But there are some places we cannot go – and some things we cannot know.",
+  "blog-footer": null,
+  "author-image": DUMMY_ICON,
+  "author-name": "Floyd miles",
+  "blog-reading-time-wrapper": null,
+  "reading-time-icon": DUMMY_ICON,
+  "reading-time": "6 Minutes",
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-wrapper": null,
+  header: "Popular this month",
+  "header-cta": "View all News",
+  "header-cta-icon": MEDIA.arrow,
+  blogs_levoGroup: null,
+  "pagination-wrapper": null,
+  "pagination-left": "Previous",
+  "pagination-text": "",
+  "pagination-right": "Next",
+  blogs: Array(9)
+    ?.fill(0)
+    ?.map((_) => BLOG_CONTENT),
+};
+
+export type IBlogListing2Content = typeof DEFAULT_CONTENT;
+
+const BLOG_STYLE = {
+  blog: {
+    display: "flex",
+    width: "full",
+    "flex-direction": "column",
+    "row-gap": "xl",
+    "media:max:768px": {
+      "row-gap": "md",
+    },
+    "media:max:480px": {},
+  },
+  media: {
+    height: "240px",
+    width: "full",
+    "object-fit": "cover",
+  },
+  "blog-info-wrapper": {
+    display: "flex",
+    width: "full",
+    "flex-direction": "column",
+    "row-gap": "base",
+    "media:max:768px": {
+      "row-gap": "xs",
+    },
+    "media:max:480px": {},
+  },
+  "blog-content": {
+    display: "flex",
+    width: "full",
+    "flex-direction": "column",
+    "row-gap": "xs",
+    "media:max:768px": {
+      "row-gap": "2xs",
+    },
+    "media:max:480px": {},
+  },
+  "blog-header": {
+    display: "flex",
+    width: "full",
+    "align-items": "center",
+    "column-gap": "xs",
+    "media:max:768px": {
+      "column-gap": "2xs",
+    },
+    "media:max:480px": {},
+  },
+  "header-icon": {
+    height: "20px",
+    width: "20px",
+    "object-fit": "contain",
+    "media:max:768px": {
+      height: "18px",
+      width: "18px",
+    },
+    "media:max:480px": {},
+  },
+  "blog-type": {
+    "font-size": "base",
+    "font-weight": "normal",
+    "media:max:768px": {
+      "font-size": "sm",
+    },
+    "media:max:480px": {},
+  },
+  title: {
+    "font-size": "2xl",
+    "font-weight": "bold",
+    color: "var(--color-text-1)",
+    "media:max:768px": {
+      "font-size": "xl",
+    },
+    "media:max:480px": {},
+  },
+  description: {
+    "font-size": "sm",
+    "font-weight": "normal",
+    color: "var(--color-text-2)",
+    "media:max:768px": {},
+    "media:max:480px": {},
+  },
+  "blog-footer": {
+    display: "flex",
+    width: "full",
+    "align-items": "center",
+    "column-gap": "md",
+  },
+  "blog-author": {
+    display: "flex",
+    "align-items": "center",
+    "column-gap": "2xs",
+  },
+  "author-image": {
+    height: "24px",
+    width: "24px",
+    "border-radius": "100%",
+  },
+  "author-name": {
+    "font-size": "sm",
+    "font-weight": "normal",
+    color: "var(--color-text-2)",
+  },
+  "blog-reading-time-wrapper": {
+    display: "flex",
+    "align-items": "center",
+    "column-gap": "3xs",
+  },
+  "reading-time-icon": {
+    height: "16px",
+    width: "16px",
+    "object-fit": "contain",
+  },
+  "reading-time": {
+    "font-size": "sm",
+    "font-weight": "normal",
+    color: "var(--color-text-2)",
+  },
+};
+
+const BLOGS_STYLES = Array(9)
+  ?.fill(0)
+  ?.map((_) => BLOG_STYLE);
+
+export const BlogListing2: IBlock = {
+  category_id: "blogs",
+  title: "Blog Listing 2",
+  key: "blog-listing-2",
+  version: "v1",
+  prompt_description:
+    "Three-column grid of news or blog cards, each with a large image, headline, summary text, and info row; section headline and a top-right “View all” button, plus pagination controls below.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      // Layout only – no hint needed
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      // Layout only – no hint needed
+    },
+    {
+      key: "header-wrapper",
+      label: "Header Wrapper",
+      field_interface: "BoxWidget",
+      // Visual grouping – no hint needed
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Section heading introducing featured or trending blog articles for this month. Make it concise, bold, and inviting. Use a confident and energetic tone.",
+        min_characters: 16,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "header-cta",
+      label: "Header Cta",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Primary call-to-action button next to the section heading, inviting users to view all news or blogs. Text should be short (2-4 words), action-oriented, and clear.",
+        min_characters: 10,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "blogs",
+      label: "Blogs",
+      kind: "group",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Repeating list of blog article cards displayed in a grid. Each card should showcase a featured blog post with image, headline, excerpt, type, author, and reading time. The content should be diverse, engaging, and visually consistent.",
+        min_items: 6, // 6 visible in grid at a time
+        max_items: 9, // allows for paginated dataset
+      },
+      fields: [
+        {
+          key: "blog",
+          label: "Blog",
+          field_interface: "BoxWidget",
+          // Card container – no hint needed
+        },
+        {
+          key: "media",
+          label: "Media",
+          field_interface: "MediaWidget",
+          hint: {
+            prompt_description:
+              "Featured image for the blog post card, visually representing the article. Should be high-quality, visually engaging, and align with the blog's topic. Landscape orientation, fits the top portion of the card.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "blog-info-wrapper",
+          label: "Blog Info Wrapper",
+          field_interface: "BoxWidget",
+          // Layout grouping – no hint needed
+        },
+        {
+          key: "blog-content",
+          label: "Blog Content",
+          field_interface: "BoxWidget",
+          // Layout grouping – no hint needed
+        },
+        {
+          key: "blog-header",
+          label: "Blog Header",
+          field_interface: "BoxWidget",
+          // Layout grouping – no hint needed
+        },
+        {
+          key: "header-icon",
+          label: "Header Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon visually indicating the blog type or category next to the blog type text, such as a newspaper or tag. Should be stylish, clear, and monochrome if possible.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "blog-type",
+          label: "Blog Type",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Blog post category or topic, e.g., 'Article / Lifestyle'. Should be short, informative, use sentence case, and highlight the type of content.",
+            min_characters: 10,
+            max_characters: 27,
+          },
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Headline for the blog post card, designed to attract attention and encourage clicks. Should be clear, engaging, and fit on 1 or 2 lines. Use an editorial, inviting tone.",
+            min_characters: 28,
+            max_characters: 60,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Short excerpt or summary of the article, displayed on the card. It should generate curiosity and briefly explain the blog's theme or story in 1-2 concise sentences.",
+            min_characters: 60,
+            max_characters: 130,
+          },
+        },
+        {
+          key: "blog-footer",
+          label: "Blog Footer",
+          field_interface: "BoxWidget",
+          // Layout only – no hint needed
+        },
+        {
+          key: "blog-author",
+          label: "Blog Author",
+          field_interface: "BoxWidget",
+          // Layout only – no hint needed
+        },
+        {
+          key: "author-image",
+          label: "Author Image",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Circular avatar image of the blog post author. Shows a headshot with a neutral background that is easily identifiable at a small size.",
+            orientation: "square",
+            size: "icon",
+            usecase: "avatar",
+          },
+        },
+        {
+          key: "author-name",
+          label: "Author Name",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Author's display name for the card byline. Should feel authentic and natural.",
+            min_characters: 5,
+            max_characters: 25,
+          },
+        },
+        {
+          key: "blog-reading-time-wrapper",
+          label: "Blog Reading Time Wrapper",
+          field_interface: "BoxWidget",
+          // Layout only – no hint needed
+        },
+        {
+          key: "reading-time-icon",
+          label: "Reading Time Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon placed next to the blog reading time, visually indicating time (e.g., clock or stopwatch). Minimalistic style preferred.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "reading-time",
+          label: "Reading Time",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Estimated reading duration for the article, such as '6 Minutes' or '3 min'. Keep it simple and brief.",
+            min_characters: 6,
+            max_characters: 15,
+          },
+        },
+      ],
+    },
+    {
+      key: "pagination-wrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+      // Layout grouping only – no hint needed
+    },
+    {
+      key: "pagination-left",
+      label: "Pagination Left",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the previous page of blog cards. Keep the label brief, such as 'Previous' or a left arrow. Tone should be neutral and functional.",
+        min_characters: 5,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-text",
+      label: "Pagination text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays current and total page number in the paginator, e.g. '1/3' or 'Page 2 of 4'. Should be minimal, clear, and unambiguous.",
+        min_characters: 3,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-right",
+      label: "Pagination Right",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the next page of blog cards. Should be concise, such as 'Next' or a right arrow. Neutral tone.",
+        min_characters: 4,
+        max_characters: 8,
+      },
+    },
+  ],
+  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",
+          },
+        },
+        container: {
+          width: "100%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "7xl",
+          "media:max:768px": {
+            "row-gap": "3xl",
+          },
+          "media:max:480px": {
+            "row-gap": "4xl",
+          },
+        },
+        "header-wrapper": {
+          display: "flex",
+          width: "full",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "media:max:768px": {},
+          "media:max:480px": {
+            "row-gap": "2xs",
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "justify-content": "flex-start",
+          },
+        },
+        header: {
+          flex: "1",
+          "font-size": "4xl",
+          "font-weight": "bold",
+          "line-height": 1.625,
+          "media:max:768px": {
+            "font-size": "2xl",
+          },
+        },
+        "header-cta": {},
+        blogs_levoGroup: {
+          display: "grid",
+          width: "full",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          "row-gap": "2xl",
+          "column-gap": "2xl",
+          "media:max:768px": {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            "row-gap": "xl",
+            "column-gap": "xl",
+          },
+          "media:max:480px": {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "row-gap": "2xl",
+          },
+        },
+        blogs: BLOGS_STYLES,
+        "pagination-wrapper": {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
+        "pagination-left": {},
+        "pagination-text": {},
+        "pagination-right": {},
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,83 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Media,
+  Section,
+  Typography,
+  useContentEngine,
+} from "@levo-so/studio";
+
+import type { IBlogListing2Content } from "./blog-listing-2.schema";
+
+const BlogListing2: React.FC<
+  ILevoBlockBaseProps<IBlogListing2Content>
+> = () => {
+  const { data, query, setQuery, meta } = useContentEngine("blogs");
+
+  const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
+  const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-wrapper">
+          <Heading elementKey="header" />
+          <Button elementKey="header-cta" />
+        </Box>
+        <Box elementKey="blogs_levoGroup" data-levo_group>
+          {(data || [])?.map((item: any, index: number) => (
+            <Box
+              key={`blogs.${index}`}
+              data-levo_group_item
+              elementKey={`blogs.${index}.blog`}
+            >
+              <Media elementKey={`blogs.${index}.media`} alt="Blog Media" />
+              <Box elementKey={`blogs.${index}.blog-info-wrapper`}>
+                <Box elementKey={`blogs.${index}.blog-content`}>
+                  <Box elementKey={`blogs.${index}.blog-header`}>
+                    <Icon elementKey={`blogs.${index}.header-icon`} />
+                    <Typography elementKey={`blogs.${index}.blog-type`} />
+                  </Box>
+                  <Heading elementKey={`blogs.${index}.title`} />
+                  <Typography elementKey={`blogs.${index}.description`} />
+                </Box>
+                <Box elementKey={`blogs.${index}.blog-footer`}>
+                  <Box elementKey={`blogs.${index}.blog-author`}>
+                    <Icon elementKey={`blogs.${index}.author-image`} />
+                    <Typography elementKey={`blogs.${index}.author-name`} />
+                  </Box>
+                  <Box elementKey={`blogs.${index}.blog-reading-time-wrapper`}>
+                    <Icon elementKey={`blogs.${index}.reading-time-icon`} />
+                    <Typography elementKey={`blogs.${index}.reading-time`} />
+                  </Box>
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="pagination-wrapper">
+          <Button
+            elementKey="pagination-left"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          />
+          <Typography elementKey="pagination-text">
+            {`${query?.page || 0}/${meta?.pages || 0}`}
+          </Typography>
+          <Button
+            elementKey="pagination-right"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default BlogListing2;