web-documentation 1.0.32 → 1.0.33

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "web-documentation",
3
- "version": "1.0.32",
3
+ "version": "1.0.33",
4
4
  "description": "Declarative multilanguage documentation website generator",
5
5
  "keywords": [
6
6
  "documentation",
@@ -50,7 +50,7 @@
50
50
  "watch": "weboptimizer build --watch"
51
51
  },
52
52
  "devDependencies": {
53
- "@aws-sdk/client-s3": "^3.1064.0",
53
+ "@aws-sdk/client-s3": "^3.1065.0",
54
54
  "@babel/eslint-parser": "^7.29.7",
55
55
  "@babel/runtime": "^7.29.7",
56
56
  "@eslint/js": "^10.0.1",
@@ -104,11 +104,11 @@
104
104
  "typescript-eslint": "^8.61.0",
105
105
  "ua-parser-js": "^2.0.10",
106
106
  "unzipper": "^0.12.3",
107
- "web-component-wrapper": "^0.0.595",
108
- "web-internationalization": "^2.0.38",
107
+ "web-component-wrapper": "^0.0.596",
108
+ "web-internationalization": "^2.0.39",
109
109
  "weboptimizer": "^3.0.24",
110
110
  "webpack-dev-server": "^5.2.4",
111
- "website-utilities": "^1.0.440"
111
+ "website-utilities": "^1.0.442"
112
112
  },
113
113
  "engines": {
114
114
  "node": ">=24",
@@ -244,6 +244,7 @@
244
244
  }
245
245
  }
246
246
  },
