extract notes (#140)

* extract notes

* description and spacing

* first note

src/components/FormattedDate.astro

@@ -1,7 +1,7 @@
 ---
 import { format } from "date-fns";
 
-const parseDateToString = (date: string): string => {
+export const parseDateToString = (date: string): string => {
   const d = new Date(date);
   const t = new Date(d.valueOf() + d.getTimezoneOffset() * 60 * 1000);
   return format(t, "yyyy-MM-dd");

src/content/config.ts

@@ -1,5 +1,12 @@
 import { defineCollection, z } from "astro:content";
 
+const notes = defineCollection({
+  type: "content",
+  schema: z.object({
+    published: z.coerce.date(),
+  }),
+});
+
 const pages = defineCollection({
   type: "content",
   schema: z.object({
@@ -12,4 +19,4 @@ const pages = defineCollection({
   }),
 });
 
-export const collections = { pages };
+export const collections = { notes, pages };

src/content/notes/2024-01-25-1.md

@@ -0,0 +1,5 @@
+---
+published: 2024-01-25T09:15:49-0500
+---
+
+Moved [notes](https://github.com/alexcarpenter/alexcarpenter.me/pull/140) to its own collection. This adds a bit more flexibility for authoring notes that I was looking for. I can now create multiple paragraphs, blockquotes, and code blocks, etc.

src/content/pages/notes.md → src/content/pages/notes-archive.md

@@ -1,9 +1,10 @@
 ---
-title: Notes
+title: Notes archive
 description: Short-form thoughts and updates
 published: 2023-12-31
 updated: 2024-01-21
-pinned: true
+# pinned: true
+draft: true
 ---
 
 2024-01-23

src/pages/index.astro

@@ -11,6 +11,10 @@ const pages = await getCollection("pages", ({ data }) => {
   <section>
     <h2 class="mb-2 font-bold">Pinned</h2>
     <ul class="-mb-2 divide-y divide-dashed border-t-2">
+      <li class="flex gap-6 py-2">
+        <FormattedDate date={new Date()} class="flex-shrink-0 text-secondary" />
+        <a href="/notes" class="underline"> Notes</a>
+      </li>
       {
         pages
           .filter((page) => page.data.pinned)

src/pages/notes.astro

@@ -0,0 +1,57 @@
+---
+import Base from "@/layouts/BaseLayout.astro";
+import FormattedDate, {
+  parseDateToString,
+} from "@/components/FormattedDate.astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+type NoteProps = CollectionEntry<"notes">;
+const notes = await getCollection("notes");
+const sortedNotes = notes.sort((a, b) => {
+  const aDate = a.data.published;
+  const bDate = b.data.published;
+  return Date.parse(bDate.toString()) - Date.parse(aDate.toString());
+});
+const groupedNotes = groupByDay(sortedNotes);
+function groupByDay(items: NoteProps[]): Record<string, NoteProps[]> {
+  const grouped: Record<string, NoteProps[]> = {};
+  items.forEach((item) => {
+    const key = parseDateToString(item.data.published.toString());
+    if (!grouped[key]) {
+      grouped[key] = [];
+    }
+    grouped[key].push(item);
+  });
+  return grouped;
+}
+---
+
+<Base>
+  <header class="relative mb-6 border-b-2 pb-2 pr-12">
+    <h1 class="font-bold">Notes</h1>
+    <p class="text-pretty text-secondary">Short-form thoughts and updates</p>
+  </header>
+  <main class="flex-grow">
+    <div class="prose">
+      <dl>
+        {
+          Object.entries(groupedNotes).map(([date, notes]) => {
+            return (
+              <>
+                <dt id={date}>
+                  <FormattedDate date={new Date(date)} />
+                </dt>
+                {notes.map((note) =>
+                  note.render().then(({ Content }) => (
+                    <dd class="grid gap-y-2">
+                      <Content />
+                    </dd>
+                  ))
+                )}
+              </>
+            );
+          })
+        }
+      </dl>
+    </div>
+  </main>
+</Base>