@osimart/create-storefront 1.0.9 → 1.0.12

package/app/composables/useMenu.js

@@ -13,7 +13,7 @@
  *   /categories/<slug>      CLASSIFICATION  (resource.type = CATEGORY)
  *   /collections/<slug>     CLASSIFICATION  (resource.type = COLLECTION)
  *   /products/<slug>        PRODUCT
- *   /pages/<handle>         PAGE
+ *   /<handle>               PAGE            (one segment; /pages/<handle> 301s here)
  *   /search                 SEARCH
  *   /cart                   CART
  *   /account                ACCOUNT
@@ -45,7 +45,7 @@ export function useMenu() {
       return `/products/${relation.product.slugified_name}`;
     }
     if (relation.page?.handle) {
-      return `/pages/${relation.page.handle}`;
+      return `/${relation.page.handle}`;
     }
 
     return "/";
@@ -63,7 +63,11 @@ export function useMenu() {
    */
   function normalizeItems(items = [], parentId = "m") {
     return items.map((item, index) => {
-      const url = itemUrl(item);
+      // An External URL left empty links nowhere: "#", which every menu draws
+      // as a toggle for its sub-items (or a plain label), never a link.
+      // itemUrl() alone would fall through to "/".
+      const noLink = item.link_type === "URL" && !String(item.url ?? "").trim();
+      const url = noLink ? "#" : itemUrl(item);
       const id = item.id ?? `${parentId}.${index}`;
       return {
         id,

package/app/composables/useProductUrl.js

@@ -17,7 +17,7 @@
  *
  *     /categories/<slug>   CLASSIFICATION   (already matched)
  *     /collections/<slug>  CLASSIFICATION   (already matched)
- *     /pages/<handle>      PAGE             (already matched)
+ *     /<handle>            PAGE             (one segment only)
  *     /<category>/<slug>   PRODUCT          ← needs adding, matched LAST so it
  *                                             can't shadow the prefixes above
  *

package/app/logic/components/SiteFooter.js

@@ -336,6 +336,27 @@ export default function useLogic({ props }) {
     ...(bottomThreeZone.value || bottomStacked.value ? {} : { justifyContent: bottomAlignment.value }),
   }));
 
+  /**
+   * Utilities drawn from the block tree (FooterUtilitiesSection's barTree):
+   * whether a part has anything to show. A Group shows while any part inside
+   * it does, so separators and empty groups never dangle.
+   */
+  function partShown(node) {
+    if (!node) return false;
+    switch (node.type) {
+      case "GROUP":
+        return (node.children ?? []).some(partShown);
+      case "UTILITY_COPYRIGHT":
+        return true;
+      case "UTILITY_POLICIES":
+        return policyLinks.value.length > 0;
+      case "UTILITY_SOCIAL":
+        return (unref(socials)?.length ?? 0) > 0;
+      default:
+        return false;
+    }
+  }
+
   const showPoweredBy = computed(() => settings.value.FOOTER_SHOW_POWERED_BY !== false);
   const poweredByText = computed(() => t(settings.value.FOOTER_POWERED_BY_TEXT));
   // Plain text between the copyright and the link — not part of the link.
@@ -472,5 +493,5 @@ export default function useLogic({ props }) {
   const headingTextStyle = computed(() => textStyleVars("FOOTER_HEADING", "UPPERCASE"));
   const linkTextStyle = computed(() => textStyleVars("FOOTER_LINK", "NONE"));
 
-  return { isBar, utilityBlocks, settings, brand, pick, barScheme, scheme, appearance, store, storeLogo, mediaUrl, useMenuByHandle, t, menu1, menu2, menu3, columnWidthMode, columnFlexBasis, columns, logoSrc, logoPosition, logoAlignment, logoWidthVars, showBrandDescription, DESCRIPTION_ALIGNMENTS, brandDescriptionStyle, footerText, copyright, socials, socialsEnabled, socialPosition, paymentIcons, languages, countries, currentLanguage, currentCountry, showSocial, socialAlignment, showNewsletter, newsletterOnStart, newsletterStacked, newsletterAlignment, showConsent, newsletterSubmitted, handleNewsletterSubmit, newsletterSuccessMessage, showPaymentIcons, showLanguageSelector, showCountrySelector, containerStyle, footerStyle, columnsAlignment, columnsVerticalAlignment, columnTextAlignment, JUSTIFY, ALIGN, TEXT, bottomAlignment, showBottomBarDivider, bottomThreeZone, bottomStacked, px, barVars, policyClasses, policyStyle, copyrightStyle, orderStyle, barStyle, showPoweredBy, poweredByText, poweredByPrefix, copyrightGap, poweredByUrl, POLICY_SLOTS, policyLinks, socialsInBar, socialsInColumns, socialsUnderNewsletter, hasFooterContent, mobileAccordion, openColumns, toggleColumn, isColumnOpen, FONT_WEIGHTS, FONT_FAMILIES, TEXT_TRANSFORMS, textStyleVars, headingTextStyle, linkTextStyle };
-}
+  return { isBar, utilityBlocks, settings, brand, pick, barScheme, scheme, appearance, store, storeLogo, mediaUrl, useMenuByHandle, t, menu1, menu2, menu3, columnWidthMode, columnFlexBasis, columns, logoSrc, logoPosition, logoAlignment, logoWidthVars, showBrandDescription, DESCRIPTION_ALIGNMENTS, brandDescriptionStyle, footerText, copyright, socials, socialsEnabled, socialPosition, paymentIcons, languages, countries, currentLanguage, currentCountry, showSocial, socialAlignment, showNewsletter, newsletterOnStart, newsletterStacked, newsletterAlignment, showConsent, newsletterSubmitted, handleNewsletterSubmit, newsletterSuccessMessage, showPaymentIcons, showLanguageSelector, showCountrySelector, containerStyle, footerStyle, columnsAlignment, columnsVerticalAlignment, columnTextAlignment, JUSTIFY, ALIGN, TEXT, bottomAlignment, showBottomBarDivider, bottomThreeZone, bottomStacked, px, barVars, policyClasses, policyStyle, copyrightStyle, orderStyle, barStyle, showPoweredBy, poweredByText, poweredByPrefix, copyrightGap, poweredByUrl, POLICY_SLOTS, policyLinks, socialsInBar, socialsInColumns, socialsUnderNewsletter, hasFooterContent, partShown, mobileAccordion, openColumns, toggleColumn, isColumnOpen, FONT_WEIGHTS, FONT_FAMILIES, TEXT_TRANSFORMS, textStyleVars, headingTextStyle, linkTextStyle };
+}

package/app/logic/sections/GallerySection.js

@@ -1,9 +1,67 @@
 import { NuxtLink } from "#components";
 import { Autoplay, Pagination } from "swiper/modules";
 
+/**
+ * GALLERY, Shopify-style:
+ *
+ *   section            the frame — width, padding, colours, CONTENT_GAP
+ *   header blocks      ordinary blocks (a Group of Text / Button…), drawn by
+ *                      ContentNode wherever they sit
+ *   Images block       GALLERY_CONTENT: the layout (grid / masonry /
+ *                      carousel / marquee + every image setting) and, inside
+ *                      it, the Image (MEDIA) blocks. Where it sits among the
+ *                      blocks is where the images go; hiding it hides them.
+ *
+ * An older section (no Images block: heading and layout on the section,
+ * images at the top level) renders exactly as before.
+ */
 export default function useLogic({ props }) {
-  const { s, t, shellStyle, innerStyle, align, customClass, heading } = useSectionShell(() => props.section);
+  const { s: sectionSettings, t, shellStyle, innerStyle, align, customClass, heading: legacyHeadingText } =
+    useSectionShell(() => props.section);
   const { mediaUrl } = useMediaUrl();
+
+  const blocks = computed(() => props.section.blocks ?? []);
+  const contentBlock = computed(() => blocks.value.find((b) => b.type === "GALLERY_CONTENT") ?? null);
+  const legacy = computed(() => !contentBlock.value);
+
+  /** The gallery's own settings: the Images block's, or (older) the section's. */
+  const s = computed(() => (legacy.value ? sectionSettings.value : contentBlock.value.settings ?? {}));
+
+  /** The image blocks, in order. */
+  const mediaBlocks = computed(() => {
+    if (legacy.value) return blocks.value.filter((b) => b.type === "MEDIA" && !b.parent_key);
+    const key = contentBlock.value.key;
+    return blocks.value.filter((b) => b.type === "MEDIA" && b.parent_key === key);
+  });
+
+  // The header and anything else around the images: ordinary blocks. The
+  // Images block stays a plain node (raw) — this section draws it.
+  const { tree } = useContentTree(() => props.section, {
+    raw: ["GALLERY_CONTENT"],
+    rootDefaults: { DIRECTION: "VERTICAL", GAP: 24 },
+    index: () => props.index,
+  });
+
+  /** The page, in block order; the images go where the Images block is. */
+  const parts = computed(() => {
+    if (legacy.value) return [{ kind: "gallery", key: "gallery" }];
+    return tree.value.children.map((node) =>
+      node.type === "GALLERY_CONTENT"
+        ? { kind: "gallery", key: node.key }
+        : { kind: "block", key: node.key, node }
+    );
+  });
+
+  /** data-osi-block for the images area (the editor outlines / selects it). */
+  const contentKey = computed(() => contentBlock.value?.key || undefined);
+
+  const stackGap = computed(() => {
+    const n = Number(sectionSettings.value.CONTENT_GAP);
+    return `${Number.isFinite(n) && sectionSettings.value.CONTENT_GAP !== "" ? n : 24}px`;
+  });
+
+  // Older sections: their HEADING / SUBHEADING, until they're converted.
+  const heading = computed(() => (legacy.value ? legacyHeadingText.value : ""));
   const placeholders = usePlaceholders();
   const NuxtLinkComponent = NuxtLink;
 
@@ -16,13 +74,15 @@ export default function useLogic({ props }) {
   const TILE_SIZES = ["NORMAL", "TALL", "WIDE", "LARGE"];
 
   const items = computed(() => {
-    const rows = (props.section.blocks ?? [])
+    const rows = mediaBlocks.value
       .filter((block) => !block.disabled)
       .map((block) => {
         const bs = block.settings ?? {};
         const media = bs.MEDIA ?? block.media ?? block.relations?.media ?? bs.IMAGE ?? null;
         return {
           key: block.id ?? block.key,
+          // The block's key, for the editor overlay (data-osi-block).
+          blockKey: block.key || undefined,
           src: mediaUrl(media),
           caption: t(bs.CAPTION) || "",
           url: bs.URL || bs.LINK_URL || null,
@@ -115,7 +175,7 @@ export default function useLogic({ props }) {
     () => layout.value === "GRID" && !isNatural.value && items.value.some((i) => i.size !== "NORMAL")
   );
 
-  const subheading = computed(() => t(s.value.SUBHEADING));
+  const subheading = computed(() => (legacy.value ? t(sectionSettings.value.SUBHEADING) : ""));
   const showCaptions = computed(() => !!s.value.SHOW_CAPTIONS);
   const captionOverlay = computed(() => String(s.value.CAPTION_POSITION || "BELOW").toUpperCase() === "OVERLAY");
 
@@ -228,5 +288,5 @@ export default function useLogic({ props }) {
 
   const current = computed(() => (openIndex.value === null ? null : realItems.value[openIndex.value]));
 
-  return { s, t, shellStyle, innerStyle, align, customClass, heading, mediaUrl, placeholders, NuxtLinkComponent, has, num, px, TILE_SIZES, items, layout, marqueeTrack, marqueeVars, MQ_ALIGN, marqueeMode, marqueeSizeBy, marqueeWidths, marqueeReverse, marqueePause, RATIOS, RATIO_PARTS, TILE_SPANS, isNatural, bento, subheading, showCaptions, captionOverlay, vars, rootClasses, perView, overflows, loop, slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd, breakpoints, autoplay, showArrows, showDots, lightboxEnabled, realItems, openIndex, isOpen, tagFor, open, close, step, onKeydown, current, Autoplay, Pagination };
-}
+  return { legacy, contentBlock, contentKey, parts, stackGap, s, t, shellStyle, innerStyle, align, customClass, heading, mediaUrl, placeholders, NuxtLinkComponent, has, num, px, TILE_SIZES, items, layout, marqueeTrack, marqueeVars, MQ_ALIGN, marqueeMode, marqueeSizeBy, marqueeWidths, marqueeReverse, marqueePause, RATIOS, RATIO_PARTS, TILE_SPANS, isNatural, bento, subheading, showCaptions, captionOverlay, vars, rootClasses, perView, overflows, loop, slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd, breakpoints, autoplay, showArrows, showDots, lightboxEnabled, realItems, openIndex, isOpen, tagFor, open, close, step, onKeydown, current, Autoplay, Pagination };
+}

package/app/pages/[category]/[product].vue

@@ -14,7 +14,7 @@ import { useProductResource } from "#osi/composables/useProductDetail";
  *
  *     /categories/<slug>   CLASSIFICATION
  *     /collections/<slug>  CLASSIFICATION
- *     /pages/<handle>      PAGE
+ *     /<handle>            PAGE      (one segment, never meets this route)
  *     /products/<slug>     PRODUCT   (keep — uncategorised products use it)
  *     /<category>/<slug>   PRODUCT   ← last
  *

package/app/pages/[handle].vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <SectionRenderer v-if="data?.sections?.length" :sections="data.sections" />
+
+    <div v-else-if="!error" class="osi-empty">
+      <p>This page hasn't been set up yet.</p>
+    </div>
+
+    <div v-else class="osi-empty">
+      <p>We couldn't load this page.</p>
+      <pre v-if="isDev" class="osi-empty-detail">{{ error.message }}</pre>
+    </div>
+  </div>
+</template>
+<script setup>
+/**
+ * A merchant page — `/<handle>` (Shopify's /pages/<handle>, without the prefix).
+ *
+ * One segment only. Nuxt matches static routes first (checkout, login,
+ * search…), then this, then [...slug] — so a platform route always wins, and
+ * the backend refuses page handles that would collide with one
+ * (RESERVED_HANDLES).
+ *
+ * Because this catches every unknown one-segment path (/whatever), only a PAGE
+ * payload counts. Anything else — NOT_FOUND, a 404 — is a real 404, drawn by
+ * error.vue with the theme's 404 page and a 404 status.
+ *
+ * The old /pages/<handle> URLs 301 here (pages/pages/[handle].vue).
+ */
+import { useRenderContext } from '#osi/composables/useRenderContext';
+
+definePageMeta({ name: 'page' });
+
+const route = useRoute();
+const { render, store } = useStorefront();
+const { setRenderContext, resource } = useRenderContext();
+const origin = useRequestURL().origin;
+
+const { data, error } = await useAsyncData(
+  `render:${route.path}`,
+  () => render(route.path)
+);
+
+const templateName = (payload) => {
+  const t = payload?.template;
+  return String((t && typeof t === 'object' ? t.name : t) ?? '').toUpperCase();
+};
+
+const status = error.value?.status ?? error.value?.statusCode;
+const isPage = !!data.value && templateName(data.value) === 'PAGE';
+
+if (status === 404 || (!error.value && !isPage)) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
+}
+
+setRenderContext(data.value);
+watch(data, (payload) => setRenderContext(payload));
+
+const isDev = import.meta.dev;
+
+const seo = computed(() => data.value?.seo ?? {});
+
+useHead({
+  title: () => seo.value.title_full ?? seo.value.title ?? resource.value?.name ?? store.value?.name ?? '',
+  titleTemplate: (title) => title ?? '',
+  meta: () => [
+    { name: 'description', content: seo.value.description ?? undefined },
+    { property: 'og:title', content: seo.value.title_full ?? seo.value.title ?? undefined },
+    { property: 'og:description', content: seo.value.description ?? undefined },
+    { property: 'og:image', content: seo.value.image ?? undefined },
+    { name: 'robots', content: seo.value.no_index ? 'noindex, nofollow' : 'index, follow' },
+  ],
+  link: () => seo.value.canonical_path
+    ? [{ rel: 'canonical', href: `${origin}${seo.value.canonical_path}` }]
+    : [],
+});
+</script>
+
+<style scoped>
+.osi-empty { padding: 6rem 1rem; text-align: center; color: var(--osi-text); opacity: 0.7; }
+.osi-empty-detail { margin-top: 1rem; font-size: 12px; white-space: pre-wrap; }
+</style>

package/app/pages/pages/[handle].vue

@@ -1,58 +1,20 @@
-<template>
-  <div>
-    <SectionRenderer v-if="data?.sections?.length" :sections="data.sections" />
-
-    <div v-else-if="!error" class="osi-empty">
-      <p>This page hasn't been set up yet.</p>
-    </div>
-
-    <div v-else class="osi-empty">
-      <p>We couldn't load this page.</p>
-      <pre v-if="isDev" class="osi-empty-detail">{{ error.message }}</pre>
-    </div>
-  </div>
-</template>
 <script setup>
-import { useRenderContext } from '#osi/composables/useRenderContext';
-
-const route = useRoute();
-const { render, store } = useStorefront();
-const { setRenderContext, resource } = useRenderContext();
-
-const { data, error } = await useAsyncData(
-  `render:${route.path}`,
-  () => render(route.path)
-);
-
-if (error.value?.status === 404) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
-}
-
-setRenderContext(data.value);
-watch(data, (payload) => setRenderContext(payload));
-
-const isDev = import.meta.dev;
-
-const seo = computed(() => data.value?.seo ?? {});
-const origin = useRequestURL().origin;
-
-useHead({
-  title: () => seo.value.title_full ?? seo.value.title ?? resource.value?.name ?? store.value?.name ?? '',
-  titleTemplate: (title) => title ?? '',
-  meta: () => [
-    { name: 'description', content: seo.value.description ?? undefined },
-    { property: 'og:title', content: seo.value.title_full ?? seo.value.title ?? undefined },
-    { property: 'og:description', content: seo.value.description ?? undefined },
-    { property: 'og:image', content: seo.value.image ?? undefined },
-    { name: 'robots', content: seo.value.no_index ? 'noindex, nofollow' : 'index, follow' },
-  ],
-  link: () => seo.value.canonical_path
-    ? [{ rel: 'canonical', href: `${origin}${seo.value.canonical_path}` }]
-    : [],
+/**
+ * Old page URL — `/pages/<handle>` → `/<handle>`, 301.
+ *
+ * Kept so links already shared, indexed or saved in a menu's custom URL keep
+ * working. The redirect happens in route middleware, before anything renders,
+ * so the server answers with the 301 itself (good for search engines).
+ */
+definePageMeta({
+  middleware: (to) =>
+    navigateTo(
+      { path: `/${to.params.handle}`, query: to.query, hash: to.hash },
+      { redirectCode: 301 }
+    ),
 });
 </script>
 
-<style scoped>
-.osi-empty { padding: 6rem 1rem; text-align: center; color: var(--osi-text); opacity: 0.7; }
-.osi-empty-detail { margin-top: 1rem; font-size: 12px; white-space: pre-wrap; }
-</style>
+<template>
+  <div />
+</template>

package/package.json

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