@osimart/create-storefront 1.0.13 → 1.0.14

package/app/composables/useContentTree.js

@@ -519,6 +519,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":

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,212 @@
+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))));
+
+  // 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"}:${limit.value}`;
+      try {
+        const res = await cachedRequest(key, () =>
+          BlogServices.getPosts({ category: blog.value, limit: limit.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, limit], 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 ?? []).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/services/BlogServices.js

@@ -0,0 +1,12 @@
+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({ status: "PUBLISHED", page_size: String(limit), ordering: "-published_at" });
+  if (blog) params.set("category", String(blog));
+  return apiService(`${baseUrl}${ENDPOINT}?${params}`, { method: "GET" });
+};
+
+export default { getPosts };

package/package.json

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