vdoc: refactor theme files (#19024)

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

.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

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]}<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>')

cmd/tools/vdoc/theme/.prettierrc

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

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');
+	}
 })();

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();
+	}
 });

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"
 }

cmd/tools/vdoc/theme/index.html

@@ -1,63 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
+	<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" />
+		<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" />
+		{{ head_assets }}
+	</head>
 
-<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">
-  <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">
-  {{ head_assets }}
-</head>
-
-<body>
-  <div><a id="skip-to-content-link" href="#main-content">Skip to content</a></div>
-  <div id="page">
-    <header class="doc-nav hidden">
-      <div class="heading-container">
-        <div class="heading">
-          <div class="info">
-            <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>
-            {{ menu_icon }}
-          </div>
-          <input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
-        </div>
-      </div>
-      <nav class="search hidden"></nav>
-      <nav class="content hidden">
-        <ul>
-          {{ toc_links }}
-        </ul>
-      </nav>
-    </header>
-    <div class="doc-scrollview" id="main-content">
-      <div class="doc-container">
-        <div class="doc-content">
-          {{ contents }}
-          <div class="footer">
-            {{ footer_content }}
-          </div>
-        </div>
-        {{ right_content }}
-      </div>
-    </div>
-  </div>
-  {{ footer_assets }}
-  <script async src="search_index.js"></script>
-</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">
+				<div class="heading-container">
+					<div class="heading">
+						<div class="info">
+							<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>
+							{{ menu_icon }}
+						</div>
+						<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off" />
+					</div>
+				</div>
+				<nav class="search hidden"></nav>
+				<nav class="content hidden">
+					<ul>
+						{{ toc_links }}
+					</ul>
+				</nav>
+			</header>
+			<div class="doc-scrollview" id="main-content">
+				<div class="doc-container">
+					<div class="doc-content">
+						{{ contents }}
+						<div class="footer">{{ footer_content }}</div>
+					</div>
+					{{ right_content }}
+				</div>
+			</div>
+		</div>
+		{{ footer_assets }}
+		<script async src="search_index.js"></script>
+	</body>
 </html>

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

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 {