handzon-core 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handzon-core",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Core framework for Handzon — layouts, components, content + AI libs, and server runtime (handlers, DB, auth, migration runner) consumed by Handzon scaffolds.",
   "publishConfig": {
     "access": "public"

package/src/components/Footer.astro

@@ -1,44 +1,77 @@
 ---
 /**
- * Site footer. A single quiet line at the bottom of every page,
- * crediting the framework + linking to the Handzon repo. Sized to
- * match the rest of the brutalist surface treatment.
+ * Site footer. A single quiet line at the bottom of every page, sized
+ * to match the rest of the brutalist surface treatment.
+ *
+ * Two modes:
+ *  - Default (no `siteUrl`): one centered "Built with Handzon" credit,
+ *    preserving the framework's original footer for unbranded scaffolds.
+ *  - Branded (`siteUrl` set): the site owner's credit leads on the left
+ *    (linked to `siteUrl`), and "Built with Handzon" moves to a quieter
+ *    secondary link on the right.
  */
 interface Props {
-  /** Public URL to the framework repo. Override to point elsewhere. */
+  /** Primary credit label — the site owner. */
+  siteName?: string;
+  /** Primary footer credit label. Defaults to `siteName`, but can be
+   *  shorter (for example `render.com`) without changing page titles,
+   *  nav labels, or Open Graph metadata. */
+  siteCreditLabel?: string;
+  /** Primary credit link. When set, the footer leads with this credit
+   *  and demotes the Handzon link to a secondary side link. */
+  siteUrl?: string;
+  /** Handzon project/package link (the secondary "Built with" credit). */
   repoUrl?: string;
   /** Year displayed in the credit line; defaults to the current year. */
   year?: number;
 }
 
 const {
+  siteName = "Handzon",
+  siteCreditLabel = siteName,
+  siteUrl,
   repoUrl = "https://github.com/R4ph-t/handzon",
   year = new Date().getFullYear(),
 } = Astro.props;
 ---
 <footer class="hz-footer">
-  <div class="hz-footer-inner">
-    <span class="hz-footer-credit">
-      © {year} · Built with
-      <a class="hz-footer-link" href={repoUrl} target="_blank" rel="noopener">
-        Handzon
-        <svg
-          viewBox="0 0 24 24"
-          width="11"
-          height="11"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M7 17 17 7" />
-          <path d="M7 7h10v10" />
-        </svg>
-      </a>
-    </span>
-  </div>
+  {siteUrl ? (
+    <div class="hz-footer-inner hz-footer-split">
+      <span class="hz-footer-credit">
+        © {year}
+        <a class="hz-footer-link" href={siteUrl} target="_blank" rel="noopener">
+          {siteCreditLabel}
+          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M7 17 17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </a>
+      </span>
+      <span class="hz-footer-built">
+        Built with
+        <a class="hz-footer-link" href={repoUrl} target="_blank" rel="noopener">
+          Handzon
+          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M7 17 17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </a>
+      </span>
+    </div>
+  ) : (
+    <div class="hz-footer-inner">
+      <span class="hz-footer-credit">
+        © {year} · Built with
+        <a class="hz-footer-link" href={repoUrl} target="_blank" rel="noopener">
+          Handzon
+          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M7 17 17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </a>
+      </span>
+    </div>
+  )}
 </footer>
 
 <style is:global>
@@ -64,11 +97,24 @@ const {
     font-family: var(--font-mono);
     font-size: 0.75em;
   }
+  /* Branded mode: site credit left, "Built with Handzon" right. Falls
+   * back to a stacked, centered layout on narrow viewports. */
+  .hz-footer-split {
+    justify-content: space-between;
+    gap: 0.75rem 1.5rem;
+    flex-wrap: wrap;
+  }
   .hz-footer-credit {
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
   }
+  .hz-footer-built {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    opacity: 0.85;
+  }
   .hz-footer-link {
     display: inline-flex;
     align-items: center;

package/src/layouts/BaseLayout.astro

@@ -34,6 +34,12 @@ interface Props {
   showFooter?: boolean;
   /** Footer link URL; defaults to the Handzon repo. */
   repoUrl?: string;
+  /** Primary footer credit link (the site owner, e.g. https://render.com).
+   *  When set, the footer leads with the site credit and demotes the
+   *  Handzon link to a secondary side link. */
+  siteUrl?: string;
+  /** Primary footer credit label. Defaults to siteName. */
+  siteCreditLabel?: string;
   /**
    * Width of the page's content column. Drives the navbar + footer
    * alignment via the --hz-page-max-width CSS custom property so the
@@ -63,6 +69,8 @@ const {
   faviconUrl = "/favicon.svg",
   showFooter = true,
   repoUrl,
+  siteUrl,
+  siteCreditLabel,
   // Default to a full-width navbar + footer with a small consistent
   // inset, matching the tutorial step page. Pages with a centred
   // column (home grid, tutorial landing) keep their own content
@@ -113,7 +121,17 @@ const desc = description ?? tagline;
     <div class="hz-page">
       <slot />
     </div>
-    {showFooter && <Footer repoUrl={repoUrl} />}
+    {/* Footer content is configurable via siteName/siteCreditLabel/siteUrl/repoUrl. For
+        a fully custom footer, a scaffold can pass showFooter={false} and
+        render its own markup in the page body. */}
+    {showFooter && (
+      <Footer
+        siteName={siteName}
+        siteCreditLabel={siteCreditLabel}
+        siteUrl={siteUrl}
+        repoUrl={repoUrl}
+      />
+    )}
     <script>
       // Render any <pre class="mermaid"> blocks emitted by rehype-mermaid.
       if (document.querySelector("pre.mermaid")) {

package/src/layouts/TutorialLayout.astro

@@ -18,6 +18,10 @@ interface Props {
   logoHeight?: number;
   faviconUrl?: string;
   repoUrl?: string;
+  siteUrl?: string;
+  siteCreditLabel?: string;
+  /** Set false to drop the built-in footer and supply your own. */
+  showFooter?: boolean;
 }
 
 const {
@@ -33,6 +37,9 @@ const {
   logoHeight,
   faviconUrl,
   repoUrl,
+  siteUrl,
+  siteCreditLabel,
+  showFooter = true,
 } = Astro.props;
 
 const stepSlugs = steps.map((s) => parseStepId(s.id).stepSlug);
@@ -47,6 +54,9 @@ const stepSlugs = steps.map((s) => parseStepId(s.id).stepSlug);
   logoHeight={logoHeight}
   faviconUrl={faviconUrl}
   repoUrl={repoUrl}
+  siteUrl={siteUrl}
+  siteCreditLabel={siteCreditLabel}
+  showFooter={showFooter}
 >
   <slot name="head" slot="head" />
   <div class="layout">

package/src/pages/Home.astro

@@ -16,6 +16,10 @@ interface Props {
   logoHeight?: number;
   faviconUrl?: string;
   repoUrl?: string;
+  siteUrl?: string;
+  siteCreditLabel?: string;
+  /** Set false to drop the built-in footer and supply your own. */
+  showFooter?: boolean;
   showResumeRail?: boolean;
   emptyStateCommand?: string;
   /** Tutorials per page on the grid. */
@@ -31,6 +35,9 @@ const {
   logoHeight,
   faviconUrl,
   repoUrl,
+  siteUrl,
+  siteCreditLabel,
+  showFooter = true,
   showResumeRail = true,
   emptyStateCommand = "pnpm handzon:new",
   pageSize = 9,
@@ -64,6 +71,9 @@ for (const t of tutorials) {
   logoHeight={logoHeight}
   faviconUrl={faviconUrl}
   repoUrl={repoUrl}
+  siteUrl={siteUrl}
+  siteCreditLabel={siteCreditLabel}
+  showFooter={showFooter}
   nav="userMenu"
 >
   <slot name="head" slot="head" />

package/src/pages/TutorialLanding.astro

@@ -13,6 +13,10 @@ interface Props {
   logoHeight?: number;
   faviconUrl?: string;
   repoUrl?: string;
+  siteUrl?: string;
+  siteCreditLabel?: string;
+  /** Set false to drop the built-in footer and supply your own. */
+  showFooter?: boolean;
 }
 
 const {
@@ -24,6 +28,9 @@ const {
   logoHeight,
   faviconUrl,
   repoUrl,
+  siteUrl,
+  siteCreditLabel,
+  showFooter = true,
 } = Astro.props;
 const steps = await getStepsForTutorial(tutorial.id);
 const duration = tutorial.data.estimatedDuration ?? sumDurations(steps) ?? "";
@@ -39,6 +46,9 @@ const firstStepSlug = steps[0] ? parseStepId(steps[0].id).stepSlug : null;
   logoHeight={logoHeight}
   faviconUrl={faviconUrl}
   repoUrl={repoUrl}
+  siteUrl={siteUrl}
+  siteCreditLabel={siteCreditLabel}
+  showFooter={showFooter}
 >
   <slot name="head" slot="head" />
   <div class="landing">

package/src/pages/TutorialStep.astro

@@ -24,6 +24,10 @@ interface Props {
   logoHeight?: number;
   faviconUrl?: string;
   repoUrl?: string;
+  siteUrl?: string;
+  siteCreditLabel?: string;
+  /** Set false to drop the built-in footer and supply your own. */
+  showFooter?: boolean;
 }
 
 const {
@@ -38,6 +42,9 @@ const {
   logoHeight,
   faviconUrl,
   repoUrl,
+  siteUrl,
+  siteCreditLabel,
+  showFooter = true,
 } = Astro.props;
 const { stepSlug } = parseStepId(currentStep.id);
 const { Content } = await render(currentStep);
@@ -68,6 +75,9 @@ const initialContext = buildContext({
   logoHeight={logoHeight}
   faviconUrl={faviconUrl}
   repoUrl={repoUrl}
+  siteUrl={siteUrl}
+  siteCreditLabel={siteCreditLabel}
+  showFooter={showFooter}
 >
   <slot name="head" slot="head" />
   <Content components={components} />