From 2c103f70aedc2d2edd5d7d0af7bfc296093d639f Mon Sep 17 00:00:00 2001
From: Henry-Hiles <henry@henryhiles.com>
Date: Wed, 21 Jun 2023 11:23:43 -0400
Subject: [PATCH] Add blog

---
 package.json                         |  2 +-
 pnpm-lock.yaml                       | 10 +---
 src/components/BlogPost.astro        | 39 ++++++++++++--
 src/content/blog/test copy 2.md      |  6 ---
 src/content/blog/test copy 3.md      |  6 ---
 src/content/blog/test copy 4.md      |  6 ---
 src/content/blog/test copy.md        |  6 ---
 src/content/blog/test.md             |  6 ---
 src/content/blog/welcome copy 2.md   | 10 ++++
 src/content/blog/welcome copy.md     |  8 +++
 src/content/blog/welcome.md          |  4 ++
 src/content/{config.ts => config.js} | 10 ++--
 src/pages/blog/index.astro           | 79 ++++++++++++++++++++++++----
 src/pages/blog/rss.xml.js            |  7 +--
 src/styles/Blog.module.css           | 22 ++++++--
 src/styles/BlogPost.module.css       | 55 +++++++++++++++----
 src/styles/Button.module.css         |  4 +-
 src/styles/Layout.css                |  9 ++--
 18 files changed, 205 insertions(+), 84 deletions(-)
 delete mode 100644 src/content/blog/test copy 2.md
 delete mode 100644 src/content/blog/test copy 3.md
 delete mode 100644 src/content/blog/test copy 4.md
 delete mode 100644 src/content/blog/test copy.md
 delete mode 100644 src/content/blog/test.md
 create mode 100644 src/content/blog/welcome copy 2.md
 create mode 100644 src/content/blog/welcome copy.md
 rename src/content/{config.ts => config.js} (72%)

diff --git a/package.json b/package.json
index 94018ec..bee4100 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,6 @@
 		"@types/marked": "^5.0.0",
 		"astro": "^2.6.4",
 		"astro-icon": "^0.8.1",
-		"marked": "^5.1.0"
+		"micromark": "^3.2.0"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 530816c..00c3c6f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,7 @@ specifiers:
   '@types/marked': ^5.0.0
   astro: ^2.6.4
   astro-icon: ^0.8.1
-  marked: ^5.1.0
+  micromark: ^3.2.0
 
 dependencies:
   ',mmarked': link:@types/,mmarked
@@ -14,7 +14,7 @@ dependencies:
   '@types/marked': 5.0.0
   astro: 2.6.4
   astro-icon: 0.8.1
-  marked: 5.1.0
+  micromark: 3.2.0
 
 packages:
 
@@ -1868,12 +1868,6 @@ packages:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
     dev: false
 
-  /marked/5.1.0:
-    resolution: {integrity: sha512-z3/nBe7aTI8JDszlYLk7dDVNpngjw0o1ZJtrA9kIfkkHcIF+xH7mO23aISl4WxP83elU+MFROgahqdpd05lMEQ==}
-    engines: {node: '>= 18'}
-    hasBin: true
-    dev: false
-
   /mdast-util-definitions/5.1.2:
     resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
     dependencies:
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
index 5dbc04f..68302d5 100644
--- a/src/components/BlogPost.astro
+++ b/src/components/BlogPost.astro
@@ -2,27 +2,56 @@
 import styles from "../styles/BlogPost.module.css"
 import Divider from "../components/Divider.astro"
 
-import type { CollectionEntry } from "astro:content"
+import { CollectionEntry, getCollection } from "astro:content"
 interface Props {
 	post: CollectionEntry<"blog">
+	standalone?: Boolean
 }
 
-const { data: post, render } = Astro.props.post
+const { post: postEntry, standalone = true } = Astro.props
+const { data: post, render } = postEntry
 const { Content } = await render()
 const pubDate = new Intl.DateTimeFormat("en-US", {
 	month: "long",
 	day: "numeric",
 	year: "numeric"
 }).format(post.pubDate)
+const blog = await getCollection("blog")
+const index = blog.findIndex((blogPost) => blogPost.id === postEntry.id)
+const prev = blog[index - 1]
+const next = blog[index + 1]
 ---
 
