@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/composables/useStoreData.js

@@ -0,0 +1,57 @@
+import HomeServices from "#osi/services/HomeServices";
+import { toPlainError } from "#osi/utils/toPlainError";
+
+export function useStoreData() {
+  const products = useState("store-data-products", () => []);
+  const categories = useState("store-data-categories", () => []);
+  const collections = useState("store-data-collections", () => []);
+  const storeDataLoaded = useState("store-data-loaded", () => false);
+  const loadingStoreData = useState("store-data-loading", () => false);
+  const storeDataError = useState("store-data-error", () => null);
+  // Resolved here, in setup scope, before loadStoreData's own await boundary —
+  // see HomeServices.js for why this can't be left to resolve inside the
+  // Promise.allSettled calls below on the server.
+  const baseUrl = useState("base-url", () => "");
+
+  const loadStoreData = async () => {
+    if (storeDataLoaded.value || loadingStoreData.value) return;
+
+    loadingStoreData.value = true;
+    storeDataError.value = null;
+
+    try {
+      const [newArrivals, cats, cols] = await Promise.allSettled([
+        HomeServices.getNewArrivals(10, baseUrl.value),
+        HomeServices.getCategories(baseUrl.value),
+        HomeServices.getCollections(baseUrl.value),
+      ]);
+
+      products.value =
+        newArrivals.status === "fulfilled"
+          ? newArrivals.value?.results?.slice(5, 11) || []
+          : [];
+      categories.value =
+        cats.status === "fulfilled" ? cats.value?.results || [] : [];
+      collections.value =
+        cols.status === "fulfilled" ? cols.value?.results || [] : [];
+
+      storeDataLoaded.value = true;
+    } catch (err) {
+      console.error("[useStoreData] unexpected error:", err);
+      // Same reason as useStorefront: useState is serialized into the SSR
+      // payload, and an Error instance breaks it.
+      storeDataError.value = toPlainError(err);
+    } finally {
+      loadingStoreData.value = false;
+    }
+  };
+
+  return {
+    products,
+    categories,
+    collections,
+    loadingStoreData,
+    storeDataError,
+    loadStoreData,
+  };
+}

package/app/composables/useStoreInit.js

@@ -0,0 +1,52 @@
+import { storefrontService } from "#osi/services/storefront.service";
+
+export function useStoreInit() {
+  const bootstrapData = useState('bootstrap-data', () => null);
+  const storeData = useState('store-data', () => null);
+  const baseUrl = useState('base-url', () => '');
+
+  const reqHeaders = import.meta.server ? useRequestHeaders(['host', 'x-forwarded-host', 'x-forwarded-proto']) : {};
+  const browserHost =
+    (import.meta.server
+      ? (reqHeaders['x-forwarded-host'] || reqHeaders.host)
+      : location.host) || '';
+
+  const browserProtocol =
+    (import.meta.server
+      ? (reqHeaders['x-forwarded-proto'] || 'https')
+      : location.protocol.replace(':', '')) || 'https';
+
+  // In dev, the storefront (this frontend) and the backend run on different
+  // ports/hosts, so we can't use the browser's own origin for API calls — it
+  // points at the frontend dev server. In production frontend and backend
+  // share the same origin, so the browser origin is correct.
+ const { storeApiBase } = useRuntimeConfig().public
+const devHost = (browserHost || '').split(':')[0] 
+
+const API_ROOT = storeApiBase
+  || (import.meta.dev
+    ? (devHost ? `http://${devHost}:8000/` : 'http://test6.192.168.1.10.nip.io:8000/')
+    : (browserHost ? `${browserProtocol}://${browserHost}/api/` : ''));
+  async function init() {
+    if (bootstrapData.value && baseUrl.value) return bootstrapData.value;
+
+    baseUrl.value = API_ROOT;
+
+    try {
+      const data = await storefrontService.bootstrap({
+        baseUrl: API_ROOT,
+        host: browserHost,
+      });
+
+      bootstrapData.value = data;
+      storeData.value = data?.store ?? null;
+      console.log("storedataaaaa", bootstrapData.value);
+    } catch (error) {
+      console.error('[useStoreInit] Failed to fetch bootstrap data:', error);
+    }
+
+    return bootstrapData.value;
+  }
+
+  return { storeData, baseUrl, bootstrapData, init };
+}

package/app/composables/useStorefront.js

