From 53d6ee686dfb14731b9e06122fe1df53ba17728e Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Mon, 26 Aug 2024 09:36:52 -0500
Subject: [PATCH] feat: Improve sidebar on API docs

---
 public/css/global.css           |  2 +-
 public/css/pages.css            | 31 +++++++++++++++++++++++++------
 src/components/TOC.astro        |  1 +
 src/components/TOCHeading.astro | 11 ++++++++---
 src/pages/api/std/index.mdx     | 18 ++++++++++--------
 5 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/public/css/global.css b/public/css/global.css
index 30c5620..fec7533 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -51,7 +51,7 @@
         --c-primary: rgb(255, 180, 180);
         --c-pink: #374259;
         --c-link: #0284c7;
-        --c-border-1: #909090;
+        --c-border-1: #9090r0;
 
         --c-nav-bg: rgb(255, 247, 255, 0.5);
         --c-secondary: rgba(255, 255, 240, 0.5);
diff --git a/public/css/pages.css b/public/css/pages.css
index 881321e..655f022 100644
--- a/public/css/pages.css
+++ b/public/css/pages.css
@@ -1,5 +1,5 @@
 
-.markdown h1 {
+.markdown > h1 {
     font-size: 2.25rem;
     line-height: 2.5rem;
     margin-bottom: 1rem;
@@ -8,9 +8,10 @@
     opacity: 0.9;
     font-weight: 700;
     color: var(--c-text-2);
+    scroll-margin-top: 50px;
 }
 
-.markdown h2 {
+.markdown > h2 {
     /* use these tailwind classes: text-2xl mt-10 mb-4 font-display opacity-90 font-bold text-c-text-2 */
     font-size: 1.5rem;
     line-height: 2rem;
@@ -20,9 +21,10 @@
     opacity: 0.9;
     font-weight: 600;
     color: var(--c-text-2);
+    scroll-margin-top: 5rem;
 }
 
-.markdown h2::before {
+.markdown > h2::before {
     content: "#";
     display: block;
     height: 0;
@@ -31,7 +33,12 @@
     opacity: 0.2;
 }
 
-.markdown h3 {
+.markdown > h2:target::before {
+    color: var(--c-thp);
+    opacity: 1;
+}
+
+.markdown > h3 {
     font-size: 1.35rem;
     line-height: 1.75rem;
     margin-bottom: 1rem;
@@ -40,9 +47,10 @@
     opacity: 0.9;
     font-weight: 400;
     color: var(--c-text-2);
+    scroll-margin-top: 5rem;
 }
 
-.markdown h3::before {
+.markdown > h3::before {
     content: "##";
     display: block;
     height: 0;
@@ -51,6 +59,11 @@
     opacity: 0.2;
 }
 
+.markdown > h3:target::before {
+    color: var(--c-thp);
+    opacity: 1;
+}
+
 .markdown ul {
     list-style-type: disc;
     list-style-position: inside;
@@ -60,7 +73,7 @@
     padding: 0.5rem 0;
 }
 
-.markdown > p > code {
+.markdown p > code {
     border: solid 1px var(--c-border-1);
 }
 
@@ -83,4 +96,10 @@
 .two-column a {
     color: #2563eb;
     text-decoration: underline;
+    display: inline-block;
 }
+
+.two-column h3 {
+    margin: 0.75rem 0;
+}
+
diff --git a/src/components/TOC.astro b/src/components/TOC.astro
index 8f358e5..f92d88b 100644
--- a/src/components/TOC.astro
+++ b/src/components/TOC.astro
@@ -25,6 +25,7 @@ function buildHierarchy(headings: any) {
             parentHeadings.get(heading.depth - 1).subheadings.push(heading);
         }
     });
+
     return toc;
 }
 ---
diff --git a/src/components/TOCHeading.astro b/src/components/TOCHeading.astro
index bcca79c..6a61578 100644
--- a/src/components/TOCHeading.astro
+++ b/src/components/TOCHeading.astro
@@ -1,17 +1,22 @@
 ---
 // github.com/rezahedi/rezahedi.dev/blob/main/src/components/TOCHeading.astro
-const { heading } = Astro.props;
+const { heading, parentMono } = Astro.props;
+
+// If a heading starts with `API: `
+// then its children should be rendered with a mono font
+const isMono = heading.text.startsWith("API: ");
+const monoClass = parentMono? " font-mono" : "";
 ---
 
 <li>
-    <a class="inline-block py-1 hover:underline" href={"#" + heading.slug}>
+    <a class={"inline-block py-1 hover:underline" + monoClass} href={"#" + heading.slug}>
         {heading.text}
     </a>
     {
         heading.subheadings.length > 0 && (
             <ul class="px-2">
                 {heading.subheadings.map((subheading: any) => (
-                    <Astro.self heading={subheading} />
+                    <Astro.self heading={subheading} parentMono={isMono} />
                 ))}
             </ul>
         )
diff --git a/src/pages/api/std/index.mdx b/src/pages/api/std/index.mdx
index a3a5238..fb28b3b 100644
--- a/src/pages/api/std/index.mdx
+++ b/src/pages/api/std/index.mdx
@@ -61,38 +61,40 @@ val my_animal = 'animal()
 `} />
 
 
-## Datatypes
+## API: Datatypes
 
 <TwoColumn>
 
-[`Array[T]`](/api/std/Array/)
+### [`Array[T]`](/api/std/Array/)
 
 A uniform container of values or references.
 
-[`String`](/api/std/String/)
+### [`String`](/api/std/String/)
 
 A series of extended ASCII characters (8 bits).
 
-[`Int`](/api/std/Int/)
+### [`Int`](/api/std/Int/)
 
 An integer number.
 
-[`Float`](/api/std/Float/)
+### [`Float`](/api/std/Float/)
 
 A [IEEE 754](https://en.wikipedia.org/wiki/IEEE_754) double precision floating point number.
 
-[`Bool`](/api/std/Bool/)
+### [`Bool`](/api/std/Bool/)
 
 `true` or `false`
 
 </TwoColumn>
 
-## Global functions
+## API: Global functions
 
 <TwoColumn>
-[`print`](/api/std/print/)
+
+### [`print`](/api/std/print/)
 
 Prints text into stdout.
+
 </TwoColumn>