@t8/docsgen 0.2.46 → 0.3.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.
Files changed (16) hide show
  1. package/dist/bin.js +8 -19
  2. package/dist/css/base.css +54 -101
  3. package/dist/css/code.css +2 -2
  4. package/dist/css/index.css +4 -15
  5. package/dist/css/section.css +6 -7
  6. package/package.json +2 -2
  7. package/schema.json +1 -1
  8. package/src/bin/getNav.ts +1 -1
  9. package/src/bin/setContent.ts +5 -20
  10. package/src/bin/setImages.ts +2 -2
  11. package/src/css/base.css +54 -101
  12. package/src/css/code.css +2 -2
  13. package/src/css/index.css +4 -15
  14. package/src/css/section.css +6 -7
  15. package/src/types/EntryConfig.ts +0 -4
  16. package/src/types/Theme.ts +0 -1
package/dist/bin.js CHANGED
@@ -406,7 +406,7 @@ async function getNav(ctx, navItems) {
406
406
  s = s ? `<section>
407
407
  ${s}
408
408
  </section>` : "";
409
- return `<nav class="b1">
409
+ return `<nav class="aux">
410
410
  ${s}
411
411
  ${navContent}
412
412
  </nav>`;
@@ -666,9 +666,6 @@ async function setContent(ctx) {
666
666
  let {
667
667
  dir = "",
668
668
  assetsDir,
669
- baseColor,
670
- linkColor,
671
- theme,
672
669
  root,
673
670
  contentDir = "",
674
671
  name,
@@ -680,7 +677,6 @@ async function setContent(ctx) {
680
677
  } = ctx;
681
678
  let counterContent = getCounterContent(ctx);
682
679
  let escapedPackageDescription = escapeHTML(packageDescription);
683
- let rootAttrs = "";
684
680
  let cssRoot = {
685
681
  index: "",
686
682
  content: ""
@@ -698,13 +694,6 @@ async function setContent(ctx) {
698
694
  cssRoot.index = `${packageUrl}/dist/css`;
699
695
  cssRoot.content = `${packageUrl}/dist/css`;
700
696
  }
701
- if (theme) rootAttrs += ` data-theme="${escapeHTML(theme)}"`;
702
- let rootStyle = "";
703
- if (baseColor)
704
- rootStyle += `${rootStyle ? " " : ""}--base-color: ${escapeHTML(baseColor)};`;
705
- if (linkColor)
706
- rootStyle += `${rootStyle ? " " : ""}--link-color: ${escapeHTML(linkColor)};`;
707
- if (rootStyle) rootAttrs += ` style="${rootStyle}"`;
708
697
  let icon = getIcon(ctx);
709
698
  let iconTag = icon.url ? `<link rel="icon"${icon.type ? ` type="${icon.type}"` : ""} href="${icon.url}">` : "";
710
699
  if (redirect) {
@@ -713,7 +702,7 @@ async function setContent(ctx) {
713
702
  join3(dir, "index.html"),
714
703
  toFileContent(`
715
704
  <!DOCTYPE html>
716
- <html lang="en" class="blank"${rootAttrs}>
705
+ <html lang="en" class="blank">
717
706
  <head>
718
707
  <meta charset="utf-8">
719
708
  <meta name="viewport" content="width=device-width">
@@ -764,7 +753,7 @@ ${getInjectedContent(ctx, "redirect", "body")}
764
753
  join3(dir, contentDir, `${nav[i]?.id ?? `_untitled_${i}`}.html`),
765
754
  toFileContent(`
766
755
  <!DOCTYPE html>
767
- <html lang="en"${rootAttrs}>
756
+ <html lang="en">
768
757
  <head>
769
758
  <meta charset="utf-8">
770
759
  <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -815,7 +804,7 @@ ${getInjectedContent(ctx, "section", "body")}
815
804
  join3(dir, "index.html"),
816
805
  toFileContent(`
817
806
  <!DOCTYPE html>
818
- <html lang="en"${rootAttrs}>
807
+ <html lang="en">
819
808
  <head>
820
809
  <meta charset="utf-8">
821
810
  <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -831,7 +820,7 @@ ${getInjectedContent(ctx, "section", "body")}
831
820
  <body>
832
821
  <div class="layout">
833
822
  <main>
834
- <section class="b1 intro-title">
823
+ <section class="aux intro-title">
835
824
  <div class="section-content">
836
825
  <h1>${coverTitle}</h1>
837
826
  <div class="description">
@@ -872,7 +861,7 @@ ${getInjectedContent(ctx, "index", "body")}
872
861
  join3(dir, "start.html"),
873
862
  toFileContent(`
874
863
  <!DOCTYPE html>
875
- <html lang="en" class="blank"${rootAttrs}>
864
+ <html lang="en" class="blank">
876
865
  <head>
877
866
  <meta charset="utf-8">
878
867
  <meta name="viewport" content="width=device-width">
@@ -917,9 +906,9 @@ function getIconContent(baseColor = "gray") {
917
906
  }
918
907
 
919
908
  // src/bin/setImages.ts
920
- async function setImages({ dir = "", baseColor, favicon }) {
909
+ async function setImages({ dir = "", favicon }) {
921
910
  if (favicon) return;
922
- await writeFile3(join4(dir, "./favicon.svg"), `${getIconContent(baseColor)}
911
+ await writeFile3(join4(dir, "./favicon.svg"), `${getIconContent()}
923
912
  `);
924
913
  }
925
914
 
package/dist/css/base.css CHANGED
@@ -1,52 +1,56 @@
1
1
  :root {
2
- --default-base-color: #f2f2f2;
3
- --default-link-color: royalblue;
4
-
5
- /* backgrounds */
6
- --b0: white;
7
- --b1: var(--base-color, var(--default-base-color));
8
- --button-color: royalblue;
9
-
10
- /* text colors */
11
- --c0: oklch(from var(--b0) calc(100 * (0.78 - l)) 0 0 / 0.82);
12
- --c1: oklch(from var(--b1) calc(100 * (0.78 - l)) 0 0 / 0.82);
13
- --c2: oklch(from var(--button-color) calc(100 * (0.75 - l)) 0 0 / 0.82);
14
-
15
- /* link colors */
16
- --a0: var(--default-link-color);
17
- --a1: var(--link-color, var(--default-link-color));
18
-
19
- --a0-light: hsl(from var(--a1) calc(h + 50) s 55%);
20
- --a0-dark: hsl(from var(--a1) calc(h + 50) s 65%);
21
-
22
- /* spacing */
2
+ --color: #2e2e2e;
3
+ --background: white;
4
+ --link-color: royalblue;
5
+ --secondary-color: #7f7f7f;
6
+ --emphatic-color: var(--color);
7
+ --line-color: #e6e6e6;
8
+
9
+ --aux-color: #797979;
10
+ --aux-background: #f2f2f2;
11
+ --aux-link-color: royalblue;
12
+ --aux-secondary-color: #797979;
13
+ --aux-emphatic-color: #3d3d3d; /* cover title, selected nav item */
14
+ --aux-line-color: #b3b3b3;
15
+ }
16
+ @media (prefers-color-scheme: dark) {
17
+ :root {
18
+ --color: #d5d5d5;
19
+ --background: #1a1a1a;
20
+ --link-color: deepskyblue;
21
+ --secondary-color: #8d8d8d;
22
+ --emphatic-color: var(--color);
23
+ --line-color: #272b34;
24
+
25
+ --aux-color: #8e9198;
26
+ --aux-background: #1d2331;
27
+ --aux-link-color: deepskyblue;
28
+ --aux-secondary-color: #8e9198;
29
+ --aux-emphatic-color: #c6c7cb;
30
+ --aux-line-color: #616e8c;
31
+ }
32
+ }
33
+ :root {
23
34
  --max-content-width: 64em;
24
35
  --content-padding-x: 1.75rem;
25
36
  --content-padding-y: 1.75rem;
26
- --space-x: var(--content-padding-x);
27
37
  --block-margin-y: 1em;
28
-
29
- /* borders */
30
- --hr-border: 0.3rem solid var(--overlay-background-color);
31
- --link-border: 0.05em solid;
32
-
33
- --overlay-background-color: hsl(from var(--b1) h s 50% / 0.2);
34
- --overlay-border-color: hsl(from var(--b1) h s 60% / 0.7);
35
-
36
- --color: var(--c0);
37
- --code-background: color(from var(--color) srgb r g b / 0.08);
38
+ --sep-line: 0.3rem solid var(--line-color);
38
39
 
39
40
  font: normal 100% / 1.45 sans-serif;
40
41
  color: var(--color);
41
- background: var(--b0);
42
+ background: var(--background);
42
43
  }
43
- @media (prefers-color-scheme: dark) {
44
- :root {
45
- --default-base-color: #1d2331;
46
- --default-link-color: deepskyblue;
47
- --b0: #1a1a1a;
48
- --code-background: color(from var(--color) srgb r g b / 0.15);
49
- }
44
+ .aux {
45
+ --color: var(--aux-color);
46
+ --background: var(--aux-background);
47
+ --link-color: var(--aux-link-color);
48
+ --secondary-color: var(--aux-secondary-color);
49
+ --emphatic-color: var(--aux-emphatic-color);
50
+ --line-color: var(--aux-line-color);
51
+
52
+ color: var(--color);
53
+ background: var(--background);
50
54
  }
51
55
  body {
52
56
  padding: 0;
@@ -61,7 +65,6 @@ body {
61
65
  font-size: 100%;
62
66
  }
63
67
  }
64
-
65
68
  p,
66
69
  ul,
67
70
  ol,
@@ -75,58 +78,16 @@ ul,
75
78
  ol {
76
79
  padding-inline-start: 2em;
77
80
  }
78
-
79
81
  a,
80
82
  a:link,
81
83
  a:visited,
82
84
  a:hover,
83
85
  a:active {
84
- --color: var(--a0);
85
- color: var(--a0);
86
- text-decoration: none;
87
- border-bottom: var(--link-border);
88
- }
89
-
90
- a.button {
91
- --bc1: color(from var(--c0) srgb r g b / 0.25);
92
- --bc2: color(
93
- from var(--c0) srgb calc(0.8 * r) calc(0.8 * g) calc(0.8 * b) /
94
- 0.35
95
- );
96
-
97
- display: inline-block;
86
+ --color: var(--link-color);
87
+ color: var(--color);
98
88
  text-decoration: none;
99
- text-align: center;
100
- color: color(from var(--b0) srgb r g b / 0.9);
101
- background: color(from var(--c0) srgb r g b / 0.65);
102
- border: 0.075em solid var(--c0);
103
- border-color: var(--bc1) var(--bc2) var(--bc2) var(--bc1);
104
- border-radius: var(--r);
105
- padding: 0.25em 1.25em;
106
- margin: 0.5em 0.35em;
107
- box-shadow: 0 0 0.1em 0 var(--c0);
108
- transition: box-shadow 0.1s;
109
- box-sizing: border-box;
110
- }
111
- a.button:hover {
112
- box-shadow: 0 0 0.25em 0 var(--c0);
113
- }
114
- a.button.primary {
115
- --bc1: color(from var(--button-color) srgb r g b / 0.55);
116
- --bc2: color(
117
- from var(--button-color) srgb calc(0.8 * r) calc(0.8 * g) calc(0.8 * b) /
118
- 0.7
119
- );
120
-
121
- font-weight: bold;
122
- color: var(--c2);
123
- background: var(--button-color);
124
- box-shadow: 0 0 0.2em 0 var(--button-color);
89
+ border-bottom: 0.05em solid;
125
90
  }
126
- a.button.primary:hover {
127
- box-shadow: 0 0 0.35em 0 var(--button-color);
128
- }
129
-
130
91
  h1 {
131
92
  font-size: 2.25em;
132
93
  line-height: 1;
@@ -148,7 +109,6 @@ h3 {
148
109
  h4 {
149
110
  font-size: 1.15em;
150
111
  }
151
-
152
112
  main {
153
113
  box-sizing: border-box;
154
114
  }
@@ -165,27 +125,20 @@ main li {
165
125
  margin-bottom: 0.5em;
166
126
  }
167
127
 
168
- .b1 {
169
- color: color(from var(--c1) srgb r g b / 0.5);
170
- background: var(--b1);
171
- }
172
- .b1 a,
173
- .b1 a:link,
174
- .b1 a:hover,
175
- .b1 a:visited,
176
- .b1 a:active {
177
- color: var(--a1);
178
- }
179
-
180
128
  .highlight {
181
129
  border-radius: 1em;
182
130
  margin: 0;
183
131
  }
184
132
  code {
185
- background: var(--code-background);
133
+ background: color(from var(--color) srgb r g b / 0.08);
186
134
  border-radius: 0.35em;
187
135
  padding: 0.15em 0.35em;
188
136
  }
137
+ @media (prefers-color-scheme: dark) {
138
+ code {
139
+ background: color(from var(--color) srgb r g b / 0.12);
140
+ }
141
+ }
189
142
  pre,
190
143
  pre.highlight {
191
144
  line-height: 1.25;
@@ -201,7 +154,7 @@ pre > code {
201
154
 
202
155
  html.blank h1 {
203
156
  font-size: 10vmin;
204
- color: var(--overlay-background-color);
157
+ color: var(--secondary-color);
205
158
  }
206
159
  html.blank .layout {
207
160
  display: flex;
package/dist/css/code.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .hljs {
2
- color: var(--color);
3
- background: var(--default-base-color);
2
+ color: var(--aux-color);
3
+ background: var(--aux-background);
4
4
  }
5
5
  @media (prefers-color-scheme: light) {
6
6
  .hljs-deletion {
package/dist/css/index.css CHANGED
@@ -17,8 +17,6 @@ body {
17
17
 
18
18
  main {
19
19
  --max-content-width: 38em;
20
- --line-color: color(from var(--c0) srgb r g b / 0.1);
21
-
22
20
  display: flex;
23
21
  width: 100%;
24
22
  align-items: flex-start;
@@ -30,7 +28,6 @@ main {
30
28
  @media (max-width: 840px) {
31
29
  main {
32
30
  --max-content-width: 100%;
33
-
34
31
  min-height: 100vh;
35
32
  flex-direction: column;
36
33
  margin: 0;
@@ -41,7 +38,7 @@ h1 {
41
38
  max-width: 16rem;
42
39
  font-size: 2.5em;
43
40
  font-weight: 900;
44
- color: color(from var(--c1) srgb r g b / 0.75);
41
+ color: var(--emphatic-color);
45
42
  margin: 1rem 0;
46
43
  }
47
44
  @media (max-width: 840px) {
@@ -78,17 +75,9 @@ header {
78
75
  font-style: normal;
79
76
  }
80
77
  .actions {
81
- --r: 1em;
82
-
83
78
  font-size: 1.25em;
84
79
  margin: 1.25rem 0;
85
80
  }
86
- .actions a.primary {
87
- font-weight: bold;
88
- }
89
- .actions a.button {
90
- min-width: 6.5em;
91
- }
92
81
  .actions .sep {
93
82
  display: block;
94
83
  height: 0.01em;
@@ -96,6 +85,9 @@ header {
96
85
  overflow: hidden;
97
86
  margin: 0.35rem 0;
98
87
  }
88
+ .actions .primary {
89
+ font-weight: bold;
90
+ }
99
91
  .ref {
100
92
  font-size: 0.9em;
101
93
  }
@@ -194,11 +186,8 @@ section.intro .section-content {
194
186
  }
195
187
  }
196
188
  .features {
197
- --ca: color(from var(--c0) srgb r g b / 0.55);
198
- --link-decoration: underline;
199
189
  --list-padding-x: 1.25rem;
200
190
  --list-item-padding-x: 0.35rem;
201
-
202
191
  margin: 1em 0;
203
192
  }
204
193
  .features h2 {
package/dist/css/section.css CHANGED
@@ -91,7 +91,7 @@ footer {
91
91
  margin-top: 0.65em;
92
92
  }
93
93
  .body > nav li > strong {
94
- color: color(from var(--c1) srgb r g b / 0.75);
94
+ color: var(--emphatic-color);
95
95
  }
96
96
  @media (max-width: 840px) {
97
97
  .body > nav {
@@ -99,7 +99,7 @@ footer {
99
99
  display: block;
100
100
  font-size: inherit;
101
101
  text-align: start;
102
- border-top: 0.35em solid var(--overlay-border-color);
102
+ border-top: 0.35em solid var(--line-color);
103
103
  padding: 0.25rem var(--content-padding-x) 0.35rem;
104
104
  margin: 0;
105
105
  }
@@ -160,14 +160,14 @@ main p.sep {
160
160
  main hr {
161
161
  background: none transparent;
162
162
  border: none;
163
- border-top: var(--hr-border);
163
+ border-top: var(--sep-line);
164
164
  margin: var(--block-margin-y) 0;
165
165
  }
166
166
  main h1 {
167
167
  font-size: 0.8rem;
168
168
  font-weight: normal;
169
169
  line-height: 1.1;
170
- color: color(from var(--c0) srgb r g b / 0.5);
170
+ color: var(--secondary-color);
171
171
  margin: 0;
172
172
  }
173
173
  h1 .sep {
@@ -190,7 +190,7 @@ main h1 + h2 {
190
190
  margin-top: 0.75rem;
191
191
  }
192
192
  main h2 {
193
- border-bottom: var(--hr-border);
193
+ border-bottom: var(--sep-line);
194
194
  padding-bottom: 0.1em;
195
195
  }
196
196
  main h2:first-child {
@@ -199,11 +199,10 @@ main h2:first-child {
199
199
 
200
200
  .pagenav {
201
201
  --icon-width: 1.25em;
202
-
203
202
  display: flex;
204
203
  justify-content: space-between;
205
204
  gap: 1em;
206
- border-top: var(--hr-border);
205
+ border-top: var(--sep-line);
207
206
  padding: 0.6em 0 0;
208
207
  margin: 1.5em 0 0;
209
208
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t8/docsgen",
3
- "version": "0.2.46",
3
+ "version": "0.3.0",
4
4
  "description": "",
5
5
  "main": "dist/bin.js",
6
6
  "type": "module",
@@ -15,7 +15,7 @@
15
15
  "clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true });\"",
16
16
  "patch": "node src/scripts/patch.ts",
17
17
  "prepublishOnly": "npm run build",
18
- "preversion": "npx npm-run-all shape build-schema build",
18
+ "preversion": "npx npm-run-all shape build",
19
19
  "shape": "npx codeshape --typecheck"
20
20
  },
21
21
  "repository": {
package/schema.json CHANGED
@@ -1 +1 @@
1
- {"$ref":"#/definitions/Config","$schema":"http://json-schema.org/draft-07/schema#","definitions":{"Config":{"additionalProperties":false,"properties":{"$schema":{"type":"string"},"append":{"$ref":"#/definitions/ContentInjectionMap%3C(%22head%22%7C%22body%22%7C%22%3Ahas-code%22)%3E"},"assetsDir":{"description":"Directory path for assets, relative to `dir`. If not provided, the assets will be added via the package URLs.","type":"string"},"backstory":{"description":"Backstory link URL to be added to the front page.","type":"string"},"baseColor":{"type":"string"},"cname":{"description":"Content of the './CNAME' file.","type":"string"},"contentDir":{"description":"Generated section content directory.","type":"string"},"description":{"type":"string"},"dir":{"type":"string"},"entries":{"items":{"$ref":"#/definitions/EntryConfig"},"type":"array"},"favicon":{"description":"Favicon URL.","type":"string"},"faviconType":{"type":"string"},"htmlTitle":{"type":"string"},"id":{"type":"string"},"jsorg":{"description":"As a boolean, it means whether to add the '<package_name>.js.org' domain to the './CNAME' file.\n\nAs a string, it sets the '<jsorg_value>.js.org' domain to the './CNAME' file.","type":["boolean","string"]},"linkColor":{"type":"string"},"linkMap":{"additionalProperties":{"anyOf":[{"type":"string"},{"not":{}}]},"description":"Link substitution map.","type":"object"},"mainBranch":{"type":"string"},"name":{"type":"string"},"nav":{"description":"URL of an HTML file inserted into the navigation bar.","type":"string"},"npm":{"type":"string"},"redirect":{"description":"Redirection URL.","type":"string"},"remove":{"description":"Whether to remove the GitHub Pages branch and quit.","type":"boolean"},"repo":{"type":"string"},"root":{"description":"Main page root path.","type":"string"},"singlePage":{"description":"Whether to show all sections on a single page.","type":"boolean"},"source":{"type":"string"},"targetBranch":{"description":"Target branch.","examples":["gh-pages"],"type":"string"},"targetIds":{"items":{"type":"string"},"type":"array"},"theme":{"type":"string"},"title":{"type":"string"},"version":{"type":"string"},"ymid":{"type":["number","string"]}},"type":"object"},"ContentInjectionMap<(\"head\"|\"body\"|\":has-code\")>":{"additionalProperties":false,"properties":{":has-code":{"anyOf":[{"type":"string"},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"},{"items":{"anyOf":[{"type":"string"},{"not":{}},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"}]},"type":"array"}]},"body":{"anyOf":[{"type":"string"},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"},{"items":{"anyOf":[{"type":"string"},{"not":{}},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"}]},"type":"array"}]},"head":{"anyOf":[{"type":"string"},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"},{"items":{"anyOf":[{"type":"string"},{"not":{}},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"}]},"type":"array"}]}},"type":"object"},"EntryConfig":{"additionalProperties":false,"properties":{"append":{"$ref":"#/definitions/ContentInjectionMap%3C(%22head%22%7C%22body%22%7C%22%3Ahas-code%22)%3E"},"assetsDir":{"description":"Directory path for assets, relative to `dir`. If not provided, the assets will be added via the package URLs.","type":"string"},"backstory":{"description":"Backstory link URL to be added to the front page.","type":"string"},"baseColor":{"type":"string"},"cname":{"description":"Content of the './CNAME' file.","type":"string"},"contentDir":{"description":"Generated section content directory.","type":"string"},"description":{"type":"string"},"dir":{"type":"string"},"favicon":{"description":"Favicon URL.","type":"string"},"faviconType":{"type":"string"},"htmlTitle":{"type":"string"},"id":{"type":"string"},"jsorg":{"description":"As a boolean, it means whether to add the '<package_name>.js.org' domain to the './CNAME' file.\n\nAs a string, it sets the '<jsorg_value>.js.org' domain to the './CNAME' file.","type":["boolean","string"]},"linkColor":{"type":"string"},"linkMap":{"additionalProperties":{"anyOf":[{"type":"string"},{"not":{}}]},"description":"Link substitution map.","type":"object"},"mainBranch":{"type":"string"},"name":{"type":"string"},"nav":{"description":"URL of an HTML file inserted into the navigation bar.","type":"string"},"npm":{"type":"string"},"redirect":{"description":"Redirection URL.","type":"string"},"remove":{"description":"Whether to remove the GitHub Pages branch and quit.","type":"boolean"},"repo":{"type":"string"},"root":{"description":"Main page root path.","type":"string"},"singlePage":{"description":"Whether to show all sections on a single page.","type":"boolean"},"source":{"type":"string"},"targetBranch":{"description":"Target branch.","examples":["gh-pages"],"type":"string"},"theme":{"type":"string"},"title":{"type":"string"},"version":{"type":"string"},"ymid":{"type":["number","string"]}},"type":"object"},"Page":{"enum":["index","start","section","redirect"],"type":"string"}}}
1
+ {"$ref":"#/definitions/Config","$schema":"http://json-schema.org/draft-07/schema#","definitions":{"Config":{"additionalProperties":false,"properties":{"$schema":{"type":"string"},"append":{"$ref":"#/definitions/ContentInjectionMap%3C(%22head%22%7C%22body%22%7C%22%3Ahas-code%22)%3E"},"assetsDir":{"description":"Directory path for assets, relative to `dir`. If not provided, the assets will be added via the package URLs.","type":"string"},"backstory":{"description":"Backstory link URL to be added to the front page.","type":"string"},"cname":{"description":"Content of the './CNAME' file.","type":"string"},"contentDir":{"description":"Generated section content directory.","type":"string"},"description":{"type":"string"},"dir":{"type":"string"},"entries":{"items":{"$ref":"#/definitions/EntryConfig"},"type":"array"},"favicon":{"description":"Favicon URL.","type":"string"},"faviconType":{"type":"string"},"htmlTitle":{"type":"string"},"id":{"type":"string"},"jsorg":{"description":"As a boolean, it means whether to add the '<package_name>.js.org' domain to the './CNAME' file.\n\nAs a string, it sets the '<jsorg_value>.js.org' domain to the './CNAME' file.","type":["boolean","string"]},"linkMap":{"additionalProperties":{"anyOf":[{"type":"string"},{"not":{}}]},"description":"Link substitution map.","type":"object"},"mainBranch":{"type":"string"},"name":{"type":"string"},"nav":{"description":"URL of an HTML file inserted into the navigation bar.","type":"string"},"npm":{"type":"string"},"redirect":{"description":"Redirection URL.","type":"string"},"remove":{"description":"Whether to remove the GitHub Pages branch and quit.","type":"boolean"},"repo":{"type":"string"},"root":{"description":"Main page root path.","type":"string"},"singlePage":{"description":"Whether to show all sections on a single page.","type":"boolean"},"source":{"type":"string"},"targetBranch":{"description":"Target branch.","examples":["gh-pages"],"type":"string"},"targetIds":{"items":{"type":"string"},"type":"array"},"title":{"type":"string"},"version":{"type":"string"},"ymid":{"type":["number","string"]}},"type":"object"},"ContentInjectionMap<(\"head\"|\"body\"|\":has-code\")>":{"additionalProperties":false,"properties":{":has-code":{"anyOf":[{"type":"string"},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"},{"items":{"anyOf":[{"type":"string"},{"not":{}},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"}]},"type":"array"}]},"body":{"anyOf":[{"type":"string"},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"},{"items":{"anyOf":[{"type":"string"},{"not":{}},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"}]},"type":"array"}]},"head":{"anyOf":[{"type":"string"},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"},{"items":{"anyOf":[{"type":"string"},{"not":{}},{"additionalProperties":false,"properties":{"content":{"type":"string"},"pages":{"items":{"$ref":"#/definitions/Page"},"type":"array"}},"type":"object"}]},"type":"array"}]}},"type":"object"},"EntryConfig":{"additionalProperties":false,"properties":{"append":{"$ref":"#/definitions/ContentInjectionMap%3C(%22head%22%7C%22body%22%7C%22%3Ahas-code%22)%3E"},"assetsDir":{"description":"Directory path for assets, relative to `dir`. If not provided, the assets will be added via the package URLs.","type":"string"},"backstory":{"description":"Backstory link URL to be added to the front page.","type":"string"},"cname":{"description":"Content of the './CNAME' file.","type":"string"},"contentDir":{"description":"Generated section content directory.","type":"string"},"description":{"type":"string"},"dir":{"type":"string"},"favicon":{"description":"Favicon URL.","type":"string"},"faviconType":{"type":"string"},"htmlTitle":{"type":"string"},"id":{"type":"string"},"jsorg":{"description":"As a boolean, it means whether to add the '<package_name>.js.org' domain to the './CNAME' file.\n\nAs a string, it sets the '<jsorg_value>.js.org' domain to the './CNAME' file.","type":["boolean","string"]},"linkMap":{"additionalProperties":{"anyOf":[{"type":"string"},{"not":{}}]},"description":"Link substitution map.","type":"object"},"mainBranch":{"type":"string"},"name":{"type":"string"},"nav":{"description":"URL of an HTML file inserted into the navigation bar.","type":"string"},"npm":{"type":"string"},"redirect":{"description":"Redirection URL.","type":"string"},"remove":{"description":"Whether to remove the GitHub Pages branch and quit.","type":"boolean"},"repo":{"type":"string"},"root":{"description":"Main page root path.","type":"string"},"singlePage":{"description":"Whether to show all sections on a single page.","type":"boolean"},"source":{"type":"string"},"targetBranch":{"description":"Target branch.","examples":["gh-pages"],"type":"string"},"title":{"type":"string"},"version":{"type":"string"},"ymid":{"type":["number","string"]}},"type":"object"},"Page":{"enum":["index","start","section","redirect"],"type":"string"}}}
package/src/bin/getNav.ts CHANGED
@@ -81,5 +81,5 @@ export async function getNav(ctx: Context, navItems: NavItem[]) {
81
81
  s = s.trim();
82
82
  s = s ? `<section>\n${s}\n</section>` : "";
83
83
 
84
- return `<nav class="b1">\n${s}\n${navContent}\n</nav>`;
84
+ return `<nav class="aux">\n${s}\n${navContent}\n</nav>`;
85
85
  }
package/src/bin/setContent.ts CHANGED
@@ -41,9 +41,6 @@ export async function setContent(ctx: Context) {
41
41
  let {
42
42
  dir = "",
43
43
  assetsDir,
44
- baseColor,
45
- linkColor,
46
- theme,
47
44
  root,
48
45
  contentDir = "",
49
46
  name,
@@ -57,7 +54,6 @@ export async function setContent(ctx: Context) {
57
54
  let counterContent = getCounterContent(ctx);
58
55
  let escapedPackageDescription = escapeHTML(packageDescription);
59
56
 
60
- let rootAttrs = "";
61
57
  let cssRoot = {
62
58
  index: "",
63
59
  content: "",
@@ -84,17 +80,6 @@ export async function setContent(ctx: Context) {
84
80
  cssRoot.content = `${packageUrl}/dist/css`;
85
81
  }
86
82
 
87
- if (theme) rootAttrs += ` data-theme="${escapeHTML(theme)}"`;
88
-
89
- let rootStyle = "";
90
-
91
- if (baseColor)
92
- rootStyle += `${rootStyle ? " " : ""}--base-color: ${escapeHTML(baseColor)};`;
93
- if (linkColor)
94
- rootStyle += `${rootStyle ? " " : ""}--link-color: ${escapeHTML(linkColor)};`;
95
-
96
- if (rootStyle) rootAttrs += ` style="${rootStyle}"`;
97
-
98
83
  let icon = getIcon(ctx);
99
84
  let iconTag = icon.url
100
85
  ? `<link rel="icon"${icon.type ? ` type="${icon.type}"` : ""} href="${icon.url}">`
@@ -107,7 +92,7 @@ export async function setContent(ctx: Context) {
107
92
  join(dir, "index.html"),
108
93
  toFileContent(`
109
94
  <!DOCTYPE html>
110
- <html lang="en" class="blank"${rootAttrs}>
95
+ <html lang="en" class="blank">
111
96
  <head>
112
97
  <meta charset="utf-8">
113
98
  <meta name="viewport" content="width=device-width">
@@ -170,7 +155,7 @@ ${getInjectedContent(ctx, "redirect", "body")}
170
155
  join(dir, contentDir, `${nav[i]?.id ?? `_untitled_${i}`}.html`),
171
156
  toFileContent(`
172
157
  <!DOCTYPE html>
173
- <html lang="en"${rootAttrs}>
158
+ <html lang="en">
174
159
  <head>
175
160
  <meta charset="utf-8">
176
161
  <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -226,7 +211,7 @@ ${getInjectedContent(ctx, "section", "body")}
226
211
  join(dir, "index.html"),
227
212
  toFileContent(`
228
213
  <!DOCTYPE html>
229
- <html lang="en"${rootAttrs}>
214
+ <html lang="en">
230
215
  <head>
231
216
  <meta charset="utf-8">
232
217
  <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -242,7 +227,7 @@ ${getInjectedContent(ctx, "section", "body")}
242
227
  <body>
243
228
  <div class="layout">
244
229
  <main>
245
- <section class="b1 intro-title">
230
+ <section class="aux intro-title">
246
231
  <div class="section-content">
247
232
  <h1>${coverTitle}</h1>
248
233
  <div class="description">
@@ -292,7 +277,7 @@ ${getInjectedContent(ctx, "index", "body")}
292
277
  join(dir, "start.html"),
293
278
  toFileContent(`
294
279
  <!DOCTYPE html>
295
- <html lang="en" class="blank"${rootAttrs}>
280
+ <html lang="en" class="blank">
296
281
  <head>
297
282
  <meta charset="utf-8">
298
283
  <meta name="viewport" content="width=device-width">
package/src/bin/setImages.ts CHANGED
@@ -3,8 +3,8 @@ import { join } from "node:path";
3
3
  import type { Context } from "../types/Context.ts";
4
4
  import { getIconContent } from "../utils/getIconContent.ts";
5
5
 
6
- export async function setImages({ dir = "", baseColor, favicon }: Context) {
6
+ export async function setImages({ dir = "", favicon }: Context) {
7
7
  if (favicon) return;
8
8
 
9
- await writeFile(join(dir, "./favicon.svg"), `${getIconContent(baseColor)}\n`);
9
+ await writeFile(join(dir, "./favicon.svg"), `${getIconContent()}\n`);
10
10
  }
package/src/css/base.css CHANGED
@@ -1,52 +1,56 @@
1
1
  :root {
2
- --default-base-color: #f2f2f2;
3
- --default-link-color: royalblue;
4
-
5
- /* backgrounds */
6
- --b0: white;
7
- --b1: var(--base-color, var(--default-base-color));
8
- --button-color: royalblue;
9
-
10
- /* text colors */
11
- --c0: oklch(from var(--b0) calc(100 * (0.78 - l)) 0 0 / 0.82);
12
- --c1: oklch(from var(--b1) calc(100 * (0.78 - l)) 0 0 / 0.82);
13
- --c2: oklch(from var(--button-color) calc(100 * (0.75 - l)) 0 0 / 0.82);
14
-
15
- /* link colors */
16
- --a0: var(--default-link-color);
17
- --a1: var(--link-color, var(--default-link-color));
18
-
19
- --a0-light: hsl(from var(--a1) calc(h + 50) s 55%);
20
- --a0-dark: hsl(from var(--a1) calc(h + 50) s 65%);
21
-
22
- /* spacing */
2
+ --color: #2e2e2e;
3
+ --background: white;
4
+ --link-color: royalblue;
5
+ --secondary-color: #7f7f7f;
6
+ --emphatic-color: var(--color);
7
+ --line-color: #e6e6e6;
8
+
9
+ --aux-color: #797979;
10
+ --aux-background: #f2f2f2;
11
+ --aux-link-color: royalblue;
12
+ --aux-secondary-color: #797979;
13
+ --aux-emphatic-color: #3d3d3d; /* cover title, selected nav item */
14
+ --aux-line-color: #b3b3b3;
15
+ }
16
+ @media (prefers-color-scheme: dark) {
17
+ :root {
18
+ --color: #d5d5d5;
19
+ --background: #1a1a1a;
20
+ --link-color: deepskyblue;
21
+ --secondary-color: #8d8d8d;
22
+ --emphatic-color: var(--color);
23
+ --line-color: #272b34;
24
+
25
+ --aux-color: #8e9198;
26
+ --aux-background: #1d2331;
27
+ --aux-link-color: deepskyblue;
28
+ --aux-secondary-color: #8e9198;
29
+ --aux-emphatic-color: #c6c7cb;
30
+ --aux-line-color: #616e8c;
31
+ }
32
+ }
33
+ :root {
23
34
  --max-content-width: 64em;
24
35
  --content-padding-x: 1.75rem;
25
36
  --content-padding-y: 1.75rem;
26
- --space-x: var(--content-padding-x);
27
37
  --block-margin-y: 1em;
28
-
29
- /* borders */
30
- --hr-border: 0.3rem solid var(--overlay-background-color);
31
- --link-border: 0.05em solid;
32
-
33
- --overlay-background-color: hsl(from var(--b1) h s 50% / 0.2);
34
- --overlay-border-color: hsl(from var(--b1) h s 60% / 0.7);
35
-
36
- --color: var(--c0);
37
- --code-background: color(from var(--color) srgb r g b / 0.08);
38
+ --sep-line: 0.3rem solid var(--line-color);
38
39
 
39
40
  font: normal 100% / 1.45 sans-serif;
40
41
  color: var(--color);
41
- background: var(--b0);
42
+ background: var(--background);
42
43
  }
43
- @media (prefers-color-scheme: dark) {
44
- :root {
45
- --default-base-color: #1d2331;
46
- --default-link-color: deepskyblue;
47
- --b0: #1a1a1a;
48
- --code-background: color(from var(--color) srgb r g b / 0.15);
49
- }
44
+ .aux {
45
+ --color: var(--aux-color);
46
+ --background: var(--aux-background);
47
+ --link-color: var(--aux-link-color);
48
+ --secondary-color: var(--aux-secondary-color);
49
+ --emphatic-color: var(--aux-emphatic-color);
50
+ --line-color: var(--aux-line-color);
51
+
52
+ color: var(--color);
53
+ background: var(--background);
50
54
  }
51
55
  body {
52
56
  padding: 0;
@@ -61,7 +65,6 @@ body {
61
65
  font-size: 100%;
62
66
  }
63
67
  }
64
-
65
68
  p,
66
69
  ul,
67
70
  ol,
@@ -75,58 +78,16 @@ ul,
75
78
  ol {
76
79
  padding-inline-start: 2em;
77
80
  }
78
-
79
81
  a,
80
82
  a:link,
81
83
  a:visited,
82
84
  a:hover,
83
85
  a:active {
84
- --color: var(--a0);
85
- color: var(--a0);
86
- text-decoration: none;
87
- border-bottom: var(--link-border);
88
- }
89
-
90
- a.button {
91
- --bc1: color(from var(--c0) srgb r g b / 0.25);
92
- --bc2: color(
93
- from var(--c0) srgb calc(0.8 * r) calc(0.8 * g) calc(0.8 * b) /
94
- 0.35
95
- );
96
-
97
- display: inline-block;
86
+ --color: var(--link-color);
87
+ color: var(--color);
98
88
  text-decoration: none;
99
- text-align: center;
100
- color: color(from var(--b0) srgb r g b / 0.9);
101
- background: color(from var(--c0) srgb r g b / 0.65);
102
- border: 0.075em solid var(--c0);
103
- border-color: var(--bc1) var(--bc2) var(--bc2) var(--bc1);
104
- border-radius: var(--r);
105
- padding: 0.25em 1.25em;
106
- margin: 0.5em 0.35em;
107
- box-shadow: 0 0 0.1em 0 var(--c0);
108
- transition: box-shadow 0.1s;
109
- box-sizing: border-box;
110
- }
111
- a.button:hover {
112
- box-shadow: 0 0 0.25em 0 var(--c0);
113
- }
114
- a.button.primary {
115
- --bc1: color(from var(--button-color) srgb r g b / 0.55);
116
- --bc2: color(
117
- from var(--button-color) srgb calc(0.8 * r) calc(0.8 * g) calc(0.8 * b) /
118
- 0.7
119
- );
120
-
121
- font-weight: bold;
122
- color: var(--c2);
123
- background: var(--button-color);
124
- box-shadow: 0 0 0.2em 0 var(--button-color);
89
+ border-bottom: 0.05em solid;
125
90
  }
126
- a.button.primary:hover {
127
- box-shadow: 0 0 0.35em 0 var(--button-color);
128
- }
129
-
130
91
  h1 {
131
92
  font-size: 2.25em;
132
93
  line-height: 1;
@@ -148,7 +109,6 @@ h3 {
148
109
  h4 {
149
110
  font-size: 1.15em;
150
111
  }
151
-
152
112
  main {
153
113
  box-sizing: border-box;
154
114
  }
@@ -165,27 +125,20 @@ main li {
165
125
  margin-bottom: 0.5em;
166
126
  }
167
127
 
168
- .b1 {
169
- color: color(from var(--c1) srgb r g b / 0.5);
170
- background: var(--b1);
171
- }
172
- .b1 a,
173
- .b1 a:link,
174
- .b1 a:hover,
175
- .b1 a:visited,
176
- .b1 a:active {
177
- color: var(--a1);
178
- }
179
-
180
128
  .highlight {
181
129
  border-radius: 1em;
182
130
  margin: 0;
183
131
  }
184
132
  code {
185
- background: var(--code-background);
133
+ background: color(from var(--color) srgb r g b / 0.08);
186
134
  border-radius: 0.35em;
187
135
  padding: 0.15em 0.35em;
188
136
  }
137
+ @media (prefers-color-scheme: dark) {
138
+ code {
139
+ background: color(from var(--color) srgb r g b / 0.12);
140
+ }
141
+ }
189
142
  pre,
190
143
  pre.highlight {
191
144
  line-height: 1.25;
@@ -201,7 +154,7 @@ pre > code {
201
154
 
202
155
  html.blank h1 {
203
156
  font-size: 10vmin;
204
- color: var(--overlay-background-color);
157
+ color: var(--secondary-color);
205
158
  }
206
159
  html.blank .layout {
207
160
  display: flex;
package/src/css/code.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .hljs {
2
- color: var(--color);
3
- background: var(--default-base-color);
2
+ color: var(--aux-color);
3
+ background: var(--aux-background);
4
4
  }
5
5
  @media (prefers-color-scheme: light) {
6
6
  .hljs-deletion {
package/src/css/index.css CHANGED
@@ -17,8 +17,6 @@ body {
17
17
 
18
18
  main {
19
19
  --max-content-width: 38em;
20
- --line-color: color(from var(--c0) srgb r g b / 0.1);
21
-
22
20
  display: flex;
23
21
  width: 100%;
24
22
  align-items: flex-start;
@@ -30,7 +28,6 @@ main {
30
28
  @media (max-width: 840px) {
31
29
  main {
32
30
  --max-content-width: 100%;
33
-
34
31
  min-height: 100vh;
35
32
  flex-direction: column;
36
33
  margin: 0;
@@ -41,7 +38,7 @@ h1 {
41
38
  max-width: 16rem;
42
39
  font-size: 2.5em;
43
40
  font-weight: 900;
44
- color: color(from var(--c1) srgb r g b / 0.75);
41
+ color: var(--emphatic-color);
45
42
  margin: 1rem 0;
46
43
  }
47
44
  @media (max-width: 840px) {
@@ -78,17 +75,9 @@ header {
78
75
  font-style: normal;
79
76
  }
80
77
  .actions {
81
- --r: 1em;
82
-
83
78
  font-size: 1.25em;
84
79
  margin: 1.25rem 0;
85
80
  }
86
- .actions a.primary {
87
- font-weight: bold;
88
- }
89
- .actions a.button {
90
- min-width: 6.5em;
91
- }
92
81
  .actions .sep {
93
82
  display: block;
94
83
  height: 0.01em;
@@ -96,6 +85,9 @@ header {
96
85
  overflow: hidden;
97
86
  margin: 0.35rem 0;
98
87
  }
88
+ .actions .primary {
89
+ font-weight: bold;
90
+ }
99
91
  .ref {
100
92
  font-size: 0.9em;
101
93
  }
@@ -194,11 +186,8 @@ section.intro .section-content {
194
186
  }
195
187
  }
196
188
  .features {
197
- --ca: color(from var(--c0) srgb r g b / 0.55);
198
- --link-decoration: underline;
199
189
  --list-padding-x: 1.25rem;
200
190
  --list-item-padding-x: 0.35rem;
201
-
202
191
  margin: 1em 0;
203
192
  }
204
193
  .features h2 {
package/src/css/section.css CHANGED
@@ -91,7 +91,7 @@ footer {
91
91
  margin-top: 0.65em;
92
92
  }
93
93
  .body > nav li > strong {
94
- color: color(from var(--c1) srgb r g b / 0.75);
94
+ color: var(--emphatic-color);
95
95
  }
96
96
  @media (max-width: 840px) {
97
97
  .body > nav {
@@ -99,7 +99,7 @@ footer {
99
99
  display: block;
100
100
  font-size: inherit;
101
101
  text-align: start;
102
- border-top: 0.35em solid var(--overlay-border-color);
102
+ border-top: 0.35em solid var(--line-color);
103
103
  padding: 0.25rem var(--content-padding-x) 0.35rem;
104
104
  margin: 0;
105
105
  }
@@ -160,14 +160,14 @@ main p.sep {
160
160
  main hr {
161
161
  background: none transparent;
162
162
  border: none;
163
- border-top: var(--hr-border);
163
+ border-top: var(--sep-line);
164
164
  margin: var(--block-margin-y) 0;
165
165
  }
166
166
  main h1 {
167
167
  font-size: 0.8rem;
168
168
  font-weight: normal;
169
169
  line-height: 1.1;
170
- color: color(from var(--c0) srgb r g b / 0.5);
170
+ color: var(--secondary-color);
171
171
  margin: 0;
172
172
  }
173
173
  h1 .sep {
@@ -190,7 +190,7 @@ main h1 + h2 {
190
190
  margin-top: 0.75rem;
191
191
  }
192
192
  main h2 {
193
- border-bottom: var(--hr-border);
193
+ border-bottom: var(--sep-line);
194
194
  padding-bottom: 0.1em;
195
195
  }
196
196
  main h2:first-child {
@@ -199,11 +199,10 @@ main h2:first-child {
199
199
 
200
200
  .pagenav {
201
201
  --icon-width: 1.25em;
202
-
203
202
  display: flex;
204
203
  justify-content: space-between;
205
204
  gap: 1em;
206
- border-top: var(--hr-border);
205
+ border-top: var(--sep-line);
207
206
  padding: 0.6em 0 0;
208
207
  margin: 1.5em 0 0;
209
208
  }
package/src/types/EntryConfig.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { ContentInjectionMap } from "./ContentInjectionMap.ts";
2
- import type { Theme } from "./Theme.ts";
3
2
 
4
3
  export type EntryConfig = {
5
4
  id?: string;
@@ -10,9 +9,6 @@ export type EntryConfig = {
10
9
  * If not provided, the assets will be added via the package URLs.
11
10
  */
12
11
  assetsDir?: string;
13
- baseColor?: string;
14
- linkColor?: string;
15
- theme?: Theme;
16
12
  name?: string;
17
13
  title?: string;
18
14
  htmlTitle?: string;
package/src/types/Theme.ts DELETED
@@ -1 +0,0 @@
1
- export type Theme = string | undefined;