From 2ba2b8947aaa96ece08b8b94d40445177cf271df Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Wed, 6 Dec 2023 22:24:47 -0800 Subject: [PATCH 01/11] Inject css and html element via JSX and plugin --- theme/.editorconfig | 11 +++ theme/.gitignore | 22 +++++ theme/README.md | 0 theme/assets/style.css | 159 +++++++++++++++++++++++++++++++++++++ theme/package-lock.json | 141 ++++++++++++++++++++++++++++++++ theme/package.json | 24 ++++++ theme/src/MarloweTheme.tsx | 8 ++ theme/src/ThemeContext.tsx | 25 ++++++ theme/src/index.tsx | 58 ++++++++++++++ theme/tsconfig.json | 16 ++++ typedoc.json | 1 + 11 files changed, 465 insertions(+) create mode 100644 theme/.editorconfig create mode 100644 theme/.gitignore create mode 100644 theme/README.md create mode 100644 theme/assets/style.css create mode 100644 theme/package-lock.json create mode 100644 theme/package.json create mode 100644 theme/src/MarloweTheme.tsx create mode 100644 theme/src/ThemeContext.tsx create mode 100644 theme/src/index.tsx create mode 100644 theme/tsconfig.json diff --git a/theme/.editorconfig b/theme/.editorconfig new file mode 100644 index 00000000..2a1417f5 --- /dev/null +++ b/theme/.editorconfig @@ -0,0 +1,11 @@ +# https://editorconfig.org + +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/theme/.gitignore b/theme/.gitignore new file mode 100644 index 00000000..fb6e78f7 --- /dev/null +++ b/theme/.gitignore @@ -0,0 +1,22 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Compiled output +dist + +# Dependency directories +node_modules/ + +# Output of 'npm pack' +*.tgz + +# Output of running `yarn typedoc src` on this repo +docs diff --git a/theme/README.md b/theme/README.md new file mode 100644 index 00000000..e69de29b diff --git a/theme/assets/style.css b/theme/assets/style.css new file mode 100644 index 00000000..8fca1abc --- /dev/null +++ b/theme/assets/style.css @@ -0,0 +1,159 @@ +@media (prefers-color-scheme: light) { + :root { + --menu-item-active-bg: #dfe0e2; + } + } + @media (prefers-color-scheme: dark) { + :root { + --menu-item-active-bg: #1e2024; + } + } + :root[data-theme='light'] { + --menu-item-active-bg: #dfe0e2; + } + :root[data-theme='dark'] { + --menu-item-active-bg: #1e2024; + } + .tsd-navigation a.current, + .tsd-page-navigation a.current { + background-color: var(--menu-item-active-bg); + } + .container { + padding: 0; + } + .tsd-page-toolbar, + .tsd-generator { + border: 0; + } + .tsd-generator { + padding: 0; + line-height: 40px; + height: 40px; + background: var(--color-background-secondary); + } + .tsd-generator > p { + max-width: 1700px; + margin: auto; + } + .container-main { + margin: 0 auto; + min-height: calc(100vh - 80px); + } + .menu-sticky-wrap { + } + .tsd-navigation.settings .tsd-accordion-details { + padding: 1rem; + background: var(--color-background-secondary); + } + .tsd-navigation.settings { + display: inline-block; + vertical-align: top; + margin: 0; + } + .tsd-navigation.settings h3{ + display: flex; + align-items: center; + font-size: 14px; + } + .tsd-navigation.settings .tsd-index-accordion { + position: relative; + } + .tsd-navigation.settings .tsd-accordion-summary { + display: inline-flex; + vertical-align: top; + align-items: center; + margin-left: 1rem; + height: 40px; + } + .tsd-navigation .tsd-accordion-summary { + display: flex; + align-items: center; + } + .tsd-navigation a { + display: flex; + } + .col-menu, + .col-content { + position: static; + margin: 0; + height: 100%; + box-sizing: border-box; + } + .col-menu { + flex: 0 0 20rem; + border-left: 0; + padding-left: 1rem; + padding-right: 0.1rem; + } + .col-content { + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + flex: 1; + } + .menu-item-desc { + color: #5d5d5d; + font-size: 12px; + line-height: 1.26; + font-weight: normal; + } + + :root[data-theme='dark'] .menu-item-desc { + color: #989898; + } + @media (prefers-color-scheme: dark) { + .menu-item-desc { + color: #989898; + } + } + + a.tsd-index-link { + align-items: flex-start; + } + pre { + border: 0; + } + .tsd-signature { + background: var(--code-background); + border: 0; + } + code.tsd-tag { + border: 0; + } + + #tsd-search.has-focus .tsd-navigation.settings { + visibility: hidden; + } + + .tsd-page-toolbar .tsd-toolbar-icon { + text-align: center; + } + @media (max-width: 1024px) { + #tsd-search .title { + max-width: calc(100vw - 22rem); + overflow: hidden; + display: inline-block; + text-overflow: ellipsis; + } + } + @media (min-width: 1200px) { + .page-menu, + .site-menu { + max-height: calc(100vh - 60px); + padding: 10px 0 10px 10px; + top: 40px; + } + .container-main.empty-page-menu { + grid-template-columns: minmax(0, 1fr) minmax(0, 3.5fr) minmax(0, 0); + grid-template-areas: 'sidebar content'; + } + } + @media (min-width: 770px) and (max-width: 1399px) { + .col-sidebar { + max-height: calc(100vh - 60px); + top: 40px; + } + } + #tsd-search .title { + padding-left: 10px; + } \ No newline at end of file diff --git a/theme/package-lock.json b/theme/package-lock.json new file mode 100644 index 00000000..2fbc3f5d --- /dev/null +++ b/theme/package-lock.json @@ -0,0 +1,141 @@ +{ + "name": "marlowe-typedoc-theme", + "version": "0.0.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "marlowe-typedoc-theme", + "version": "0.0.1", + "license": "MIT", + "devDependencies": { + "typedoc": "^0.24.8", + "typescript": "^4.9.5" + }, + "engines": { + "node": ">= 14.20.1" + }, + "peerDependencies": { + "typedoc": "^0.24.8" + } + }, + "node_modules/ansi-sequence-parser": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz", + "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==", + "dev": true + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, + "node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/jsonc-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", + "dev": true + }, + "node_modules/lunr": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz", + "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==", + "dev": true + }, + "node_modules/marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==", + "dev": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/shiki": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.5.tgz", + "integrity": "sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==", + "dev": true, + "dependencies": { + "ansi-sequence-parser": "^1.1.0", + "jsonc-parser": "^3.2.0", + "vscode-oniguruma": "^1.7.0", + "vscode-textmate": "^8.0.0" + } + }, + "node_modules/typedoc": { + "version": "0.24.8", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.8.tgz", + "integrity": "sha512-ahJ6Cpcvxwaxfu4KtjA8qZNqS43wYt6JL27wYiIgl1vd38WW/KWX11YuAeZhuz9v+ttrutSsgK+XO1CjL1kA3w==", + "dev": true, + "dependencies": { + "lunr": "^2.3.9", + "marked": "^4.3.0", + "minimatch": "^9.0.0", + "shiki": "^0.14.1" + }, + "bin": { + "typedoc": "bin/typedoc" + }, + "engines": { + "node": ">= 14.14" + }, + "peerDependencies": { + "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x" + } + }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, + "node_modules/vscode-oniguruma": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz", + "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==", + "dev": true + }, + "node_modules/vscode-textmate": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz", + "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==", + "dev": true + } + } +} diff --git a/theme/package.json b/theme/package.json new file mode 100644 index 00000000..2ee04fec --- /dev/null +++ b/theme/package.json @@ -0,0 +1,24 @@ +{ + "name": "marlowe-typedoc-theme", + "version": "0.0.1", + "main": "dist/index.js", + "license": "Apache-2.0", + "keywords": [ + "typedoc-theme" + ], + "engines": { + "node": ">= 14.20.1" + }, + "devDependencies": { + "typedoc": "^0.24.8", + "typescript": "^4.9.5" + }, + "peerDependencies": { + "typedoc": "^0.24.8" + }, + "scripts": { + "build": "tsc", + "predocs": "tsc", + "docs": "typedoc src --plugin dist/index.js" + } +} diff --git a/theme/src/MarloweTheme.tsx b/theme/src/MarloweTheme.tsx new file mode 100644 index 00000000..cf753fca --- /dev/null +++ b/theme/src/MarloweTheme.tsx @@ -0,0 +1,8 @@ +import { DefaultTheme, JSX, PageEvent, Reflection } from 'typedoc'; +import { ThemeContext } from './ThemeContext'; + +export class MarloweTheme extends DefaultTheme { + override getRenderContext(pageEvent: PageEvent): ThemeContext { + return new ThemeContext(this, pageEvent, this.application.options); + } +} \ No newline at end of file diff --git a/theme/src/ThemeContext.tsx b/theme/src/ThemeContext.tsx new file mode 100644 index 00000000..1bdcacb6 --- /dev/null +++ b/theme/src/ThemeContext.tsx @@ -0,0 +1,25 @@ +import { + DefaultTheme, + DefaultThemeRenderContext, + JSX, + Options, + PageEvent, + Reflection, + } from 'typedoc'; + // import * as templates from './templates'; + + function bind(fn: (f: F, ...a: L) => R, first: F) { + return (...r: L) => fn(first, ...r); + } + + export class ThemeContext extends DefaultThemeRenderContext { + constructor(theme: DefaultTheme, page: PageEvent, options: Options) { + super(theme, page, options); + this.init(); + } + init(){ + // for (const [key, tpl] of Object.entries(templates)) { + // this[key as keyof ThemeContext] = bind(tpl as any, this) as any; + // } + } + } \ No newline at end of file diff --git a/theme/src/index.tsx b/theme/src/index.tsx new file mode 100644 index 00000000..ef5d82eb --- /dev/null +++ b/theme/src/index.tsx @@ -0,0 +1,58 @@ +import { cpSync } from "node:fs"; +import { resolve } from "node:path"; +import { MarloweTheme } from "./MarloweTheme"; + +import { Application, JSX, RendererEvent } from "typedoc"; + + +/** + * Called by TypeDoc when loaded as a plugin. + */ +export function load(app: Application) { + app.renderer.hooks.on('body.begin', (_) => ( + + )); + + app.renderer.hooks.on("head.end", (event) => ( + <> + + + )); + + app.listenTo(app.renderer, RendererEvent.END, () => { + const from = resolve(__dirname, '../assets/style.css'); + const to = resolve(app.options.getValue('out'), 'assets/marlowe-theme.css'); + cpSync(from, to); + }); + app.renderer.defineTheme('marlowe-theme', MarloweTheme); + + app.renderer.hooks.on("body.end", (event) => ( + + )); +} \ No newline at end of file diff --git a/theme/tsconfig.json b/theme/tsconfig.json new file mode 100644 index 00000000..cbac28e9 --- /dev/null +++ b/theme/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "es2020", + "module": "commonjs", + "moduleResolution": "node", + "forceConsistentCasingInFileNames": true, + "strict": true, + "outDir": "dist", + "esModuleInterop": true, + + "jsx": "react", + "jsxFactory": "JSX.createElement", + "jsxFragmentFactory": "JSX.Fragment" + }, + "include": ["src"] +} diff --git a/typedoc.json b/typedoc.json index feafbc29..5a25d288 100644 --- a/typedoc.json +++ b/typedoc.json @@ -9,6 +9,7 @@ "out": "./docs", "readme": "./packages/api.md", "includeVersion": true, + "plugin": ["./theme/dist/index.js"], "sidebarLinks": { "How to develop": "https://github.com/input-output-hk/marlowe-ts-sdk/blob/main/doc/howToDevelop.md", "Module system": "https://github.com/input-output-hk/marlowe-ts-sdk/blob/main/doc/modules-system.md", From 93d18365daf21a8973b857879de6088e34be9a7c Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Mon, 1 Jan 2024 16:25:27 -0800 Subject: [PATCH 02/11] Use asset pipeline alongside default theme --- theme/assets/favicon.ico | Bin 0 -> 4286 bytes theme/assets/logo.svg | 31 +++++++ theme/assets/marlowe-theme.css | 4 + theme/assets/style.css | 159 -------------------------------- theme/package.json | 7 +- theme/src/ThemeContext.tsx | 28 +++--- theme/src/index.tsx | 41 +++++--- theme/src/templates/index.ts | 2 + theme/src/templates/layout.tsx | 83 +++++++++++++++++ theme/src/templates/toolbar.tsx | 49 ++++++++++ theme/src/templates/utils.tsx | 9 ++ 11 files changed, 226 insertions(+), 187 deletions(-) create mode 100644 theme/assets/favicon.ico create mode 100644 theme/assets/logo.svg create mode 100644 theme/assets/marlowe-theme.css delete mode 100644 theme/assets/style.css create mode 100644 theme/src/templates/index.ts create mode 100644 theme/src/templates/layout.tsx create mode 100644 theme/src/templates/toolbar.tsx create mode 100644 theme/src/templates/utils.tsx diff --git a/theme/assets/favicon.ico b/theme/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..ca7487d104ba3090e466c01fc2f9084f8c1ddac8 GIT binary patch literal 4286 zcmeI0J8u&~6h_Aw5%H!#pm=R!2_Yd0h{O*7i4yW~9G(dclsv*ez@nfAQXtVLKw3c1 zK!F4eG(04FOFU{M5_>}+%lUS9?2Wx%+t>{f8y(Mj=FWU~?u>Wt#+Vd;`MlAmS=eFB zE@RAopvoKt)%zE1ueJpQ6`g%nvlFJ8EkxPO_fzl&-ohDBUCqXI3Y`s}U{%T0#|y{a zM0p$@!4L347AYUY36PENN5asFP1Sf^jV+BOu(}_)7pq~N+GKM8YO$y~Bc_@wCTgnD z&5qam1pPIaINkTu&p-wS;R<{L>(>MO!uw!sXQIgu*XdeUnvK3*picUV#ksKE zp}Y%Y5bTcz{m{;il{DY0*v9DAe3z!QqxyNie}nQKR zGnfPy{$Nu&kwc@^qeL9+ds6S61 zX-1jzre+Q6PTxE)ZRCJj~`_?re9W^f^-kT zE%*k~6<^>O^hLi)9u+hy7zRD#Wxo$}{>i4R_`8`z-ROMly7fLA z(No^?6jng`4|9uIzQ5Hs&olZuig2Z#r7J!hFKVP z_tf(7B;6ToGhkz*GhKP&JJ4A#eVxBa`G@-0{#&`X`%1aXC`99I=PTW4zo@RAb0zGn z{6ph+oPUM(hba{gJ6>FzTj@Tb-v~(4&drwH_@UTdg3Hh<&elK8H&$0?eV_90uI8)! zs`2Xa{X_ez?R=F#x4U|H|7scMR=IPMFE$5dUeW#0@%yLx>3yTu>#yFwW7ap$53iK+ zR!z!tjTtH%Gf)EGF3sI`I09bDq+y^5jDNv*cnQXs_0Z}n@vn$7X3| + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/theme/assets/marlowe-theme.css b/theme/assets/marlowe-theme.css new file mode 100644 index 00000000..5f5f34bd --- /dev/null +++ b/theme/assets/marlowe-theme.css @@ -0,0 +1,4 @@ +.logo-container { + width: 12%; + margin-top: 3px; +} \ No newline at end of file diff --git a/theme/assets/style.css b/theme/assets/style.css deleted file mode 100644 index 8fca1abc..00000000 --- a/theme/assets/style.css +++ /dev/null @@ -1,159 +0,0 @@ -@media (prefers-color-scheme: light) { - :root { - --menu-item-active-bg: #dfe0e2; - } - } - @media (prefers-color-scheme: dark) { - :root { - --menu-item-active-bg: #1e2024; - } - } - :root[data-theme='light'] { - --menu-item-active-bg: #dfe0e2; - } - :root[data-theme='dark'] { - --menu-item-active-bg: #1e2024; - } - .tsd-navigation a.current, - .tsd-page-navigation a.current { - background-color: var(--menu-item-active-bg); - } - .container { - padding: 0; - } - .tsd-page-toolbar, - .tsd-generator { - border: 0; - } - .tsd-generator { - padding: 0; - line-height: 40px; - height: 40px; - background: var(--color-background-secondary); - } - .tsd-generator > p { - max-width: 1700px; - margin: auto; - } - .container-main { - margin: 0 auto; - min-height: calc(100vh - 80px); - } - .menu-sticky-wrap { - } - .tsd-navigation.settings .tsd-accordion-details { - padding: 1rem; - background: var(--color-background-secondary); - } - .tsd-navigation.settings { - display: inline-block; - vertical-align: top; - margin: 0; - } - .tsd-navigation.settings h3{ - display: flex; - align-items: center; - font-size: 14px; - } - .tsd-navigation.settings .tsd-index-accordion { - position: relative; - } - .tsd-navigation.settings .tsd-accordion-summary { - display: inline-flex; - vertical-align: top; - align-items: center; - margin-left: 1rem; - height: 40px; - } - .tsd-navigation .tsd-accordion-summary { - display: flex; - align-items: center; - } - .tsd-navigation a { - display: flex; - } - .col-menu, - .col-content { - position: static; - margin: 0; - height: 100%; - box-sizing: border-box; - } - .col-menu { - flex: 0 0 20rem; - border-left: 0; - padding-left: 1rem; - padding-right: 0.1rem; - } - .col-content { - padding-top: 1rem; - padding-left: 1rem; - padding-right: 1rem; - flex: 1; - } - .menu-item-desc { - color: #5d5d5d; - font-size: 12px; - line-height: 1.26; - font-weight: normal; - } - - :root[data-theme='dark'] .menu-item-desc { - color: #989898; - } - @media (prefers-color-scheme: dark) { - .menu-item-desc { - color: #989898; - } - } - - a.tsd-index-link { - align-items: flex-start; - } - pre { - border: 0; - } - .tsd-signature { - background: var(--code-background); - border: 0; - } - code.tsd-tag { - border: 0; - } - - #tsd-search.has-focus .tsd-navigation.settings { - visibility: hidden; - } - - .tsd-page-toolbar .tsd-toolbar-icon { - text-align: center; - } - @media (max-width: 1024px) { - #tsd-search .title { - max-width: calc(100vw - 22rem); - overflow: hidden; - display: inline-block; - text-overflow: ellipsis; - } - } - @media (min-width: 1200px) { - .page-menu, - .site-menu { - max-height: calc(100vh - 60px); - padding: 10px 0 10px 10px; - top: 40px; - } - .container-main.empty-page-menu { - grid-template-columns: minmax(0, 1fr) minmax(0, 3.5fr) minmax(0, 0); - grid-template-areas: 'sidebar content'; - } - } - @media (min-width: 770px) and (max-width: 1399px) { - .col-sidebar { - max-height: calc(100vh - 60px); - top: 40px; - } - } - #tsd-search .title { - padding-left: 10px; - } \ No newline at end of file diff --git a/theme/package.json b/theme/package.json index 2ee04fec..7ab9bd90 100644 --- a/theme/package.json +++ b/theme/package.json @@ -6,6 +6,10 @@ "keywords": [ "typedoc-theme" ], + "files": [ + "dist", + "assets" + ], "engines": { "node": ">= 14.20.1" }, @@ -18,7 +22,6 @@ }, "scripts": { "build": "tsc", - "predocs": "tsc", - "docs": "typedoc src --plugin dist/index.js" + "ts-check": "tsc --noEmit" } } diff --git a/theme/src/ThemeContext.tsx b/theme/src/ThemeContext.tsx index 1bdcacb6..94c8300d 100644 --- a/theme/src/ThemeContext.tsx +++ b/theme/src/ThemeContext.tsx @@ -6,20 +6,20 @@ import { PageEvent, Reflection, } from 'typedoc'; - // import * as templates from './templates'; +import * as templates from './templates'; - function bind(fn: (f: F, ...a: L) => R, first: F) { - return (...r: L) => fn(first, ...r); +function bind(fn: (f: F, ...a: L) => R, first: F) { + return (...r: L) => fn(first, ...r); +} + +export class ThemeContext extends DefaultThemeRenderContext { + constructor(theme: DefaultTheme, page: PageEvent, options: Options) { + super(theme, page, options); + this.init(); } - - export class ThemeContext extends DefaultThemeRenderContext { - constructor(theme: DefaultTheme, page: PageEvent, options: Options) { - super(theme, page, options); - this.init(); - } - init(){ - // for (const [key, tpl] of Object.entries(templates)) { - // this[key as keyof ThemeContext] = bind(tpl as any, this) as any; - // } + init(){ + for (const [key, tpl] of Object.entries(templates)) { + this[key as keyof ThemeContext] = bind(tpl as any, this) as any; } - } \ No newline at end of file + } +} \ No newline at end of file diff --git a/theme/src/index.tsx b/theme/src/index.tsx index ef5d82eb..36910f20 100644 --- a/theme/src/index.tsx +++ b/theme/src/index.tsx @@ -1,5 +1,5 @@ -import { cpSync } from "node:fs"; -import { resolve } from "node:path"; +import * as path from 'path'; +import * as fs from 'fs'; import { MarloweTheme } from "./MarloweTheme"; import { Application, JSX, RendererEvent } from "typedoc"; @@ -15,22 +15,23 @@ export function load(app: Application) { )); + app.listenTo(app.renderer, RendererEvent.END, (event: RendererEvent) => { + const src = path.join(__dirname, '..', 'assets'); + const dest = path.join(event.outputDirectory, 'assets', 'marlowe'); + copySync(src, dest); + }); + app.renderer.defineTheme('marlowe-theme', MarloweTheme); + app.renderer.hooks.on("head.end", (event) => ( <> + )); - app.listenTo(app.renderer, RendererEvent.END, () => { - const from = resolve(__dirname, '../assets/style.css'); - const to = resolve(app.options.getValue('out'), 'assets/marlowe-theme.css'); - cpSync(from, to); - }); - app.renderer.defineTheme('marlowe-theme', MarloweTheme); - app.renderer.hooks.on("body.end", (event) => ( )); +} + +export function copySync(src: string, dest: string): void { + const stat = fs.statSync(src); + + if (stat.isDirectory()) { + const contained = fs.readdirSync(src); + contained.forEach((file) => + copySync(path.join(src, file), path.join(dest, file)) + ); + } else if (stat.isFile()) { + fs.mkdirSync(path.dirname(dest), { recursive: true }); + fs.copyFileSync(src, dest); + } else { + // Do nothing for FIFO, special devices. + } } \ No newline at end of file diff --git a/theme/src/templates/index.ts b/theme/src/templates/index.ts new file mode 100644 index 00000000..f89bb15d --- /dev/null +++ b/theme/src/templates/index.ts @@ -0,0 +1,2 @@ +export * from './toolbar'; +export * from './layout'; \ No newline at end of file diff --git a/theme/src/templates/layout.tsx b/theme/src/templates/layout.tsx new file mode 100644 index 00000000..1b4abf6f --- /dev/null +++ b/theme/src/templates/layout.tsx @@ -0,0 +1,83 @@ +import { + ContainerReflection, + DefaultThemeRenderContext, + JSX, + PageEvent, + Reflection, + RenderTemplate, +} from 'typedoc'; +import { classNames } from './utils'; + +export const layout = ( + context: DefaultThemeRenderContext, + template: RenderTemplate>, + props: PageEvent, +) => { + return ( + + + + {context.hook('head.begin')} + + + + + + + + {context.options.getValue('customCss') && ( + + )} + + + + {context.hook('head.end')} + + + {context.hook('body.begin')} + {context.toolbar(props)} + +
+
+ {context.hook('content.begin')} + {context.header(props)} + {template(props)} + {context.hook('content.end')} +
+
+
+ {context.hook('pageSidebar.begin')} + {context.pageSidebar(props)} + {context.hook('pageSidebar.end')} +
+
+ {context.hook('sidebar.begin')} + {context.sidebar(props)} + {context.hook('sidebar.end')} +
+
+
+ + {context.footer()} + +
+ + {context.analytics()} + {context.hook('body.end')} + + + ); +}; \ No newline at end of file diff --git a/theme/src/templates/toolbar.tsx b/theme/src/templates/toolbar.tsx new file mode 100644 index 00000000..a01c8409 --- /dev/null +++ b/theme/src/templates/toolbar.tsx @@ -0,0 +1,49 @@ +import { DefaultThemeRenderContext, JSX, PageEvent, Reflection } from 'typedoc'; + +export const toolbar = (context: DefaultThemeRenderContext, props: PageEvent) => ( +
+
+ + + +
+
+); \ No newline at end of file diff --git a/theme/src/templates/utils.tsx b/theme/src/templates/utils.tsx new file mode 100644 index 00000000..03e6b53a --- /dev/null +++ b/theme/src/templates/utils.tsx @@ -0,0 +1,9 @@ +export function classNames(names: Record, extraCss?: string) { + const css = Object.keys(names) + .filter((key) => names[key]) + .concat(extraCss || '') + .join(' ') + .trim() + .replace(/\s+/g, ' '); + return css.length ? css : undefined; +} From 23cf1f222cbd1372dc1d2cda2dac65ff2ec7b777 Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Mon, 1 Jan 2024 17:55:11 -0800 Subject: [PATCH 03/11] Add custom css hooks; github icon, and dark mode --- package.json | 2 +- theme/assets/github.svg | 3 + theme/assets/logo.svg | 21 +- theme/assets/marlowe-theme.css | 942 +++++++++++++++++++++++++++++++- theme/src/templates/toolbar.tsx | 5 +- typedoc.json | 1 + 6 files changed, 951 insertions(+), 23 deletions(-) create mode 100644 theme/assets/github.svg diff --git a/package.json b/package.json index d99c6653..63479741 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "build": "tsc --version && tsc --build && shx mkdir -p dist && rollup --config rollup/config.mjs", "clean": "npm run clean --workspaces && shx rm -rf dist", "test": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' jest", - "docs": "typedoc . --treatWarningsAsErrors", + "docs": "typedoc . --treatWarningsAsErrors --options ./typedoc.json", "serve": "ws --port 1337 --rewrite '/importmap -> https://cdn.jsdelivr.net/gh/input-output-hk/marlowe-ts-sdk@0.2.0-beta/jsdelivr-npm-importmap.js'", "serve-dev": "ws --port 1337 --rewrite '/importmap -> /dist/local-importmap.js'" }, diff --git a/theme/assets/github.svg b/theme/assets/github.svg new file mode 100644 index 00000000..e6dbc42e --- /dev/null +++ b/theme/assets/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/theme/assets/logo.svg b/theme/assets/logo.svg index 4d3e8149..050e729e 100644 --- a/theme/assets/logo.svg +++ b/theme/assets/logo.svg @@ -1,31 +1,16 @@ - + - - - - - - - - - - - - - + + \ No newline at end of file diff --git a/theme/assets/marlowe-theme.css b/theme/assets/marlowe-theme.css index 5f5f34bd..bd0e8aaf 100644 --- a/theme/assets/marlowe-theme.css +++ b/theme/assets/marlowe-theme.css @@ -1,4 +1,940 @@ -.logo-container { - width: 12%; - margin-top: 3px; +/* https://github.com/elad2412/the-new-css-reset */ +*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reapply the pointer cursor for anchor tags */ +a, button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* Removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* Minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* Preformatted text - use only for this feature */ +:where(pre) { + all: revert; +} + +/* Reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* Remove default dot (•) sign */ +::marker { + content: initial; +} + +/* ----------------------------------------------------- THEME ----------------------------------------------------- */ + +:root { + --light-color-background: #ffffff; + --light-color-warning-text: #cca213; + --light-color-background-secondary: rgb(246, 248, 250); + --light-color-active-menu-item: #ddd; + --light-color-accent: #e0e1e1; + --light-code-color-background: rgba(175, 184, 193, 0.2); + --light-select-chevron: url("data:image/svg+xml;utf8,"); + --light-button-color: rgb(36, 41, 47); + --light-button-background: rgb(246, 248, 250); + --light-button-border-color: rgba(31, 35, 40, 0.15); + --light-button-color-hover: rgb(36, 41, 47); + --light-button-background-hover: rgb(239, 241, 243); + --light-button-border-color-hover: rgba(31, 35, 40, 0.15); + --light-button-box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; + --light-input-border-color: rgb(208, 215, 222); + --light-input-border-color-focus: rgb(9, 105, 218); + + --dark-color-background: rgb(13, 17, 23); + --dark-color-warning-text: #f1e05a; + --dark-color-text-aside: #9b9b9b; + --dark-color-accent: #45464d; + --dark-color-background-secondary: rgb(22, 27, 34); + --dark-code-color-background: rgba(175, 184, 193, 0.2); + --dark-select-chevron: url("data:image/svg+xml;utf8,"); + --dark-button-color: rgb(201, 209, 217); + --dark-button-background: rgb(45, 47, 54); + --dark-button-border-color: rgba(240, 246, 252, 0.1); + --dark-button-color-hover: rgb(201, 209, 217); + --dark-button-background-hover: rgb(48, 50, 58); + --dark-button-border-color-hover: rgba(240, 246, 252, 0.1); + --dark-button-box-shadow: none; + --dark-input-border-color: rgb(149, 155, 159); + --dark-input-border-color-focus: rgb(9, 105, 218); + + --pre-color-background: var(--color-background-secondary); + --code-color-background: var(--color-background-secondary); + + --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + --font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + + --font-size-h1: 2.1rem; + --font-size-h2: 1.8rem; + --font-size-h3: 1.5rem; + --font-size-aside: 0.875rem; + --header-height: 3rem; + --line-height: 1.5; + --member-group-spacing: 3rem; + --member-spacing: 2rem; + --paragraph-spacing: 1rem; + --header-margin: 1.5rem 0 1rem 0; + --term-spacing: 0.5rem; + --list-spacing: 1.5rem; + --menu-spacing-vertical: 0.8rem; + --menu-spacing-horizontal: 1.5rem; + --header-border-spacing: 0.2rem; + --border-radius: 0.35rem; + --table-padding: 0.75rem; + --content-spacing: 2rem; + --anchor-icon-size: 1.2rem; + --anchor-icon-offset: -1.4rem; + --toolbar-icon-width: 2.5rem; +} + +@media (prefers-color-scheme: light) { + :root { + --select-chevron: var(--light-select-chevron); + --code-color-background: var(--light-code-color-background); + --button-color: var(--light-button-color); + --button-background: var(--light-button-background); + --button-border-color: var(--light-button-border-color); + --button-color-hover: var(--light-button-color-hover); + --button-background-hover: var(--light-button-background-hover); + --button-border-color-hover: var(--light-button-border-color-hover); + --button-box-shadow: var(--light-button-box-shadow); + --input-border-color: var(--light-input-border-color); + --input-border-color-focus: var(--light-input-border-color-focus); + } +} + +@media (prefers-color-scheme: dark) { + :root { + --select-chevron: var(--dark-select-chevron); + --code-color-background: var(--dark-code-color-background); + --button-color: var(--dark-button-color); + --button-background: var(--dark-button-background); + --button-border-color: var(--dark-button-border-color); + --button-color-hover: var(--dark-button-color-hover); + --button-background-hover: var(--dark-button-background-hover); + --button-border-color-hover: var(--dark-button-border-color-hover); + --button-box-shadow: var(--dark-button-box-shadow); + --input-border-color: var(--dark-input-border-color); + --input-border-color-focus: var(--dark-input-border-color-focus); + } +} + +:root[data-theme="light"] { + --select-chevron: var(--light-select-chevron); + --code-color-background: var(--light-code-color-background); + --button-color: var(--light-button-color); + --button-background: var(--light-button-background); + --button-border-color: var(--light-button-border-color); + --button-color-hover: var(--light-button-color-hover); + --button-background-hover: var(--light-button-background-hover); + --button-border-color-hover: var(--light-button-border-color-hover); + --button-box-shadow: var(--light-button-box-shadow); + --input-border-color: var(--light-input-border-color); + --input-border-color-focus: var(--light-input-border-color-focus); +} + +:root[data-theme="dark"] { + --select-chevron: var(--dark-select-chevron); + --code-color-background: var(--dark-code-color-background); + --button-color: var(--dark-button-color); + --button-background: var(--dark-button-background); + --button-border-color: var(--dark-button-border-color); + --button-color-hover: var(--dark-button-color-hover); + --button-background-hover: var(--dark-button-background-hover); + --button-border-color-hover: var(--dark-button-border-color-hover); + --button-box-shadow: var(--dark-button-box-shadow); + --input-border-color: var(--dark-input-border-color); + --input-border-color-focus: var(--dark-input-border-color-focus); +} + +body { + font-family: var(--font-family-body); + line-height: var(--line-height); +} + +b, strong { + font-weight: 600; +} + +i, em { + font-style: italic; +} + +svg { + vertical-align: middle; + flex-shrink: 0; +} + +input, +select { + font-family: var(--font-family-body); + font-size: 1rem; + border: solid 1px var(--input-border-color); + border-radius: var(--border-radius); + vertical-align: middle; +} + +option { + background: var(--color-background-secondary); + text-shadow: 0 1px rgba(0, 0, 0, 0.4); +} + +input { + padding: 0.3em 0.7em; +} + +select { + padding: 0.3em 1.8em 0.3em 0.7em; + background: right center no-repeat var(--select-chevron); +} + +input:focus, +select:focus { + border-color: var(--input-border-color-focus); + box-shadow: 0 0 0 1px var(--input-border-color-focus); +} + +dl, menu, ol, ul { + margin: 0 0 var(--header-margin) 0; +} + +/* -------------------------------------------------- TYPOGRAPHY --------------------------------------------------- */ + +.tsd-typography { + line-height: var(--line-height); +} + +.tsd-typography:empty { + display: none; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.tsd-typography h1, +.tsd-typography h2, +.tsd-typography h3, +.tsd-typography h4, +.tsd-typography h5, +.tsd-typography h6 { + margin: var(--header-margin); + font-size: 1rem; + font-weight: 600; + line-height: var(--line-height); +} + +p, +.tsd-typography p { + margin: 0 0 var(--paragraph-spacing) 0; +} + +.tsd-typography ul { + padding: 0 0 0 var(--list-spacing); + list-style: disc; +} + +.tsd-typography li { + margin: 0 0 var(--term-spacing) 0; +} + +/* ----------------------------------------------------- TABLE ----------------------------------------------------- */ + +table { + margin-top: 1rem; + width: 100%; + max-width: 100%; +} + +th, td { + padding: var(--table-padding); +} + +th { + vertical-align: bottom; + font-weight: 600; + border-top: 1px solid var(--color-accent); + border-bottom: 2px solid var(--color-accent); +} + +td { + vertical-align: top; + border-top: 1px solid var(--color-accent); +} + +/* -------------------------------------------------- CODE BLOCKS -------------------------------------------------- */ + +pre { + padding: 0.8rem 1rem; + font-size: 85%; + font-family: var(--font-family-mono); + border: none; + border-radius: var(--border-radius); +} + +pre, +pre code { + background: var(--pre-color-background); +} + +code { + padding: 0.2rem 0.4rem; + font-size: 85%; + font-family: var(--font-family-mono); + background: var(--code-color-background); + border-radius: var(--border-radius); +} + +/* -------------------------------------------------- COPY BUTTON -------------------------------------------------- */ + +pre > button { + top: 0.3rem; + right: 0.3rem; +} + +button { + padding: 0.6rem 0.8rem; + font-family: var(--font-family-body); + font-weight: 500; + font-size: 0.9rem; + line-height: 1; + cursor: pointer; + appearance: none; + user-select: none; + text-align: center; + text-decoration: none; + color: var(--button-color); + background: var(--button-background); + box-shadow: var(--button-box-shadow); + border: 1px solid var(--button-border-color); + border-radius: var(--border-radius); +} + +button:hover { + color: var(--button-color-hover); + background: var(--button-background-hover); + border-color: var(--button-border-color-hover); +} + +/* ---------------------------------------------------- PANELS ----------------------------------------------------- */ + +.tsd-panel-group, +.tsd-panel-group.tsd-index-group { + margin: var(--member-group-spacing) 0; +} + +.tsd-panel-group.tsd-index-group details { + margin: 0; +} + +.tsd-panel-group.tsd-member-group > h2 { + font-size: var(--font-size-h2); + margin: 0 0 var(--member-spacing) 0; +} + +.tsd-panel { + margin: 0 0 var(--paragraph-spacing) 0; +} + +/* ---------------------------------------------------- SOURCE ----------------------------------------------------- */ + +.tsd-sources { + font-size: var(--font-size-aside); + margin: 0 0 var(--paragraph-spacing) 0; +} + +/* --------------------------------------------------- MESSAGES ---------------------------------------------------- */ + +/* Make warning a plain text */ +.warning { + padding: 0; + margin: 0 0 var(--term-spacing) 0; + font-size: var(--font-size-aside); + background: none; + color: var(--color-warning-text); +} + +/* Color header related to a warning */ +.warning ~ .tsd-anchor-link { + color: var(--color-warning-text); +} + +.warning ~ .tsd-anchor-link .tsd-tag { + color: var(--color-warning-text); +} + +/* ---------------------------------------------------- MEMBERS ---------------------------------------------------- */ + +.tsd-panel.tsd-member { + margin: 0 0 var(--member-spacing) 0; +} + +/* Member header */ +.tsd-member .tsd-anchor + h3 { + display: block; + padding: 0 0 var(--header-border-spacing) 0; + margin: 0 0 var(--paragraph-spacing) 0; + font-size: var(--font-size-h3); + border-bottom: solid 1px var(--color-accent); +} + +/* Copy link icon near member name */ +.tsd-anchor-icon { + display: inline; + float: left; + margin-left: var(--anchor-icon-offset); +} + +.tsd-anchor-icon svg { + width: var(--anchor-icon-size); + height: var(--anchor-icon-size); +} + +.tsd-comment { + margin: 0 0 var(--paragraph-spacing) 0; +} + +/* ---------------------------------------------- SIGNATURE PARAMETERS --------------------------------------------- */ + +.tsd-kind-type-parameter, +.tsd-kind-parameter { + font-weight: normal; +} + +.tsd-signatures { + margin: 0; +} + +/* Member signature */ +.tsd-signatures .tsd-signature, +.tsd-signature { + padding: 0; + margin: 0 0 var(--paragraph-spacing) 0; + border: none; + font: inherit; +} + +/* Border between signatures */ +.tsd-signature ~ .tsd-signature { + padding: var(--paragraph-spacing) 0 0 0; + border-top: solid 1px var(--color-accent); +} + +/* Remove marker from parameter lists */ +ul.tsd-type-parameter-list, +ul.tsd-parameter-list { + padding-left: var(--list-spacing); + list-style-type: none; +} + +/* Type parameters and Parameters heading */ +ul.tsd-type-parameter-list > li > h4:first-child, +ul.tsd-parameter-list > li > h5:first-child { + margin: 0 0 var(--term-spacing) 0; + font-size: 1rem; + font-weight: normal; +} + +/* Parameter without a description */ +ul.tsd-type-parameter-list > li > h4:last-child, +ul.tsd-parameter-list > li > h5:last-child { + margin: 0 0 var(--paragraph-spacing) 0; +} + +/* Make parameter name bold */ +.tsd-type-parameter-list h4 .tsd-kind-type-parameter, +.tsd-parameter-list h5 .tsd-kind-parameter { + font-weight: 500; +} + +/* Prevent consequent parameter names (for example in callable type signature) to become bold */ +.tsd-type-parameter-list h4 .tsd-kind-type-parameter ~ .tsd-kind-type-parameter, +.tsd-parameter-list h5 .tsd-kind-parameter ~ .tsd-kind-parameter { + font-weight: normal; +} + +/* Show parameter signature as a cut-in block */ +.tsd-parameter-signature { + margin: calc(var(--paragraph-spacing) / -2) calc(var(--paragraph-spacing) * -1) calc(var(--paragraph-spacing) / 2); + padding: var(--paragraph-spacing); + padding-bottom: 0.05px; + background: var(--color-background-secondary); +} + +/* Multiple signatures are separated with a delimiter */ +.tsd-parameter-signature:first-child { + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} + +.tsd-parameter-signature:last-child { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +.tsd-parameter-signature + .tsd-parameter-signature { + border-top: solid 1px var(--color-accent); +} + +/* Reset if signature is rendered for a named type */ +.tsd-type-declaration .tsd-parameter-signature { + padding: 0; + margin: 0; + background: none; + border-radius: 0; +} + +/* --------------------------------------------------- MODIFIERS --------------------------------------------------- */ + +.tsd-tag { + color: var(--color-text-aside); + background: none; + text-transform: lowercase; +} + +/* Protected, optional, etc. */ +code.tsd-tag { + padding: 0; + margin: 0; + border: none; + font: inherit; + font-weight: normal; + font-style: italic; +} + +/* ------------------------------------------------ PAGE NAVIGATION ------------------------------------------------ */ + +.tsd-navigation, +.tsd-page-navigation { + margin: 0 0 var(--header-margin) 0; +} + +.tsd-page-navigation a { + display: flex; + align-items: flex-start; + width: auto; + padding: 0.25rem 0; +} + +.tsd-page-navigation { + margin: var(--paragraph-spacing) 0 0 0; +} + +.tsd-navigation a { + display: flex; + align-items: flex-start; + width: 100%; + padding: 0.25rem 0.4rem; + border-radius: var(--border-radius); +} + +.tsd-page-navigation .tsd-accordion-details { + margin: var(--menu-spacing-vertical) 0 0 0; +} + +.tsd-page-navigation ul { + padding: 0 0 0 var(--menu-spacing-horizontal); +} + +.tsd-nested-navigation { + margin: 0 0 0 calc(var(--menu-spacing-horizontal) * 2); +} + +.tsd-nested-navigation > li > a { + display: flex; + align-items: flex-start; + width: auto; + max-width: 100%; +} + +.tsd-nested-navigation > li > a > span { + overflow: hidden; +} + +.tsd-nested-navigation > li > details { + margin-left: 0; +} + +.tsd-navigation .tsd-accordion-summary { + position: relative; + width: auto; + display: flex; + align-items: baseline; +} + +.tsd-accordion-summary > h3 > svg { + margin-right: 0.2rem; +} + +.tsd-small-nested-navigation { + margin: 0 0 0 var(--menu-spacing-horizontal); +} + +.tsd-index-accordion { + margin: var(--menu-spacing-vertical) 0; +} + +/* --------------------------------------------------- SETTINGS ---------------------------------------------------- */ + +.tsd-navigation.settings { + margin: 0; +} + +.tsd-filter-visibility { + margin: 0; + padding: 0; +} + +.tsd-filter-visibility h4 { + margin: var(--paragraph-spacing) 0 var(--term-spacing) 0; + padding: 0; + font-weight: normal; + text-transform: none; +} + +.tsd-filter-visibility ul { + padding: 0; +} + +.tsd-filter-visibility .tsd-filter-item { + margin: 0 0 var(--term-spacing) 0; +} + +.tsd-theme-toggle { + margin: var(--paragraph-spacing) 0 0 0; + padding: 0; +} + +.tsd-theme-toggle h4 { + margin: 0 0.5rem 0 0; + padding: 0; + font-weight: normal; + text-transform: none; +} + +.settings .tsd-accordion-details { + padding: 0 0 0 var(--menu-spacing-horizontal); +} + +.tsd-filter-input input[type="checkbox"]:not(:checked) + svg { + --color-text: transparent; +} + +.tsd-checkbox-checkmark { + stroke: var(--color-text); +} + +/* --------------------------------------------------- HIERARCHY --------------------------------------------------- */ + +ul.tsd-hierarchy { + list-style-type: none; + padding-left: var(--list-spacing); +} + +ul.tsd-hierarchy ul.tsd-hierarchy { + margin-top: var(--term-spacing); +} + +ul.tsd-hierarchy .target { + font-weight: 500; + font-style: italic; +} + +/* ----------------------------------------------------- INDEX ----------------------------------------------------- */ + +/* Index subsections heading */ +.tsd-index-panel .tsd-index-heading { + margin: 0; + padding: 0; + text-transform: none; +} + +.tsd-index-section .tsd-index-heading { + margin: var(--header-margin); +} + +/* Main heading */ +.tsd-index-summary > .tsd-index-heading, +.tsd-index-panel > .tsd-index-heading { + font-size: var(--font-size-h2); +} + +.tsd-index-panel .tsd-index-list { + padding: 0; + margin: 0 0 var(--paragraph-spacing) 0; +} + +a.tsd-index-link { + align-items: flex-start; + line-height: var(--line-height); +} + +.tsd-kind-icon { + margin-top: 0.14rem; +} + +/* ---------------------------------------------------- SEARCH ----------------------------------------------------- */ + +.tsd-widget { + height: 100%; +} + +.tsd-widget.no-caption { + width: auto; +} + +.tsd-page-toolbar .table-cell { + line-height: inherit; +} + +.tsd-page-toolbar .tsd-toolbar-icon { + display: flex; + align-items: center; + justify-content: center; + flex-grow: 0; + flex-shrink: 0; + width: var(--toolbar-icon-width); + padding: 0; +} + +.tsd-page-toolbar .tsd-toolbar-icon.menu { + display: none; +} + +#tsd-toolbar-links { + right: 3rem; +} + +#tsd-toolbar-links .github-icon { + margin-top: 4px; +} + +#tsd-search { + display: flex; + align-items: center; +} + +#tsd-search.has-focus { + background: none; +} + +/* Magnifying glass icon */ +#tsd-search .field { + display: flex; + height: auto; + width: 100%; + position: absolute; + top: auto; + bottom: auto; + right: 0; + justify-content: flex-end; +} + +#tsd-search .field input { + z-index: 100; + flex-grow: 1; + padding: 0.3em var(--toolbar-icon-width) 0.3em 0.7em; + border: solid 1px rgb(208, 215, 222); + background-color: ; +} + +#tsd-search .field input:focus { + border-color: var(--input-border-color-focus); + box-shadow: 0 0 0 1px var(--input-border-color-focus); +} + +#tsd-search .field label { + position: absolute; + right: auto; + z-index: 200; +} + +#tsd-search .results { + top: calc(100% + 0.45rem); + overflow: hidden; + border: solid 1px var(--input-border-color); + border-radius: var(--border-radius); + box-shadow: none; +} + +#tsd-search:not(.ready) .results, +#tsd-search .results:empty { + display: none; +} + +#tsd-search .results li { + padding: 0.5rem 0.7rem; + background: var(--color-background-secondary); +} + +#tsd-search .title { + display: block; + position: absolute; + height: 4rem; + width: 2rem; +} + +#tsd-search .logo-container { + display: flex; +} + +/* ----------------------------------------------------- PAGE ------------------------------------------------------ */ + +/* Header */ +.tsd-page-toolbar .tsd-toolbar-contents { + height: var(--header-height); + + /* Compensate navigation menu item padding */ + padding: 0 calc(var(--content-spacing) + 0.4rem); +} + +.tsd-page-title > h1, +.tsd-page-title > h2 { + padding: 0 0 var(--header-border-spacing) 0; + font-size: var(--font-size-h1); + border-bottom: solid 1px var(--color-accent); +} + +/* Compensate for padding of .tsd-navigation a */ +.page-menu { + padding-left: 0.22rem; +} + +.container { + padding: 0; +} + +.container-main { + margin: 0; +} + +.col-content { + margin: var(--paragraph-spacing) 0 0 0; + padding: 0 var(--content-spacing); + overflow-x: hidden; +} + +.col-content .tsd-panel:last-child { + margin-bottom: var(--member-group-spacing); +} + +@media (max-width: 769px) { + :root { + --font-size-h1: 1.8rem; + --font-size-h2: 1.5rem; + --font-size-h3: 1.3rem; + --font-size-aside: 0.875rem; + --header-height: 3rem; + --line-height: 1.5; + --member-group-spacing: 2rem; + --member-spacing: 1.5rem; + --paragraph-spacing: 0.5rem; + --header-margin: 1rem 0 0.5rem 0; + --term-spacing: 0.2rem; + --list-spacing: 1rem; + --menu-spacing-vertical: 0.4rem; + --menu-spacing-horizontal: 1.5rem; + --header-border-spacing: 0.1rem; + --border-radius: 0.35rem; + --table-padding: 0.5rem; + --content-spacing: 1.2rem; + --anchor-icon-offset: -1.1rem; + --anchor-icon-size: 1.1rem; + } + + h1, h2, h3, h4, h5, h6 { + word-break: break-word; + } + + .col-sidebar { + gap: 0 !important; + padding: var(--paragraph-spacing) !important;; + overflow-y: auto; + overflow-x: hidden; + } + + .site-menu { + padding: var(--paragraph-spacing) 0 0 0 !important; + } + + .tsd-page-toolbar .tsd-toolbar-icon.menu { + display: flex; + } +} + +@media (min-width: 770px) and (max-width: 1399px) { + .col-sidebar { + padding: var(--paragraph-spacing) 0; + max-height: calc(100vh - var(--header-height)); + overflow-y: auto; + overflow-x: hidden; + position: sticky; + top: var(--header-height); + } + + .page-menu { + padding: 0 0 0 var(--content-spacing); + margin: 0 0 var(--paragraph-spacing) 0; + } + + .site-menu { + padding: 0 0 0 var(--content-spacing); + margin: 0; + } +} + +@media (min-width: 1200px) { + .page-menu, .site-menu { + max-height: calc(100vh - var(--header-height)); + overflow: auto; + position: sticky; + top: var(--header-height); + } + + .page-menu { + padding: var(--paragraph-spacing) var(--content-spacing) var(--paragraph-spacing) 0; + } + + .site-menu { + padding: var(--paragraph-spacing) 0 var(--paragraph-spacing) var(--content-spacing); + } } \ No newline at end of file diff --git a/theme/src/templates/toolbar.tsx b/theme/src/templates/toolbar.tsx index a01c8409..d719326a 100644 --- a/theme/src/templates/toolbar.tsx +++ b/theme/src/templates/toolbar.tsx @@ -14,7 +14,9 @@ export const toolbar = (context: DefaultThemeRenderContext, props: PageEvent @@ -30,6 +32,7 @@ export const toolbar = (context: DefaultThemeRenderContext, props: PageEvent
+

 v{props.project.packageVersion}

