1
0
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:
Turiiya 2023-08-02 09:46:18 +02:00 committed by GitHub
parent 43800a05e8
commit 6b978a6b5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 815 additions and 830 deletions

View File

@ -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}]

19
.github/workflows/module_docs_lint.yml vendored Normal file
View 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

View File

@ -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]}<style>' + vd.assets['doc_css'] + '</style>\n${tabs[0]}<style>' +
vd.assets['normalize_css'] + '</style>\n${tabs[0]}<script>' +
vd.assets['dark_mode_js'] + '</script>'
'<style>${vd.assets['doc_css']}</style>
${tabs(2)}<style>${vd.assets['normalize_css']}</style>
${tabs(2)}<script>${vd.assets['dark_mode_js']}</script>'
} else {
'\n${tabs[0]}<link rel="stylesheet" href="' + vd.assets['doc_css'] +
'" />\n${tabs[0]}<link rel="stylesheet" href="' + vd.assets['normalize_css'] +
'" />\n${tabs[0]}<script src="' + vd.assets['dark_mode_js'] + '"></script>'
'<link rel="stylesheet" href="${vd.assets['doc_css']}" />
${tabs(2)}<link rel="stylesheet" href="${vd.assets['normalize_css']}" />
${tabs(2)}<script src="${vd.assets['dark_mode_js']}"></script>'
}).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' {
'<div class="doc-toc"><ul>' + symbols_toc_str + '</ul></div>'
'<div class="doc-toc"><ul>${symbols_toc_str}</ul></div>'
} else {
''
}).replace('{{ footer_content }}', gen_footer_text(d, !cfg.no_timestamp)).replace('{{ footer_assets }}',
if cfg.inline_assets {
'<script>' + vd.assets['doc_js'] + '</script>'
'<script>${vd.assets['doc_js']}</script>'
} else {
'<script src="' + vd.assets['doc_js'] + '"></script>'
'<script src="${vd.assets['doc_js']}"></script>'
})
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 = ' <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.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 {
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 {
dnw.write_string('<a class="link" rel="noreferrer" target="_blank" href="${link}">${link_svg}</a>')

View File

@ -0,0 +1,5 @@
{
"useTabs": true,
"printWidth": 100,
"singleQuote": true
}

View File

@ -1,6 +1,5 @@
(function() {
var html = document.getElementsByTagName('html')[0];
(function () {
if (localStorage.getItem('dark-mode') === 'true') {
html.classList.add('dark');
document.querySelector('html').classList.add('dark');
}
})();

View File

@ -86,8 +86,8 @@ html {
}
body {
margin: 0;
font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
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;
@ -157,8 +157,6 @@ body {
fill: var(--menu-toggle-icon-color);
}
.doc-nav > .heading-container {
position: relative;
/* IE11 */
position: sticky;
position: -webkit-sticky;
top: 0;
@ -184,16 +182,10 @@ body {
display: flex;
align-items: center;
}
.doc-nav
> .heading-container
> .heading
> .info
> .toggle-version-container
> #dark-mode-toggle {
.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
cursor: pointer;
fill: #fff;
display: flex;
visibility: hidden;
}
.doc-nav
> .heading-container
@ -325,8 +317,8 @@ body {
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-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;
@ -379,7 +371,6 @@ body {
padding: 5rem 0 2rem 0;
margin-top: -4rem;
overflow: hidden;
word-break: break-all; /* IE11 */
word-break: break-word;
}
.doc-content > .doc-node.const:nth-child(2) {
@ -416,7 +407,7 @@ body {
background-color: var(--code-background-color);
color: var(--attribute-text-color);
margin-right: 0.8rem;
font-family: "Jetbrains Mono", monospace;
font-family: 'Jetbrains Mono', monospace;
font-size: 0.9rem;
}
.doc-content > .doc-node > .attributes > .attribute-deprecated {
@ -548,7 +539,7 @@ pre code {
color: var(--code-default-text-color);
font-size: 0.948em;
text-shadow: none;
font-family: "Jetbrains Mono", monospace;
font-family: 'Jetbrains Mono', monospace;
background-color: #edf2f7;
background-color: var(--code-background-color);
border-radius: 0.25rem;
@ -641,8 +632,6 @@ pre {
padding: 0rem 2rem 1rem 2rem;
}
.doc-toc {
position: relative;
/* IE11 */
position: sticky;
height: 100vh;
position: -webkit-sticky;
@ -699,12 +688,7 @@ pre {
display: flex;
flex-direction: row-reverse;
}
.doc-nav
> .heading-container
> .heading
> .info
> .toggle-version-container
> #dark-mode-toggle {
.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
margin-right: auto;
}
.doc-nav .content.show,

View File

@ -1,96 +1,85 @@
(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();
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 (_) {
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
document.querySelectorAll('.doc-toc a[class="active"]').forEach(function (link) {
link.classList.remove('active');
});
toc.querySelectorAll('a[class="active"]').forEach((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];
let scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (const [i, position] of sectionPositions.entries()) {
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) {
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;
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) {
docToc.scrollTop = link.offsetTop - 10;
toc.scrollTop = link.offsetTop - 10;
}
}
break;
}
}
scrollPos = (document.body.getBoundingClientRect()).top;
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');
document.getElementById('toggle-menu').addEventListener('click', () => {
const docNav = document.querySelector('.doc-nav');
const 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');
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');
}
var content = document.querySelector('.doc-nav .content');
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 () {
const html = document.querySelector('html');
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
var isDarkModeEnabled = html.classList.contains('dark');
const isDarkModeEnabled = html.classList.contains('dark');
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() {
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');
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 = '';
@ -108,96 +97,77 @@ function setupSearch() {
search.classList.add('has-results');
}
// cache length for performance
var foundModule = false;
var searchModuleIndexLength = searchModuleIndex.length;
var ul = document.createElement('ul');
let foundModule = false;
const ul = document.createElement('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
var title = searchModuleIndex[i];
if (title.indexOf(searchValue) === -1) {
continue
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,
const data = searchModuleData[i];
const el = createSearchResult({
badge: 'module',
description: data[0],
link: data[1],
title: title,
});
ul.appendChild(el);
}
if (foundModule) {
var hr = document.createElement('hr');
const 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];
let results = [];
for (const [i, title] of searchIndex.entries()) {
if (title.toLowerCase().indexOf(searchValue) === -1) {
continue
continue;
}
// [badge, description, link]
var data = searchData[i];
var badge = data[0];
var description = data[1];
var link = data[2];
var prefix = data[3];
const data = searchData[i];
results.push({
badge: badge,
description: description,
link: link,
title: prefix + ' ' + title,
badge: data[0],
description: data[1],
link: data[2],
title: data[3] + ' ' + title,
});
}
results.sort(function (a, b) {
if (a.title < b.title) {
return -1;
}
if (a.title > b.title) {
return 1;
}
return 0;
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);
});
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);
}
function createSearchResult(data) {
var li = document.createElement('li');
const li = document.createElement('li');
li.classList.add('result');
var a = document.createElement('a');
const a = document.createElement('a');
a.href = data.link;
a.classList.add('link');
li.appendChild(a);
var defintion = document.createElement('div');
const defintion = document.createElement('div');
defintion.classList.add('definition');
a.appendChild(defintion);
if (data.description) {
var description = document.createElement('div');
const description = document.createElement('div');
description.classList.add('description');
description.textContent = data.description;
a.appendChild(description);
}
var title = document.createElement('span');
const title = document.createElement('span');
title.classList.add('title');
title.textContent = data.title;
defintion.appendChild(title);
var badge = document.createElement('badge');
const badge = document.createElement('badge');
badge.classList.add('badge');
badge.textContent = data.badge;
defintion.appendChild(badge);
@ -205,30 +175,29 @@ function createSearchResult(data) {
}
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;
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;
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');
const search = document.getElementById('search');
ev.preventDefault();
search.focus();
}

View File

@ -1,26 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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 href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<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">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<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
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
rel="stylesheet"
/>
<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>
</head>
<body>
<body>
<div><a id="skip-to-content-link" href="#main-content">Skip to content</a></div>
<div id="page">
<header class="doc-nav hidden">
@ -30,11 +35,18 @@
<div class="module">{{ head_name }}</div>
<div class="toggle-version-container">
<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>
{{ menu_icon }}
</div>
<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off" />
</div>
</div>
<nav class="search hidden"></nav>
@ -48,9 +60,7 @@
<div class="doc-container">
<div class="doc-content">
{{ contents }}
<div class="footer">
{{ footer_content }}
</div>
<div class="footer">{{ footer_content }}</div>
</div>
{{ right_content }}
</div>
@ -58,6 +68,5 @@
</div>
{{ footer_assets }}
<script async src="search_index.js"></script>
</body>
</body>
</html>

View File

@ -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;
}

View File

@ -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 {