@osimart/create-storefront 1.0.13 → 1.0.16

package/app/composables/useBlogPost.js

@@ -0,0 +1,131 @@
+import BlogServices from "#osi/services/BlogServices";
+
+/**
+ * The blog post a page shows — /blogs/<blog>/<post>, Shopify's article.
+ *
+ * Called by the page (awaited, so the post is in the SSR payload) and by
+ * MAIN_BLOG_POST (not awaited — same key, it reads that payload instead of
+ * fetching again), like useProductResource.
+ *
+ * Which post:
+ *   the route      /blogs/<blog>/<slug> (route "blog-post"), or the render
+ *                  payload's resource { type: 'BLOG_POST', slug }
+ *   the editor     no route: the store's newest published post, so the
+ *                  merchant designs against a real title, image and body; a
+ *                  sample post while the store has none
+ *
+ * `post` is normalised for the blocks:
+ *   { id, slug, title, image, imageAlt, html, excerpt, author, authorImage,
+ *     date, blog, blogSlug, tags, seo, url, placeholder }
+ */
+export function useBlogPost() {
+  const route = useRoute();
+  const { resource } = useRenderContext();
+  const placeholders = usePlaceholders();
+  const { baseUrl } = useStoreInit();
+  const { mediaUrl } = useMediaUrl();
+  const t = useT();
+
+  const slug = computed(() => {
+    if (route.name === "blog-post" && route.params.slug) return String(route.params.slug);
+    if (resource.value?.type === "BLOG_POST" && resource.value.slug) return String(resource.value.slug);
+    return null;
+  });
+
+  // Resolved here, before any await (see useStorefront on SSR context).
+  const base = baseUrl.value;
+
+  async function loadBySlug(value) {
+    try {
+      return await BlogServices.getPost(value, base);
+    } catch (err) {
+      if (err?.status === 404) return null;
+      throw createError({ statusCode: 500, statusMessage: "Couldn't load this post", fatal: true });
+    }
+  }
+
+  /** The editor: the newest published post, with its body. */
+  async function loadLatest() {
+    const res = await BlogServices.getPosts({ limit: 1 }, base).catch(() => null);
+    const first = (Array.isArray(res) ? res : res?.results ?? [])[0];
+    if (!first) return null;
+    if (!first.slug) return first;
+    const detail = await BlogServices.getPost(first.slug, base).catch(() => null);
+    return detail ? { ...first, ...detail } : first;
+  }
+
+  const asyncData = useAsyncData(
+    `blog-post:${slug.value ?? "preview"}`,
+    () => (slug.value ? loadBySlug(slug.value) : loadLatest()),
+    {
+      watch: [slug],
+      default: () => null,
+      getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key] ?? nuxtApp.static.data[key],
+    }
+  );
+  const { data, pending, error } = asyncData;
+
+  const name = (v) => (v && typeof v === "object" ? v.name || v.title || v.full_name || "" : String(v || ""));
+  const slugOf = (v) => (v && typeof v === "object" ? v.slug || "" : "");
+
+  function normalise(p) {
+    const blogSlug = slugOf(p.category) || p.category_slug || "news";
+    const author = p.author && typeof p.author === "object" ? p.author : null;
+    return {
+      id: p.id ?? null,
+      slug: p.slug ?? "",
+      title: t(p.title) || "",
+      image: mediaUrl(p.image ?? p.cover ?? p.featured_image ?? null) || "",
+      imageAlt: t(p.image_alt) || t(p.title) || "",
+      html: t(p.description ?? p.content ?? p.body) || "",
+      excerpt: t(p.short_desc ?? p.excerpt) || "",
+      author: name(p.author) || p.author_name || "",
+      authorImage: author?.image ? mediaUrl(author.image) : "",
+      date: p.published_at || p.created_at || null,
+      blog: name(p.category) || p.category_name || "",
+      blogSlug,
+      tags: (p.tags ?? []).map((tag) => ({ name: name(tag), slug: slugOf(tag) })).filter((tag) => tag.name),
+      seo: { title: t(p.seo_title) || "", description: t(p.seo_description) || "" },
+      url: p.slug ? `/blogs/${blogSlug}/${p.slug}` : "",
+      placeholder: false,
+      raw: p,
+    };
+  }
+
+  /** The editor with no posts yet: a sample to design with. */
+  const SAMPLE = {
+    id: null,
+    slug: "",
+    title: "Behind the scenes of our new collection",
+    image: "",
+    imageAlt: "",
+    html:
+      "<p>This is where your blog post appears. Write posts in Blog posts, then " +
+      "every one of them uses this page's design.</p>" +
+      "<h2>A heading inside the post</h2>" +
+      "<p>Paragraphs, <a href=\"#\">links</a>, lists and images keep the theme's " +
+      "fonts and colours. Long posts read best at about seventy characters a line.</p>" +
+      "<ul><li>Share the story behind a product</li><li>Announce what's new</li>" +
+      "<li>Answer the questions customers ask most</li></ul>" +
+      "<blockquote><p>A quote from a maker or a customer stands out like this.</p></blockquote>",
+    excerpt: "How we chose every fabric, colour and stitch.",
+    author: "Jane Doe",
+    authorImage: "",
+    date: new Date().toISOString(),
+    blog: "News",
+    blogSlug: "news",
+    tags: [{ name: "Behind the scenes", slug: "" }, { name: "Makers", slug: "" }],
+    seo: { title: "", description: "" },
+    url: "",
+    placeholder: true,
+  };
+
+  const post = computed(() => {
+    if (data.value) return normalise(data.value);
+    return placeholders.allowed?.value && !slug.value ? SAMPLE : null;
+  });
+
+  const loading = computed(() => pending.value && !data.value);
+
+  return { post, slug, loading, error, asyncData, isPlaceholder: computed(() => !!post.value?.placeholder) };
+}

package/app/composables/useCheckout.js

