@hyperbook/markdown 0.15.3 → 0.17.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.
@@ -0,0 +1,65 @@
1
+ :root {
2
+ --color-background: #1e1e1e;
3
+ --color-text: #f5f5f5;
4
+ --color-text-deactivated: #d6d6d6;
5
+ --color-nav: #222222;
6
+ --color-nav-border: #464646;
7
+ --color-author-background: #2c2c2c;
8
+ --color-author-color: #d6d6d6;
9
+ --color-spacer: #3c3c3c;
10
+ --color-brand: var(--color-brand-dark);
11
+ }
12
+
13
+ header {
14
+ background: var(--color-nav) !important;
15
+ }
16
+
17
+ .branding {
18
+ color: var(--color-brand) !important;
19
+ }
20
+
21
+ .toggle .bar1,
22
+ .toggle .bar2,
23
+ .toggle .bar3 {
24
+ background-color: var(--color-brand) !important;
25
+ }
26
+
27
+ figure[data-rehype-pretty-code-figure] pre,
28
+ code[data-theme*=" "],
29
+ code[data-theme*=" "] span {
30
+ color: var(--shiki-dark);
31
+ background-color: var(--shiki-dark-bg);
32
+ }
33
+
34
+ [data-highlighted-chars] {
35
+ background-color: var(--color-spacer) !important;
36
+ }
37
+
38
+ [data-rehype-pretty-code-title] {
39
+ color: var(--color-text);
40
+ background-color: var(--color-spacer);
41
+ border-color: var(--color-spacer);
42
+ }
43
+
44
+ [data-highlighted-line] {
45
+ background: var(--color-spacer) !important;
46
+ }
47
+
48
+ [data-char-id] {
49
+ background-color: var(--color-spacer);
50
+ }
51
+
52
+ [data-chars-id="r"] {
53
+ background-color: #9f123980 !important;
54
+ color: rgb(249, 168, 212) !important;
55
+ }
56
+
57
+ [data-chars-id="y"] {
58
+ background-color: #854d0e80 !important;
59
+ color: rgb(253, 224, 71) !important;
60
+ }
61
+
62
+ [data-chars-id="l"] {
63
+ background-color: #6b21a880 !important;
64
+ color: rgb(233, 213, 255) !important;
65
+ }
@@ -20,7 +20,6 @@ hyperbook.mermaid = (function () {
20
20
  .replace(/"/g, """)
21
21
  .replace(/'/g, "'");
22
22
  element.innerHTML = escapedData;
23
- console.log(element.innerHTML);
24
23
  }
25
24
  count--;
26
25
  if (count == 0) {
@@ -34,24 +33,20 @@ hyperbook.mermaid = (function () {
34
33
  };
35
34
 
36
35
  const init = () => {
37
- const colorSchemeQueryList = window.matchMedia(
38
- "(prefers-color-scheme: dark)",
39
- );
36
+ const toggle = document.querySelector("dark-mode-toggle");
37
+ if (toggle?.mode == "dark") {
38
+ resetProcessed().then(loadMermaid("dark")).catch(console.error);
39
+ } else {
40
+ resetProcessed().then(loadMermaid("default")).catch(console.error);
41
+ }
40
42
 
41
- const setColorScheme = (e) => {
42
- if (e.matches) {
43
+ document.addEventListener("colorschemechange", (e) => {
44
+ if (e.detail.colorScheme === "dark") {
43
45
  resetProcessed().then(loadMermaid("dark")).catch(console.error);
44
46
  } else {
45
47
  resetProcessed().then(loadMermaid("default")).catch(console.error);
46
48
  }
47
- };
48
-
49
- if (colorSchemeQueryList.matches) {
50
- resetProcessed().then(loadMermaid("dark")).catch(console.error);
51
- } else {
52
- resetProcessed().then(loadMermaid("default")).catch(console.error);
53
- }
54
- colorSchemeQueryList.addEventListener("change", setColorScheme);
49
+ });
55
50
  };
56
51
 
57
52
  init();
@@ -0,0 +1,47 @@
1
+ :root {
2
+ --color-background: white;
3
+ --color-text: black;
4
+ --color-text-deactivated: #242428;
5
+ --color-nav: #f5f5f5;
6
+ --color-nav-border: #3c3c3c;
7
+ --color-author-background: #d6d6d6;
8
+ --color-author-color: #3c3c3c;
9
+ --color-spacer: #a4a4a4;
10
+ }
11
+
12
+ figure[data-rehype-pretty-code-figure] pre,
13
+ code[data-theme*=" "],
14
+ code[data-theme*=" "] span {
15
+ color: var(--shiki-light);
16
+ background-color: var(--shiki-light-bg);
17
+ }
18
+
19
+ [data-rehype-pretty-code-title] {
20
+ color: var(--color-text);
21
+ background-color: var(--color-nav);
22
+ border-color: var(--color-spacer);
23
+ }
24
+
25
+ [data-highlighted-line] {
26
+ background: var(--color-nav) !important;
27
+ }
28
+
29
+ [data-rehype-pretty-code-title] {
30
+ border-color: var(--color-spacer);
31
+ color: var(--color-text);
32
+ }
33
+
34
+ [data-chars-id="r"] {
35
+ color: #9f123980 !important;
36
+ background-color: rgb(249, 168, 212) !important;
37
+ }
38
+
39
+ [data-chars-id="y"] {
40
+ color: #854d0e80 !important;
41
+ background-color: rgb(253, 224, 71) !important;
42
+ }
43
+
44
+ [data-chars-id="l"] {
45
+ color: #6b21a880 !important;
46
+ background-color: rgb(233, 213, 255) !important;
47
+ }
@@ -1,6 +1,5 @@
1
1
  :root {
2
2
  --internal-color-error: #d26466;
3
- --app-height: 100dvh;
4
3
  }
5
4
 
6
5
  .main-grid * {
@@ -17,6 +16,11 @@ a {
17
16
  color: var(--color-brand);
18
17
  }
19
18
 
19
+ #dark-mode-toggle {
20
+ margin-right: 16px;
21
+ line-height: 1;
22
+ }
23
+
20
24
  ul,
21
25
  ol,
22
26
  li {
@@ -33,27 +37,27 @@ side-drawer {
33
37
  border-right-color: var(--color-nav-border);
34
38
  }
35
39
 
36
- .sidebar>.author,
37
- .nav-drawer-content>.author {
40
+ .sidebar > .author,
41
+ .nav-drawer-content > .author {
38
42
  color: var(--color-author-color);
39
43
  background: var(--color-author-background);
40
44
  }
41
45
 
42
- .sidebar>.author:hover,
43
- .nav-drawer-content>.author:hover {
46
+ .sidebar > .author:hover,
47
+ .nav-drawer-content > .author:hover {
44
48
  color: var(--color-brand);
45
49
  }
46
50
 
47
51
  /* Three bars for burger menu */
48
- .toggle>.bar1,
49
- .toggle>.bar2,
50
- .toggle>.bar3 {
52
+ .toggle > .bar1,
53
+ .toggle > .bar2,
54
+ .toggle > .bar3 {
51
55
  background-color: var(--color-brand-text);
52
56
  }
53
57
 
54
- .inverted .toggle>.bar1,
55
- .inverted .toggle>.bar2,
56
- .inverted .toggle>.bar3 {
58
+ .inverted .toggle > .bar1,
59
+ .inverted .toggle > .bar2,
60
+ .inverted .toggle > .bar3 {
57
61
  background-color: var(--color-brand);
58
62
  }
59
63
 
@@ -74,11 +78,11 @@ header.inverted {
74
78
  color: var(--color-brand-text);
75
79
  }
76
80
 
77
- header.inverted>.branding {
81
+ header.inverted > .branding {
78
82
  color: var(--color-brand);
79
83
  }
80
84
 
81
- header.inverted>.branding:hover {
85
+ header.inverted > .branding:hover {
82
86
  color: var(--color-brand);
83
87
  }
84
88
 
@@ -86,7 +90,7 @@ header.inverted>.branding:hover {
86
90
  border-top-color: var(--color-spacer);
87
91
  }
88
92
 
89
- .section>.name {
93
+ .section > .name {
90
94
  color: var(--color-text);
91
95
  border-color: var(--color-spacer);
92
96
  }
@@ -96,15 +100,15 @@ header.inverted>.branding:hover {
96
100
  cursor: pointer;
97
101
  }
98
102
 
99
- .section>.name:hover {
103
+ .section > .name:hover {
100
104
  background: var(--color-spacer);
101
105
  }
102
106
 
103
- .section>.name.empty:hover {
107
+ .section > .name.empty:hover {
104
108
  background: none;
105
109
  }
106
110
 
107
- .section>.name.active {
111
+ .section > .name.active {
108
112
  background: var(--color-background);
109
113
  color: var(--color-brand);
110
114
  }
@@ -123,7 +127,7 @@ header.inverted>.branding:hover {
123
127
  color: var(--color-brand);
124
128
  }
125
129
 
126
- .section>.links {
130
+ .section > .links {
127
131
  border-left-color: var(--color-spacer);
128
132
  }
129
133
 
@@ -190,8 +194,11 @@ a.jump.previous::before {
190
194
  .main-grid {
191
195
  font-family: hyperbook-body, sans-serif;
192
196
  display: grid;
193
- height: var(--app-height);
194
- width: 100dvw;
197
+ position: absolute;
198
+ left: 0;
199
+ right: 0;
200
+ top: 0;
201
+ bottom: 0;
195
202
  grid-template-columns: 300px 1fr;
196
203
  grid-template-rows: 80px 1fr;
197
204
  grid-template-areas:
@@ -202,8 +209,8 @@ a.jump.previous::before {
202
209
  .nav-drawer-content {
203
210
  display: flex;
204
211
  flex-direction: column;
212
+ height: 100%;
205
213
  grid-area: nav;
206
- height: calc(var(--app-height));
207
214
  overflow-y: auto;
208
215
  }
209
216
 
@@ -211,7 +218,6 @@ a.jump.previous::before {
211
218
  display: flex;
212
219
  flex-direction: column;
213
220
  grid-area: nav;
214
- height: calc(var(--app-height) - 80px);
215
221
  overflow-y: auto;
216
222
  border-right-style: solid;
217
223
  border-right-width: 1px;
@@ -219,21 +225,21 @@ a.jump.previous::before {
219
225
  border-right-color: var(--color-nav-border);
220
226
  }
221
227
 
222
- .sidebar>nav,
223
- .nav-drawer-content>nav {
228
+ .sidebar > nav,
229
+ .nav-drawer-content > nav {
224
230
  padding: 20px;
225
231
  flex: 1;
226
232
  }
227
233
 
228
- .sidebar>.author,
229
- .nav-drawer-content>.author {
234
+ .sidebar > .author,
235
+ .nav-drawer-content > .author {
230
236
  text-align: center;
231
237
  text-decoration: none;
232
238
  padding: 20px;
233
239
  }
234
240
 
235
- .sidebar>.author,
236
- .nav-drawer-content>.author>b {
241
+ .sidebar > .author,
242
+ .nav-drawer-content > .author > b {
237
243
  font-weight: bold;
238
244
  }
239
245
 
@@ -253,9 +259,9 @@ a.jump.previous::before {
253
259
  cursor: pointer;
254
260
  }
255
261
 
256
- .toggle>.bar1,
257
- .toggle>.bar2,
258
- .toggle>.bar3 {
262
+ .toggle > .bar1,
263
+ .toggle > .bar2,
264
+ .toggle > .bar3 {
259
265
  width: 35px;
260
266
  height: 5px;
261
267
  margin: 6px 0;
@@ -371,7 +377,7 @@ header {
371
377
  margin-right: 8px;
372
378
  }
373
379
 
374
- #custom-links-footer>.links-item {
380
+ #custom-links-footer > .links-item {
375
381
  border-radius: 8px;
376
382
  padding: 8px;
377
383
  border: 1px solid var(--color-nav-border);
@@ -383,7 +389,6 @@ header {
383
389
  margin-left: 24px;
384
390
  }
385
391
 
386
-
387
392
  @media (max-width: 960px) {
388
393
  #custom-links-header {
389
394
  display: none;
@@ -551,13 +556,13 @@ header {
551
556
 
552
557
  .section ul,
553
558
  .virtual-section ul,
554
- nav>ul {
559
+ nav > ul {
555
560
  list-style-type: none;
556
561
  margin: 0;
557
562
  padding: 0;
558
563
  }
559
564
 
560
- nav li+li {
565
+ nav li + li {
561
566
  margin-top: 0px;
562
567
  }
563
568
 
@@ -571,7 +576,7 @@ nav li+li {
571
576
  margin-top: 8px;
572
577
  }
573
578
 
574
- .section>.name {
579
+ .section > .name {
575
580
  display: flex;
576
581
  text-decoration: none;
577
582
  padding: 10px;
@@ -581,12 +586,12 @@ nav li+li {
581
586
  user-select: none;
582
587
  }
583
588
 
584
- .section>.name>.label {
589
+ .section > .name > .label {
585
590
  flex: 1;
586
591
  text-decoration: none;
587
592
  }
588
593
 
589
- .section>.name>.toggle {
594
+ .section > .name > .toggle {
590
595
  text-align: right;
591
596
  background: none;
592
597
  border: none;
@@ -609,14 +614,14 @@ nav li+li {
609
614
  content: "\2212";
610
615
  }
611
616
 
612
- .collapsible.expanded+.collapsible-content {
613
- max-height: 9999px;
617
+ .collapsible-content {
618
+ display: none;
619
+ opacity: 0;
614
620
  }
615
621
 
616
- .collapsible-content {
617
- overflow: hidden;
618
- max-height: 0;
619
- transition: max-height 0.1s ease-out;
622
+ .collapsible.expanded + .collapsible-content {
623
+ display: block;
624
+ opacity: 1;
620
625
  }
621
626
 
622
627
  .section .section {
@@ -630,12 +635,11 @@ nav li+li {
630
635
  text-decoration: none;
631
636
  }
632
637
 
633
- .section>.links {
638
+ .section > .links {
634
639
  border-left-width: 1px;
635
640
  border-left-style: solid;
636
641
  }
637
642
 
638
-
639
643
  .pages {
640
644
  margin-top: 30px;
641
645
  }
@@ -663,12 +667,12 @@ nav.toc li {
663
667
  margin-bottom: 8px;
664
668
  }
665
669
 
666
- nav.toc li>a {
670
+ nav.toc li > a {
667
671
  color: var(--color-text);
668
672
  text-decoration: none;
669
673
  }
670
674
 
671
- nav.toc li>a:hover {
675
+ nav.toc li > a:hover {
672
676
  color: var(--color-brand);
673
677
  }
674
678
 
package/dist/index.js CHANGED
@@ -64183,45 +64183,6 @@ body::-webkit-scrollbar {
64183
64183
  `;
64184
64184
  }
64185
64185
  rootCss += `
64186
- :root {
64187
- --color-background: white;
64188
- --color-text: black;
64189
- --color-text-deactivated: #242428;
64190
- --color-nav: #f5f5f5;
64191
- --color-nav-border: #3c3c3c;
64192
- --color-author-background: #d6d6d6;
64193
- --color-author-color: #3c3c3c;
64194
- --color-spacer: #a4a4a4;
64195
- }
64196
-
64197
- @media (prefers-color-scheme: dark) {
64198
- :root {
64199
- --color-background: #1e1e1e;
64200
- --color-text: #f5f5f5;
64201
- --color-text-deactivated: #d6d6d6;
64202
- --color-nav: #222222;
64203
- --color-nav-border: #464646;
64204
- --color-author-background: #2c2c2c;
64205
- --color-author-color: #d6d6d6;
64206
- --color-spacer: #3c3c3c;
64207
- --color-brand: var(--color-brand-dark);
64208
- }
64209
-
64210
- header {
64211
- background: var(--color-nav)!important;
64212
- }
64213
-
64214
- .branding {
64215
- color: var(--color-brand)!important;
64216
- }
64217
-
64218
- .toggle .bar1,
64219
- .toggle .bar2,
64220
- .toggle .bar3 {
64221
- background-color: var(--color-brand)!important;
64222
- }
64223
- }
64224
-
64225
64186
  body {
64226
64187
  overscroll-behavior-x: none;
64227
64188
  background-color: transparent;
@@ -64346,6 +64307,52 @@ var rehypeHtmlStructure_default = (ctx) => () => {
64346
64307
  children: []
64347
64308
  },
64348
64309
  makeRootCssElement(ctx),
64310
+ {
64311
+ type: "element",
64312
+ tagName: "noscript",
64313
+ properties: {
64314
+ id: "dark-mode-toggle-stylesheets"
64315
+ },
64316
+ children: [
64317
+ {
64318
+ type: "element",
64319
+ tagName: "link",
64320
+ properties: {
64321
+ rel: "stylesheet",
64322
+ href: makeUrl(["light.css"], "assets"),
64323
+ media: "(prefers-color-scheme: light)"
64324
+ },
64325
+ children: []
64326
+ },
64327
+ {
64328
+ type: "element",
64329
+ tagName: "link",
64330
+ properties: {
64331
+ rel: "stylesheet",
64332
+ href: makeUrl(["dark.css"], "assets"),
64333
+ media: "(prefers-color-scheme: dark)"
64334
+ },
64335
+ children: []
64336
+ }
64337
+ ]
64338
+ },
64339
+ {
64340
+ type: "element",
64341
+ tagName: "script",
64342
+ properties: {
64343
+ src: makeUrl(["dark-mode-toggle-stylesheets-loader.js"], "assets")
64344
+ },
64345
+ children: []
64346
+ },
64347
+ {
64348
+ type: "element",
64349
+ tagName: "script",
64350
+ properties: {
64351
+ type: "module",
64352
+ src: makeUrl(["dark-mode-toggle.mjs"], "assets")
64353
+ },
64354
+ children: []
64355
+ },
64349
64356
  {
64350
64357
  type: "element",
64351
64358
  tagName: "link",
@@ -65126,6 +65133,16 @@ var makeHeaderElements = (ctx) => {
65126
65133
  ]
65127
65134
  });
65128
65135
  }
65136
+ elements.push({
65137
+ type: "element",
65138
+ tagName: "dark-mode-toggle",
65139
+ properties: {
65140
+ id: "dark-mode-toggle",
65141
+ appearence: "switch",
65142
+ permanent: true
65143
+ },
65144
+ children: []
65145
+ });
65129
65146
  return [
65130
65147
  {
65131
65148
  type: "element",