diff --git a/typedoc.json b/typedoc.json index 5a25d288..fb6fe20f 100644 --- a/typedoc.json +++ b/typedoc.json @@ -10,6 +10,7 @@ "readme": "./packages/api.md", "includeVersion": true, "plugin": ["./theme/dist/index.js"], + "theme": "marlowe-theme", "sidebarLinks": { "How to develop": "https://github.com/input-output-hk/marlowe-ts-sdk/blob/main/doc/howToDevelop.md", "Module system": "https://github.com/input-output-hk/marlowe-ts-sdk/blob/main/doc/modules-system.md", From e6121f5dc7ff92bd61da5aaa3d9ff73563da5928 Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Mon, 1 Jan 2024 18:10:02 -0800 Subject: [PATCH 04/11] Add readme for theme --- theme/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/theme/README.md b/theme/README.md index e69de29b..e5c288e9 100644 --- a/theme/README.md +++ b/theme/README.md @@ -0,0 +1,17 @@ +## Marlowe Typedoc Theme + +Theme for typedoc is done through a plugin that expands upon the default theme and allows JSX hooks/overrides to modify DOM. + +Configurations for running this can be found in the root `package.json` file where `npm run docs` will run typedoc with configurations found in `typedoc.json`. + +Typedoc's [example demo theme](https://github.com/Gerrit0/typedoc-custom-theme-demo) shows how various hooks are called within `index.tsx`. This entrypoint also contains a sync script for processing files in `/assets`. + +Elements that are replaced from the default theme can be found under `/templates`. Additional templates can be added for more granular control (See toolbar as an example). + +To build the theme: + +``` +npm run build +``` + +This creates a `/dist` directory which is configured by `typedoc.json` as the plugin. Continue to build the docs `npm run docs` from the directory root, then preview any changes locally with `npm run serve`. From 0c4bb0563b9e0858d2be37f953f07dbe1b4f5cda Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Mon, 1 Jan 2024 18:14:19 -0800 Subject: [PATCH 05/11] Build theme on Github actions --- .github/workflows/deploy-docs.yaml | 2 +- .github/workflows/test-suite.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy-docs.yaml b/.github/workflows/deploy-docs.yaml index 17ec6f56..2c84cb04 100644 --- a/.github/workflows/deploy-docs.yaml +++ b/.github/workflows/deploy-docs.yaml @@ -42,7 +42,7 @@ jobs: - name: 🔨 Build Docs run: | - nix develop --show-trace --command bash -c "npm i && npm run build && npm run docs" + nix develop --show-trace --command bash -c "npm i && npm run build && npm --prefix ./theme/ run build && npm run docs" - name: 📘 Upload artifact uses: actions/upload-pages-artifact@v2 diff --git a/.github/workflows/test-suite.yaml b/.github/workflows/test-suite.yaml index 79612b7b..a5fdac45 100644 --- a/.github/workflows/test-suite.yaml +++ b/.github/workflows/test-suite.yaml @@ -35,7 +35,7 @@ jobs: - name: 🏥 Check docs generation run: | - nix develop --show-trace --command bash -c "npm run docs" + nix develop --show-trace --command bash -c "npm --prefix ./theme/ run build && npm run docs" - name: 📝 Check formatting run: | nix develop --show-trace --command bash -c "treefmt --fail-on-change" From dec95cb8761727dce457fec46a8a16c6089e3b6b Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Tue, 2 Jan 2024 11:08:22 -0800 Subject: [PATCH 06/11] Run prettier --- theme/assets/marlowe-theme.css | 182 ++++++++++++++++++-------------- theme/src/MarloweTheme.tsx | 6 +- theme/src/ThemeContext.tsx | 28 ++--- theme/src/index.tsx | 19 ++-- theme/src/templates/index.ts | 4 +- theme/src/templates/layout.tsx | 68 +++++++----- theme/src/templates/toolbar.tsx | 46 +++++--- theme/src/templates/utils.tsx | 11 +- 8 files changed, 216 insertions(+), 148 deletions(-) diff --git a/theme/assets/marlowe-theme.css b/theme/assets/marlowe-theme.css index bd0e8aaf..25e7171b 100644 --- a/theme/assets/marlowe-theme.css +++ b/theme/assets/marlowe-theme.css @@ -1,5 +1,7 @@ /* https://github.com/elad2412/the-new-css-reset */ -*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { +*:where( + :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) + ) { all: unset; display: revert; } @@ -12,12 +14,15 @@ } /* Reapply the pointer cursor for anchor tags */ -a, button { +a, +button { cursor: revert; } /* Remove list styles (bullets/numbers) */ -ol, ul, menu { +ol, +ul, +menu { list-style: none; } @@ -74,7 +79,8 @@ meter { --light-button-color-hover: rgb(36, 41, 47); --light-button-background-hover: rgb(239, 241, 243); --light-button-border-color-hover: rgba(31, 35, 40, 0.15); - --light-button-box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; + --light-button-box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0, + rgba(255, 255, 255, 0.25) 0 1px 0 inset; --light-input-border-color: rgb(208, 215, 222); --light-input-border-color-focus: rgb(9, 105, 218); @@ -98,8 +104,10 @@ meter { --pre-color-background: var(--color-background-secondary); --code-color-background: var(--color-background-secondary); - --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; - --font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + --font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, + Liberation Mono, monospace; --font-size-h1: 2.1rem; --font-size-h2: 1.8rem; @@ -126,33 +134,33 @@ meter { @media (prefers-color-scheme: light) { :root { - --select-chevron: var(--light-select-chevron); - --code-color-background: var(--light-code-color-background); - --button-color: var(--light-button-color); - --button-background: var(--light-button-background); - --button-border-color: var(--light-button-border-color); - --button-color-hover: var(--light-button-color-hover); - --button-background-hover: var(--light-button-background-hover); - --button-border-color-hover: var(--light-button-border-color-hover); - --button-box-shadow: var(--light-button-box-shadow); - --input-border-color: var(--light-input-border-color); - --input-border-color-focus: var(--light-input-border-color-focus); + --select-chevron: var(--light-select-chevron); + --code-color-background: var(--light-code-color-background); + --button-color: var(--light-button-color); + --button-background: var(--light-button-background); + --button-border-color: var(--light-button-border-color); + --button-color-hover: var(--light-button-color-hover); + --button-background-hover: var(--light-button-background-hover); + --button-border-color-hover: var(--light-button-border-color-hover); + --button-box-shadow: var(--light-button-box-shadow); + --input-border-color: var(--light-input-border-color); + --input-border-color-focus: var(--light-input-border-color-focus); } } @media (prefers-color-scheme: dark) { :root { - --select-chevron: var(--dark-select-chevron); - --code-color-background: var(--dark-code-color-background); - --button-color: var(--dark-button-color); - --button-background: var(--dark-button-background); - --button-border-color: var(--dark-button-border-color); - --button-color-hover: var(--dark-button-color-hover); - --button-background-hover: var(--dark-button-background-hover); - --button-border-color-hover: var(--dark-button-border-color-hover); - --button-box-shadow: var(--dark-button-box-shadow); - --input-border-color: var(--dark-input-border-color); - --input-border-color-focus: var(--dark-input-border-color-focus); + --select-chevron: var(--dark-select-chevron); + --code-color-background: var(--dark-code-color-background); + --button-color: var(--dark-button-color); + --button-background: var(--dark-button-background); + --button-border-color: var(--dark-button-border-color); + --button-color-hover: var(--dark-button-color-hover); + --button-background-hover: var(--dark-button-background-hover); + --button-border-color-hover: var(--dark-button-border-color-hover); + --button-box-shadow: var(--dark-button-box-shadow); + --input-border-color: var(--dark-input-border-color); + --input-border-color-focus: var(--dark-input-border-color-focus); } } @@ -189,11 +197,13 @@ body { line-height: var(--line-height); } -b, strong { +b, +strong { font-weight: 600; } -i, em { +i, +em { font-style: italic; } @@ -231,7 +241,10 @@ select:focus { box-shadow: 0 0 0 1px var(--input-border-color-focus); } -dl, menu, ol, ul { +dl, +menu, +ol, +ul { margin: 0 0 var(--header-margin) 0; } @@ -285,7 +298,8 @@ table { max-width: 100%; } -th, td { +th, +td { padding: var(--table-padding); } @@ -494,7 +508,8 @@ ul.tsd-parameter-list > li > h5:last-child { /* Show parameter signature as a cut-in block */ .tsd-parameter-signature { - margin: calc(var(--paragraph-spacing) / -2) calc(var(--paragraph-spacing) * -1) calc(var(--paragraph-spacing) / 2); + margin: calc(var(--paragraph-spacing) / -2) + calc(var(--paragraph-spacing) * -1) calc(var(--paragraph-spacing) / 2); padding: var(--paragraph-spacing); padding-bottom: 0.05px; background: var(--color-background-secondary); @@ -774,7 +789,6 @@ a.tsd-index-link { flex-grow: 1; padding: 0.3em var(--toolbar-icon-width) 0.3em 0.7em; border: solid 1px rgb(208, 215, 222); - background-color: ; } #tsd-search .field input:focus { @@ -859,82 +873,90 @@ a.tsd-index-link { @media (max-width: 769px) { :root { - --font-size-h1: 1.8rem; - --font-size-h2: 1.5rem; - --font-size-h3: 1.3rem; - --font-size-aside: 0.875rem; - --header-height: 3rem; - --line-height: 1.5; - --member-group-spacing: 2rem; - --member-spacing: 1.5rem; - --paragraph-spacing: 0.5rem; - --header-margin: 1rem 0 0.5rem 0; - --term-spacing: 0.2rem; - --list-spacing: 1rem; - --menu-spacing-vertical: 0.4rem; - --menu-spacing-horizontal: 1.5rem; - --header-border-spacing: 0.1rem; - --border-radius: 0.35rem; - --table-padding: 0.5rem; - --content-spacing: 1.2rem; - --anchor-icon-offset: -1.1rem; - --anchor-icon-size: 1.1rem; + --font-size-h1: 1.8rem; + --font-size-h2: 1.5rem; + --font-size-h3: 1.3rem; + --font-size-aside: 0.875rem; + --header-height: 3rem; + --line-height: 1.5; + --member-group-spacing: 2rem; + --member-spacing: 1.5rem; + --paragraph-spacing: 0.5rem; + --header-margin: 1rem 0 0.5rem 0; + --term-spacing: 0.2rem; + --list-spacing: 1rem; + --menu-spacing-vertical: 0.4rem; + --menu-spacing-horizontal: 1.5rem; + --header-border-spacing: 0.1rem; + --border-radius: 0.35rem; + --table-padding: 0.5rem; + --content-spacing: 1.2rem; + --anchor-icon-offset: -1.1rem; + --anchor-icon-size: 1.1rem; } - h1, h2, h3, h4, h5, h6 { - word-break: break-word; + h1, + h2, + h3, + h4, + h5, + h6 { + word-break: break-word; } .col-sidebar { - gap: 0 !important; - padding: var(--paragraph-spacing) !important;; - overflow-y: auto; - overflow-x: hidden; + gap: 0 !important; + padding: var(--paragraph-spacing) !important; + overflow-y: auto; + overflow-x: hidden; } .site-menu { - padding: var(--paragraph-spacing) 0 0 0 !important; + padding: var(--paragraph-spacing) 0 0 0 !important; } .tsd-page-toolbar .tsd-toolbar-icon.menu { - display: flex; + display: flex; } } @media (min-width: 770px) and (max-width: 1399px) { .col-sidebar { - padding: var(--paragraph-spacing) 0; - max-height: calc(100vh - var(--header-height)); - overflow-y: auto; - overflow-x: hidden; - position: sticky; - top: var(--header-height); + padding: var(--paragraph-spacing) 0; + max-height: calc(100vh - var(--header-height)); + overflow-y: auto; + overflow-x: hidden; + position: sticky; + top: var(--header-height); } .page-menu { - padding: 0 0 0 var(--content-spacing); - margin: 0 0 var(--paragraph-spacing) 0; + padding: 0 0 0 var(--content-spacing); + margin: 0 0 var(--paragraph-spacing) 0; } .site-menu { - padding: 0 0 0 var(--content-spacing); - margin: 0; + padding: 0 0 0 var(--content-spacing); + margin: 0; } } @media (min-width: 1200px) { - .page-menu, .site-menu { - max-height: calc(100vh - var(--header-height)); - overflow: auto; - position: sticky; - top: var(--header-height); + .page-menu, + .site-menu { + max-height: calc(100vh - var(--header-height)); + overflow: auto; + position: sticky; + top: var(--header-height); } .page-menu { - padding: var(--paragraph-spacing) var(--content-spacing) var(--paragraph-spacing) 0; + padding: var(--paragraph-spacing) var(--content-spacing) + var(--paragraph-spacing) 0; } .site-menu { - padding: var(--paragraph-spacing) 0 var(--paragraph-spacing) var(--content-spacing); + padding: var(--paragraph-spacing) 0 var(--paragraph-spacing) + var(--content-spacing); } -} \ No newline at end of file +} diff --git a/theme/src/MarloweTheme.tsx b/theme/src/MarloweTheme.tsx index cf753fca..caa7b5e8 100644 --- a/theme/src/MarloweTheme.tsx +++ b/theme/src/MarloweTheme.tsx @@ -1,8 +1,8 @@ -import { DefaultTheme, JSX, PageEvent, Reflection } from 'typedoc'; -import { ThemeContext } from './ThemeContext'; +import { DefaultTheme, JSX, PageEvent, Reflection } from "typedoc"; +import { ThemeContext } from "./ThemeContext"; export class MarloweTheme extends DefaultTheme { override getRenderContext(pageEvent: PageEvent): ThemeContext { return new ThemeContext(this, pageEvent, this.application.options); } -} \ No newline at end of file +} diff --git a/theme/src/ThemeContext.tsx b/theme/src/ThemeContext.tsx index 94c8300d..b3314cd7 100644 --- a/theme/src/ThemeContext.tsx +++ b/theme/src/ThemeContext.tsx @@ -1,25 +1,29 @@ import { - DefaultTheme, - DefaultThemeRenderContext, - JSX, - Options, - PageEvent, - Reflection, - } from 'typedoc'; -import * as templates from './templates'; - + DefaultTheme, + DefaultThemeRenderContext, + JSX, + Options, + PageEvent, + Reflection, +} from "typedoc"; +import * as templates from "./templates"; + function bind(fn: (f: F, ...a: L) => R, first: F) { return (...r: L) => fn(first, ...r); } export class ThemeContext extends DefaultThemeRenderContext { - constructor(theme: DefaultTheme, page: PageEvent, options: Options) { + constructor( + theme: DefaultTheme, + page: PageEvent, + options: Options + ) { super(theme, page, options); this.init(); } - init(){ + init() { for (const [key, tpl] of Object.entries(templates)) { this[key as keyof ThemeContext] = bind(tpl as any, this) as any; } } -} \ No newline at end of file +} diff --git a/theme/src/index.tsx b/theme/src/index.tsx index 36910f20..a598d4ed 100644 --- a/theme/src/index.tsx +++ b/theme/src/index.tsx @@ -1,30 +1,29 @@ -import * as path from 'path'; -import * as fs from 'fs'; +import * as path from "path"; +import * as fs from "fs"; import { MarloweTheme } from "./MarloweTheme"; import { Application, JSX, RendererEvent } from "typedoc"; - /** * Called by TypeDoc when loaded as a plugin. */ export function load(app: Application) { - app.renderer.hooks.on('body.begin', (_) => ( + app.renderer.hooks.on("body.begin", (_) => ( )); app.listenTo(app.renderer, RendererEvent.END, (event: RendererEvent) => { - const src = path.join(__dirname, '..', 'assets'); - const dest = path.join(event.outputDirectory, 'assets', 'marlowe'); + const src = path.join(__dirname, "..", "assets"); + const dest = path.join(event.outputDirectory, "assets", "marlowe"); copySync(src, dest); }); - app.renderer.defineTheme('marlowe-theme', MarloweTheme); + app.renderer.defineTheme("marlowe-theme", MarloweTheme); app.renderer.hooks.on("head.end", (event) => ( <> - + >, - props: PageEvent, + props: PageEvent ) => { return ( - + - {context.hook('head.begin')} + {context.hook("head.begin")} - + - - - - {context.options.getValue('customCss') && ( - + + + + {context.options.getValue("customCss") && ( + )} - + - {context.hook('head.end')} + {context.hook("head.end")} - {context.hook('body.begin')} + {context.hook("body.begin")} {context.toolbar(props)}
- {context.hook('content.begin')} + {context.hook("content.begin")} {context.header(props)} {template(props)} - {context.hook('content.end')} + {context.hook("content.end")}
- {context.hook('pageSidebar.begin')} + {context.hook("pageSidebar.begin")} {context.pageSidebar(props)} - {context.hook('pageSidebar.end')} + {context.hook("pageSidebar.end")}
- {context.hook('sidebar.begin')} + {context.hook("sidebar.begin")} {context.sidebar(props)} - {context.hook('sidebar.end')} + {context.hook("sidebar.end")}
@@ -76,8 +94,8 @@ export const layout = (
{context.analytics()} - {context.hook('body.end')} + {context.hook("body.end")} ); -}; \ No newline at end of file +}; diff --git a/theme/src/templates/toolbar.tsx b/theme/src/templates/toolbar.tsx index d719326a..7ce661af 100644 --- a/theme/src/templates/toolbar.tsx +++ b/theme/src/templates/toolbar.tsx @@ -1,11 +1,21 @@ -import { DefaultThemeRenderContext, JSX, PageEvent, Reflection } from 'typedoc'; +import { DefaultThemeRenderContext, JSX, PageEvent, Reflection } from "typedoc"; -export const toolbar = (context: DefaultThemeRenderContext, props: PageEvent) => ( +export const toolbar = ( + context: DefaultThemeRenderContext, + props: PageEvent +) => (
-
-); \ No newline at end of file +); diff --git a/theme/src/templates/utils.tsx b/theme/src/templates/utils.tsx index 03e6b53a..e6c6818c 100644 --- a/theme/src/templates/utils.tsx +++ b/theme/src/templates/utils.tsx @@ -1,9 +1,12 @@ -export function classNames(names: Record, extraCss?: string) { +export function classNames( + names: Record, + extraCss?: string +) { const css = Object.keys(names) .filter((key) => names[key]) - .concat(extraCss || '') - .join(' ') + .concat(extraCss || "") + .join(" ") .trim() - .replace(/\s+/g, ' '); + .replace(/\s+/g, " "); return css.length ? css : undefined; } From 1a4c52ecdd58316e722c76aafd97777f25197ca2 Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Thu, 4 Jan 2024 12:18:26 -0800 Subject: [PATCH 07/11] Move theme into /doc; fix margins for wide screens --- .github/workflows/deploy-docs.yaml | 2 +- .github/workflows/test-suite.yaml | 2 +- {theme/assets => doc/image}/favicon.ico | Bin {theme/assets => doc/image}/github.svg | 0 theme/assets/logo.svg => doc/image/logo-header.svg | 0 {theme => doc/theme}/.editorconfig | 0 {theme => doc/theme}/.gitignore | 0 {theme => doc/theme}/README.md | 0 {theme => doc/theme}/assets/marlowe-theme.css | 2 +- {theme => doc/theme}/package-lock.json | 0 {theme => doc/theme}/package.json | 0 {theme => doc/theme}/src/MarloweTheme.tsx | 0 {theme => doc/theme}/src/ThemeContext.tsx | 0 {theme => doc/theme}/src/index.tsx | 3 +++ {theme => doc/theme}/src/templates/index.ts | 0 {theme => doc/theme}/src/templates/layout.tsx | 0 {theme => doc/theme}/src/templates/toolbar.tsx | 2 +- {theme => doc/theme}/src/templates/utils.tsx | 0 {theme => doc/theme}/tsconfig.json | 0 typedoc.json | 2 +- 20 files changed, 8 insertions(+), 5 deletions(-) rename {theme/assets => doc/image}/favicon.ico (100%) rename {theme/assets => doc/image}/github.svg (100%) rename theme/assets/logo.svg => doc/image/logo-header.svg (100%) rename {theme => doc/theme}/.editorconfig (100%) rename {theme => doc/theme}/.gitignore (100%) rename {theme => doc/theme}/README.md (100%) rename {theme => doc/theme}/assets/marlowe-theme.css (99%) rename {theme => doc/theme}/package-lock.json (100%) rename {theme => doc/theme}/package.json (100%) rename {theme => doc/theme}/src/MarloweTheme.tsx (100%) rename {theme => doc/theme}/src/ThemeContext.tsx (100%) rename {theme => doc/theme}/src/index.tsx (96%) rename {theme => doc/theme}/src/templates/index.ts (100%) rename {theme => doc/theme}/src/templates/layout.tsx (100%) rename {theme => doc/theme}/src/templates/toolbar.tsx (96%) rename {theme => doc/theme}/src/templates/utils.tsx (100%) rename {theme => doc/theme}/tsconfig.json (100%) diff --git a/.github/workflows/deploy-docs.yaml b/.github/workflows/deploy-docs.yaml index 2c84cb04..89111365 100644 --- a/.github/workflows/deploy-docs.yaml +++ b/.github/workflows/deploy-docs.yaml @@ -42,7 +42,7 @@ jobs: - name: 🔨 Build Docs run: | - nix develop --show-trace --command bash -c "npm i && npm run build && npm --prefix ./theme/ run build && npm run docs" + nix develop --show-trace --command bash -c "npm i && npm run build && npm --prefix ./doc/theme/ run build && npm run docs" - name: 📘 Upload artifact uses: actions/upload-pages-artifact@v2 diff --git a/.github/workflows/test-suite.yaml b/.github/workflows/test-suite.yaml index a5fdac45..e76dbd24 100644 --- a/.github/workflows/test-suite.yaml +++ b/.github/workflows/test-suite.yaml @@ -35,7 +35,7 @@ jobs: - name: 🏥 Check docs generation run: | - nix develop --show-trace --command bash -c "npm --prefix ./theme/ run build && npm run docs" + nix develop --show-trace --command bash -c "npm --prefix ./doc/theme/ run build && npm run docs" - name: 📝 Check formatting run: | nix develop --show-trace --command bash -c "treefmt --fail-on-change" diff --git a/theme/assets/favicon.ico b/doc/image/favicon.ico similarity index 100% rename from theme/assets/favicon.ico rename to doc/image/favicon.ico diff --git a/theme/assets/github.svg b/doc/image/github.svg similarity index 100% rename from theme/assets/github.svg rename to doc/image/github.svg diff --git a/theme/assets/logo.svg b/doc/image/logo-header.svg similarity index 100% rename from theme/assets/logo.svg rename to doc/image/logo-header.svg diff --git a/theme/.editorconfig b/doc/theme/.editorconfig similarity index 100% rename from theme/.editorconfig rename to doc/theme/.editorconfig diff --git a/theme/.gitignore b/doc/theme/.gitignore similarity index 100% rename from theme/.gitignore rename to doc/theme/.gitignore diff --git a/theme/README.md b/doc/theme/README.md similarity index 100% rename from theme/README.md rename to doc/theme/README.md diff --git a/theme/assets/marlowe-theme.css b/doc/theme/assets/marlowe-theme.css similarity index 99% rename from theme/assets/marlowe-theme.css rename to doc/theme/assets/marlowe-theme.css index 25e7171b..cef97db5 100644 --- a/theme/assets/marlowe-theme.css +++ b/doc/theme/assets/marlowe-theme.css @@ -858,7 +858,7 @@ a.tsd-index-link { } .container-main { - margin: 0; + margin: 1.5rem auto; } .col-content { diff --git a/theme/package-lock.json b/doc/theme/package-lock.json similarity index 100% rename from theme/package-lock.json rename to doc/theme/package-lock.json diff --git a/theme/package.json b/doc/theme/package.json similarity index 100% rename from theme/package.json rename to doc/theme/package.json diff --git a/theme/src/MarloweTheme.tsx b/doc/theme/src/MarloweTheme.tsx similarity index 100% rename from theme/src/MarloweTheme.tsx rename to doc/theme/src/MarloweTheme.tsx diff --git a/theme/src/ThemeContext.tsx b/doc/theme/src/ThemeContext.tsx similarity index 100% rename from theme/src/ThemeContext.tsx rename to doc/theme/src/ThemeContext.tsx diff --git a/theme/src/index.tsx b/doc/theme/src/index.tsx similarity index 96% rename from theme/src/index.tsx rename to doc/theme/src/index.tsx index a598d4ed..642535d1 100644 --- a/theme/src/index.tsx +++ b/doc/theme/src/index.tsx @@ -16,8 +16,11 @@ export function load(app: Application) { app.listenTo(app.renderer, RendererEvent.END, (event: RendererEvent) => { const src = path.join(__dirname, "..", "assets"); + const img = path.join(__dirname, "../..", "image"); + const dest = path.join(event.outputDirectory, "assets", "marlowe"); copySync(src, dest); + copySync(img, dest); }); app.renderer.defineTheme("marlowe-theme", MarloweTheme); diff --git a/theme/src/templates/index.ts b/doc/theme/src/templates/index.ts similarity index 100% rename from theme/src/templates/index.ts rename to doc/theme/src/templates/index.ts diff --git a/theme/src/templates/layout.tsx b/doc/theme/src/templates/layout.tsx similarity index 100% rename from theme/src/templates/layout.tsx rename to doc/theme/src/templates/layout.tsx diff --git a/theme/src/templates/toolbar.tsx b/doc/theme/src/templates/toolbar.tsx similarity index 96% rename from theme/src/templates/toolbar.tsx rename to doc/theme/src/templates/toolbar.tsx index 7ce661af..54001f78 100644 --- a/theme/src/templates/toolbar.tsx +++ b/doc/theme/src/templates/toolbar.tsx @@ -51,7 +51,7 @@ export const toolbar = (

 v{props.project.packageVersion}

diff --git a/theme/src/templates/utils.tsx b/doc/theme/src/templates/utils.tsx similarity index 100% rename from theme/src/templates/utils.tsx rename to doc/theme/src/templates/utils.tsx diff --git a/theme/tsconfig.json b/doc/theme/tsconfig.json similarity index 100% rename from theme/tsconfig.json rename to doc/theme/tsconfig.json diff --git a/typedoc.json b/typedoc.json index fb6fe20f..c2116154 100644 --- a/typedoc.json +++ b/typedoc.json @@ -9,7 +9,7 @@ "out": "./docs", "readme": "./packages/api.md", "includeVersion": true, - "plugin": ["./theme/dist/index.js"], + "plugin": ["./doc/theme/dist/index.js"], "theme": "marlowe-theme", "sidebarLinks": { "How to develop": "https://github.com/input-output-hk/marlowe-ts-sdk/blob/main/doc/howToDevelop.md", From af4fedb39f5cec50d580a7894afa95d8e09c68bb Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Thu, 4 Jan 2024 13:33:21 -0800 Subject: [PATCH 08/11] Add footer with project links --- doc/theme/assets/marlowe-theme.css | 30 ++++++++++++++++++ doc/theme/src/index.tsx | 46 ++++++++++++++-------------- doc/theme/src/templates/footer.tsx | 49 ++++++++++++++++++++++++++++++ doc/theme/src/templates/index.ts | 1 + 4 files changed, 103 insertions(+), 23 deletions(-) create mode 100644 doc/theme/src/templates/footer.tsx diff --git a/doc/theme/assets/marlowe-theme.css b/doc/theme/assets/marlowe-theme.css index cef97db5..fc09b9fb 100644 --- a/doc/theme/assets/marlowe-theme.css +++ b/doc/theme/assets/marlowe-theme.css @@ -960,3 +960,33 @@ a.tsd-index-link { var(--content-spacing); } } + +/* -------------------------------------------------- FOOTER -------------------------------------------------- */ + +.tsd-generator { + padding-top: 0rem; + max-height: none; +} + +.footer-links { + padding: 0 calc(var(--content-spacing) + 0.4rem); +} + +.footer-copyright { + margin-top: 2rem; + margin-bottom: 1rem; + text-align: center; +} + +.tsd-generator table, th, tr, td { + border: none; + padding: 0; +} + +.tsd-generator td { + font-size: smaller; +} + +.tsd-generator a:hover { + text-decoration: none; +} diff --git a/doc/theme/src/index.tsx b/doc/theme/src/index.tsx index 642535d1..b636fe0b 100644 --- a/doc/theme/src/index.tsx +++ b/doc/theme/src/index.tsx @@ -34,30 +34,30 @@ export function load(app: Application) { )); - app.renderer.hooks.on("body.end", (event) => ( - - )); + // } + // ` + // } + // /> + // + // )); } export function copySync(src: string, dest: string): void { diff --git a/doc/theme/src/templates/footer.tsx b/doc/theme/src/templates/footer.tsx new file mode 100644 index 00000000..949f93d1 --- /dev/null +++ b/doc/theme/src/templates/footer.tsx @@ -0,0 +1,49 @@ +import { DefaultThemeRenderContext, JSX, PageEvent, Reflection } from "typedoc"; + +export const footer = ( + context: DefaultThemeRenderContext, + props: PageEvent +) => ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Prototype DemosToolsGithub RepositoriesResourcesLegal
PayoutsPlaygroundMarlowe ts-sdkIOG Tech SupportCookie Policy
Token PlanPreprod RunnerPayout PrototypeDocumentationPrivacy Policy
Marlowe ScanToken Plan PrototypeBlogTerms of Use
Official Website
+
+
© 2023 Input Output Global, Inc. All Rights Reserved.
+
+); \ No newline at end of file diff --git a/doc/theme/src/templates/index.ts b/doc/theme/src/templates/index.ts index 8d564f33..2cbe51be 100644 --- a/doc/theme/src/templates/index.ts +++ b/doc/theme/src/templates/index.ts @@ -1,2 +1,3 @@ export * from "./toolbar"; +export * from "./footer"; export * from "./layout"; From f6bc30b024ec8113f6545c4f97c8a803f9cd5879 Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Thu, 4 Jan 2024 14:26:38 -0800 Subject: [PATCH 09/11] Increase contrast for code blocks --- doc/theme/assets/marlowe-theme.css | 15 +++++++++------ doc/theme/src/index.tsx | 25 ------------------------- 2 files changed, 9 insertions(+), 31 deletions(-) diff --git a/doc/theme/assets/marlowe-theme.css b/doc/theme/assets/marlowe-theme.css index fc09b9fb..9053d5f7 100644 --- a/doc/theme/assets/marlowe-theme.css +++ b/doc/theme/assets/marlowe-theme.css @@ -68,7 +68,7 @@ meter { :root { --light-color-background: #ffffff; --light-color-warning-text: #cca213; - --light-color-background-secondary: rgb(246, 248, 250); + --light-color-background-secondary: rgb(250, 250, 250); --light-color-active-menu-item: #ddd; --light-color-accent: #e0e1e1; --light-code-color-background: rgba(175, 184, 193, 0.2); @@ -88,7 +88,7 @@ meter { --dark-color-warning-text: #f1e05a; --dark-color-text-aside: #9b9b9b; --dark-color-accent: #45464d; - --dark-color-background-secondary: rgb(22, 27, 34); + --dark-color-background-secondary: rgb(1, 3, 7); --dark-code-color-background: rgba(175, 184, 193, 0.2); --dark-select-chevron: url("data:image/svg+xml;utf8,"); --dark-button-color: rgb(201, 209, 217); @@ -319,7 +319,7 @@ td { pre { padding: 0.8rem 1rem; - font-size: 85%; + font-size: 92%; font-family: var(--font-family-mono); border: none; border-radius: var(--border-radius); @@ -332,7 +332,7 @@ pre code { code { padding: 0.2rem 0.4rem; - font-size: 85%; + font-size: 92%; font-family: var(--font-family-mono); background: var(--code-color-background); border-radius: var(--border-radius); @@ -964,7 +964,7 @@ a.tsd-index-link { /* -------------------------------------------------- FOOTER -------------------------------------------------- */ .tsd-generator { - padding-top: 0rem; + padding-top: 0; max-height: none; } @@ -978,7 +978,10 @@ a.tsd-index-link { text-align: center; } -.tsd-generator table, th, tr, td { +.tsd-generator table, +th, +tr, +td { border: none; padding: 0; } diff --git a/doc/theme/src/index.tsx b/doc/theme/src/index.tsx index b636fe0b..a7916ebf 100644 --- a/doc/theme/src/index.tsx +++ b/doc/theme/src/index.tsx @@ -33,31 +33,6 @@ export function load(app: Application) { /> )); - - // app.renderer.hooks.on("body.end", (event) => ( - // - // )); } export function copySync(src: string, dest: string): void { From 8a348a3dbf704332e5b8e14dbf9bbb671f1673bd Mon Sep 17 00:00:00 2001 From: Hernan Rajchert Date: Fri, 5 Jan 2024 16:39:48 -0300 Subject: [PATCH 10/11] Fix max-width in docs footer --- doc/theme/assets/marlowe-theme.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/doc/theme/assets/marlowe-theme.css b/doc/theme/assets/marlowe-theme.css index 9053d5f7..64249469 100644 --- a/doc/theme/assets/marlowe-theme.css +++ b/doc/theme/assets/marlowe-theme.css @@ -970,6 +970,8 @@ a.tsd-index-link { .footer-links { padding: 0 calc(var(--content-spacing) + 0.4rem); + max-width: 1700px; + margin: 0 auto; } .footer-copyright { From bff78f9b8f8924c04e82e4506529d7aa7767b3b8 Mon Sep 17 00:00:00 2001 From: Hernan Rajchert Date: Fri, 5 Jan 2024 16:41:08 -0300 Subject: [PATCH 11/11] Add scriv entry --- changelog.d/20240105_164037_hrajchert_plt_8836.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 changelog.d/20240105_164037_hrajchert_plt_8836.md diff --git a/changelog.d/20240105_164037_hrajchert_plt_8836.md b/changelog.d/20240105_164037_hrajchert_plt_8836.md new file mode 100644 index 00000000..c20bf602 --- /dev/null +++ b/changelog.d/20240105_164037_hrajchert_plt_8836.md @@ -0,0 +1,3 @@ +### General + +- Changed documentation theme