@@ -352,23 +352,10 @@ export function useCheckout() {
 
   async function waitForUserInfoIfNeeded() {
     if (!authBus.isLoggedIn) return;
-
-    await new Promise((resolve) => {
-      const checkInterval = setInterval(() => {
-        if (authBus.userInfo) {
-          clearInterval(checkInterval);
-          handleUserInfo();
-          resolve();
-        }
-      }, 0);
-
-      // Fallback in case user info never arrives
-      setTimeout(() => {
-        clearInterval(checkInterval);
-        needsUserInfo.value = false;
-        resolve();
-      }, 0);
-    });
+    // Same request the auth.client plugin started — no duplicate fetch.
+    await authBus.init();
+    handleUserInfo();
+    needsUserInfo.value = false;
   }
 
   // ================================================================

package/app/composables/useContentTree.js

@@ -266,6 +266,13 @@ export function useContentTree(section, options = {}) {
     const v = block.settings ?? {};
     const base = { key: block.id ?? block.key, type: block.type, s: v, children };
 
+    // A section's own component for a type wins over the built-in drawing
+    // (the blog post page's Details is the Blog posts card's BLOG_POST_INFO,
+    // but drawn from the page's post, not a card item).
+    if (options.custom?.[block.type] && !options.raw?.includes(block.type)) {
+      return customNode(block, base, v);
+    }
+
     switch (block.type) {
       // A Slide is a Group with a background — drawn as one (type GROUP), marked
       // `slide` so the slideshow can find it.
@@ -519,6 +526,25 @@ export function useContentTree(section, options = {}) {
         };
       }
 
+      // Blog posts' card: the post's author / date / blog line.
+      case "BLOG_POST_INFO":
+        return {
+          ...base,
+          ...sizeOf(v, "WIDTH", null, "FIT"),
+          box: boxOf(v),
+          ...textLook(v, "CUSTOM"),
+          part: "info",
+          info: {
+            author: v.SHOW_AUTHOR !== false,
+            authorPrefix: t(v.AUTHOR_PREFIX) ?? "",
+            date: v.SHOW_DATE !== false,
+            dateFormat: upper(v.DATE_FORMAT, "MEDIUM"),
+            blog: !!v.SHOW_BLOG,
+            separator: { DOT: "·", PIPE: "|", DASH: "—", SLASH: "/" }[upper(v.SEPARATOR, "DOT")] ?? "·",
+          },
+          clamp: false,
+        };
+
       case "CARD_TITLE":
       case "CARD_COUNT":
       case "CARD_DESCRIPTION":
@@ -712,22 +738,27 @@ export function useContentTree(section, options = {}) {
         // options.raw: types the section draws itself from the tree (the
         // classification page's Toolbar / Product grid) — kept as plain nodes.
         if (options.raw?.includes(block.type)) return base;
-        const component = options.custom?.[block.type];
-        if (!component) return null;
-        // options.customText: { TYPE: default preset } — blocks with the Text
-        // block's look (a banner's title…) get it resolved like Text does.
-        const textDefault = options.customText?.[block.type];
-        return {
-          ...base,
-          ...sizeOf(v, "WIDTH", "WIDTH_MOBILE", "FILL"),
-          box: boxOf(v, { background: false }),
-          ...(textDefault ? textLook(v, textDefault) : {}),
-          component: markRaw(component),
-        };
+        return customNode(block, base, v);
       }
     }
   }
 
