typedoc-github-theme 0.1.0 → 0.1.1

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,25 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.GitHubTheme = void 0;
4
+ const fs_1 = require("fs");
5
+ const path_1 = require("path");
6
+ const typedoc_1 = require("typedoc");
7
+ const GitHubThemeContext_1 = require("./GitHubThemeContext");
8
+ class GitHubTheme extends typedoc_1.DefaultTheme {
9
+ initialize() {
10
+ super.initialize();
11
+ // copy the complete assets
12
+ this.application.renderer.on(typedoc_1.RendererEvent.END, () => {
13
+ const from = (0, path_1.resolve)(__dirname, '../src/assets/');
14
+ const to = (0, path_1.resolve)(this.application.options.getValue('out'), 'assets/');
15
+ (0, fs_1.cpSync)(from, to, { recursive: true });
16
+ });
17
+ // link the css file
18
+ this.application.renderer.hooks.on('head.end', (event) => (typedoc_1.JSX.createElement(typedoc_1.JSX.Fragment, null,
19
+ typedoc_1.JSX.createElement("link", { rel: "stylesheet", href: event.relativeURL('assets/typedoc-github-style.css') }))));
20
+ }
21
+ getRenderContext(pageEvent) {
22
+ return new GitHubThemeContext_1.GitHubThemeContext(this, pageEvent, this.application.options);
23
+ }
24
+ }
25
+ exports.GitHubTheme = GitHubTheme;
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.GitHubThemeContext = void 0;
4
+ const typedoc_1 = require("typedoc");
5
+ const footer_1 = require("./partials/footer");
6
+ class GitHubThemeContext extends typedoc_1.DefaultThemeRenderContext {
7
+ footer = () => (0, footer_1.footer)(this);
8
+ }
9
+ exports.GitHubThemeContext = GitHubThemeContext;
package/dist/index.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.load = load;
4
+ const GitHubTheme_1 = require("./GitHubTheme");
5
+ /**
6
+ * Called by TypeDoc when loading this theme as a plugin
7
+ */
8
+ function load(app) {
9
+ app.renderer.defineTheme('typedoc-github-theme', GitHubTheme_1.GitHubTheme);
10
+ }
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.footer = footer;
4
+ const typedoc_1 = require("typedoc");
5
+ function footer(context) {
6
+ return (typedoc_1.JSX.createElement("footer", null,
7
+ context.hook('footer.begin', context),
8
+ generatorDisplay(context),
9
+ customFooterDisplay(context),
10
+ context.hook('footer.end', context)));
11
+ }
12
+ function generatorDisplay(context) {
13
+ if (context.options.getValue('hideGenerator')) {
14
+ return typedoc_1.JSX.createElement(typedoc_1.JSX.Fragment, null);
15
+ }
16
+ return (typedoc_1.JSX.createElement("p", { class: "tsd-generator" },
17
+ 'Generated using ',
18
+ typedoc_1.JSX.createElement("a", { href: "https://typedoc.org/", target: "_blank" }, "TypeDoc"),
19
+ ' with ',
20
+ typedoc_1.JSX.createElement("a", { href: "https://github.com/KillerJulian/typedoc-github-theme", target: "_blank" }, "typedoc-github-theme")));
21
+ }
22
+ function customFooterDisplay(context) {
23
+ const customFooterHtml = context.options.getValue('customFooterHtml');
24
+ if (!customFooterHtml) {
25
+ return typedoc_1.JSX.createElement(typedoc_1.JSX.Fragment, null);
26
+ }
27
+ if (context.options.getValue('customFooterHtmlDisableWrapper')) {
28
+ return typedoc_1.JSX.createElement(typedoc_1.JSX.Raw, { html: customFooterHtml });
29
+ }
30
+ return (typedoc_1.JSX.createElement("p", null,
31
+ typedoc_1.JSX.createElement(typedoc_1.JSX.Raw, { html: customFooterHtml })));
32
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "typedoc-github-theme",
3
3
  "description": "Elegant and seamless look and feel for your TypeScript documentation on GitHub Pages",
4
- "version": "0.1.0",
4
+ "version": "0.1.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
7
7
  "repository": "https://github.com/KillerJulian/typedoc-github-theme",
@@ -0,0 +1,404 @@
1
+ /*
2
+ * Define fonts
3
+ */
4
+
5
+ :root {
6
+ --font-family-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
7
+ 'Segoe UI Emoji';
8
+ --font-family-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
9
+ }
10
+
11
+ /*
12
+ * Define colors
13
+ */
14
+
15
+ :root,
16
+ :root[data-theme='dark'] {
17
+ --color-background: #0d1117;
18
+ --color-text: #e6edf3;
19
+ --color-text-aside: #8d96a0;
20
+ --color-accent: #4493f8;
21
+ --color-border: #30363d;
22
+ --color-header: #000000;
23
+ --color-code-background: #161b22;
24
+
25
+ --color-icon-background: var(--color-background);
26
+ --hl-0: var(--color-text);
27
+ --hl-1: var(--color-text);
28
+ }
29
+
30
+ :root[data-theme='light'] {
31
+ --color-background: #ffffff;
32
+ --color-text: #1f2328;
33
+ --color-text-aside: #636c76;
34
+ --color-accent: #0969da;
35
+ --color-border: #d0d7de;
36
+ --color-header: #f6f8fa;
37
+ --color-code-background: #f6f8fa;
38
+
39
+ --color-icon-background: var(--color-background);
40
+ --hl-0: var(--color-text);
41
+ --hl-1: var(--color-text);
42
+ }
43
+
44
+ /*
45
+ * Scrollbars
46
+ */
47
+
48
+ * {
49
+ scrollbar-color: var(--color-text-aside);
50
+ }
51
+
52
+ /*
53
+ * Default font family
54
+ */
55
+
56
+ body {
57
+ font-family: var(--font-family-text);
58
+ }
59
+
60
+ /*
61
+ * Headlines
62
+ */
63
+
64
+ h1,
65
+ h2,
66
+ h3,
67
+ h4,
68
+ h5,
69
+ h6 {
70
+ color: var(--color-text);
71
+ margin-top: 1em;
72
+ margin-bottom: 0.5em;
73
+ }
74
+
75
+ /*
76
+ * Links
77
+ */
78
+
79
+ a,
80
+ .tsd-kind-class {
81
+ color: var(--color-accent);
82
+ text-decoration: underline;
83
+ }
84
+
85
+ .tsd-index-link {
86
+ text-decoration: none;
87
+ }
88
+
89
+ .tsd-index-link:hover {
90
+ text-decoration: underline;
91
+ }
92
+
93
+ .tsd-anchor-icon {
94
+ color: var(--color-text);
95
+ }
96
+
97
+ /*
98
+ * Lists
99
+ */
100
+
101
+ ul,
102
+ ol {
103
+ margin-left: 20px;
104
+ list-style: disc;
105
+ }
106
+
107
+ li::marker {
108
+ color: var(--color-border);
109
+ }
110
+
111
+ /*
112
+ * Input boxes
113
+ */
114
+
115
+ input,
116
+ textarea {
117
+ background-color: var(--color-header);
118
+ color: var(--color-text);
119
+ border: 1px solid var(--color-border);
120
+ border-radius: 6px;
121
+ padding: 8px;
122
+ width: 100%;
123
+ }
124
+
125
+ /*
126
+ * Tables
127
+ */
128
+
129
+ table {
130
+ margin: 1em 0;
131
+ }
132
+
133
+ .tsd-typography th,
134
+ .tsd-typography td {
135
+ border: 1px solid var(--color-border);
136
+ padding: 8px;
137
+ text-align: left;
138
+ }
139
+
140
+ .tsd-typography th {
141
+ background-color: var(--color-background);
142
+ color: var(--color-text);
143
+ }
144
+
145
+ .tsd-typography tr:nth-child(2n) {
146
+ background-color: var(--color-code-background);
147
+ }
148
+
149
+ /*
150
+ * Horizontal line
151
+ */
152
+
153
+ .tsd-typography hr {
154
+ color: var(--color-border);
155
+ }
156
+
157
+ /*
158
+ * Buttons
159
+ */
160
+
161
+ button {
162
+ background-color: var(--color-header);
163
+ color: var(--color-text);
164
+ border: 1px solid var(--color-border);
165
+ border-radius: 6px;
166
+ padding: 8px 16px;
167
+ cursor: pointer;
168
+ transition: background-color 0.1s ease-in-out;
169
+ }
170
+
171
+ button:hover {
172
+ background-color: var(--color-border);
173
+ }
174
+
175
+ pre > button {
176
+ background-color: transparent;
177
+ transition: background-color 0.1s ease-in-out;
178
+ border: none;
179
+ opacity: 1;
180
+ top: 8px;
181
+ padding: 4px 8px;
182
+ }
183
+
184
+ /*
185
+ * Checkbox
186
+ */
187
+
188
+ .tsd-filter-input input[type='checkbox'],
189
+ .tsd-filter-input svg {
190
+ width: 1em;
191
+ height: 1em;
192
+ }
193
+
194
+ .tsd-filter-input svg {
195
+ border-radius: 2px;
196
+ }
197
+
198
+ .tsd-checkbox-background {
199
+ fill: var(--color-background);
200
+ stroke: var(--color-border);
201
+ stroke-width: 6px;
202
+ }
203
+
204
+ input[type='checkbox']:checked ~ svg .tsd-checkbox-background {
205
+ fill: var(--color-border);
206
+ }
207
+
208
+ .tsd-checkbox-checkmark {
209
+ color: var(--color-text);
210
+ }
211
+
212
+ /*
213
+ * Select
214
+ */
215
+
216
+ select {
217
+ background-color: var(--color-background);
218
+ color: var(--color-foreground);
219
+ border: 1px solid var(--color-border);
220
+ border-radius: 6px;
221
+ padding: 8px;
222
+ font-family: inherit;
223
+ }
224
+
225
+ /*
226
+ * Code blocks
227
+ */
228
+
229
+ pre,
230
+ code {
231
+ border: none;
232
+ border-radius: 6px;
233
+ margin: 1em 0;
234
+ background-color: var(--color-code-background);
235
+ color: var(--color-text);
236
+ font-family: var(--font-family-code);
237
+ }
238
+
239
+ code.tsd-tag {
240
+ background-color: var(--color-border);
241
+ border: unset;
242
+ }
243
+
244
+ /*
245
+ * Topbar
246
+ */
247
+
248
+ .tsd-page-toolbar {
249
+ background-color: var(--color-header);
250
+ border-bottom-color: var(--color-border);
251
+ }
252
+
253
+ .tsd-page-toolbar a.title:hover {
254
+ text-decoration: none;
255
+ }
256
+
257
+ #tsd-search.has-focus {
258
+ background-color: var(--color-header);
259
+ }
260
+
261
+ #tsd-search .results,
262
+ #tsd-search .results li,
263
+ #tsd-search .results li:nth-child(2n) {
264
+ background-color: var(--color-header);
265
+ }
266
+
267
+ #tsd-search .results li {
268
+ margin-bottom: 0px;
269
+ }
270
+
271
+ #tsd-search .results li:hover:not(.no-results) {
272
+ background-color: var(--color-border);
273
+ }
274
+
275
+ #tsd-search .results {
276
+ border-style: solid;
277
+ border-width: 1px;
278
+ border-color: var(--color-border);
279
+ border-radius: 0px 0px 6px 6px;
280
+ overflow: hidden;
281
+ }
282
+
283
+ #tsd-search .results .no-results {
284
+ padding: calc(4px + 0.25rem);
285
+ }
286
+
287
+ /*
288
+ * Baseboard
289
+ */
290
+
291
+ footer {
292
+ border-top-color: var(--color-border);
293
+ }
294
+
295
+ /*
296
+ * Side navigations
297
+ */
298
+
299
+ .site-menu {
300
+ padding: 1rem 0;
301
+ }
302
+
303
+ .tsd-navigation a {
304
+ color: var(--color-text);
305
+ border-radius: 6px;
306
+ padding: 6px;
307
+ }
308
+
309
+ .tsd-navigation a,
310
+ .tsd-navigation a:hover {
311
+ text-decoration: none;
312
+ }
313
+
314
+ .tsd-navigation a:hover:not(.current) {
315
+ background-color: color-mix(in srgb, var(--color-text-aside), #0000 88%);
316
+ }
317
+
318
+ .tsd-navigation a.current {
319
+ background-color: color-mix(in srgb, var(--color-text-aside), #0000 92%);
320
+ }
321
+
322
+ /*
323
+ * Type definition groups
324
+ */
325
+
326
+ .tsd-index-panel,
327
+ .tsd-member-group {
328
+ background-color: var(--color-background);
329
+ padding: 16px;
330
+ border: 1px var(--color-border) solid;
331
+ border-radius: 6px;
332
+ }
333
+
334
+ .tsd-panel > h1,
335
+ .tsd-panel > h2,
336
+ .tsd-panel > h3 {
337
+ margin-top: 0px;
338
+ }
339
+
340
+ .tsd-panel-group.tsd-index-group details {
341
+ margin: 0px;
342
+ }
343
+
344
+ .tsd-member-group .tsd-member:last-child {
345
+ margin-bottom: 0px;
346
+ }
347
+
348
+ .tsd-signature {
349
+ border: 1px solid var(--color-border);
350
+ border-radius: 6px;
351
+ }
352
+
353
+ .tsd-signatures .tsd-signature {
354
+ border-color: var(--color-border);
355
+ border-radius: 0px;
356
+ }
357
+
358
+ .tsd-description .tsd-signatures .tsd-signature {
359
+ border-radius: 6px;
360
+ }
361
+
362
+ /*
363
+ * Footer
364
+ */
365
+
366
+ footer p {
367
+ font-size: 1rem;
368
+ text-align: center;
369
+ color: var(--color-text-aside);
370
+ }
371
+
372
+ /*
373
+ * Fix collapsed margin
374
+ */
375
+
376
+ .tsd-accordion-summary.tsd-index-summary > h5 {
377
+ margin-top: 0px;
378
+ margin-bottom: 0px;
379
+ }
380
+
381
+ .tsd-panel-group:not([open]) > .tsd-accordion-summary {
382
+ margin-bottom: 0px;
383
+ }
384
+
385
+ /*
386
+ * Fix collapse arrow position
387
+ */
388
+
389
+ .tsd-accordion-summary:has(svg) > * {
390
+ display: inline-flex;
391
+ align-items: center;
392
+ line-height: normal;
393
+ }
394
+
395
+ .tsd-accordion-summary > * > svg {
396
+ padding-top: 0px;
397
+ position: relative;
398
+ left: 0px;
399
+ top: 50%;
400
+ }
401
+
402
+ .tsd-accordion-summary svg {
403
+ transition: transform 0.1s ease-in-out;
404
+ }