247
+ "offline": null,
247
248
  "path": {
248
249
  "source": {
249
250
  "asset": {
package/source/index.css CHANGED
@@ -31,17 +31,32 @@ endregion */
31
31
  body {
32
32
  /* region constants */
33
33
  /** region color */
34
- --color1: #fff;
35
- --color2: #fbfbfc;
36
- --color3: #f7f7f9;
37
- --color4: #ddd;
38
- --color5: #cbcbcd;
39
- --color6: #797979;
40
- --color7: #333;
41
- --color8: #212121;
42
- --color9: black;
43
- --color10: #0090ff;
44
- --color11: #0069ba;
34
+ --background-color: white; /* pure white */
35
+
36
+ --header-background-color: #333; /* gray */
37
+ --header-background-gradient: linear-gradient(
38
+ to bottom, var(--header-background-color), var(--headline-color)
39
+ );
40
+ --header-font-color: var(--background-color);
41
+
42
+ --surface-color: #fcffff; /* blueish white */
43
+ --surface-border-color: #ddd; /* light gray */
44
+
45
+ --shadow-color: black;
46
+
47
+ --font-color: var(--header-background-color);
48
+ --headline-color: #212121; /* light black */
49
+
50
+ --link-color: #0078d4; /* blue */
51
+ --link-hover-color: #003a67; /* dark blue */
52
+
53
+ --footer-background-color: var(--surface-color);
54
+ --footer-background-gradient: linear-gradient(
55
+ to bottom, var(--background-color), var(--surface-color)
56
+ );
57
+ --footer-font-color: var(--font-color);
58
+ --footer-link-color: var(--link-color);
59
+ --footer-link-hover-color: var(--link-hover-color);
45
60
  /** endregion */
46
61
  /* endregion */
47
62
  /* region custom properties */
@@ -95,15 +110,10 @@ body {
95
110
  /* stylelint-enable at-rule-no-unknown */
96
111
  /* endregion */
97
112
  /* region global */
98
- /*
99
- NOTE: If we swap these lines to order alphabetical bodies background
100
- color does not get overwritten.
101
- */
102
- background-color: var(--color8);
103
- color: var(--color7);
113
+ color: var(--font-color);
104
114
 
105
115
  font-family: var(--wu-typography-font-family);
106
- font-size: 14px;
116
+ font-size: 19px;
107
117
 
108
118
  margin: 0;
109
119
  line-height: 1.5;
@@ -113,24 +123,69 @@ body {
113
123
  ::before {
114
124
  box-sizing: border-box;
115
125
  }
116
- /** region grid */
117
- .header__inner,
118
- .section__inner,
119
- .footer__inner {
126
+ /* endregion */
127
+ }
128
+
129
+ .wd-no-javascript {
130
+ .wu-window-loading-cover, .wd-header__inner__links__lang {
131
+ display: none;
132
+ }
133
+ }
134
+
135
+ .wu-scroll-to-top {
136
+ display: none;
137
+
138
+ font-size: 0.9rem;
139
+
140
+ right: 45px;
141
+ z-index: 4;
142
+
143
+ @media (--wu-extra-extra-small) {
144
+ @media (--wu-extra-small) {
145
+ @media (--wu-small) {
146
+ /* Bigger devices get a scroll top button. */
147
+ display: block;
148
+ }
149
+ }
150
+ }
151
+ }
152
+ /* NOTE: We need to combine with generic link color transition. */
153
+ .wd a.wu-scroll-to-top {
154
+ transition-property: bottom, opacity, color;
155
+ }
156
+
157
+ .wu-scroll-to-top.wu-scroll-up {
158
+ bottom: calc(2 * 34px);
159
+ }
160
+
161
+ .wu-scroll-to-top.wu-scroll-down {
162
+ bottom: 34px;
163
+ }
164
+
165
+ .wd {
166
+ lang-replacement,
167
+ lang-alternative:not([active]),
168
+ .wi-hide {
169
+ display: none !important;
170
+ }
171
+ /* region grid */
172
+ .wd-header__inner,
173
+ .wd-section__inner,
174
+ .wd-footer__inner {
120
175
  position: relative;
121
176
 
122
177
  margin: 0 auto;
123
178
  padding: var(--wu-default-space) calc(var(--wu-default-space) / 2);
124
179
  }
125
- /** endregion */
126
- /** region headline */
180
+ /* endregion */
181
+ /* region headline */
127
182
  h1,
128
183
  h2,
129
184
  h3,
130
185
  h4,
131
186
  h5,
132
187
  h6 {
133
- color: var(--color8);
188
+ color: var(--headline-color);
134
189
 
135
190
  font-family: var(--wu-typography-font-family-headline);
136
191
  font-size: 2em;
@@ -140,10 +195,10 @@ body {
140
195
  }
141
196
  h1 { font-size: 4em; }
142
197
  h2 { font-size: 3em; }
143
- /** endregion */
144
- /** region link */
198
+ /* endregion */
199
+ /* region link */
145
200
  a {
146
- color: var(--color10);
201
+ color: var(--link-color);
147
202
  outline: none !important;
148
203
  text-shadow: none;
149
204
  transition: color 0.5s ease, background-color 0.5s ease;
@@ -158,63 +213,25 @@ body {
158
213
  }
159
214
  }
160
215
 
161
- a:hover { color: var(--color11); }
162
-
163
- website-utilities {
164
- .wu-scroll-to-top {
165
- right: 45px;
166
- z-index: 4;
167
- }
168
-
169
- .wu-scroll-to-top.wu-scroll-up {
170
- bottom: calc(2 * 34px);
171
- }
172
-
173
- .wu-scroll-to-top.wu-scroll-down {
174
- bottom: 34px;
175
- }
176
- }
177
- /** endregion */
178
- /** region image */
179
- /*** region generic */
180
- /* stylelint-disable at-rule-no-unknown */
181
- [class^="icon-"],
182
- [class*=" icon-"],
183
- .icon { @mixin icon; }
184
- /* stylelint-disable selector-class-pattern */
185
- .icon- {
186
- &blacktocat { @mixin icon-blacktocat; }
187
- &blue-archiv { @mixin icon-archiv-blue; }
188
- &download { @mixin icon-download; }
189
- &gray-archiv { @mixin icon-archiv-gray; }
190
- }
191
- /* stylelint-enable selector-class-pattern */
192
- /* stylelint-enable at-rule-no-unknown */
193
- /*** endregion */
194
- /** endregion */
195
- lang-replacement, .wi-hide {
196
- display: none;
216
+ a:hover {
217
+ color: var(--link-hover-color);
197
218
  }
198
219
  /* endregion */
199
220
  /* region header */
200
- .header {
201
- background-image:
202
- linear-gradient(
203
- to bottom,
204
- var(--color7),
205
- var(--color8)
206
- );
221
+ .wd-header {
222
+ background-color: var(--header-background-color);
223
+ background-image: var(--header-background-gradient);
207
224
  width: 100%;
208
225
  }
209
226
 
210
- .header__inner {
227
+ .wd-header__inner {
211
228
  padding: 50px 10px 30px;
212
229
 
213
- .header__inner__forkme-banner {
214
- background-color: var(--color10);
230
+ .wd-header__inner__forkme-banner {
231
+ background-color: var(--link-color);
215
232
  border-radius: 0 0 2px 2px;
216
- box-shadow: 0 0 10px var(--color9);
217
- color: var(--color1);
233
+ box-shadow: 0 0 10px var(--shadow-color);
234
+ color: var(--header-font-color);
218
235
  display: block;
219
236
  font-weight: 700;
220
237
  padding: 10px;
@@ -224,12 +241,12 @@ body {
224
241
  z-index: 10;
225
242
 
226
243
  &:hover {
227
- background-color: var(--color11);
228
- color: var(--color1);
244
+ background-color: var(--link-hover-color);
245
+ color: var(--header-font-color);
229
246
  }
230
247
  }
231
248
 
232
- .header__inner__forkme-banner__icon-github {
249
+ .wd-header__inner__forkme-banner__icon-github {
233
250
  /* stylelint-disable at-rule-no-unknown */
234
251
  @mixin icon-blacktocat;
235
252
  /* stylelint-enable at-rule-no-unknown */
@@ -239,25 +256,25 @@ body {
239
256
  margin-top: -6px;
240
257
  }
241
258
 
242
- .header__inner__title,
243
- .header__inner__tagline {
259
+ .wd-header__inner__title,
260
+ .wd-header__inner__tagline {
244
261
  border: none;
245
- color: var(--color1);
246
- text-shadow: var(--color9) 0 0 10px;
262
+ color: var(--header-font-color);
263
+ text-shadow: var(--shadow-color) 0 0 10px;
247
264
 
248
265
  a {
249
- color: var(--color1);
250
- text-shadow: var(--color9) 0 0 10px;
266
+ color: var(--header-font-color);
267
+ text-shadow: var(--shadow-color) 0 0 10px;
251
268
  }
252
269
  }
253
270
 
254
- .header__inner__tagline {
271
+ .wd-header__inner__tagline {
255
272
  background: none;
256
273
  font-size: 2em;
257
274
  font-weight: 300;
258
275
  }
259
276
 
260
- .header__inner__links {
277
+ .wd-header__inner__links {
261
278
  bottom: -40px;
262
279
  height: 70px;
263
280
  padding: 0;
@@ -267,7 +284,7 @@ body {
267
284
  z-index: 10;
268
285
  }
269
286
 
270
- .header__inner__links__api-link {
287
+ .wd-header__inner__links__api-link {
271
288
  float: left;
272
289
 
273
290
  margin-left: 10px;
@@ -278,8 +295,9 @@ body {
278
295
  }
279
296
  }
280
297
 
281
- .header__inner__links__lang {
282
- color: var(--color6);
298
+ .wd-header__inner__links__lang {
299
+ color: var(--link-color);
300
+ font-size: 1.3rem;
283
301
 
284
302
  float: right;
285
303
 
@@ -287,15 +305,19 @@ body {
287
305
  padding-top: 35px;
288
306
 
289
307
  &.current {
290
- color: var(--color7);
308
+ color: var(--font-color);
309
+
310
+ &:hover {
311
+ color: var(--font-color);
312
+ }
291
313
  }
292
314
 
293
315
  &:hover {
294
- color: var(--color8);
316
+ color: var(--link-hover-color);
295
317
  }
296
318
  }
297
319
 
298
- .header__inner__links__download-arrow {
320
+ .wd-header__inner__links__download-arrow {
299
321
  /* stylelint-disable at-rule-no-unknown */
300
322
  @mixin icon-download;
301
323
  /* stylelint-enable at-rule-no-unknown */
@@ -307,15 +329,15 @@ body {
307
329
  }
308
330
  /* region download buttons */
309
331
 
310
- .header__inner__links__download {
332
+ .wd-header__inner__links__download {
311
333
  /* stylelint-disable at-rule-no-unknown */
312
334
  @mixin icon-archiv-gray;
313
335
  /* stylelint-enable at-rule-no-unknown */
314
336
 
315
- color: var(--color1);
337
+ color: var(--header-font-color);
316
338
  display: block;
317
339
  float: right;
318
- font-size: 1.2em;
340
+ font-size: 1.1rem;
319
341
  font-weight: bolder;
320
342
  height: 66px;
321
343
  margin-right: calc(var(--wu-default-space) / 2);
@@ -325,12 +347,12 @@ body {
325
347
  width: 80px;
326
348
  }
327
349
 
328
- .header__inner__links__download:hover {
350
+ .wd-header__inner__links__download:hover {
329
351
  /* stylelint-disable at-rule-no-unknown */
330
352
  @mixin icon-archiv-blue;
331
353
  /* stylelint-enable at-rule-no-unknown */
332
354
 
333
- color: var(--color1);
355
+ color: var(--header-font-color);
334
356
  height: 66px;
335
357
  width: 80px;
336
358
  }
@@ -338,23 +360,39 @@ body {
338
360
  }
339
361
  /* endregion */
340
362
  /* region footer */
341
- .footer__inner {
342
- padding-left: 0;
343
- padding-right: 0;
344
- text-align: center;
345
- width: 100%;
363
+ .wd-footer {
364
+ background-color: var(--footer-background-color);
365
+ background-image: var(--footer-background-gradient);
346
366
 
347
- p { color: var(--color3); }
348
- a:hover { color: var(--color11); }
367
+ .wd-footer__inner {
368
+ width: 100%;
369
+ padding-left: 0;
370
+ padding-right: 0;
371
+
372
+ text-align: center;
373
+ font-size: 0.9rem;
374
+
375
+ p {
376
+ color: var(--footer-font-color);
377
+ }
378
+
379
+ a {
380
+ color: var(--footer-link-color);
381
+
382
+ &:hover {
383
+ color: var(--footer-link-hover-color);
384
+ }
385
+ }
386
+ }
349
387
  }
350
388
  /* endregion */
351
389
  /* region section */
352
- .section {
353
- background-color: var(--color1);
390
+ .wd-section {
391
+ background-color: var(--background-color);
354
392
  overflow: auto;
355
393
  overflow-wrap: break-word;
356
394
 
357
- .section__about-this-website {
395
+ .wd-section__about-this-website {
358
396
  a[href="#home"] {
359
397
  display: inline-block;
360
398
  float: left;
@@ -368,15 +406,19 @@ body {
368
406
  }
369
407
  }
370
408
 
371
- .section__inner {
409
+ .wd-section__inner {
372
410
  padding-top: 40px;
373
411
  }
374
412
 
375
- .section__home {
413
+ .wd-section__home {
376
414
  p {
377
415
  margin: var(--wu-default-space) 0 0 0;
378
416
  }
379
417
 
418
+ pre {
419
+ margin-bottom: 14px;
420
+ }
421
+
380
422
  code {
381
423
  display: block;
382
424
  padding: 9.5px;
@@ -387,27 +429,25 @@ body {
387
429
  color: #333;
388
430
  overflow: auto;
389
431
 
390
- background-color: var(--color2);
432
+ background-color: var(--surface-color);
391
433
 
392
- border: 1px solid var(--color4);
434
+ border: 1px solid var(--surface-border-color);
393
435
 
394
436
  margin: var(--wu-default-space) 0 0 0;
395
437
  }
396
438
 
397
- .show-example-wrapper {
398
- background-color: var(--color2);
439
+ .wd-show-example-wrapper {
440
+ background-color: var(--surface-color);
399
441
 
400
- border: 1px solid var(--color4);
442
+ border: 1px solid var(--surface-border-color);
401
443
  border-top: 0;
402
444
 
403
445
  margin-top: -14px;
404
446
  padding: calc(var(--wu-default-space) / 2);
405
447
 
406
448
  h3 {
407
- color: var(--color5);
408
449
  font-family: var(--wu-typography-font-family);
409
- font-size: 0.9em;
410
- font-weight: bold;
450
+ font-size: 0.7em;
411
451
  letter-spacing: 1px;
412
452
  margin-bottom: calc(var(--wu-default-space) / 2);
413
453
  margin-top: 0;
@@ -425,7 +465,7 @@ body {
425
465
  @media (--wu-extra-extra-small) {
426
466
  /** region extra small */
427
467
  @media (--wu-extra-small) {
428
- .header__inner__links__api-link span {
468
+ .wd-header__inner__links__api-link span {
429
469
  display: initial;
430
470
  }
431
471
 
@@ -433,41 +473,31 @@ body {
433
473
  /* region small */
434
474
  /** region headline */
435
475
  h2 {
436
- border-bottom: 1px dashed var(--color4);
476
+ border-bottom: 1px dashed var(--surface-border-color);
437
477
  padding-bottom: 10px;
438
478
  }
439
479
  /** endregion */
440
480
 
441
- .header__inner,
442
- .section__inner,
443
- .footer__inner { width: 715px; }
481
+ .wd-header__inner,
482
+ .wd-section__inner,
483
+ .wd-footer__inner { width: 715px; }
444
484
 
445
- .header__inner__links {
485
+ .wd-header__inner__links {
446
486
  width: 706px;
447
487
  }
448
488
 
449
- .section__home {
489
+ .wd-section__home {
450
490
  code {
451
491
  font-size: 0.8em;
452
492
  width: 695px;
453
493
  }
454
494
 
455
- .show-example-wrapper { width: 100%; }
456
- }
457
-
458
- .top-link {
459
- bottom: 34px;
460
- position: fixed;
461
- right: 5px;
462
- visibility: visible;
463
- z-index: 4;
495
+ .wd-show-example-wrapper { width: 100%; }
464
496
  }
465
497
  /* endregion */
466
498
  /* region medium */
467
499
  @media (--wu-medium) {
468
- .top-link { right: 45px; }
469
-
470
- .section__home code {
500
+ .wd-section__home code {
471
501
  font-size: 0.9em;
472
502
  }
473
503
  }
@@ -17,7 +17,7 @@ const getStartUpAnimationNumber = () => {
17
17
  return START_UP_ANIMATION_NUMBER
18
18
  }
19
19
  _%>
20
- <html class="wu-no-javascript" lang="en">
20
+ <html class="wd-no-javascript" lang="en">
21
21
  <!--region head-->
22
22
  <head>
23
23
  <meta charset="utf-8">
@@ -39,16 +39,16 @@ _%>
39
39
  <script>
40
40
  AUTO_DEFINE_WEB_DOCUMENTATION = true
41
41
 
42
- window.document.documentElement.classList.remove('wu-no-javascript')
43
- window.document.documentElement.classList.add('wu-javascript')
42
+ window.document.documentElement.classList.remove('wd-no-javascript')
43
+ window.document.documentElement.classList.add('wd-javascript')
44
44
  </script>
45
45
  </head>
46
46
  <!--endregion-->
47
47
  <!--region body-->
48
- <body class="wu-no-javascript">
48
+ <body class="wd-no-javascript">
49
49
  <script>
50
- window.document.body.classList.remove('wu-no-javascript')
51
- window.document.body.classList.add('wu-javascript')
50
+ window.document.body.classList.remove('wd-no-javascript')
51
+ window.document.body.classList.add('wd-javascript')
52
52
  </script>
53
53
 
54
54
  <div class="wu-window-loading-cover">
@@ -83,31 +83,32 @@ _%>
83
83
  </div>
84
84
  </div>
85
85
 
86
- <web-documentation>
86
+ <web-documentation class="wd wu">
87
87
  <!--region header-->
88
- <header class="header">
89
- <div class="header__inner">
88
+ <header class="wd-header">
89
+ <div class="wd-header__inner">
90
90
  <a
91
- class="header__inner__forkme-banner wu-start-up-animation-number-<%- getStartUpAnimationNumber() %>"
91
+ class="wd-header__inner__forkme-banner wu-start-up-animation-number-<%- getStartUpAnimationNumber() %>"
92
92
  href="<%- _.SOURCE_URL %>"
93
93
  >
94
94
  View on GitHub
95
95
  <!--deDE:GitHub-Projekt-->
96
96
  <!--frFR:GitHub-Project-->
97
97
  <i
98
- class="header__inner__forkme-banner__icon-github"
98
+ class="wd-header__inner__forkme-banner__icon-github"
99
99
  ></i>
100
100
  </a>
101
101
  <h1
102
- class="header__inner__title wu-start-up-animation-number-<%- getStartUpAnimationNumber() %>"
102
+ class="wd-header__inner__title wu-start-up-animation-number-<%- getStartUpAnimationNumber() %>"
103
+ id="home"
103
104
  ><a href="<%- _.URL %>"><%- _.NAME %></a>
104
105
  <h2
105
- class="header__inner__tagline wu-start-up-animation-number-<%- getStartUpAnimationNumber() %>"
106
+ class="wd-header__inner__tagline wu-start-up-animation-number-<%- getStartUpAnimationNumber() %>"
106
107
  >
107
108
  <%- _.TAGLINE %>
108
109
  <br />
109
110
  </h2>
110
- <div class="header__inner__links">
111
+ <div class="wd-header__inner__links">
111
112
  <!--NOTE: These elements are shown in reverse order.-->
112
113
  <%_
113
114
  let numberOfLanguageLinks = 0
@@ -123,28 +124,28 @@ _%>
123
124
  _%>
124
125
  <%_ if (_.DISTRIBUTION_BUNDLE_FILE_PATH) { _%>
125
126
  <a
126
- class="header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
127
+ class="wd-header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
127
128
  href="https://github.com/thaibault/<%- _.NAME %>/zipball/main"
128
129
  >src.zip</a>
129
130
  <%_ START_UP_ANIMATION_NUMBER -= 1 _%>
130
131
  <a
131
- class="header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
132
+ class="wd-header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
132
133
  href="<%- `${_.URL}/${_.DISTRIBUTION_BUNDLE_FILE_PATH}` %>"
133
134
  >app.zip</a>
134
135
  <%_ } else { _%>
135
136
  <a
136
- class="header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
137
+ class="wd-header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
137
138
  href="https://github.com/thaibault/<%- _.NAME %>/zipball/main"
138
139
  >.zip</a>
139
140
  <%_ START_UP_ANIMATION_NUMBER -= 1 _%>
140
141
  <a
141
- class="header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
142
+ class="wd-header__inner__links__download wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
142
143
  href="https://github.com/thaibault/<%- _.NAME %>/tarball/main"
143
144
  >.tar.gz</a>
144
145
  <%_ }
145
146
  START_UP_ANIMATION_NUMBER -= 1 _%>
146
147
  <i
147
- class="header__inner__links__download-arrow wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
148
+ class="wd-header__inner__links__download-arrow wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
148
149
  ></i>
149
150
  <%_
150
151
  if (numberOfLanguageLinks)
@@ -152,14 +153,14 @@ _%>
152
153
  START_UP_ANIMATION_NUMBER -= 1
153
154
  _%>
154
155
  <a
155
- class="header__inner__links__lang tools-hidden-on-javascript-disabled wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
156
+ class="wd-header__inner__links__lang wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
156
157
  href="#lang-<%- language %>"
157
158
  ><%- language.slice(0, 2) %></a>
158
159
  <%_ } _%>
159
160
  <%_ if (_.HAS_API_DOCUMENTATION) { _%>
160
161
  <%_ START_UP_ANIMATION_NUMBER -= 1 _%>
161
162
  <a
162
- class="header__inner__links__api-link wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
163
+ class="wd-header__inner__links__api-link wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
163
164
  href="<%- _.URL %>/<%- _.API_DOCUMENTATION_PATH %>"
164
165
  >
165
166
  <lang-replace>
@@ -183,10 +184,10 @@ _%>
183
184
  </div>
184
185
  </header>
185
186
  <!--endregion-->
186
- <main class="wu-router-outlet section">
187
+ <main class="wu-router-outlet wd-section">
187
188
  <!--region home-->
188
189
  <section
189
- class="section__inner section__home"
190
+ class="wd-section__inner wd-section__home"
190
191
  data-website-utilities-section="home"
191
192
  >
192
193
  <%_
@@ -207,7 +208,7 @@ _%>
207
208
  <!--endregion-->
208
209
  <!--region about this website-->
209
210
  <section
210
- class="section__inner section__about-this-website"
211
+ class="wd-section__inner wd-section__about-this-website"
211
212
  data-website-utilities-section="about-this-website"
212
213
  >
213
214
  <h2 id="about-this-website">
@@ -262,8 +263,8 @@ _%>
262
263
  </main>
263
264
  <!--endregion-->
264
265
  <!--region footer-->
265
- <footer class="footer">
266
- <div class="footer__inner">
266
+ <footer class="wd-footer">
267
+ <div class="wd-footer__inner">
267
268
  <%_ START_UP_ANIMATION_NUMBER += 1 _%>
268
269
  <p
269
270
  class="wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
@@ -276,7 +277,7 @@ _%>
276
277
  after language switches.
277
278
  */ _%>
278
279
  <a href="https://torben.website"> thaibault</a>
279
- &middot; &copy; 2013 Torben Sickert &middot;
280
+ &middot; &copy; 2026 Torben Sickert &middot;
280
281
  <a href="#about-this-website">
281
282
  about this website
282
283
  <!--deDE:Impressum-->
package/source/index.ts CHANGED
@@ -90,15 +90,15 @@ export class WebDocumentation<
90
90
  static _defaultOptions: DefaultOptions = {
91
91
  selectors: {
92
92
  aboutThisWebsiteLink: 'a[href="#about-this-website"]',
93
- aboutThisWebsiteSection: '.section__about-this-website',
93
+ aboutThisWebsiteSection: '.wd-section__about-this-website',
94
94
 
95
95
  codeWrapper: 'pre',
96
96
  code: 'code',
97
97
 
98
98
  headlines:
99
- '.section__home h1, .section__home h2, ' +
100
- '.section__home h3, .section__home h4, ' +
101
- '.section__home h5, .section__home h6',
99
+ '.wd-section__home h1, .wd-section__home h2, ' +
100
+ '.wd-section__home h3, .wd-section__home h4, ' +
101
+ '.wd-section__home h5, .wd-section__home h6',
102
102
  tableOfContent: '.wd-table-of-contents',
103
103
  tableOfContentLinks: '.wd-table-of-contents ul li a[href^="#"]'
104
104
  },
@@ -106,7 +106,7 @@ export class WebDocumentation<
106
106
  showExample: {
107
107
  domNodeName: '#comment',
108
108
  htmlWrapper: `
109
- <div class="show-example-wrapper">
109
+ <div class="wd-show-example-wrapper">
110
110
  <h3>
111
111
  Example:
112
112
  <!--deDE:Beispiel:-->