-<section class={styles.jumbo}>
-	<span class={styles.date}>{pubDate}</span>
+<section class={`${styles.jumbo} ${standalone ? styles.standalone : ""}`}>
+	<section class={styles.top}>
+		{standalone && <a href="/blog">&lt; Go Back</a>}
+		<span class={styles.date}>{pubDate}</span>
+	</section>
 	<h2 class={styles.title}>
 		{post.title}
 	</h2>
 	<Divider />
 	<article class={styles.description}>
-		<Content />
+		{standalone ? <Content /> : post.description}
 	</article>
+	{standalone ? "" : <span class={styles.more}>Read More</span>}
+	{
+		standalone ? (
+			<section class={styles.links}>
+				{prev ? (
+					<a href={`/blog/${prev.slug}`}>&lt; {prev.data.title}</a>
+				) : (
+					<span>&lt; Previous Article</span>
+				)}
+
+				{next ? (
+					<a href={`/blog/${next.slug}`}>{next.data.title} &gt;</a>
+				) : (
+					<span>Next Article &gt;</span>
+				)}
+			</section>
+		) : (
+			""
+		)
+	}
 </section>
diff --git a/src/content/blog/test copy 2.md b/src/content/blog/test copy 2.md
deleted file mode 100644
index eb12cee..0000000
--- a/src/content/blog/test copy 2.md	
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "Welcome to my blog!"
-pubDate: 1687027268667
----
-
-# **Test**
diff --git a/src/content/blog/test copy 3.md b/src/content/blog/test copy 3.md
deleted file mode 100644
index eb12cee..0000000
--- a/src/content/blog/test copy 3.md	
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "Welcome to my blog!"
-pubDate: 1687027268667
----
-
-# **Test**
diff --git a/src/content/blog/test copy 4.md b/src/content/blog/test copy 4.md
deleted file mode 100644
index eb12cee..0000000
--- a/src/content/blog/test copy 4.md	
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "Welcome to my blog!"
-pubDate: 1687027268667
----
-
-# **Test**
diff --git a/src/content/blog/test copy.md b/src/content/blog/test copy.md
deleted file mode 100644
index eb12cee..0000000
--- a/src/content/blog/test copy.md	
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "Welcome to my blog!"
-pubDate: 1687027268667
----
-
-# **Test**
diff --git a/src/content/blog/test.md b/src/content/blog/test.md
deleted file mode 100644
index eb12cee..0000000
--- a/src/content/blog/test.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "Welcome to my blog!"
-pubDate: 1687027268667
----
-
-# **Test**
diff --git a/src/content/blog/welcome copy 2.md b/src/content/blog/welcome copy 2.md
new file mode 100644
index 0000000..b4f29e9
--- /dev/null
+++ b/src/content/blog/welcome copy 2.md	
@@ -0,0 +1,10 @@
+---
+title: "Welcome to my blog!"
+pubDate: 1687027268667
+category: "other"
+description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+---
+
+Lorem ipsum dolor sit **amet**, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit **amet**, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/content/blog/welcome copy.md b/src/content/blog/welcome copy.md
new file mode 100644
index 0000000..0da18e3
--- /dev/null
+++ b/src/content/blog/welcome copy.md	
@@ -0,0 +1,8 @@
+---
+title: "Welcome to my blog!"
+pubDate: 1687027268667
+category: "other"
+description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/content/blog/welcome.md b/src/content/blog/welcome.md
index 78f0418..0da18e3 100644
--- a/src/content/blog/welcome.md
+++ b/src/content/blog/welcome.md
@@ -1,4 +1,8 @@
 ---
 title: "Welcome to my blog!"
 pubDate: 1687027268667
+category: "other"
+description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
 ---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/content/config.ts b/src/content/config.js
similarity index 72%
rename from src/content/config.ts
rename to src/content/config.js
index e045d30..70ceca2 100644
--- a/src/content/config.ts
+++ b/src/content/config.js
@@ -3,24 +3,26 @@ import { rssSchema } from "@astrojs/rss"
 
 const blogCollection = defineCollection({
 	type: "content",
-	schema: rssSchema
+	schema: rssSchema.extend({
+		category: z.enum(["web", "bot", "linux", "other"])
+	})
 })
 
 const projectsCollection = defineCollection({
 	type: "content",
 	schema: z.object({
 		name: z.string(),
-		github: z.string().optional(),
+		github: z.string().url().optional(),
 		overview: z.string(),
 		customLink: z
 			.object({
 				name: z.string(),
-				url: z.string()
+				url: z.string().url()
 			})
 			.optional(),
 		mainImage: z.string(),
 		thumbImage: z.string(),
-		demoLink: z.string().optional()
+		demoLink: z.string().url().optional()
 	})
 })
 
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 6880205..6689e1b 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -12,6 +12,23 @@ const posts = await getCollection("blog")
 	<div class={styles.container}>
 		<aside class={styles.sidebar}>
 			<input type="text" placeholder="Search..." id="search" />
