@stnd/layout 0.2.0 → 0.5.1

package/Base.astro

@@ -1,165 +1,145 @@
 ---
+/**
+ * @component Base
+ * @description The definitive root layout for all Standard Garden
+ * websites — `<html>`/`<head>`/`<body>`, theme/color-mode/language
+ * resolution, and the header/footer slots every page gets by default.
+ *
+ * System-layer components (Toast, Confetti, Lab) are not hardcoded here —
+ * they're registered as Gold Standard modules and injected via `StndInit`'s
+ * hook zones: `stnd:base` (static Astro components, no hydration) and
+ * `stnd:client` (hydrated Svelte components). To exclude one, use
+ * `moduleExclude` in `astro.config`:
+ * `standard({ moduleExclude: ["@stnd/modules/confetti"] })`. See
+ * [Hooks & Extension Points](/manual/modules/hooks) for the full list.
+ */
+
+import "virtual:stnd/styles";
+import config from "virtual:stnd/config";
 import Meta from "./Meta.astro";
-import Menu from "../../components/Menu.astro";
-import Logo from "../../components/Logo.astro";
-import Comments from "../../components/Comments.astro";
-import Toast from "../../components/Toast.astro";
-// import { ClientRouter } from "astro:transitions";
-import Log from "@stnd/log";
-import { Image } from "astro:assets";
-
-// Create logger for this layout
-const log = Log({ scope: "Base Layout" });
-
-// Access site configuration from global
-import type { StandardFrameworkConfig } from "../types/standard";
-const config =
-  (globalThis["__STANDARD_CONFIG__"] as StandardFrameworkConfig) || {};
-
-// ========================================
-// PROPS INTERFACE
-// ========================================
+import Header from "./Header.astro";
+import Footer from "./Footer.astro";
+import StndInit from "./StndInit.astro";
+import Hook from "@stnd/core/Hook";
+import LauncherHint from "@stnd/ui/LauncherHint.astro";
+import { ClientRouter } from "astro:transitions";
 
 interface Props {
-  frontmatter?: {
-    title?: string;
-    description?: string;
-    image?: string;
-    created?: string;
-    modified?: string;
-    tags?: string[];
-    securityHeaders?: boolean;
-    backlinks?: {
-      inbound?: string[];
-      outbound?: string[];
-      meta?: Record<string, any>;
-    };
-  };
-  site?: StandardFrameworkConfig;
+  /** Page title — passed straight through to `<Meta>`. Defaults to the site's own config title. */
   title?: string;
   description?: string;
+  /** Social-share image URL. */
   image?: string;
   created?: string;
   modified?: string;
   tags?: string[];
-  securityHeaders?: boolean;
+  /** Theme name — defaults to the visitor's saved preference, then the site's system default. */
+  theme?: string;
+  lang?: string;
+  /** Skip the default header/footer entirely (still renders `<html>`/`<head>`/`<body>`). */
+  hideLayout?: boolean;
   class?: string;
+  inlineStyle?: string;
+  /** Extra raw markup injected into `<head>`. */
+  headExtras?: string;
+  visibility?: "public" | "private" | "unlisted";
+
+  /** Forwarded to `<Header>` — brand text/link and nav items. */
+  header?: {
+    brand?: string;
+    brandHref?: string;
+    items?: Array<{ title: string; url: string; external?: boolean }>;
+  };
 }
 
-// Use config from virtual module, with fallback to props for backward compatibility
+const { root } = Astro.locals as any;
+const userTheme = root?.visitor?.raw?.preferences?.theme;
+const systemDefaultTheme = "garden";
+
+// If a specific theme was explicitly requested via props, force it.
+// Otherwise, fall back to the visitor's preference, or the system default.
+const activeTheme = Astro.props.theme || userTheme || systemDefaultTheme;
+
 const {
-  frontmatter,
-  site = config || {}, // Use config as default, allow override via props
-  title = frontmatter?.title || config?.title,
-  description = frontmatter?.description || config?.description,
-  image = frontmatter?.image,
-  created = frontmatter?.created,
-  modified = frontmatter?.modified,
-  tags = frontmatter?.tags || config?.tags || [],
-  securityHeaders = frontmatter?.securityHeaders,
+  title = config?.title,
+  description = config?.description,
+  image,
+  created,
+  modified,
+  tags,
+  theme = activeTheme,
+  lang = root?.visitor?.raw?.preferences?.uiLanguage || "en",
+  hideLayout = false,
   class: className,
+  inlineStyle,
+  headExtras,
+  visibility,
+  header = {},
 } = Astro.props as Props;
-
-// ✨ Get backlinks from the page's frontmatter/data
-const backlinks = frontmatter?.backlinks || {};
-const { inbound = [], outbound = [], meta = {} } = backlinks;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _unused = { inbound, outbound, meta };
-
-const year = new Date().getFullYear();
 ---
 
 <!doctype html>
 <html
