handzon-core 0.13.0 → 0.13.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "handzon-core",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.3",
|
|
4
4
|
"description": "Core framework for Handzon — layouts, components, content + AI libs, and server runtime (handlers, DB, auth, migration runner) consumed by Handzon scaffolds.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -57,6 +57,7 @@
|
|
|
57
57
|
"postgres": "^3.4.9",
|
|
58
58
|
"react-markdown": "^9.0.1",
|
|
59
59
|
"remark-gfm": "^4.0.0",
|
|
60
|
+
"simple-icons": "^16.22.0",
|
|
60
61
|
"unist-util-visit": "^5.0.0",
|
|
61
62
|
"zod": "^3.23.8"
|
|
62
63
|
},
|
|
@@ -32,11 +32,29 @@ const slug = tutorial.id;
|
|
|
32
32
|
<Progress tutorialSlug={slug} totalSteps={steps.length} client:load />
|
|
33
33
|
)}
|
|
34
34
|
{tutorial.data.tracks.length > 1 && (
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
<div class="track-selector-shell">
|
|
36
|
+
<section class="track-selector" aria-label="Tutorial track" data-track-fallback>
|
|
37
|
+
<div class="track-selector-list">
|
|
38
|
+
{tutorial.data.tracks.map((track: (typeof tutorial.data.tracks)[number]) => (
|
|
39
|
+
<button
|
|
40
|
+
type="button"
|
|
41
|
+
class="track-selector-option"
|
|
42
|
+
data-track-id={track.id}
|
|
43
|
+
data-active={track.id === (tutorial.data.defaultTrack ?? tutorial.data.tracks[0]?.id) ? "true" : "false"}
|
|
44
|
+
disabled
|
|
45
|
+
>
|
|
46
|
+
<span class="track-selector-icon-slot" aria-hidden="true"></span>
|
|
47
|
+
<span>{track.label}</span>
|
|
48
|
+
</button>
|
|
49
|
+
))}
|
|
50
|
+
</div>
|
|
51
|
+
</section>
|
|
52
|
+
<TrackSelector
|
|
53
|
+
tracks={tutorial.data.tracks}
|
|
54
|
+
defaultTrack={tutorial.data.defaultTrack}
|
|
55
|
+
client:only="react"
|
|
56
|
+
/>
|
|
57
|
+
</div>
|
|
40
58
|
)}
|
|
41
59
|
</div>
|
|
42
60
|
|
|
@@ -1,4 +1,20 @@
|
|
|
1
1
|
import { useEffect, useMemo } from "react";
|
|
2
|
+
import {
|
|
3
|
+
type SimpleIcon,
|
|
4
|
+
siC,
|
|
5
|
+
siCplusplus,
|
|
6
|
+
siGnubash,
|
|
7
|
+
siGo,
|
|
8
|
+
siJavascript,
|
|
9
|
+
siMysql,
|
|
10
|
+
siPhp,
|
|
11
|
+
siPostgresql,
|
|
12
|
+
siPython,
|
|
13
|
+
siRuby,
|
|
14
|
+
siRust,
|
|
15
|
+
siSqlite,
|
|
16
|
+
siTypescript,
|
|
17
|
+
} from "simple-icons";
|
|
2
18
|
import { useProgress } from "../lib/progress/useProgress";
|
|
3
19
|
import { resolveActiveTrack, type TrackOption, trackStyleText } from "../lib/tracks";
|
|
4
20
|
|
|
@@ -19,6 +35,38 @@ function applyTrackStyle(trackId: string | undefined) {
|
|
|
19
35
|
style.textContent = trackStyleText(trackId);
|
|
20
36
|
}
|
|
21
37
|
|
|
38
|
+
const TRACK_ICONS: Record<string, SimpleIcon> = {
|
|
39
|
+
bash: siGnubash,
|
|
40
|
+
c: siC,
|
|
41
|
+
"c++": siCplusplus,
|
|
42
|
+
cpp: siCplusplus,
|
|
43
|
+
go: siGo,
|
|
44
|
+
js: siJavascript,
|
|
45
|
+
javascript: siJavascript,
|
|
46
|
+
mysql: siMysql,
|
|
47
|
+
php: siPhp,
|
|
48
|
+
postgres: siPostgresql,
|
|
49
|
+
postgresql: siPostgresql,
|
|
50
|
+
py: siPython,
|
|
51
|
+
python: siPython,
|
|
52
|
+
rb: siRuby,
|
|
53
|
+
ruby: siRuby,
|
|
54
|
+
rust: siRust,
|
|
55
|
+
sqlite: siSqlite,
|
|
56
|
+
ts: siTypescript,
|
|
57
|
+
typescript: siTypescript,
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
function iconForTrack(track: TrackOption): SimpleIcon | undefined {
|
|
61
|
+
const id = track.id.toLowerCase();
|
|
62
|
+
const label = track.label.toLowerCase();
|
|
63
|
+
return TRACK_ICONS[id] ?? TRACK_ICONS[label];
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function fallbackText(track: TrackOption): string {
|
|
67
|
+
return (track.id || track.label).slice(0, 2).toUpperCase();
|
|
68
|
+
}
|
|
69
|
+
|
|
22
70
|
export default function TrackSelector({ tracks, defaultTrack }: Props) {
|
|
23
71
|
const { state, setPref } = useProgress();
|
|
24
72
|
const activeTrack = useMemo(
|
|
@@ -35,14 +83,20 @@ export default function TrackSelector({ tracks, defaultTrack }: Props) {
|
|
|
35
83
|
applyTrackStyle(activeTrack);
|
|
36
84
|
}, [activeTrack]);
|
|
37
85
|
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
document.querySelectorAll<HTMLElement>("[data-track-fallback]").forEach((el) => {
|
|
88
|
+
el.hidden = true;
|
|
89
|
+
});
|
|
90
|
+
}, []);
|
|
91
|
+
|
|
38
92
|
if (tracks.length < 2 || !activeTrack) return null;
|
|
39
93
|
|
|
40
94
|
return (
|
|
41
95
|
<section className="track-selector" aria-label="Tutorial track">
|
|
42
|
-
<div className="track-selector-label">Track</div>
|
|
43
96
|
<div className="track-selector-list">
|
|
44
97
|
{tracks.map((track) => {
|
|
45
98
|
const selected = track.id === activeTrack;
|
|
99
|
+
const icon = iconForTrack(track);
|
|
46
100
|
return (
|
|
47
101
|
<button
|
|
48
102
|
type="button"
|
|
@@ -52,7 +106,16 @@ export default function TrackSelector({ tracks, defaultTrack }: Props) {
|
|
|
52
106
|
aria-pressed={selected}
|
|
53
107
|
onClick={() => setPref("track", track.id)}
|
|
54
108
|
>
|
|
55
|
-
{
|
|
109
|
+
{icon ? (
|
|
110
|
+
<svg className="track-selector-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
111
|
+
<path d={icon.path} />
|
|
112
|
+
</svg>
|
|
113
|
+
) : (
|
|
114
|
+
<span className="track-selector-fallback" aria-hidden="true">
|
|
115
|
+
{fallbackText(track)}
|
|
116
|
+
</span>
|
|
117
|
+
)}
|
|
118
|
+
<span>{track.label}</span>
|
|
56
119
|
</button>
|
|
57
120
|
);
|
|
58
121
|
})}
|
|
@@ -7,10 +7,37 @@
|
|
|
7
7
|
* prerendered route happens to include BaseLayout.
|
|
8
8
|
*/
|
|
9
9
|
import UserMenuIsland from "./UserMenu.tsx";
|
|
10
|
+
|
|
11
|
+
const GITHUB_ICON_PATH =
|
|
12
|
+
"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";
|
|
10
13
|
---
|
|
11
|
-
<
|
|
14
|
+
<div class="user-menu-shell">
|
|
15
|
+
<div class="user-menu um-fallback" data-user-menu-fallback aria-hidden="true">
|
|
16
|
+
<button type="button" class="um-btn" disabled tabindex="-1">
|
|
17
|
+
<svg
|
|
18
|
+
class="um-gh"
|
|
19
|
+
viewBox="0 0 24 24"
|
|
20
|
+
width="14"
|
|
21
|
+
height="14"
|
|
22
|
+
fill="currentColor"
|
|
23
|
+
aria-hidden="true"
|
|
24
|
+
>
|
|
25
|
+
<path d={GITHUB_ICON_PATH} />
|
|
26
|
+
</svg>
|
|
27
|
+
<span>Sign in with GitHub</span>
|
|
28
|
+
</button>
|
|
29
|
+
</div>
|
|
30
|
+
<UserMenuIsland client:only="react" />
|
|
31
|
+
</div>
|
|
12
32
|
|
|
13
33
|
<style is:global>
|
|
34
|
+
.user-menu-shell {
|
|
35
|
+
display: grid;
|
|
36
|
+
}
|
|
37
|
+
.user-menu-shell > .user-menu,
|
|
38
|
+
.user-menu-shell > astro-island {
|
|
39
|
+
grid-area: 1 / 1;
|
|
40
|
+
}
|
|
14
41
|
.user-menu {
|
|
15
42
|
display: inline-flex;
|
|
16
43
|
align-items: center;
|
|
@@ -43,6 +70,12 @@ import UserMenuIsland from "./UserMenu.tsx";
|
|
|
43
70
|
white-space: nowrap;
|
|
44
71
|
}
|
|
45
72
|
.user-menu form { display: inline-flex; }
|
|
73
|
+
.um-fallback {
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
}
|
|
76
|
+
.um-fallback[hidden] {
|
|
77
|
+
display: none;
|
|
78
|
+
}
|
|
46
79
|
.um-btn {
|
|
47
80
|
display: inline-flex;
|
|
48
81
|
align-items: center;
|
|
@@ -59,6 +92,10 @@ import UserMenuIsland from "./UserMenu.tsx";
|
|
|
59
92
|
border-color: var(--color-accent);
|
|
60
93
|
color: var(--color-accent);
|
|
61
94
|
}
|
|
95
|
+
.um-btn:disabled {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
cursor: default;
|
|
98
|
+
}
|
|
62
99
|
.um-btn-icon {
|
|
63
100
|
padding: 0.3rem 0.45rem;
|
|
64
101
|
}
|
|
@@ -68,6 +68,13 @@ export default function UserMenu() {
|
|
|
68
68
|
};
|
|
69
69
|
}, []);
|
|
70
70
|
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (session === undefined) return;
|
|
73
|
+
document.querySelectorAll<HTMLElement>("[data-user-menu-fallback]").forEach((el) => {
|
|
74
|
+
el.hidden = true;
|
|
75
|
+
});
|
|
76
|
+
}, [session]);
|
|
77
|
+
|
|
71
78
|
// Loading or auth not wired → render nothing.
|
|
72
79
|
if (session === undefined || !csrfToken) return null;
|
|
73
80
|
|
|
@@ -1,28 +1,36 @@
|
|
|
1
|
-
.track-selector {
|
|
1
|
+
.track-selector-shell {
|
|
2
2
|
display: grid;
|
|
3
|
-
gap: 0.5rem;
|
|
4
|
-
margin-top: 1rem;
|
|
5
|
-
padding-top: 1rem;
|
|
6
|
-
border-top: var(--border-default, 2px) solid var(--color-border);
|
|
7
3
|
}
|
|
8
4
|
|
|
9
|
-
.track-selector-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
.track-selector-shell > .track-selector,
|
|
6
|
+
.track-selector-shell > astro-island {
|
|
7
|
+
grid-area: 1 / 1;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.track-selector {
|
|
11
|
+
display: grid;
|
|
12
|
+
margin-top: 0.75rem;
|
|
13
|
+
padding-top: 0.75rem;
|
|
14
|
+
border-top: var(--border-default, 2px) solid var(--color-border);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.track-selector-list {
|
|
18
18
|
display: flex;
|
|
19
|
-
|
|
20
|
-
gap: 0
|
|
19
|
+
width: 100%;
|
|
20
|
+
gap: 0;
|
|
21
|
+
--track-segment-border: var(--border-default, 2px);
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.track-selector-option {
|
|
24
25
|
appearance: none;
|
|
25
|
-
|
|
26
|
+
position: relative;
|
|
27
|
+
flex: 1 1 0;
|
|
28
|
+
min-width: 0;
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
gap: 0.35rem;
|
|
33
|
+
border: var(--track-segment-border) solid var(--color-border);
|
|
26
34
|
background: var(--color-bg);
|
|
27
35
|
color: var(--color-fg);
|
|
28
36
|
cursor: pointer;
|
|
@@ -30,14 +38,67 @@
|
|
|
30
38
|
font-family: var(--font-mono);
|
|
31
39
|
font-size: 0.75em;
|
|
32
40
|
line-height: 1;
|
|
33
|
-
padding: 0.
|
|
41
|
+
padding: 0.5rem 0.45rem;
|
|
42
|
+
text-align: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.track-selector-option + .track-selector-option {
|
|
46
|
+
margin-left: calc(var(--track-segment-border) * -1);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.track-selector-icon {
|
|
50
|
+
width: 0.95rem;
|
|
51
|
+
height: 0.95rem;
|
|
52
|
+
flex-shrink: 0;
|
|
53
|
+
fill: currentColor;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.track-selector-icon-slot {
|
|
57
|
+
width: 0.95rem;
|
|
58
|
+
height: 0.95rem;
|
|
59
|
+
flex-shrink: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.track-selector-fallback {
|
|
63
|
+
display: inline-grid;
|
|
64
|
+
place-items: center;
|
|
65
|
+
width: 0.95rem;
|
|
66
|
+
height: 0.95rem;
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
border: 1px solid currentColor;
|
|
69
|
+
font-size: 0.65em;
|
|
70
|
+
font-weight: 700;
|
|
71
|
+
line-height: 1;
|
|
34
72
|
}
|
|
35
73
|
|
|
36
74
|
.track-selector-option:hover {
|
|
75
|
+
z-index: 1;
|
|
37
76
|
border-color: var(--color-accent);
|
|
38
77
|
}
|
|
39
78
|
|
|
40
79
|
.track-selector-option[data-active="true"] {
|
|
80
|
+
z-index: 2;
|
|
81
|
+
background: var(--color-accent);
|
|
82
|
+
border-color: var(--color-accent);
|
|
83
|
+
color: var(--color-accent-fg);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[data-track-fallback] .track-selector-option {
|
|
87
|
+
cursor: default;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
[data-track-fallback] .track-selector-option:disabled {
|
|
91
|
+
opacity: 1;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
html[data-track] [data-track-fallback] .track-selector-option {
|
|
95
|
+
background: var(--color-bg);
|
|
96
|
+
border-color: var(--color-border);
|
|
97
|
+
color: var(--color-fg);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
html[data-track="py"] [data-track-fallback] .track-selector-option[data-track-id="py"],
|
|
101
|
+
html[data-track="ts"] [data-track-fallback] .track-selector-option[data-track-id="ts"] {
|
|
41
102
|
background: var(--color-accent);
|
|
42
103
|
border-color: var(--color-accent);
|
|
43
104
|
color: var(--color-accent-fg);
|