-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
247 lines (228 loc) · 17.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<title>Glossary Page Template</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://glstatic.net" crossorigin>
<link rel="apple-touch-icon" sizes="180x180" href="https://glstatic.net/glossary-page-template-favicons/apple-touch-icon.png?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="https://glstatic.net/glossary-page-template-favicons/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="https://glstatic.net/glossary-page-template-favicons/favicon-16x16.png?v=2">
<link rel="manifest" href="https://glstatic.net/glossary-page-template-favicons/site.webmanifest">
<link rel="mask-icon" href="https://glstatic.net/glossary-page-template-favicons/safari-pinned-tab.svg?v=2" color="#5bbad5">
<link rel="shortcut icon" href="https://glstatic.net/glossary-page-template-favicons/favicon.ico?v=2">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="https://glstatic.net/glossary-page-template-favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="./glossary.css">
<script type="module" src="./glossary.ts"></script>
</head>
<body>
<div class="lg:pt-8 pb-12 px-4">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mt-5 sm:mt-4 flex flex-row-reverse">
<a href="https://github.com/hilverd/glossary-page-template" class="mb-6 sm:mb-0 block text-slate-400 dark:text-slate-200 hover:text-slate-500 dark:hover:text-slate-400"><span class="sr-only">Glossary Page Template on GitHub</span><svg viewBox="0 0 16 16" class="w-6 h-6" fill="currentColor" aria-hidden="true">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg></a>
</div>
<div class="lg:text-center mt-2">
<span class="inline-flex items-center">
<svg class="h-16 w-16 text-gray-900 dark:text-gray-100" viewBox="0 0 700.000000 700.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
<path d="M0 3800 l0 -2670 1328 -2 c1480 -3 1360 2 1521 -74 272 -128 457
-390 478 -676 l6 -78 167 0 167 0 6 78 c15 199 109 389 265 533 38 35 97 80
131 99 34 19 68 40 76 45 12 8 -1 30 -70 118 -46 60 -93 120 -103 134 l-18 25
-55 -33 c-73 -44 -124 -83 -181 -138 l-48 -45 0 290 0 290 -45 61 -45 60 -87
-33 c-49 -18 -105 -35 -125 -39 l-38 -7 0 -310 0 -310 -59 55 c-144 132 -327
224 -551 274 -67 15 -195 17 -1232 20 l-1158 4 0 2330 0 2330 1013 -3 1012 -3
96 -27 c435 -119 737 -425 851 -861 20 -77 22 -113 27 -566 l6 -483 85 -25
c46 -13 122 -41 167 -63 l82 -38 3 546 4 547 26 98 c108 395 387 694 769 821
167 56 168 56 1225 56 l974 0 0 -2330 0 -2330 -1040 -2 -1040 -3 77 -100 c42
-55 100 -130 130 -167 l54 -68 1074 0 1075 0 0 2670 0 2671 -1167 -4 c-1295
-4 -1219 0 -1448 -72 -345 -108 -658 -352 -830 -648 -27 -47 -52 -86 -55 -86
-3 0 -27 39 -55 86 -96 166 -269 347 -440 463 -148 100 -357 188 -532 225
-154 31 -293 35 -1380 35 l-1093 0 0 -2670z" />
<path d="M1320 4728 c-183 -480 -350 -917 -371 -971 l-38 -98 141 3 140 3 87
245 86 245 439 0 439 0 22 -65 c13 -36 28 -77 33 -92 l11 -27 87 54 c47 30 95
57 106 61 14 4 18 12 14 27 -3 12 -131 351 -284 752 l-278 730 -151 3 -150 3
-333 -873z m658 137 c94 -253 173 -468 177 -477 7 -17 -14 -18 -349 -18 -210
0 -356 4 -356 9 0 9 319 880 341 930 5 13 11 22 13 20 2 -2 81 -211 174 -464z" />
<path d="M4323 5509 c-69 -20 -98 -115 -52 -172 83 -107 251 7 182 123 -26 45
-77 64 -130 49z" />
<path d="M4580 5410 l0 -110 705 0 706 0 -3 108 -3 107 -702 3 -703 2 0 -110z" />
<path d="M4315 5071 c-40 -17 -60 -51 -60 -103 0 -43 4 -53 33 -79 47 -43 102
-41 148 5 28 28 34 42 34 76 0 34 -6 48 -34 76 -35 35 -75 43 -121 25z" />
<path d="M4580 4970 l0 -110 705 0 705 0 0 110 0 110 -705 0 -705 0 0 -110z" />
<path d="M4294 4606 c-28 -28 -34 -42 -34 -76 0 -34 6 -48 34 -76 28 -28 42
-34 76 -34 34 0 48 6 76 34 28 28 34 42 34 76 0 34 -6 48 -34 76 -28 28 -42
34 -76 34 -34 0 -48 -6 -76 -34z" />
<path d="M4590 4530 l0 -110 705 0 705 0 0 110 0 110 -705 0 -705 0 0 -110z" />
<path d="M2889 4070 c-471 -80 -842 -451 -925 -925 -22 -120 -14 -348 14 -455
118 -445 457 -763 901 -845 106 -19 283 -19 394 0 106 18 267 75 312 109 l34
26 398 -529 c219 -292 401 -530 405 -531 9 0 258 189 258 197 0 3 -178 244
-396 535 l-397 528 50 53 c98 105 188 278 234 453 21 79 24 110 23 274 0 167
-3 194 -26 282 -116 428 -480 760 -908 828 -74 11 -302 12 -371 0z m431 -359
c130 -44 220 -99 316 -195 95 -95 151 -185 195 -316 31 -89 33 -104 33 -235 1
-159 -12 -222 -70 -344 -102 -217 -278 -367 -511 -433 -63 -18 -103 -22 -208
-22 -153 0 -218 15 -350 79 -205 99 -353 278 -417 501 -29 104 -32 305 -5 404
73 268 271 478 533 564 90 29 137 35 264 32 109 -3 137 -7 220 -35z" />
<path d="M3330 2960 l0 -611 60 32 c81 43 170 126 227 212 l48 72 3 284 3 284
-27 55 c-47 96 -204 243 -296 278 -17 6 -18 -27 -18 -606z" />
<path d="M2421 3156 c-13 -32 -31 -133 -31 -168 l0 -28 110 0 110 0 0 110 0
110 -90 0 c-86 0 -91 -1 -99 -24z" />
<path d="M2430 2740 c0 -16 48 -109 83 -162 27 -41 37 -48 65 -48 l32 0 0 110
0 110 -90 0 c-55 0 -90 -4 -90 -10z" />
<path d="M4390 3880 l0 -110 600 -2 600 -3 -431 -535 c-238 -294 -515 -637
-616 -762 l-183 -228 0 -95 0 -95 795 0 795 0 0 110 0 110 -626 2 -625 3 610
755 610 755 1 103 0 102 -765 0 -765 0 0 -110z" />
<path d="M904 3146 c-28 -28 -34 -42 -34 -76 0 -34 6 -48 34 -76 28 -28 42
-34 76 -34 34 0 48 6 76 34 28 28 34 42 34 76 0 34 -6 48 -34 76 -28 28 -42
34 -76 34 -34 0 -48 -6 -76 -34z" />
<path d="M1200 3070 l0 -110 300 0 c232 0 302 3 304 13 3 6 7 56 10 110 l5 97
-309 0 -310 0 0 -110z" />
<path d="M954 2743 c-12 -2 -34 -18 -50 -34 -78 -81 6 -214 112 -179 18 6 43
23 54 37 25 32 27 99 4 132 -15 21 -73 53 -91 50 -4 -1 -18 -4 -29 -6z" />
<path d="M1200 2640 l0 -110 341 0 c321 0 341 1 334 18 -4 9 -17 58 -30 107
l-23 90 -311 3 -311 2 0 -110z" />
<path d="M943 2294 c-66 -33 -80 -125 -25 -176 34 -32 63 -39 107 -27 47 13
75 52 75 103 0 48 -19 80 -60 101 -36 19 -57 19 -97 -1z" />
<path d="M1210 2200 l0 -110 471 0 c529 0 482 -8 412 72 -18 21 -49 62 -69 93
l-37 55 -388 0 -389 0 0 -110z" />
</g>
</svg>
<span class="ml-3 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">Glossary Page Template</span>
</span>
<p class="mt-4 text-xl text-gray-500 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-200 lg:mx-auto">
A single HTML page with a built-in editor for creating a glossary that can be hosted anywhere.
</p>
</div>
<div class="mt-10">
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-gray-500 text-white dark:text-black">
<!-- Heroicon name: outline/pencil-alt -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
</path>
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Built-in editor</p>
</dt>
<dd class="max-w-prose mt-2 ml-16 text-base text-gray-500 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-200">
Includes integrated (single-user) editor UI that saves changes back to the HTML file.
</dd>
</div>
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-gray-500 text-white dark:text-black">
<!-- Heroicon name: outline/code -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Plain HTML</p>
</dt>
<dd class="max-w-prose mt-2 ml-16 text-base text-gray-500 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-200">
Represents a glossary as a standard <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl"><code>dl</code></a> element for accessibility and portability.
</dd>
</div>
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-gray-500 text-white dark:text-black">
<!-- Heroicon name: outline/device-tablet -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z">
</path>
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Responsive</p>
</dt>
<dd class="max-w-prose mt-2 ml-16 text-base text-gray-500 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-200">
Supports different screen sizes using responsive design and includes dark mode support.
</dd>
</div>
<div class="relative">
<dt>
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-gray-500 text-white dark:text-black">
<svg class="w-6 h-6" height="128" viewBox="0 0 208 128" width="208" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor">
<path clip-rule="evenodd" d="m15 10c-2.7614 0-5 2.2386-5 5v98c0 2.761 2.2386 5 5 5h178c2.761 0 5-2.239 5-5v-98c0-2.7614-2.239-5-5-5zm-15 5c0-8.28427 6.71573-15 15-15h178c8.284 0 15 6.71573 15 15v98c0 8.284-6.716 15-15 15h-178c-8.28427 0-15-6.716-15-15z" fill-rule="evenodd" />
<path d="m30 98v-68h20l20 25 20-25h20v68h-20v-39l-20 25-20-25v39zm125 0-30-33h20v-35h20v35h20z" />
</g>
</svg>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Markdown and TeX supported</p>
</dt>
<dd class="max-w-prose mt-2 ml-16 text-base text-gray-500 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-200">
Write in a Markdown-based syntax. Math typesetting is supported using <a target="_blank" href="https://katex.org/">KaTeX</a>.
</dd>
</div>
</dl>
</div>
<div class="mt-10 lg:mt-12 grid grid-cols-1 gap-6 lg:gap-10 lg:grid-cols-2">
<div>
<div class="pb-3 border-b border-gray-300 dark:border-gray-700">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Examples</h3>
</div>
<ul class="mt-6 max-w-prose text-gray-900 dark:text-gray-100 list-outside list-disc">
<li>
<a href="examples/uk-parliament.html">Glossary — UK Parliament</a>
</li>
<li>
<a href="examples/python-3.11.2-glossary.html">Python 3.11.2 Glossary</a>
</li>
<li>
<span class="inline-flex items-center">
<a href="examples/glossary-of-group-theory.html">Glossary of group theory</a>
<span class="ml-2 text-gray-600 dark:text-gray-300 select-none" title="Uses mathematical expressions">
<span class="font-serif text-sm font-semibold">T<sub class="text-sm">E</sub>X</span>
</span>
</span>
</li>
<li>
<a href="examples/open-glossary-of-edge-computing.html">Open Glossary of Edge Computing</a>
</li>
<li>
<a href="examples/canadas-weather-and-meterology-glossary.html">Canada's Weather and meteorology glossary</a>
</li>
</ul>
</div>
<div class="max-w-prose">
<div class="pb-3 border-b border-gray-300 dark:border-gray-700">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Getting Started</h3>
</div>
<p class="mt-6 text-gray-900 dark:text-gray-100">
Download <a href="https://github.com/hilverd/glossary-page-template/releases/latest/download/glossary.html" download><span class="font-bold">glossary.html</span></a> and open it in a browser.
</p>
<p class="mt-1 text-gray-900 dark:text-gray-100">
You can also start with <a href="https://github.com/hilverd/glossary-page-template/releases/latest/download/empty.html" download>empty.html</a>.
</p>
<p class="mt-6 text-gray-900 dark:text-gray-100">
See the <a href="https://github.com/hilverd/glossary-page-template#glossary-page-template">README</a> for more detailed instructions.
</p>
</div>
<div class="max-w-prose">
<div class="pb-3 border-b border-gray-300 dark:border-gray-700">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Limitations</h3>
</div>
<p class="mt-6">
<ul class="list-disc list-outside text-gray-900 dark:text-gray-100">
<li>The integrated editor UI is meant to be run and used by a single local user only. It is not designed to be exposed to untrusted users.</li>
<li>In its current state this project is not very suitable for glossaries of more than (say) 500 items.</li>
</ul>
</p>
</div>
</div>
</div>
</div>
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</body>
</html>