+  /** A block drawn by the section's own component (options.custom). */
+  function customNode(block, base, v) {
+    const component = options.custom?.[block.type];
+    if (!component) return null;
+    // options.customText: { TYPE: default preset } — blocks with the Text
+    // block's look (a banner's title…) get it resolved like Text does.
+    const textDefault = options.customText?.[block.type];
+    return {
+      ...base,
+      ...sizeOf(v, "WIDTH", "WIDTH_MOBILE", "FILL"),
+      box: boxOf(v, { background: false }),
+      ...(textDefault ? textLook(v, textDefault) : {}),
+      component: markRaw(component),
+    };
+  }
+
   /**
    * VISIBILITY (every content block): shown everywhere, or only on phones /
    * only on larger screens. A class the parent puts on the node's element

package/app/logic/components/BlogPostPart.js

@@ -0,0 +1,237 @@
+/**
+ * The blog post page's parts (MAIN_BLOG_POST's own blocks), drawn from what
+ * MainBlogPostSection provides as "osiBlogPost" (the post, the section's
+ * settings):
+ *
+ *   BLOG_POST_IMAGE    the featured image: RATIO (or a FIXED height), FIT,
+ *                      RADIUS, an overlay
+ *   BLOG_POST_TITLE    the title
+ *   BLOG_POST_INFO     author (with photo) · date · blog
+ *   BLOG_POST_EXCERPT  the short description
+ *   BLOG_POST_CONTENT  the body (HTML): its own text size, line height,
+ *                      paragraph spacing, headings, links, quotes, images,
+ *                      drop cap
+ *   BLOG_POST_TAGS     the tags: pills, outlined pills or #text
+ *   SHARE              share links and copy link
+ *
+ * Every part's size: Width (on its wrapper, by useContentTree), then a
+ * maximum width — its own MAX_WIDTH, or "" = the section's TEXT_WIDTH — and
+ * POSITION when it's narrower than the section. Title, Details, Excerpt,
+ * Tags and Share take the Text block's look, resolved onto the node.
+ */
+const RATIOS = { SQUARE: "1 / 1", PORTRAIT_4_5: "4 / 5", PORTRAIT_3_4: "3 / 4", LANDSCAPE: "4 / 3", WIDE: "16 / 9" };
+const SEPARATORS = { DOT: "·", PIPE: "|", DASH: "—", SLASH: "/" };
+const DATE_FORMATS = {
+  SHORT: { day: "2-digit", month: "2-digit", year: "numeric" },
+  MEDIUM: { day: "numeric", month: "short", year: "numeric" },
+  LONG: { day: "numeric", month: "long", year: "numeric" },
+};
+const WIDTHS = { NONE: "none", SMALL: "560px", MEDIUM: "760px", LARGE: "960px" };
+const MARGINS = {
+  LEFT: { marginLeft: "0", marginRight: "auto" },
+  CENTER: { marginLeft: "auto", marginRight: "auto" },
+  RIGHT: { marginLeft: "auto", marginRight: "0" },
+};
+const ALIGN = { LEFT: "left", CENTER: "center", RIGHT: "right", JUSTIFY: "justify" };
+
+const SHARE_ICONS = {
+  FACEBOOK:
+    '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 21v-7.5h2.5l.4-3h-2.9V8.6c0-.9.3-1.5 1.5-1.5h1.5V4.4c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.4H8v3h2.6V21h2.9z"/></svg>',
+  X: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.8 3h3.1l-6.8 7.7L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.2-8.3L1.8 3h6.4l4.4 5.8L17.8 3zm-1.1 16.2h1.7L7.4 4.7H5.6l11.1 14.5z"/></svg>',
+  WHATSAPP:
+    '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3 1 2.5c.1.2 1.7 2.6 4.1 3.6 1.5.7 2.1.7 2.9.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.4-.4z"/></svg>',
+  LINKEDIN:
+    '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3V9.5zm6.5 0h3.8v1.6h.1c.5-1 1.8-2 3.8-2 4 0 4.8 2.6 4.8 6V21h-4v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V21h-4V9.5z"/></svg>',
+  PINTEREST:
+    '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 0-2.9l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.4 1.8-2.4.9 0 1.3.6 1.3 1.4 0 .9-.5 2.1-.8 3.3-.2 1 .5 1.8 1.5 1.8 1.8 0 3.1-1.9 3.1-4.6 0-2.4-1.7-4.1-4.2-4.1-2.9 0-4.6 2.1-4.6 4.4 0 .9.3 1.8.8 2.3.1.1.1.2.1.3l-.3 1.2c0 .2-.2.2-.4.1-1.3-.6-2.1-2.5-2.1-4 0-3.3 2.4-6.3 6.9-6.3 3.6 0 6.4 2.6 6.4 6 0 3.6-2.3 6.5-5.4 6.5-1.1 0-2.1-.6-2.4-1.2l-.7 2.5c-.2.9-.9 2.1-1.3 2.8A10 10 0 1 0 12 2z"/></svg>',
+  EMAIL:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3.5 6.5 12 13l8.5-6.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  COPY_LINK:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1" stroke-linecap="round"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" stroke-linecap="round"/></svg>',
+  COPIED:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12.5l4.2 4.2L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+};
+const SHARE_NAMES = {
+  FACEBOOK: "Facebook", X: "X", WHATSAPP: "WhatsApp", LINKEDIN: "LinkedIn",
+  PINTEREST: "Pinterest", EMAIL: "Email", COPY_LINK: "Copy link",
+};
+
+export default function useLogic({ props }) {
+  const t = useT();
+  const ctx = inject("osiBlogPost", null);
+  const { isPreview } = useBuilderPreview();
+  const locale = useState("locale", () => "en");
+  const origin = useRequestURL().origin;
+
+  const s = computed(() => props.node.s ?? {});
+  const type = computed(() => props.node.type);
+  const post = computed(() => ctx?.post.value ?? null);
+  const section = computed(() => ctx?.section?.value ?? {});
+
+  const upper = (v, d) => String(v || d).toUpperCase();
+  const has = (v) => v !== "" && v != null && Number.isFinite(Number(v));
+  const num = (v, d) => (has(v) ? Number(v) : d);
+  const px = (v) => `${v}px`;
+
+  /* -------------------------------------------------------------- size */
+
+  /** Max width + position. "" = the section's Text width. */
+  const sizeStyle = computed(() => {
+    const v = s.value;
+    let max;
+    if (has(v.MAX_WIDTH)) {
+      max = px(Number(v.MAX_WIDTH)); // a number saved by the first version
+    } else {
+      const own = upper(v.MAX_WIDTH, "");
+      const key = own || upper(section.value.TEXT_WIDTH, "MEDIUM");
+      const custom = own ? v.MAX_WIDTH_CUSTOM : section.value.TEXT_WIDTH_CUSTOM;
+      max = key === "CUSTOM" ? px(num(custom, 760)) : WIDTHS[key] ?? WIDTHS.MEDIUM;
+    }
+    return {
+      width: "100%",
+      maxWidth: max,
+      "--cb-max": max,
+      ...(max === "none" ? {} : MARGINS[upper(v.POSITION, "CENTER")] ?? MARGINS.CENTER),
+    };
+  });
+
+  /* ------------------------------------------------------------- image */
+
+  const imageVars = computed(() => {
+    const v = s.value;
+    const ratio = upper(v.RATIO, "WIDE");
+    const fixed = ratio === "FIXED";
+    const out = {
+      "--bpp-ratio": fixed || ratio === "NATURAL" ? "auto" : RATIOS[ratio] ?? "16 / 9",
+      "--bpp-fit": upper(v.FIT, "COVER") === "CONTAIN" ? "contain" : "cover",
+      "--bpp-radius": px(num(v.RADIUS, 0)),
+    };
+    if (fixed) {
+      out["--bpp-h"] = px(num(v.IMAGE_HEIGHT, 320));
+      out["--bpp-h-m"] = px(num(v.IMAGE_HEIGHT_MOBILE, num(v.IMAGE_HEIGHT, 320)));
+    }
+    return out;
+  });
+  const imageFixed = computed(() => upper(s.value.RATIO, "WIDE") === "FIXED");
+  const imageNatural = computed(() => upper(s.value.RATIO, "WIDE") === "NATURAL");
+  const overlay = computed(() => {
+    const opacity = num(s.value.OVERLAY_OPACITY, 0);
+    return opacity > 0 ? { background: s.value.OVERLAY_COLOR || "#000", opacity: opacity / 100 } : null;
+  });
+
+  /* ------------------------------------------------------------ details */
+
+  const infoParts = computed(() => {
+    const p = post.value;
+    const v = s.value;
+    if (!p) return [];
+    const parts = [];
+    if (v.SHOW_AUTHOR !== false && p.author) {
+      parts.push({
+        kind: "author",
+        text: [t(v.AUTHOR_PREFIX) ?? "", p.author].filter(Boolean).join(" "),
+        avatar: v.SHOW_AVATAR !== false ? p.authorImage || "" : "",
+        initial: v.SHOW_AVATAR !== false && !p.authorImage ? p.author.trim().charAt(0).toUpperCase() : "",
+      });
+    }
+    if (v.SHOW_DATE !== false && p.date) {
+      const d = new Date(p.date);
+      if (!Number.isNaN(d.getTime())) {
+        const format = DATE_FORMATS[upper(v.DATE_FORMAT, "MEDIUM")] ?? DATE_FORMATS.MEDIUM;
+        parts.push({ kind: "date", text: new Intl.DateTimeFormat(locale.value || undefined, format).format(d), iso: d.toISOString() });
+      }
+    }
+    if (v.SHOW_BLOG && p.blog) parts.push({ kind: "blog", text: p.blog });
+    return parts;
+  });
+  const separator = computed(() => SEPARATORS[upper(s.value.SEPARATOR, "DOT")] ?? "·");
+  const avatarSize = computed(() => px(num(s.value.AVATAR_SIZE, 32)));
+
+  /* ------------------------------------------------------------ content */
+
+  const contentVars = computed(() => {
+    const v = s.value;
+    return {
+      "--bpp-fs": px(num(v.FONT_SIZE, 17)),
+      "--bpp-fs-m": px(num(v.FONT_SIZE_MOBILE, num(v.FONT_SIZE, 16))),
+      "--bpp-lh": String(num(v.LINE_HEIGHT, 170) / 100),
+      "--bpp-ps": px(num(v.PARAGRAPH_SPACING, 20)),
+      "--bpp-hs": String(num(v.HEADING_SCALE, 100) / 100),
+      "--bpp-hf": upper(v.HEADING_FONT, "HEADING") === "BODY" ? "var(--osi-font-body)" : "var(--osi-font-heading)",
+      "--bpp-media-r": px(num(v.MEDIA_RADIUS, 8)),
+      ...(v.COLOR ? { "--bpp-color": v.COLOR } : {}),
+      ...(v.HEADING_COLOR ? { "--bpp-hcolor": v.HEADING_COLOR } : {}),
+      ...(v.LINK_COLOR ? { "--bpp-link": v.LINK_COLOR } : {}),
+      textAlign: ALIGN[upper(v.ALIGNMENT, "LEFT")] ?? "left",
+    };
+  });
+  const contentClasses = computed(() => [
+    `link-${upper(s.value.LINK_STYLE, "UNDERLINE").toLowerCase()}`,
+    `quote-${upper(s.value.QUOTE_STYLE, "LINE").toLowerCase()}`,
+    { "has-dropcap": !!s.value.DROP_CAP },
+  ]);
+
+  /* --------------------------------------------------------------- tags */
+
+  const tagStyle = computed(() => upper(s.value.STYLE, "PILLS").toLowerCase());
+  const tagLabel = computed(() => t(s.value.LABEL) || "");
+
+  /* -------------------------------------------------------------- share */
+
+  const shareUrl = computed(() => {
+    const path = post.value?.url || "";
+    return path ? `${origin}${path}` : origin;
+  });
+  const shareStyle = computed(() => upper(s.value.STYLE, "ICONS").toLowerCase());
+  const shareLabel = computed(() => t(s.value.LABEL) ?? "Share");
+  const iconSize = computed(() => px(num(s.value.ICON_SIZE, 18)));
+  const copied = ref(false);
+
+  const shareLinks = computed(() => {
+    const v = s.value;
+    const url = encodeURIComponent(shareUrl.value);
+    const title = encodeURIComponent(post.value?.title || "");
+    const image = encodeURIComponent(post.value?.image || "");
+    const hrefs = {
+      FACEBOOK: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+      X: `https://twitter.com/intent/tweet?url=${url}&text=${title}`,
+      WHATSAPP: `https://wa.me/?text=${title}%20${url}`,
+      LINKEDIN: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+      PINTEREST: `https://pinterest.com/pin/create/button/?url=${url}&media=${image}&description=${title}`,
+      EMAIL: `mailto:?subject=${title}&body=${url}`,
+    };
+    const defaults = { FACEBOOK: true, X: true, WHATSAPP: true, COPY_LINK: true };
+    return Object.keys(SHARE_NAMES)
+      .filter((key) => (v[key] ?? defaults[key] ?? false) === true)
+      .map((key) => ({
+        key,
+        name: key === "COPY_LINK" && copied.value ? "Copied" : SHARE_NAMES[key],
+        href: hrefs[key] ?? null,
+        icon: key === "COPY_LINK" && copied.value ? SHARE_ICONS.COPIED : SHARE_ICONS[key],
+      }));
+  });
+
+  function onShare(event, link) {
+    // The editor previews the page; it doesn't leave it.
+    if (isPreview.value) {
+      event.preventDefault();
+      return;
+    }
+    if (link.key !== "COPY_LINK") return;
+    event.preventDefault();
+    const done = () => {
+      copied.value = true;
+      setTimeout(() => (copied.value = false), 1800);
+    };
+    navigator.clipboard?.writeText(shareUrl.value).then(done, done);
+  }
+
+  return {
+    t, s, type, post, isPreview, sizeStyle,
+    imageVars, imageFixed, imageNatural, overlay,
+    infoParts, separator, avatarSize,
+    contentVars, contentClasses,
+    tagStyle, tagLabel,
+    shareLinks, shareStyle, shareLabel, iconSize, copied, onShare,
+  };
+}

