@osimart/create-storefront 1.0.3 → 1.0.7

package/app/app.vue

@@ -4,12 +4,28 @@ import "#osi/assets/css/osi-controls.css";
 import { parseIds } from "#osi/utils/analytics";
 
 const { load, dir, store, error } = useStorefront();
+// Captured before the first await (the request event needs Nuxt's context).
+const requestEvent = import.meta.server ? useRequestEvent() : null;
 const { tokens, rootClasses, fontLinks } = useThemeTokens();
 const { start: startBuilderPreview, stop: stopBuilderPreview } = useBuilderPreview();
 
 const { error: fetchError } = await useAsyncData("storefront", () => load());
 const shown = computed(() => error.value ?? fetchError.value ?? null);
 
+const unavailableStatus = computed(() => {
+  const e = shown.value;
+  if (!e) return null;
+  const status = Number(e.status ?? e.statusCode) || 0;
+  return status >= 400 && status < 500 ? status : 503;
+});
+if (requestEvent && unavailableStatus.value) {
+  setResponseStatus(requestEvent, unavailableStatus.value);
+}
+
+const publicConfig = useRuntimeConfig().public;
+const osimartUrl = String(publicConfig.osimartUrl || "https://osimart.com").replace(/\/+$/, "");
+const signupUrl = publicConfig.osimartSignupUrl || `${osimartUrl}/`;
+
 const isDev = import.meta.dev;
 
 onMounted(() => {
@@ -39,6 +55,8 @@ onBeforeUnmount(() => {
 useThemeSeo();
 
 useHead({
+  title: computed(() => (shown.value ? "Store unavailable" : undefined)),
+  meta: computed(() => (shown.value ? [{ name: "robots", content: "noindex" }] : [])),
   htmlAttrs: computed(() => ({ dir: dir.value })),
   noscript: computed(() =>
     parseIds(store.value?.meta_pixel_id, "pixel").map((id) => ({
@@ -46,10 +64,14 @@ useHead({
       innerHTML: `<img height="1" width="1" style="display:none" alt="" src="https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1" />`,
     })),
   ),
-  bodyAttrs: computed(() => ({
-    style: tokens.value,
-    class: rootClasses.value.filter((c) => /^osi-(btns|inputs|labels)/.test(c)),
-  })),
+  bodyAttrs: computed(() =>
+    shown.value
+      ? { class: "osi-unavailable-body" }
+      : {
+          style: tokens.value,
+          class: rootClasses.value.filter((c) => /^osi-(btns|inputs|labels)/.test(c)),
+        }
+  ),
     // A getter, not a snapshot: a font picked in the editor (or a theme that
   // loads later) must add its stylesheet.
   link: computed(() => [
@@ -63,13 +85,17 @@ useHead({
 </script>
 
 <template>
-  <div v-if="shown" class="osi-fatal">
-    <p>This store isn't available right now.</p>
+  <main v-if="shown" class="osi-unavailable" dir="ltr">
+    <a :href="osimartUrl" class="osi-unavailable-back">
+      <span aria-hidden="true">&larr;</span>
+      Osimart
+    </a>
+    <h1 class="osi-unavailable-title">This store is currently unavailable.</h1>
+    <a :href="signupUrl" class="osi-unavailable-cta">Start a free trial</a>
 
-   
     <pre v-if="isDev" class="osi-fatal-detail">{{ shown.status ? `HTTP ${shown.status} — ` : "" }}{{ shown.message }}<template v-if="shown.data">
 {{ shown.data }}</template></pre>
-  </div>
+  </main>
 
   <div v-else class="osi-root" :class="rootClasses" :style="tokens" :dir="dir">
    <NuxtLoadingIndicator
@@ -134,14 +160,74 @@ body .font-thoren {
 body .font-heading {
   font-family: var(--osi-font-heading);
 }
-.osi-fatal {
-  padding: 4rem 1rem;
+/* ---- Store unavailable (Shopify-style) — no theme tokens on purpose. */
+body.osi-unavailable-body {
+  margin: 0;
+  background: #20336b;
+}
+.osi-unavailable {
+  min-height: 100vh;
+  min-height: 100dvh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: clamp(5rem, 18vh, 10.5rem) 1.5rem 4rem;
+  background: #20336b;
+  color: #fff;
   text-align: center;
-  font-family: system-ui, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.osi-unavailable a {
+  color: inherit;
+  text-decoration: none;
+}
+.osi-unavailable-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.95;
+  transition: opacity 0.15s ease;
+}
+.osi-unavailable-back:hover {
+  opacity: 0.7;
+}
+.osi-unavailable-title {
+  margin: 2.25rem 0 0;
+  max-width: 18ch;
+  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
+  font-weight: 400;
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+@media (min-width: 900px) {
+  .osi-unavailable-title {
+    max-width: none;
+  }
+}
+.osi-unavailable-cta {
+  margin-top: 1.75rem;
+  padding-bottom: 0.15rem;
+  font-size: 1.375rem;
+  line-height: 1.3;
+  border-bottom: 2px solid currentColor;
+  transition: opacity 0.15s ease;
+}
+.osi-unavailable-cta:hover {
+  opacity: 0.75;
+}
+.osi-unavailable :focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 4px;
+  border-radius: 2px;
 }
 .osi-fatal-detail {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 3rem;
   padding: 0.75rem 1rem;
   text-align: start;
   background: #fef2f2;

package/app/components/SectionRenderer.vue

@@ -16,7 +16,9 @@ defineProps({
 // Hover / selection outlines are drawn by BuilderOverlay (pages/__builder-preview),
 // not here: a CSS outline gets clipped by overflow, can't carry a name tag or
 // buttons, and a nested block's outline would fight its section's.
-const { isPreview } = useBuilderPreview();
+//
+// A hidden section (disabled) isn't rendered at all — in the editor's preview
+// too, like Shopify — so the preview shows exactly what the live store will.
 </script>
 
 <template>
@@ -24,11 +26,10 @@ const { isPreview } = useBuilderPreview();
     <template v-for="(section, i) in sections" :key="section.key">
       <component
         :is="resolveSection(section.type)"
-        v-if="resolveSection(section.type)"
+        v-if="!section.disabled && resolveSection(section.type)"
         :section="section"
         :index="i"
         :data-osi-section="section.key"
-        :class="{ 'osi-preview-disabled': isPreview && section.disabled }"
       />
     </template>
   </div>
@@ -38,9 +39,4 @@ const { isPreview } = useBuilderPreview();
 .osi-sections > :deep(*) + :deep(*) {
   margin-top: 0;
 }
-
-/* Editor only — never rendered on a live storefront. */
-.osi-preview-disabled {
-  opacity: 0.45;
-}
 </style>