@levo-so/blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,834 @@
+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 = {
+  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 DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "main-content": null,
+
+  // Sidebar
+  sidebar: null,
+  "sidebar-cards": [
+    {
+      card: null,
+      heading: "Legal Services",
+      content: [
+        {
+          "content-item": null,
+          title: "Expert Legal Advice",
+          description:
+            "Get professional guidance for your legal matters with our experienced team.",
+        },
+        {
+          "content-item": null,
+          title: "24/7 Consultation",
+          description: "Available round the clock for your urgent needs.",
+        },
+      ],
+      button: "Learn More",
+    },
+    {
+      card: null,
+      heading: "Case Solutions",
+      content: [
+        {
+          "content-item": null,
+          title: "Case Management",
+          description:
+            "Comprehensive case tracking and management for optimal results.",
+        },
+      ],
+      button: "View Cases",
+    },
+    {
+      card: null,
+      heading: "Support Center",
+      content: [
+        {
+          "content-item": null,
+          title: "24/7 Support",
+          description:
+            "Round-the-clock assistance for urgent legal consultations.",
+        },
+      ],
+      button: "Contact Us",
+    },
+  ],
+
+  // Social section
+  "social-section": null,
+  "social-title": "Follow Us",
+  "social-icons": [
+    { icon: DUMMY_ICON },
+    { icon: DUMMY_ICON },
+    { icon: DUMMY_ICON },
+  ],
+
+  // Blog content
+  "blog-content": null,
+
+  // Content meta
+  "content-meta": null,
+  "content-icons": [
+    {
+      "icon-wrapper": null,
+      icon: DUMMY_ICON,
+      description: "Expert Analysis",
+    },
+    {
+      "icon-wrapper": null,
+      icon: DUMMY_ICON,
+      description: "Case Studies",
+    },
+  ],
+  "meta-info": null,
+  "date-wrapper": null,
+  "calendar-icon": DUMMY_ICON,
+  "publish-date": "2025-01-16T10:23:31.297Z",
+  "time-wrapper": null,
+  "time-icon": DUMMY_ICON,
+  "reading-time": "12 Minutes",
+
+  // Content
+  "content-section": null,
+  content:
+    "Corporate law governs the formation, operation, and dissolution of corporations. Understanding these fundamentals is crucial for business leaders, entrepreneurs, and legal professionals. This comprehensive guide explores the key principles, regulatory frameworks, and practical applications that shape modern corporate governance.",
+};
+
+export type IBlogPost2Content = typeof DEFAULT_CONTENT;
+
+export const BlogPost2: IBlock = {
+  category_id: "blogs",
+  title: "Blog Post 2",
+  key: "blog-post-2",
+  version: "v1",
+  prompt_description:
+    "Two-column layout with a left sidebar containing three feature cards and social media icons, paired with main blog content including meta icons, calendar, time, and article content.",
+  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: "main-content",
+      label: "Main Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main wrapper for the two-column layout. No content needed.",
+      },
+    },
+
+    // Sidebar
+    {
+      key: "sidebar",
+      label: "Sidebar",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Left sidebar container for cards and social icons. No content needed.",
+      },
+    },
+    {
+      key: "sidebar-cards",
+      label: "Sidebar Cards",
+      field_interface: "BoxWidget",
+      kind: "group",
+      hint: {
+        prompt_description:
+          "Three feature cards in the sidebar showcasing services or features.",
+      },
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "heading",
+          label: "Heading",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Main heading for the card section. Should be descriptive and concise.",
+            min_characters: 8,
+            max_characters: 40,
+          },
+        },
+        {
+          key: "content",
+          label: "Content",
+          field_interface: "BoxWidget",
+          kind: "group",
+          hint: {
+            prompt_description:
+              "Repeatable content items with title and description pairs.",
+          },
+          fields: [
+            {
+              key: "content-item",
+              label: "Content Item",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "title",
+              label: "Title",
+              field_interface: "HeadingWidget",
+              hint: {
+                prompt_description:
+                  "Content title describing the service or feature. Keep it concise and impactful.",
+                min_characters: 10,
+                max_characters: 40,
+              },
+            },
+            {
+              key: "description",
+              label: "Description",
+              field_interface: "TypographyWidget",
+              hint: {
+                prompt_description:
+                  "Brief description explaining the service or feature benefits.",
+                min_characters: 40,
+                max_characters: 120,
+              },
+            },
+          ],
+        },
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button for the card. Use action-oriented text.",
+            min_characters: 5,
+            max_characters: 20,
+          },
+        },
+      ],
+    },
+
+    // Social section
+    {
+      key: "social-section",
+      label: "Social Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for social media section. No content needed.",
+      },
+    },
+    {
+      key: "social-title",
+      label: "Social Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Title for the social media section. Keep it short and engaging.",
+        min_characters: 5,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "social-icons",
+      label: "Social Icons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      hint: {
+        prompt_description:
+          "Social media platform icons for connecting with the audience.",
+      },
+      fields: [
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Social media platform icon. Use recognizable platform icons.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+      ],
+    },
+
+    // Blog content
+    {
+      key: "blog-content",
+      label: "Blog Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Main blog content area. No content needed.",
+      },
+    },
+
+    // Content meta
+    {
+      key: "content-meta",
+      label: "Content Meta",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for content metadata and icons. No content needed.",
+      },
+    },
+    {
+      key: "content-icons",
+      label: "Content Icons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      hint: {
+        prompt_description:
+          "Repeatable icons with descriptions for content features or highlights.",
+      },
+      fields: [
+        {
+          key: "icon-wrapper",
+          label: "Icon Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Icon representing a content feature or highlight.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Brief description of the content feature or highlight.",
+            min_characters: 8,
+            max_characters: 30,
+          },
+        },
+      ],
+    },
+    {
+      key: "meta-info",
+      label: "Meta Info",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for publication date and reading time. No content needed.",
+      },
+    },
+    {
+      key: "date-wrapper",
+      label: "Date Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "calendar-icon",
+      label: "Calendar Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Calendar icon for publication date.",
+        orientation: "square",
+        size: "icon",
+        usecase: "icon",
+      },
+    },
+    {
+      key: "publish-date",
+      label: "Publish Date",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Publication date of the blog post.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "time-wrapper",
+      label: "Time Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "time-icon",
+      label: "Time Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Clock icon for reading time.",
+        orientation: "square",
+        size: "icon",
+        usecase: "icon",
+      },
+    },
+    {
+      key: "reading-time",
+      label: "Reading Time",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Estimated reading time for the blog post.",
+        min_characters: 5,
+        max_characters: 15,
+      },
+    },
+
+    // Content
+    {
+      key: "content-section",
+      label: "Content Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Main blog content container. No content needed.",
+      },
+    },
+    {
+      key: "content",
+      label: "Content",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Full blog article content. Should be comprehensive and informative.",
+        min_characters: 200,
+        max_characters: 8000,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "8xl",
+          "padding-bottom": "8xl",
+          "padding-left": "6xl",
+          "padding-right": "6xl",
+          mobile: {
+            "padding-top": "5xl",
+            "padding-bottom": "5xl",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+          },
+        },
+        container: {
+          width: "100%",
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        "main-content": {
+          display: "flex",
+          "column-gap": "4xl",
+          "row-gap": "4xl",
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+
+        // Sidebar styles
+        sidebar: {
+          width: "300px",
+          "flex-shrink": "0",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+          mobile: {
+            width: "100%",
+          },
+        },
+        "sidebar-cards_levoGroup": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+        },
+        "sidebar-cards": [
+          {
+            card: {
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              border: "1px solid",
+              "border-color": "var(--color-border)",
+              "background-color": "var(--color-background-1)",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            heading: {
+              "font-size": "xl",
+              "font-weight": "bold",
+              color: "var(--color-text-1)",
+              "margin-bottom": "base",
+            },
+            content_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            content: [
+              {
+                "content-item": {
+                  "margin-bottom": "sm",
+                },
+                title: {
+                  "font-size": "lg",
+                  "font-weight": "semibold",
+                  "margin-bottom": "xs",
+                  color: "var(--color-text-1)",
+                },
+                description: {
+                  "font-size": "sm",
+                  color: "var(--color-text-2)",
+                  "line-height": "1.5",
+                },
+              },
+              {
+                "content-item": {
+                  "margin-bottom": "sm",
+                },
+                title: {
+                  "font-size": "lg",
+                  "font-weight": "semibold",
+                  "margin-bottom": "xs",
+                  color: "var(--color-text-1)",
+                },
+                description: {
+                  "font-size": "sm",
+                  color: "var(--color-text-2)",
+                  "line-height": "1.5",
+                },
+              },
+            ],
+            button: {
+              "padding-top": "xs",
+              "padding-bottom": "xs",
+              "padding-left": "base",
+              "padding-right": "base",
+              "background-color": "var(--color-background-1)",
+              "border-radius": "base",
+              border: "1px solid",
+              "border-color": "var(--color-border)",
+              "font-size": "sm",
+              "font-weight": "medium",
+              color: "var(--color-text-1)",
+              "margin-top": "auto",
+            },
+          },
+          {
+            card: {
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              border: "1px solid",
+              "border-color": "var(--color-border)",
+              "background-color": "var(--color-background-1)",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            image: {
+              width: "48px",
+              height: "48px",
+              "border-radius": "base",
+            },
+            content_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            content: [
+              {
+                "content-item": {
+                  "margin-bottom": "sm",
+                },
+                title: {
+                  "font-size": "lg",
+                  "font-weight": "semibold",
+                  "margin-bottom": "xs",
+                  color: "var(--color-text-1)",
+                },
+                description: {
+                  "font-size": "sm",
+                  color: "var(--color-text-2)",
+                  "line-height": "1.5",
+                },
+              },
+            ],
+            button: {
+              "padding-top": "xs",
+              "padding-bottom": "xs",
+              "padding-left": "base",
+              "padding-right": "base",
+              "background-color": "var(--color-background-1)",
+              "border-radius": "base",
+              border: "1px solid",
+              "border-color": "var(--color-border)",
+              "font-size": "sm",
+              "font-weight": "medium",
+              color: "var(--color-text-1)",
+              "margin-top": "auto",
+            },
+          },
+          {
+            card: {
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              border: "1px solid",
+              "border-color": "var(--color-border)",
+              "background-color": "var(--color-background-1)",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            image: {
+              width: "48px",
+              height: "48px",
+              "border-radius": "base",
+            },
+            content_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            content: [
+              {
+                "content-item": {
+                  "margin-bottom": "sm",
+                },
+                title: {
+                  "font-size": "lg",
+                  "font-weight": "semibold",
+                  "margin-bottom": "xs",
+                  color: "var(--color-text-1)",
+                },
+                description: {
+                  "font-size": "sm",
+                  color: "var(--color-text-2)",
+                  "line-height": "1.5",
+                },
+              },
+            ],
+            button: {
+              "padding-top": "xs",
+              "padding-bottom": "xs",
+              "padding-left": "base",
+              "padding-right": "base",
+              "background-color": "var(--color-background-1)",
+              "border-radius": "base",
+              border: "1px solid",
+              "border-color": "var(--color-border)",
+              "font-size": "sm",
+              "font-weight": "medium",
+              color: "var(--color-text-1)",
+              "margin-top": "auto",
+            },
+          },
+        ],
+
+        // Social section styles
+        "social-section": {
+          "padding-top": "2xl",
+          "border-top": "1px solid",
+          "border-color": "var(--color-border)",
+        },
+        "social-title": {
+          "font-size": "lg",
+          "font-weight": "semibold",
+          "margin-bottom": "lg",
+          color: "var(--color-text-1)",
+        },
+        "social-icons_levoGroup": {
+          display: "flex",
+          "column-gap": "base",
+        },
+        "social-icons": [
+          {
+            icon: {
+              width: "32px",
+              height: "32px",
+            },
+          },
+          {
+            icon: {
+              width: "32px",
+              height: "32px",
+            },
+          },
+          {
+            icon: {
+              width: "32px",
+              height: "32px",
+            },
+          },
+        ],
+
+        // Blog content styles
+        "blog-content": {
+          "flex-grow": "1",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+        },
+
+        // Content meta styles
+        "content-meta": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          "padding-top": "xl",
+          "padding-bottom": "xl",
+          "border-top": "1px solid",
+          "border-bottom": "1px solid",
+          "border-color": "var(--color-border)",
+        },
+        "content-icons_levoGroup": {
+          display: "flex",
+          "column-gap": "2xl",
+          "row-gap": "lg",
+          "flex-wrap": "wrap",
+        },
+        "content-icons": [
+          {
+            "icon-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            description: {
+              "font-size": "sm",
+              "font-weight": "medium",
+              color: "var(--color-text-1)",
+            },
+          },
+          {
+            "icon-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            description: {
+              "font-size": "sm",
+              "font-weight": "medium",
+              color: "var(--color-text-1)",
+            },
+          },
+        ],
+        "meta-info": {
+          display: "flex",
+          "column-gap": "2xl",
+          "row-gap": "lg",
+          "flex-wrap": "wrap",
+        },
+        "date-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "calendar-icon": {
+          width: "20px",
+          height: "20px",
+        },
+        "publish-date": {
+          "font-size": "sm",
+          color: "var(--color-text-2)",
+        },
+        "time-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "time-icon": {
+          width: "20px",
+          height: "20px",
+        },
+        "reading-time": {
+          "font-size": "sm",
+          color: "var(--color-text-2)",
+        },
+
+        // Content styles
+        "content-section": {
+          display: "flex",
+          "flex-direction": "column",
+        },
+        content: {
+          "font-size": "base",
+          "line-height": "1.7",
+          color: "var(--color-text-1)",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};