Mercurial

comparison mrjunejune/test/snapshots/tools_markdown_to_html.snapshot @ 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 8c74204fd362
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Markdown to HTML Converter</title> 6 <title>Markdown to HTML Converter</title>
7 <meta charset="UTF-8"> 7 <meta charset="UTF-8">
8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0">
9 <meta name="theme-color" content="#f7f3e8">
9 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg"> 10 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
11 <link rel="manifest" href="/public/manifest.json">
12 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
10 13
11 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin> 14 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin>
12 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin> 15 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
13 16
14 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> --> 17 <!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> -->
17 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> --> 20 <!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
18 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> 21 <link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
19 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin> 22 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
20 <link rel="preload" href="/public/epi_all_colors.svg" as="image"> 23 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
21 24
25 <link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
26 <link rel="stylesheet" href="/public/design-system/styles/themes.css" />
22 <link rel="preload" href="/base.css" as="style" /> 27 <link rel="preload" href="/base.css" as="style" />
23 <link rel="stylesheet" href="/base.css" /> 28 <link rel="stylesheet" href="/base.css" />
24 29 <link rel="stylesheet" href="/public/design-system/styles/components.css" />
30 <script
31 type="module"
32 src="/public/design-system/components/index.js"
33 ></script>
34
35 <script src="/public/pwa-register.js" defer></script>
25 36
26 <link rel="stylesheet" href="markdown_to_html/index.css" /> 37 <link rel="stylesheet" href="markdown_to_html/index.css" />
27 </head> 38 </head>
28 <body> 39 <body>
29 <style> 40 <style>
30 :root { 41 :root {
31 --header-background: var(--white); 42 --header-background: var(--white);
32 --header-color: rgb(var(--black)); 43 --header-color: var(--black);
33 --link-hover-accent: var(--awesome); 44 --link-hover-accent: var(--awesome);
34 } 45 }
35 46
36 /* Fixed icon in top left corner */ 47 #themeControl {
37 #themeToggle {
38 position: fixed; 48 position: fixed;
39 top: 20px; 49 top: 20px;
40 left: 20px; 50 left: 20px;
41 background: var(--header-background);
42 display: flex;
43 align-items: center;
44 border-radius: 50%;
45 cursor: pointer;
46 z-index: 1000; 51 z-index: 1000;
47 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
48 transition: transform 0.2s ease; 52 transition: transform 0.2s ease;
49 } 53 }
50 54
51 #themeToggle:hover { 55 #themeControl:hover {
52 transform: scale(1.05); 56 transform: scale(1.05);
57 }
58
59 #themeToggle {
60 flex-direction: column;
61 min-width: 4.5rem;
62 padding: 0.35rem;
63 border-radius: 1.5rem;
64 }
65
66 #themeName {
67 font-family: "More", sans-serif;
68 font-size: 0.65rem;
69 line-height: 1;
53 } 70 }
54 71
55 /* Professional header */ 72 /* Professional header */
56 header { 73 header {
57 margin: auto; 74 margin: auto;
58 padding: 1.5em 1em; 75 padding: 1.5em 1em;
59 font-family: "More", sans-serif; 76 font-family: "More", sans-serif;
60 box-shadow: 0 2px 8px rgba(var(--black), 5%); 77 box-shadow: var(--zen-shadow-sm);
61 width: 720px; 78 width: 720px;
62 max-width: calc(100% - 2em); 79 max-width: calc(100% - 2em);
63 text-align: center; 80 text-align: center;
64 } 81 }
65 82
79 display: none; 96 display: none;
80 } 97 }
81 98
82 /* Mobile responsiveness */ 99 /* Mobile responsiveness */
83 @media (max-width: 720px) { 100 @media (max-width: 720px) {
84 #themeToggle { 101 #themeControl {
85 top: 15px; 102 top: 15px;
86 left: 15px; 103 left: 15px;
87 } 104 }
88 105
89 header { 106 header {
94 font-size: 1.5em; 111 font-size: 1.5em;
95 } 112 }
96 } 113 }
97 114
98 @media (max-width: 480px) { 115 @media (max-width: 480px) {
99 #themeToggle { 116 #themeControl {
100 top: 10px; 117 top: 10px;
101 left: 10px; 118 left: 10px;
102 } 119 }
103 120
104 #themeToggle img { 121 #themeToggle img {
120 --logo-invert: invert(0); 137 --logo-invert: invert(0);
121 --epi-grayscale: grayscale(0) brightness(1); 138 --epi-grayscale: grayscale(0) brightness(1);
122 } 139 }
123 140
124 /* 2. MANUAL DARK OVERRIDE */ 141 /* 2. MANUAL DARK OVERRIDE */
125 html.dark { 142 html[data-zen-theme="ink"] {
126 --logo-invert: invert(1); 143 --logo-invert: invert(1);
127 --epi-grayscale: grayscale(1); 144 --epi-grayscale: grayscale(1);
128 } 145 }
129 146
130 /* 3. MANUAL LIGHT OVERRIDE */ 147 /* 3. MANUAL LIGHT OVERRIDE */
131 html.light-mode { 148 html[data-zen-theme="paper"] {
132 --logo-invert: invert(0); 149 --logo-invert: invert(0);
133 --epi-grayscale: brightness(2.9) grayscale(1); 150 --epi-grayscale: brightness(2.9) grayscale(1);
134 } 151 }
152
153 html[data-zen-theme="playful"] {
154 --logo-invert: invert(0);
155 --epi-grayscale: saturate(1.25);
156 }
135 157
136 /* 4. SYSTEM PREFERENCE */ 158 /* 4. SYSTEM PREFERENCE */
137 @media (prefers-color-scheme: dark) { 159 @media (prefers-color-scheme: dark) {
138 :root:not(.light-mode) { 160 :root:not([data-zen-theme]) {
139 --logo-invert: invert(1); 161 --logo-invert: invert(1);
140 } 162 }
141 } 163 }
142 164
143 /* 5. APPLY TO ELEMENTS */ 165 /* 5. APPLY TO ELEMENTS */
152 filter: var(--epi-grayscale); 174 filter: var(--epi-grayscale);
153 transition: filter 0.3s ease; 175 transition: filter 0.3s ease;
154 } 176 }
155 </style> 177 </style>
156 178
157 <div id="themeToggle"> 179 <zen-button id="themeControl" variant="quiet">
158 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> 180 <button
159 </div> 181 id="themeToggle"
182 type="button"
183 aria-label="Change site theme"
184 >
185 <img
186 id="epiChan"
187 class="epi-logo"
188 alt=""
189 src="/public/epi_all_colors.svg"
190 height="50"
191 width="50"
192 >
193 <span id="themeName" aria-live="polite">Auto</span>
194 </button>
195 </zen-button>
160 196
161 <header> 197 <header>
162 <h1><a href="/">MrJuneJune</a></h1> 198 <h1><a href="/">MrJuneJune</a></h1>
163 </header> 199 </header>
164 <script src="/index.js"></script> 200 <script src="/index.js"></script>
165
166 201
167 <div class="header"> 202 <div class="header">
168 <h1>Markdown to HTML Converter</h1> 203 <h1>Markdown to HTML Converter</h1>
169 </div> 204 </div>
170 205
207 242
208 --- 243 ---
209 244
210 ### Images 245 ### Images
211 246
212 ![Alt text](https://via.placeholder.com/150) 247 ![Alt text](https://mrjunejune.com/public/epi_favicon.svg)
213 248
214 **Try editing this text!**</textarea> 249 **Try editing this text!**</textarea>
215 </div> 250 </div>
216 251
217 <div class="panel"> 252 <div class="panel">
224 </div> 259 </div>
225 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> 260 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
226 <small>&copy; 2026 June Park</small> 261 <small>&copy; 2026 June Park</small>
227 </div> 262 </div>
228 263
229 <script src="/markdown_to_html_bin.js"></script> 264 <script type="module">
230 <script> 265 import createModule from '/markdown_to_html_bin.js';
231 // Wait for WASM module to be ready 266
232 Module.onRuntimeInitialized = () => { 267 // Get DOM elements
268 const input = document.getElementById('input');
269 const output = document.getElementById('output');
270 const copy = document.getElementById('copy');
271
272 // Modern Emscripten exports a factory function that returns a Promise
273 createModule().then(Module => {
233 // Get raw pointer so we can free it after use 274 // Get raw pointer so we can free it after use
234 const markdownToHtmlPtr = Module.cwrap('markdown_to_html', 'number', ['string']); 275 const markdownToHtmlPtr = Module.cwrap('markdown_to_html', 'number', ['string']);
235 const markdownFree = Module.cwrap('markdown_free', null, ['number']); 276 const markdownFree = Module.cwrap('markdown_free', null, ['number']);
236 277
237 function convert() { 278 function convert() {
264 }, 1000); 305 }, 1000);
265 }).catch(err => { 306 }).catch(err => {
266 console.error('Failed to copy: ', err); 307 console.error('Failed to copy: ', err);
267 }); 308 });
268 }); 309 });
269 }; 310 });
270 </script> 311 </script>
271 </body> 312 </body>
272 </html> 313 </html>