vdoc: refactor theme files (#19024)

Author: ttytm

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