handzon-core 0.13.2 → 0.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handzon-core",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "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/collections.ts

@@ -20,6 +20,7 @@ import { join, relative, resolve } from "node:path";
 import type { Loader } from "astro/loaders";
 import { glob } from "astro/loaders";
 import { createHeroMediaSchema } from "./lib/heroMedia";
+import { createTutorialIconSchema } from "./lib/tutorialIcon";
 
 const TUTORIALS_REL = "src/content/tutorials";
 const INDEX_FILE = "_index.json";
@@ -486,7 +487,7 @@ export function tutorialsSchema({ image }: { image: () => import("astro/zod").Zo
       prerequisites: z.array(z.string()).default([]),
       nextTutorial: z.string().optional(),
       cover: image().optional(),
-      icon: z.union([z.string(), image()]).optional(),
+      icon: createTutorialIconSchema(z, image).optional(),
       steps: z.array(z.string()).optional(),
       gated: z.boolean().default(false),
       showProgress: z.boolean().default(true),

package/src/components/Sidebar.astro

@@ -2,6 +2,7 @@
 import { withBase } from "../lib/base";
 import type { TutorialEntry, StepEntry } from "../lib/content";
 import { parseStepId } from "../lib/content";
+import { fallbackTextForTrack, iconForTrack } from "../lib/track-icons";
 import Progress from "./Progress.tsx";
 import TrackSelector from "./TrackSelector.tsx";
 
@@ -35,18 +36,29 @@ const slug = tutorial.id;
       <div class="track-selector-shell">
         <section class="track-selector" aria-label="Tutorial track" data-track-fallback>
           <div class="track-selector-list">
-            {tutorial.data.tracks.map((track: (typeof tutorial.data.tracks)[number]) => (
-              <button
-                type="button"
-                class="track-selector-option"
-                data-track-id={track.id}
-                data-active={track.id === (tutorial.data.defaultTrack ?? tutorial.data.tracks[0]?.id) ? "true" : "false"}
-                disabled
-              >
-                <span class="track-selector-icon-slot" aria-hidden="true"></span>
-                <span>{track.label}</span>
-              </button>
-            ))}
+            {tutorial.data.tracks.map((track: (typeof tutorial.data.tracks)[number]) => {
+              const icon = iconForTrack(track);
+              return (
+                <button
+                  type="button"
+                  class="track-selector-option"
+                  data-track-id={track.id}
+                  data-active={track.id === (tutorial.data.defaultTrack ?? tutorial.data.tracks[0]?.id) ? "true" : "false"}
+                  disabled
+                >
+                  {icon ? (
+                    <svg class="track-selector-icon" viewBox="0 0 24 24" aria-hidden="true">
+                      <path d={icon.path} />
+                    </svg>
+                  ) : (
+                    <span class="track-selector-fallback" aria-hidden="true">
+                      {fallbackTextForTrack(track)}
+                    </span>
+                  )}
+                  <span>{track.label}</span>
+                </button>
+              );
+            })}
           </div>
         </section>
         <TrackSelector

package/src/components/TrackSelector.tsx

@@ -1,21 +1,6 @@
-import { type CSSProperties, useEffect, useMemo } from "react";
-import {
-  type SimpleIcon,
-  siC,
-  siCplusplus,
-  siGnubash,
-  siGo,
-  siJavascript,
-  siMysql,
-  siPhp,
-  siPostgresql,
-  siPython,
-  siRuby,
-  siRust,
-  siSqlite,
-  siTypescript,
-} from "simple-icons";
+import { useEffect, useMemo } from "react";
 import { useProgress } from "../lib/progress/useProgress";
+import { fallbackTextForTrack, iconForTrack } from "../lib/track-icons";
 import { resolveActiveTrack, type TrackOption, trackStyleText } from "../lib/tracks";
 
 interface Props {
@@ -35,38 +20,6 @@ function applyTrackStyle(trackId: string | undefined) {
   style.textContent = trackStyleText(trackId);
 }
 
-const TRACK_ICONS: Record<string, SimpleIcon> = {
-  bash: siGnubash,
-  c: siC,
-  "c++": siCplusplus,
-  cpp: siCplusplus,
-  go: siGo,
-  js: siJavascript,
-  javascript: siJavascript,
-  mysql: siMysql,
-  php: siPhp,
-  postgres: siPostgresql,
-  postgresql: siPostgresql,
-  py: siPython,
-  python: siPython,
-  rb: siRuby,
-  ruby: siRuby,
-  rust: siRust,
-  sqlite: siSqlite,
-  ts: siTypescript,
-  typescript: siTypescript,
-};
-
-function iconForTrack(track: TrackOption): SimpleIcon | undefined {
-  const id = track.id.toLowerCase();
-  const label = track.label.toLowerCase();
-  return TRACK_ICONS[id] ?? TRACK_ICONS[label];
-}
-
-function fallbackText(track: TrackOption): string {
-  return (track.id || track.label).slice(0, 2).toUpperCase();
-}
-
 export default function TrackSelector({ tracks, defaultTrack }: Props) {
   const { state, setPref } = useProgress();
   const activeTrack = useMemo(
@@ -107,17 +60,12 @@ export default function TrackSelector({ tracks, defaultTrack }: Props) {
               onClick={() => setPref("track", track.id)}
             >
               {icon ? (
-                <svg
-                  className="track-selector-icon"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  style={{ "--track-icon-color": `#${icon.hex}` } as CSSProperties}
-                >
+                <svg className="track-selector-icon" viewBox="0 0 24 24" aria-hidden="true">
                   <path d={icon.path} />
                 </svg>
               ) : (
                 <span className="track-selector-fallback" aria-hidden="true">
-                  {fallbackText(track)}
+                  {fallbackTextForTrack(track)}
                 </span>
               )}
               <span>{track.label}</span>

package/src/components/auth/UserMenu.astro

@@ -7,10 +7,37 @@
  * prerendered route happens to include BaseLayout.
  */
 import UserMenuIsland from "./UserMenu.tsx";
+
+const GITHUB_ICON_PATH =
+  "M12 .5C5.65.5.5 5.65 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.02c-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.7 1.25 3.36.96.1-.74.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.45.11-3.03 0 0 .96-.31 3.15 1.17a10.94 10.94 0 0 1 5.76 0c2.19-1.48 3.15-1.17 3.15-1.17.62 1.58.23 2.74.11 3.03.74.8 1.18 1.82 1.18 3.07 0 4.4-2.69 5.37-5.25 5.65.41.35.78 1.04.78 2.11v3.13c0 .3.21.66.79.55C20.71 21.39 24 17.08 24 12 24 5.65 18.85.5 12 .5z";
 ---
-<UserMenuIsland client:only="react" />
+<div class="user-menu-shell">
+  <div class="user-menu um-fallback" data-user-menu-fallback aria-hidden="true">
+    <button type="button" class="um-btn" disabled tabindex="-1">
+      <svg
+        class="um-gh"
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d={GITHUB_ICON_PATH} />
+      </svg>
+      <span>Sign in with GitHub</span>
+    </button>
+  </div>
+  <UserMenuIsland client:only="react" />
+</div>
 
 <style is:global>
+  .user-menu-shell {
+    display: grid;
+  }
+  .user-menu-shell > .user-menu,
+  .user-menu-shell > astro-island {
+    grid-area: 1 / 1;
+  }
   .user-menu {
     display: inline-flex;
     align-items: center;
@@ -43,6 +70,12 @@ import UserMenuIsland from "./UserMenu.tsx";
     white-space: nowrap;
   }
   .user-menu form { display: inline-flex; }
+  .um-fallback {
+    pointer-events: none;
+  }
+  .um-fallback[hidden] {
+    display: none;
+  }
   .um-btn {
     display: inline-flex;
     align-items: center;
@@ -59,6 +92,10 @@ import UserMenuIsland from "./UserMenu.tsx";
     border-color: var(--color-accent);
     color: var(--color-accent);
   }
+  .um-btn:disabled {
+    opacity: 1;
+    cursor: default;
+  }
   .um-btn-icon {
     padding: 0.3rem 0.45rem;
   }

package/src/components/auth/UserMenu.tsx

@@ -68,6 +68,13 @@ export default function UserMenu() {
     };
   }, []);
 
+  useEffect(() => {
+    if (session === undefined) return;
+    document.querySelectorAll<HTMLElement>("[data-user-menu-fallback]").forEach((el) => {
+      el.hidden = true;
+    });
+  }, [session]);
+
   // Loading or auth not wired → render nothing.
   if (session === undefined || !csrfToken) return null;
 

package/src/lib/track-icons.ts

@@ -0,0 +1,49 @@
+import {
+  type SimpleIcon,
+  siC,
+  siCplusplus,
+  siGnubash,
+  siGo,
+  siJavascript,
+  siMysql,
+  siPhp,
+  siPostgresql,
+  siPython,
+  siRuby,
+  siRust,
+  siSqlite,
+  siTypescript,
+} from "simple-icons";
+import type { TrackOption } from "./tracks";
+
+const TRACK_ICONS: Record<string, SimpleIcon> = {
+  bash: siGnubash,
+  c: siC,
+  "c++": siCplusplus,
+  cpp: siCplusplus,
+  go: siGo,
+  js: siJavascript,
+  javascript: siJavascript,
+  mysql: siMysql,
+  php: siPhp,
+  postgres: siPostgresql,
+  postgresql: siPostgresql,
+  py: siPython,
+  python: siPython,
+  rb: siRuby,
+  ruby: siRuby,
+  rust: siRust,
+  sqlite: siSqlite,
+  ts: siTypescript,
+  typescript: siTypescript,
+};
+
+export function iconForTrack(track: TrackOption): SimpleIcon | undefined {
+  const id = track.id.toLowerCase();
+  const label = track.label.toLowerCase();
+  return TRACK_ICONS[id] ?? TRACK_ICONS[label];
+}
+
+export function fallbackTextForTrack(track: TrackOption): string {
+  return (track.id || track.label).slice(0, 2).toUpperCase();
+}

package/src/lib/tutorialIcon.ts

@@ -0,0 +1,10 @@
+import type { ZodString, ZodTypeAny } from "zod";
+
+type ZodLike = {
+  string: () => ZodString;
+  union: <T extends readonly [ZodTypeAny, ZodTypeAny, ...ZodTypeAny[]]>(schemas: T) => ZodTypeAny;
+};
+
+export function createTutorialIconSchema(z: ZodLike, image: () => ZodTypeAny) {
+  return z.union([image(), z.string()]);
+}

package/src/pages/TutorialLanding.astro

@@ -212,9 +212,9 @@ const coverUrl = tutorial.data.cover?.src;
   }
   .hero-with-cover {
     display: grid;
-    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
-    gap: clamp(1.5rem, 4vw, 3rem);
-    align-items: stretch;
+    grid-template-columns: 1fr;
+    gap: clamp(1.5rem, 4vw, 2rem);
+    align-items: start;
   }
   .hero-copy {
     min-width: 0;
@@ -243,7 +243,8 @@ const coverUrl = tutorial.data.cover?.src;
     line-height: 1;
   }
   .hero-media {
-    min-height: 100%;
+    order: -1;
+    aspect-ratio: 16 / 9;
     border: var(--border-default, 2px) solid var(--color-border);
     background: var(--color-surface);
     overflow: hidden;
@@ -252,7 +253,6 @@ const coverUrl = tutorial.data.cover?.src;
   .hero-cover {
     width: 100%;
     height: 100%;
-    min-height: 18rem;
     object-fit: cover;
     display: block;
     filter: saturate(0.95) contrast(1.06);
@@ -447,9 +447,6 @@ const coverUrl = tutorial.data.cover?.src;
   }
   @media (max-width: 640px) {
     .hero { padding: 1.5rem 1.25rem 1.75rem; }
-    .hero-with-cover { grid-template-columns: 1fr; }
-    .hero-media { order: -1; }
-    .hero-cover { min-height: 12rem; }
     .step-list a { grid-template-columns: auto 1fr auto; padding: 0.75rem; }
     .step-chevron { display: none; }
   }

package/styles/components/track-selector.css

@@ -50,13 +50,7 @@
   width: 0.95rem;
   height: 0.95rem;
   flex-shrink: 0;
-  fill: var(--track-icon-color, currentColor);
-}
-
-.track-selector-icon-slot {
-  width: 0.95rem;
-  height: 0.95rem;
-  flex-shrink: 0;
+  fill: currentColor;
 }
 
 .track-selector-fallback {