Add notes pages and first entry

Author: mcecode

src/content/notes/ui-design-fundamentals.md

@@ -0,0 +1,17 @@
+---
+title: UI Design Fundamentals
+dateCreated: 2023-06-23
+dateUpdated: 2023-06-23
+---
+
+- White space
+- Color
+- Contrast
+- Scale
+- Alignment
+- Typography
+- Visual hierarchy
+
+## References
+
+- <https://www.youtube.com/watch?v=tRpoI6vkqLs>

src/layout/article.astro

@@ -0,0 +1,7 @@
+---
+import "@styles/article.scss";
+---
+
+<article>
+  <slot />
+</article>

src/pages/notes.astro

@@ -0,0 +1,32 @@
+---
+import { getCollection } from "astro:content";
+
+import PostItem from "@components/ui/post-item.astro";
+import Layout from "@layout/layout.astro";
+
+const notes = await getCollection("notes");
+---
+
+<Layout title="Notes">
+  <h1 class="smaller-spacing">Notes</h1>
+  <p class="larger-spacing">
+    Short notes, reminders, or checklists for myself that might also be useful
+    to you
+  </p>
+  <ul>
+    {
+      notes
+        .sort(
+          (a, b) => b.data.dateCreated.getTime() - a.data.dateCreated.getTime()
+        )
+        .map(({ slug, data: { title, dateCreated, dateUpdated } }) => (
+          <PostItem
+            {title}
+            {dateCreated}
+            {dateUpdated}
+            link={`/notes/${slug}`}
+          />
+        ))
+    }
+  </ul>
+</Layout>

src/pages/notes/[slug].astro

@@ -0,0 +1,31 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+import { getCollection } from "astro:content";
+
+import Time from "@components/ui/time.astro";
+import Article from "@layout/article.astro";
+import Layout from "@layout/layout.astro";
+
+export async function getStaticPaths() {
+  return (await getCollection("notes")).map((note) => ({
+    params: { slug: note.slug },
+    props: { note }
+  }));
+}
+
+type Props = { note: CollectionEntry<"notes"> };
+const { note } = Astro.props;
+const { Content } = await note.render();
+---
+
+<Layout title={note.data.title}>
+  <Article>
+    <h1 class="smaller-spacing">{note.data.title}</h1>
+    <p class="small-text larger-spacing">
+      Created: <Time date={note.data.dateCreated} /> | Updated:
+      <Time date={note.data.dateUpdated} />
+    </p>
+    <Content />
+  </Article>
+</Layout>

src/styles/article.scss

@@ -0,0 +1,11 @@
+article {
+  h2 {
+    font-weight: 500;
+  }
+  ul {
+    margin-bottom: v-size(8, "em");
+  }
+  li {
+    list-style: circle inside;
+  }
+}

src/styles/global.scss

@@ -127,6 +127,12 @@ path {
 h1.larger-spacing {
   margin-bottom: v-size(5, "em");
 }
+h1.smaller-spacing {
+  margin-bottom: v-size(1, "em");
+}
+p.larger-spacing {
+  margin-bottom: v-size(8, "em");
+}
 
 @include m-medium {
   .small-text {