Merge branch 'main' of https://github.com/cassidoo/blahg

astro.config.mjs

@@ -1,10 +1,10 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
-import mdx from '@astrojs/mdx';
+import mdx from "@astrojs/mdx";
 
-import sitemap from '@astrojs/sitemap';
+import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
 export default defineConfig({
-	site: 'https://example.com',
+  site: "https://cassidoo.co/blog",
-	integrations: [mdx(), sitemap()],
+  integrations: [mdx(), sitemap()],
 });

src/components/Post.astro

@@ -3,7 +3,7 @@
 const { slug, title, tags, description, date } = Astro.props;
 ---
 
-<li>
+<li class="post">
   <a href={`/post/${slug}/`} class="title">{title}</a>
   <time datetime={date}>
     {new Date(date).toLocaleDateString('en-us', {
@@ -14,11 +14,11 @@ const { slug, title, tags, description, date } = Astro.props;
   </time>
   <br />
   {description && <span class="excerpt">{description}</span>}
-  <ul>
+  <div>
     {tags && tags.map(tag => (
-    <li class="tag">
+      <>
-      <a href={`/tag/${tag}`}>{tag}</a>
+        <a class="tag" href={`/tag/${tag}`}>#{tag}</a>
-    </li>
+      </>
     ))}
-  </ul>
+  </div>
 </li>

src/components/RandomPosts.astro

@@ -0,0 +1,16 @@
+---
+import Post from '../components/Post.astro';
+
+const { allPosts } = Astro.props;
+
+let posts = allPosts.sort(() => 0.5 - Math.random()).slice(0, 3)
+---
+
+<content>
+  <ul>
+    {posts.map(
+    ({url, frontmatter: { description, slug, title, tags, added: date }}) => (
+      <Post {url} {description} {date} {slug} {title} {tags} />
+    ))}
+  </ul>
+</content>

src/global.css

@@ -19,8 +19,8 @@
   background-color: var(--highlight);
   color: var(--black);
 }
+html,
 body {
-  font-family: 'Roboto Mono', monospace;
   margin: auto;
   padding: 20px;
   max-width: 65ch;
@@ -30,6 +30,11 @@ body {
   line-height: 1.8;
   color: var(--black);
 }
+html,
+body,
+button {
+  font-family: "Roboto Mono", monospace;
+}
 h1,
 h2,
 h3,
@@ -40,6 +45,16 @@ strong,
 b {
   color: var(--black);
 }
+
+body.dark-mode,
+body.dark-mode button,
+body.dark-mode .go-home,
+button.dark-mode,
+button.dark-mode button {
+  background: var(--black);
+  color: var(--white);
+}
+
 a {
   color: var(--pink);
 }
@@ -54,6 +69,34 @@ nav a:not(:last-child) {
   padding: 0 12px 0 0;
 }
 
+ul {
+  list-style-type: none;
+  padding: unset;
+}
+
+.post {
+  margin: 0 0 30px 0;
+}
+
+.post .title {
+  font-size: 1.3em;
+}
+
+.tag {
+  margin-right: 20px;
+  color: var(--gray);
+  font-size: 0.8rem;
+}
+.tag:hover {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.tag-home {
+  margin-right: 10px;
+  color: var(--gray);
+}
+
 textarea {
   width: 100%;
   font-size: 16px;

src/pages/about.md

@@ -1,7 +1,7 @@
 I'm Cassidy, and I like to make memes and dreams and software.
 
-When I’m not working, I like to watch movies, play music, eat a lot, practice Spanish, and salsa dance. I like brainstorming projects that I build maybe half the time. It's nice to dream.
+When I’m not working, I like to watch movies, play music, eat a lot, practice Spanish, and play games. I like brainstorming projects that I build maybe half the time. It's nice to dream.
 
 You should check out my website, [cassidoo.co](https://cassidoo.co), my [newsletter](https://cassidoo.co/newsletter), or my [GitHub profile](https://github.com/cassidoo). Or don’t. I’m not your mother.
 
-Anyway, welcome to my blog AKA digital garden AKA mind dump land!
+Anyway, welcome to my blog AKA digital garden AKA mind dump land!

src/pages/index.astro

@@ -2,9 +2,31 @@
 import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import RandomPosts from '../components/RandomPosts.astro';
 import ColorScript from '../components/ColorScript.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
-import {Content as About} from './about.md';
+import { Content as About } from './about.md';
+
+const posts = (await Astro.glob('../posts/*.{md,mdx}'));
+
+// Get tags from all posts
+const getTags = posts.map((post) => {
+	const postTags = post.frontmatter.tags;
+	let allTags = []
+
+	if (postTags.length > 0) {
+		postTags.forEach((tag) => {
+			if (allTags.indexOf(tag) === -1) {
+				allTags.push(tag);
+			}
+		});
+	}
+	return allTags;
+}).flat(1);
+// Make the tags unique
+let tags = [...new Set(getTags)];
+
+
 ---
 
 <!DOCTYPE html>
@@ -18,10 +40,14 @@ import {Content as About} from './about.md';
 			<About />
 
 			<h3>Here's a sampler of some posts</h3>
-			<p>hello blah blah blah</p>
+			<RandomPosts allPosts={posts} />
 
 			<h3>View posts by tag</h3>
-			<p>hello blah blah blah</p>
+			<p>
+				{tags && tags.map(tag => (
+					<><a class="tag-home" href={`/tag/${tag}`}>#{tag}</a>{` `}</>
+				))}
+			</p>
 		</main>
 		<Footer />
 		<ColorScript />

src/pages/posts.astro

@@ -18,16 +18,9 @@ const posts = (await Astro.glob('../posts/*.{md,mdx}')).sort(
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 		<style>
-			ul {
-				list-style-type: none;
-				padding: unset;
-			}
 			ul li {
 				display: flex;
 			}
-			ul li a:visited {
-				color: #8e32dc;
-			}
 		</style>
 	</head>
 	<body>

src/pages/tag/[tag].astro

@@ -40,16 +40,9 @@ const { tag: currentTag } = Astro.params;
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 		<style>
-			ul {
-				list-style-type: none;
-				padding: unset;
-			}
 			ul li {
 				display: flex;
 			}
-			ul li a:visited {
-				color: #8e32dc;
-			}
 		</style>
 	</head>
 	<body>