@tomehq/theme 0.2.3 → 0.2.5

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.
@@ -1,509 +0,0 @@
1
- // src/entry.tsx
2
- import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
3
- import { createRoot } from "react-dom/client";
4
-
5
- // src/Shell.tsx
6
- import { useState, useEffect, useRef, useMemo } from "react";
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- var THEMES = {
9
- amber: {
10
- dark: {
11
- bg: "#09090b",
12
- sf: "#111114",
13
- sfH: "#18181c",
14
- bd: "#1e1e24",
15
- tx: "#e4e4e7",
16
- tx2: "#a1a1aa",
17
- txM: "#919199",
18
- ac: "#e8a845",
19
- acD: "rgba(232,168,69,0.12)",
20
- acT: "#fbbf24",
21
- cdBg: "#0c0c0f",
22
- cdTx: "#c4c4cc",
23
- sbBg: "#0c0c0e",
24
- hdBg: "rgba(9,9,11,0.85)"
25
- },
26
- light: {
27
- bg: "#fafaf9",
28
- sf: "#ffffff",
29
- sfH: "#f5f5f4",
30
- bd: "#e7e5e4",
31
- tx: "#1c1917",
32
- tx2: "#57534e",
33
- txM: "#706b66",
34
- ac: "#96640a",
35
- acD: "rgba(150,100,10,0.08)",
36
- acT: "#7a5208",
37
- cdBg: "#f5f3f0",
38
- cdTx: "#2c2520",
39
- sbBg: "#f5f5f3",
40
- hdBg: "rgba(250,250,249,0.85)"
41
- },
42
- fonts: { heading: "Instrument Serif", body: "DM Sans", code: "JetBrains Mono" }
43
- },
44
- editorial: {
45
- dark: {
46
- bg: "#080c1f",
47
- sf: "#0e1333",
48
- sfH: "#141940",
49
- bd: "#1a2050",
50
- tx: "#e8e6f0",
51
- tx2: "#b5b1c8",
52
- txM: "#9490ae",
53
- ac: "#ff6b4a",
54
- acD: "rgba(255,107,74,0.1)",
55
- acT: "#ff8a70",
56
- cdBg: "#0a0e27",
57
- cdTx: "#b8b4cc",
58
- sbBg: "#0a0e27",
59
- hdBg: "rgba(8,12,31,0.9)"
60
- },
61
- light: {
62
- bg: "#f6f4f0",
63
- sf: "#ffffff",
64
- sfH: "#eeece6",
65
- bd: "#ddd9d0",
66
- tx: "#1a1716",
67
- tx2: "#4a443e",
68
- txM: "#706960",
69
- ac: "#b83d22",
70
- acD: "rgba(184,61,34,0.07)",
71
- acT: "#9c3019",
72
- cdBg: "#edeae4",
73
- cdTx: "#3a3530",
74
- sbBg: "#f0ede8",
75
- hdBg: "rgba(246,244,240,0.92)"
76
- },
77
- fonts: { heading: "Cormorant Garamond", body: "Bricolage Grotesque", code: "Fira Code" }
78
- }
79
- };
80
- var Icon = ({ d, size = 16 }) => /* @__PURE__ */ jsx(
81
- "svg",
82
- {
83
- width: size,
84
- height: size,
85
- viewBox: "0 0 24 24",
86
- fill: "none",
87
- stroke: "currentColor",
88
- strokeWidth: "1.5",
89
- strokeLinecap: "round",
90
- strokeLinejoin: "round",
91
- children: /* @__PURE__ */ jsx("path", { d })
92
- }
93
- );
94
- var SearchIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3" });
95
- var ChevRight = () => /* @__PURE__ */ jsx(Icon, { d: "M9 18l6-6-6-6", size: 14 });
96
- var ChevDown = () => /* @__PURE__ */ jsx(Icon, { d: "M6 9l6 6 6-6", size: 14 });
97
- var MenuIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M3 12h18M3 6h18M3 18h18", size: 20 });
98
- var XIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M18 6L6 18M6 6l12 12", size: 18 });
99
- var MoonIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" });
100
- var SunIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" });
101
- var ArrowLeft = () => /* @__PURE__ */ jsx(Icon, { d: "M19 12H5M12 19l-7-7 7-7", size: 14 });
102
- var ArrowRight = () => /* @__PURE__ */ jsx(Icon, { d: "M5 12h14M12 5l7 7-7 7", size: 14 });
103
- function Shell({
104
- config: config2,
105
- navigation: navigation2,
106
- currentPageId,
107
- pageHtml,
108
- pageTitle,
109
- pageDescription,
110
- headings,
111
- onNavigate,
112
- allPages
113
- }) {
114
- const [isDark, setDark] = useState(true);
115
- const [sbOpen, setSb] = useState(true);
116
- const [searchOpen, setSearch] = useState(false);
117
- const [expanded, setExpanded] = useState(navigation2.map((n) => n.section));
118
- const contentRef = useRef(null);
119
- const [wide, setWide] = useState(true);
120
- const preset = config2.theme?.preset || "amber";
121
- const t = THEMES[preset]?.[isDark ? "dark" : "light"] || THEMES.amber.dark;
122
- const fonts = THEMES[preset]?.fonts || THEMES.amber.fonts;
123
- useEffect(() => {
124
- const c = () => setWide(window.innerWidth > 1100);
125
- c();
126
- window.addEventListener("resize", c);
127
- return () => window.removeEventListener("resize", c);
128
- }, []);
129
- useEffect(() => {
130
- contentRef.current?.scrollTo(0, 0);
131
- }, [currentPageId]);
132
- useEffect(() => {
133
- const h = (e) => {
134
- if ((e.metaKey || e.ctrlKey) && e.key === "k") {
135
- e.preventDefault();
136
- setSearch(true);
137
- }
138
- if (e.key === "Escape") setSearch(false);
139
- };
140
- window.addEventListener("keydown", h);
141
- return () => window.removeEventListener("keydown", h);
142
- }, []);
143
- const allNavPages = navigation2.flatMap((g) => g.pages);
144
- const idx = allNavPages.findIndex((p) => p.id === currentPageId);
145
- const prev = idx > 0 ? allNavPages[idx - 1] : null;
146
- const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : null;
147
- const togSec = (s) => setExpanded((p) => p.includes(s) ? p.filter((x) => x !== s) : [...p, s]);
148
- const cssVars = {
149
- "--bg": t.bg,
150
- "--sf": t.sf,
151
- "--sfH": t.sfH,
152
- "--bd": t.bd,
153
- "--tx": t.tx,
154
- "--tx2": t.tx2,
155
- "--txM": t.txM,
156
- "--ac": t.ac,
157
- "--acD": t.acD,
158
- "--acT": t.acT,
159
- "--cdBg": t.cdBg,
160
- "--cdTx": t.cdTx,
161
- "--sbBg": t.sbBg,
162
- "--hdBg": t.hdBg,
163
- "--font-heading": `"${fonts.heading}", serif`,
164
- "--font-body": `"${fonts.body}", sans-serif`,
165
- "--font-code": `"${fonts.code}", monospace`
166
- };
167
- return /* @__PURE__ */ jsxs("div", { style: { ...cssVars, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", minHeight: "100vh" }, children: [
168
- searchOpen && /* @__PURE__ */ jsx(
169
- SearchModal,
170
- {
171
- allPages,
172
- onNavigate: (id) => {
173
- onNavigate(id);
174
- setSearch(false);
175
- },
176
- onClose: () => setSearch(false)
177
- }
178
- ),
179
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", height: "100vh" }, children: [
180
- /* @__PURE__ */ jsxs("aside", { style: {
181
- width: sbOpen ? 260 : 0,
182
- minWidth: sbOpen ? 260 : 0,
183
- background: "var(--sbBg)",
184
- borderRight: "1px solid var(--bd)",
185
- display: "flex",
186
- flexDirection: "column",
187
- transition: "width .2s, min-width .2s",
188
- overflow: "hidden"
189
- }, children: [
190
- /* @__PURE__ */ jsx("div", { style: { padding: "16px 18px", display: "flex", alignItems: "center", gap: 8, borderBottom: "1px solid var(--bd)" }, children: /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-heading)", fontSize: 20, fontWeight: 700, fontStyle: "italic" }, children: config2.name }) }),
191
- /* @__PURE__ */ jsx("div", { style: { padding: "10px 12px" }, children: /* @__PURE__ */ jsxs("button", { onClick: () => setSearch(true), style: {
192
- display: "flex",
193
- alignItems: "center",
194
- gap: 8,
195
- width: "100%",
196
- background: "var(--cdBg)",
197
- border: "1px solid var(--bd)",
198
- borderRadius: 6,
199
- padding: "7px 10px",
200
- cursor: "pointer",
201
- color: "var(--txM)",
202
- fontSize: 13,
203
- fontFamily: "var(--font-body)"
204
- }, children: [
205
- /* @__PURE__ */ jsx(SearchIcon, {}),
206
- /* @__PURE__ */ jsx("span", { style: { flex: 1, textAlign: "left" }, children: "Search..." }),
207
- /* @__PURE__ */ jsx("kbd", { style: { fontFamily: "var(--font-code)", fontSize: 10, background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 3, padding: "1px 5px" }, children: "\u2318K" })
208
- ] }) }),
209
- /* @__PURE__ */ jsx("nav", { style: { flex: 1, overflow: "auto", padding: "4px 8px 16px" }, children: navigation2.map((sec) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 4 }, children: [
210
- /* @__PURE__ */ jsxs("button", { onClick: () => togSec(sec.section), style: {
211
- display: "flex",
212
- alignItems: "center",
213
- gap: 6,
214
- width: "100%",
215
- background: "none",
216
- border: "none",
217
- padding: "6px 8px",
218
- cursor: "pointer",
219
- borderRadius: 4,
220
- color: "var(--txM)",
221
- fontSize: 11,
222
- fontWeight: 600,
223
- textTransform: "uppercase",
224
- letterSpacing: ".06em",
225
- fontFamily: "var(--font-body)"
226
- }, children: [
227
- expanded.includes(sec.section) ? /* @__PURE__ */ jsx(ChevDown, {}) : /* @__PURE__ */ jsx(ChevRight, {}),
228
- sec.section
229
- ] }),
230
- expanded.includes(sec.section) && /* @__PURE__ */ jsx("div", { style: { paddingLeft: 8 }, children: sec.pages.map((p) => {
231
- const active = currentPageId === p.id;
232
- return /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(p.id), style: {
233
- display: "flex",
234
- alignItems: "center",
235
- gap: 8,
236
- width: "100%",
237
- textAlign: "left",
238
- background: active ? "var(--acD)" : "none",
239
- border: "none",
240
- borderRadius: 5,
241
- padding: "6px 10px",
242
- cursor: "pointer",
243
- color: active ? "var(--ac)" : "var(--tx2)",
244
- fontSize: 13,
245
- fontWeight: active ? 500 : 400,
246
- fontFamily: "var(--font-body)",
247
- transition: "background .1s"
248
- }, children: p.title }, p.id);
249
- }) })
250
- ] }, sec.section)) }),
251
- /* @__PURE__ */ jsxs("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--bd)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
252
- /* @__PURE__ */ jsx("button", { onClick: () => setDark((d) => !d), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: isDark ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {}) }),
253
- /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)" }, children: "v0.1.0" })
254
- ] })
255
- ] }),
256
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
257
- /* @__PURE__ */ jsxs("header", { style: {
258
- display: "flex",
259
- alignItems: "center",
260
- gap: 12,
261
- padding: "10px 24px",
262
- borderBottom: "1px solid var(--bd)",
263
- background: "var(--hdBg)",
264
- backdropFilter: "blur(12px)"
265
- }, children: [
266
- /* @__PURE__ */ jsx("button", { onClick: () => setSb(!sbOpen), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: sbOpen ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {}) }),
267
- /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--txM)" }, children: navigation2.map((s) => {
268
- const f = s.pages.find((p) => p.id === currentPageId);
269
- if (!f) return null;
270
- return /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
271
- /* @__PURE__ */ jsx("span", { children: s.section }),
272
- /* @__PURE__ */ jsx(ChevRight, {}),
273
- /* @__PURE__ */ jsx("span", { style: { color: "var(--tx)" }, children: f.title })
274
- ] }, s.section);
275
- }) })
276
- ] }),
277
- /* @__PURE__ */ jsxs("div", { ref: contentRef, style: { flex: 1, overflow: "auto", display: "flex" }, children: [
278
- /* @__PURE__ */ jsxs("main", { style: { flex: 1, maxWidth: 760, padding: "40px 48px 80px", margin: "0 auto" }, children: [
279
- /* @__PURE__ */ jsx("h1", { style: { fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }, children: pageTitle }),
280
- pageDescription && /* @__PURE__ */ jsx("p", { style: { fontSize: 16, color: "var(--tx2)", lineHeight: 1.6, marginBottom: 32 }, children: pageDescription }),
281
- /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--bd)", paddingTop: 28 }, children: /* @__PURE__ */ jsx(
282
- "div",
283
- {
284
- className: "tome-content",
285
- dangerouslySetInnerHTML: { __html: pageHtml }
286
- }
287
- ) }),
288
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: 16 }, children: [
289
- prev ? /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(prev.id), style: {
290
- display: "flex",
291
- alignItems: "center",
292
- gap: 8,
293
- background: "none",
294
- border: "1px solid var(--bd)",
295
- borderRadius: 6,
296
- padding: "10px 16px",
297
- cursor: "pointer",
298
- color: "var(--tx2)",
299
- fontSize: 13,
300
- fontFamily: "var(--font-body)"
301
- }, children: [
302
- /* @__PURE__ */ jsx(ArrowLeft, {}),
303
- " ",
304
- prev.title
305
- ] }) : /* @__PURE__ */ jsx("div", {}),
306
- next ? /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(next.id), style: {
307
- display: "flex",
308
- alignItems: "center",
309
- gap: 8,
310
- background: "none",
311
- border: "1px solid var(--bd)",
312
- borderRadius: 6,
313
- padding: "10px 16px",
314
- cursor: "pointer",
315
- color: "var(--tx2)",
316
- fontSize: 13,
317
- fontFamily: "var(--font-body)"
318
- }, children: [
319
- next.title,
320
- " ",
321
- /* @__PURE__ */ jsx(ArrowRight, {})
322
- ] }) : /* @__PURE__ */ jsx("div", {})
323
- ] })
324
- ] }),
325
- headings.length > 0 && wide && /* @__PURE__ */ jsxs("aside", { style: { width: 200, padding: "40px 16px 40px 0", position: "sticky", top: 0, alignSelf: "flex-start", flexShrink: 0 }, children: [
326
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--txM)", marginBottom: 12 }, children: "On this page" }),
327
- headings.map((h, i) => /* @__PURE__ */ jsx("a", { href: `#${h.id}`, style: {
328
- display: "block",
329
- fontSize: 12.5,
330
- color: "var(--txM)",
331
- textDecoration: "none",
332
- padding: "4px 0",
333
- paddingLeft: (h.depth - 2) * 12,
334
- lineHeight: 1.4
335
- }, children: h.text }, i))
336
- ] })
337
- ] })
338
- ] })
339
- ] })
340
- ] });
341
- }
342
- function SearchModal({ allPages, onNavigate, onClose }) {
343
- const [q, setQ] = useState("");
344
- const ref = useRef(null);
345
- useEffect(() => {
346
- setTimeout(() => ref.current?.focus(), 50);
347
- }, []);
348
- const results = useMemo(() => {
349
- if (!q.trim()) return [];
350
- const ql = q.toLowerCase();
351
- return allPages.filter((p) => p.title.toLowerCase().includes(ql) || (p.description || "").toLowerCase().includes(ql)).slice(0, 8);
352
- }, [q, allPages]);
353
- return /* @__PURE__ */ jsx("div", { onClick: onClose, style: {
354
- position: "fixed",
355
- inset: 0,
356
- zIndex: 1e3,
357
- background: "rgba(0,0,0,0.55)",
358
- backdropFilter: "blur(6px)",
359
- display: "flex",
360
- alignItems: "flex-start",
361
- justifyContent: "center",
362
- paddingTop: "12vh"
363
- }, children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
364
- background: "var(--sf)",
365
- border: "1px solid var(--bd)",
366
- borderRadius: 12,
367
- width: "100%",
368
- maxWidth: 520,
369
- boxShadow: "0 24px 80px rgba(0,0,0,0.4)",
370
- overflow: "hidden"
371
- }, children: [
372
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--bd)" }, children: [
373
- /* @__PURE__ */ jsx(SearchIcon, {}),
374
- /* @__PURE__ */ jsx(
375
- "input",
376
- {
377
- ref,
378
- value: q,
379
- onChange: (e) => setQ(e.target.value),
380
- placeholder: "Search documentation...",
381
- style: { flex: 1, background: "none", border: "none", outline: "none", color: "var(--tx)", fontSize: 15, fontFamily: "var(--font-body)" }
382
- }
383
- ),
384
- /* @__PURE__ */ jsx("kbd", { style: { fontFamily: "var(--font-code)", fontSize: 11, color: "var(--txM)", background: "var(--cdBg)", padding: "2px 6px", borderRadius: 4, border: "1px solid var(--bd)" }, children: "ESC" })
385
- ] }),
386
- results.length > 0 && /* @__PURE__ */ jsx("div", { style: { padding: 6, maxHeight: 360, overflow: "auto" }, children: results.map((r) => /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(r.id), style: {
387
- display: "block",
388
- width: "100%",
389
- textAlign: "left",
390
- background: "none",
391
- border: "none",
392
- borderRadius: 6,
393
- padding: "10px 14px",
394
- cursor: "pointer",
395
- color: "var(--tx)"
396
- }, children: [
397
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: 14, marginBottom: 2 }, children: r.title }),
398
- r.description && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--txM)", lineHeight: 1.3 }, children: r.description })
399
- ] }, r.id)) }),
400
- q && !results.length && /* @__PURE__ */ jsx("div", { style: { padding: "32px 18px", textAlign: "center", color: "var(--txM)", fontSize: 14 }, children: "No results found" })
401
- ] }) });
402
- }
403
-
404
- // src/entry.tsx
405
- import config from "virtual:tome/config";
406
- import { routes, navigation } from "virtual:tome/routes";
407
- import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
408
- async function loadPage(id) {
409
- try {
410
- const mod = await import(
411
- /* @vite-ignore */
412
- `virtual:tome/page/${id}`
413
- );
414
- return mod.default;
415
- } catch (err) {
416
- console.error(`Failed to load page: ${id}`, err);
417
- return null;
418
- }
419
- }
420
- var contentStyles = `
421
- .tome-content h2 { font-size: 1.4em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; }
422
- .tome-content h3 { font-size: 1.2em; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
423
- .tome-content h4 { font-size: 1.05em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
424
- .tome-content p { color: var(--tx2); line-height: 1.75; margin-bottom: 1em; }
425
- .tome-content a { color: var(--ac); text-decoration: none; }
426
- .tome-content a:hover { text-decoration: underline; }
427
- .tome-content ul, .tome-content ol { color: var(--tx2); padding-left: 1.5em; margin-bottom: 1em; }
428
- .tome-content li { margin-bottom: 0.3em; line-height: 1.7; }
429
- .tome-content code { font-family: var(--font-code); font-size: 0.88em; background: var(--cdBg); padding: 0.15em 0.4em; border-radius: 4px; color: var(--ac); }
430
- .tome-content pre { margin-bottom: 1.2em; border-radius: 8px; overflow-x: auto; border: 1px solid var(--bd); }
431
- .tome-content pre code { background: none; padding: 1em 1.2em; display: block; font-size: 13px; line-height: 1.65; color: var(--cdTx); }
432
- .tome-content blockquote { border-left: 3px solid var(--ac); padding: 0.5em 1em; margin: 1em 0; background: var(--acD); border-radius: 0 6px 6px 0; }
433
- .tome-content blockquote p { color: var(--tx2); margin: 0; }
434
- .tome-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
435
- .tome-content th, .tome-content td { padding: 0.5em 0.8em; border: 1px solid var(--bd); text-align: left; font-size: 0.9em; }
436
- .tome-content th { background: var(--sf); font-weight: 600; }
437
- .tome-content img { max-width: 100%; border-radius: 6px; }
438
- .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
439
-
440
- /* Shiki dual-theme support */
441
- .shiki { background: var(--cdBg) !important; }
442
- html.dark .shiki .shiki-light { display: none; }
443
- html.light .shiki .shiki-dark { display: none; }
444
- `;
445
- function App() {
446
- const [currentPageId, setCurrentPageId] = useState2(() => {
447
- const hash = window.location.hash.slice(1);
448
- if (hash && routes.some((r) => r.id === hash)) return hash;
449
- return routes[0]?.id || "index";
450
- });
451
- const [pageData, setPageData] = useState2(null);
452
- const [loading, setLoading] = useState2(true);
453
- const navigateTo = useCallback2(async (id) => {
454
- setLoading(true);
455
- setCurrentPageId(id);
456
- window.location.hash = id;
457
- const data = await loadPage(id);
458
- if (data) {
459
- setPageData(data);
460
- }
461
- setLoading(false);
462
- }, []);
463
- useEffect2(() => {
464
- navigateTo(currentPageId);
465
- }, []);
466
- useEffect2(() => {
467
- const onHashChange = () => {
468
- const hash = window.location.hash.slice(1);
469
- if (hash && hash !== currentPageId) {
470
- navigateTo(hash);
471
- }
472
- };
473
- window.addEventListener("hashchange", onHashChange);
474
- return () => window.removeEventListener("hashchange", onHashChange);
475
- }, [currentPageId, navigateTo]);
476
- const allPages = routes.map((r) => ({
477
- id: r.id,
478
- title: r.frontmatter.title,
479
- description: r.frontmatter.description
480
- }));
481
- return /* @__PURE__ */ jsxs2(Fragment, { children: [
482
- /* @__PURE__ */ jsx2("style", { children: contentStyles }),
483
- /* @__PURE__ */ jsx2(
484
- Shell,
485
- {
486
- config,
487
- navigation,
488
- currentPageId,
489
- pageHtml: pageData?.html || (loading ? "<p>Loading...</p>" : "<p>Page not found</p>"),
490
- pageTitle: pageData?.frontmatter.title || "Loading...",
491
- pageDescription: pageData?.frontmatter.description,
492
- headings: pageData?.headings || [],
493
- onNavigate: navigateTo,
494
- allPages
495
- }
496
- )
497
- ] });
498
- }
499
- var container = document.getElementById("tome-root");
500
- if (container) {
501
- const root = createRoot(container);
502
- root.render(/* @__PURE__ */ jsx2(App, {}));
503
- }
504
- var entry_default = App;
505
-
506
- export {
507
- Shell,
508
- entry_default
509
- };