My agentic slop goes here. Not intended for anyone else!
anil.recoil.org
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Arod Web Components - Full Example</title>
7
8 <!-- Import all Arod components -->
9 <link rel="stylesheet" href="arod-themes.css">
10 <script src="arod-menu.js"></script>
11 <script src="arod-search.js"></script>
12 <script src="arod-theme.js"></script>
13 <script src="arod-sidenotes.js"></script>
14
15 <style>
16 /* Base styles using semantic variables */
17
18 * {
19 margin: 0;
20 padding: 0;
21 box-sizing: border-box;
22 }
23
24 body {
25 font-family: var(--font-family-base);
26 line-height: var(--line-height-base);
27 color: var(--color-text-primary);
28 background: var(--color-bg-primary);
29 transition: background var(--transition-medium), color var(--transition-medium);
30 }
31
32 /* Main content area */
33 main {
34 padding: 2rem 1rem;
35 max-width: 980px;
36 margin: 0 auto;
37 }
38
39 h1 {
40 font-size: 1.0rem;
41 font-weight: 700;
42 margin-top: 0.5em;
43 margin-bottom: 0.6em;
44 }
45
46 h2 {
47 font-size: 1rem;
48 margin-bottom: 0.5em;
49 font-weight: 500;
50 }
51
52 h3 {
53 font-size: 1rem;
54 margin-bottom: 0.5em;
55 font-weight: 400;
56 }
57
58 p {
59 font-size: var(--font-size-base);
60 margin-top: 0.2em;
61 margin-bottom: var(--spacing-sm);
62 text-align: justify;
63 }
64
65 code {
66 font-family: var(--font-family-mono);
67 font-size: var(--font-size-small);
68 padding: 0.2em 0.4em;
69 background: var(--color-code-bg);
70 color: var(--color-code-text);
71 border-radius: var(--radius-sm);
72 }
73
74 pre {
75 padding: var(--spacing-md);
76 margin: var(--spacing-lg) 0;
77 background: var(--color-code-block-bg);
78 border: 1px solid var(--color-border);
79 border-radius: var(--radius-md);
80 overflow-x: auto;
81 }
82
83 pre code {
84 background: none;
85 padding: 0;
86 }
87
88 blockquote {
89 position: relative;
90 padding: var(--spacing-sm) var(--spacing-md);
91 padding-top: 0;
92 margin: var(--spacing-sm) 0;
93 border-left: 4px solid var(--color-border);
94 font-style: italic;
95 padding-bottom: 0.1em;
96 color: var(--color-text-muted);
97 }
98
99 .hero {
100 text-align: center;
101 padding: var(--spacing-xl) 0;
102 background: var(--color-bg-secondary);
103 border-radius: var(--radius-lg);
104 margin: var(--spacing-md) 0;
105 border: 1px solid var(--color-border-light);
106 }
107
108 .hero h1 {
109 font-size: 1.2rem;
110 font-weight: 700;
111 margin-bottom: 0.5rem;
112 }
113
114 .hero p {
115 font-size: var(--font-size-base);
116 color: var(--color-text-secondary);
117 text-align: center;
118 }
119 </style>
120</head>
121<body>
122 <!-- Navigation Menu -->
123 <arod-menu>
124 <menu-item href="#home">Home</menu-item>
125 <menu-item href="#projects">Projects</menu-item>
126 <menu-item href="#papers">Papers</menu-item>
127 <menu-item href="#talks">Talks</menu-item>
128 <menu-item href="#ideas">Ideas</menu-item>
129 <menu-item href="#notes">Notes</menu-item>
130 <menu-item href="#teaching">Teaching</menu-item>
131 <menu-item href="#about">About</menu-item>
132
133 <!-- Actions slot for search and theme toggle -->
134 <arod-search slot="actions" placeholder="Search documentation..."></arod-search>
135 <arod-theme slot="actions"></arod-theme>
136 </arod-menu>
137
138 <main>
139 <div class="hero">
140 <h1>Arod Web Components</h1>
141 <p>Modern, accessible web components for content-rich websites</p>
142 </div>
143
144 <article-sidenotes>
145 <h1>Welcome to Arod Components</h1>
146
147 <p>
148 The Arod web component library provides a set of semantic, accessible
149 components<sidenote-ref for="note1"></sidenote-ref> for building
150 modern documentation sites and content-rich applications. Each component
151 is designed to work independently<sidenote-ref for="note2"></sidenote-ref>
152 while maintaining consistent styling and behavior.
153 </p>
154
155 <side-note id="note1">
156 Web Components are a set of web platform APIs that allow you to create
157 custom, reusable HTML elements with encapsulated functionality.
158 </side-note>
159
160 <side-note id="note2">
161 Components use Shadow DOM for style encapsulation, ensuring they don't
162 interfere with your existing styles.
163 </side-note>
164
165 <h2>Key Features</h2>
166
167 <p>
168 The library includes essential components like a responsive navigation
169 menu<sidenote-ref for="note3"></sidenote-ref>, an advanced search
170 interface<sidenote-ref for="note4"></sidenote-ref>, theme switching
171 capabilities<sidenote-ref for="note5"></sidenote-ref>, and our unique
172 sidenotes system<sidenote-ref for="note6"></sidenote-ref> for rich
173 annotations.
174 </p>
175
176 <side-note id="note3">
177 The menu component automatically adapts to mobile devices with a
178 hamburger menu and supports marking active items.
179 </side-note>
180
181 <side-note id="note4">
182 The search component provides keyboard shortcuts (⌘K), real-time
183 search, and keyboard navigation through results.
184 </side-note>
185
186 <side-note id="note5">
187 Theme switching persists user preference in localStorage and respects
188 system preferences when set to "System" mode.
189 </side-note>
190
191 <side-note id="note6">
192 Sidenotes appear in the margin on desktop and inline on mobile,
193 with automatic numbering and bidirectional hover highlighting.
194 </side-note>
195
196 <h2>Installation</h2>
197
198 <p>
199 Simply include the component scripts in your HTML and start using
200 the custom elements<sidenote-ref for="note7"></sidenote-ref>. No build
201 process or framework required!
202 </p>
203
204 <side-note id="note7">
205 <pre><code><script src="arod/arod-menu.js"></script>
206<script src="arod/arod-search.js"></script>
207<script src="arod/arod-theme.js"></script>
208<script src="arod/arod-sidenotes.js"></script></code></pre>
209 </side-note>
210
211 <h2>Component Examples</h2>
212
213 <h3>Navigation Menu</h3>
214
215 <pre><code><arod-menu>
216 <menu-item href="/papers">Papers</menu-item>
217 <menu-item href="/notes">Notes</menu-item>
218 <menu-item href="/about">About</menu-item>
219
220 <arod-search slot="actions"></arod-search>
221 <arod-theme slot="actions"></arod-theme>
222</arod-menu></code></pre>
223
224 <h3>Sidenotes</h3>
225
226 <pre><code><article-sidenotes>
227 <p>
228 Text with a reference<sidenote-ref for="note1"></sidenote-ref>
229 </p>
230
231 <side-note id="note1">
232 The sidenote content goes here
233 </side-note>
234</article-sidenotes></code></pre>
235
236 <h3>Search Integration</h3>
237
238 <p>
239 The search component emits events<sidenote-ref for="note8"></sidenote-ref>
240 that you can handle to integrate with your search backend:
241 </p>
242
243 <side-note id="note8">
244 <pre><code>const search = document.querySelector('arod-search');
245search.addEventListener('search', async (e) => {
246 const results = await searchAPI(e.detail.query);
247 search.displayResults(results);
248});</code></pre>
249 </side-note>
250
251 <h2>Theming</h2>
252
253 <p>
254 All components support both light and dark themes<sidenote-ref for="note9"></sidenote-ref>.
255 The theme toggle component manages this at the document level by setting
256 a <code>data-theme</code> attribute on the HTML element.
257 </p>
258
259 <side-note id="note9">
260 Components use CSS custom properties for theming, making it easy to
261 customize colors and styles to match your brand.
262 </side-note>
263
264 <blockquote>
265 "Good design is as little design as possible." — Dieter Rams
266 </blockquote>
267
268 <h2>Browser Support</h2>
269
270 <p>
271 Arod components work in all modern browsers<sidenote-ref for="note10"></sidenote-ref>
272 that support Web Components APIs. For older browsers, consider using
273 polyfills.
274 </p>
275
276 <side-note id="note10">
277 Tested in Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+.
278 Internet Explorer is not supported.
279 </side-note>
280
281 <h2>Contributing</h2>
282
283 <p>
284 We welcome contributions! The library is designed to be extensible<sidenote-ref for="note11"></sidenote-ref>,
285 and new components that follow the established patterns are encouraged.
286 </p>
287
288 <side-note id="note11">
289 Each component should be self-contained, use Shadow DOM for encapsulation,
290 emit appropriate events, and follow the naming convention of
291 <code>arod-[component]</code>.
292 </side-note>
293 </article-sidenotes>
294 </main>
295
296 <script>
297 // Example search integration
298 const searchComponent = document.querySelector('arod-search');
299
300 searchComponent.addEventListener('search', (e) => {
301 console.log('Search query:', e.detail.query);
302
303 // Mock search results for demo
304 setTimeout(() => {
305 const mockResults = [
306 {
307 title: 'Getting Started with Arod',
308 snippet: 'Learn how to install and use <mark>Arod</mark> components...',
309 url: '#docs'
310 },
311 {
312 title: 'Sidenotes Component',
313 snippet: 'The <mark>sidenotes</mark> component provides margin notes...',
314 url: '#sidenotes'
315 },
316 {
317 title: 'Theme Switching',
318 snippet: 'Support for light, dark, and system <mark>themes</mark>...',
319 url: '#themes'
320 }
321 ];
322
323 if (e.detail.query) {
324 searchComponent.displayResults(mockResults);
325 }
326 }, 300);
327 });
328
329 // Log theme changes
330 document.querySelector('arod-theme').addEventListener('theme-change', (e) => {
331 console.log('Theme changed to:', e.detail.theme);
332 });
333 </script>
334</body>
335</html>