vdoc: fancier attributes (#10789)

cmd/tools/vdoc/html.v

@@ -441,9 +441,9 @@ fn doc_node_html(dn doc.DocNode, link string, head bool, include_examples bool,
 	highlighted_code := html_highlight(dn.content, tb)
 	node_class := if dn.kind == .const_group { ' const' } else { '' }
 	sym_name := get_sym_name(dn)
-	mut tags := dn.tags
+	has_deprecated := 'deprecated' in dn.tags
+	mut tags := dn.tags.filter(it != 'deprecated')
 	tags.sort()
-	tags_str := ' ' + tags.map('<span class="$it-attribute-tag">[$it]</span>').join('') + ' '
 	mut node_id := get_node_id(dn)
 	mut hash_link := if !head { ' <a href="#$node_id">#</a>' } else { '' }
 	if head && is_module_readme(dn) {
@@ -453,15 +453,24 @@ fn doc_node_html(dn doc.DocNode, link string, head bool, include_examples bool,
 	dnw.writeln('${tabs[1]}<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$tags_str$hash_link</$head_tag>')
+			dnw.write_string('${tabs[2]}<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$tags_str$hash_link</$head_tag>')
+			dnw.write_string('${tabs[2]}<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>')
 		}
 		dnw.write_string('</div>')
 	}
+	if tags.len > 0 || has_deprecated {
+		mut attributes := if has_deprecated {
+			'<div class="attribute attribute-deprecated">deprecated</div>'
+		} else {
+			''
+		}
+		attributes += tags.map('<div class="attribute">$it</div>').join('')
+		dnw.writeln('<div class="attributes">$attributes</div>')
+	}
 	if !head && dn.content.len > 0 {
 		dnw.writeln('<pre class="signature"><code>$highlighted_code</code></pre>')
 	}

cmd/tools/vdoc/resources/doc.css

@@ -33,6 +33,9 @@
   --code-punctuation-text-color: #999999;
   --code-symbol-text-color: #702459;
   --code-operator-text-color: #a67f59;
+  --attribute-deprecated-background-color: #f59f0b48;
+  --attribute-deprecated-text-color: #92400e;
+  --attribute-text-color: #000000af;
 }
 :root.dark .dark-icon {
   display: none;
@@ -73,13 +76,17 @@
   --code-comment-text-color: #a0aec0;
   --code-punctuation-text-color: #a0aec0;
   --code-symbol-text-color: #ed64a6;
+  --attribute-background-color: #ffffff20;
+  --attribute-text-color: #ffffffaf;
+  --attribute-deprecated-text-color: #fef3c7;
 }
 html {
   height: 100%;
 }
 body {
   margin: 0;
-	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: Roboto, -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;
@@ -177,13 +184,24 @@ 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 > .heading > .info > .toggle-version-container > #dark-mode-toggle > svg {
+.doc-nav
+  > .heading-container
+  > .heading
+  > .info
+  > .toggle-version-container
+  > #dark-mode-toggle
+  > svg {
   width: 1.2rem;
   height: 1.2rem;
 }
@@ -307,7 +325,8 @@ body {
   font-weight: 500;
 }
 .doc-nav > .search .result > .link > .description {
-	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: Roboto, -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;
@@ -383,6 +402,21 @@ body {
   border-bottom: 1px solid #f1f5f8;
   border-bottom: 1px solid var(--title-bottom-line-color);
 }
+.doc-content > .doc-node > .attributes {
+  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;
+}
+.doc-content > .doc-node > .attributes > .attribute-deprecated {
+  background-color: var(--attribute-deprecated-background-color);
+  color: var(--attribute-deprecated-text-color);
+}
 .doc-content > .doc-node > .title > .link {
   display: flex;
   margin-left: auto;
@@ -501,7 +535,9 @@ body {
 }
 
 /* Code highlight */
-pre, code, pre code {
+pre,
+code,
+pre code {
   color: #5c6e74;
   color: var(--code-default-text-color);
   font-size: 0.948em;
@@ -538,11 +574,11 @@ pre {
   margin: 0;
 }
 .namespace {
-  opacity: .7;
+  opacity: 0.7;
 }
 .token.comment {
   color: #93a1a1;
-  color: var(--code-comment-text-color)
+  color: var(--code-comment-text-color);
 }
 .token.punctuation {
   color: #999999;
@@ -578,11 +614,6 @@ pre {
   color: var(--code-function-text-color);
 }
 
-/* Attribute tag colors */
-.attribute-tag {
-  color: red !important;
-}
-
 /* Medium screen and up */
 @media (min-width: 768px) {
   *::-webkit-scrollbar {
@@ -660,7 +691,12 @@ 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,

vlib/v/doc/doc.v

@@ -265,9 +265,6 @@ pub fn (mut d Doc) stmt(stmt ast.Stmt, filename string) ?DocNode {
 			if stmt.is_unsafe {
 				node.tags << 'unsafe'
 			}
-			if node.tags.len > 0 {
-				eprintln(node.tags)
-			}
 			node.kind = .function
 			node.return_type = d.type_to_str(stmt.return_type)
 			if stmt.receiver.typ !in [0, 1] {