Add writings

Author: mcecode

src/components/page/header.astro

@@ -59,6 +59,7 @@ import {
       <li><a href="/">About</a></li>
       <li><a href="/projects">Projects</a></li>
       <li><a href="/notes">Notes</a></li>
+      <li><a href="/writings">Writings</a></li>
     </ul>
   </nav>
   <template id={modeTemplateId}>

src/content/config.ts

@@ -11,5 +11,16 @@ export const collections = {
       })
       .required()
       .strict()
+  }),
+  writings: defineCollection({
+    type: "content",
+    schema: z
+      .object({
+        title: z.string(),
+        dateCreated: z.date(),
+        dateUpdated: z.date()
+      })
+      .required()
+      .strict()
   })
 };

src/pages/notes/[slug].astro

@@ -20,7 +20,7 @@ const { Content } = await note.render();
 const { title, dateCreated, dateUpdated } = note.data;
 ---
 
-<Page title={title}>
+<Page {title}>
   <Article>
     <h1 class="smaller-spacing">{title}</h1>
     <CreatedUpdatedTime

src/pages/writings.astro

@@ -0,0 +1,31 @@
+---
+import { getCollection } from "astro:content";
+
+import PostItem from "@components/post-item.astro";
+import Page from "@layout/page.astro";
+
+const writings = await getCollection("writings");
+---
+
+<Page title="Writings">
+  <h1 class="smaller-spacing">Writings</h1>
+  <p class="larger-spacing">
+    Longer form writings, essays, or ramblings that you might be interested in
+  </p>
+  <ul>
+    {
+      writings
+        .sort(
+          (a, b) => b.data.dateCreated.getTime() - a.data.dateCreated.getTime()
+        )
+        .map(({ slug, data: { title, dateCreated, dateUpdated } }) => (
+          <PostItem
+            {title}
+            {dateCreated}
+            {dateUpdated}
+            link={`/writings/${slug}`}
+          />
+        ))
+    }
+  </ul>
+</Page>

src/pages/writings/[slug].astro

@@ -0,0 +1,33 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+import { getCollection } from "astro:content";
+
+import CreatedUpdatedTime from "@components/created-updated-time.astro";
+import Article from "@layout/article.astro";
+import Page from "@layout/page.astro";
+
+export async function getStaticPaths() {
+  return (await getCollection("writings")).map((writing) => ({
+    params: { slug: writing.slug },
+    props: { writing }
+  }));
+}
+
+type Props = { writing: CollectionEntry<"writings"> };
+const { writing } = Astro.props;
+const { Content } = await writing.render();
+const { title, dateCreated, dateUpdated } = writing.data;
+---
+
+<Page {title}>
+  <Article>
+    <h1 class="smaller-spacing">{title}</h1>
+    <CreatedUpdatedTime
+      class="small-text larger-spacing"
+      created={dateCreated}
+      updated={dateUpdated}
+    />
+    <Content />
+  </Article>
+</Page>

src/styles/header.scss

@@ -28,8 +28,9 @@ $initialLogoMenuWidth: v-size(14);
     margin-left: v-size(4);
   }
 
-  // NOTE: Change to 'm-large' when more nav items are added
-  @include m-small {
+  // NOTE: The included media query may need to be updated when the number of
+  // nav items is updated.
+  @include m-large {
     .header {
       grid-template-columns: 1fr 2fr;
       justify-items: end;
@@ -98,7 +99,8 @@ $initialLogoMenuWidth: v-size(14);
     }
   }
 
-  // NOTE: Change to 'm-large' when more nav items are added
+  // NOTE: The included media query may need to be updated when the number of
+  // nav items is updated.
   @include m-medium {
     .header {
       grid-template-columns: 1fr 2fr 1fr;