handzon-core 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handzon-core",
-  "version": "0.9.0",
+  "version": "0.11.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,72 @@
 ---
 /**
- * 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 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",
+  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">
+          {siteName}
+          <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 +92,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/components/Navbar.astro

@@ -7,6 +7,7 @@
  * homepage. Sticky so it stays available as users scroll long
  * tutorial steps.
  */
+import { withBase } from "../lib/base";
 import UserMenu from "./auth/UserMenu.astro";
 
 interface Props {
@@ -33,10 +34,10 @@ const {
 ---
 <header class="hz-nav">
   <div class="hz-nav-inner">
-    <a href="/" class="hz-nav-brand" aria-label={`${siteName} home`}>
+    <a href={withBase("/")} class="hz-nav-brand" aria-label={`${siteName} home`}>
       {logoUrl && (
         <img
-          src={logoUrl}
+          src={withBase(logoUrl)}
           alt=""
           aria-hidden="true"
           class="hz-nav-logo"

package/src/components/Sidebar.astro

@@ -1,4 +1,5 @@
 ---
+import { withBase } from "../lib/base";
 import type { TutorialEntry, StepEntry } from "../lib/content";
 import { parseStepId } from "../lib/content";
 import Progress from "./Progress.tsx";
@@ -17,9 +18,9 @@ const slug = tutorial.id;
    * step list below scrolls when there are many steps. */}
   <div class="sb-top">
     <header class="sb-header">
-      <a class="sb-back" href="/">← All tutorials</a>
+      <a class="sb-back" href={withBase("/")}>← All tutorials</a>
       <h2 class="sb-title">
-        <a href={`/${slug}`}>{tutorial.data.title}</a>
+        <a href={withBase(`/${slug}`)}>{tutorial.data.title}</a>
       </h2>
       {tutorial.data.estimatedDuration && (
         <div class="sb-meta">{tutorial.data.estimatedDuration}</div>
@@ -37,7 +38,7 @@ const slug = tutorial.id;
       const isCurrent = stepSlug === currentStepSlug;
       return (
         <li class={isCurrent ? "is-current" : ""} data-step-slug={stepSlug}>
-          <a href={`/${slug}/${stepSlug}`}>
+          <a href={withBase(`/${slug}/${stepSlug}`)}>
             <span class="sb-check" data-step-key={`${slug}/${stepSlug}`}></span>
             <span class="sb-name">{step.data.title}</span>
             {step.data.duration && <span class="sb-dur">{step.data.duration}</span>}

package/src/components/StepNav.astro

@@ -1,4 +1,5 @@
 ---
+import { withBase } from "../lib/base";
 import type { StepEntry } from "../lib/content";
 import { parseStepId } from "../lib/content";
 
@@ -20,18 +21,18 @@ const nextSlug = next ? parseStepId(next.id).stepSlug : null;
 <nav class="step-nav" data-gated={gated && hasCheckpoint ? "true" : "false"} data-step-key={`${tutorialSlug}/${currentStepSlug}`}>
   <div>
     {prev && (
-      <a class="sn-prev" href={`/${tutorialSlug}/${prevSlug}`}>
+      <a class="sn-prev" href={withBase(`/${tutorialSlug}/${prevSlug}`)}>
         ← {prev.data.title}
       </a>
     )}
   </div>
   <div>
     {next ? (
-      <a class="sn-next" href={`/${tutorialSlug}/${nextSlug}`} data-next-link="true">
+      <a class="sn-next" href={withBase(`/${tutorialSlug}/${nextSlug}`)} data-next-link="true">
         {hasCheckpoint ? "Continue" : "Next"}: {next.data.title} →
       </a>
     ) : (
-      <a class="sn-next sn-done" href={`/${tutorialSlug}`}>
+      <a class="sn-next sn-done" href={withBase(`/${tutorialSlug}`)}>
         Finish tutorial →
       </a>
     )}

package/src/components/ai/ChatPanel.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { type ChatMessage, clearLearnerKey, loadLearnerKey, streamChat } from "../../lib/ai/client";
 import type { AssistantContext } from "../../lib/ai/context";
+import { withBase } from "../../lib/base";
 import type { AiConfig } from "../../types/ai";
 import ByokSetup from "./ByokSetup";
 
@@ -130,7 +131,7 @@ export default function ChatPanel({ open, onOpenChange, config, context, initial
     inboxRef.current = true;
     void (async () => {
       try {
-        const res = await fetch("/api/help-inbox");
+        const res = await fetch(withBase("/api/help-inbox"));
         if (!res.ok) return;
         const data = (await res.json()) as {
           requests?: Array<{ query: string; tutorialSlug: string; stepSlug: string }>;

package/src/components/auth/UserMenu.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { withBase } from "../../lib/base";
 
 /**
  * Client-only auth menu. Fetches `/api/auth/session` + `/api/auth/csrf`
@@ -41,8 +42,8 @@ export default function UserMenu() {
     (async () => {
       try {
         const [sessRes, csrfRes] = await Promise.all([
-          fetch("/api/auth/session", { credentials: "same-origin" }),
-          fetch("/api/auth/csrf", { credentials: "same-origin" }),
+          fetch(withBase("/api/auth/session"), { credentials: "same-origin" }),
+          fetch(withBase("/api/auth/csrf"), { credentials: "same-origin" }),
         ]);
         if (cancelled) return;
         // 404 → auth-astro integration not wired in this scaffold.
@@ -71,7 +72,7 @@ export default function UserMenu() {
   if (session === undefined || !csrfToken) return null;
 
   const user = session?.user;
-  const callbackUrl = typeof window !== "undefined" ? window.location.href : "/";
+  const callbackUrl = typeof window !== "undefined" ? window.location.href : withBase("/");
 
   // Compact label for the topbar: first word of `name`, falling back
   // to the local part of `email`, falling back to a generic. Full name
@@ -100,7 +101,7 @@ export default function UserMenu() {
           </span>
           <a
             className="um-btn um-btn-icon"
-            href="/settings/tokens"
+            href={withBase("/settings/tokens")}
             title="Access tokens for editor MCP"
           >
             <svg
@@ -119,7 +120,7 @@ export default function UserMenu() {
             </svg>
             <span className="sr-only">Access tokens</span>
           </a>
-          <form method="post" action="/api/auth/signout">
+          <form method="post" action={withBase("/api/auth/signout")}>
             <input type="hidden" name="csrfToken" value={csrfToken} />
             <input type="hidden" name="callbackUrl" value={callbackUrl} />
             <button type="submit" className="um-btn um-btn-icon" title="Sign out">
@@ -143,7 +144,7 @@ export default function UserMenu() {
           </form>
         </>
       ) : (
-        <form method="post" action="/api/auth/signin/github">
+        <form method="post" action={withBase("/api/auth/signin/github")}>
           <input type="hidden" name="csrfToken" value={csrfToken} />
           <input type="hidden" name="callbackUrl" value={callbackUrl} />
           <button type="submit" className="um-btn">

package/src/components/home/Hero.astro

@@ -1,4 +1,6 @@
 ---
+import { withBase } from "../../lib/base";
+
 interface Props {
   title?: string;
   subtitle?: string;
@@ -32,7 +34,7 @@ const {
     {logoUrl && (
       <img
         class="hero-logo"
-        src={logoUrl}
+        src={withBase(logoUrl)}
         alt=""
         aria-hidden="true"
         width={logoWidth}

package/src/components/home/ResumeRail.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { withBase } from "../../lib/base";
 import { useProgressAfterMount } from "../../lib/progress/useProgress";
 
 interface Tutorial {
@@ -40,7 +41,7 @@ export default function ResumeRail({ tutorials }: Props) {
   if (!state || !mostRecent) return null;
 
   return (
-    <a className="resume-rail" href={`/${mostRecent.slug}/${mostRecent.step}`}>
+    <a className="resume-rail" href={withBase(`/${mostRecent.slug}/${mostRecent.step}`)}>
       <span className="rr-prefix">Continue</span>
       <span className="rr-title">{mostRecent.title}</span>
       <span className="rr-step">/ {mostRecent.step}</span>

package/src/components/home/TutorialCard.astro

@@ -1,4 +1,5 @@
 ---
+import { withBase } from "../../lib/base";
 import type { TutorialEntry } from "../../lib/content";
 
 interface Props {
@@ -23,7 +24,7 @@ const slug = tutorial.id;
   data-card-slug={slug}
   data-popularity="0"
 >
-  <a href={`/${slug}`} class="card-link">
+  <a href={withBase(`/${slug}`)} class="card-link">
     <div class="card-body">
       <h3>{data.title}</h3>
       <p>{data.description}</p>

package/src/layouts/BaseLayout.astro

@@ -2,6 +2,7 @@
 import Footer from "../components/Footer.astro";
 import Navbar from "../components/Navbar.astro";
 import UserMenu from "../components/auth/UserMenu.astro";
+import { withBase } from "../lib/base";
 
 interface Props {
   title?: string;
@@ -33,6 +34,10 @@ 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;
   /**
    * Width of the page's content column. Drives the navbar + footer
    * alignment via the --hz-page-max-width CSS custom property so the
@@ -62,6 +67,7 @@ const {
   faviconUrl = "/favicon.svg",
   showFooter = true,
   repoUrl,
+  siteUrl,
   // 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
@@ -80,7 +86,7 @@ const desc = description ?? tagline;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href={faviconUrl} />
+    <link rel="icon" type="image/svg+xml" href={withBase(faviconUrl)} />
     <title>{pageTitle}</title>
     <meta name="description" content={desc} />
     <meta property="og:title" content={pageTitle} />
@@ -112,7 +118,13 @@ const desc = description ?? tagline;
     <div class="hz-page">
       <slot />
     </div>
-    {showFooter && <Footer repoUrl={repoUrl} />}
+    {/* Footer is fully overridable: pass `slot="footer"` from any page
+        wrapper to replace it entirely. With no override, the default
+        Footer renders, configurable via siteName/siteUrl/repoUrl. */}
+    {/* Footer content is configurable via siteName/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} 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,9 @@ interface Props {
   logoHeight?: number;
   faviconUrl?: string;
   repoUrl?: string;
+  siteUrl?: string;
+  /** Set false to drop the built-in footer and supply your own. */
+  showFooter?: boolean;
 }
 
 const {
@@ -33,6 +36,8 @@ const {
   logoHeight,
   faviconUrl,
   repoUrl,
+  siteUrl,
+  showFooter = true,
 } = Astro.props;
 
 const stepSlugs = steps.map((s) => parseStepId(s.id).stepSlug);
@@ -47,6 +52,8 @@ const stepSlugs = steps.map((s) => parseStepId(s.id).stepSlug);
   logoHeight={logoHeight}
   faviconUrl={faviconUrl}
   repoUrl={repoUrl}
+  siteUrl={siteUrl}
+  showFooter={showFooter}
 >
   <slot name="head" slot="head" />
   <div class="layout">

package/src/lib/base.ts

@@ -0,0 +1,31 @@
+/**
+ * Prefix an app-internal path with Astro's configured base path.
+ *
+ * Handzon emits a lot of root-absolute URLs in hand-written markup and
+ * client code (nav links, `/api/...` fetches, asset defaults). Astro
+ * auto-prefixes its own framework routes and `_astro/*` assets with
+ * `base`, but it can't rewrite strings we build by hand. Run every such
+ * path through `withBase` so the whole app honors a base path like
+ * `/tutorials` when one is set.
+ *
+ * For the default root deploy (`base` unset), `import.meta.env.BASE_URL`
+ * is `"/"`, so this is an identity transform — output is unchanged.
+ *
+ * `import.meta.env.BASE_URL` is resolved by the consumer's Astro build
+ * and is available in `.astro` frontmatter, `.tsx` components, and
+ * inline `<script>` tags, so one helper covers every call site.
+ *
+ * @example
+ *   withBase("/react-todo")       // "/react-todo"        (root)
+ *   withBase("/react-todo")       // "/tutorials/react-todo" (base "/tutorials")
+ *   withBase("/api/progress")     // base-aware fetch target
+ *   withBase("https://cdn/x.svg") // unchanged (absolute)
+ */
+export function withBase(path: string): string {
+  // Leave absolute, protocol-relative, and data/mailto/tel URLs alone so
+  // CDN-hosted logos and external links aren't mangled.
+  if (/^([a-z][a-z0-9+.-]*:|\/\/)/i.test(path)) return path;
+  const base = import.meta.env.BASE_URL; // "/" or e.g. "/tutorials/"
+  const rel = path.startsWith("/") ? path.slice(1) : path;
+  return base.endsWith("/") ? base + rel : `${base}/${rel}`;
+}

package/src/lib/progress/remote.ts

@@ -1,3 +1,4 @@
+import { withBase } from "../base";
 import {
   CHANNEL_NAME,
   emptyState,
@@ -181,7 +182,7 @@ export function createRemoteStore(): ProgressStore {
     const pending = readPending();
     if (pending.length === 0) return;
     try {
-      const res = await fetch("/api/progress", {
+      const res = await fetch(withBase("/api/progress"), {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(pending),
@@ -204,7 +205,7 @@ export function createRemoteStore(): ProgressStore {
     // On first mount, pull the server's snapshot and merge in.
     void (async () => {
       try {
-        const res = await fetch("/api/progress", { credentials: "same-origin" });
+        const res = await fetch(withBase("/api/progress"), { credentials: "same-origin" });
         if (!res.ok) return;
         const { entries } = (await res.json()) as {
           entries: Array<{ kind: string; scope: string; key: string; value: unknown }>;
@@ -224,7 +225,7 @@ export function createRemoteStore(): ProgressStore {
     // standard EventSource auto-reconnects on transient drops.
     if (typeof EventSource !== "undefined") {
       try {
-        const es = new EventSource("/api/progress/events", { withCredentials: true });
+        const es = new EventSource(withBase("/api/progress/events"), { withCredentials: true });
         es.addEventListener("message", (ev) => {
           try {
             const entry = JSON.parse(ev.data) as ProgressEntry;

package/src/pages/Home.astro

@@ -16,6 +16,9 @@ interface Props {
   logoHeight?: number;
   faviconUrl?: string;
   repoUrl?: string;
+  siteUrl?: 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 +34,8 @@ const {
   logoHeight,
   faviconUrl,
   repoUrl,
+  siteUrl,
+  showFooter = true,
   showResumeRail = true,
   emptyStateCommand = "pnpm handzon:new",
   pageSize = 9,
@@ -64,6 +69,8 @@ for (const t of tutorials) {
   logoHeight={logoHeight}
   faviconUrl={faviconUrl}
   repoUrl={repoUrl}
+  siteUrl={siteUrl}
+  showFooter={showFooter}
   nav="userMenu"
 >
   <slot name="head" slot="head" />
@@ -164,6 +171,7 @@ for (const t of tutorials) {
     // mount; Cache-Control: max-age=60 on the response handles SPA-like
     // navigations. Failures are silent — cards just show no numbers,
     // which is the desired state on Tier 1 anyway.
+    import { withBase } from "../lib/base.ts";
     type Stat = { slug: string; started: number; completed: number };
     function fmt(n: number): string {
       if (n < 1000) return String(n);
@@ -178,7 +186,7 @@ for (const t of tutorials) {
     }
     async function hydrateStats() {
       try {
-        const res = await fetch("/api/tutorials/stats", { credentials: "same-origin" });
+        const res = await fetch(withBase("/api/tutorials/stats"), { credentials: "same-origin" });
         if (!res.ok) return;
         const data = (await res.json()) as { stats: Stat[] };
         for (const stat of data.stats) {

package/src/pages/TutorialLanding.astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import { withBase } from "../lib/base.ts";
 import { getStepsForTutorial, parseStepId, sumDurations } from "../lib/content.ts";
 import type { TutorialEntry } from "../lib/content.ts";
 
@@ -12,6 +13,9 @@ interface Props {
   logoHeight?: number;
   faviconUrl?: string;
   repoUrl?: string;
+  siteUrl?: string;
+  /** Set false to drop the built-in footer and supply your own. */
+  showFooter?: boolean;
 }
 
 const {
@@ -23,6 +27,8 @@ const {
   logoHeight,
   faviconUrl,
   repoUrl,
+  siteUrl,
+  showFooter = true,
 } = Astro.props;
 const steps = await getStepsForTutorial(tutorial.id);
 const duration = tutorial.data.estimatedDuration ?? sumDurations(steps) ?? "";
@@ -38,10 +44,12 @@ const firstStepSlug = steps[0] ? parseStepId(steps[0].id).stepSlug : null;
   logoHeight={logoHeight}
   faviconUrl={faviconUrl}
   repoUrl={repoUrl}
+  siteUrl={siteUrl}
+  showFooter={showFooter}
 >
   <slot name="head" slot="head" />
   <div class="landing">
-    <a class="back" href="/">← All tutorials</a>
+    <a class="back" href={withBase("/")}>← All tutorials</a>
 
     <header class="hero">
       <div class="hero-meta">
@@ -55,7 +63,7 @@ const firstStepSlug = steps[0] ? parseStepId(steps[0].id).stepSlug : null;
 
       <div class="hero-actions">
         {firstStepSlug && (
-          <a class="cta" href={`/${tutorial.id}/${firstStepSlug}`} data-tutorial-slug={tutorial.id}>
+          <a class="cta" href={withBase(`/${tutorial.id}/${firstStepSlug}`)} data-tutorial-slug={tutorial.id}>
             <span class="cta-label">Start tutorial</span>
             <span class="cta-arrow" aria-hidden="true">→</span>
           </a>
@@ -73,7 +81,7 @@ const firstStepSlug = steps[0] ? parseStepId(steps[0].id).stepSlug : null;
       {tutorial.data.tags.length > 0 && (
         <div class="hero-tags" aria-label="Topics">
           {tutorial.data.tags.map((tag: string) => (
-            <a class="hero-tag" href={`/?tag=${encodeURIComponent(tag)}`}>#{tag}</a>
+            <a class="hero-tag" href={withBase(`/?tag=${encodeURIComponent(tag)}`)}>#{tag}</a>
           ))}
         </div>
       )}
@@ -93,7 +101,7 @@ const firstStepSlug = steps[0] ? parseStepId(steps[0].id).stepSlug : null;
           const { stepSlug } = parseStepId(s.id);
           return (
             <li>
-              <a href={`/${tutorial.id}/${stepSlug}`}>
+              <a href={withBase(`/${tutorial.id}/${stepSlug}`)}>
                 <span class="step-num">{String(i + 1).padStart(2, "0")}</span>
                 <span class="step-body">
                   <strong>{s.data.title}</strong>
@@ -111,6 +119,7 @@ const firstStepSlug = steps[0] ? parseStepId(steps[0].id).stepSlug : null;
 
   <script>
     // Resume from last visited if we have one.
+    import { withBase } from "../lib/base.ts";
     import { getStore } from "../lib/progress/local.ts";
     const cta = document.querySelector<HTMLAnchorElement>("[data-tutorial-slug]");
     if (cta) {
@@ -119,7 +128,7 @@ const firstStepSlug = steps[0] ? parseStepId(steps[0].id).stepSlug : null;
       const step = typeof last === "string" ? last : last?.step;
       if (step) {
         cta.textContent = `Continue from "${step}" →`;
-        cta.setAttribute("href", `/${slug}/${step}`);
+        cta.setAttribute("href", withBase(`/${slug}/${step}`));
       }
     }
   </script>

package/src/pages/TutorialStep.astro

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