Merging in dev to main

src/components/BookList.astro

@@ -18,12 +18,12 @@ interface Book {
 				<li>
 					<strong>
 						<a href={book.link} target="_blank" rel="noopener noreferrer">
-							{book.title}
+							{book.title}{" "}
 						</a>
-					</strong>{" "}
+					</strong>
 					by {book.author}
 				</li>
 			))
 		}
-  </ul>
+	</ul>
 </div>

src/components/ChangeLogComp.astro

@@ -13,36 +13,6 @@ type ChangelogEntry = {
 const data: ChangelogEntry[] = changelogData as ChangelogEntry[];
 ---
 
-<style>
-	table {
-		width: 100%;
-		border-collapse: collapse;
-		border: 1px solid #ccc;
-	}
-	th {
-		border: 1px solid #ccc;
-		padding: 8px;
-		text-align: center;
-		font-weight: bold; /* Makes text bold */
-		font-size: 18px; /* Increases the font size to be slightly larger */
-		background-color: gray;
-	}
-	td {
-		border: 1px solid #ccc;
-		padding: 8px;
-		text-align: left;
-	}
-	tr:nth-child(odd) {
-		background-color: #e0e0e0;
-	}
-
-	th:first-child,
-	td:first-child {
-		min-width: 120px; /* Adjust the value as needed to prevent wrapping */
-		white-space: nowrap; /* This will ensure the content doesn't wrap */
-	}
-</style>
-
 <table>
 	<thead>
 		<tr>

src/components/MovieList.astro

@@ -14,7 +14,7 @@ interface Movie {
 		{
 			movies.map((movie: Movie) => (
 				<li>
-					<strong>{movie.title}</strong>
+					{movie.title}
 				</li>
 			))
 		}

src/components/Quotations.astro

@@ -13,7 +13,7 @@ interface Quote {
 	<ul>
 		{
 			quotes.map((quote: Quote) => (
-				<div class="mb-2">
+				<div class="mb-8">
 					<div>
 						<a href={`/quotes/${quote.ID}`}>#</a>
 						<em>{quote.quote}</em>

src/components/layout/Header.astro

@@ -3,6 +3,8 @@ import { menuLinks, siteConfig } from "@/site-config";
 
 import Search from "../Search.astro";
 import ThemeToggle from "../ThemeToggle.astro";
+import nickImg from "@/assets/nick.png";
+import { Image } from "astro:assets";
 
 const url = new URL(Astro.request.url);
 ---
@@ -11,50 +13,38 @@ const url = new URL(Astro.request.url);
 	<div class="flex sm:flex-col">
 		<a
 			aria-current={url.pathname === "/" ? "page" : false}
-			class="inline-flex items-center grayscale hover:filter-none sm:relative sm:inline-block"
+			class="inline-flex items-center hover:filter-none sm:relative sm:inline-block"
 			href="/"
 		>
-			<svg
-				aria-hidden="true"
-				class="me-3 h-10 w-6 sm:absolute sm:start-[-4.5rem] sm:me-0 sm:h-20 sm:w-12"
-				fill="none"
-				focusable="false"
-				viewBox="0 0 272 480"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<title>Logo</title>
-				<path
-					d="M181.334 93.333v-40L226.667 80v40l-45.333-26.667ZM136.001 53.333 90.667 26.667v426.666L136.001 480V53.333Z"
-					fill="#B04304"></path>
-				<path
-					d="m136.001 119.944 45.333-26.667 45.333 26.667-45.333 26.667-45.333-26.667ZM90.667 26.667 136.001 0l45.333 26.667-45.333 26.666-45.334-26.666ZM181.334 53.277l45.333-26.666L272 53.277l-45.333 26.667-45.333-26.667ZM0 213.277l45.333-26.667 45.334 26.667-45.334 26.667L0 213.277ZM136 239.944l-45.333-26.667v53.333L136 239.944Z"
-					fill="#FF5D01"></path>
-				<path
-					d="m136 53.333 45.333-26.666v120L226.667 120V80L272 53.333V160l-90.667 53.333v240L136 480V306.667L45.334 360V240l45.333-26.667v53.334L136 240V53.333Z"
-					fill="#53C68C"></path>
-				<path d="M45.334 240 0 213.334v120L45.334 360V240Z" fill="#B04304"></path>
-			</svg>
-			<span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span>
+			<Image
+				src={nickImg}
+				alt="Logo"
+				loading="eager"
+				class="me-3 h-10 w-10 sm:absolute sm:start-[-4.5rem] sm:me-0 sm:h-20 sm:w-20"
+			/>
+			<title>Logo</title>
 		</a>
-		<nav
-			aria-label="Main menu"
-			class="absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md bg-bgColor/[.85] py-4 text-accent shadow backdrop-blur group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:-ms-4 sm:mt-1 sm:flex sm:flex-row sm:items-center sm:divide-x sm:divide-dashed sm:divide-accent sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
-			id="navigation-menu"
-		>
-			{
-				menuLinks.map((link) => (
-					<a
-						aria-current={url.pathname === link.path ? "page" : false}
-						class="px-4 py-4 sm:py-0 sm:hover:underline"
-						data-astro-prefetch
-						href={link.path}
-					>
-						{link.title}
-					</a>
-				))
-			}
-		</nav>
+		<span class="mr-4 text-xl font-bold sm:ml-5 sm:text-2xl">{siteConfig.title}</span>
 	</div>
+	<nav
+		aria-label="Main menu"
+		class="absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md bg-bgColor/[.85] py-4 text-accent shadow backdrop-blur group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:-ms-4 sm:mt-1 sm:flex sm:flex-row sm:items-center sm:divide-x sm:divide-dashed sm:divide-accent sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
+		id="navigation-menu"
+	>
+		{
+			menuLinks.map((link) => (
+				<a
+					aria-current={url.pathname === link.path ? "page" : false}
+					class="px-4 py-4 sm:py-0 sm:hover:underline"
+					data-astro-prefetch
+					href={link.path}
+				>
+					{link.title}
+				</a>
+			))
+		}
+	</nav>
+
 	<Search />
 	<ThemeToggle />
 	<mobile-button>
@@ -96,31 +86,31 @@ const url = new URL(Astro.request.url);
 			</svg>
 		</button>
 	</mobile-button>
-</header>
 
-<script>
-	import { toggleClass } from "@/utils";
+	<script>
+		import { toggleClass } from "@/utils";
 
-	class MobileNavBtn extends HTMLElement {
-		private headerEl: HTMLElement;
-		private menuOpen: boolean;
-		private mobileButtonEl: HTMLButtonElement;
+		class MobileNavBtn extends HTMLElement {
+			private headerEl: HTMLElement;
+			private menuOpen: boolean;
+			private mobileButtonEl: HTMLButtonElement;
 
-		toggleMobileMenu = () => {
-			toggleClass(this.headerEl, "menu-open");
-			this.menuOpen = !this.menuOpen;
-			this.mobileButtonEl.setAttribute("aria-expanded", this.menuOpen.toString());
-		};
+			toggleMobileMenu = () => {
+				toggleClass(this.headerEl, "menu-open");
+				this.menuOpen = !this.menuOpen;
+				this.mobileButtonEl.setAttribute("aria-expanded", this.menuOpen.toString());
+			};
 
-		constructor() {
-			super();
-			this.headerEl = document.getElementById("main-header")!;
-			this.mobileButtonEl = this.querySelector("button") as HTMLButtonElement;
-			this.menuOpen = false;
+			constructor() {
+				super();
+				this.headerEl = document.getElementById("main-header")!;
+				this.mobileButtonEl = this.querySelector("button") as HTMLButtonElement;
+				this.menuOpen = false;
 
-			this.mobileButtonEl.addEventListener("click", this.toggleMobileMenu);
+				this.mobileButtonEl.addEventListener("click", this.toggleMobileMenu);
+			}
 		}
-	}
 
-	customElements.define("mobile-button", MobileNavBtn);
-</script>
+		customElements.define("mobile-button", MobileNavBtn);
+	</script>
+</header>

src/layouts/BlogPost.astro

@@ -27,13 +27,14 @@ const { headings } = await post.render();
 		<article class="flex-grow break-words" data-pagefind-body>
 			<div id="blog-hero"><BlogHero content={post} /></div>
 			<div
-				class="prose prose-sm prose-cactus mt-12 prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"
+				class="prose prose-sm prose-cactus mt-12 max-w-3xl prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"
 			>
 				<slot />
 				<WebMentions />
 			</div>
 		</article>
 	</div>
+
 	<button
 		aria-label="Back to Top"
 		class="z-90 fixed bottom-8 end-4 flex h-10 w-10 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-zinc-200 text-3xl opacity-0 transition-all duration-300 hover:border-zinc-400 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 dark:bg-zinc-700 sm:end-8 sm:h-12 sm:w-12"
@@ -53,7 +54,6 @@ const { headings } = await post.render();
 		</svg>
 	</button>
 </BaseLayout>
-
 <script>
 	const scrollBtn = document.getElementById("to-top-btn") as HTMLButtonElement;
 	const targetHeader = document.getElementById("blog-hero") as HTMLDivElement;

src/layouts/InfoPost.astro

@@ -21,13 +21,14 @@ const socialImage = ogImage ?? `/og-image/${slug}.png`;
 	<div class="gap-x-10 lg:flex lg:items-start">
 		<article class="flex-grow break-words" data-pagefind-body>
 			<div
-				class="prose prose-sm prose-cactus mt-12 prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"
+				class="prose prose-sm prose-cactus mt-12 max-w-3xl prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"
 			>
 				<slot />
 				<WebMentions />
 			</div>
 		</article>
 	</div>
+
 	<button
 		aria-label="Back to Top"
 		class="z-90 fixed bottom-8 end-4 flex h-10 w-10 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-zinc-200 text-3xl opacity-0 transition-all duration-300 hover:border-zinc-400 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 dark:bg-zinc-700 sm:end-8 sm:h-12 sm:w-12"
@@ -47,7 +48,6 @@ const socialImage = ogImage ?? `/og-image/${slug}.png`;
 		</svg>
 	</button>
 </BaseLayout>
-
 <script>
 	const scrollBtn = document.getElementById("to-top-btn") as HTMLButtonElement;
 	const targetHeader = document.getElementById("blog-hero") as HTMLDivElement;

src/pages/404.astro

@@ -1,7 +1,5 @@
 ---
-import aboutImg from "@/assets/about-astro.png";
 import PageLayout from "@/layouts/Base.astro";
-import { Image } from "astro:assets";
 
 const meta = {
 	description: "Oops! It looks like this page is lost in space!",
@@ -12,12 +10,4 @@ const meta = {
 <PageLayout meta={meta}>
 	<h1 class="title mb-6">404 | Oops something went wrong</h1>
 	<p class="mb-8">Please use the navigation to find your way back</p>
-	<div class="my-4 grid justify-center">
-		<Image
-			alt="A cartoon cactus looking at the 'Astro.build' logo"
-			class="rotate-180"
-			loading="eager"
-			src={aboutImg}
-		/>
-	</div>
 </PageLayout>

src/pages/ChangeLog.astro

@@ -4,6 +4,6 @@ import PageLayout from "@/layouts/Base.astro";
 import ChangeLogComp from "@/components/ChangeLogComp.astro";
 ---
 
-<PageLayout meta={{ title: "Fuck you, this should be optional" }}>
+<PageLayout meta={{ title: "Change Log" }}>
 	<ChangeLogComp />
 </PageLayout>

src/pages/about.astro

@@ -4,6 +4,7 @@ import { Content as AboutContent } from "./data/about.md";
 ---
 
 <PageLayout meta={{ title: "About Nick" }}>
-
-	<AboutContent />
+	<article class="prose">
+		<AboutContent />
+	</article>
 </PageLayout>

src/pages/favoritestuff.astro

@@ -9,10 +9,13 @@ import MovieList from "@/components/MovieList.astro";
 		title: "Favorite Stuff",
 	}}
 >
-	<BookList />
-	<MovieList />
-	<em
-		>Any Amazon links on this page are affiliate links, and if you purchase anything using these
-		links, I will get a commission. But please feel free to use the links, as they cost you nothing.</em
-	>
+	<article class="prose">
+		<BookList />
+		<MovieList />
+		<em
+			>Any Amazon links on this page are affiliate links, and if you purchase anything using these
+			links, I will get a commission. But please feel free to use the links, as they cost you
+			nothing.</em
+		>
+	</article>
 </PageLayout>

src/pages/index.astro

@@ -6,7 +6,7 @@ import { getAllPosts, sortMDByDate } from "@/data/post";
 
 const MAX_POSTS = 10;
 const allPosts = await getAllPosts();
-const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS);
+const maxValuePosts = sortMDByDate(allPosts).slice(0, MAX_POSTS);
 ---
 
 <PageLayout meta={{ title: "Home" }}>
@@ -19,7 +19,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS);
 		<h2 class="title mb-4 text-xl">Posts</h2>
 		<ul class="space-y-4">
 			{
-				allPostsByDate.map((p) => (
+				maxValuePosts.map((p) => (
 					<li class="flex flex-col gap-x-2 sm:flex-row">
 						<PostPreview post={p} />
 					</li>

src/pages/quotes.astro

@@ -1,9 +1,10 @@
 ---
 import Quotations from "@/components/Quotations.astro";
 import PageLayout from "@/layouts/Base.astro";
-
 ---
 
 <PageLayout meta={{ title: "Some of my Favorite Quotes" }}>
-	<Quotations />
+	<article class="prose">
+		<Quotations />
+	</article>
 </PageLayout>

src/styles/global.css

@@ -32,4 +32,12 @@
 	body {
 		@apply mx-auto flex min-h-screen max-w-3xl flex-col bg-bgColor px-8 pt-16 font-mono text-sm font-normal text-textColor antialiased;
 	}
+
+	table {
+		@apply w-full border-collapse border border-gray-400;
+	}
+	th,
+	td {
+		@apply border border-gray-400 p-2;
+	}
 }

tsconfig.json

@@ -11,7 +11,7 @@
 			"@/utils": ["src/utils/index.ts"],
 			"@/types": ["src/types.ts"],
 			"@/site-config": ["src/site.config.ts"],
-			"@/pagedata/*": ["src/pages/data/*"]
+			"@/pagedata/*": ["src/content/data/*"]
 		}
 	},
 	"exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]