@udx/md2html 1.0.0
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.
- package/README.md +219 -0
- package/index.js +738 -0
- package/package.json +48 -0
- package/static/chapter-navigation.css +213 -0
- package/static/scripts.js +410 -0
- package/static/styles.css +484 -0
- package/static/view.hbs +341 -0
package/static/view.hbs
ADDED
|
@@ -0,0 +1,341 @@
|
|
|
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
|
+
<meta name="description" content="{{description}}">
|
|
7
|
+
<meta name="author" content="{{author}}">
|
|
8
|
+
<meta name="version" content="{{version}}">
|
|
9
|
+
<meta name="date" content="{{date}}">
|
|
10
|
+
|
|
11
|
+
<!-- Open Graph / Social Media Meta Tags -->
|
|
12
|
+
<meta property="og:title" content="{{title}}">
|
|
13
|
+
<meta property="og:description" content="{{description}}">
|
|
14
|
+
<meta property="og:type" content="article">
|
|
15
|
+
<meta property="og:url" content="https://udx.dev/docs/architecture/deploying-with-impunity/">
|
|
16
|
+
<meta property="og:site_name" content="UDX.dev">
|
|
17
|
+
|
|
18
|
+
<!-- Structured Data -->
|
|
19
|
+
<script type="application/ld+json">
|
|
20
|
+
{
|
|
21
|
+
"@context": "https://schema.org",
|
|
22
|
+
"@type": "TechArticle",
|
|
23
|
+
"headline": "{{title}}",
|
|
24
|
+
"description": "{{description}}",
|
|
25
|
+
"author": {
|
|
26
|
+
"@type": "Organization",
|
|
27
|
+
"name": "{{author}}"
|
|
28
|
+
},
|
|
29
|
+
"datePublished": "{{date}}",
|
|
30
|
+
"dateModified": "{{date}}",
|
|
31
|
+
"publisher": {
|
|
32
|
+
"@type": "Organization",
|
|
33
|
+
"name": "UDX.dev",
|
|
34
|
+
"logo": {
|
|
35
|
+
"@type": "ImageObject",
|
|
36
|
+
"url": "https://udx.dev/static/images/logo.png"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<title>{{title}}</title>
|
|
43
|
+
|
|
44
|
+
<!-- Google Tag Manager -->
|
|
45
|
+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-TNKNKJN2');</script>
|
|
46
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
|
|
47
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
|
48
|
+
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
|
49
|
+
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
|
50
|
+
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
51
|
+
<script>
|
|
52
|
+
tailwind.config = {
|
|
53
|
+
theme: {
|
|
54
|
+
extend: {
|
|
55
|
+
typography: {
|
|
56
|
+
DEFAULT: {
|
|
57
|
+
css: {
|
|
58
|
+
maxWidth: '65ch',
|
|
59
|
+
/* Optimized for reading */
|
|
60
|
+
color: '#333',
|
|
61
|
+
fontSize: '18px',
|
|
62
|
+
lineHeight: '1.6',
|
|
63
|
+
p: {
|
|
64
|
+
marginTop: '0',
|
|
65
|
+
marginBottom: '0',
|
|
66
|
+
fontSize: '18px',
|
|
67
|
+
lineHeight: '1.6',
|
|
68
|
+
},
|
|
69
|
+
/* Removed problematic adjacent selector rule */
|
|
70
|
+
h1: {
|
|
71
|
+
fontSize: '64px',
|
|
72
|
+
marginTop: '3rem',
|
|
73
|
+
marginBottom: '2rem',
|
|
74
|
+
fontWeight: '700',
|
|
75
|
+
lineHeight: '1.2',
|
|
76
|
+
},
|
|
77
|
+
h2: {
|
|
78
|
+
fontSize: '48px',
|
|
79
|
+
marginTop: '2.5rem',
|
|
80
|
+
marginBottom: '1.5rem',
|
|
81
|
+
fontWeight: '600',
|
|
82
|
+
lineHeight: '1.3',
|
|
83
|
+
},
|
|
84
|
+
h3: {
|
|
85
|
+
fontSize: '36px',
|
|
86
|
+
marginTop: '2.2rem',
|
|
87
|
+
marginBottom: '1.2rem',
|
|
88
|
+
fontWeight: '600',
|
|
89
|
+
lineHeight: '1.4',
|
|
90
|
+
},
|
|
91
|
+
h4: {
|
|
92
|
+
fontSize: '28px',
|
|
93
|
+
marginTop: '2rem',
|
|
94
|
+
marginBottom: '1rem',
|
|
95
|
+
fontWeight: '600',
|
|
96
|
+
lineHeight: '1.4',
|
|
97
|
+
},
|
|
98
|
+
h5: {
|
|
99
|
+
fontSize: '22px',
|
|
100
|
+
marginTop: '2rem',
|
|
101
|
+
marginBottom: '1rem',
|
|
102
|
+
fontWeight: '600',
|
|
103
|
+
lineHeight: '1.4',
|
|
104
|
+
},
|
|
105
|
+
'h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p': {
|
|
106
|
+
marginTop: '1em',
|
|
107
|
+
},
|
|
108
|
+
ul: {
|
|
109
|
+
marginTop: '1.2em',
|
|
110
|
+
marginBottom: '2.2em',
|
|
111
|
+
paddingLeft: '2rem',
|
|
112
|
+
},
|
|
113
|
+
'ul > li': {
|
|
114
|
+
marginBottom: '0.5em',
|
|
115
|
+
position: 'relative',
|
|
116
|
+
paddingLeft: '0.25em',
|
|
117
|
+
},
|
|
118
|
+
ol: {
|
|
119
|
+
marginTop: '1.2em',
|
|
120
|
+
marginBottom: '2.2em',
|
|
121
|
+
paddingLeft: '2rem',
|
|
122
|
+
},
|
|
123
|
+
'ol > li': {
|
|
124
|
+
marginBottom: '0.5em',
|
|
125
|
+
paddingLeft: '0.25em',
|
|
126
|
+
},
|
|
127
|
+
'ul ul, ol ol, ul ol, ol ul': {
|
|
128
|
+
marginTop: '0.2em',
|
|
129
|
+
marginBottom: '0.2em',
|
|
130
|
+
},
|
|
131
|
+
'ol > li > ul, ol > li > ol': {
|
|
132
|
+
marginTop: '0.2em',
|
|
133
|
+
marginBottom: '0.5em',
|
|
134
|
+
},
|
|
135
|
+
'ul + p, ol + p, ul + pre, ol + pre': {
|
|
136
|
+
marginTop: '2em',
|
|
137
|
+
},
|
|
138
|
+
img: {
|
|
139
|
+
marginTop: '2em',
|
|
140
|
+
marginBottom: '0.5em',
|
|
141
|
+
borderRadius: '0.25em',
|
|
142
|
+
},
|
|
143
|
+
figure: {
|
|
144
|
+
marginTop: '2em',
|
|
145
|
+
marginBottom: '2em',
|
|
146
|
+
},
|
|
147
|
+
table: {
|
|
148
|
+
width: '100%',
|
|
149
|
+
tableLayout: 'fixed',
|
|
150
|
+
marginTop: '2em',
|
|
151
|
+
marginBottom: '2em',
|
|
152
|
+
},
|
|
153
|
+
'thead th': {
|
|
154
|
+
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
|
155
|
+
fontWeight: '600',
|
|
156
|
+
padding: '0.75em 1em',
|
|
157
|
+
},
|
|
158
|
+
'tbody td': {
|
|
159
|
+
padding: '0.75em 1em',
|
|
160
|
+
verticalAlign: 'top',
|
|
161
|
+
borderColor: 'rgba(0, 0, 0, 0.1)',
|
|
162
|
+
},
|
|
163
|
+
pre: {
|
|
164
|
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
165
|
+
color: '#f8f8f2',
|
|
166
|
+
marginTop: '2em',
|
|
167
|
+
marginBottom: '2em',
|
|
168
|
+
padding: '1.5em',
|
|
169
|
+
borderRadius: '0.5em',
|
|
170
|
+
overflow: 'auto',
|
|
171
|
+
},
|
|
172
|
+
code: {
|
|
173
|
+
fontFamily: 'Monaco, Consolas, "Courier New", monospace',
|
|
174
|
+
fontSize: '16px',
|
|
175
|
+
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
|
176
|
+
padding: '0.2em 0.4em',
|
|
177
|
+
borderRadius: '0.25em',
|
|
178
|
+
color: '#333',
|
|
179
|
+
fontWeight: '500',
|
|
180
|
+
},
|
|
181
|
+
'pre code': {
|
|
182
|
+
backgroundColor: 'transparent',
|
|
183
|
+
color: '#f8f8f2',
|
|
184
|
+
padding: '0',
|
|
185
|
+
fontSize: '16px',
|
|
186
|
+
},
|
|
187
|
+
a: {
|
|
188
|
+
color: '#2563eb',
|
|
189
|
+
textDecoration: 'none',
|
|
190
|
+
fontWeight: '500',
|
|
191
|
+
'&:hover': {
|
|
192
|
+
textDecoration: 'underline',
|
|
193
|
+
},
|
|
194
|
+
},
|
|
195
|
+
strong: {
|
|
196
|
+
fontWeight: '600',
|
|
197
|
+
color: '#111',
|
|
198
|
+
},
|
|
199
|
+
blockquote: {
|
|
200
|
+
fontStyle: 'italic',
|
|
201
|
+
borderLeftWidth: '0.25rem',
|
|
202
|
+
borderLeftColor: '#e5e7eb',
|
|
203
|
+
paddingLeft: '1rem',
|
|
204
|
+
color: '#4b5563',
|
|
205
|
+
},
|
|
206
|
+
hr: {
|
|
207
|
+
marginTop: '3em',
|
|
208
|
+
marginBottom: '3em',
|
|
209
|
+
},
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
</script>
|
|
217
|
+
|
|
218
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
|
|
219
|
+
<!-- External dependencies are commented out to reduce load time and avoid unnecessary dependencies -->
|
|
220
|
+
<!-- <link rel="stylesheet" href="https://udx.dev/site/static/shared/css/science.usability.v1.css"> -->
|
|
221
|
+
<!-- <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> -->
|
|
222
|
+
<!-- <script src="https://udx.dev/site/static/shared/js/science.usability.v1.js"></script> -->
|
|
223
|
+
|
|
224
|
+
<style>
|
|
225
|
+
{{{styles}}}
|
|
226
|
+
</style>
|
|
227
|
+
</head>
|
|
228
|
+
<body class="bg-primary-100">
|
|
229
|
+
<!-- Google Tag Manager (noscript) -->
|
|
230
|
+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TNKNKJN2" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
231
|
+
<!-- End Google Tag Manager (noscript) -->
|
|
232
|
+
|
|
233
|
+
<div class="min-h-screen bg-primary-100">
|
|
234
|
+
<div class="chapter-nav-container">
|
|
235
|
+
<nav id="chapter-navigation" class="chapter-navigation" aria-label="Chapter navigation">
|
|
236
|
+
<ul class="chapter-nav-list" role="list">
|
|
237
|
+
{{#each chapters}}
|
|
238
|
+
{{#if (eq this.level 2)}}
|
|
239
|
+
<li class="chapter-nav-item" data-chapter-id="{{this.id}}" role="listitem">
|
|
240
|
+
<a href="#{{this.id}}" class="chapter-nav-link">{{this.title}}</a>
|
|
241
|
+
</li>
|
|
242
|
+
{{/if}}
|
|
243
|
+
{{/each}}
|
|
244
|
+
</ul>
|
|
245
|
+
</nav>
|
|
246
|
+
<!-- Mobile dropdown navigation -->
|
|
247
|
+
<nav class="mobile-chapter-nav" aria-label="Chapter navigation on mobile">
|
|
248
|
+
<div class="mobile-chapter-dropdown">
|
|
249
|
+
<button id="chapter-dropdown-btn" class="chapter-dropdown-btn" aria-expanded="false" aria-controls="chapter-dropdown-menu" aria-haspopup="true">
|
|
250
|
+
<span class="current-chapter" aria-live="polite">Current Section</span>
|
|
251
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="dropdown-icon" viewBox="0 0 16 16" aria-hidden="true">
|
|
252
|
+
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
|
|
253
|
+
</svg>
|
|
254
|
+
</button>
|
|
255
|
+
<div id="chapter-dropdown-menu" class="chapter-dropdown-menu" role="menu">
|
|
256
|
+
<ul>
|
|
257
|
+
{{#each chapters}}
|
|
258
|
+
{{#if (eq this.level 2)}}
|
|
259
|
+
<li data-chapter-id="{{this.id}}" role="menuitem">
|
|
260
|
+
<a href="#{{this.id}}">{{this.title}}</a>
|
|
261
|
+
</li>
|
|
262
|
+
{{/if}}
|
|
263
|
+
{{/each}}
|
|
264
|
+
</ul>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</nav>
|
|
268
|
+
</div>
|
|
269
|
+
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 chapter-content">
|
|
270
|
+
<article class="prose prose-lg lg:prose-xl mx-auto max-w-4xl" data-document-version="{{version}}" data-document-id="{{slugify title}}">
|
|
271
|
+
<main class="article">
|
|
272
|
+
{{{content}}}
|
|
273
|
+
</main>
|
|
274
|
+
</article>
|
|
275
|
+
</main>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<script>
|
|
279
|
+
{{{scripts}}}
|
|
280
|
+
</script>
|
|
281
|
+
|
|
282
|
+
<!-- Analytics and tracking - DO NOT REMOVE -->
|
|
283
|
+
<script>
|
|
284
|
+
window.onload = () => setTimeout(() => {
|
|
285
|
+
// Create data-version attribute on article for tracking
|
|
286
|
+
const articleEl = document.querySelector('article');
|
|
287
|
+
const docVersion = '{{version}}' || 'v1';
|
|
288
|
+
if (articleEl && !articleEl.hasAttribute('data-version')) {
|
|
289
|
+
articleEl.setAttribute('data-version', docVersion);
|
|
290
|
+
}
|
|
291
|
+
console.debug(`Document Version: ${docVersion}`);
|
|
292
|
+
|
|
293
|
+
// Track page view with dataLayer
|
|
294
|
+
if (window.dataLayer) {
|
|
295
|
+
dataLayer.push({
|
|
296
|
+
'event': 'page_view',
|
|
297
|
+
'page_title': document.title,
|
|
298
|
+
'page_location': window.location.href,
|
|
299
|
+
'page_path': window.location.pathname,
|
|
300
|
+
'document_version': docVersion
|
|
301
|
+
});
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
// Initialize the annotation system if available
|
|
305
|
+
if (window.ScienceUsability && typeof ScienceUsability.init === 'function') {
|
|
306
|
+
console.log('Initializing ScienceUsability annotation system...');
|
|
307
|
+
ScienceUsability.init({
|
|
308
|
+
dataEndpoint: '/static/api/web/',
|
|
309
|
+
defaultArticle: '{{slugify title}}',
|
|
310
|
+
smoothScroll: true,
|
|
311
|
+
revealAnimations: true
|
|
312
|
+
});
|
|
313
|
+
} else {
|
|
314
|
+
console.debug('ScienceUsability annotation system not available.');
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
// Track downloads and outbound links
|
|
318
|
+
document.querySelectorAll('a').forEach(link => {
|
|
319
|
+
if (!link.hasAttribute('data-tracked')) {
|
|
320
|
+
link.setAttribute('data-tracked', 'true');
|
|
321
|
+
link.addEventListener('click', (e) => {
|
|
322
|
+
const href = link.getAttribute('href');
|
|
323
|
+
const isDownload = link.hasAttribute('download') || href.match(/\.(pdf|docx?|xlsx?|zip|rar|gz|tar)$/i);
|
|
324
|
+
const isExternal = href && href.startsWith('http') && !href.includes('udx.dev');
|
|
325
|
+
|
|
326
|
+
if ((isDownload || isExternal) && window.dataLayer) {
|
|
327
|
+
dataLayer.push({
|
|
328
|
+
'event': isDownload ? 'file_download' : 'outbound_link',
|
|
329
|
+
'event_category': isDownload ? 'Downloads' : 'Outbound Links',
|
|
330
|
+
'event_label': href,
|
|
331
|
+
'value': 1
|
|
332
|
+
});
|
|
333
|
+
console.debug(`Tracked ${isDownload ? 'download' : 'outbound link'}: ${href}`);
|
|
334
|
+
}
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
}, 100);
|
|
339
|
+
</script>
|
|
340
|
+
</body>
|
|
341
|
+
</html>
|