Merge branch '2024-01-11-release' of https://github.com/crowdozer/mai…

…nframe into 2024-01-11-release

astro.config.mjs

@@ -1,13 +1,15 @@
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import react from '@astrojs/react';
+import compressor from "astro-compressor";
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [
 		tailwind({
 			applyBaseStyles: false,
 		}),
-		react(),
+        compressor(),
+		// react(),
 	],
 });

package.json

@@ -19,6 +19,7 @@
     "@uiw/codemirror-theme-monokai": "^4.21.18",
     "@uiw/react-codemirror": "^4.21.18",
     "astro": "^3.0.7",
+    "astro-compressor": "^0.4.1",
     "astro-icon": "^0.8.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

readme.md

@@ -15,3 +15,4 @@ My personal site. You can take whatever you want from it.
 
 - Multiplayer Typing Test
 - Multiplayer Cursors
+- Use retro chat SFX or retro SFX in general.

src/components/Card.astro

@@ -3,15 +3,14 @@ import clsx from 'clsx'
 
 interface Props {
 	padding?: string
+	classes?: string
 }
 
-const { padding = 'p-2 px-3' } = Astro.props
+const { padding = 'p-2 px-3', classes = '' } = Astro.props
 ---
 
-<div class="relative border border-dotted border-neutral-400">
-	<div class="absolute bottom-0 left-0 right-0 top-0 z-[0] bg-neutral-950/75">
-	</div>
-	<div class={clsx('relative z-[1]', padding)}>
+<div class={clsx('relative border border-dotted border-neutral-400', classes)}>
+	<div class={clsx('relative', padding)}>
 		<slot />
 	</div>
 </div>

src/components/EmojiList.astro

@@ -0,0 +1,37 @@
+---
+import clsx from 'clsx'
+
+interface Props {
+	emoji: string
+	ulClasses?: string
+}
+
+const { emoji, ulClasses = '' } = Astro.props
+
+// generate a random ID so we can do some scoped css
+const id = `emoji-list-${crypto.randomUUID()}`
+---
+
+<ul {id} class={clsx(id, ulClasses)}>
+	<slot />
+</ul>
+
+<script define:vars={{ emoji, id }}>
+	;(() => {
+		// we can't target these easily with the tools astro provides
+		// so hack in some custom css scoped to this component
+		const items = document.querySelectorAll(`ul#${id} li`)
+
+		items.forEach((item) => {
+			item.classList.add(`emoji-list-${id}-li`)
+		})
+
+		var styleElem = document.head.appendChild(document.createElement('style'))
+		styleElem.innerHTML = `
+            ul#${id} li::before {
+                content: "${emoji}";
+                margin-right: 0.5rem;
+            }
+        `
+	})()
+</script>

src/components/Homepage/AboutMe.astro

@@ -2,21 +2,21 @@
 
 ---
 
-<p>I have been building full-stack web apps since 2012 🚀</p>
+<p>Everything here is post-scriptive, not pre-scriptive</p>
+<p></p>
 <ul>
-	<li>- Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
-	<li>- Quos rerum animi eum voluptatibus assumenda cumque illum</li>
-	<li>- Ullam mollitia esse facilis maiores perferendis cum nemo nulla</li>
-	<li>- Iusto omnis labore odio illum possimus vel</li>
-	<li>- Aut facilis impedit pariatur velit, minima</li>
-	<li>- Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
-	<li>- Quos rerum animi eum voluptatibus assumenda cumque illum</li>
-	<li>- Ullam mollitia esse facilis maiores</li>
-	<li>- Iusto omnis labore odio illum possimus vel</li>
-	<li>- Aut facilis impedit pariatur velit, minima itaque</li>
+	<li>- I currently work for Spry Digital</li>
+	<li>- I have been building full-stack web apps since 2012 🚀</li>
+	<li>- I prefer to build with Astro and Tailwind</li>
+	<li>
+		- Mass Effect, Larian Studios, Minecraft, Overwatch, Cities Skylines,
+		Automation, Kerbal Space Program 👽
+	</li>
+	<li>
+		- Music genre means nothing to me. I listen to songs on repeat until I get
+		sick of them.
+	</li>
+	<li>- Dragonball, ATLA, Darker than Black, Naruto</li>
+	<li>- You'll never convince me of your opinion. I bikeshed better.</li>
+	<li>- 🍃 Zen thoughts 🎋</li>
 </ul>
-<p>
-	I love strategy, FPS and roleplaying games. I've dedicated a huge portion of
-	my life to honing my skills, whether it be getting better at my favorite games
-	like Overwatch, or refining my technical skills.
-</p>

src/components/Homepage/BlogLinks.astro

@@ -1,9 +1,16 @@
 ---
