refactor(html): move more tailwind usage to defined classes

src/html/comrak_adapters.rs

@@ -59,7 +59,7 @@ impl HighlightAdapter {
 
     if self.show_line_numbers {
       Ok(format!(
-        r##"<div class="border-r-2 border-stone-300 pr-1 text-right flex-none">{line_numbers}</div><div class="grow overflow-x-auto">{lines}</div>"##
+        r##"<div class="lineNumbers">{line_numbers}</div><div class="grow overflow-x-auto">{lines}</div>"##
       ))
     } else {
       Ok(lines)

src/html/jsdoc.rs

@@ -377,17 +377,15 @@ pub fn markdown_to_html(
     if toc.is_empty() {
       None
     } else {
-      let mut toc_content = vec![String::from(
-        r#"<ul class="space-y-2 block overflow-y-auto h-full">"#,
-      )];
+      let mut toc_content = vec![String::from(r#"<nav class="toc"><ul>"#)];
 
       let mut current_level = 1;
 
       for (level, heading, anchor) in toc {
         match current_level.cmp(&level) {
           Ordering::Equal => {}
           Ordering::Less => {
-            toc_content.push(r#"<li><ul class="ml-4 space-y-2">"#.to_string());
+            toc_content.push(r#"<li><ul>"#.to_string());
             current_level = level;
           }
           Ordering::Greater => {
@@ -397,11 +395,11 @@ pub fn markdown_to_html(
         }
 
         toc_content.push(format!(
-          r##"<li><a class="hover:underline block overflow-x-hidden whitespace-nowrap text-ellipsis" href="#{anchor}" title="{heading}">{heading}</a></li>"##
+          r##"<li><a href="#{anchor}" title="{heading}">{heading}</a></li>"##
         ));
       }
 
-      toc_content.push(String::from("</ul>"));
+      toc_content.push(String::from("</ul></nav>"));
 
       Some(toc_content.join(""))
     }

src/html/templates/anchor.hbs

@@ -1,8 +1,3 @@
-<a
-  href="#{{id}}"
-  class="anchor float-left leading-none hidden text-stone-600 ml-[-24px] p-1 pr-1 pt-1 top-0 bottom-0"
-  aria-label="Anchor"
-  tabIndex=-1
->
+<a href="#{{id}}" class="anchor" aria-label="Anchor" tabIndex="-1">
   {{~> icons/link ~}}
 </a>

src/html/templates/breadcrumbs.hbs

@@ -1,4 +1,4 @@
-<ul class="whitespace-nowrap inline-flex gap-1 items-center *:py-1 *:px-2">
+<ul class="breadcrumbs">
   {{~#each parts~}}
     {{~#if this.is_first_symbol~}}
       <ul>
@@ -8,7 +8,7 @@
 	    {{~#if @last~}}
 	      {{~this.name~}}
       {{~else~}}
-	      <a class="text-breadcrumb underline decoration-[1.5px] decoration-breadcrumb/50 underline-offset-4 hover:decoration-breadcrumb" href="{{this.href}}">
+	      <a href="{{this.href}}">
 		      {{~this.name~}}
 	      </a>
 			{{~/if~}}
@@ -18,7 +18,7 @@
 		  {{~#if this.is_symbol~}}
 			  <span>.</span>
 			  {{~else~}}
-			  <span class="!p-0 text-[#0F172A]">{{~> icons/arrow ~}}</span>
+			  <span class="text-[#0F172A]">{{~> icons/arrow ~}}</span>
 		  {{~/if~}}
 	  {{/unless}}
 

src/html/templates/deprecated.hbs

@@ -1,15 +1,9 @@
 {{~#if (ne this null)~}}
-  <div>
-    <div class="py-1 text-red-500 flex gap-1 items-center">
-          <span class="font-semibold leading-6">
-            Deprecated
-          </span>
-    </div>
+  <div class="deprecated">
+    <div><span>Deprecated</span></div>
 
     {{~#if (ne this "")~}}
-      <div class="ml-1 pl-2 border-l-4 border-red-300">
-        {{{this}}} {{! markdown rendering }}
-      </div>
+      <div>{{{this}}} {{! markdown rendering }}</div>
     {{~/if~}}
   </div>
 {{~/if~}}

src/html/templates/doc_block_subtitle_class.hbs

@@ -1,6 +1,6 @@
 {{~#if implements~}}
   <div>
-    <span class="text-stone-400 italic"> implements </span>
+    <span class="type"> implements </span>
     {{~#each implements~}}
       {{{~this~}}} {{! typedef rendering }}
       {{~#unless @last~}}
@@ -12,7 +12,7 @@
 
 {{~#with extends~}}
   <div>
-    <span class="text-stone-400 italic"> extends </span>
+    <span class="type"> extends </span>
     {{~#if href ~}}
       <a class="link" href="{{href}}">
         {{~symbol~}}

src/html/templates/doc_block_subtitle_interface.hbs

@@ -1,5 +1,5 @@
 <div>
-  <span class="text-stone-400 italic"> extends </span>
+  <span class="type"> extends </span>
   {{~#each extends~}}
     {{{~this~}}} {{! typedef rendering }}
     {{~#unless @last~}}

src/html/templates/doc_entry.hbs

@@ -1,8 +1,8 @@
-<div class="anchorable text-sm" id="{{id}}">
+<div class="anchorable docEntry" id="{{id}}">
   {{~> anchor anchor ~}}
 
-  <div class="flex justify-between items-start">
-    <span class="flex items-center break-words gap-2">
+  <div class="docEntryHeader">
+    <span>
       {{~#if tags~}}
         <span class="space-x-1">
           {{~#each tags~}}

src/html/templates/doc_node_kind_icon.hbs

@@ -1,6 +1,6 @@
-<div class="flex justify-end compound_types w-[2.125rem] shrink-0">
+<div class="docNodeKindIcon">
   {{~#each this~}}
-    <div class="text-{{this.kind}} bg-{{this.kind}}/15 rounded-full size-5 font-medium text-xs leading-5 text-center align-middle shrink-0 select-none font-mono" title="{{this.title}}">
+    <div class="text-{{this.kind}} bg-{{this.kind}}/15" title="{{this.title}}">
       {{~this.char~}}
     </div>
   {{~/each~}}

src/html/templates/example.hbs

@@ -1,9 +1,9 @@
-<div class="anchorable">
+<div class="anchorable example">
   {{~> anchor anchor ~}}
 
-  <details id="{{id}}" class="group" open>
-    <summary class="list-none flex items-center gap-2 py-2 rounded-lg w-full leading-6 cursor-pointer">
-      <div class="text-stone-600 group-open:rotate-90 select-none">&#x25B6;</div>
+  <details id="{{id}}" open>
+    <summary>
+      <div>&#x25B6;</div>
       {{{~markdown_title~}}} {{! markdown rendering }}
     </summary>
     <div class="!ml-2 markdown_border">

src/html/templates/function.hbs

@@ -7,7 +7,7 @@
 
 <div class="space-y-2">
   {{~#each overloads_ctx~}}
-    <label for="{{this.overload_id}}" class="space-y-1 block px-4 py-2.5 rounded-lg border border-stone-300 cursor-pointer hover:bg-stone-100">
+    <label for="{{this.overload_id}}" class="functionOverload">
       {{~> deprecated this.deprecated ~}}
       <code class="text-sm">
         <span class="font-bold">{{this.name}}</span><span class="font-medium">{{{this.summary}}} {{! typedef rendering }}</span>

src/html/templates/index_sidepanel.hbs

@@ -7,7 +7,7 @@
     {{~/if~}}
 
     {{~#if files~}}
-      <h3 class="title">Modules</h3>
+      <h2>Modules</h2>
       <ul>
         {{#each files}}
           <li>
@@ -20,11 +20,11 @@
     {{~/if~}}
 
     {{~#if kind_partitions~}}
-      <h3 class="title">APIs</h3>
+      <h2>APIs</h2>
       <ul class="space-y-2">
         {{~#each kind_partitions~}}
           <li>
-            <h4 class="subtitle">{{this.name}}</h4>
+            <h3>{{this.name}}</h3>
             <ul>
               {{~#each this.symbols~}}
                 <li>

src/html/templates/module_doc.hbs

@@ -1,4 +1,4 @@
-<section {{#if toc}}class="flex max-lg:flex-col-reverse gap-6"{{/if}}>
+<section {{#if toc}}class="tocable"{{/if}}>
   <div class="space-y-2 flex-1 {{#if toc}}min-w-0{{/if}}">
     {{~#if title~}}
       <h2 class="text-lg font-semibold font-mono">{{title}}</h2>
@@ -15,8 +15,6 @@
   </div>
 
   {{~#if toc~}}
-    <nav class="flex-none max-w-52 text-sm max-lg:hidden sticky top-0 py-4 max-h-screen box-border">
-      {{{~toc~}}} {{! markdown rendering ToC }}
-    </nav>
+    {{{~toc~}}} {{! markdown rendering ToC }}
   {{~/if~}}
 </section>

src/html/templates/namespace_section.hbs

@@ -1,28 +1,20 @@
-<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+<div class="namespaceSection">
   {{~#each this~}}
-    <div class="space-y-2 {{#if this.deprecated}}opacity-60{{/if}}">
-      <div class="flex gap-2 items-center">
-        {{!-- TODO: figure out design of tags in namespace view
-        {{~#if tags~}}
-          <span class="space-x-1">
-            {{~#each tags~}}
-              {{~> tag value=this ~}}
-            {{~/each~}}
-          </span>
-        {{~/if~}} --}}
+    <div class="namespaceItem" {{#if this.deprecated}}aria-label="deprecated"{{/if}}>
+      <div class="namespaceItemTitle">
         {{~> doc_node_kind_icon this.doc_node_kind_ctx ~}}
 
-        <div class="flex justify-between gap-4 flex-1 min-w-0 items-end overflow-hidden">
-          <a href="{{this.href}}" class="leading-tight truncate {{#if this.deprecated}}line-through decoration-2 decoration-stone-500/70 text-stone-500{{/if}}" title="{{this.name}}">
+        <div>
+          <a href="{{this.href}}" title="{{this.name}}">
             {{~this.name~}}
           </a>
 
           {{~#if this.origin_name~}}
-            <div class="text-xs italic lg:mr-4 text-stone-400 truncate" title="{{this.origin_name}}">from {{this.origin_name}}</div>
+            <div title="{{this.origin_name}}">from {{this.origin_name}}</div>
           {{~/if~}}
         </div>
       </div>
-      <div class="block py-1 text-sm leading-5 text-stone-600 !ml-2 markdown_border">
+      <div class="namespaceItemContent">
         {{~#if this.docs~}}
           {{{~this.docs~}}} {{! markdown rendering }}
         {{~else~}}