typedoc-github-theme 0.1.0 → 0.1.2

package/README.md

@@ -27,9 +27,13 @@ yarn add typedoc-github-theme
 **Use the theme when generating your documentation:**
 
 ```text
-typedoc src/** */ --plugin typedoc-github-theme --theme typedoc-github-theme
+npx typedoc src --plugin typedoc-github-theme
 ```
 
+> [!NOTE]
+> This plugin fills the following options if they have not been defined by the user:
+> [`theme`](https://typedoc.org/options/output/#theme), [`lightHighlightTheme`](https://typedoc.org/options/output/#lighthighlighttheme), [`darkHighlightTheme`](https://typedoc.org/options/output/#darkhighlighttheme)
+
 ---
 
 ## Author

package/dist/GitHubTheme.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GitHubTheme = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const typedoc_1 = require("typedoc");
+const GitHubThemeContext_1 = require("./GitHubThemeContext");
+class GitHubTheme extends typedoc_1.DefaultTheme {
+    initialize() {
+        super.initialize();
+        // copy the complete assets
+        this.application.renderer.on(typedoc_1.RendererEvent.END, () => {
+            const from = (0, path_1.resolve)(__dirname, '../src/assets/');
+            const to = (0, path_1.resolve)(this.application.options.getValue('out'), 'assets/');
+            (0, fs_1.cpSync)(from, to, { recursive: true });
+        });
+        // link the css file
+        this.application.renderer.hooks.on('head.end', (event) => (typedoc_1.JSX.createElement(typedoc_1.JSX.Fragment, null,
+            typedoc_1.JSX.createElement("link", { rel: "stylesheet", href: event.relativeURL('assets/typedoc-github-style.css') }))));
+        // set the Shiki theme
+        this.application.on('bootstrapEnd', () => {
+            if (!this.application.options.isSet('lightHighlightTheme')) {
+                this.application.options.setValue('lightHighlightTheme', 'github-light-default');
+            }
+            if (!this.application.options.isSet('darkHighlightTheme')) {
+                this.application.options.setValue('darkHighlightTheme', 'github-dark-default');
+            }
+        });
+    }
+    getRenderContext(pageEvent) {
+        return new GitHubThemeContext_1.GitHubThemeContext(this, pageEvent, this.application.options);
+    }
+}
+exports.GitHubTheme = GitHubTheme;

package/dist/GitHubThemeContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GitHubThemeContext = void 0;
+const typedoc_1 = require("typedoc");
+const footer_1 = require("./partials/footer");
+class GitHubThemeContext extends typedoc_1.DefaultThemeRenderContext {
+    footer = () => (0, footer_1.footer)(this);
+}
+exports.GitHubThemeContext = GitHubThemeContext;

package/dist/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.load = load;
+const GitHubTheme_1 = require("./GitHubTheme");
+/**
+ * Called by TypeDoc when loading this theme as a plugin
+ */
+function load(app) {
+    app.renderer.defineTheme('typedoc-github-theme', GitHubTheme_1.GitHubTheme);
+    app.on('bootstrapEnd', () => {
+        if (app.options.isSet('theme') && app.options.getValue('theme') !== 'typedoc-github-theme') {
+            return app.logger.warn(`The theme'typedoc-github-theme' is not used because another theme (${app.options.getValue('theme')}) was specified!`);
+        }
+        app.options.setValue('theme', 'typedoc-github-theme');
+    });
+}

package/dist/partials/footer.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.footer = footer;
+const typedoc_1 = require("typedoc");
+function footer(context) {
+    return (typedoc_1.JSX.createElement("footer", null,
+        context.hook('footer.begin', context),
+        generatorDisplay(context),
+        customFooterDisplay(context),
+        context.hook('footer.end', context)));
+}
+function generatorDisplay(context) {
+    if (context.options.getValue('hideGenerator')) {
+        return typedoc_1.JSX.createElement(typedoc_1.JSX.Fragment, null);
+    }
+    return (typedoc_1.JSX.createElement("p", { class: "tsd-generator" },
+        'Generated using ',
+        typedoc_1.JSX.createElement("a", { href: "https://typedoc.org/", target: "_blank" }, "TypeDoc"),
+        ' with ',
+        typedoc_1.JSX.createElement("a", { href: "https://github.com/KillerJulian/typedoc-github-theme", target: "_blank" }, "typedoc-github-theme")));
+}
+function customFooterDisplay(context) {
+    const customFooterHtml = context.options.getValue('customFooterHtml');
+    if (!customFooterHtml) {
+        return typedoc_1.JSX.createElement(typedoc_1.JSX.Fragment, null);
+    }
+    if (context.options.getValue('customFooterHtmlDisableWrapper')) {
+        return typedoc_1.JSX.createElement(typedoc_1.JSX.Raw, { html: customFooterHtml });
+    }
+    return (typedoc_1.JSX.createElement("p", null,
+        typedoc_1.JSX.createElement(typedoc_1.JSX.Raw, { html: customFooterHtml })));
+}

package/package.json

@@ -1,31 +1,31 @@
 {
 	"name": "typedoc-github-theme",
 	"description": "Elegant and seamless look and feel for your TypeScript documentation on GitHub Pages",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"repository": "https://github.com/KillerJulian/typedoc-github-theme",
 	"homepage": "https://killerjulian.github.io/typedoc-github-theme/",
 	"author": "KillerJulian <info@killerjulian.de>",
 	"license": "MIT",
-	"packageManager": "pnpm@9.5.0",
+	"packageManager": "pnpm@9.6.0",
 	"dependencies": {},
 	"peerDependencies": {
-		"typedoc": "^0.26.4"
+		"typedoc": "^0.26.0"
 	},
 	"devDependencies": {
-		"@types/node": "^18.19.41",
-		"eslint": "9.7.0",
+		"@types/node": "^18.19.43",
+		"eslint": "9.8.0",
 		"eslint-config-prettier": "9.1.0",
 		"prettier": "3.3.3",
-		"typedoc": "~0.26.4",
-		"typescript": "5.5.3",
-		"typescript-eslint": "8.0.0-alpha.47"
+		"typedoc": "~0.26.5",
+		"typescript": "5.5.4",
+		"typescript-eslint": "8.0.0"
 	},
 	"scripts": {
 		"build": "pnpm build:lib && pnpm build:docs",
 		"build:lib": "tsc",
-		"build:docs": "typedoc src --plugin ./dist/index.js --theme typedoc-github-theme",
+		"build:docs": "typedoc src --plugin ./dist/index.js",
 		"lint": "pnpm lint:format && pnpm lint:code",
 		"lint:code": "eslint .",
 		"lint:format": "prettier --check ."

package/src/assets/typedoc-github-style.css

@@ -0,0 +1,435 @@
+/*
+ * Define colors
+ */
+
+:root {
+	/* GitHub "Light default" */
+	--light-color-background: #ffffff;
+	--light-color-background-secondary: #f6f8fa;
+	--light-color-background-navbar: #f6f8fa;
+
+	--light-color-accent: #d0d7de;
+
+	--light-color-text: #1f2328;
+	--light-color-text-aside: #636c76;
+
+	--light-color-link: #0969da;
+
+	--light-color-warning-border: #f7ebba;
+	--light-color-background-warning: #fff8c5;
+
+	/* GitHub "Dark default" */
+	--dark-color-background: #0d1117;
+	--dark-color-background-secondary: #161b22;
+	--dark-color-background-navbar: #000000;
+
+	--dark-color-accent: #30363d;
+
+	--dark-color-text: #e6edf3;
+	--dark-color-text-aside: #8d96a0;
+
+	--dark-color-link: #4493f8;
+
+	--dark-color-warning-border: #3a2d12;
+	--dark-color-background-warning: #282215;
+
+	/* Link colors */
+	--color-warning-text: var(--color-text);
+	--color-icon-background: var(--color-background);
+	--color-focus-outline: var(--color-accent);
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--color-background-navbar: var(--light-color-background-navbar);
+		--color-warning-border: var(--light-color-warning-border);
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-background-navbar: var(--dark-color-background-navbar);
+		--color-warning-border: var(--dark-color-warning-border);
+	}
+}
+
+:root[data-theme='light'] {
+	--color-background-navbar: var(--light-color-background-navbar);
+	--color-warning-border: var(--light-color-warning-border);
+}
+
+:root[data-theme='dark'] {
+	--color-background-navbar: var(--dark-color-background-navbar);
+	--color-warning-border: var(--dark-color-warning-border);
+}
+
+/*
+ * Define fonts
+ */
+
+:root {
+	--font-family-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji';
+	--font-family-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+
+body {
+	font-family: var(--font-family-text);
+}
+
+/*
+ * Headlines
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin-top: 1em;
+	margin-bottom: 0.5em;
+}
+
+/*
+ * Links
+ */
+
+a,
+.tsd-kind-class {
+	color: var(--color-link);
+	text-decoration: underline;
+}
+
+.tsd-index-link {
+	text-decoration: none;
+}
+
+.tsd-index-link:hover {
+	text-decoration: underline;
+}
+
+.tsd-sources a {
+	color: var(--color-link);
+}
+
+/*
+ * Lists
+ */
+
+ul,
+ol {
+	margin-left: 20px;
+	list-style: disc;
+}
+
+li::marker {
+	color: var(--color-accent);
+}
+
+/*
+ * Input fields
+ */
+
+input {
+	background-color: var(--color-background-secondary);
+	color: var(--color-text);
+	border: 1px solid var(--color-accent);
+	border-radius: 6px;
+	padding: 8px;
+	width: 100%;
+}
+
+/*
+ * Tables
+ */
+
+table {
+	margin: 1em 0;
+}
+
+.tsd-typography th,
+.tsd-typography td {
+	padding: 8px;
+	text-align: left;
+}
+
+.tsd-typography th {
+	background-color: var(--color-background);
+	color: var(--color-text);
+}
+
+.tsd-typography tr:nth-child(2n) {
+	background-color: var(--color-background-code);
+}
+
+/*
+ * Horizontal line
+ */
+
+.tsd-typography hr {
+	color: var(--color-accent);
+}
+
+/*
+ * Buttons
+ */
+
+button {
+	background-color: var(--color-background-navbar);
+	color: var(--color-text);
+	border: 1px solid var(--color-accent);
+	border-radius: 6px;
+	padding: 8px 16px;
+	cursor: pointer;
+	transition: background-color 0.1s ease-in-out;
+}
+
+button:hover {
+	background-color: var(--color-accent);
+}
+
+pre > button {
+	background-color: transparent;
+	transition: background-color 0.1s ease-in-out;
+	border: none;
+	opacity: 1;
+	top: 8px;
+	padding: 4px 8px;
+}
+
+/*
+ * Checkbox
+ */
+
+.tsd-filter-input input[type='checkbox'],
+.tsd-filter-input svg {
+	width: 1em;
+	height: 1em;
+}
+
+.tsd-filter-input svg {
+	border-radius: 2px;
+}
+
+.tsd-checkbox-background {
+	fill: var(--color-background);
+	stroke: var(--color-accent);
+	stroke-width: 6px;
+}
+
+input[type='checkbox']:checked ~ svg .tsd-checkbox-background {
+	fill: var(--color-accent);
+}
+
+.tsd-checkbox-checkmark {
+	color: var(--color-text);
+}
+
+/*
+ * Select
+ */
+
+select {
+	background-color: var(--color-background);
+	border: 1px solid var(--color-accent);
+	border-radius: 6px;
+	padding: 8px;
+	font-family: inherit;
+}
+
+/*
+ * Code blocks
+ */
+
+code,
+pre {
+	border: none;
+	border-radius: 6px;
+	margin: 1em 0;
+	background-color: var(--color-background-secondary);
+	color: var(--color-text);
+	font-family: var(--font-family-code);
+}
+
+code.tsd-tag {
+	background-color: var(--color-accent);
+	border: unset;
+}
+
+/*
+ * Warnings
+ */
+
+.warning {
+	border-style: solid;
+	border-width: 1px;
+	border-color: var(--color-warning-border);
+	border-radius: 6px;
+}
+
+/*
+ * Topbar
+ */
+
+.tsd-page-toolbar {
+	background-color: var(--color-background-navbar);
+	border-bottom-color: var(--color-accent);
+}
+
+.tsd-page-toolbar a.title:hover {
+	text-decoration: none;
+}
+
+#tsd-search.has-focus {
+	background-color: var(--color-background-navbar);
+}
+
+#tsd-search .results,
+#tsd-search .results li,
+#tsd-search .results li:nth-child(2n) {
+	background-color: var(--color-background-navbar);
+}
+
+#tsd-search .results li {
+	margin-bottom: 0px;
+}
+
+#tsd-search .results li:hover:not(.no-results) {
+	background-color: var(--color-accent);
+}
+
+#tsd-search .results {
+	border-style: solid;
+	border-width: 1px;
+	border-color: var(--color-accent);
+	border-radius: 0px 0px 6px 6px;
+	overflow: hidden;
+}
+
+#tsd-search .results .no-results {
+	padding: calc(4px + 0.25rem);
+}
+
+/*
+ * Baseboard
+ */
+
+footer {
+	border-top-color: var(--color-accent);
+}
+
+/*
+ * Side navigations
+ */
+
+.site-menu {
+	padding: 1rem 0;
+}
+
+.tsd-navigation a {
+	color: var(--color-text);
+	border-radius: 6px;
+	padding: 6px;
+}
+
+.tsd-navigation a,
+.tsd-navigation a:hover {
+	text-decoration: none;
+}
+
+.tsd-navigation a:hover:not(.current) {
+	background-color: color-mix(in srgb, var(--color-text-aside), #0000 88%);
+}
+
+.tsd-navigation a.current {
+	background-color: color-mix(in srgb, var(--color-text-aside), #0000 92%);
+}
+
+/*
+ * Type definition groups
+ */
+
+.tsd-index-panel,
+.tsd-member-group {
+	background-color: var(--color-background);
+	padding: 16px;
+	border: 1px var(--color-accent) solid;
+	border-radius: 6px;
+}
+
+.tsd-panel > h1,
+.tsd-panel > h2,
+.tsd-panel > h3 {
+	margin-top: 0px;
+}
+
+.tsd-panel-group.tsd-index-group details {
+	margin: 0px;
+}
+
+.tsd-member-group .tsd-member:last-child {
+	margin-bottom: 0px;
+}
+
+.tsd-signature {
+	border: 1px solid var(--color-accent);
+	border-radius: 6px;
+}
+
+.tsd-signatures .tsd-signature {
+	border-color: var(--color-accent);
+	border-radius: 0px;
+}
+
+.tsd-description .tsd-signatures .tsd-signature {
+	border-radius: 6px;
+}
+
+.tsd-full-hierarchy:not(:last-child) {
+	border-bottom: var(--color-accent);
+}
+
+/*
+ * Footer
+ */
+
+footer p {
+	font-size: 1rem;
+	text-align: center;
+	color: var(--color-text-aside);
+}
+
+/*
+ * Fix collapsed margin
+ */
+
+.tsd-accordion-summary.tsd-index-summary > h5 {
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
+
+.tsd-panel-group:not([open]) > .tsd-accordion-summary {
+	margin-bottom: 0px;
+}
+
+/*
+ * Fix collapse arrow position
+ */
+
+.tsd-accordion-summary:has(svg) > * {
+	display: inline-flex;
+	align-items: center;
+	line-height: normal;
+}
+
+.tsd-accordion-summary > * > svg {
+	padding-top: 0px;
+	position: relative;
+	left: 0px;
+	top: 50%;
+}
+
+.tsd-accordion-summary svg {
+	transition: transform 0.1s ease-in-out;
+}