+
+			<section class={styles.radios}>
+				<input type="radio" name="category" id="all" checked />
+				<label for="all">All</label>
+
+				<input type="radio" name="category" id="linux" />
+				<label for="linux">Linux</label>
+
+				<input type="radio" name="category" id="web" />
+				<label for="web">Web Development</label>
+
+				<input type="radio" name="category" id="bot" />
+				<label for="bot">Discord Bot Development</label>
+
+				<input type="radio" name="category" id="other" />
+				<label for="other">Other</label>
+			</section>
 		</aside>
 		<div class={styles.right}>
 			<article class={styles.description}>
@@ -29,9 +46,9 @@ const posts = await getCollection("blog")
 						class={styles.link}
 						href={`/blog/${post.slug}`}
 						data-title={post.data.title}
-						data-tags=""
+						data-category={post.data.category}
 					>
-						<BlogPost post={post} />
+						<BlogPost post={post} standalone={false} />
 					</a>
 				))
 			}
@@ -40,23 +57,63 @@ const posts = await getCollection("blog")
 </Layout>
 
 <script>
+	let category = "all"
 	const searchBar = document.querySelector("#search") as HTMLInputElement
 	const posts = document.querySelectorAll(
 		"[data-title]"
 	) as NodeListOf<HTMLElement>
+	const radios = document.querySelectorAll('input[type="radio"]')
+	const urlParams = new URLSearchParams(location.search)
+	const set = (name: string, value: string) => {
+		urlParams.set(name, value)
+		history.replaceState({}, "", `?${urlParams}`)
+	}
+
+	radios.forEach((radio) =>
+		radio.addEventListener("click", ({ target }) => {
+			if (target instanceof HTMLInputElement) {
+				set("category", target.id)
+				category = target.id
+				filterByCategory()
+			}
+		})
+	)
 
 	const search = () =>
