handzon-core 0.13.3 → 0.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handzon-core",
-  "version": "0.13.3",
+  "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 { useEffect, useMemo } from "react";
-import {
-  type SimpleIcon,
-  siC,
-  siCplusplus,
-  siGnubash,
-  siGo,
-  siJavascript,
-  siMysql,
-  siPhp,
-  siPostgresql,
-  siPython,
-  siRuby,
-  siRust,
-  siSqlite,
-  siTypescript,
-} from "simple-icons";
 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(
@@ -112,7 +65,7 @@ export default function TrackSelector({ tracks, defaultTrack }: Props) {
                 </svg>
               ) : (
                 <span className="track-selector-fallback" aria-hidden="true">
-                  {fallbackText(track)}
+                  {fallbackTextForTrack(track)}
                 </span>
               )}
               <span>{track.label}</span>

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

@@ -53,12 +53,6 @@
   fill: currentColor;
 }
 
-.track-selector-icon-slot {
-  width: 0.95rem;
-  height: 0.95rem;
-  flex-shrink: 0;
-}
-
 .track-selector-fallback {
   display: inline-grid;
   place-items: center;