package/app/logic/components/CardList.js

@@ -1,8 +1,11 @@
-
 export default function useLogic({ props }) {
   const s = computed(() => props.settings ?? {});
+  const { isMobile } = useLayoutShell();
   const layout = computed(() => String(s.value.LAYOUT ?? "GRID").toUpperCase());
-  const isCarousel = computed(() => layout.value === "CAROUSEL");
+  // CAROUSEL_ON_MOBILE (Blog posts): a grid / editorial that swipes on phones.
+  const isCarousel = computed(
+    () => layout.value === "CAROUSEL" || (!!s.value.CAROUSEL_ON_MOBILE && isMobile.value)
+  );
   const config = computed(() => ({ template: props.template }));
 
   /* ---------------------------------------------------------------- variables */
@@ -95,4 +98,4 @@ export default function useLogic({ props }) {
   );
 
   return { s, layout, isCarousel, config, styleVars, perView, carouselOptions, carousel, headerArrows };
-}
+}

package/app/logic/components/ProductGallery.js

@@ -15,5 +15,17 @@ export default function useLogic({ props }) {
 
   const modules = [Pagination];
 
-  return { detail, gallery, images, zoomable, modules };
-}
+  const isDesktop = ref(false);
+  let mql;
+  const update = (e) => (isDesktop.value = e.matches);
+
+  onMounted(() => {
+    mql = window.matchMedia("(min-width: 1024px)");
+    isDesktop.value = mql.matches;
+    mql.addEventListener("change", update);
+  });
+
+  onBeforeUnmount(() => mql?.removeEventListener("change", update));
+
+  return { detail, gallery, images, zoomable, modules, isDesktop };
+}

package/app/logic/sections/BlogPostsSection.js

