handzon-core 0.13.0 → 0.13.2
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.2",
|
|
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
|
-
import { useEffect, useMemo } from "react";
|
|
1
|
+
import { type CSSProperties, 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,21 @@ 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
|
|
111
|
+
className="track-selector-icon"
|
|
112
|
+
viewBox="0 0 24 24"
|
|
113
|
+
aria-hidden="true"
|
|
114
|
+
style={{ "--track-icon-color": `#${icon.hex}` } as CSSProperties}
|
|
115
|
+
>
|
|
116
|
+
<path d={icon.path} />
|
|
117
|
+
</svg>
|
|
118
|
+
) : (
|
|
119
|
+
<span className="track-selector-fallback" aria-hidden="true">
|
|
120
|
+
{fallbackText(track)}
|
|
121
|
+
</span>
|
|
122
|
+
)}
|
|
123
|
+
<span>{track.label}</span>
|
|
56
124
|
</button>
|
|
57
125
|
);
|
|
58
126
|
})}
|
|
@@ -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: var(--track-icon-color, 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);
|