+import EmojiList from '../EmojiList.astro'
+import ViewMore from '../ViewMore.astro'
+
 const links: [string, string, Date][] = [
 	['Lorem ipsum dolor sit', '/blog/lorem', new Date()],
 	['Incidunt, iure. Dolor obcaecati', '/blog/lorem', new Date()],
 	['Asperiores cum voluptatem, doloremque', '/blog/lorem', new Date()],
-	['Consequatur neque aliquam esse et amet', '/blog/lorem', new Date()],
+	[
+		'Consequatur neque aliquam esse et amet. This one is super duper extra long! asdfpasdjfna aspdfjna spdaf asdf ajsondfp',
+		'/blog/lorem',
+		new Date(),
+	],
 	['Voluptatum dicta esse nesciunt', '/blog/lorem', new Date()],
 	['Omnis nihil minus nam in sunt', '/blog/lorem', new Date()],
 	['Officiis fugiat iure illo', '/blog/lorem', new Date()],
@@ -12,21 +19,21 @@ const links: [string, string, Date][] = [
 ---
 
 <div class="space-y-4">
-	<ul>
+	<EmojiList emoji="✏️">
 		{
 			links.map(([text, link, date]) => (
 				<li>
-					- <a href={link}>{text}</a> - posted {date.toLocaleString()}
+					<a class="inline" href={link}>
+						{text}
+					</a>
+					<span class="inline text-neutral-400">
+						{' @ '}
+						{date.toLocaleString()}
+					</span>
 				</li>
 			))
 		}
-	</ul>
+	</EmojiList>
 
-	<p>
-		<a href="/blog">view more</a>
-		{' • '}
-		<a href="/rss">subscribe via rss</a>
-		{' • '}
-		<a href="/json">subscribe via json</a>
-	</p>
+	<ViewMore urlbase="/blog" rss json text="view 14 more" />
 </div>

src/components/Homepage/EmploymentStatus.astro

@@ -1,13 +1,13 @@
 ---
-const lfw = false
+const lfw = 0
 ---
 
 <div class="space-y-1">
 	{
 		lfw ? (
 			<>
-				<div class=" bg-green-500/10">
-					<span id="lfw-indicator">🟢</span> looking for work
+				<div class=" bg-yellow-500/10">
+					<span id="lfw-indicator">🟡</span> looking for work
 				</div>
 				<div>⚫ employed</div>
 			</>
@@ -21,9 +21,8 @@ const lfw = false
 		)
 	}
 </div>
-<div class="flex flex-row gap-2">
-	<a href="/contact">contact anyway</a>
-</div>
+
+<a href="/contact">contact anyway</a>
 
 <script>
 	;(() => {

src/components/LayoutHelpers/Header.astro

@@ -4,7 +4,9 @@ import QuoteOfTheDay from './QuoteOfTheDay.astro'
 const buttonId = Math.random().toString(36)
 ---
 
-<header class="space-y-0 bg-neutral-950">
+<header
+	class="space-y-0 border-b border-dashed border-neutral-400 bg-neutral-950"
+>
 	<nav class="max-w-[100vw] overflow-x-auto">
 		<div class="flex w-[900px] flex-row">
 			<a href="/">home</a>
@@ -14,24 +16,25 @@ const buttonId = Math.random().toString(36)
 			<button id={buttonId}>wtf</button>
 		</div>
 	</nav>
-	<div class="border border-t-0 border-dotted border-neutral-400">
+	<div class="border-l border-r border-dotted border-neutral-400">
 		<QuoteOfTheDay />
 	</div>
 </header>
 
 <script define:vars={{ buttonId }}>
 	const button = document.getElementById(buttonId)
 	button.addEventListener('click', function () {
-		window.alert('clicked')
+		window.alert('what?')
 	})
 </script>
 
 <style>
 	nav button,
 	nav a {
-		@apply grow cursor-pointer border border-r-0  border-neutral-400 bg-neutral-300 px-4 py-2 text-center text-2xl font-extrabold uppercase text-black no-underline last:border-r hover:border-solid hover:bg-neutral-400 hover:text-white  active:bg-neutral-500;
-
-		/* @apply grow cursor-pointer border border-r-0 border-dotted border-neutral-400 bg-transparent px-4 py-2 text-center text-2xl font-extrabold uppercase text-amber-500 no-underline last:border-r  hover:border-solid hover:border-amber-500 hover:bg-amber-500 hover:text-black active:bg-amber-600; */
+		@apply grow cursor-pointer border border-r-0  border-neutral-400 bg-neutral-300 px-4 py-2 text-center text-2xl font-extrabold uppercase text-black no-underline;
+		@apply first:border-l-0 last:border-r-0;
+		@apply hover:border-solid hover:bg-neutral-400 hover:text-white;
+		@apply active:bg-neutral-500;
 	}
 	nav {
 		scrollbar-width: none; /* Firefox */

src/components/LayoutHelpers/SidebarChangelog.astro

@@ -0,0 +1,12 @@
+---
+import EmojiList from '../EmojiList.astro'
+import ViewMore from '../ViewMore.astro'
+---
+
+<EmojiList emoji="🔧">
+	<li><a href="/git/1" class="inline text-ellipsis">2024 01 01</a></li>
+	<li><a href="/git/2" class="inline text-ellipsis">2023 12 31</a></li>
+	<li><a href="/git/3" class="inline text-ellipsis">2023 12 30</a></li>
+</EmojiList>
+
+<ViewMore urlbase="/git" rss json text="view 12 more" />

src/components/LayoutHelpers/SidebarContent.astro

@@ -1,30 +1,33 @@
 ---
-import Icon from 'astro-icon'
 import Card from '../Card.astro'
 import EmploymentStatus from '@/components/Homepage/EmploymentStatus.astro'
+import SidebarNews from '@/components/LayoutHelpers/SidebarNews.astro'
+import SidebarChangelog from '@/components/LayoutHelpers/SidebarChangelog.astro'
+import { STATUS_EMOJI, STATUS_TEXT } from '@/content'
 ---
 
 <Card>
 	<div class="space-y-2">
-		<h5>💵 hire me</h5>
+		<h5>{STATUS_EMOJI} status</h5>
+		<p>{STATUS_TEXT}</p>
+	</div>
+</Card>
+<Card>
+	<div class="space-y-2">
+		<h5>🔖 conscript me</h5>
 		<EmploymentStatus />
 	</div>
 </Card>
 <Card>
 	<div class="space-y-2">
 		<h5>📰 news</h5>
-		<ul>
-			<li>asdfasd fasdf</li>
-			<li>asdfasd fasdf</li>
-			<li>asdfasd fasdf</li>
-			<li>asdfasd fasdf</li>
-		</ul>
+		<SidebarNews />
 	</div>
 </Card>
 <Card>
 	<div class="space-y-2">
-		<h5><Icon name="mdi:bell" width="2rem" class="inline-block" /> status</h5>
-		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+		<h5>📈 changelog</h5>
+		<SidebarChangelog />
 	</div>
 </Card>
 <Card>
@@ -33,3 +36,11 @@ import EmploymentStatus from '@/components/Homepage/EmploymentStatus.astro'
 		<p>Dicta, deserunt facilis</p>
 	</div>
 </Card>
+<Card>
+	<img
+		src="/images/son-goku-wave.webp"
+		alt="son goku waving goodbye"
+		loading="lazy"
+		class="max-h-[120px] w-full object-cover"
+	/>
+</Card>

src/components/LayoutHelpers/SidebarNews.astro

@@ -0,0 +1,27 @@
+---
+import EmojiList from '../EmojiList.astro'
+import ViewMore from '../ViewMore.astro'
+---
+
+<EmojiList emoji="🗞️">
+	<li class="line-clamp-1">
+		<a href="/news/1" class="inline text-ellipsis">Lorem ipsum, dolor sit</a>
+	</li>
+	<li class="line-clamp-1">
+		<a href="/news/2" class="inline text-ellipsis"
+			>Dolore, quasi minus! Perferendis</a
+		>
+	</li>
+	<li class="line-clamp-1">
+		<a href="/news/3" class="inline text-ellipsis"
+			>Quam magni nisi error culpa quasi</a
+		>
+	</li>
+	<li class="line-clamp-1">
+		<a href="/news/4" class="inline text-ellipsis"
+			>Aspernatur illo similique cumque</a
+		>
+	</li>
+</EmojiList>
+
+<ViewMore urlbase="/news" rss json text="view 4 more" />

src/components/ViewMore.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+	urlbase: string
+	text: string
+	rss?: boolean
+	json?: boolean
+}
+const { urlbase, text, rss = false, json = false } = Astro.props
+---
+
+<div class="flex flex-row justify-between">
+	<a href={`${urlbase}`} class="">{text}</a>
+	<span>
+		{
+			rss && (
+				<a href={`${urlbase}/rss`} class="text-green-500">
+					rss
+				</a>
+			)
+		}
+		{
+			json && (
+				<>
+					{' • '}
+					<a href={`${urlbase}/json`} class="text-yellow-500">
+						json
+					</a>
+				</>
+			)
+		}
+	</span>
+</div>

src/content.ts

@@ -0,0 +1,2 @@
+export const STATUS_EMOJI = '🤔'
+export const STATUS_TEXT = 'wondering if this rebuild was actually a good idea'