@@ -0,0 +1,220 @@
+import BlogServices from "#osi/services/BlogServices";
+import { cachedRequest } from "#osi/utils/requestCache";
+
+/**
+ * BLOG_POSTS — Shopify Horizon's "Blog posts" (Storytelling).
+ *
+ *   which posts  BLOG (one blog = a blog category; empty = every blog),
+ *                LIMIT, newest first, published only — fetched here
+ *                (BlogServices), cached per blog / count like every
+ *                storefront request.
+ *   the header   ordinary blocks (a Text "Blog posts" by default).
+ *   the card     the one Card block, drawn once per post by CardList: Featured
+ *                image, Post title, Post details (BLOG_POST_INFO: author /
+ *                date / blog), Excerpt, Read more. Where the Card sits among
+ *                the blocks is where the list goes.
+ *   the layout   Shopify's settings, translated to CardList's (shared with
+ *                the product / category lists): GRID | CAROUSEL | EDITORIAL,
+ *                COLUMNS → also the carousel's slides per view,
+ *                MOBILE_CARD_SIZE → slides per view on phones, ICONS_STYLE /
+ *                ICONS_SHAPE → the arrows, CAROUSEL_ON_MOBILE.
+ *
+ * Sample posts (editor only) stand in when there is nothing real to design
+ * with: no blog picked and the store has no posts yet, or the posts request
+ * failed — then with a notice saying why. A picked blog that has no
+ * published posts shows the empty state, never samples.
+ */
+const ARROW_SVG =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M13 6l6 6-6 6"/></svg>';
+const CHEVRON_SVG =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>';
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+  const { mediaUrl } = useMediaUrl();
+  const placeholders = usePlaceholders();
+  const { baseUrl } = useStoreInit();
+
+  const num = (v, d) => (v !== "" && v != null && Number.isFinite(Number(v)) ? Number(v) : d);
+  const upper = (v, d) => String(v || d).toUpperCase();
+
+  /* -------------------------------------------------------------- posts */
+
+  const idOf = (v) => (v && typeof v === "object" ? v.id ?? null : v === "" ? null : v ?? null);
+  // One blog; a list saved by an earlier build counts as its first id.
+  const blog = computed(() => {
+    const v = s.value.BLOG;
+    const id = idOf(Array.isArray(v) ? v[0] : v);
+    return id == null ? "" : String(id);
+  });
+  const limit = computed(() => Math.min(10, Math.max(1, num(s.value.LIMIT, 3))));
+  // On a blog post page: "more posts" never repeats the one being read — one
+  // extra is fetched and that post dropped.
+  const { resource } = useRenderContext();
+  const reading = computed(() => (resource.value?.type === "BLOG_POST" ? String(resource.value.slug || "") : ""));
+  const fetchCount = computed(() => limit.value + (reading.value ? 1 : 0));
+
+  // Published only: the request asks for it, and this guards an endpoint that
+  // ignores the filter — no drafts / archived, no posts dated in the future.
+  const isLive = (p) => {
+    if (String(p?.status ?? "PUBLISHED").toUpperCase() !== "PUBLISHED") return false;
+    const at = p?.published_at ? Date.parse(p.published_at) : NaN;
+    return !(at > Date.now());
+  };
+
+  // { rows, error } — the error travels with the data so SSR hands it over too.
+  const { data: result, pending: loading } = useAsyncData(
+    `blog-posts:${props.section.key}`,
+    async () => {
+      const key = `blog:${baseUrl.value}:${blog.value || "all"}:${fetchCount.value}`;
+      try {
+        const res = await cachedRequest(key, () =>
+          BlogServices.getPosts({ blog: blog.value, limit: fetchCount.value }, baseUrl.value)
+        );
+        const rows = Array.isArray(res) ? res : res?.results ?? [];
+        return { rows: rows.filter(isLive), error: null };
+      } catch (e) {
+        return { rows: [], error: e?.status ? `HTTP ${e.status}` : e?.message || "network error" };
+      }
+    },
+    { watch: [blog, fetchCount], default: () => ({ rows: [], error: null }) }
+  );
+  const posts = computed(() => result.value?.rows ?? []);
+  const failed = computed(() => result.value?.error ?? null);
+
+  const name = (v) => (v && typeof v === "object" ? v.name || v.title || v.full_name || "" : String(v || ""));
+  const slugOf = (v) => (v && typeof v === "object" ? v.slug || "" : "");
+
+  function postUrl(p) {
+    if (p.external_link) return p.external_link;
+    const blogSlug = slugOf(p.category) || p.category_slug || "news";
+    return `/blogs/${blogSlug}/${p.slug || p.id}`;
+  }
+
+  const SAMPLES = [
+    { title: "Behind the scenes of our new collection", short_desc: "How we chose every fabric, colour and stitch — from the first sketch to the shelf." },
+    { title: "Five ways to style the season's essentials", short_desc: "Simple pairings that take you from weekday mornings to weekend dinners." },
+    { title: "Meet the makers", short_desc: "The small workshops and hands behind the pieces you love." },
+    { title: "A guide to caring for what you own", short_desc: "Little habits that keep your favourites looking new for years." },
+    { title: "What we're reading this month", short_desc: "Books, journals and stories that inspired the team lately." },
+  ];
+
+  const items = computed(() => {
+    const rows = (posts.value ?? [])
+      .filter((p) => !reading.value || String(p.slug ?? "") !== reading.value)
+      .slice(0, limit.value)
+      .map((p) => ({
+        key: p.id ?? p.slug,
+        title: t(p.title) || "",
+        description: t(p.short_desc ?? p.excerpt ?? p.description) || "",
+        image: mediaUrl(p.image ?? p.cover ?? p.featured_image ?? null),
+        imageAlt: t(p.title) || "",
+        url: postUrl(p),
+        author: name(p.author) || p.author_name || "",
+        date: p.published_at || p.created_at || null,
+        blog: name(p.category) || p.category_name || "",
+        raw: p,
+      }));
+    if (rows.length || !placeholders.allowed?.value) return rows;
+    // A picked blog that loaded fine but is empty: the real (empty) state.
+    if (blog.value && !failed.value) return rows;
+    // The editor, nothing real to show: sample posts to design with.
+    const day = 86400000;
+    return Array.from({ length: limit.value }, (_, i) => ({
+      key: `sample-${i}`,
+      ...SAMPLES[i % SAMPLES.length],
+      description: SAMPLES[i % SAMPLES.length].short_desc,
+      image: null,
+      url: "",
+      author: "Jane Doe",
+      date: new Date(Date.now() - i * 4 * day).toISOString(),
+      blog: "News",
+      placeholder: true,
+    }));
+  });
+
+  /* ------------------------------------------------------------- layout */
+
+  const { tree } = useContentTree(() => props.section, {
+    rootDefaults: { DIRECTION: "VERTICAL", GAP: 12 },
+    index: () => props.index,
+  });
+
+  // No Card block (deleted): a default post card, so the list never vanishes.
+  const fallback = useContentTree(() => ({
+    settings: {},
+    blocks: [
+      { key: "__card", type: "CARD", settings: { GAP: 8, HOVER: "ZOOM" } },
+      { key: "__image", type: "CARD_IMAGE", parent_key: "__card", settings: { RATIO: "LANDSCAPE", RADIUS: 8 } },
+      { key: "__title", type: "CARD_TITLE", parent_key: "__card", settings: { PRESET: "H4" } },
+      { key: "__info", type: "BLOG_POST_INFO", parent_key: "__card", settings: {} },
+      { key: "__excerpt", type: "CARD_DESCRIPTION", parent_key: "__card", settings: { LINES: 3, PADDING_TOP: 8 } },
+    ],
+  }));
+
+  const cardNode = computed(() => tree.value.children.find((n) => n.type === "CARD") ?? null);
+  const template = computed(() => cardNode.value ?? fallback.tree.value.children[0]);
+
+  /** The page, in block order; the list goes where the Card is (else last). */
+  const parts = computed(() => {
+    const out = tree.value.children.map((node) =>
+      node.type === "CARD" ? { kind: "list", key: "list" } : { kind: "block", key: node.key, node }
+    );
+    if (!cardNode.value) out.push({ kind: "list", key: "list" });
+    return out;
+  });
+
+  /** Shopify's settings in CardList's terms. */
+  const listSettings = computed(() => {
+    const v = s.value;
+    const layout = ["GRID", "CAROUSEL", "EDITORIAL"].includes(upper(v.LAYOUT, "GRID")) ? upper(v.LAYOUT, "GRID") : "GRID";
+    const cols = num(v.COLUMNS, 3);
+    const icons = upper(v.ICONS_STYLE, "ARROW");
+    const shape = upper(v.ICONS_SHAPE, "NONE");
+    const large = icons.endsWith("_LARGE");
+    const plain = shape === "NONE";
+    return {
+      ...v,
+      LAYOUT: layout,
+      COLUMNS: cols,
+      COLUMNS_TABLET: Math.min(cols, 2),
+      COLUMNS_MOBILE: num(v.COLUMNS_MOBILE, 2),
+      GAP_X: num(v.GAP_X, 16),
+      GAP_Y: num(v.GAP_Y, 16),
+      // Carousel: the columns are the cards in view; phones show ~1 or ~2.
+      SLIDES_PER_VIEW: cols,
+      SLIDES_PER_VIEW_TABLET: Math.min(cols, 2.5),
+      SLIDES_PER_VIEW_MOBILE: upper(v.MOBILE_CARD_SIZE, "LARGE") === "SMALL" ? 2.2 : 1.4,
+      CAROUSEL_LOOP: false,
+      // Navigation icons
+      SHOW_ARROWS: icons !== "NONE",
+      ARROW_POSITION: "SIDES",
+      ARROW_SVG: icons.startsWith("CHEVRON") ? CHEVRON_SVG : ARROW_SVG,
+      ARROW_SIZE: large ? 52 : 40,
+      ARROW_ICON_SIZE: large ? 24 : 18,
+      ARROW_SHAPE: shape === "SQUARE" ? "SQUARE" : "CIRCLE",
+      ARROW_BG: plain ? "transparent" : undefined,
+      ARROW_BORDER_WIDTH: plain ? 0 : 1,
+      SHOW_DOTS: false,
+      // Editorial: three staggered columns of varied shapes (one on phones).
+      EDITORIAL_COLUMNS: Math.min(3, Math.max(2, limit.value)),
+      EDITORIAL_COLUMNS_MOBILE: 1,
+      EDITORIAL_VARY: true,
+      CAROUSEL_ON_MOBILE: !!v.CAROUSEL_ON_MOBILE && layout !== "CAROUSEL",
+    };
+  });
+
+  const stackGap = computed(() => `${num(s.value.CONTENT_GAP, 12)}px`);
+
+  const scopeAttr = computed(() => `[data-osi-section="${props.section.id ?? props.section.key}"]`);
+  useScopedCss(() => s.value.CUSTOM_CSS, scopeAttr, `osi-section-css-${props.section.id ?? props.section.key}`);
+
+  // Editor-only line above the list when the samples hide a failed request.
+  const notice = computed(() =>
+    placeholders.allowed?.value && failed.value
+      ? `Couldn't load blog posts (${failed.value}) — showing sample posts.`
+      : ""
+  );
+
+  return { s, t, shellStyle, innerStyle, customClass, items, loading, notice, tree, template, parts, listSettings, stackGap };
+}

