fix: apply misc fixes from 4323247

src/comps/Footer.astro

@@ -2,7 +2,7 @@
 <style>
   footer {
     padding: var(--spacing-padding);
-    max-width: var(--spacing-content-width);
+    max-width: var(--size-content-width);
     margin: 0 auto;
     text-align: center;
   }

src/comps/Head.astro

@@ -9,6 +9,7 @@ interface Props {
 let { title = "", description = SITE_DESCRIPTION } = Astro.props;
 if (title) title += " - ";
 title += SITE_TITLE;
+title = title.toLowerCase();
 ---
 
 <meta charset="utf-8" />
@@ -34,3 +35,9 @@ title += SITE_TITLE;
 
 <meta name="theme-color" content="#1676e8" />
 <link rel="me" href="https://tilde.zone/@bricked" />
+<link
+  rel="alternate"
+  type="application/rss+xml"
+  title={SITE_TITLE}
+  href={new URL("/blog/rss.xml", Astro.site)}
+/>

src/comps/Header.astro

@@ -7,7 +7,7 @@
   <style>
     header {
       width: 100%;
-      max-width: var(--spacing-content-width);
+      max-width: var(--size-content-width);
       padding: var(--spacing-padding);
       margin: 0 auto;
     }

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

@@ -1,6 +1,6 @@
 ---
 import { CollectionEntry, getCollection } from "astro:content";
-import BlogPost from "@layouts/BlogPost.astro";
+import Layout from "@layouts/Layout.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -13,8 +13,22 @@ type Props = CollectionEntry<"blog">;
 
 const post = Astro.props;
 const { Content } = await post.render();
+
+const formatDate = (date: Date) =>
+  date.toLocaleString("en-GB", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
 ---
 
-<BlogPost {...post.data} slug={post.slug}>
-  <Content />
-</BlogPost>
+<Layout {...post.data}>
+  <header>
+    published {formatDate(post.data.pubDate)}{
+      post.data.updatedDate &&
+        `, last updated ${formatDate(post.data.updatedDate)}`
+    }
+  </header>
+  <article>
+    <Content />
+  </article>
+</Layout>

src/pages/blog/index.astro

@@ -1,21 +1,54 @@
 ---
 import Layout from "@layouts/Layout.astro";
-import { SITE_DESCRIPTION } from "@src/consts";
 import { getCollection } from "astro:content";
 
 const posts = (await getCollection("blog")).sort(
   (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
 );
+const formatDate = (date: Date) =>
+  date.toLocaleString("en-GB", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
 ---
 
 <Layout title="blog">
-  <ul>
+  <div class="article-list">
     {
       posts.map((post) => (
-        <li>
-          <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
-        </li>
+        <article>
+          <a href={`/blog/${post.slug}/`}>
+            <h2>{post.data.title}</h2>
+          </a>
+          {post.data.description}
+          <footer>
+            published {formatDate(post.data.pubDate)}
+            {post.data.updatedDate &&
+              `, last updated ${formatDate(post.data.updatedDate)}`}
+          </footer>
+        </article>
       ))
     }
-  </ul>
+  </div>
 </Layout>
+
+<style>
+  h2 {
+    margin: 0;
+  }
+  .article-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-gap);
+  }
+  article {
+    border: rgb(var(--color-highlight)) var(--size-border-width) solid;
+    padding: var(--spacing-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-gap);
+  }
+  footer {
+    font-size: 0.8em;
+  }
+</style>

src/pages/blog/rss.xml.js → src/pages/blog/rss.xml.ts

@@ -1,14 +1,15 @@
 import { getRssString } from "@astrojs/rss";
 import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "@src/consts";
+import type { APIContext } from "astro";
 
-export async function GET(context) {
+export async function GET(context: APIContext) {
   const posts = await getCollection("blog");
   return new Response(
     await getRssString({
       title: SITE_TITLE,
       description: SITE_DESCRIPTION,
-      site: context.site,
+      site: context.site!,
       items: posts.map((post) => ({
         ...post.data,
         link: `/blog/${post.slug}/`,

src/pages/socials.astro

@@ -1,13 +1,9 @@
 ---
-import Layout from "@layouts/BlogPost.astro";
+import Layout from "@layouts/Layout.astro";
 const mail = "[email protected]".replaceAll("x", "");
 ---
 
-<Layout
-  title="socials"
-  description="a list of my socials."
-  pubDate={new Date("Aug 29 2023")}
->
+<Layout title="socials" description="a list of my socials.">
   <p>
     I'm all around the internet! This is a list of platforms I'm most active on.
   </p>
@@ -68,5 +64,7 @@ const mail = "[email protected]".replaceAll("x", "");
     border-collapse: separate;
     border-spacing: 1ch 0;
     padding: 0;
+    border: rgb(var(--color-highlight)) var(--size-border-width) solid;
+    padding: var(--spacing-padding);
   }
 </style>

src/styles/global.css

@@ -2,7 +2,8 @@
   --color-background: 16, 16, 20;
   --color-text: 200, 200, 222;
   --color-highlight: 22, 118, 232;
-  --spacing-content-width: 800px;
+  --size-content-width: 800px;
+  --size-border-width: 2px;
   --spacing-padding: 1em;
   --spacing-gap: 1em;
   --font-layout: "Hanken Grotesk Variable", sans-serif;
@@ -18,7 +19,7 @@ body {
 }
 
 main {
-  max-width: var(--spacing-content-width);
+  max-width: var(--size-content-width);
   min-height: calc(100vh - 6em);
   margin: 0 auto;
   padding: var(--spacing-padding);
@@ -35,3 +36,12 @@ a {
 h1 {
   margin-top: 0;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-transform: lowercase;
+}