mirror of
https://github.com/vlang/v.git
synced 2023-08-10 21:13:21 +03:00
vdoc: refactor theme files (#19024)
This commit is contained in:
parent
43800a05e8
commit
6b978a6b5a
@ -6,7 +6,7 @@ end_of_line = lf
|
|||||||
insert_final_newline = true
|
insert_final_newline = true
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
[*.v]
|
[*.{v,js,css}]
|
||||||
indent_style = tab
|
indent_style = tab
|
||||||
|
|
||||||
[*.{bat,cmd}]
|
[*.{bat,cmd}]
|
||||||
|
19
.github/workflows/module_docs_lint.yml
vendored
Normal file
19
.github/workflows/module_docs_lint.yml
vendored
Normal file
@ -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
|
@ -10,6 +10,7 @@ import v.ast
|
|||||||
import v.token
|
import v.token
|
||||||
import v.doc
|
import v.doc
|
||||||
import v.pref
|
import v.pref
|
||||||
|
import v.util { tabs }
|
||||||
|
|
||||||
const (
|
const (
|
||||||
css_js_assets = ['doc.css', 'normalize.css', 'doc.js', 'dark-mode.js']
|
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 }}',
|
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 }}',
|
vd.assets['dark_icon']).replace('{{ menu_icon }}', vd.assets['menu_icon']).replace('{{ head_assets }}',
|
||||||
if cfg.inline_assets {
|
if cfg.inline_assets {
|
||||||
'\n${tabs[0]}<style>' + vd.assets['doc_css'] + '</style>\n${tabs[0]}<style>' +
|
'<style>${vd.assets['doc_css']}</style>
|
||||||
vd.assets['normalize_css'] + '</style>\n${tabs[0]}<script>' +
|
${tabs(2)}<style>${vd.assets['normalize_css']}</style>
|
||||||
vd.assets['dark_mode_js'] + '</script>'
|
${tabs(2)}<script>${vd.assets['dark_mode_js']}</script>'
|
||||||
} else {
|
} else {
|
||||||
'\n${tabs[0]}<link rel="stylesheet" href="' + vd.assets['doc_css'] +
|
'<link rel="stylesheet" href="${vd.assets['doc_css']}" />
|
||||||
'" />\n${tabs[0]}<link rel="stylesheet" href="' + vd.assets['normalize_css'] +
|
${tabs(2)}<link rel="stylesheet" href="${vd.assets['normalize_css']}" />
|
||||||
'" />\n${tabs[0]}<script src="' + vd.assets['dark_mode_js'] + '"></script>'
|
${tabs(2)}<script src="${vd.assets['dark_mode_js']}"></script>'
|
||||||
}).replace('{{ toc_links }}', if cfg.is_multi || vd.docs.len > 1 {
|
}).replace('{{ toc_links }}', if cfg.is_multi || vd.docs.len > 1 {
|
||||||
modules_toc_str
|
modules_toc_str
|
||||||
} else {
|
} else {
|
||||||
symbols_toc_str
|
symbols_toc_str
|
||||||
}).replace('{{ contents }}', contents.str()).replace('{{ right_content }}', if cfg.is_multi
|
}).replace('{{ contents }}', contents.str()).replace('{{ right_content }}', if cfg.is_multi
|
||||||
&& d.head.name != 'README' {
|
&& d.head.name != 'README' {
|
||||||
'<div class="doc-toc"><ul>' + symbols_toc_str + '</ul></div>'
|
'<div class="doc-toc"><ul>${symbols_toc_str}</ul></div>'
|
||||||
} else {
|
} else {
|
||||||
''
|
''
|
||||||
}).replace('{{ footer_content }}', gen_footer_text(d, !cfg.no_timestamp)).replace('{{ footer_assets }}',
|
}).replace('{{ footer_content }}', gen_footer_text(d, !cfg.no_timestamp)).replace('{{ footer_assets }}',
|
||||||
if cfg.inline_assets {
|
if cfg.inline_assets {
|
||||||
'<script>' + vd.assets['doc_js'] + '</script>'
|
'<script>${vd.assets['doc_js']}</script>'
|
||||||
} else {
|
} else {
|
||||||
'<script src="' + vd.assets['doc_js'] + '"></script>'
|
'<script src="${vd.assets['doc_js']}"></script>'
|
||||||
})
|
})
|
||||||
return result
|
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}'
|
node_id = 'readme_${node_id}'
|
||||||
hash_link = ' <a href="#${node_id}">#</a>'
|
hash_link = ' <a href="#${node_id}">#</a>'
|
||||||
}
|
}
|
||||||
dnw.writeln('${tabs[1]}<section id="${node_id}" class="doc-node${node_class}">')
|
dnw.writeln('${tabs(2)}<section id="${node_id}" class="doc-node${node_class}">')
|
||||||
if dn.name.len > 0 {
|
if dn.name.len > 0 {
|
||||||
if dn.kind == .const_group {
|
if dn.kind == .const_group {
|
||||||
dnw.write_string('${tabs[2]}<div class="title"><${head_tag}>${sym_name}${hash_link}</${head_tag}>')
|
dnw.write_string('${tabs(3)}<div class="title"><${head_tag}>${sym_name}${hash_link}</${head_tag}>')
|
||||||
} else {
|
} else {
|
||||||
dnw.write_string('${tabs[2]}<div class="title"><${head_tag}>${dn.kind} ${sym_name}${hash_link}</${head_tag}>')
|
dnw.write_string('${tabs(3)}<div class="title"><${head_tag}>${dn.kind} ${sym_name}${hash_link}</${head_tag}>')
|
||||||
}
|
}
|
||||||
if link.len != 0 {
|
if link.len != 0 {
|
||||||
dnw.write_string('<a class="link" rel="noreferrer" target="_blank" href="${link}">${link_svg}</a>')
|
dnw.write_string('<a class="link" rel="noreferrer" target="_blank" href="${link}">${link_svg}</a>')
|
||||||
|
5
cmd/tools/vdoc/theme/.prettierrc
Normal file
5
cmd/tools/vdoc/theme/.prettierrc
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"useTabs": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"singleQuote": true
|
||||||
|
}
|
@ -1,6 +1,5 @@
|
|||||||
(function() {
|
(function () {
|
||||||
var html = document.getElementsByTagName('html')[0];
|
|
||||||
if (localStorage.getItem('dark-mode') === 'true') {
|
if (localStorage.getItem('dark-mode') === 'true') {
|
||||||
html.classList.add('dark');
|
document.querySelector('html').classList.add('dark');
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
@ -86,8 +86,8 @@ html {
|
|||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
|
font-family: Jost, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: #000;
|
color: #000;
|
||||||
@ -157,8 +157,6 @@ body {
|
|||||||
fill: var(--menu-toggle-icon-color);
|
fill: var(--menu-toggle-icon-color);
|
||||||
}
|
}
|
||||||
.doc-nav > .heading-container {
|
.doc-nav > .heading-container {
|
||||||
position: relative;
|
|
||||||
/* IE11 */
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -184,16 +182,10 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.doc-nav
|
.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
|
||||||
> .heading-container
|
|
||||||
> .heading
|
|
||||||
> .info
|
|
||||||
> .toggle-version-container
|
|
||||||
> #dark-mode-toggle {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
visibility: hidden;
|
|
||||||
}
|
}
|
||||||
.doc-nav
|
.doc-nav
|
||||||
> .heading-container
|
> .heading-container
|
||||||
@ -325,8 +317,8 @@ body {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.doc-nav > .search .result > .link > .description {
|
.doc-nav > .search .result > .link > .description {
|
||||||
font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
|
font-family: Jost, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -379,7 +371,6 @@ body {
|
|||||||
padding: 5rem 0 2rem 0;
|
padding: 5rem 0 2rem 0;
|
||||||
margin-top: -4rem;
|
margin-top: -4rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
word-break: break-all; /* IE11 */
|
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
.doc-content > .doc-node.const:nth-child(2) {
|
.doc-content > .doc-node.const:nth-child(2) {
|
||||||
@ -416,7 +407,7 @@ body {
|
|||||||
background-color: var(--code-background-color);
|
background-color: var(--code-background-color);
|
||||||
color: var(--attribute-text-color);
|
color: var(--attribute-text-color);
|
||||||
margin-right: 0.8rem;
|
margin-right: 0.8rem;
|
||||||
font-family: "Jetbrains Mono", monospace;
|
font-family: 'Jetbrains Mono', monospace;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.doc-content > .doc-node > .attributes > .attribute-deprecated {
|
.doc-content > .doc-node > .attributes > .attribute-deprecated {
|
||||||
@ -548,7 +539,7 @@ pre code {
|
|||||||
color: var(--code-default-text-color);
|
color: var(--code-default-text-color);
|
||||||
font-size: 0.948em;
|
font-size: 0.948em;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
font-family: "Jetbrains Mono", monospace;
|
font-family: 'Jetbrains Mono', monospace;
|
||||||
background-color: #edf2f7;
|
background-color: #edf2f7;
|
||||||
background-color: var(--code-background-color);
|
background-color: var(--code-background-color);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
@ -641,8 +632,6 @@ pre {
|
|||||||
padding: 0rem 2rem 1rem 2rem;
|
padding: 0rem 2rem 1rem 2rem;
|
||||||
}
|
}
|
||||||
.doc-toc {
|
.doc-toc {
|
||||||
position: relative;
|
|
||||||
/* IE11 */
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
@ -699,12 +688,7 @@ pre {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
.doc-nav
|
.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
|
||||||
> .heading-container
|
|
||||||
> .heading
|
|
||||||
> .info
|
|
||||||
> .toggle-version-container
|
|
||||||
> #dark-mode-toggle {
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
.doc-nav .content.show,
|
.doc-nav .content.show,
|
||||||
|
@ -1,96 +1,85 @@
|
|||||||
(function () {
|
(function () {
|
||||||
if (document.body.scrollIntoView) {
|
const docnav = document.querySelector('.doc-nav');
|
||||||
var docnav = document.querySelector('.doc-nav');
|
const active = docnav.querySelector('li.active');
|
||||||
var active = docnav.querySelector('li.active');
|
active?.scrollIntoView({ block: 'center', inline: 'nearest' });
|
||||||
if (active) {
|
|
||||||
active.scrollIntoView({ block: 'center', inline: 'nearest' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setupScrollSpy();
|
|
||||||
setupMobileToggle();
|
setupMobileToggle();
|
||||||
setupDarkMode();
|
setupDarkMode();
|
||||||
|
setupScrollSpy();
|
||||||
setupSearch();
|
setupSearch();
|
||||||
setupCollapse();
|
setupCollapse();
|
||||||
})();
|
})();
|
||||||
|
|
||||||
function setupScrollSpy() {
|
function setupScrollSpy() {
|
||||||
var sectionPositions = [];
|
const sections = document.querySelectorAll('section');
|
||||||
var sections = document.querySelectorAll('section');
|
const sectionPositions = Array.from(sections).map((section) => section.offsetTop);
|
||||||
sections.forEach(function (section) {
|
let scrollPos = 0;
|
||||||
sectionPositions.push(section.offsetTop);
|
window.addEventListener('scroll', () => {
|
||||||
});
|
const toc = document.querySelector('.doc-toc');
|
||||||
var scrollPos = 0;
|
|
||||||
window.addEventListener('scroll', function (_) {
|
|
||||||
// Reset classes
|
// Reset classes
|
||||||
document.querySelectorAll('.doc-toc a[class="active"]').forEach(function (link) {
|
toc.querySelectorAll('a[class="active"]').forEach((link) => link.classList.remove('active'));
|
||||||
link.classList.remove('active');
|
|
||||||
});
|
|
||||||
// Set current menu link as active
|
// Set current menu link as active
|
||||||
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
let scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
for (var i = 0; i < sectionPositions.length; i++) {
|
for (const [i, position] of sectionPositions.entries()) {
|
||||||
var section = sections[i];
|
|
||||||
var position = sectionPositions[i];
|
|
||||||
if (position >= scrollPosition) {
|
if (position >= scrollPosition) {
|
||||||
var link = document.querySelector('.doc-toc a[href="#' + section.id + '"]');
|
const section = sections[i];
|
||||||
|
const link = toc.querySelector('a[href="#' + section.id + '"]');
|
||||||
if (link) {
|
if (link) {
|
||||||
link.classList.add('active');
|
link.classList.add('active');
|
||||||
var docToc = document.querySelector('.doc-toc');
|
const tocHeight = toc.clientHeight;
|
||||||
var tocHeight = docToc.clientHeight;
|
const scrollTop = toc.scrollTop;
|
||||||
var scrollTop = docToc.scrollTop;
|
if (
|
||||||
if ((document.body.getBoundingClientRect()).top < scrollPos && scrollTop < link.offsetTop - 10) {
|
document.body.getBoundingClientRect().top < scrollPos &&
|
||||||
docToc.scrollTop = link.clientHeight + link.offsetTop - tocHeight + 10;
|
scrollTop < link.offsetTop - 10
|
||||||
|
) {
|
||||||
|
toc.scrollTop = link.clientHeight + link.offsetTop - tocHeight + 10;
|
||||||
} else if (scrollTop > link.offsetTop - 10) {
|
} else if (scrollTop > link.offsetTop - 10) {
|
||||||
docToc.scrollTop = link.offsetTop - 10;
|
toc.scrollTop = link.offsetTop - 10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
scrollPos = (document.body.getBoundingClientRect()).top;
|
scrollPos = document.body.getBoundingClientRect().top;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupMobileToggle() {
|
function setupMobileToggle() {
|
||||||
var toggle = document.getElementById('toggle-menu');
|
document.getElementById('toggle-menu').addEventListener('click', () => {
|
||||||
toggle.addEventListener('click', function (_) {
|
const docNav = document.querySelector('.doc-nav');
|
||||||
var docNav = document.querySelector('.doc-nav');
|
const isHidden = docNav.classList.contains('hidden');
|
||||||
var isHidden = docNav.classList.contains('hidden');
|
|
||||||
docNav.classList.toggle('hidden');
|
docNav.classList.toggle('hidden');
|
||||||
var search = document.querySelector('.doc-nav > .search');
|
const search = docNav.querySelector('.search');
|
||||||
console.log(search);
|
// console.log(search);
|
||||||
var searchHasResults = search.classList.contains('has-results');
|
const searchHasResults = search.classList.contains('has-results');
|
||||||
if (isHidden && searchHasResults) {
|
if (isHidden && searchHasResults) {
|
||||||
search.classList.remove('mobile-hidden');
|
search.classList.remove('mobile-hidden');
|
||||||
} else {
|
} else {
|
||||||
search.classList.add('mobile-hidden');
|
search.classList.add('mobile-hidden');
|
||||||
}
|
}
|
||||||
var content = document.querySelector('.doc-nav .content');
|
const content = docNav.querySelector('.content');
|
||||||
content.classList.toggle('hidden');
|
content.classList.toggle('hidden');
|
||||||
content.classList.toggle('show');
|
content.classList.toggle('show');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupDarkMode() {
|
function setupDarkMode() {
|
||||||
var html = document.getElementsByTagName('html')[0];
|
const html = document.querySelector('html');
|
||||||
var darkModeToggle = document.getElementById('dark-mode-toggle');
|
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
||||||
darkModeToggle.addEventListener('click', function () {
|
darkModeToggle.addEventListener('click', () => {
|
||||||
html.classList.toggle('dark');
|
html.classList.toggle('dark');
|
||||||
var isDarkModeEnabled = html.classList.contains('dark');
|
const isDarkModeEnabled = html.classList.contains('dark');
|
||||||
localStorage.setItem('dark-mode', isDarkModeEnabled);
|
localStorage.setItem('dark-mode', isDarkModeEnabled);
|
||||||
darkModeToggle.setAttribute('aria-checked', 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';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupSearch() {
|
function setupSearch() {
|
||||||
var searchInput = document.getElementById('search');
|
const searchInput = document.getElementById('search');
|
||||||
var onInputChange = debounce(function (e) {
|
const onInputChange = debounce((e) => {
|
||||||
var searchValue = e.target.value.toLowerCase();
|
const searchValue = e.target.value.toLowerCase();
|
||||||
var menu = document.querySelector('.doc-nav > .content');
|
const docNav = document.querySelector('.doc-nav');
|
||||||
var search = document.querySelector('.doc-nav > .search');
|
const menu = docNav.querySelector('.content');
|
||||||
|
const search = docNav.querySelector('.search');
|
||||||
if (searchValue === '') {
|
if (searchValue === '') {
|
||||||
// reset to default
|
// reset to default
|
||||||
menu.style.display = '';
|
menu.style.display = '';
|
||||||
@ -108,96 +97,77 @@ function setupSearch() {
|
|||||||
search.classList.add('has-results');
|
search.classList.add('has-results');
|
||||||
}
|
}
|
||||||
// cache length for performance
|
// cache length for performance
|
||||||
var foundModule = false;
|
let foundModule = false;
|
||||||
var searchModuleIndexLength = searchModuleIndex.length;
|
const ul = document.createElement('ul');
|
||||||
var ul = document.createElement('ul');
|
|
||||||
search.appendChild(ul);
|
search.appendChild(ul);
|
||||||
for (var i = 0; i < searchModuleIndexLength; i++) {
|
for (const [i, title] of searchModuleIndex.entries()) {
|
||||||
// no toLowerCase needed because modules are always lowercase
|
// no toLowerCase needed because modules are always lowercase
|
||||||
var title = searchModuleIndex[i];
|
|
||||||
if (title.indexOf(searchValue) === -1) {
|
if (title.indexOf(searchValue) === -1) {
|
||||||
continue
|
continue;
|
||||||
}
|
}
|
||||||
foundModule = true;
|
foundModule = true;
|
||||||
// [description, link]
|
// [description, link]
|
||||||
var data = searchModuleData[i];
|
const data = searchModuleData[i];
|
||||||
var description = data[0];
|
const el = createSearchResult({
|
||||||
var link = data[1];
|
|
||||||
var el = createSearchResult({
|
|
||||||
link: link,
|
|
||||||
title: title,
|
|
||||||
description: description,
|
|
||||||
badge: 'module',
|
badge: 'module',
|
||||||
|
description: data[0],
|
||||||
|
link: data[1],
|
||||||
|
title: title,
|
||||||
});
|
});
|
||||||
ul.appendChild(el);
|
ul.appendChild(el);
|
||||||
}
|
}
|
||||||
if (foundModule) {
|
if (foundModule) {
|
||||||
var hr = document.createElement('hr');
|
const hr = document.createElement('hr');
|
||||||
hr.classList.add('separator');
|
hr.classList.add('separator');
|
||||||
search.appendChild(hr);
|
search.appendChild(hr);
|
||||||
}
|
}
|
||||||
var searchIndexLength = searchIndex.length;
|
let results = [];
|
||||||
var results = [];
|
for (const [i, title] of searchIndex.entries()) {
|
||||||
for (var i = 0; i < searchIndexLength; i++) {
|
|
||||||
var title = searchIndex[i];
|
|
||||||
if (title.toLowerCase().indexOf(searchValue) === -1) {
|
if (title.toLowerCase().indexOf(searchValue) === -1) {
|
||||||
continue
|
continue;
|
||||||
}
|
}
|
||||||
// [badge, description, link]
|
// [badge, description, link]
|
||||||
var data = searchData[i];
|
const data = searchData[i];
|
||||||
var badge = data[0];
|
|
||||||
var description = data[1];
|
|
||||||
var link = data[2];
|
|
||||||
var prefix = data[3];
|
|
||||||
results.push({
|
results.push({
|
||||||
badge: badge,
|
badge: data[0],
|
||||||
description: description,
|
description: data[1],
|
||||||
link: link,
|
link: data[2],
|
||||||
title: prefix + ' ' + title,
|
title: data[3] + ' ' + title,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
results.sort(function (a, b) {
|
results.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0));
|
||||||
if (a.title < b.title) {
|
const ul_ = document.createElement('ul');
|
||||||
return -1;
|
search.appendChild(ul_);
|
||||||
}
|
results.forEach((result) => {
|
||||||
if (a.title > b.title) {
|
const el = createSearchResult(result);
|
||||||
return 1;
|
ul_.appendChild(el);
|
||||||
}
|
|
||||||
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);
|
searchInput.addEventListener('input', onInputChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createSearchResult(data) {
|
function createSearchResult(data) {
|
||||||
var li = document.createElement('li');
|
const li = document.createElement('li');
|
||||||
li.classList.add('result');
|
li.classList.add('result');
|
||||||
var a = document.createElement('a');
|
const a = document.createElement('a');
|
||||||
a.href = data.link;
|
a.href = data.link;
|
||||||
a.classList.add('link');
|
a.classList.add('link');
|
||||||
li.appendChild(a);
|
li.appendChild(a);
|
||||||
var defintion = document.createElement('div');
|
const defintion = document.createElement('div');
|
||||||
defintion.classList.add('definition');
|
defintion.classList.add('definition');
|
||||||
a.appendChild(defintion);
|
a.appendChild(defintion);
|
||||||
if (data.description) {
|
if (data.description) {
|
||||||
var description = document.createElement('div');
|
const description = document.createElement('div');
|
||||||
description.classList.add('description');
|
description.classList.add('description');
|
||||||
description.textContent = data.description;
|
description.textContent = data.description;
|
||||||
a.appendChild(description);
|
a.appendChild(description);
|
||||||
}
|
}
|
||||||
var title = document.createElement('span');
|
const title = document.createElement('span');
|
||||||
title.classList.add('title');
|
title.classList.add('title');
|
||||||
title.textContent = data.title;
|
title.textContent = data.title;
|
||||||
defintion.appendChild(title);
|
defintion.appendChild(title);
|
||||||
var badge = document.createElement('badge');
|
const badge = document.createElement('badge');
|
||||||
badge.classList.add('badge');
|
badge.classList.add('badge');
|
||||||
badge.textContent = data.badge;
|
badge.textContent = data.badge;
|
||||||
defintion.appendChild(badge);
|
defintion.appendChild(badge);
|
||||||
@ -205,30 +175,29 @@ function createSearchResult(data) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setupCollapse() {
|
function setupCollapse() {
|
||||||
var dropdownArrows = document.querySelectorAll('.dropdown-arrow');
|
const dropdownArrows = document.querySelectorAll('.dropdown-arrow');
|
||||||
for (var i = 0; i < dropdownArrows.length; i++) {
|
dropdownArrows.forEach((arrow) => {
|
||||||
var dropdownArrow = dropdownArrows[i];
|
arrow.addEventListener('click', (e) => {
|
||||||
dropdownArrow.addEventListener('click', function (e) {
|
const parent = e.target.parentElement.parentElement.parentElement;
|
||||||
var parent = e.target.parentElement.parentElement.parentElement;
|
|
||||||
parent.classList.toggle('open');
|
parent.classList.toggle('open');
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function debounce(func, timeout) {
|
function debounce(func, timeout) {
|
||||||
var timer;
|
let timer;
|
||||||
return (...args) => {
|
return (...args) => {
|
||||||
const next = () => func(...args);
|
const next = () => func(...args);
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
}
|
}
|
||||||
timer = setTimeout(next, timeout > 0 ? timeout : 300);
|
timer = setTimeout(next, timeout > 0 ? timeout : 300);
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('keypress', (ev) => {
|
document.addEventListener('keypress', (ev) => {
|
||||||
if (ev.key == '/') {
|
if (ev.key == '/') {
|
||||||
let search = document.getElementById('search');
|
const search = document.getElementById('search');
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
search.focus();
|
search.focus();
|
||||||
}
|
}
|
||||||
|
@ -1,26 +1,31 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta charset="UTF-8" />
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="x-ua-compatible" content="IE=edge" />
|
<meta http-equiv="x-ua-compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>{{ title }} | vdoc</title>
|
<title>{{ title }} | vdoc</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
<link
|
||||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
|
href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap"
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
rel="stylesheet"
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
/>
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
<link
|
||||||
<link rel="manifest" href="site.webmanifest">
|
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
|
||||||
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
|
rel="stylesheet"
|
||||||
<meta name="msapplication-TileColor" content="#da532c">
|
/>
|
||||||
<meta name="theme-color" content="#ffffff">
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
|
||||||
|
<link rel="manifest" href="site.webmanifest" />
|
||||||
|
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5" />
|
||||||
|
<meta name="msapplication-TileColor" content="#da532c" />
|
||||||
|
<meta name="theme-color" content="#ffffff" />
|
||||||
{{ head_assets }}
|
{{ head_assets }}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div><a id="skip-to-content-link" href="#main-content">Skip to content</a></div>
|
<div><a id="skip-to-content-link" href="#main-content">Skip to content</a></div>
|
||||||
<div id="page">
|
<div id="page">
|
||||||
<header class="doc-nav hidden">
|
<header class="doc-nav hidden">
|
||||||
@ -30,11 +35,18 @@
|
|||||||
<div class="module">{{ head_name }}</div>
|
<div class="module">{{ head_name }}</div>
|
||||||
<div class="toggle-version-container">
|
<div class="toggle-version-container">
|
||||||
<span>{{ version }}</span>
|
<span>{{ version }}</span>
|
||||||
<div id="dark-mode-toggle" role="switch" aria-checked="false" aria-label="Toggle dark mode">{{ light_icon }}{{ dark_icon }}</div>
|
<div
|
||||||
|
id="dark-mode-toggle"
|
||||||
|
role="switch"
|
||||||
|
aria-checked="false"
|
||||||
|
aria-label="Toggle dark mode"
|
||||||
|
>
|
||||||
|
{{ light_icon }}{{ dark_icon }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ menu_icon }}
|
{{ menu_icon }}
|
||||||
</div>
|
</div>
|
||||||
<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
|
<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav class="search hidden"></nav>
|
<nav class="search hidden"></nav>
|
||||||
@ -48,9 +60,7 @@
|
|||||||
<div class="doc-container">
|
<div class="doc-container">
|
||||||
<div class="doc-content">
|
<div class="doc-content">
|
||||||
{{ contents }}
|
{{ contents }}
|
||||||
<div class="footer">
|
<div class="footer">{{ footer_content }}</div>
|
||||||
{{ footer_content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{{ right_content }}
|
{{ right_content }}
|
||||||
</div>
|
</div>
|
||||||
@ -58,6 +68,5 @@
|
|||||||
</div>
|
</div>
|
||||||
{{ footer_assets }}
|
{{ footer_assets }}
|
||||||
<script async src="search_index.js"></script>
|
<script async src="search_index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
30
cmd/tools/vdoc/theme/normalize.css
vendored
30
cmd/tools/vdoc/theme/normalize.css
vendored
@ -91,24 +91,24 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type='button'],
|
||||||
[type="reset"],
|
[type='reset'],
|
||||||
[type="submit"] {
|
[type='submit'] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
button::-moz-focus-inner,
|
||||||
[type="button"]::-moz-focus-inner,
|
[type='button']::-moz-focus-inner,
|
||||||
[type="reset"]::-moz-focus-inner,
|
[type='reset']::-moz-focus-inner,
|
||||||
[type="submit"]::-moz-focus-inner {
|
[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:-moz-focusring,
|
button:-moz-focusring,
|
||||||
[type="button"]:-moz-focusring,
|
[type='button']:-moz-focusring,
|
||||||
[type="reset"]:-moz-focusring,
|
[type='reset']:-moz-focusring,
|
||||||
[type="submit"]:-moz-focusring {
|
[type='submit']:-moz-focusring {
|
||||||
outline: 1px dotted ButtonText;
|
outline: 1px dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -133,23 +133,23 @@ textarea {
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type='checkbox'],
|
||||||
[type="radio"] {
|
[type='radio'] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
[type='number']::-webkit-inner-spin-button,
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
[type='number']::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="search"] {
|
[type='search'] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type='search']::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,7 +16,6 @@ const (
|
|||||||
allowed_formats = ['md', 'markdown', 'json', 'text', 'stdout', 'html', 'htm']
|
allowed_formats = ['md', 'markdown', 'json', 'text', 'stdout', 'html', 'htm']
|
||||||
vexe = os.getenv_opt('VEXE') or { @VEXE }
|
vexe = os.getenv_opt('VEXE') or { @VEXE }
|
||||||
vroot = os.dir(vexe)
|
vroot = os.dir(vexe)
|
||||||
tabs = ['\t\t', '\t\t\t\t\t\t', '\t\t\t\t\t\t\t']
|
|
||||||
)
|
)
|
||||||
|
|
||||||
enum OutputType {
|
enum OutputType {
|
||||||
|
Loading…
Reference in New Issue
Block a user