-		posts.forEach((post) =>
-			post.setAttribute(
-				"aria-hidden",
-				post.dataset.title
+		filter(
+			(post) =>
+				!!post.dataset.title
 					?.toLowerCase()
 					?.includes(searchBar.value.toLowerCase())
-					? "false"
-					: "true"
-			)
 		)
 
-	searchBar?.addEventListener("input", search)
-	addEventListener("load", search)
+	const filterByCategory = () =>
+		filter((post) =>
+			category == "all" ? true : post.dataset.category == category
+		)
+
+	const filter = (condition: (element: HTMLElement) => boolean) =>
+		posts.forEach((post) =>
+			post.setAttribute("aria-hidden", (!condition(post)).toString())
+		)
+
+	searchBar?.addEventListener("input", () => {
+		set("search", searchBar.value)
+		search()
+	})
+
+	addEventListener("load", () => {
+		searchBar.value = urlParams.get("search") ?? ""
+		Array.from(radios).find((radio) => {
+			if (
+				radio instanceof HTMLInputElement &&
+				radio.id == urlParams.get("category")
+			) {
+				radio.checked = true
+				category = radio.id
+			}
+		})
+		search()
+		filterByCategory()
+	})
 </script>
diff --git a/src/pages/blog/rss.xml.js b/src/pages/blog/rss.xml.js
index 83e348c..bcb5674 100644
--- a/src/pages/blog/rss.xml.js
+++ b/src/pages/blog/rss.xml.js
@@ -1,6 +1,6 @@
 import rss from "@astrojs/rss"
 import { getCollection } from "astro:content"
-import { marked } from "marked"
+import { micromark } from "micromark"
 
 export const get = async (context) => {
 	const blog = await getCollection("blog")
@@ -11,10 +11,7 @@ export const get = async (context) => {
 		site: context.site,
 		items: blog.map((post) => ({
 			link: `/blog/${post.slug}/`,
-			content: marked.parse(post.body, {
-				mangle: false,
-				headerIds: false
-			}),
+			content: micromark(post.body),
 			...post.data
 		})),
 		customData: "<language>en-us</language>",
diff --git a/src/styles/Blog.module.css b/src/styles/Blog.module.css
index fb1ddf8..72c4b6d 100644
--- a/src/styles/Blog.module.css
+++ b/src/styles/Blog.module.css
@@ -1,9 +1,7 @@
 .link {
-	display: flex;
+	text-decoration: none;
 	width: 100%;
 	color: unset;
-	text-decoration: none;
-	justify-content: center;
 }
 
 .description {
@@ -35,6 +33,7 @@
 .sidebar {
 	display: flex;
 	position: sticky;
+	gap: 1rem;
 	top: 8rem;
 	height: 80vh;
 	flex-direction: column;
@@ -47,6 +46,21 @@
 	width: 100%;
 }
 
-[aria-hidden="true"] {
+[aria-hidden="true"],
+.radios [type="radio"] {
 	display: none;
 }
+
+.radios :checked + label {
+	color: var(--primary);
+	font-weight: bold;
+}
+
+label {
+	font-size: 1.3rem;
+}
+
+.radios {
+	display: flex;
+	flex-direction: column;
+}
diff --git a/src/styles/BlogPost.module.css b/src/styles/BlogPost.module.css
index 286d365..8cef8c5 100644
--- a/src/styles/BlogPost.module.css
+++ b/src/styles/BlogPost.module.css
@@ -1,15 +1,38 @@
 .jumbo {
 	display: flex;
+	padding: 1rem 1.5rem;
 	flex-direction: column;
-	position: relative;
 	align-items: center;
 }
 
+.jumbo.standalone {
+	max-width: 80rem;
+}
+
+.more {
+	margin-top: 1.5rem;
+	padding: 1rem;
+	border: 2px solid var(--primary);
+	border-radius: 20rem;
+	backdrop-filter: blur(2rem);
+	background: rgb(0 0 0 / 0.3);
+	box-shadow: 0 0 2rem black;
+	transition: scale 0.2s;
+}
+
+.more:hover {
+	scale: 1.05;
+	text-decoration: underline;
+}
+
 .date {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	color: hsl(37 10% 58%);
+	color: var(--muted);
+}
+
+.top {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
 }
 
 .title {
@@ -18,9 +41,9 @@
 	text-align: center;
 }
 
-.description p {
+.description {
 	font-size: 1.3rem;
-	max-width: 40rem;
+	max-width: 60rem;
 	text-align: justify;
 }
 
@@ -37,8 +60,20 @@
 	font-size: 1.6rem;
 }
 
-.description :is(strong, em) {
-	display: block;
+.links {
 	width: 100%;
-	text-align: justify;
+	display: flex;
+	justify-content: space-between;
+}
+
+.links * {
+	font-size: 1.2rem;
+}
+
+.links a {
+	color: white;
+}
+
+.links span {
+	color: var(--muted);
 }
diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
index 270421b..8fe3f18 100644
--- a/src/styles/Button.module.css
+++ b/src/styles/Button.module.css
@@ -3,8 +3,8 @@
 	background: rgb(0 0 0 / 0.1);
 	border: 2px solid var(--primary);
 	backdrop-filter: blur(2rem);
-	border-radius: 2rem;
-	padding: 2rem;
+	border-radius: 1.5rem;
+	padding: 1.5rem;
 	text-decoration: none;
 	white-space: nowrap;
 	height: 100%;
diff --git a/src/styles/Layout.css b/src/styles/Layout.css
index feb364d..12bbefa 100644
--- a/src/styles/Layout.css
+++ b/src/styles/Layout.css
@@ -2,8 +2,9 @@
 	color-scheme: dark light;
 	scroll-behavior: smooth;
 
-	--primary: #4e94e4;
-	--secondary: #354b5f;
+	--primary: hsl(212, 74%, 60%);
+	--secondary: hsl(209, 28%, 29%);
+	--muted: hsl(0, 0%, 54%);
 }
 
 body {
@@ -40,7 +41,7 @@ main {
 	align-items: center;
 }
 
-:is(article, section, aside):not(section *, nav *, header *) {
+:is(article, section, aside):not(section *, nav *, header *, aside *) {
 	display: flex;
 	flex-direction: column;
 	border-radius: 1rem;
@@ -52,7 +53,7 @@ main {
 }
 
 :is(article, section, aside):not(section *, nav *, header *):hover {
-	scale: 102%;
+	scale: 101.5%;
 }
 
 @media (min-width: 500px) {