package/app/logic/sections/ContentNode.js

@@ -51,12 +51,13 @@ export default function useLogic({ props }) {
   const wrapperTag = computed(() => (n.value.link && !props.item ? NuxtLinkComponent : "div"));
 
   /* ---- card template parts */
+  const locale = useState("locale", () => "en");
   const partText = computed(() => {
     const item = props.item;
     const node = n.value;
     if (!item) {
       // Drawn without an item (e.g. an empty list in the builder): sample text.
-      return { title: "Category name", count: "12 products", description: "A short description." }[node.part] ?? "";
+      return { title: "Category name", count: "12 products", description: "A short description.", info: "by Jane Doe · Mar 12, 2026" }[node.part] ?? "";
     }
     if (node.part === "title") return [node.prefix, item.title].filter(Boolean).join(" ");
     if (node.part === "count") {
@@ -64,8 +65,28 @@ export default function useLogic({ props }) {
       return `${item.count} ${item.count === 1 ? node.singular : node.plural}`;
     }
     if (node.part === "description") return item.description || "";
+    if (node.part === "info") return postInfo(item, node.info ?? {});
     return "";
   });
+
+  /** Blog posts: "by Jane · Mar 12, 2026 · News" from the card's item. */
+  const DATE_FORMATS = {
+    SHORT: { day: "2-digit", month: "2-digit", year: "numeric" },
+    MEDIUM: { day: "numeric", month: "short", year: "numeric" },
+    LONG: { day: "numeric", month: "long", year: "numeric" },
+  };
+  function postInfo(item, opts) {
+    const parts = [];
+    if (opts.author && item.author) parts.push([opts.authorPrefix, item.author].filter(Boolean).join(" "));
+    if (opts.date && item.date) {
+      const d = new Date(item.date);
+      if (!Number.isNaN(d.getTime())) {
+        parts.push(new Intl.DateTimeFormat(locale.value || undefined, DATE_FORMATS[opts.dateFormat] ?? DATE_FORMATS.MEDIUM).format(d));
+      }
+    }
+    if (opts.blog && item.blog) parts.push(item.blog);
+    return parts.join(` ${opts.separator || "·"} `);
+  }
   const cardButton = computed(() => {
     if (n.value.type !== "CARD_BUTTON") return null;
     const s = n.value.s;
@@ -186,4 +207,4 @@ export default function useLogic({ props }) {
   });
 
   return { isPreview, NuxtLinkComponent, STAR, n, ICONS, WISH_ICONS, BTN_ICONS, WISH_DEFAULT, button, wrapperTag, partText, cardButton, isProduct, analytics, onCardClick, productButton, onCardButton, onCardButtonKey, onWishlist, RichTag, productBadges, badgeGroups, swatchGroups, h };
-}
+}

package/app/logic/sections/MainBlogPostSection.js

@@ -0,0 +1,47 @@
+import { BlogPostPart } from "#components";
+
+/**
+ * MAIN_BLOG_POST — the blog post page's "Blog post" section (BLOG_POST
+ * template), like Shopify's.
+ *
+ * The same block-built section as Rich text (MediaContentSection +
+ * ContentNode), plus the post's parts, drawn by BlogPostPart from what's
+ * provided here as "osiBlogPost": the post (useBlogPost — the route's, or the
+ * newest one in the editor) and the section's settings (TEXT_WIDTH, the
+ * reading column every part follows unless it sets its own maximum width).
+ *
+ *   BLOG_POST_IMAGE    Featured image
+ *   BLOG_POST_TITLE    Title
+ *   BLOG_POST_INFO     Details — author (photo) · date · blog
+ *   BLOG_POST_EXCERPT  Excerpt
+ *   BLOG_POST_CONTENT  Content
+ *   BLOG_POST_TAGS     Tags
+ *   SHARE              Share
+ */
+export default function useLogic({ props }) {
+  const blogPost = useBlogPost();
+  const section = computed(() => props.section?.settings ?? {});
+  provide("osiBlogPost", { ...blogPost, section });
+
+  const ROOT_DEFAULTS = { DIRECTION: "VERTICAL", ALIGNMENT: "CENTER", POSITION: "TOP", GAP: 24 };
+  const CUSTOM = {
+    BLOG_POST_IMAGE: BlogPostPart,
+    BLOG_POST_TITLE: BlogPostPart,
+    BLOG_POST_INFO: BlogPostPart,
+    BLOG_POST_EXCERPT: BlogPostPart,
+    BLOG_POST_CONTENT: BlogPostPart,
+    BLOG_POST_TAGS: BlogPostPart,
+    SHARE: BlogPostPart,
+  };
+  // The Text look (preset, size, font, colour, alignment) for the text parts.
+  // Content has its own typography fields.
+  const CUSTOM_TEXT = {
+    BLOG_POST_TITLE: "CUSTOM",
+    BLOG_POST_INFO: "CUSTOM",
+    BLOG_POST_EXCERPT: "CUSTOM",
+    BLOG_POST_TAGS: "CUSTOM",
+    SHARE: "CUSTOM",
+  };
+
+  return { blogPost, ROOT_DEFAULTS, CUSTOM, CUSTOM_TEXT };
+}

package/app/pages/blogs/[blog]/[slug].vue

@@ -0,0 +1,154 @@
+<script setup>
+/**
+ * Blog post — `/blogs/<blog>/<post>`, Shopify's article URL (<blog> is the
+ * blog category's slug, <post> the post's).
+ *
+ * Same lines every theme-driven route has: ask the backend which template
+ * serves this path, publish the payload, hand the sections to
+ * SectionRenderer. The post's layout lives in MAIN_BLOG_POST (BLOG_POST
+ * template), not here.
+ *
+ * ⚠ Backend prerequisite — resolve_path() matches the path with
+ * builder.utils.match_blog_post() (next to match_search()). Until it does,
+ * render() answers something else and this page falls back to the default
+ * layout: the post itself, still correct, just not the merchant's design.
+ *
+ * The post is awaited here so it lands in the SSR payload; MAIN_BLOG_POST
+ * re-reads it from there. Unknown, unpublished or future-dated -> 404.
+ */
+definePageMeta({ name: "blog-post" });
+
+// Every composable before the first await (SSR context, see useStorefront).
+const route = useRoute();
+const { render, store } = useStorefront();
+const { setRenderContext } = useRenderContext();
+const origin = useRequestURL().origin;
+
+const blogPost = useBlogPost();
+const renderData = useAsyncData(`render:${route.path}`, () => render(route.path).catch(() => null));
+
+await blogPost.asyncData;
+const { data: rendered } = await renderData;
+
+// A fetch error lands in the asyncData's `error`, never rethrown: surface it.
+if (!blogPost.asyncData.data.value) {
+  const failed = blogPost.error.value?.statusCode === 500;
+  throw createError({
+    statusCode: failed ? 500 : 404,
+    statusMessage: failed ? "Couldn't load this post" : "Blog post not found",
+    fatal: true,
+  });
+}
+
+const MAIN = "MAIN_BLOG_POST";
+
+/**
+ * The page when render() didn't answer with the BLOG_POST template (the
+ * backend doesn't route /blogs/... yet, or the theme has no template): the
+ * Blog post section with its default blocks — the base theme's layout — so
+ * the post still shows instead of an empty section.
+ */
+const DEFAULT_MAIN = {
+  key: "main-blog-post",
+  type: MAIN,
+  settings: {
+    CONTAINER: "NORMAL", TEXT_WIDTH: "MEDIUM", DIRECTION: "VERTICAL", ALIGNMENT: "CENTER",
+    POSITION: "TOP", GAP: 24, PADDING_TOP: 40, PADDING_BOTTOM: 64,
+  },
+  blocks: [
+    {
+      key: "blog-post-title", type: "BLOG_POST_TITLE", parent_key: "",
+      settings: { ALIGNMENT: "CENTER", PRESET: "CUSTOM", TAG: "H1", FONT: "HEADING", SIZE: 44, SIZE_MOBILE: 30, LINE_HEIGHT: 115 },
+    },
+    {
+      key: "blog-post-details", type: "BLOG_POST_INFO", parent_key: "",
+      settings: { ALIGNMENT: "CENTER", SHOW_BLOG: true, DATE_FORMAT: "LONG", SIZE: 13 },
+    },
+    {
+      key: "blog-post-image", type: "BLOG_POST_IMAGE", parent_key: "",
+      settings: { RATIO: "WIDE", RADIUS: 12, MAX_WIDTH: "NONE", PADDING_TOP: 8 },
+    },
+    { key: "blog-post-content", type: "BLOG_POST_CONTENT", parent_key: "", settings: {} },
+    { key: "blog-post-tags", type: "BLOG_POST_TAGS", parent_key: "", settings: { SIZE: 13 } },
+    { key: "blog-post-share", type: "SHARE", parent_key: "", settings: { SIZE: 13, LABEL: "Share" } },
+  ],
+};
+const templateName = (payload) => {
+  const t = payload?.template;
+  return String((t && typeof t === "object" ? t.name : t) ?? "").toUpperCase();
+};
+const isBlogPostPayload = (payload) => !!payload && templateName(payload) === "BLOG_POST";
+
+/** The template's sections, MAIN_BLOG_POST always there. */
+const data = computed(() => {
+  const base = isBlogPostPayload(rendered.value) ? rendered.value : null;
+  const sections = base?.sections ?? [];
+  const post = blogPost.post.value;
+  return {
+    ...(base ?? { template: "BLOG_POST", seo: {} }),
+    resource: {
+      type: "BLOG_POST",
+      id: post?.id ?? null,
+      slug: String(route.params.slug ?? ""),
+      blog: String(route.params.blog ?? ""),
+    },
+    sections: sections.some((section) => section.type === MAIN)
+      ? sections
+      : [DEFAULT_MAIN, ...sections],
+  };
+});
+
+if (import.meta.dev && !isBlogPostPayload(rendered.value)) {
+  console.warn(
+    `[blog-post] render() did not resolve ${route.path} to BLOG_POST; using the default layout. ` +
+      "resolve_path() needs builder.utils.match_blog_post()."
+  );
+}
+
+setRenderContext(data.value);
+watch(data, (payload) => setRenderContext(payload));
+
+/* ------------------------------------------------------------------- SEO */
+
+const post = blogPost.post;
+const seo = computed(() => data.value?.seo ?? {});
+const strip = (html) => String(html ?? "").replace(/<[^>]*>?/gm, " ").replace(/\s+/g, " ").trim();
+
+// The post's own SEO first: render()'s seo for /blogs/... is the store-level
+// fallback (resolve_route doesn't look the post up), so its title would be
+// just the store's name. It still decides no_index.
+const title = computed(() => {
+  const own = post.value?.seo.title || post.value?.title;
+  return own ? [own, store.value?.name].filter(Boolean).join(" | ") : seo.value.title_full ?? store.value?.name ?? "";
+});
+const description = computed(
+  () => post.value?.seo.description || post.value?.excerpt || strip(post.value?.html).slice(0, 300)
+);
+const image = computed(() => post.value?.image || undefined);
+
+useHead({
+  title,
+  titleTemplate: (value) => value ?? "",
+  meta: () => [
+    { name: "description", content: description.value || undefined },
+    { property: "og:type", content: "article" },
+    { property: "og:title", content: post.value?.title || undefined },
+    { property: "og:description", content: description.value || undefined },
+    { property: "og:image", content: image.value },
+    { property: "article:published_time", content: post.value?.date || undefined },
+    { property: "article:author", content: post.value?.author || undefined },
+    { name: "twitter:card", content: image.value ? "summary_large_image" : "summary" },
+    { name: "twitter:title", content: post.value?.title || undefined },
+    { name: "twitter:description", content: description.value || undefined },
+    { name: "twitter:image", content: image.value },
+    { name: "robots", content: seo.value.no_index ? "noindex, nofollow" : "index, follow" },
+  ],
+  link: () => [{ rel: "canonical", href: `${origin}${post.value?.url || route.path}` }],
+});
+</script>
+
+<template>
+  <div>
+    <SectionRenderer :sections="data.sections" />
+  </div>
+</template>

package/app/plugins/auth.client.js

@@ -0,0 +1,14 @@
+import { authBus } from "#osi/services/AuthBus";
+
+/**
+ * Hydrates the logged-in customer on every page load / refresh.
+ * Without this, authBus.userInfo stays null until something explicitly calls
+ * checkAuth() (login, verification, profile save), even though the token
+ * cookie is present.
+ *
+ * Not awaited, so it doesn't block hydration; anything that needs the user
+ * awaits authBus.init() (same promise, one request).
+ */
+export default defineNuxtPlugin(() => {
+  authBus.init();
+});

package/app/services/AuthBus.js

@@ -15,6 +15,18 @@ export const authBus = reactive({
   isRefreshing: false,
   failedRequests: [],
   isLoggingOut: false,
+  _initPromise: null,
+
+  /**
+   * Fetch customer-info once per page load. Safe to call from anywhere;
+   * every caller gets the same in-flight promise.
+   */
+  init() {
+    if (!this._initPromise) {
+      this._initPromise = this.checkAuth().catch(() => {});
+    }
+    return this._initPromise;
+  },
 
   async checkAuth() {
     const token = tokenService.getToken();
@@ -154,9 +166,10 @@ export const authBus = reactive({
       if (typeof localStorage !== 'undefined') localStorage.clear();
       this.isLoggedIn = false;
       this.userInfo = null;
+      this._initPromise = null;
       eventBus.emit("cartUpdated");
       eventBus.emit("authChanged", { isLoggedIn: false });
       this.isLoggingOut = false;
     }
   },
-});
+});

package/app/services/BlogServices.js

@@ -0,0 +1,17 @@
+import { apiService, getBaseUrl } from "./ApiServices";
+
+const ENDPOINT = "store/apis/blog/posts/";
+
+const getPosts = async ({ blog = null, limit = 3 } = {}, baseUrl) => {
+  baseUrl = baseUrl || getBaseUrl();
+  const params = new URLSearchParams({page_size: String(limit) });
+  if (blog) params.set("category", String(blog));
+  return apiService(`${baseUrl}${ENDPOINT}?${params}`, { method: "GET" });
+};
+
+const getPost = async (slug, baseUrl) => {
+  baseUrl = baseUrl || getBaseUrl();
+  return apiService(`${baseUrl}${ENDPOINT}${encodeURIComponent(String(slug))}/`, { method: "GET" });
+};
+
+export default { getPosts, getPost };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.13",
+  "version": "1.0.16",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",