DrewMcArthur · DrewMcArthur · Mar 27, 2025 · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,11 +17,11 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "astro": "^5.5.4",
+    "astro": "^5.12.8",
     "astro-compress": "^2.3.6",
     "astro-purgecss": "^5.2.2",
     "purgecss": "^7.0.2",
     "simple-icons": "^11.12.0",
     "typescript": "^5.2.2"
   }
-}
+}
diff --git a/src/components/App.astro b/src/components/App.astro
@@ -1,13 +1,8 @@
 ---
-import About from "./About.astro";
 import Header from "./Header.astro";
-import SocialLinks from "./SocialLinks.astro";
 ---
 
 <aside class="sidebar">
   <Header />
 </aside>
-<main id="app" class="content">
-  <About />
-  <SocialLinks />
-</main>
+<main id="app" class="content"><slot /></main>
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
@@ -0,0 +1,12 @@
+---
+const { post } = Astro.props;
+const { title, description, slug } = post.data;
+import "../styles/blog/card.css";
+---
+
+<a href=`/writing/${slug}`>
+  <li class="blog-card">
+    <h3>{title}</h3>
+    <p class="description">{description}</p>
+  </li>
+</a>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,5 +1,9 @@
 ---
-
+const isHome = Astro.url.pathname === "/";
+const sectionChar = isHome ? "#" : "/#";
+function linkTo(header: string) {
+  return `${sectionChar}${header}`;
+}
 ---
 
 <header class="main-header">
@@ -12,8 +16,9 @@
     <div class="header-title">Hi, I'm Drew!</div>
   </div>
   <div class="section-headers">
-    <a href="#about" class="about active">About</a>
-    <a href="#links" class="links">Connect</a>
+    <a href={linkTo("about")} class="about active">About</a>
+    <a href={linkTo("writing")} class="writing">Writing</a>
+    <a href={linkTo("links")} class="links">Connect</a>
   </div>
   <div class="backdrop"></div>
 </header>

diff --git a/src/components/Home.astro b/src/components/Home.astro
@@ -0,0 +1,11 @@
+---
+import About from "./About.astro";
+import SocialLinks from "./SocialLinks.astro";
+import Writing from "./Writing.astro";
+---
+
+<>
+  <About />
+  <Writing />
+  <SocialLinks />
+</>
diff --git a/src/components/Writing.astro b/src/components/Writing.astro
@@ -0,0 +1,14 @@
+---
+import { getCollection } from "astro:content";
+import BlogCard from "./BlogCard.astro";
+
+const posts = await getCollection("blog");
+---
+
+<section id="writing" class="writing">
+  <h2>Writing</h2>
+  <ul class="writing">
+    {posts.map((post) => <BlogCard post={post} />)}
+    <li class="blog-card">...and more coming soon!</li>
+  </ul>
+</section>
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -0,0 +1,15 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const blog = defineCollection({
+  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
+  schema: z.object({
+    title: z.string(),
+    slug: z.string(),
+    description: z.string(),
+    pubDate: z.coerce.date(),
+    tags: z.array(z.string()),
+  }),
+});
+
+export const collections = { blog };
diff --git a/src/content/blog/inflationary-equity.md b/src/content/blog/inflationary-equity.md
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
@@ -0,0 +1,36 @@
+---
+import App from "../components/App.astro";
+import "../styles/main.css";
+import "../styles/desktop.css";
+---
+
+<html lang="en">
+  <head>
+    <title>drew mca | drewmca.dev</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Homepage for Drew McArthur, @drewmca.dev.  A software engineer, media scholar, and systems thinker."
+    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta
+      name="theme-color"
+      content="#FAF0E6"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#292726"
+      media="(prefers-color-scheme: dark)"
+    />
+  </head>
+  <body>
+    <App>
+      <slot />
+    </App>
+  </body>
+</html>
diff --git a/src/layouts/post.astro b/src/layouts/post.astro
@@ -0,0 +1,10 @@
+---
+import BaseLayout from "../layouts/base.astro";
+const { title } = Astro.props;
+// todo: made this a little wider
+---
+
+<BaseLayout>
+  <h2>{title}</h2>
+  <slot />
+</BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,33 +1,9 @@
 ---
