add blog

mudkipdev · May 9, 2024 · aa7d86b · aa7d86b
1 parent 135ed69
commit aa7d86b
Show file tree

Hide file tree

Showing 19 changed files with 356 additions and 51 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,6 +1,12 @@
-import { defineConfig } from 'astro/config'
+import { defineConfig } from "astro/config";
 
 export default defineConfig({
-    site: 'https://mudkip.dev',
-    compressHTML: true,
+    site: "https://mudkip.dev",
+    prefetch: {
+        defaultStrategy: "viewport",
+        prefetchAll: true
+    },
+    devToolbar: {
+        enabled: false
+    },
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.6.3",
     "@astrojs/check": "^0.5.10",
+    "@astrojs/rss": "^4.0.5",
+    "astro": "^4.6.3",
     "typescript": "^5.4.5"
   }
-}
+}
diff --git a/public/style.xsl b/public/style.xsl
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -1,17 +1,26 @@
 ---
+import Date from "@components/Date.astro";
+
 interface Props {
     title: string;
     description: string;
     url?: string;
+    date?: Date;
 }
 
-const { title, description, url } = Astro.props
+const { title, description, url, date } = Astro.props
 ---
 <div class="card">
-    {url == null
-        ? <h2>{title}</h2>
-        : <a href={url} target="_blank">{title}</a>}
-    <p>{description}</p>
+    <h2>{
+        url == null
+        ? title
+        : <a data-astro-prefetch="false" href={url} target="_blank">{title}</a>
+    }</h2>
+
+    <div>
+        <p>{description}</p>
+        {date != undefined && <Date date={date} />}
+    </div>
 </div>
 
 <style>
@@ -27,11 +36,13 @@ const { title, description, url } = Astro.props
 
     .card * {
         margin: 0;
-        font-size: 0.85em;
     }
 
     .card a {
         color: var(--text);
-        font-size: 1.25em;
+    }
+
+    .card p {
+        font-size: 0.85em;
     }
 </style>
diff --git a/src/components/Cards.astro b/src/components/Cards.astro
@@ -0,0 +1,14 @@
+---
+---
+<div class="cards">
+    <slot />
+</div>
+
+<style>
+    .cards {
+        margin: 1em auto;
+        gap: 0.75em;
+        display: flex;
+        flex-direction: column;
+    }
+</style>
diff --git a/src/components/Date.astro b/src/components/Date.astro
@@ -0,0 +1,23 @@
+---
+interface Props {
+    date: Date;
+}
+
+const { date } = Astro.props;
+---
+<time datetime={date.toISOString()}>
+    {
+        date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric"
+        })
+    }
+</time>
+
+<style>
+    time {
+        color: var(--surface-2);
+        font-size: 0.85em;
+    }
+</style>
diff --git a/src/content/blog/test.md b/src/content/blog/test.md
@@ -0,0 +1,8 @@
+---
+date: 2024-05-09
+title: Test
+---
+This is a demo of my blog. I can write for as long as I want, but eventually this description will be cut off at the 50 character limit.
+
+# boop
+helo
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -0,0 +1,12 @@
+import { z, defineCollection } from "astro:content";
+
+export const collections = {
+    "blog": defineCollection({
+        type: "content",
+        schema: z.object({
+            title: z.string(),
+            date: z.date(),
+            tags: z.array(z.string()).default([])
+        })
+    })
+};
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -1,6 +1,6 @@
 ---
-import "../style.css"
-const { title } = Astro.props
+import "@styles/global.css";
+const { title } = Astro.props;
 ---
 <html lang="en">
 	<head>
@@ -9,6 +9,12 @@ const { title } = Astro.props
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="mudkip's blog"
+            href="/rss.xml"
+        />
 	</head>
 	<body>
         <h1>{title}</h1>

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -1,5 +1,5 @@
 ---
-import Page from '../layouts/Page.astro'
+import Page from "@layouts/Page.astro";
 ---
 <Page title="404">
     <p>page not found</p>

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,6 +1,27 @@
 ---
-import Page from '../layouts/Page.astro'
+import Page from "@layouts/Page.astro";
+import Card from "@components/Card.astro";
+import Cards from "@components/Cards.astro";
+
+import { getCollection } from "astro:content";
+const posts = await getCollection("blog");
 ---
 <Page title="blog">
-    <p>coming soon...</p>
+    {
+        posts.length != 0
+        ? <p>there are currently no published posts</p>
+        : (
+            <Cards>
+            {posts.map(post => (
+                <Card
+                    title={post.data.title}
+                    description={post.body.substring(0, 100) + "..."}
+                    url={"/blog/" + post.slug}
+                    date={post.data.date}
+                />
+            ))}
+            </Cards>
+        )
+    }
+
 </Page>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -0,0 +1,27 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
+import { getCollection } from 'astro:content';
+import Page from "@layouts/Page.astro";
+import Date from '@components/Date.astro';
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+export const getStaticPaths = (async () => {
+    const posts = await getCollection("blog");
+
+    return posts.map(post => {
+        return {
+            params: { slug: post.slug },
+            props: { post, data: post.data },
+        };
+    });
+}) satisfies GetStaticPaths;
+
+const { post, data } = Astro.props;
+const { Content } = await post.render();
+---
+<Page title="blog">
+    <h1>{data.title}</h1>
+    <Date date={data.date} />
+    <Content />
+</Page>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Page from '../layouts/Page.astro'
+import Page from "@layouts/Page.astro";
 ---
 <Page title="mudkip">
 	<p>i use NixOS btw</p>

diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -1,9 +1,10 @@
 ---
-import Page from '../layouts/Page.astro'
-import Card from '../components/Card.astro'
+import Page from "@layouts/Page.astro";
+import Card from "@components/Card.astro";
+import Cards from "@components/Cards.astro";
 ---
 <Page title="projects">
-    <div class="cards">
+    <Cards>
         <Card
             title="website"
             description="My personal website written with Astro and TypeScript."
@@ -13,16 +14,7 @@ import Card from '../components/Card.astro'
         <Card
             title="scnewsbot"
             description="A bot for the r/starcitizen Discord server."
-            url="https://github.com/mudkipdev/scnewsbot"
+            url = "https://github.com/mudkipdev/scnewsbot"
         />
-    </div>
-</Page>
-
-<style>
-    .cards {
-        margin: 1em auto;
-        gap: 0.75em;
-        display: flex;
-        flex-direction: column;
-    }
-</style>
+    </Cards>
+</Page>
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
@@ -0,0 +1,22 @@
+import rss from "@astrojs/rss";
+import type { APIContext } from "astro";
+import { getCollection } from "astro:content";
+
+export async function GET(context: APIContext) {
+    const posts = await getCollection("blog");
+
+    return rss({
+        site: context.site!,
+        title: "mudkip's blog",
+        description: "Random thoughts and ramblings I have.",
+        stylesheet: "/style.xsl",
+        items: posts.map(post => ({
+            link: `/blog/${post.slug}`,
+            title: post.data.title,
+            pubDate: post.data.date,
+            content: post.body,
+        })),
+        customData: "<language>en-us</language>",
+        trailingSlash: false,
+    })
+}