From 6b978a6b5a66d4cf4a7842370561dd8d8c5f99de Mon Sep 17 00:00:00 2001 From: Turiiya <34311583+ttytm@users.noreply.github.com> Date: Wed, 2 Aug 2023 09:46:18 +0200 Subject: [PATCH] vdoc: refactor theme files (#19024) --- .editorconfig | 2 +- .github/workflows/module_docs_lint.yml | 19 + cmd/tools/vdoc/html.v | 25 +- cmd/tools/vdoc/theme/.prettierrc | 5 + cmd/tools/vdoc/theme/dark-mode.js | 9 +- cmd/tools/vdoc/theme/doc.css | 1006 ++++++++--------- cmd/tools/vdoc/theme/doc.js | 387 +++---- .../vdoc/theme/favicons/site.webmanifest | 34 +- cmd/tools/vdoc/theme/index.html | 127 ++- cmd/tools/vdoc/theme/normalize.css | 30 +- cmd/tools/vdoc/vdoc.v | 1 - 11 files changed, 815 insertions(+), 830 deletions(-) create mode 100644 .github/workflows/module_docs_lint.yml create mode 100644 cmd/tools/vdoc/theme/.prettierrc diff --git a/.editorconfig b/.editorconfig index f532010f64..faaccec745 100644 --- a/.editorconfig +++ b/.editorconfig @@ -6,7 +6,7 @@ end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true -[*.v] +[*.{v,js,css}] indent_style = tab [*.{bat,cmd}] diff --git a/.github/workflows/module_docs_lint.yml b/.github/workflows/module_docs_lint.yml new file mode 100644 index 0000000000..661d23a5ac --- /dev/null +++ b/.github/workflows/module_docs_lint.yml @@ -0,0 +1,19 @@ +name: Code CI vlib modules + +on: + push: + paths: + - '**/cmd/tools/vdoc/theme/**' + pull_request: + paths: + - '**/cmd/tools/vdoc/theme/**' + +jobs: + lint-module-docs: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - name: Check Formatting + uses: actionsx/prettier@v2 + with: + args: --check cmd/tools/vdoc/theme diff --git a/cmd/tools/vdoc/html.v b/cmd/tools/vdoc/html.v index e3597e4d79..a4fed4f12a 100644 --- a/cmd/tools/vdoc/html.v +++ b/cmd/tools/vdoc/html.v @@ -10,6 +10,7 @@ import v.ast import v.token import v.doc import v.pref +import v.util { tabs } const ( css_js_assets = ['doc.css', 'normalize.css', 'doc.js', 'dark-mode.js'] @@ -249,27 +250,27 @@ fn (vd VDoc) gen_html(d doc.Doc) string { version).replace('{{ light_icon }}', vd.assets['light_icon']).replace('{{ dark_icon }}', vd.assets['dark_icon']).replace('{{ menu_icon }}', vd.assets['menu_icon']).replace('{{ head_assets }}', if cfg.inline_assets { - '\n${tabs[0]}\n${tabs[0]}\n${tabs[0]}' + ' +${tabs(2)} +${tabs(2)}' } else { - '\n${tabs[0]}\n${tabs[0]}\n${tabs[0]}' + ' +${tabs(2)} +${tabs(2)}' }).replace('{{ toc_links }}', if cfg.is_multi || vd.docs.len > 1 { modules_toc_str } else { symbols_toc_str }).replace('{{ contents }}', contents.str()).replace('{{ right_content }}', if cfg.is_multi && d.head.name != 'README' { - '
' + '
' } else { '' }).replace('{{ footer_content }}', gen_footer_text(d, !cfg.no_timestamp)).replace('{{ footer_assets }}', if cfg.inline_assets { - '' + '' } else { - '' + '' }) return result } @@ -407,12 +408,12 @@ fn doc_node_html(dn doc.DocNode, link string, head bool, include_examples bool, node_id = 'readme_${node_id}' hash_link = ' #' } - dnw.writeln('${tabs[1]}
') + dnw.writeln('${tabs(2)}
') if dn.name.len > 0 { if dn.kind == .const_group { - dnw.write_string('${tabs[2]}
<${head_tag}>${sym_name}${hash_link}') + dnw.write_string('${tabs(3)}
<${head_tag}>${sym_name}${hash_link}') } else { - dnw.write_string('${tabs[2]}
<${head_tag}>${dn.kind} ${sym_name}${hash_link}') + dnw.write_string('${tabs(3)}
<${head_tag}>${dn.kind} ${sym_name}${hash_link}') } if link.len != 0 { dnw.write_string('${link_svg}') diff --git a/cmd/tools/vdoc/theme/.prettierrc b/cmd/tools/vdoc/theme/.prettierrc new file mode 100644 index 0000000000..9752df368f --- /dev/null +++ b/cmd/tools/vdoc/theme/.prettierrc @@ -0,0 +1,5 @@ +{ + "useTabs": true, + "printWidth": 100, + "singleQuote": true +} diff --git a/cmd/tools/vdoc/theme/dark-mode.js b/cmd/tools/vdoc/theme/dark-mode.js index 075dbb539c..b3eb2ee453 100644 --- a/cmd/tools/vdoc/theme/dark-mode.js +++ b/cmd/tools/vdoc/theme/dark-mode.js @@ -1,6 +1,5 @@ -(function() { - var html = document.getElementsByTagName('html')[0]; - if (localStorage.getItem('dark-mode') === 'true') { - html.classList.add('dark'); - } +(function () { + if (localStorage.getItem('dark-mode') === 'true') { + document.querySelector('html').classList.add('dark'); + } })(); diff --git a/cmd/tools/vdoc/theme/doc.css b/cmd/tools/vdoc/theme/doc.css index 55b97f153d..151aa3872b 100644 --- a/cmd/tools/vdoc/theme/doc.css +++ b/cmd/tools/vdoc/theme/doc.css @@ -1,452 +1,443 @@ :root { - --background-color: #fff; - --link-color: #2779bd; - --text-color: #000; - --ref-symbol-color: #dae1e7; - --ref-symbol-hover-color: #b8c2cc; - --title-bottom-line-color: #f1f5f8; - --footer-top-line-color: #f1f5f8; - --footer-text-color: #616161; - --code-signature-border-color: #a0aec0; - --menu-background-color: #4b6c88; - --menu-text-color: #fff; - --menu-indent-line-color: #3b3b3b66; - --menu-indent-line-active-color: #00000066; - --menu-scrollbar-color: #a0aec0; - --menu-toggle-icon-color: #fff; - --menu-toggle-icon-hover-color: #00000044; - --menu-search-background-color: #00000044; - --menu-search-font-color: #fff; - --menu-search-result-background-hover-color: #00000021; - --menu-search-separator-color: #00000044; - --menu-search-title-text-color: #d5efff; - --menu-search-badge-background-color: #00000044; - --menu-search-badge-background-hover-color: #0000004d; - --toc-text-color: #2779bd; - --toc-indicator-color: #4299e1; - --code-default-text-color: #2c3e64; - --code-background-color: #edf2f7; - --code-keyword-text-color: #2b6cb0; - --code-builtin-text-color: #219321; - --code-function-text-color: #288341; - --code-comment-text-color: #93a1a1; - --code-punctuation-text-color: #696969; - --code-symbol-text-color: #702459; - --code-operator-text-color: #864f29; - --attribute-deprecated-background-color: #f59f0b48; - --attribute-deprecated-text-color: #92400e; - --attribute-text-color: #000000cf; + --background-color: #fff; + --link-color: #2779bd; + --text-color: #000; + --ref-symbol-color: #dae1e7; + --ref-symbol-hover-color: #b8c2cc; + --title-bottom-line-color: #f1f5f8; + --footer-top-line-color: #f1f5f8; + --footer-text-color: #616161; + --code-signature-border-color: #a0aec0; + --menu-background-color: #4b6c88; + --menu-text-color: #fff; + --menu-indent-line-color: #3b3b3b66; + --menu-indent-line-active-color: #00000066; + --menu-scrollbar-color: #a0aec0; + --menu-toggle-icon-color: #fff; + --menu-toggle-icon-hover-color: #00000044; + --menu-search-background-color: #00000044; + --menu-search-font-color: #fff; + --menu-search-result-background-hover-color: #00000021; + --menu-search-separator-color: #00000044; + --menu-search-title-text-color: #d5efff; + --menu-search-badge-background-color: #00000044; + --menu-search-badge-background-hover-color: #0000004d; + --toc-text-color: #2779bd; + --toc-indicator-color: #4299e1; + --code-default-text-color: #2c3e64; + --code-background-color: #edf2f7; + --code-keyword-text-color: #2b6cb0; + --code-builtin-text-color: #219321; + --code-function-text-color: #288341; + --code-comment-text-color: #93a1a1; + --code-punctuation-text-color: #696969; + --code-symbol-text-color: #702459; + --code-operator-text-color: #864f29; + --attribute-deprecated-background-color: #f59f0b48; + --attribute-deprecated-text-color: #92400e; + --attribute-text-color: #000000cf; } :root.dark .dark-icon { - display: none; + display: none; } :root:not(.dark) .light-icon { - display: none; + display: none; } .dark body { - --background-color: #1a202c; - --text-color: #fff; - --link-color: #90cdf4; - --ref-symbol-color: #2d3748; - --ref-symbol-hover-color: #4a5568; - --title-bottom-line-color: #2d3748; - --footer-top-line-color: #2d3748; - --footer-text-color: #bbd3e1; - --code-signature-border-color: #4a5568; - --menu-background-color: #2d3748; - --menu-text-color: #fff; - --menu-indent-line-color: #4a5568; - --menu-indent-line-active-color: #90cdf4; /*#4a5568*/ - --menu-scrollbar-color: #4a5568; - --menu-toggle-icon-color: #fff; - --menu-search-background-color: #4a5568; - --menu-search-font-color: #fff; - --menu-search-separator-color: #4a5568; - --menu-search-title-text-color: #90cdf4; - --menu-search-badge-background-color: #4a5568; - --menu-search-badge-background-hover-color: #4a5568; - --toc-text-color: #90cdf4; - --toc-indicator-color: #4299e1; - --code-default-text-color: #cbd5e0; - --code-background-color: #2d3748; - --code-builtin-text-color: #68d391; - --code-keyword-text-color: #63b3ed; - --code-function-text-color: #4fd1c5; - --code-comment-text-color: #a0aec0; - --code-punctuation-text-color: #a0aec0; - --code-symbol-text-color: #ed64a6; - --code-operator-text-color: #a67f59; - --attribute-background-color: #ffffff20; - --attribute-text-color: #ffffffaf; - --attribute-deprecated-text-color: #fef3c7; + --background-color: #1a202c; + --text-color: #fff; + --link-color: #90cdf4; + --ref-symbol-color: #2d3748; + --ref-symbol-hover-color: #4a5568; + --title-bottom-line-color: #2d3748; + --footer-top-line-color: #2d3748; + --footer-text-color: #bbd3e1; + --code-signature-border-color: #4a5568; + --menu-background-color: #2d3748; + --menu-text-color: #fff; + --menu-indent-line-color: #4a5568; + --menu-indent-line-active-color: #90cdf4; /*#4a5568*/ + --menu-scrollbar-color: #4a5568; + --menu-toggle-icon-color: #fff; + --menu-search-background-color: #4a5568; + --menu-search-font-color: #fff; + --menu-search-separator-color: #4a5568; + --menu-search-title-text-color: #90cdf4; + --menu-search-badge-background-color: #4a5568; + --menu-search-badge-background-hover-color: #4a5568; + --toc-text-color: #90cdf4; + --toc-indicator-color: #4299e1; + --code-default-text-color: #cbd5e0; + --code-background-color: #2d3748; + --code-builtin-text-color: #68d391; + --code-keyword-text-color: #63b3ed; + --code-function-text-color: #4fd1c5; + --code-comment-text-color: #a0aec0; + --code-punctuation-text-color: #a0aec0; + --code-symbol-text-color: #ed64a6; + --code-operator-text-color: #a67f59; + --attribute-background-color: #ffffff20; + --attribute-text-color: #ffffffaf; + --attribute-deprecated-text-color: #fef3c7; } html { - height: 100%; + height: 100%; } body { - margin: 0; - font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, - Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - background-color: #fff; - background-color: var(--background-color); - color: #000; - color: var(--text-color); - height: 100%; + margin: 0; + font-family: Jost, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + background-color: #fff; + background-color: var(--background-color); + color: #000; + color: var(--text-color); + height: 100%; } #page { - height: 100%; - padding-top: 56px; - box-sizing: border-box; + height: 100%; + padding-top: 56px; + box-sizing: border-box; } /** Reset for menus */ .doc-nav ul, .doc-toc ul { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } /* Left nav */ .doc-nav { - position: fixed; - width: 100%; - left: 0; - right: 0; - top: 0; - display: flex; - background-color: #4b6c88; - background-color: var(--menu-background-color); - color: #fff; - color: var(--menu-text-color); - flex-direction: column; - overflow-y: auto; - height: 100vh; - z-index: 10; - scrollbar-width: thin; - scrollbar-color: #a0aec0 transparent; - scrollbar-color: var(--menu-scrollbar-color) transparent; - font-family: Jost, sans-serif; + position: fixed; + width: 100%; + left: 0; + right: 0; + top: 0; + display: flex; + background-color: #4b6c88; + background-color: var(--menu-background-color); + color: #fff; + color: var(--menu-text-color); + flex-direction: column; + overflow-y: auto; + height: 100vh; + z-index: 10; + scrollbar-width: thin; + scrollbar-color: #a0aec0 transparent; + scrollbar-color: var(--menu-scrollbar-color) transparent; + font-family: Jost, sans-serif; } *::-webkit-scrollbar { - width: 4px; - height: 4px; + width: 4px; + height: 4px; } *::-webkit-scrollbar-track { - background: transparent; + background: transparent; } *::-webkit-scrollbar-thumb { - background-color: #a0aec0; - background-color: var(--menu-scrollbar-color); - border: 3px solid transparent; + background-color: #a0aec0; + background-color: var(--menu-scrollbar-color); + border: 3px solid transparent; } .doc-nav .content li { - line-height: 1.8; + line-height: 1.8; } .doc-nav .content.show { - display: flex; + display: flex; } .doc-nav .content.hidden { - display: none; + display: none; } .doc-nav #toggle-menu { - cursor: pointer; - padding: 0.3rem; - fill: #fff; - fill: var(--menu-toggle-icon-color); + cursor: pointer; + padding: 0.3rem; + fill: #fff; + fill: var(--menu-toggle-icon-color); } .doc-nav > .heading-container { - position: relative; - /* IE11 */ - position: sticky; - position: -webkit-sticky; - top: 0; - background-color: #4b6c88; - background-color: var(--menu-background-color); - z-index: 10; + position: sticky; + position: -webkit-sticky; + top: 0; + background-color: #4b6c88; + background-color: var(--menu-background-color); + z-index: 10; } .doc-nav > .heading-container > .heading { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .doc-nav > .heading-container > .heading > .info { - display: flex; - padding: 0 1rem; - height: 56px; + display: flex; + padding: 0 1rem; + height: 56px; } .doc-nav > .heading-container > .heading > .info > .module { - font-size: 1.6rem; - font-weight: 500; - margin: 0; + font-size: 1.6rem; + font-weight: 500; + margin: 0; } .doc-nav > .heading-container > .heading > .info > .toggle-version-container { - display: flex; - align-items: center; + display: flex; + align-items: center; +} +.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle { + cursor: pointer; + fill: #fff; + display: flex; } .doc-nav - > .heading-container - > .heading - > .info - > .toggle-version-container - > #dark-mode-toggle { - cursor: pointer; - fill: #fff; - display: flex; - visibility: hidden; -} -.doc-nav - > .heading-container - > .heading - > .info - > .toggle-version-container - > #dark-mode-toggle - > svg { - width: 1.2rem; - height: 1.2rem; + > .heading-container + > .heading + > .info + > .toggle-version-container + > #dark-mode-toggle + > svg { + width: 1.2rem; + height: 1.2rem; } .doc-nav > .heading-container > .heading > #search { - margin: 0.6rem 1.2rem 1rem 1.2rem; - border: none; - border-radius: 0.2rem; - padding: 0.5rem 1rem; - outline: none; - background-color: #00000044; - background-color: var(--menu-search-background-color); - color: #fff; - color: var(--menu-search-text-color); + margin: 0.6rem 1.2rem 1rem 1.2rem; + border: none; + border-radius: 0.2rem; + padding: 0.5rem 1rem; + outline: none; + background-color: #00000044; + background-color: var(--menu-search-background-color); + color: #fff; + color: var(--menu-search-text-color); } .doc-nav > .heading-container > .heading > #search::placeholder { - color: #edf2f7; - text-transform: uppercase; - font-size: 12px; - font-weight: 600; + color: #edf2f7; + text-transform: uppercase; + font-size: 12px; + font-weight: 600; } .doc-nav > .heading-container > .heading > #search:-ms-input-placeholder { - color: #edf2f7; - text-transform: uppercase; - font-size: 12px; - font-weight: 600; + color: #edf2f7; + text-transform: uppercase; + font-size: 12px; + font-weight: 600; } .doc-nav > .content { - padding: 0 2rem 2rem 2rem; - display: flex; - flex-direction: column; + padding: 0 2rem 2rem 2rem; + display: flex; + flex-direction: column; } .doc-nav > .content > ul > li.active { - font-weight: 600; + font-weight: 600; } .doc-nav > .content > ul > li.open ul { - display: initial; + display: initial; } .doc-nav > .content > ul > li.open > .menu-row > .dropdown-arrow { - transform: initial; + transform: initial; } .doc-nav > .content > ul > li > .menu-row { - display: flex; - align-items: center; + display: flex; + align-items: center; } .doc-nav > .content > ul > li > .menu-row > .dropdown-arrow { - transform: rotate(-90deg); - height: 18px; - width: 18px; - margin-left: calc(-18px - 0.3rem); - margin-right: 0.3rem; - cursor: pointer; - fill: #fff; - pointer-events: all; + transform: rotate(-90deg); + height: 18px; + width: 18px; + margin-left: calc(-18px - 0.3rem); + margin-right: 0.3rem; + cursor: pointer; + fill: #fff; + pointer-events: all; } .doc-nav > .content > ul > li > ul { - margin: 0.4rem 0; - display: none; + margin: 0.4rem 0; + display: none; } .doc-nav > .content > ul > li > ul > li { - border-color: #ffffff66; - border-color: var(--menu-indent-line-color); - border-left-width: 1.7px; - border-left-style: solid; - padding-left: 0.7rem; + border-color: #ffffff66; + border-color: var(--menu-indent-line-color); + border-left-width: 1.7px; + border-left-style: solid; + padding-left: 0.7rem; } .doc-nav > .content > ul > li > ul > li.active { - border-color: #00000066; - border-color: var(--menu-search-result-hover-background-color); + border-color: #00000066; + border-color: var(--menu-search-result-hover-background-color); } .doc-nav > .content a { - color: #fff; - color: var(--menu-text-color); - text-decoration: none; - user-select: none; + color: #fff; + color: var(--menu-text-color); + text-decoration: none; + user-select: none; } .doc-nav > .content a:hover { - text-decoration: underline; + text-decoration: underline; } .doc-nav .search.hidden { - display: none; + display: none; } .doc-nav .search li { - line-height: 1.5; + line-height: 1.5; } .doc-nav > .search .result:hover { - background-color: #00000021; - background-color: var(--menu-search-result-background-hover-color); + background-color: #00000021; + background-color: var(--menu-search-result-background-hover-color); } .doc-nav > .search .result:hover > .link > .definition > .badge { - background-color: #0000004d; - background-color: var(--menu-search-badge-background-hover-color); + background-color: #0000004d; + background-color: var(--menu-search-badge-background-hover-color); } .doc-nav > .search .result > .link { - padding: 0.5rem 1.4rem; - text-decoration: none; - color: #fff; - color: var(--menu-text-color); - display: block; + padding: 0.5rem 1.4rem; + text-decoration: none; + color: #fff; + color: var(--menu-text-color); + display: block; } .doc-nav > .search .result > .link > .definition { - display: flex; + display: flex; } .doc-nav > .search .result > .link > .definition > .title { - color: #90cdf4; - color: var(--menu-search-title-text-color); - font-size: 0.875rem; - font-weight: 500; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + color: #90cdf4; + color: var(--menu-search-title-text-color); + font-size: 0.875rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .doc-nav > .search .result > .link > .definition > .badge { - font-size: 0.75rem; - display: inline-flex; - padding: 0 0.5rem; - background-color: #00000044; - background-color: var(--menu-search-badge-background-color); - margin-left: auto; - align-items: center; - border-radius: 9999px; - font-weight: 500; + font-size: 0.75rem; + display: inline-flex; + padding: 0 0.5rem; + background-color: #00000044; + background-color: var(--menu-search-badge-background-color); + margin-left: auto; + align-items: center; + border-radius: 9999px; + font-weight: 500; } .doc-nav > .search .result > .link > .description { - font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, - Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 0.75rem; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-top: 0.25rem; + font-family: Jost, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-size: 0.75rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: 0.25rem; } .doc-nav > .search > hr.separator { - margin: 0.5rem 0; - border-color: #00000044; - border-color: var(--menu-search-separator-color); - box-sizing: content-box; - height: 0; - border-width: 0; - border-top-width: 1px; - border-style: solid; - overflow: visible; + margin: 0.5rem 0; + border-color: #00000044; + border-color: var(--menu-search-separator-color); + box-sizing: content-box; + height: 0; + border-width: 0; + border-top-width: 1px; + border-style: solid; + overflow: visible; } /* Main content */ .doc-scrollview { - height: 100%; + height: 100%; } .doc-container { - display: flex; - flex-direction: column-reverse; + display: flex; + flex-direction: column-reverse; } .doc-content { - display: flex; - flex-direction: column; - padding: 1rem; - overflow: hidden; + display: flex; + flex-direction: column; + padding: 1rem; + overflow: hidden; } .doc-content img { - width: auto; - max-width: 100%; + width: auto; + max-width: 100%; } .doc-content p { - font-size: 1rem; - line-height: 1.6; - letter-spacing: 0.025em; + font-size: 1rem; + line-height: 1.6; + letter-spacing: 0.025em; } .doc-content a { - color: #2779bd; - color: var(--link-color); + color: #2779bd; + color: var(--link-color); } .doc-content p code { - font-size: 0.85rem; + font-size: 0.85rem; } .doc-content > .doc-node { - padding: 5rem 0 2rem 0; - margin-top: -4rem; - overflow: hidden; - word-break: break-all; /* IE11 */ - word-break: break-word; + padding: 5rem 0 2rem 0; + margin-top: -4rem; + overflow: hidden; + word-break: break-word; } .doc-content > .doc-node.const:nth-child(2) { - padding-bottom: 0 !important; + padding-bottom: 0 !important; } .doc-content > .doc-node.const:not(:first-child) { - padding-top: 4rem; + padding-top: 4rem; } .doc-content > .doc-node.const:not(:last-child) { - padding-bottom: 2rem; + padding-bottom: 2rem; } .doc-content > .timestamp { - font-size: 0.8rem; - color: #b8c2cc; - color: var(--timestamp-color); + font-size: 0.8rem; + color: #b8c2cc; + color: var(--timestamp-color); } .doc-content > .doc-node > .title { - display: flex; - font-family: Jost, sans-serif; - font-weight: 500; - padding: 0.3rem; - align-items: center; - margin-bottom: 1rem; - border-bottom: 1px solid #f1f5f8; - border-bottom: 1px solid var(--title-bottom-line-color); + display: flex; + font-family: Jost, sans-serif; + font-weight: 500; + padding: 0.3rem; + align-items: center; + margin-bottom: 1rem; + border-bottom: 1px solid #f1f5f8; + border-bottom: 1px solid var(--title-bottom-line-color); } .doc-content > .doc-node > .attributes { - margin-bottom: 0.6rem; + margin-bottom: 0.6rem; } .doc-content > .doc-node > .attributes > .attribute { - display: inline-block; - border-radius: 100px; - padding: 0.3rem 0.6rem; - background-color: var(--code-background-color); - color: var(--attribute-text-color); - margin-right: 0.8rem; - font-family: "Jetbrains Mono", monospace; - font-size: 0.9rem; + display: inline-block; + border-radius: 100px; + padding: 0.3rem 0.6rem; + background-color: var(--code-background-color); + color: var(--attribute-text-color); + margin-right: 0.8rem; + font-family: 'Jetbrains Mono', monospace; + font-size: 0.9rem; } .doc-content > .doc-node > .attributes > .attribute-deprecated { - background-color: var(--attribute-deprecated-background-color); - color: var(--attribute-deprecated-text-color); + background-color: var(--attribute-deprecated-background-color); + color: var(--attribute-deprecated-text-color); } .doc-content > .doc-node > .title > .link { - display: flex; - margin-left: auto; - fill: #dae1e7; - fill: var(--ref-symbol-color); + display: flex; + margin-left: auto; + fill: #dae1e7; + fill: var(--ref-symbol-color); } .doc-content > .doc-node > .title > .link:hover { - fill: #b8c2cc; - fill: var(--ref-symbol-hover-color); + fill: #b8c2cc; + fill: var(--ref-symbol-hover-color); } .doc-content > .doc-node h1 { - font-size: 2rem; + font-size: 2rem; } .doc-content > .doc-node h2 { - font-size: 1.3rem; + font-size: 1.3rem; } .doc-content > .doc-node .signature { - border-color: #a0aec0; - border-color: var(--code-signature-border-color); - border-left-width: 3px; - border-left-style: solid; + border-color: #a0aec0; + border-color: var(--code-signature-border-color); + border-left-width: 3px; + border-left-style: solid; } .doc-content > .doc-node > ul > li .task-list-item-checkbox { - margin-right: 0.5rem; + margin-right: 0.5rem; } .doc-content > .doc-node > .title h1, .doc-content > .doc-node > .title h2, @@ -454,8 +445,8 @@ body { .doc-content > .doc-node > .title h4, .doc-content > .doc-node > .title h5, .doc-content > .doc-node > .title h6 { - font-weight: 500; - margin: 0; + font-weight: 500; + margin: 0; } .doc-content > .doc-node > .title h1 a, .doc-content > .doc-node > .title h2 a, @@ -463,9 +454,9 @@ body { .doc-content > .doc-node > .title h4 a, .doc-content > .doc-node > .title h5 a, .doc-content > .doc-node > .title h6 a { - text-decoration: none; - color: #dae1e7; - color: var(--ref-symbol-color); + text-decoration: none; + color: #dae1e7; + color: var(--ref-symbol-color); } .doc-content > .doc-node > .title h1 a:hover, .doc-content > .doc-node > .title h2 a:hover, @@ -473,277 +464,270 @@ body { .doc-content > .doc-node > .title h4 a:hover, .doc-content > .doc-node > .title h5 a:hover, .doc-content > .doc-node > .title h6 a:hover { - color: #b8c2cc; - color: var(--ref-symbol-hover-color); + color: #b8c2cc; + color: var(--ref-symbol-hover-color); } .doc-content > .footer { - padding-top: 1rem; - margin-top: auto; - bottom: 1rem; - color: 616161; - color: var(--footer-text-color); - border-color: #f1f5f8; - border-color: var(--footer-top-line-color); - border-top-style: solid; - border-top-width: 1px; - font-size: 0.8rem; - font-weight: 500; + padding-top: 1rem; + margin-top: auto; + bottom: 1rem; + color: 616161; + color: var(--footer-text-color); + border-color: #f1f5f8; + border-color: var(--footer-top-line-color); + border-top-style: solid; + border-top-width: 1px; + font-size: 0.8rem; + font-weight: 500; } /* Right menu */ .doc-toc { - right: 0; - top: 0; - height: 100%; - overflow-y: auto; - padding: 1rem 1rem 0 1rem; - width: 100%; - box-sizing: border-box; - -ms-overflow-style: none; - scrollbar-width: none; - font-family: Jost, sans-serif; + right: 0; + top: 0; + height: 100%; + overflow-y: auto; + padding: 1rem 1rem 0 1rem; + width: 100%; + box-sizing: border-box; + -ms-overflow-style: none; + scrollbar-width: none; + font-family: Jost, sans-serif; } .doc-toc::-webkit-scrollbar { - display: none; + display: none; } .doc-toc li { - line-height: 1.5; + line-height: 1.5; } .doc-toc a { - color: #2779bd; - color: var(--toc-text-color); - font-size: 0.9rem; - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; - display: block; - text-decoration: none; - border-left-width: 2px; - border-left-style: solid; - border-color: transparent; - padding-left: 0.4rem; + color: #2779bd; + color: var(--toc-text-color); + font-size: 0.9rem; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + display: block; + text-decoration: none; + border-left-width: 2px; + border-left-style: solid; + border-color: transparent; + padding-left: 0.4rem; } .doc-toc a:hover { - text-decoration: underline; + text-decoration: underline; } .doc-toc a.active { - border-color: #4299e1; - border-color: var(--toc-indicator-color); + border-color: #4299e1; + border-color: var(--toc-indicator-color); } .doc-toc li ul { - margin: 0.2rem 0 0.2rem; - font-size: 0.7rem; - list-style: none; + margin: 0.2rem 0 0.2rem; + font-size: 0.7rem; + list-style: none; } .doc-toc li ul a { - font-weight: 400; - padding-left: 0.8rem; + font-weight: 400; + padding-left: 0.8rem; } /* Code highlight */ pre, code, pre code { - color: #5c6e74; - color: var(--code-default-text-color); - font-size: 0.948em; - text-shadow: none; - font-family: "Jetbrains Mono", monospace; - background-color: #edf2f7; - background-color: var(--code-background-color); - border-radius: 0.25rem; + color: #5c6e74; + color: var(--code-default-text-color); + font-size: 0.948em; + text-shadow: none; + font-family: 'Jetbrains Mono', monospace; + background-color: #edf2f7; + background-color: var(--code-background-color); + border-radius: 0.25rem; } pre code { - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - display: block; - overflow-x: auto; - padding: 1rem; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + display: block; + overflow-x: auto; + padding: 1rem; } code { - padding: 0 0.2rem; + padding: 0 0.2rem; } pre { - overflow: auto; - margin: 0; + overflow: auto; + margin: 0; } .namespace { - opacity: 0.7; + opacity: 0.7; } .token.comment { - color: #93a1a1; - color: var(--code-comment-text-color); + color: #93a1a1; + color: var(--code-comment-text-color); } .token.punctuation { - color: #999999; - color: var(--code-punctuation-text-color); + color: #999999; + color: var(--code-punctuation-text-color); } .token.number, .token.symbol { - color: #702459; - color: var(--code-symbol-text-color); + color: #702459; + color: var(--code-symbol-text-color); } .token.string, .token.char, .token.builtin { - color: #38a169; - color: var(--code-builtin-text-color); + color: #38a169; + color: var(--code-builtin-text-color); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { - color: #a67f59; - color: var(--code-operator-text-color); - background: transparent; + color: #a67f59; + color: var(--code-operator-text-color); + background: transparent; } .token.boolean, .token.keyword { - color: #2b6cb0; - color: var(--code-keyword-text-color); - font-weight: bold; + color: #2b6cb0; + color: var(--code-keyword-text-color); + font-weight: bold; } .token.function { - color: #319795; - color: var(--code-function-text-color); + color: #319795; + color: var(--code-function-text-color); } .examples > h4 { - margin: 0 0 0.4rem 0; + margin: 0 0 0.4rem 0; } /* Medium screen and up */ @media (min-width: 768px) { - *::-webkit-scrollbar { - width: 8px; - height: 8px; - } - *::-webkit-scrollbar-thumb { - border: 3px solid transparent; - } - .doc-container { - flex-direction: row; - } - .doc-content { - font-size: 0.95rem; - flex: 1; - padding: 0rem 2rem 1rem 2rem; - } - .doc-toc { - position: relative; - /* IE11 */ - position: sticky; - height: 100vh; - position: -webkit-sticky; - align-self: flex-start; - top: 56px; - min-width: 200px; - width: auto; - max-width: 300px; - } - .doc-toc > ul { - padding-bottom: 1rem; - } + *::-webkit-scrollbar { + width: 8px; + height: 8px; + } + *::-webkit-scrollbar-thumb { + border: 3px solid transparent; + } + .doc-container { + flex-direction: row; + } + .doc-content { + font-size: 0.95rem; + flex: 1; + padding: 0rem 2rem 1rem 2rem; + } + .doc-toc { + position: sticky; + height: 100vh; + position: -webkit-sticky; + align-self: flex-start; + top: 56px; + min-width: 200px; + width: auto; + max-width: 300px; + } + .doc-toc > ul { + padding-bottom: 1rem; + } } @media (max-width: 1023px) { - .doc-nav.hidden { - height: auto; - } - .doc-nav.hidden #search { - display: none; - } - .doc-nav .search.mobile-hidden { - display: none; - } - .doc-nav > .heading-container > .heading > .info { - align-items: center; - } - .doc-nav > .heading-container > .heading > .info > .toggle-version-container { - flex-grow: 1; - padding: 0 1rem; - justify-content: space-between; - } + .doc-nav.hidden { + height: auto; + } + .doc-nav.hidden #search { + display: none; + } + .doc-nav .search.mobile-hidden { + display: none; + } + .doc-nav > .heading-container > .heading > .info { + align-items: center; + } + .doc-nav > .heading-container > .heading > .info > .toggle-version-container { + flex-grow: 1; + padding: 0 1rem; + justify-content: space-between; + } } @media (min-width: 1024px) { - #page { - padding-top: 0; - } - .doc-nav { - width: 300px; - } - .doc-nav #toggle-menu { - display: none; - } - .doc-nav > .heading-container > .heading > .info { - height: auto; - padding: 1rem 2rem 0 2rem; - flex-direction: column-reverse; - justify-content: center; - } - .doc-nav > .heading-container > .heading > .info > .toggle-version-container { - align-items: center; - margin-bottom: 0.2rem; - display: flex; - flex-direction: row-reverse; - } - .doc-nav - > .heading-container - > .heading - > .info - > .toggle-version-container - > #dark-mode-toggle { - margin-right: auto; - } - .doc-nav .content.show, - .doc-nav .content.hidden { - display: flex; - } - .doc-content > .doc-node.const:nth-child(2) { - padding-bottom: 0 !important; - } - .doc-content > .doc-node.const:not(:first-child) { - padding-top: 0; - } - .doc-content > .doc-node.const:not(:last-child) { - padding-bottom: 1rem; - } - .doc-container { - margin-left: 300px; - } - .doc-node { - padding-top: 1rem !important; - margin-top: 0 !important; - } - .doc-toc { - top: 0; - } + #page { + padding-top: 0; + } + .doc-nav { + width: 300px; + } + .doc-nav #toggle-menu { + display: none; + } + .doc-nav > .heading-container > .heading > .info { + height: auto; + padding: 1rem 2rem 0 2rem; + flex-direction: column-reverse; + justify-content: center; + } + .doc-nav > .heading-container > .heading > .info > .toggle-version-container { + align-items: center; + margin-bottom: 0.2rem; + display: flex; + flex-direction: row-reverse; + } + .doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle { + margin-right: auto; + } + .doc-nav .content.show, + .doc-nav .content.hidden { + display: flex; + } + .doc-content > .doc-node.const:nth-child(2) { + padding-bottom: 0 !important; + } + .doc-content > .doc-node.const:not(:first-child) { + padding-top: 0; + } + .doc-content > .doc-node.const:not(:last-child) { + padding-bottom: 1rem; + } + .doc-container { + margin-left: 300px; + } + .doc-node { + padding-top: 1rem !important; + margin-top: 0 !important; + } + .doc-toc { + top: 0; + } } #skip-to-content-link { - height: 30px; - left: 50%; - padding: 8px; - position: absolute; - transform: translateY(-100%); - transition: transform 0.3s; - background: var(--links); - color: var(--warn-text); - border-radius: 1px; + height: 30px; + left: 50%; + padding: 8px; + position: absolute; + transform: translateY(-100%); + transition: transform 0.3s; + background: var(--links); + color: var(--warn-text); + border-radius: 1px; } #skip-to-content-link:focus { - transform: translateY(0%); - z-index: 1000; + transform: translateY(0%); + z-index: 1000; } diff --git a/cmd/tools/vdoc/theme/doc.js b/cmd/tools/vdoc/theme/doc.js index c355d7ee0b..118cec6a01 100644 --- a/cmd/tools/vdoc/theme/doc.js +++ b/cmd/tools/vdoc/theme/doc.js @@ -1,235 +1,204 @@ (function () { - if (document.body.scrollIntoView) { - var docnav = document.querySelector('.doc-nav'); - var active = docnav.querySelector('li.active'); - if (active) { - active.scrollIntoView({ block: 'center', inline: 'nearest' }); - } - } - setupScrollSpy(); - setupMobileToggle(); - setupDarkMode(); - setupSearch(); - setupCollapse(); + const docnav = document.querySelector('.doc-nav'); + const active = docnav.querySelector('li.active'); + active?.scrollIntoView({ block: 'center', inline: 'nearest' }); + setupMobileToggle(); + setupDarkMode(); + setupScrollSpy(); + setupSearch(); + setupCollapse(); })(); function setupScrollSpy() { - var sectionPositions = []; - var sections = document.querySelectorAll('section'); - sections.forEach(function (section) { - sectionPositions.push(section.offsetTop); - }); - var scrollPos = 0; - window.addEventListener('scroll', function (_) { - // Reset classes - document.querySelectorAll('.doc-toc a[class="active"]').forEach(function (link) { - link.classList.remove('active'); - }); - // Set current menu link as active - var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; - for (var i = 0; i < sectionPositions.length; i++) { - var section = sections[i]; - var position = sectionPositions[i]; - if (position >= scrollPosition) { - var link = document.querySelector('.doc-toc a[href="#' + section.id + '"]'); - if (link) { - link.classList.add('active'); - var docToc = document.querySelector('.doc-toc'); - var tocHeight = docToc.clientHeight; - var scrollTop = docToc.scrollTop; - if ((document.body.getBoundingClientRect()).top < scrollPos && scrollTop < link.offsetTop - 10) { - docToc.scrollTop = link.clientHeight + link.offsetTop - tocHeight + 10; - } else if (scrollTop > link.offsetTop - 10) { - docToc.scrollTop = link.offsetTop - 10; - } - } - break; - } - } - scrollPos = (document.body.getBoundingClientRect()).top; - }); + const sections = document.querySelectorAll('section'); + const sectionPositions = Array.from(sections).map((section) => section.offsetTop); + let scrollPos = 0; + window.addEventListener('scroll', () => { + const toc = document.querySelector('.doc-toc'); + // Reset classes + toc.querySelectorAll('a[class="active"]').forEach((link) => link.classList.remove('active')); + // Set current menu link as active + let scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; + for (const [i, position] of sectionPositions.entries()) { + if (position >= scrollPosition) { + const section = sections[i]; + const link = toc.querySelector('a[href="#' + section.id + '"]'); + if (link) { + link.classList.add('active'); + const tocHeight = toc.clientHeight; + const scrollTop = toc.scrollTop; + if ( + document.body.getBoundingClientRect().top < scrollPos && + scrollTop < link.offsetTop - 10 + ) { + toc.scrollTop = link.clientHeight + link.offsetTop - tocHeight + 10; + } else if (scrollTop > link.offsetTop - 10) { + toc.scrollTop = link.offsetTop - 10; + } + } + break; + } + } + scrollPos = document.body.getBoundingClientRect().top; + }); } function setupMobileToggle() { - var toggle = document.getElementById('toggle-menu'); - toggle.addEventListener('click', function (_) { - var docNav = document.querySelector('.doc-nav'); - var isHidden = docNav.classList.contains('hidden'); - docNav.classList.toggle('hidden'); - var search = document.querySelector('.doc-nav > .search'); - console.log(search); - var searchHasResults = search.classList.contains('has-results'); - if (isHidden && searchHasResults) { - search.classList.remove('mobile-hidden'); - } else { - search.classList.add('mobile-hidden'); - } - var content = document.querySelector('.doc-nav .content'); - content.classList.toggle('hidden'); - content.classList.toggle('show'); - }); + document.getElementById('toggle-menu').addEventListener('click', () => { + const docNav = document.querySelector('.doc-nav'); + const isHidden = docNav.classList.contains('hidden'); + docNav.classList.toggle('hidden'); + const search = docNav.querySelector('.search'); + // console.log(search); + const searchHasResults = search.classList.contains('has-results'); + if (isHidden && searchHasResults) { + search.classList.remove('mobile-hidden'); + } else { + search.classList.add('mobile-hidden'); + } + const content = docNav.querySelector('.content'); + content.classList.toggle('hidden'); + content.classList.toggle('show'); + }); } function setupDarkMode() { - var html = document.getElementsByTagName('html')[0]; - var darkModeToggle = document.getElementById('dark-mode-toggle'); - darkModeToggle.addEventListener('click', function () { - html.classList.toggle('dark'); - var isDarkModeEnabled = html.classList.contains('dark'); - localStorage.setItem('dark-mode', isDarkModeEnabled); - darkModeToggle.setAttribute('aria-checked', isDarkModeEnabled) - }); - // Check if css var() is supported and enable dark mode toggle - if (window.CSS && CSS.supports('color', 'var(--fake-var)')) { - darkModeToggle.style.visibility = 'unset'; - } + const html = document.querySelector('html'); + const darkModeToggle = document.getElementById('dark-mode-toggle'); + darkModeToggle.addEventListener('click', () => { + html.classList.toggle('dark'); + const isDarkModeEnabled = html.classList.contains('dark'); + localStorage.setItem('dark-mode', isDarkModeEnabled); + darkModeToggle.setAttribute('aria-checked', isDarkModeEnabled); + }); } function setupSearch() { - var searchInput = document.getElementById('search'); - var onInputChange = debounce(function (e) { - var searchValue = e.target.value.toLowerCase(); - var menu = document.querySelector('.doc-nav > .content'); - var search = document.querySelector('.doc-nav > .search'); - if (searchValue === '') { - // reset to default - menu.style.display = ''; - if (!search.classList.contains('hidden')) { - search.classList.add('hidden'); - search.classList.remove('has-results'); - } - } else if (searchValue.length >= 2) { - // search for less than 2 characters can display too much results - search.innerHTML = ''; - menu.style.display = 'none'; - if (search.classList.contains('hidden')) { - search.classList.remove('hidden'); - search.classList.remove('mobile-hidden'); - search.classList.add('has-results'); - } - // cache length for performance - var foundModule = false; - var searchModuleIndexLength = searchModuleIndex.length; - var ul = document.createElement('ul'); - search.appendChild(ul); - for (var i = 0; i < searchModuleIndexLength; i++) { - // no toLowerCase needed because modules are always lowercase - var title = searchModuleIndex[i]; - if (title.indexOf(searchValue) === -1) { - continue - } - foundModule = true; - // [description, link] - var data = searchModuleData[i]; - var description = data[0]; - var link = data[1]; - var el = createSearchResult({ - link: link, - title: title, - description: description, - badge: 'module', - }); - ul.appendChild(el); - } - if (foundModule) { - var hr = document.createElement('hr'); - hr.classList.add('separator'); - search.appendChild(hr); - } - var searchIndexLength = searchIndex.length; - var results = []; - for (var i = 0; i < searchIndexLength; i++) { - var title = searchIndex[i]; - if (title.toLowerCase().indexOf(searchValue) === -1) { - continue - } - // [badge, description, link] - var data = searchData[i]; - var badge = data[0]; - var description = data[1]; - var link = data[2]; - var prefix = data[3]; - results.push({ - badge: badge, - description: description, - link: link, - title: prefix + ' ' + title, - }); - } - results.sort(function (a, b) { - if (a.title < b.title) { - return -1; - } - if (a.title > b.title) { - return 1; - } - return 0; - }); - var ul = document.createElement('ul'); - search.appendChild(ul); - for (var i = 0; i < results.length; i++) { - var result = results[i]; - var el = createSearchResult(result); - ul.appendChild(el); - } - } - }); - searchInput.addEventListener('input', onInputChange); + const searchInput = document.getElementById('search'); + const onInputChange = debounce((e) => { + const searchValue = e.target.value.toLowerCase(); + const docNav = document.querySelector('.doc-nav'); + const menu = docNav.querySelector('.content'); + const search = docNav.querySelector('.search'); + if (searchValue === '') { + // reset to default + menu.style.display = ''; + if (!search.classList.contains('hidden')) { + search.classList.add('hidden'); + search.classList.remove('has-results'); + } + } else if (searchValue.length >= 2) { + // search for less than 2 characters can display too much results + search.innerHTML = ''; + menu.style.display = 'none'; + if (search.classList.contains('hidden')) { + search.classList.remove('hidden'); + search.classList.remove('mobile-hidden'); + search.classList.add('has-results'); + } + // cache length for performance + let foundModule = false; + const ul = document.createElement('ul'); + search.appendChild(ul); + for (const [i, title] of searchModuleIndex.entries()) { + // no toLowerCase needed because modules are always lowercase + if (title.indexOf(searchValue) === -1) { + continue; + } + foundModule = true; + // [description, link] + const data = searchModuleData[i]; + const el = createSearchResult({ + badge: 'module', + description: data[0], + link: data[1], + title: title, + }); + ul.appendChild(el); + } + if (foundModule) { + const hr = document.createElement('hr'); + hr.classList.add('separator'); + search.appendChild(hr); + } + let results = []; + for (const [i, title] of searchIndex.entries()) { + if (title.toLowerCase().indexOf(searchValue) === -1) { + continue; + } + // [badge, description, link] + const data = searchData[i]; + results.push({ + badge: data[0], + description: data[1], + link: data[2], + title: data[3] + ' ' + title, + }); + } + results.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0)); + const ul_ = document.createElement('ul'); + search.appendChild(ul_); + results.forEach((result) => { + const el = createSearchResult(result); + ul_.appendChild(el); + }); + } + }); + searchInput.addEventListener('input', onInputChange); } function createSearchResult(data) { - var li = document.createElement('li'); - li.classList.add('result'); - var a = document.createElement('a'); - a.href = data.link; - a.classList.add('link'); - li.appendChild(a); - var defintion = document.createElement('div'); - defintion.classList.add('definition'); - a.appendChild(defintion); - if (data.description) { - var description = document.createElement('div'); - description.classList.add('description'); - description.textContent = data.description; - a.appendChild(description); - } - var title = document.createElement('span'); - title.classList.add('title'); - title.textContent = data.title; - defintion.appendChild(title); - var badge = document.createElement('badge'); - badge.classList.add('badge'); - badge.textContent = data.badge; - defintion.appendChild(badge); - return li; + const li = document.createElement('li'); + li.classList.add('result'); + const a = document.createElement('a'); + a.href = data.link; + a.classList.add('link'); + li.appendChild(a); + const defintion = document.createElement('div'); + defintion.classList.add('definition'); + a.appendChild(defintion); + if (data.description) { + const description = document.createElement('div'); + description.classList.add('description'); + description.textContent = data.description; + a.appendChild(description); + } + const title = document.createElement('span'); + title.classList.add('title'); + title.textContent = data.title; + defintion.appendChild(title); + const badge = document.createElement('badge'); + badge.classList.add('badge'); + badge.textContent = data.badge; + defintion.appendChild(badge); + return li; } function setupCollapse() { - var dropdownArrows = document.querySelectorAll('.dropdown-arrow'); - for (var i = 0; i < dropdownArrows.length; i++) { - var dropdownArrow = dropdownArrows[i]; - dropdownArrow.addEventListener('click', function (e) { - var parent = e.target.parentElement.parentElement.parentElement; - parent.classList.toggle('open'); - }); - } + const dropdownArrows = document.querySelectorAll('.dropdown-arrow'); + dropdownArrows.forEach((arrow) => { + arrow.addEventListener('click', (e) => { + const parent = e.target.parentElement.parentElement.parentElement; + parent.classList.toggle('open'); + }); + }); } function debounce(func, timeout) { - var timer; - return (...args) => { - const next = () => func(...args); - if (timer) { - clearTimeout(timer); - } - timer = setTimeout(next, timeout > 0 ? timeout : 300); - } + let timer; + return (...args) => { + const next = () => func(...args); + if (timer) { + clearTimeout(timer); + } + timer = setTimeout(next, timeout > 0 ? timeout : 300); + }; } document.addEventListener('keypress', (ev) => { - if (ev.key == '/') { - let search = document.getElementById('search'); - ev.preventDefault(); - search.focus(); - } + if (ev.key == '/') { + const search = document.getElementById('search'); + ev.preventDefault(); + search.focus(); + } }); diff --git a/cmd/tools/vdoc/theme/favicons/site.webmanifest b/cmd/tools/vdoc/theme/favicons/site.webmanifest index b20abb7cbb..9591150409 100644 --- a/cmd/tools/vdoc/theme/favicons/site.webmanifest +++ b/cmd/tools/vdoc/theme/favicons/site.webmanifest @@ -1,19 +1,19 @@ { - "name": "", - "short_name": "", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" } diff --git a/cmd/tools/vdoc/theme/index.html b/cmd/tools/vdoc/theme/index.html index 8c7dd75482..afa74077ee 100644 --- a/cmd/tools/vdoc/theme/index.html +++ b/cmd/tools/vdoc/theme/index.html @@ -1,63 +1,72 @@ + + + + + {{ title }} | vdoc + + + + + + + + + + + + {{ head_assets }} + - - - - - {{ title }} | vdoc - - - - - - - - - - - - {{ head_assets }} - - - - -
- -
-
-
- {{ contents }} -
- {{ footer_content }} -
-
- {{ right_content }} -
-
-
- {{ footer_assets }} - - - + + +
+ +
+
+
+ {{ contents }} +
{{ footer_content }}
+
+ {{ right_content }} +
+
+
+ {{ footer_assets }} + + diff --git a/cmd/tools/vdoc/theme/normalize.css b/cmd/tools/vdoc/theme/normalize.css index d9fbe676a5..6c80deaefd 100644 --- a/cmd/tools/vdoc/theme/normalize.css +++ b/cmd/tools/vdoc/theme/normalize.css @@ -91,24 +91,24 @@ select { } button, -[type="button"], -[type="reset"], -[type="submit"] { +[type='button'], +[type='reset'], +[type='submit'] { -webkit-appearance: button; } button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } @@ -133,23 +133,23 @@ textarea { overflow: auto; } -[type="checkbox"], -[type="radio"] { +[type='checkbox'], +[type='radio'] { box-sizing: border-box; padding: 0; } -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } -[type="search"] { +[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } diff --git a/cmd/tools/vdoc/vdoc.v b/cmd/tools/vdoc/vdoc.v index e497d15dd9..6c8331eaf2 100644 --- a/cmd/tools/vdoc/vdoc.v +++ b/cmd/tools/vdoc/vdoc.v @@ -16,7 +16,6 @@ const ( allowed_formats = ['md', 'markdown', 'json', 'text', 'stdout', 'html', 'htm'] vexe = os.getenv_opt('VEXE') or { @VEXE } vroot = os.dir(vexe) - tabs = ['\t\t', '\t\t\t\t\t\t', '\t\t\t\t\t\t\t'] ) enum OutputType {