Merge pull request #10 from barrett-ruth/fix/styling

mobile styling

public/styles/common.css

@@ -217,6 +217,7 @@ footer {
   display: flex;
   justify-content: center;
   flex: 1;
+  width: 100%;
 }
 
 a {
@@ -234,6 +235,14 @@ li {
   background-size: 3vw 3vw;
 }
 
+html:has(body.graph-background) {
+  background-image:
+    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
+  background-size: 3vw 3vw;
+  background-color: var(--bg);
+}
+
 .terminal-cursor {
   display: inline-block;
   width: 10px;

public/styles/graph.css

@@ -96,7 +96,8 @@
 
 #romer-table th,
 #romer-table td {
-  border: 1px solid var(--border);
+  border: 1px solid var(--text);
+  background: var(--bg);
   text-align: center;
   padding: 5px;
 }

public/styles/index.css

@@ -5,6 +5,7 @@ body {
   overscroll-behavior: none;
   height: 100vh;
   overflow: hidden;
+  overflow-x: hidden;
 }
 
 .content {
@@ -73,12 +74,12 @@ ul {
 
 @media (max-width: 768px) {
   .topics {
-    font-size: 1.8em;
+    font-size: 2em;
     padding: 0 20px;
   }
 
   .posts {
-    font-size: 1.8em;
+    font-size: 1.47em;
     padding: 0 20px;
   }
 

public/styles/posts.css

@@ -2,12 +2,27 @@ li {
   margin: 5px 0;
 }
 
+.post-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+.toc-column {
+  position: absolute;
+  left: 2rem;
+  top: 0;
+  width: 200px;
+  padding-top: 190px;
+}
+
 .post-header {
   padding: 0;
 }
 
 .post-container {
-  width: 80%;
+  width: 65%;
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 .post-title {
@@ -143,16 +158,28 @@ article pre {
   font-size: 0.8em !important;
 }
 
+@media (max-width: 1200px) {
+  .toc-column {
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
+  .post-container {
+    width: 85%;
+  }
+
   .post-title {
-    font-size: 3em;
+    font-size: 1.8em;
+    margin: 30px 0;
   }
 
   .post-meta {
-    font-size: 1.6em;
+    font-size: 1.2em;
+    margin-left: 50px;
   }
 
   .post-article {
-    font-size: 1.3em;
+    font-size: 1.1em;
   }
 }

src/components/TableOfContents.astro

@@ -0,0 +1,78 @@
+---
+// Auto-generated TOC from MDX headings - Left sidebar
+interface Props {
+  headings: Array<{
+    depth: number;
+    slug: string;
+    text: string;
+  }>;
+}
+
+const { headings } = Astro.props;
+
+// Filter to only show h1 and h2
+const tocHeadings = headings.filter((h) => h.depth <= 2);
+---
+
+{
+  tocHeadings.length > 0 && (
+    <aside class="toc-sidebar">
+      <div class="toc-title">contents</div>
+      <nav class="toc-nav">
+        {tocHeadings.map((heading) => (
+          <a
+            href={`#${heading.slug}`}
+            class={heading.depth === 2 ? "sub" : "main"}
+          >
+            {heading.text}
+          </a>
+        ))}
+      </nav>
+    </aside>
+  )
+}
+
+<style>
+  .toc-sidebar {
+    width: 100%;
+  }
+
+  .toc-title {
+    font-weight: normal;
+    margin-bottom: 1rem;
+    text-align: left;
+    font-size: 1.5em;
+  }
+
+  .toc-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    align-items: flex-start;
+  }
+
+  .toc-nav a {
+    color: var(--text);
+    text-decoration: none;
+    line-height: 1.4;
+    text-align: left;
+  }
+
+  .toc-nav a:hover {
+    text-decoration: underline;
+  }
+
+  .toc-nav a.main {
+    padding-left: 0;
+  }
+
+  .toc-nav a.sub {
+    padding-left: 1.5rem;
+  }
+
+  @media (max-width: 1200px) {
+    .toc-sidebar {
+      display: none;
+    }
+  }
+</style>

src/content/algorithms/leetcode-daily.mdx

@@ -2,6 +2,7 @@
 title: "leetcode daily"
 date: "11/9/2024"
 useKatex: true
+showToc: true
 ---
 
 # [count good numbers](https://leetcode.com/problems/count-good-numbers)

src/content/algorithms/models-of-production.mdx

@@ -4,6 +4,7 @@ date: "22/06/2024"
 useKatex: true
 useD3: true
 scripts: ["/scripts/models-of-production.js"]
+showToc: true
 ---
 
 This post offers a basic introduction to the Solow, Romer, and Romer-Solow economic models, as taught by [Vladimir Smirnyagin](https://www.vladimirsmirnyagin.com/) and assisted by [Donghyun Suh](https://www.donghyunsuh.com/) in Intermediate Macroeconomics (ECON 3020) during the Spring semester of 2024 at the University of Virginia.

src/content/config.ts

@@ -8,6 +8,7 @@ const base = z.object({
   useD3: z.boolean().optional(),
   scripts: z.array(z.string()).optional(),
   redirect: z.string().optional(),
+  showToc: z.boolean().optional(),
 });
 
 export const collections = {

src/layouts/PostLayout.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
 import { getTopicColor } from "../utils/colors.js";
+import TableOfContents from "../components/TableOfContents.astro";
 
 interface Props {
   frontmatter: {
@@ -11,16 +12,28 @@ interface Props {
     useD3?: boolean;
     scripts?: string[];
     category?: string;
+    showToc?: boolean;
   };
   post?: {
     id?: string;
     collection?: string;
     slug?: string;
   };
+  headings?: Array<{
+    depth: number;
+    slug: string;
+    text: string;
+  }>;
 }
 
-const { frontmatter, post } = Astro.props as Props;
-const { title, description, useKatex = false, useD3 = false } = frontmatter;
+const { frontmatter, post, headings = [] } = Astro.props as Props;
+const {
+  title,
+  description,
+  useKatex = false,
+  useD3 = false,
+  showToc = false,
+} = frontmatter;
 
 let documentTitle = title;
 if (post?.collection === "git" && post?.slug) {
@@ -54,17 +67,27 @@ const topicColor = getTopicColor(post?.collection);
   </Fragment>
 
   <div
-    class="post-container"
+    class="post-wrapper"
     style={topicColor ? `--topic-color: ${topicColor};` : ""}
   >
-    <header class="post-header">
-      <h1 class="post-title">{title}</h1>
-      {frontmatter.date && <p class="post-meta">{frontmatter.date}</p>}
-    </header>
+    {
+      showToc && headings.length > 0 && (
+        <aside class="toc-column">
+          <TableOfContents headings={headings} />
+        </aside>
+      )
+    }
 
-    <article class="post-article">
-      <slot />
-    </article>
+    <div class="post-container">
+      <header class="post-header">
+        <h1 class="post-title">{title}</h1>
+        {frontmatter.date && <p class="post-meta">{frontmatter.date}</p>}
+      </header>
+
+      <article class="post-article">
+        <slot />
+      </article>
+    </div>
   </div>
 
   <Fragment slot="scripts">

src/pages/[category]/[slug].astro

@@ -32,7 +32,7 @@ interface Props {
 
 const { post } = Astro.props;
 const category = Astro.params.category;
-const { Content } = await post.render();
+const { Content, headings } = await post.render();
 const pageTitle = `${category}/${post.data.title ?? post.slug}`;
 
 if (post.data?.redirect) {
@@ -40,7 +40,7 @@ if (post.data?.redirect) {
 }
 ---
 
-<PostLayout frontmatter={post.data} post={post}>
+<PostLayout frontmatter={post.data} post={post} headings={headings}>
   <Fragment slot="head">
     <title>{pageTitle}</title>
     <script src="/scripts/index.js" is:inline></script>