-  class="rhythm"
-  lang={site.language || config?.language || "en"}
-  data-standard-version={site.version || config?.version}
-  data-theme="system"
+  lang={lang}
+  data-theme={theme}
+  data-env={import.meta.env.DEV ? "dev" : "prod"}
+  data-color-mode={root?.visitor?.raw?.preferences?.colorMode || "auto"}
+  style={inlineStyle}
 >
   <head>
-    <meta name="astro-view-transitions-enabled" content="true" />
+    <ClientRouter />
     <Meta
-      site={site}
       title={title}
       description={description}
       image={image}
       created={created}
       modified={modified}
       tags={tags}
-      securityHeaders={securityHeaders}
+      visibility={visibility}
+      headExtensions={headExtras}
     />
-    <!-- <ClientRouter /> -->
-    <script
-      is:inline
-      data-astro-rerun
-      src="/assets/standard/standard.bundle.full.js"
-      transition:persist></script>
-    <!-- Check if lab is enabled in config -->
+    <slot name="head" />
+  </head>
+  <body class:list={[className]}>
     {
-      config.lab ? (
-        <script
-          is:inline
-          src="/assets/standard/standard.lab.js"
-          transition:persist
-        />
-      ) : null
+      !hideLayout && (
+        <slot name="header">
+          <Header {...header}>
+            <slot name="header-actions" slot="actions" />
+            <div slot="bottom-left" class="text-2xs text-subtle">
+              <a class=" no-decoration" href="https://stnd.build/">
+                stnd.build
+              </a>
+            </div>
+            <LauncherHint slot="bottom-right" />
+          </Header>
+        </slot>
+      )
     }
-    <script is:inline src="/assets/standard/standard.lab.js" transition:persist
-    ></script>
-  </head>
-
-  <body>
-    <!-- Persistent container for StandardLab UI that survives DOM swaps -->
-    <!--div id="standard-lab-root" transition:persist></div>
-
-        <a href="#main" class="skip-link">Skip to content</a-->
-
-    <header
-      class="flex font-interface"
-      style="justify-content: space-between; max-width: 100%;"
-    >
-      <p>
-        <a href="/" class="no-underline"><Logo /></a>
-      </p>
-      <Menu
-        items={site.nav?.header || config?.nav?.header || []}
-        class="horizontal"
-      />
-    </header>
 
-    <main id="main" class="rhythm prose mt-6">
-      <slot />
+    <slot />
 
-      <Comments />
-    </main>
-
-    <hr />
-
-    <footer class="smaller font-interface">
-      <p>
-        <Image
-          src="https://img.shields.io/npm/v/@stnd/astro"
-          alt="Standard Version Badge"
-          width="94"
-          height="20"
-        />
-      </p>
-      <p>
-        © {year}
-        {site.author?.name || site.author || config?.author?.name} ·
-        <a href="/">{site.title || config?.title}</a> ·
-        <a
-          href="https://github.com/ZeFish/Standard/blob/main/LICENSE"
-          class="external-link">MIT License</a
-        >
-        <a href="https://standard.garden/" class="external-link"
-          >Standard::Garden</a
-        >
-      </p>
-    </footer>
-
-    <!-- Universal Toast Notification System -->
-    <Toast />
-  </body>
+    {
+      !hideLayout && (
+        <slot name="footer">
+          <Footer>
+            {Astro.slots.has("footer-brand") && (
+              <slot name="footer-brand" slot="brand" />
+            )}
+            {Astro.slots.has("footer-description") && (
+              <slot name="footer-description" slot="description" />
+            )}
+            {Astro.slots.has("footer-copyright") && (
+              <slot name="footer-copyright" slot="copyright" />
+            )}
+            <slot name="footer-bottom-left" slot="bottom-left" />
+            <slot name="footer-bottom-right" slot="bottom-right" />
+            <Fragment>
+              <slot name="footer-links" />
+            </Fragment>
+          </Footer>
+        </slot>
+      )
+    }
+  </body><StndInit />
 </html>

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @stnd/layout
 
+## 0.5.0
+
+### Minor Changes
+
+- Folio Load order
+
+### Patch Changes
+
+- Updated dependencies
+  - @stnd/log@0.5.0
+  - @stnd/utils@0.5.0
+
+## 0.4.0
+
+### Minor Changes
+
+- Folio order
+
+### Patch Changes
+
+- Updated dependencies
+  - @stnd/log@0.4.0
+  - @stnd/utils@0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 2d0ae02: NPM Test
+
+### Patch Changes
+
+- Updated dependencies [2d0ae02]
+  - @stnd/log@0.3.0
+  - @stnd/utils@0.3.0
+
 ## 0.2.0
 
 ### Minor Changes