-import App from "../components/App.astro";
+import Home from "../components/Home.astro";
 import "../styles/main.css";
+import BaseLayout from "../layouts/base.astro";
 ---
 
-<html lang="en">
-  <head>
-    <title>drew mca | drewmca.dev</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Homepage for Drew McArthur, @drewmca.dev.  A software engineer, media scholar, and systems thinker."
-    />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <meta
-      name="theme-color"
-      content="#FAF0E6"
-      media="(prefers-color-scheme: light)"
-    />
-    <meta
-      name="theme-color"
-      content="#292726"
-      media="(prefers-color-scheme: dark)"
-    />
-  </head>
-  <body>
-    <App />
-  </body>
-</html>
+<BaseLayout>
+  <Home />
+</BaseLayout>
diff --git a/src/pages/writing/[slug].astro b/src/pages/writing/[slug].astro
@@ -0,0 +1,18 @@
+---
+import { getCollection, render } from "astro:content";
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+  return posts.map((post) => ({
+    params: { slug: post.data.slug },
+    props: { post },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { post } = Astro.props;
+const { Content } = await render(post);
+import PostLayout from "../../layouts/post.astro";
+import "../../styles/blog/post.css";
+---
+
+<PostLayout><Content /></PostLayout>
diff --git a/src/styles/blog/card.css b/src/styles/blog/card.css
@@ -0,0 +1,30 @@
+a:hover li {
+    box-shadow: -1px 0px 3px -1px var(--main-color);
+    border-radius: 3px;
+}
+
+ul.writing {
+    margin: 0;
+    padding-left: 5vw;
+}
+
+li.blog-card {
+    list-style: none;
+    border-left: 1px solid var(--main-color);
+    padding: 0.5em 1em;
+    margin-bottom: 1.5em;
+    transition: box-shadow .1s;
+    transition: border-radius .1s;
+}
+
+li.blog-card h3 {
+    margin: 0;
+}
+
+li.blog-card p.description {
+    font-size: 0.8em;
+    padding-left: 3vw;
+    margin: 0;
+    text-decoration: none;
+    font-style: italic;
+}
diff --git a/src/styles/blog/post.css b/src/styles/blog/post.css
@@ -0,0 +1,32 @@
+main {
+    font-size: 84%;
+}
+
+h1 {
+    line-height: 1.1em;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+    margin-bottom: 0
+}
+
+p {
+    text-align: justify;
+    text-indent: 5%;
+}
+
+pre {
+    text-align: center;
+    background-color: var(--background-color) !important;
+    color: var(--main-color) !important;
+}
+
+@media screen and (max-width: 768px) {
+    main.content {
+        padding-top: 10vh;
+    }
+}
diff --git a/src/styles/desktop.css b/src/styles/desktop.css
@@ -0,0 +1,5 @@
+@media screen and (min-width: 768px) {
+    aside {
+        min-height: 90vh;
+    }
+}
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -25,6 +25,8 @@
 
   /** animation timing **/
   --flyin-timing: cubic-bezier(0, 1, 0, 1);
+
+  --sidebar-width: 160px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -58,7 +60,7 @@ body {
   font-size: 120%;
   line-height: 1.6em;
 
-  max-width: 40em;
+  max-width: 45em;
   margin: auto;
   padding: 0 5vw;
   overflow-x: hidden;
@@ -128,7 +130,7 @@ a {
 }
 
 aside {
-  width: 200px;
+  width: var(--sidebar-width);
   padding-right: 20px;
   margin: 3vh 0;
   border-right: 1px solid var(--color3);
@@ -143,7 +145,7 @@ header {
   flex-direction: column;
   justify-content: center;
   text-align: right;
-  width: 200px;
+  width: var(--sidebar-width);
 }
 
 /* Section header styles */