From c16375ca9033971919e0d6f36727377d1fdc1cc4 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 29 Jun 2024 19:15:59 -0500
Subject: [PATCH] Implement table of contents on markdown layout

---
 src/components/home/division.astro |   4 +-
 src/components/home/summary.astro  |   8 +-
 src/layouts/markdown.astro         | 126 ++++++++++++++++++-----------
 src/pages/about.mdx                |   2 +-
 4 files changed, 82 insertions(+), 58 deletions(-)

diff --git a/src/components/home/division.astro b/src/components/home/division.astro
index ff2c69b..15f8f93 100644
--- a/src/components/home/division.astro
+++ b/src/components/home/division.astro
@@ -73,12 +73,12 @@ const {
   
   <div
     style={{
-      display: 'flex',
+      display: 'grid',
       justifyItems: 'center',
       width: '100%',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
       gap: '1rem',
     }}
-    class="mobile-column"
   >
     {
       images.map((img) => (
diff --git a/src/components/home/summary.astro b/src/components/home/summary.astro
index 2e56551..fb4c182 100644
--- a/src/components/home/summary.astro
+++ b/src/components/home/summary.astro
@@ -1,5 +1,5 @@
 <div
-  style="width: 100%; padding: 4rem 3rem;  background-color: var(--primary);" class="font-unbounded mobile-column"
+  style="width: 100%; padding: 4rem 3rem; background-color: var(--primary);" class="font-unbounded"
 >
   <style>
     img {
@@ -13,16 +13,12 @@
       }
     }
   </style>
-  <div style="display: flex; align-items: center; justify-content: space-between; gap: 3rem; max-width: 75rem; margin: auto">
+  <div class="mobile-column" style="display: flex; align-items: center; justify-content: space-between; gap: 3rem; max-width: 75rem; margin: auto">
     <div style="display: flex; font-size: 1.25rem; flex-direction: column;" >
       <p>
         We are a group of students who are passionate about all things robots - from the mechanical aspects, to writing software, and all the things in between.
       </p>
       <br />
-      <p>
-        Our goal is to promote robotics at UT Dallas and in the surrounding area through outreach, projects and workshops.
-      </p>
-      <br />
       <p>
         Every Monday<a style="color: inherit;" href="#meeting-footnote"><sup>*</sup></a> at 7pm, we meet to learn and build all sorts of robots - for fun, and to compete in a variety of events.
       </p>
diff --git a/src/layouts/markdown.astro b/src/layouts/markdown.astro
index a7b1305..e0a626d 100644
--- a/src/layouts/markdown.astro
+++ b/src/layouts/markdown.astro
@@ -15,14 +15,13 @@ type Props = MarkdownLayoutProps<{
 
 const { title, subtitle } = Astro.props.frontmatter || Astro.props;
 
-const toc = Astro.props.headings.filter(h=>h.depth == 1)
+const toc = Astro.props.headings.filter(h=>h.depth <= 2)
 const renderTOC = toc.length > 1
-// TODO: TOC
 ---
 <BaseLayout title={title}>
   <div
     class="main-container"
-    style="padding: 120px 2rem; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column; text-align: center;"
+    style="padding: 120px 1rem; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column; text-align: center;"
   >
     <div
       style="display: flex; flex-direction:column; margin: auto; gap: 0.5rem; align-items: center;"
@@ -32,55 +31,84 @@ const renderTOC = toc.length > 1
         {subtitle}
       </h3>
     </div>
-    <div class="md-container"
-    >
-      <style is:global>
-        .md-container {
-          text-align: left;
-          background-color: var(--text);
-          margin: auto; 
-          margin-top: 5em; 
-          min-width: 10rem; 
-          max-width: 75rem; 
-          width: 100%; 
-          display: flex;
-          flex-direction: column;
-          gap: 1rem;
-          padding: 3.5em;
-          background-color: white;
-          border-radius: 1em;
-        }
-        
-        .md-container > h1 {
-          color: var(--primary); 
-          padding-top: 1rem;
-          font-family: 'Mashine', sans-serif;
-        }
-        
-        .md-container p, .md-container h2, .md-container h3, .md-container h4, .md-container h5, .md-container h6, .md-container ol, .md-container ul {
-          color: var(--text-dark);
+    {renderTOC && <style>
+      #content-container {
+        display: grid;
+        column-gap: 1rem;
+        row-gap: 4rem;
+      }
+    
+    @media (min-width: 900px) {
+        #content-container {
+            grid-template-columns: 1fr minmax(0, 3fr);
         }
         
-        .md-container p, .md-container ol, .md-container ul { 
-          font-size: 1.33rem;
-          line-height: 1.5;
+        #content-container > ol {
+          position: sticky; 
+          top: 130px;
+          height: min-content;
+          max-height: calc(100vh - 130px);
+          overflow: scroll;
         }
-        
-        .md-container h2, .md-container h3, .md-container h4, .md-container h5, .md-container h6 {
-          font-family: 'Unbounded Variable', sans-serif;
-          font-weight: 500;
-        }
-        
-        .end {
-          margin: 2rem 0;
-          background-color: var(--primary);
-          width: 2rem;
-          height: 0.5rem;
-        }
-      </style>
-      <slot />
-      <span class="end"/>
-    </div>
+    }
+    </style>}
+    
+    <div id="content-container" style="margin: 5em auto;">
+      {renderTOC && <ol class="font-unbounded" style="padding: 0; text-align: left; display: flex; gap: 0.35rem; flex-direction: column; padding-left: 2rem;">
+          {toc.map(entry=>(
+            <li style={`font-weight: ${entry.depth === 1 ? 600 : 400}; list-style-type: none;`}>
+              <a class="font-unbounded no-decoration" href={`#${entry.slug}`} style="color: #E1AAAF; ">
+                {entry.text}
+              </a>
+            </li>
+          ))}
+        </ol>}
+      <article class="markdown">
+        <style is:global>
+          .markdown {
+            text-align: left;
+            max-width: 75rem;
+            background-color: var(--text);
+            width: 100%; 
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 3.5em;
+            background-color: white;
+            border-radius: 1em;
+          }
+          
+          .markdown > h1 {
+            color: var(--primary); 
+            padding-top: 1rem;
+            font-family: 'Mashine', sans-serif;
+          }
+          
+          .markdown p, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6, .markdown ol, .markdown ul {
+            color: var(--text-dark);
+          }
+          
+          .markdown p, .markdown ol, .markdown ul { 
+            font-size: 1.33rem;
+            line-height: 1.5;
+          }
+          
+          .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
+            font-family: 'Unbounded Variable', sans-serif;
+            font-weight: 500;
+          }
+          
+          .end {
+            margin: 2rem 0;
+            background-color: var(--primary);
+            width: 2rem;
+            height: 0.5rem;
+          }
+        </style>
+        <slot />
+        <span class="end"/>
+      </article>
+    </div >
   </div>
   <Join theme="dark" />
 </BaseLayout>
diff --git a/src/pages/about.mdx b/src/pages/about.mdx
index 3437735..2dec11b 100644
--- a/src/pages/about.mdx
+++ b/src/pages/about.mdx
@@ -3,7 +3,7 @@ layout: ../layouts/markdown.astro
 title: About
 subtitle: More about the club and its history
 ---
-import {leadership} from '../data'
+import { leadership } from '../data'
 
 # Who we are