Mercurial

annotate mrjunejune/src/index.js @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents bcc76a156aea
children 60a876c4587a
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
82
1ded13720541 Added new logos.
June Park <parkjune1995@gmail.com>
parents: 80
diff changeset
1 const THEME_STORAGE_KEY = 'theme-preference';
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
2 const THEMES = ['auto', 'paper', 'ink', 'playful'];
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
3 const THEME_LABELS = {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
4 auto: 'Auto',
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
5 paper: 'Paper',
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
6 ink: 'Ink',
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
7 playful: 'Playful',
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
8 };
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
9
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
10 function normalizeTheme(value) {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
11 if (value === 'light') return 'paper';
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
12 if (value === 'dark') return 'ink';
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
13 return THEMES.includes(value) ? value : 'auto';
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
14 }
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
15
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
16 function getThemePreference() {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
17 return normalizeTheme(localStorage.getItem(THEME_STORAGE_KEY));
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
18 }
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
19
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
20 function updateThemeColor() {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
21 const probe = document.createElement('span');
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
22 probe.style.background = 'var(--zen-color-canvas)';
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
23 document.body.append(probe);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
24 const color = getComputedStyle(probe).backgroundColor;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
25 probe.remove();
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
26 document.querySelector('meta[name="theme-color"]')
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
27 ?.setAttribute('content', color);
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
30 function updateThemeControl(preference) {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
31 const toggle = document.querySelector('#themeToggle');
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
32 const label = document.querySelector('#themeName');
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
33 if (label) label.textContent = THEME_LABELS[preference];
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
34 toggle?.setAttribute(
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
35 'aria-label',
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
36 `Change site theme. Current theme: ${THEME_LABELS[preference]}`,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
37 );
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
40 function applyTheme(value, persist = false) {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
41 const preference = normalizeTheme(value);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
42 const root = document.documentElement;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
43 root.classList.remove('light-mode', 'dark', 'auto');
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
44 if (preference === 'auto') delete root.dataset.zenTheme;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
45 else root.dataset.zenTheme = preference;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
46 if (persist) localStorage.setItem(THEME_STORAGE_KEY, preference);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
47 updateThemeControl(preference);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
48 requestAnimationFrame(updateThemeColor);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
49 document.dispatchEvent(new CustomEvent('zen-theme-change', {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
50 detail: { theme: preference },
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
51 }));
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
52 return preference;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
53 }
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 76
diff changeset
54
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
55 const currentPreference = applyTheme(getThemePreference());
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
56 if (localStorage.getItem(THEME_STORAGE_KEY) !== currentPreference) {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
57 localStorage.setItem(THEME_STORAGE_KEY, currentPreference);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
58 }
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 76
diff changeset
59
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
60 document.querySelector('#themeToggle')?.addEventListener('click', () => {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
61 const current = getThemePreference();
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
62 const next = THEMES[(THEMES.indexOf(current) + 1) % THEMES.length];
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
63 applyTheme(next, true);
80
d55157451947 [MrJuneJune] Updating my homepage.
June Park <parkjune1995@gmail.com>
parents: 76
diff changeset
64 });
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
65
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
66 matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
67 if (getThemePreference() === 'auto') updateThemeColor();
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
68 });
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
69
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
70 window.MrJuneJuneTheme = Object.freeze({
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
71 apply: theme => applyTheme(theme, true),
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
72 current: getThemePreference,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
73 themes: [...THEMES],
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents: 84
diff changeset
74 });