weeee

src/components/blog/AgeWarning.astro

@@ -0,0 +1,29 @@
+---
+import { DateTime } from "luxon";
+import Notif from "../ui/Notif.astro";
+const { date } = Astro.props;
+
+const isOldPost = (date: Date) => {
+  // very much stolen from the wonderful Robb Knight (https://rknight.me)
+  return true;
+  const d = DateTime.fromISO(date.toISOString()).setZone("Europe/London");
+  return DateTime.now().diff(d, "years").years > 4;
+};
+---
+
+{
+  () => {
+    if (isOldPost) {
+      return (
+        <Notif
+          level={0}
+          heading="This post is over 4 years old"
+          icon="fa-solid fa-hand-pointer"
+          xstyle="ml-2 my-4 p-4 w-fit"
+        >
+          a
+        </Notif>
+      );
+    }
+  }
+}

src/components/home/Hero.astro

@@ -16,6 +16,7 @@ import { Content as Bio } from "~/content/bio.md";
       <Bio />
     </Prose>
   </div>
+  
   <div>
     <Image src={"https://cdn.laker.tech/images/tree.png"} alt={"tree"}  width={200} height={300}/>
   </div>

src/components/home/LatestBlogPosts.astro

@@ -3,7 +3,7 @@ import Box from "~/components/ui/Box.astro";
 import CollectionList from "~/components/lists/BlogPostList.astro";
 import StyledLink from "~/components/util/StyledLink.astro";
 ---
-<Box title="latest blog posts" icon="fa-solid fa-blog">
+<Box title="latest blog posts" icon="fa-solid fa-signature" class="w-8">
   <CollectionList limit={3} />
   <div class="py-1"></div>
   <StyledLink href="/blog">see more</StyledLink>

src/components/ui/Box.astro

@@ -6,11 +6,11 @@ interface Props {
 	class?: string;
 }
 
-const { title, description, icon, class } = Astro.props;
+const { title, description, icon, class: className } = Astro.props;
 ---
 
 <div
-	class="border-3 border-light-pu dark:border-dark-pu px-4 py-3 mt-5 w-fit rounded-br-3xl rounded-tl-3xl h-fit"
+	class={`border-3 border-light-pu dark:border-dark-pu px-4 py-3 mt-5 w-fit rounded-br-3xl rounded-tl-3xl h-fit ${className ?? ''}`}
 >
 	<span class="mb-1">
 		{icon && <i class={`fa-lg mr-1 ${icon}`} />}

src/components/ui/Header.astro

@@ -1,4 +1,5 @@
 ---
+import { getFlavourText } from "~/lib/fun";
 import Navigation from "./Navigation.astro";
 import conf from "~/site.config";
 
@@ -7,8 +8,10 @@ let headerurl = "/";
 ---
 
 <header class="md:flex md:justify-between md:items-center mb-4">
-	<h1 class="text-2xl font-bold">
+	<h1 class="text-2xl font-bold sm my-2">
+		<i class="fa-solid fa-star mr-2"></i>
 		<a href={headerurl}>{headertext}</a>
 	</h1>
+	<p class="hidden md:block">{getFlavourText()}</p>
 	<Navigation />
 </header>

src/components/ui/Navigation.astro