@@ -0,0 +1,239 @@
+import { storefrontService } from "#osi/services/storefront.service";
+import { toPlainError } from "#osi/utils/toPlainError";
+import { cachedRequest } from "#osi/utils/requestCache";
+
+const RTL_LOCALES = ["ar", "he", "fa", "ur"];
+
+/** Section-group sections whose settings are (former) theme settings. */
+const CHROME_SECTIONS = new Set(["ANNOUNCEMENT_BAR", "HEADER", "FOOTER", "FOOTER_UTILITIES"]);
+/**
+ * Their blocks that hold former theme settings (same IDs) — laid over the
+ * theme too. The footer's other blocks have IDs of their own and are drawn
+ * from the block (FooterBlock).
+ */
+const THEME_BLOCKS = new Set([
+  "HEADER_LOGO", "HEADER_MENU", "FOOTER_SOCIAL",
+  "UTILITY_COPYRIGHT", "UTILITY_POLICIES", "UTILITY_SOCIAL",
+]);
+
+/** The Footer section's colours, which the Utilities bar follows. */
+const FOOTER_APPEARANCE = [
+  "FOOTER_COLOR_SCHEME", "FOOTER_BACKGROUND", "FOOTER_TEXT_COLOR",
+  "FOOTER_LINK_COLOR", "FOOTER_LINK_HOVER_COLOR",
+];
+
+/** Menus arrive as a map keyed by handle from bootstrap, and as a plain list
+ *  from the dashboard's MENUS message. Normalize to the map either way. */
+function menusAsMap(value) {
+  if (!value) return null;
+  if (!Array.isArray(value)) return value;
+  return Object.fromEntries(
+    value.filter((m) => m?.handle).map((m) => [m.handle, m])
+  );
+}
+
+/**
+ * Root storefront state: theme settings, menus, store info, locale.
+ *
+ * Everything else reads from here. Loaded once during SSR in app.vue and shared
+ * for the rest of the render.
+ *
+ * useState, never a module-level ref: one Nuxt process serves every tenant, so
+ * a module-scoped ref leaks one store's theme into another shopper's page.
+ */
+export function useStorefront() {
+  const data = useState("storefront", () => null);
+  const loading = useState("storefront-loading", () => false);
+  const error = useState("storefront-error", () => null);
+
+  // Unsaved edits from the builder iframe. Null outside the editor, so every
+  // computed below collapses to the saved values on a real storefront.
+  const { theme: themeOverlay, menus: menusOverlay, state: previewState } = usePreviewOverlay();
+
+  const store = computed(() => data.value?.store ?? null);
+
+  const savedTheme = computed(() => data.value?.theme?.settings ?? {});
+
+  /**
+   * Saved settings with the builder's unsaved edits layered on top.
+   *
+   * Merged, not replaced: the dashboard may push a single changed key over
+   * SETTING, and every key it doesn't mention has to keep its saved value —
+   * otherwise dragging a colour picker blanks the rest of the theme.
+   *
+   * This is the single point where "unsaved" enters the storefront. Anything
+   * reading theme settings — useThemeGroup, useColorScheme, useThemeTokens,
+   * useProductCardStyle — is live in the editor because of this computed, and
+   * needs no preview handling of its own.
+   */
+  /**
+   * Header / footer section groups — { header: [section…], footer: [...] }.
+   * The editor's (unsaved) when it has sent them, else the saved ones from
+   * bootstrap. null: a backend without groups — the layout falls back to the
+   * old fixed header and footer.
+   */
+  const sectionGroups = computed(
+    () => previewState.value?.groups ?? data.value?.section_groups ?? null
+  );
+
+  /**
+   * The header, footer and announcement bar sections' settings. They're the
+   * old theme settings, moved with the same IDs, so they're laid over the
+   * theme and every component keeps reading `theme.HEADER_*` etc.
+   */
+  const groupSettings = computed(() => {
+    const groups = sectionGroups.value;
+    if (!groups) return null;
+    // The editor also sends hidden sections (drawn dimmed); the saved payload
+    // holds live ones only.
+    const chrome = [...(groups.header ?? []), ...(groups.footer ?? [])].filter(
+      (s) => s && CHROME_SECTIONS.has(s.type)
+    );
+    const out = {};
+    for (const s of chrome) {
+      Object.assign(out, s.settings ?? {});
+      // Blocks holding their parts' settings (the Header's Logo / Menu…).
+      for (const b of s.blocks ?? []) {
+        if (!b.disabled && THEME_BLOCKS.has(b.type)) Object.assign(out, b.settings ?? {});
+      }
+    }
+    // Deleting the Logo or Menu block takes that part out of the header.
+    const header = chrome.find((s) => s.type === "HEADER");
+    if (header) {
+      const has = (type) => (header.blocks ?? []).some((b) => b.type === type && !b.disabled);
+      out.HEADER_SHOW_LOGO = has("HEADER_LOGO");
+      out.HEADER_SHOW_MENU = has("HEADER_MENU");
+    }
+    // The footer's appearance comes from the Footer section alone. Without
+    // one (only Utilities), the old theme-level values must not leak through
+    // (a stale FOOTER_COLOR_SCHEME pinned the bar to it): unset, so the bar
+    // falls back to the theme's Default scheme.
+    const footer = chrome.find((s) => s.type === "FOOTER");
+    for (const key of FOOTER_APPEARANCE) out[key] = footer?.settings?.[key] ?? null;
+
+    // Utilities: each part shows only while its block is there.
+    const utilities = chrome.find((s) => s.type === "FOOTER_UTILITIES");
+    const hasUtil = (type) => (utilities?.blocks ?? []).some((b) => b.type === type && !b.disabled);
+    out.FOOTER_UTIL_COPYRIGHT = hasUtil("UTILITY_COPYRIGHT");
+    out.FOOTER_UTIL_POLICIES = hasUtil("UTILITY_POLICIES");
+    out.FOOTER_UTIL_SOCIAL = hasUtil("UTILITY_SOCIAL");
+
+    // The bar's own on / off is now "is the section there (and shown)".
+    const bar = chrome.find((s) => s.type === "ANNOUNCEMENT_BAR");
+    out.ANNOUNCEMENT_ENABLED =
+      !!bar && (!bar.disabled || !!previewState.value);
+    return out;
+  });
+
+  const theme = computed(() => ({
+    ...savedTheme.value,
+    ...(themeOverlay.value ?? {}),
+    ...(groupSettings.value ?? {}),
+  }));
+
+  const savedMenus = computed(() => data.value?.menus ?? {});
+
+  /** Same overlay treatment. Lets the preview render a menu the merchant
+   *  created after this page's bootstrap, or edited without saving. */
+  const menus = computed(() => {
+    const overlay = menusAsMap(menusOverlay.value);
+    return overlay ? { ...savedMenus.value, ...overlay } : savedMenus.value;
+  });
+
+  const pages = computed(() => data.value?.pages ?? []);
+
+  const cartType = computed(() => store.value?.cart_type ?? "DRAWER");
+
+  const { mediaUrl } = useMediaUrl();
+  const storeLogo = computed(() => {
+    const s = store.value;
+    if (!s) return "";
+    return mediaUrl(s.logo?.logo_url || s.logo_url || s.logo || "");
+  });
+
+  const locale = useState("locale", () => "en");
+  const dir = computed(() => (RTL_LOCALES.includes(locale.value) ? "rtl" : "ltr"));
+
+  // ---------------------------------------------------------------------
+  // Resolved HERE, in the composable body, while the Nuxt instance is still
+  // available. On the server that async context is lost across every await, so
+  // anything calling useRequestHeaders() or useState() after one throws:
+  //
+  //   A composable that requires access to the Nuxt instance was called
+  //   outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.
+  //
+  // Refs survive an await fine — it's CREATING one that needs context. So
+  // capture the ref now and read .value later.
+  // ---------------------------------------------------------------------
+  const { init, baseUrl, bootstrapData } = useStoreInit();
+
+  let requestHost = "";
+  if (import.meta.server) {
+    const h = useRequestHeaders(["host", "x-forwarded-host"]);
+    requestHost = h["x-forwarded-host"] || h.host || "";
+  } else if (typeof location !== "undefined") {
+    requestHost = location.host;
+  }
+
+  async function load() {
+    if (data.value) return data.value;
+
+    loading.value = true;
+    error.value = null;
+    try {
+      // init() fetches bootstrap directly (no baseUrl needed for that call)
+      // and derives baseUrl from the store's username in the response. Reuse
+      // that payload instead of firing a second, redundant bootstrap request.
+      if (!bootstrapData.value) await init();
+      data.value = bootstrapData.value;
+
+      const available = data.value?.store?.locales ?? ["en"];
+      if (!available.includes(locale.value)) {
+        locale.value = data.value?.store?.default_locale ?? available[0] ?? "en";
+      }
+      return data.value;
+    } catch (e) {
+      // A raw Error must never reach useState — Nuxt serializes every useState
+      // into the SSR payload, and an Error is not a plain object. It fails with
+      // "Cannot stringify arbitrary non-POJOs", masking the real cause.
+      error.value = toPlainError(e);
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Sections for one route. Call from a page's useAsyncData; baseUrl and host
+   * come from the closure above, so it's safe after an await.
+   */
+  /**
+   * The page payload for a path. In the browser it's cached (utils/requestCache):
+   * going back to a page you've seen shows it at once, refreshed in the
+   * background when it's over a minute old. The server always fetches fresh.
+   */
+  async function render(path) {
+    if (!baseUrl.value) await init();
+    const args = { baseUrl: baseUrl.value, host: requestHost, path };
+    return cachedRequest(`render:${args.baseUrl}:${path}`, () => storefrontService.render(args));
+  }
+
+  /** A menu by handle, with a safe empty shape so layouts never have to guard. */
+  function menu(handle) {
+    return menus.value[handle] ?? { handle, title: "", items: [] };
+  }
+
+  function setLocale(next) {
+    const available = store.value?.locales ?? ["en"];
+    if (available.includes(next)) locale.value = next;
+  }
+
+  return {
+    data, loading, error,
+    store, theme, menus, pages, sectionGroups,
+    cartType, storeLogo,
+    locale, dir,
+    baseUrl, requestHost,
+    load, render, menu, setLocale,
+  };
+}

package/app/composables/useT.js

@@ -0,0 +1,21 @@
+/**
+ * Read a localized setting.
+ *
+ * Any schema field marked `localized` is stored as { en: "…", ar: "…" }, not a
+ * string. Rendering the object directly prints [object Object] on the page, and
+ * it happens on whichever field nobody remembered to wrap.
+ *
+ * Pipe every text setting through this. It's a no-op on plain strings, so
+ * there's no cost to being indiscriminate — and the set of localized fields
+ * changes whenever the backend schema does.
+ */
+export function useT() {
+  const { locale, store } = useStorefront();
+
+  return function t(value) {
+    if (value === null || value === undefined) return "";
+    if (typeof value !== "object" || Array.isArray(value)) return value;
+    const fallback = store.value?.default_locale ?? "en";
+    return value[locale.value] ?? value[fallback] ?? "";
+  };
+}

package/app/composables/useTextStyles.js

@@ -0,0 +1,84 @@
+/**
+ * text_style() settings -> an inline style object.
+ *
+ * The backend's text_style(prefix, ...) helper emits seven fields for one text
+ * element: SIZE, SIZE_MOBILE, WEIGHT, COLOR, LINE_HEIGHT, LETTER_SPACING, FONT.
+ * Nearly every section schema splices it in one to four times. SiteFooter grew
+ * a local copy of this mapping for its two sets; SlideshowSection would have
+ * been the second copy, and every section that adds typography after it another.
+ *
+ * Same shape as useButtonStyle: reads a settings object rather than a section,
+ * so it works for a section's settings and for a block's, and takes a prefix so
+ * one component can call it once per text element.
+ *
+ *   const headingStyle = useTextStyle(() => s.value, { prefix: "HEADING_TEXT" })
+ *   <h2 :style="headingStyle">…</h2>
+ *
+ * Sizes go out as CSS custom properties rather than a font-size, because the
+ * mobile size needs a media query and a component can't write one inline. The
+ * consumer pairs them with:
+ *
+ *   font-size: var(--osi-fs);
+ *   @media (max-width: 767px) { font-size: var(--osi-fs-mobile); }
+ *
+ * COLOR left empty writes nothing, so the element inherits — which is what
+ * makes "leave empty to inherit from the colour scheme" true rather than a
+ * label on a field that silently forces a colour.
+ *
+ * @param {object|Ref|(() => object)} settings
+ * @param {object} [options]
+ * @param {string} [options.prefix='TEXT']
+ * @param {object} [options.defaults]  size / weight / font / transform
+ * @returns {ComputedRef<object>}
+ */
+const FONT_WEIGHTS = { REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+const FONT_FAMILIES = { HEADING: "var(--osi-font-heading)", BODY: "var(--osi-font-body)" };
+const TEXT_TRANSFORMS = {
+  NONE: "none",
+  UPPERCASE: "uppercase",
+  LOWERCASE: "lowercase",
+  CAPITALIZE: "capitalize",
+};
+
+export function useTextStyle(settings, options = {}) {
+  const { prefix = "TEXT", defaults = {} } = options;
+  const {
+    size = 16,
+    weight = "REGULAR",
+    font = "BODY",
+    transform = "NONE",
+    lineHeight = 130,
+  } = defaults;
+
+  return computed(() => {
+    const s = toValue(settings) ?? {};
+    const get = (key) => s[`${prefix}_${key}`];
+
+    // null and "" are "not set", not 0 — Number(null) is 0, which used to
+    // turn an empty mobile size into a 0px font.
+    const num = (value, fallback) => {
+      if (value === null || value === undefined || value === "") return fallback;
+      const n = Number(value);
+      return Number.isFinite(n) ? n : fallback;
+    };
+
+    const base = num(get("SIZE"), size);
+
+    return {
+      "--osi-fs": `${base}px`,
+      // Falls back to the desktop size, not to a constant: an unset mobile size
+      // means "same as desktop", not "16px".
+      "--osi-fs-mobile": `${num(get("SIZE_MOBILE"), base)}px`,
+      "--osi-fw": FONT_WEIGHTS[get("WEIGHT")] ?? FONT_WEIGHTS[weight] ?? 400,
+      "--osi-lh": `${num(get("LINE_HEIGHT"), lineHeight) / 100}`,
+      "--osi-ls": `${num(get("LETTER_SPACING"), 0) / 100}em`,
+      "--osi-ff": FONT_FAMILIES[get("FONT")] ?? FONT_FAMILIES[font],
+      // undefined rather than "inherit" so the property isn't written at all.
+      color: get("COLOR") || undefined,
+      textTransform:
+        TEXT_TRANSFORMS[get("TRANSFORM")] ?? TEXT_TRANSFORMS[transform] ?? "none",
+    };
+  });
+}
+
+export { FONT_WEIGHTS, FONT_FAMILIES, TEXT_TRANSFORMS };

package/app/composables/useThemeControls.js

@@ -0,0 +1,34 @@
+import { BUTTON_HOVERS, BUTTON_STYLES, INPUT_STYLES, LABEL_STYLES, pick } from "#osi/theme/controls";
+
+/**
+ * The theme's Buttons / Inputs enum choices, resolved.
+ *
+ * Split from useThemeTokens so a field or button can read "which label
+ * style is the theme on?" without building the whole token map.
+ */
+export function useThemeControls() {
+  const { theme } = useStorefront();
+
+  const controls = computed(() => {
+    const t = theme.value ?? {};
+    return {
+      buttonStyle: pick(t.BUTTON_STYLE, BUTTON_STYLES) ?? "SOLID",
+      buttonHover: pick(t.BUTTON_HOVER_EFFECT, BUTTON_HOVERS) ?? "FADE",
+      inputStyle: pick(t.INPUT_STYLE, INPUT_STYLES) ?? "OUTLINE",
+      labelStyle: pick(t.INPUT_LABEL_STYLE, LABEL_STYLES) ?? "FLOATING",
+      showRequiredMark: t.INPUT_SHOW_REQUIRED_MARK !== false,
+    };
+  });
+
+  const rootClasses = computed(() => [
+    // Theme → Animations
+    theme.value?.ANIMATION_REVEAL ? "osi-reveal" : "",
+    `osi-hover--${String(theme.value?.ANIMATION_HOVER || "NONE").toLowerCase()}`,
+    `osi-btns--${controls.value.buttonStyle.toLowerCase()}`,
+    `osi-btns-hover--${controls.value.buttonHover.toLowerCase()}`,
+    `osi-inputs--${controls.value.inputStyle.toLowerCase()}`,
+    `osi-labels--${controls.value.labelStyle.toLowerCase()}`,
+  ]);
+
+  return { controls, rootClasses };
+}

package/app/composables/useThemeSeo.js

@@ -0,0 +1,91 @@
+/**
+ * Store-wide head tags from the theme — logo/favicon, SEO and sharing,
+ * social handles, custom CSS. Called once, from app.vue.
+ *
+ * Pages add or override on top: a product sets its own title, description and
+ * image; these are the fallbacks every page starts from (and all the home page
+ * gets, since it sets nothing itself).
+ *
+ * Theme settings (Shopify's "Logo and favicon", "Search engine listing",
+ * "Social media" and "Custom CSS" groups):
+ *   FAVICON, LOGO                      icon; logo is the fallback share image
+ *   SEO_TITLE, SEO_DESCRIPTION         home page title / default description
+ *   SEO_TITLE_FORMAT                   PAGE_STORE | PAGE_ONLY | STORE_PAGE
+ *   SEO_TITLE_SEPARATOR                "|" "—" "·" "-"
+ *   SEO_SHARE_IMAGE                    default og:image
+ *   SEO_NO_INDEX                       keep the whole store out of search engines
+ *   SOCIAL_X_HANDLE                    twitter:site
+ *   CUSTOM_CSS                         appended to <head>
+ */
+/** Osimart's favicon, in public/ — used when the store has none. */
+const OSIMART_FAVICON = "/favicon-32x32.png";
+
+export function useThemeSeo() {
+  const { store, storeLogo } = useStorefront();
+  const brand = useThemeGroup("BRAND");
+  const seo = useThemeGroup("SEO");
+  const social = useThemeGroup("SOCIAL_MEDIA");
+  const custom = useThemeGroup("CUSTOM_CSS");
+  const { mediaUrl } = useMediaUrl();
+  const origin = useRequestURL().origin;
+
+  const storeName = computed(() => store.value?.name ?? "");
+  // The store's favicon (theme setting, then the store's own); none from the
+  // API: Osimart's, from public/ (OSIMART_FAVICON).
+  const favicon = computed(
+    () => mediaUrl(brand.value.FAVICON ?? null) || mediaUrl(store.value?.favicon ?? null)
+  );
+  const shareImage = computed(
+    () => mediaUrl(seo.value.SEO_SHARE_IMAGE ?? null) || mediaUrl(brand.value.LOGO ?? null) || storeLogo.value || null
+  );
+  const description = computed(
+    () => String(seo.value.SEO_DESCRIPTION || store.value?.description || "").trim() || undefined
+  );
+
+  function formatTitle(page) {
+    const name = storeName.value;
+    const home = String(seo.value.SEO_TITLE || "").trim() || name;
+    if (!page) return home;
+    const sep = ` ${seo.value.SEO_TITLE_SEPARATOR || "|"} `;
+    switch (String(seo.value.SEO_TITLE_FORMAT || "PAGE_STORE").toUpperCase()) {
+      case "PAGE_ONLY":
+        return page;
+      case "STORE_PAGE":
+        return name ? `${name}${sep}${page}` : page;
+      default:
+        return name && page !== name ? `${page}${sep}${name}` : page;
+    }
+  }
+
+  const xHandle = computed(() => {
+    const raw = String(social.value.SOCIAL_X_HANDLE || "").trim();
+    return raw ? (raw.startsWith("@") ? raw : `@${raw}`) : undefined;
+  });
+
+  useHead(() => ({
+    titleTemplate: (title) => formatTitle(title),
+    link: favicon.value
+      ? [
+          { rel: "icon", href: favicon.value, key: "favicon" },
+          { rel: "apple-touch-icon", href: favicon.value, key: "apple-touch-icon" },
+        ]
+      : [],
+    meta: [
+      { name: "description", content: description.value, key: "description" },
+      { property: "og:site_name", content: storeName.value || undefined, key: "og:site_name" },
+      { property: "og:type", content: "website", key: "og:type" },
+      { property: "og:title", content: formatTitle(null), key: "og:title" },
+      { property: "og:description", content: description.value, key: "og:description" },
+      { property: "og:image", content: shareImage.value || undefined, key: "og:image" },
+      { property: "og:url", content: origin, key: "og:url" },
+      { name: "twitter:card", content: shareImage.value ? "summary_large_image" : "summary", key: "twitter:card" },
+      { name: "twitter:site", content: xHandle.value, key: "twitter:site" },
+      ...(seo.value.SEO_NO_INDEX ? [{ name: "robots", content: "noindex, nofollow", key: "robots" }] : []),
+    ],
+    style: custom.value.CUSTOM_CSS
+      ? [{ key: "osi-theme-custom-css", innerHTML: String(custom.value.CUSTOM_CSS) }]
+      : [],
+  }));
+
+  return { formatTitle, favicon, shareImage };
+}