@@ -23,7 +23,7 @@ const headerLinks = [
   {
     label: "Blog",
     href: "/blog",
-    icon: "fa-solid fa-star",
+    icon: "fa-solid fa-signature",
   },
   {
     label: "Contact",
@@ -38,7 +38,7 @@ const headerLinks = [
 ];
 ---
 
-<nav class="flex flex-row gap-4">
+<nav class="flex flex-row flex-wrap gap-4 md:flex-nowrap">
   {
     headerLinks.map((link) => (
       <span class="">

src/components/ui/Notif.astro

@@ -16,7 +16,7 @@ const { level, icon, heading, xstyle } = Astro.props;
 ---
 
 <div
-	class={clsx(`sm:block md:hidden text-black ${xstyle}`, {
+	class={clsx(`text-black ${xstyle}`, {
 		"bg-light-ye dark:bg-dark-ye": level === 0,
 		"bg-light-or dark:bg-dark-or": level === 1,
 		"bg-light-re dark:bg-dark-re": level === 2,

src/components/ui/Prose.astro

@@ -3,7 +3,7 @@
 ---
 
 <div
-  class="prose dark:prose-invert prose-p:text-light-tx dark:prose-p:text-dark-tx prose-headings:mt-1 prose-a:decoration-dotted prose-a:text-light-tx dark:prose-a:text-dark-tx prose-a:underline-offset-4 prose-a:decoration-2 prose-a:underline prose-a:decoration-light-pu dark:prose-a:decoration-dark-pu prose-strong:text-light-tx dark:prose-strong:text-dark-tx prose-code:font-mono"
+  class="prose dark:prose-invert prose-p:text-light-tx dark:prose-p:text-dark-tx prose-headings:mt-1 prose-a:decoration-dotted prose-a:text-light-tx dark:prose-a:text-dark-tx prose-a:underline-offset-4 prose-a:decoration-2 prose-a:underline prose-a:decoration-light-pu dark:prose-a:decoration-dark-pu prose-strong:text-light-tx dark:prose-strong:text-dark-tx prose-code:font-mono prose-ul:list-outside"
 >
   <slot />
 </div>

src/components/ui/Strapline.astro

@@ -5,7 +5,7 @@ const { title, description, icon, date } = Astro.props;
 ---
 
 <div class="mb-4 mt-6">
-  <h2 class="text-xl font-bold">
+  <h2 class="text-xl font-bold font-inter">
     <i class={`${icon} text-xl mr-2 text-light-pu dark:text-dark-pu`}></i>
     {title}
   </h2>
@@ -18,7 +18,8 @@ const { title, description, icon, date } = Astro.props;
     () => {
       if (date) {
         return (
-          <p class="mt-2 text-sm text-light-tx-2 dark:text-dark-tx-2">
+          <p class="mt-2 ml-1.5 text-sm text-light-tx-2 dark:text-dark-tx-2">
+            <i class="fa-solid fa-calendar-days mr-2 text-light-pu dark:text-dark-pu"></i>
             <Date date={date} />
           </p>
         );

src/components/util/Head.astro

@@ -1,5 +1,6 @@
 ---
 import conf from "~/site.config.ts";
+import { Font } from "astro:assets";
 import { getClacks } from "~/lib/fun";
 import { descriptionConstructor, titleConstructor } from "~/lib/metadata";
 
@@ -35,6 +36,7 @@ const { title, description } = Astro.props;
   />
   <link href="https://cdn.laker.tech/web/fa/css/brands.css" rel="stylesheet" />
   <link href="https://cdn.laker.tech/web/fa/css/solid.css" rel="stylesheet" />
+  <Font cssVariable="--fontapi-inter" preload />
 
   {/* analytics */}
 

src/components/util/SizeWarning.astro

@@ -2,7 +2,7 @@
 import Notif from "../ui/Notif.astro";
 ---
 
-<Notif level={1}>
-	<p>This view port may be too small.</p>
-	<p>Try ivyneeds.rest on a bigger screen.</p>
+<Notif level={1} xstyle="sm:block md:hidden">
+  <p>This viewport may be too small.</p>
+  <p>Try ivy.rs on a bigger screen.</p>
 </Notif>

src/content/blog/appdefaults2504.md

@@ -8,22 +8,27 @@ tags:
 icon: fa-solid fa-phone
 ---
 
-- Email:
-- Client: Fastmail Web Client, Mail.app on iOS
-- Server: Fastmail, Gmail (personal), Outlook (college)
-- Notes: Obsidian (personal), Notes.app (family)
-- Todo: My bullet journal + Things
-- Photo Taking / Management: Camera.app / Photos.app
+- Email Client: Fastmail Web Client, Mail.app on iOS
+- Email Server: Fastmail, Outlook (college)
+---
+- Notes: Obsidian
+- To-do: My Bullet Journal + Things
 - Calendar: Calendar.app
-- Cloud Storage: iCloud (personal, family) / Office 365 (college)
-- RSS reader: [Miniflux] / New Reeder
-- Browser: still using Arc and will be until it fades into the aether
-- Chat: Discord, IRC (through chat.sr.ht), Facebook Messenger (for one group chat)
-- Bookmarks / Read It Later: Linkding
+---
+- Photo Taking / Management: Camera.app / Photos.app
+- Cloud Storage: iCloud / Office 365 (college)
+---
+- Browser: Arc (stil) 
+- Chat: Discord, IRC (through chat.sr.ht)
+---
 - Word Processing: iA Writer / Obsidian
 - Spreadsheets: Google Sheets (once in a blue moon)
 - Presentations: Obsidian (with Advanced Slides plugin)
 - Budgeting & Personal Finance: Spreadsheet
+---
+- Bookmarks / Read It Later: Linkding
+- RSS reader: Miniflux / New Reeder
 - News: my RSS reader
+---
 - Music: Apple Music
-- Podcasts: Overcastp
+- Podcasts: Overcast

src/content/blog/code.md

@@ -0,0 +1,10 @@
+---
+title: A Blog Post With Some Code
+description: meow
+tags: 
+    - code
+---
+
+```js
+console.log("tinker tailor soldier spy");
+```

src/content/blog/hello-hello.md

@@ -4,6 +4,7 @@ description: '"Looking pretty good for a dead bitch"'
 date: 2025-04-24
 tags: 
     - meta
+    - web
 ---
 
-I’m back! 
+Hi! Welcome to my new website. We're on a version number high enough that I don't even care anymore.

src/data/flavourtext.json

@@ -4,8 +4,8 @@
   "all your base are belong to us!",
   "must construct additional pylons",
   "Everybody's dead, Dave.",
-  "Stay strange and be ace -- Yard Act",
-  "I'm a rocketman!",
+  "Stay strange and be ace",
+  "I'm a rocket(wo)man!",
   "It's a fixer-upper!",
   "💜",
   "Sibelius crashed",

src/layouts/Base.astro

@@ -3,15 +3,24 @@ import "~/styles/global.css";
 import Head from "~/components/util/Head.astro";
 import { ClientRouter } from "astro:transitions";
 import SizeWarning from "~/components/util/SizeWarning.astro";
+import { isProd } from "~/lib/util";
+import Notif from "~/components/ui/Notif.astro";
 
 const { title, date, description } = Astro.props;
 ---
 
-<html class="bg-light-bg text-light-tx dark:bg-dark-bg dark:text-dark-tx">
+<html class="font-inter bg-light-bg text-light-tx dark:bg-dark-bg dark:text-dark-tx">
   <Head title={title} date={date} description={description} />
   <body class="pl-1 md:px-24 sm:pt-2 md:pt-6">
     <ClientRouter />
     <SizeWarning />
+    { 
+      () => {
+        if (!isProd()) {
+          return <Notif level={0} xstyle="w-fit p-2 mb-2">dev mode, hang tight</Notif>;
+        }
+      } 
+    }
     <slot />
   </body>
 </html>

src/layouts/Page.astro

@@ -9,7 +9,7 @@ const { title, description, icon, date } = Astro.props;
 <Layout title={title} description={description} date={date}>
   <div>
     <Header />
-    <main class="pr-48">
+    <main class="pr-48 lg:pl-1">
       <Strapline title={title} description={description} icon={icon} date={date} />
       <slot />
     </main>

src/lib/util.ts

@@ -0,0 +1,4 @@
+export function isProd() {
+    if (import.meta.env.PROD == true) return true
+    return false
+}

src/pages/blog/[id].astro

@@ -1,6 +1,8 @@
 ---
 import Page from "~/layouts/Page.astro";
+import Prose from "~/components/ui/Prose.astro"
 import { getCollection, render } from "astro:content";
+import AgeWarning from "~/components/blog/AgeWarning.astro";
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -20,5 +22,22 @@ const { Content } = await render(post);
   date={post.data.date}
   icon={post.data.icon}
 >
-  <Content />
+  <AgeWarning />
+  <Prose>
+    <Content />
+  </Prose>
+
+  <div class="mt-4">
+    <i class="fa-solid fa-hashtag mr-1"></i>
+    {
+      (post.data.tags ?? []).map((tag) => (
+        <a
+          class="bg-light-pu dark:bg-dark-pu hover:bg-light-ma hover:dark:bg-dark-ma transition-colors text-white px-1 py-0.5 mr-2 last:mr-0 rounded-md text-center inline-block"
+          href={`/blog/tags/${tag}`}
+        >
+          {tag}
+        </a>
+      ))
+    }
+  </div>
 </Page>

src/pages/blog/index.astro

@@ -6,7 +6,7 @@ import BlogPostList from "~/components/lists/BlogPostList.astro";
 <Page
   title="Blog"
   description="writing"
-  icon="fa-solid fa-star"
+  icon="fa-solid fa-signature"
 >
   <BlogPostList />
 </Page>

src/site.config.ts

@@ -8,7 +8,7 @@ export default {
   author: {
     name: "Ivy Turner",
     fedi: "@ivy@social.lol",
-    email: "ivy@sorbet.gay",
+    email: "ivy@ivy.rs",
   },
 
   devMode: {

src/styles/global.css

@@ -193,6 +193,7 @@
     --color-dark-ma-2: var(--color-magenta-600);
 
     --color-accent: light-dark(var(--color-light-pu), var(--color-dark-pu));
+    --font-inter: var(--fontapi-inter)
 }
 
 .link {