Finally finish this enough to post

From here I will actually track changed with git but I just needed a base to work from.

RIP this attomic ass commit

astro.config.mjs

@@ -1,5 +1,12 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 
+import preact from "@astrojs/preact";
+
+import tailwind from "@astrojs/tailwind";
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  site: "https://aria.coffee",
+  integrations: [preact(), tailwind()]
+});

package.json

@@ -9,6 +9,19 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.0.5"
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/preact": "^4.0.0",
+    "@astrojs/rss": "^4.0.10",
+    "@astrojs/tailwind": "^5.1.3",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "astro": "^5.0.5",
+    "preact": "^10.25.2",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15"
   }
-}
+}

public/static/TODO/MiyukoButtonCache.md

@@ -0,0 +1,70 @@
+
+> I use @11ty/eleventy-fetch for downloading the button images
+
+> I have a `buttons_.yml` file in the same directory as this file, the root is an array of arrays so all buttons are split into tiers. plus the files that go into the build directory get a hash sum in their filename
+
+```js
+import * as crypto from 'node:crypto'
+import * as fs from 'node:fs/promises'
+import * as path from 'node:path'
+import * as yaml from 'yaml'
+import eleventyFetch from '@11ty/eleventy-fetch'
+import { getURLHostname } from '../utils'
+import buttonsFile from './buttons_.yml?raw'
+
+async function process(buttons) {
+  buttons = await Promise.all(buttons.map(async button => {
+    let image
+    if (button.image.startsWith('./')) {
+      image = await fs.readFile(button.image)
+    } else {
+      image = await eleventyFetch(button.image, {
+        duration: '1w',
+      })
+    }
+    let hash = crypto.createHash('sha512')
+    hash.update(image)
+    let suffix = hash.digest('hex').slice(0, 12)
+    let imageURL = `/buttons/${button.ident}-${suffix}`
+    let imagePath = `public/${imageURL}`
+    await fs.mkdir(path.dirname(imagePath), { recursive: true })
+    await fs.writeFile(imagePath, image)
+
+    return {
+      width: 88,
+      height: 31,
+      ...button,
+      alt: button.alt,
+      image: imageURL,
+      originalImage: button.image,
+    }
+  }))
+
+  buttons = buttons.toSorted((a, b) => {
+    if (a.priority !== b.priority) {
+      return a.priority - b.priority
+    }
+
+    let aHost = getURLHostname(a.url)
+    let bHost = getURLHostname(b.url)
+
+    if (aHost < bHost) {
+      return -1
+    } else if (aHost > bHost) {
+      return 1
+    } else {
+      return 0
+    }
+  })
+
+  return buttons
+}
+
+let tiers = yaml.parse(buttonsFile)
+
+export const buttons = await Promise.all(
+  tiers.map(tier => process(tier)),
+)
+
+export const buttonsFlattened = buttons.flat()
+``

src/blog/post-1.md

@@ -0,0 +1,53 @@
+---
+title: 'The beginning (Again)'
+pubDate: 2024-12-17T00:49:00.000+11
+description: 'This is the first post of my new website.'
+author: 'Aria'
+tags: ["blogging", "learning in public", "development"]
+---
+
+I'll be expanding this as I work on it but for now this is my first more indepth website
+
+## The What
+
+Well that's simple to explain; It's a website and you're browing it now lol.
+
+## The Why
+
+Recently I joined a community for some very **🏳️‍⚧️**(mostly, there are many people of different identities there!) and it's full of many very techinical people. It's a cosy little community and I feel genuinely welcome there.
+
+We where discussing domain names and this one wasn't owned! I'm addicted to coffee so it seemed like the perfect fit for me~
+
+![A picture of the "Order Confirmed" pafe from cloudflair](/static/img/blog/aira.coffee-cloudflair-alldone.png)
+
+After purchasing I needed to decide what I wanted to do with it, for a little over a day (Until not long before I started to write this) it just redirected to my [BlueSky](https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn) account.
+
+I eventually got inspired by both [Alyxia](https://alyxia.dev/) and [Annie's](https://buh.moe/) websites. Finally convinced to make something from scratch I made the website you're looking at now!
+
+This has been my first time working mostly from scratch to make my personal website, more on that described bellow!
+
+## The How
+
+This website was made using [Astro](https://astro.build/) for the build system and I decided to use [Tailwind](https://tailwindcss.com/) instead of basing my own css off Annie's after she convinced me.
+
+![A discord screenshot containing the following messages: Sent by @BuyMyMojo: "getting my brain around css and styling hurts, I'm man handling some of your css @amemoia", Sent by @amemoia: "DONT LOOK AT MY CSS ITS SO BAD", "EVERYTHING HAS ITS OWN CLASS", "USE A FRAMEWORK"](/static/img/blog/UseAFramework_20241217_002719.png)
+
+While I got started early on following the basic [blog tutorial](https://docs.astro.build/en/tutorial/0-introduction/) but took a break to make my very first 88x31px button!
+
+![88x31 pixel button with the text 'Aria' and the top half of a human human face on the right hand side](https://web.archive.org/web/20241216133507if_/https://dev.aria.coffee/static/img/buttons/aria.gif)
+<sub>This is a version of the image hosted on archive.org so the blog doesn't change</sub>
+
+I made it pretty quickly in Krita using the lovely picute of me which was drawn by Auryn!
+
+88x31 buttons have a history that I wont get into here, you can read more [here](https://tekeye.uk/computer_history/powered-by) and if you'd like to see thhe buttons of my friends then go to the [friends page](/friends)
+<sub>If you wanna exchange buttons shoot me a message on <a href="https://discord.com/users/383507911160233985" target="_blank">discord!</a></sub>
+
+## Final thoughts
+
+I am very greatful for these goobers who have inspured, ecouraged and debugged with me on this website, there is still a lot for me to learn about web development and more to discover about myself honestly.
+
+I plan to make this website an outlet for a lot of my learning ~~along with my already mentioned BlueSky~~ and I hope you'll stick around.
+
+### What's next?
+
+Not sure, I kinda wanna figure out how to add emotes like discord into these blogs because I'm an internet degenerate who feels the ned to put emoted in every message I send, after that I might try to style the website a bit more but I think it's in an *alright* place for now lol

src/components/BlogEntry.astro

@@ -0,0 +1,4 @@
+---
+const { url, title, date } = Astro.props;
+---
+<li>- <a href={url}>{title}</a><sub> - {date}</sub></li>

src/components/EmbedCode.astro

@@ -0,0 +1,12 @@
+---
+const description = "Just my little website do be gay and do crime on~";
+const embedImage = "https://aria.coffee/static/img/sites/avatar.png";
+const embedColour = "#380A84"
+
+const { pageTitle } = Astro.props;
+---
+<meta content={pageTitle} property="og:title" />
+<meta content={description} property="og:description" />
+<meta content={Astro.site} property="og:url" />
+<meta content={embedImage} property="og:image" />
+<meta content={embedColour} data-react-helmet="true" name="theme-color" />

src/components/Favicon.astro

@@ -1,3 +1,4 @@
+<meta charset="utf-8" />
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

src/components/Footer.astro

@@ -1,18 +1,32 @@
 ---
 const buttonFormat = "gif";
 
-import Social from './Social.astro';
+import { library, icon } from "@fortawesome/fontawesome-svg-core";
+import { faCodeBranch, faRss } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faCodeBranch, faRss);
+
+const sourceCodeIcon = icon({ prefix: "fas", iconName: faCodeBranch.iconName });
+const rssIcon = icon({ prefix: "fas", iconName: faRss.iconName });
 ---
-
-<style>
-  footer {
-    display: flex;
-    gap: 1rem;
-    margin-top: 2rem;
+<hr class="h-1" style="" />
+<footer class="flexcol">
+  <div class="flexrow">
+    <p>
+      <a href="https://github.com/BuyMyMojo/aria.coffee" target="_blank"
+      ><Fragment set:html={sourceCodeIcon.html} /> Source Code</a> | <a href="https://aria.coffee/rss.xml" target="_blank"
+      ><Fragment set:html={rssIcon.html} /> RSS Feed</a>
+    </p>
+  </div>
+  <img class="badge" src={`/static/img/buttons/aria.${buttonFormat}`} decoding="async" alt="88x31 pixel button with the text 'Aria' and the top half of a human human face on the right hand side" />
+</footer>
+<style is:global>
+  /* Declare a custom CSS class to make the icon look right */
+  .svg-inline--fa {
+      overflow: visible;
+      box-sizing: content-box;
+      display: inline-block;
+      height: 1em;
+      vertical-align: -0.125em;
   }
-</style>
-
-<footer>
-  <img class="badge" src={`/static/img/buttons/aria.${buttonFormat}`} decoding="async" />
-  <Social />
-</footer>
+</style>

src/components/Greeting.jsx

@@ -0,0 +1,17 @@
+import { useState } from 'preact/hooks';
+
+export default function Greeting({messages}) {
+
+  const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];
+
+  const [greeting, setGreeting] = useState(messages[0]);
+
+  return (
+    <div>
+      <h3>{greeting}! Thank you for visiting!</h3>
+      <button class="greetButton px-2 rounded-xl" onClick={() => setGreeting(randomMessage())}>
+        New Greeting
+      </button>
+    </div>
+  );
+}

src/components/NavHeader.astro

@@ -0,0 +1,29 @@
+---
+import { Image } from "astro:assets";
+import pfp from "../img/sites/avatar.png";
+import Partition from "./Partition.astro";
+---
+
+<div
+    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center backdrop-blur-3xl bg-center bg-[url('/static/img/sites/avatar-ht-f.webp')]"
+    style="width: 670px; border: 1px solid var(--border);"
+    >
+    <Image
+        src={pfp}
+        class="size-40 rounded-full shadow shadow-black m-4"
+        alt="Arias's profile picture"
+    />
+    <div
+        class="flex-row p-3 gap-4 text-center text-3xl"
+    >
+        <h2 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2 mb-1">Aria (Aka: Mojo)</h2>
+        <h3 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2">🏳️‍🌈 🏳️‍⚧️ • she/her</h3>
+    </div>
+</div>
+<Partition>
+    <a href="/" class="nav-btn">Home</a> |
+    <a href="/blog" class="nav-btn">Blog</a> |
+    <a href="/about" class="nav-btn">About</a> |
+    <a href="/tags" class="nav-btn">Tags</a> |
+    <a href="/friends" class="nav-btn">Friends</a>
+</Partition>

src/components/Navigation.astro

@@ -1,6 +0,0 @@
-<div class="nav-links">
-    <a href="/">Home</a>
-    <a href="/about">About</a>
-    <a href="/blog">Blog</a>
-    <a href="/friends">Friends</a>
-  </div>

src/components/Partition.astro

@@ -0,0 +1,10 @@
+---
+
+---
+
+<div
+    class="rounded-xl flex-row p-4 mb-4 shadow"
+    style="width: 670px; border: 1px solid var(--border); background-color: var(--third-colour);"
+>
+    <slot />
+</div>

src/components/Social.astro

@@ -1,12 +1,68 @@
-<a href="https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn">Bluesky</a>
-<a href="https://buymymojo.net/twitter/">Twitter(Archive)</a>
+---
+const twitterArchive = "https://buymymojo.net/twitter/";
+const discord = "https://discord.com/users/383507911160233985";
+const github = "https://github.com/BuyMyMojo";
+const steam = "https://steamcommunity.com/profiles/76561198227003516";
+const bsky = "https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn";
+const bskyArchive = "https://buymymojo.net/bsky/";
+---
 
-<style>
-    a {
-      padding: 0.5rem 1rem;
-      color: white;
-      background-color: #4c1d95;
-      text-decoration: none;
-      border-radius: 8px;
+<h1>Places to find and/or contact me:</h1>
+<ul class="list-disc p-4">
+    <li>
+        <a href={bsky} class="p-1" target="_blank"
+            ><i class="fa-brands fa-bluesky"></i> Bluesky</a
+        > - <button id="bskypid"
+            >@femgo.buymymojo.net (Click to copy DID)</button
+        >
+    </li>
+    <li>
+        <a href={discord} target="_blank"
+            ><i class="fa-brands fa-discord"></i> Discord</a
+        > - @buymymojo
+    </li>
+    <li>
+      <a href={github} target="_blank"
+          ><i class="fa-brands fa-github"></i> GitHub</a
+      > - @BuyMyMojo
+  </li>
+  <li>
+    <a href={steam} target="_blank"
+        ><i class="fa-brands fa-steam"></i> Steam</a
+    > - @BuyMyMojo
+</li>
+</ul>
+<br />
+<h2>Archives:</h2>
+<ul class="list-disc p-4">
+    <li>
+        <a href={bskyArchive} class="p-1" target="_blank"
+            ><i class="fa-brands fa-bluesky"></i> Bluesky(Archive)</a
+        >
+    </li>
+    <li>
+        <a href={twitterArchive} class="p-1" target="_blank"
+            ><i class="fa-brands fa-twitter"></i> Twitter(Archive)</a
+        >
+    </li>
+</ul>
+
+<style is:global>
+    /* Declare a custom CSS class to make the icon look right */
+    .svg-inline--fa {
+        overflow: visible;
+        box-sizing: content-box;
+        display: inline-block;
+        height: 1em;
+        vertical-align: -0.125em;
     }
-  </style>
+</style>
+<script>
+    const bskypid = document.querySelector("#bskypid");
+
+    if (bskypid != null) {
+        bskypid.addEventListener("click", () => {
+            navigator.clipboard.writeText("did:plc:bzrn33tcfgjxnsanvg6py3xn");
+        });
+    }
+</script>

src/content.config.ts

@@ -0,0 +1,17 @@
+// Import the glob loader
+import { glob } from "astro/loaders";
+// Import utilities from `astro:content`
+import { z, defineCollection } from "astro:content";
+// Define a `loader` and `schema` for each collection
+const blog = defineCollection({
+    loader: glob({ pattern: '**/[^_]*.md', base: "./src/blog" }),
+    schema: z.object({
+      title: z.string(),
+      pubDate: z.date(),
+      description: z.string(),
+      author: z.string(),
+      tags: z.array(z.string())
+    })
+});
+// Export a single `collections` object to register your collection(s)
+export const collections = { blog };

src/layouts/BaseLayout.astro

@@ -1,25 +1,34 @@
 ---
-import Navigation from '../components/Navigation.astro';
-import Favicon from '../components/Favicon.astro';
-import Footer from '../components/Footer.astro';
-import '../styles/aria.css';
+import NavHeader from "../components/NavHeader.astro"
+import Favicon from "../components/Favicon.astro";
+import Footer from "../components/Footer.astro";
+import "../styles/aria.css";
+import EmbedCode from "../components/EmbedCode.astro";
 
 const { pageTitle } = Astro.props;
 ---
 
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-	<Favicon />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} >
-    <title>{pageTitle}</title>
-  </head>
-  <body>
-	<Navigation />
+    <head>
+        <Favicon />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{pageTitle}</title>
+        <EmbedCode pageTitle={pageTitle} />
 
-    <h1>{pageTitle}</h1>
-    <slot />
-	<Footer />
-  </body>
-</html>
+        <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="amemoia's blog"
+            href={new URL("rss.xml", Astro.site)}
+        />
+
+        <script is:inline defer src="https://kit.fontawesome.com/5fee770033.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+      <NavHeader />
+      <slot />
+      <Footer />
+    </body>
+</html>

src/layouts/MarkdownPostLayout.astro

@@ -0,0 +1,71 @@
+---
+import Partition from "../components/Partition.astro";
+import BaseLayout from "./BaseLayout.astro";
+const { frontmatter } = Astro.props;
+---
+
+<BaseLayout pageTitle={frontmatter.title}>
+    <Partition>
+        <p>
+            <h1 class="text-xl font-bold underline">{frontmatter.title}</h1>
+            <em>{frontmatter.description}</em><br />
+            <sub>Date: {frontmatter.pubDate.toLocaleDateString()}</sub>
+        </p>
+    </Partition>
+    <Partition>
+        <main>
+            <div
+                class="prose dark:prose-invert
+  prose-h1:font-bold prose-h1:text-xl
+  prose-a:text-[#ff98f6] prose-p:text-justify prose-img:rounded-xl
+  prose-headings:underline"
+            >
+                <slot />
+            </div>
+        </main>
+    </Partition>
+
+    <Partition>
+        <h3>tags:</h3>
+        <div class="tags">
+            {
+                frontmatter.tags.map((tag: string) => (
+                    <a href={`/tags/${tag}`}>
+                        <p class="tag">{tag}</p>
+                    </a>
+                ))
+            }
+        </div>
+    </Partition>
+
+    <footer>
+        <sub>Written by: {frontmatter.author}</sub>
+    </footer>
+</BaseLayout>
+<style>
+    a {
+        color: #b800a8;
+    }
+
+    .tags {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .tag {
+        margin: 0.25em;
+        border: dotted 1px #a1a1a1;
+        border-radius: 0.5em;
+        padding: 0.5em 1em;
+        font-size: 1.15em;
+        background-color: #f8fcfd;
+    }
+
+    .tag:hover {
+        background-color: #f8fcfd83;
+    }
+
+    .tag:active {
+        background-color: #d4f6ff;
+    }
+</style>

src/pages/about.astro

@@ -1,8 +1,8 @@
 ---
-import Navigation from '../components/Navigation.astro';
-import Favicon from '../components/Favicon.astro';
-import Footer from '../components/Footer.astro';
-import '../styles/aria.css';
+import FriendLink from "../components/FriendLink.astro";
+import Partition from "../components/Partition.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import "../styles/aria.css";
 
 const pageTitle = "About Aria";
 
@@ -16,6 +16,7 @@ const identity = {
 const skills = ["Rust", "GDScript", "FFMPEG"];
 
 const currentSystem = {
+    name: "I/O",
     operatingSystem: "EndeavourOS",
     host: "X570 Phantom Gaming 4",
     shell: "zsh",
@@ -24,39 +25,18 @@ const currentSystem = {
     cpu: "AMD Ryzen 9 5900X",
     gpu: "AMD Radeon RX 7800 XT",
     ram: "48GB",
-    localIP: "Local IP (enp4s0): 192.168.20.2/24",
+    localIP: "192.168.20.2",
 };
 
-const skillColor = "green";
+const skillColor = "#F5A8B7";
 ---
 
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <Favicon />
-        <meta name="viewport" content="width=device-width" />
-        <meta name="generator" content={Astro.generator} />
-        <title>{pageTitle}</title>
-        <style define:vars={{skillColor}}>
-            h1 {
-                color: purple;
-                font-size: 4rem;
-            }
-            .skill {
-                color: var(--skillColor);
-                font-weight: bold;
-            }
-        </style>
-    </head>
-    <body>
-        <Navigation />
-
-        <h1>{pageTitle}</h1>
-
+<BaseLayout pageTitle={pageTitle}>
+    <Partition>
         <p>It's about time I actually write up my own website right?</p>
-
-        <p>Here are a few facts about me:</p>
-        <ul>
+        <br />
+        <p class="text-2xl">Here are a few facts about me:</p>
+        <ul class="list-disc p-4">
             <li>My name is {identity.firstName}.</li>
             <li>
                 I live in {identity.country} and I work as a {
@@ -72,25 +52,71 @@ const skillColor = "green";
                 )
             }
         </ul>
-        <p>Some of my skills are:</p>
-        <ul>
+    </Partition>
+    <Partition>
+        <p class="text-2xl">Some of my skilled areas are:</p>
+        <ul class="list-disc p-4">
             {skills.map((skill) => <li class="skill">{skill}</li>)}
         </ul>
-
-        <p>My system:</p>
-        <ul>
-            <li>OS: {currentSystem.operatingSystem}</li>
-            <li>Host: {currentSystem.host}</li>
-            <li>Shell: {currentSystem.shell}</li>
+    </Partition>
+    <Partition>
+        <p class="text-2xl">My PC:</p>
+        <ul class="list-disc p-4">
             <li>
-                Main Display: <a href={currentSystem.mainDisplayRtings}
-                    >{currentSystem.mainDisplay}</a>
+                <span class="skill">Computer's Name:</span>
+                {currentSystem.name}
+            </li>
+            <li>
+                <span class="skill">OS:</span>
+                {currentSystem.operatingSystem}
+            </li>
+            <li><span class="skill">Host:</span> {currentSystem.host}</li>
+            <li><span class="skill">Shell:</span> {currentSystem.shell}</li>
+            <li>
+                <span class="skill">Main Display:</span>
+                <a href={currentSystem.mainDisplayRtings}
+                    >{currentSystem.mainDisplay}</a
+                >
+            </li>
+            <li><span class="skill">CPU:</span> {currentSystem.cpu}</li>
+            <li><span class="skill">GPU:</span> {currentSystem.gpu}</li>
+            <li><span class="skill">RAM:</span> {currentSystem.ram}</li>
+            <li>
+                <span class="skill">Local IP:</span>
+                {currentSystem.localIP}
             </li>
-            <li>CPU: {currentSystem.cpu}</li>
-            <li>GPU: {currentSystem.gpu}</li>
-            <li>RAM: {currentSystem.ram}</li>
-            <li>{currentSystem.localIP}</li>
         </ul>
-        <Footer />
-    </body>
-</html>
+    </Partition>
+
+    <Partition>
+        <h1 class="text-xl">Credits:</h1><br />
+        <ul class="list-disc p-4">
+            <li>
+                <p>
+                    Profile Picture (Which also appears in the site's button) is
+                    done by: <span class="font-extrabold text-xl">Auryn</span
+                    ><sub>[No link yet]</sub>
+                </p>
+            </li>
+            <li><p>
+                    Website inspiration: <FriendLink
+                        name="Alyxia"
+                        image="https://alyxia.dev/static/img/88x31/self.png"
+                        target="https://alyxia.dev"
+                    /> & <div class="outline-dotted w-fit"><FriendLink
+                        name="Amemoia"
+                        image="https://buh.moe/resources/buttons/88x31.gif"
+                        target="https://buh.moe/"
+                    /><sub>[Annie]</sub></div>
+                </p>
+            </li>
+        </ul>
+    </Partition>
+</BaseLayout>
+
+<style define:vars={{ skillColor }}>
+    .skill {
+        color: var(--skillColor);
+        font-weight: bold;
+    }
+</style>

src/pages/blog.astro

@@ -1,28 +1,27 @@
 ---
-import Navigation from '../components/Navigation.astro';
-import Favicon from '../components/Favicon.astro';
-import Footer from '../components/Footer.astro';
-import '../styles/aria.css';
+import { getCollection } from "astro:content";
+
+import BaseLayout from "../layouts/BaseLayout.astro";
+import BlogEntry from "../components/BlogEntry.astro";
+import Partition from "../components/Partition.astro";
+const allPosts = await getCollection("blog");
 
 const pageTitle = "Aria's blog";
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-	<Favicon />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} >
-    <title>{pageTitle}</title>
-  </head>
-  <body>
-	<Navigation />
-	
-    <h1>{pageTitle}</h1>
-
+<BaseLayout pageTitle={pageTitle}>
+    <Partition>
+        <h1 class="text-2xl">All blog posts:</h1>
     <ul>
-      <li><a href="/posts/post-1/">Post 1</a></li>
+        {
+            allPosts.map((post: any) => (
+                <BlogEntry
+                    url={`/posts/${post.id}/`}
+                    title={post.data.title}
+                    date={post.data.pubDate.toLocaleDateString()}
+                />
+            ))
+        }
     </ul>
-    <Footer />
-  </body>
-</html>
+</Partition>
+</BaseLayout>

src/pages/friends.astro

@@ -1,33 +1,79 @@
 ---
-import Navigation from '../components/Navigation.astro';
-import Favicon from '../components/Favicon.astro';
-import Footer from '../components/Footer.astro';
-import FriendLink from '../components/FriendLink.astro';
-import '../styles/aria.css';
+import FriendLink from "../components/FriendLink.astro";
+import "../styles/aria.css";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Partition from "../components/Partition.astro";
 
 const pageTitle = "Aria's friends";
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-	<Favicon />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} >
-    <title>{pageTitle}</title>
-  </head>
-  <body>
-	<Navigation />
-
-    <h1>{pageTitle}</h1>
-
-    <FriendLink name="Alyxia" image="https://alyxia.dev/static/img/88x31/self.png" target="https://alyxia.dev" />
-    <div class="linked-buttons">
-    <FriendLink name="Prefetcher" image="https://nanoshinono.me/prefetcher.gif" target="https://nanoshinono.me/" />
-    <FriendLink name="Ata" image="https://ata.moe/88x31.png" target="https://ata.moe" />
-    </div>
-    <FriendLink name="Amemoia" image="https://buh.moe/resources/buttons/88x31.gif" target="https://buh.moe" />
-
-	<Footer />
-  </body>
-</html>
+<BaseLayout pageTitle={pageTitle}>
+    <Partition>
+        <h1 class="text-2xl">These are cool people!!</h1>
+        <br />
+        <div class="flex outline-dotted p-2 flex-wrap">
+            <FriendLink
+                name="Alyxia"
+                image="https://alyxia.dev/static/img/88x31/self.png"
+                target="https://alyxia.dev"
+            />
+            <div class="outline-dashed flex outline-3 mx-1">
+                <FriendLink
+                    name="Prefetcher"
+                    image="https://nanoshinono.me/prefetcher.gif"
+                    target="https://nanoshinono.me/"
+                />
+                <FriendLink
+                    name="Ata"
+                    image="https://ata.moe/88x31.png"
+                    target="https://ata.moe"
+                />
+            </div>
+            <FriendLink
+                name="Amemoia"
+                image="https://buh.moe/resources/buttons/88x31.gif"
+                target="https://buh.moe/"
+            />
+            <FriendLink
+                name="Hayden"
+                image="https://hayden.moe/88x31/hayden.png"
+                target="https://hayden.moe/"
+            />
+            <FriendLink
+                name="Onzecki"
+                image="https://onz.ee/assets/88x31s/png/onzecki.png"
+                target="https://onz.ee/"
+            />
+            <FriendLink
+                name="NotNite"
+                image="https://notnite.com/buttons/notnite.png"
+                target="https://notnite.com/"
+            />
+            <FriendLink
+                name="0x5066"
+                image="https://erisdump.neocities.org/buttons/88x31_1.gif"
+                target="https://erisdump.neocities.org"
+            />
+        </div>
+    </Partition>
+    <Partition>
+        <h2>My badge:</h2>
+        <div class="flex w-fit h-fit" style="background-color: #FFFCBC;">
+            <FriendLink
+                name="Aria"
+                image="https://aria.coffee/static/img/buttons/aria.gif"
+                target="https://aria.coffee"
+            />
+        </div>
+        <br />
+        <p>Code:</p>
+        <pre><code class="rounded backdrop-brightness-0 language-html" style="background-color: white;">&lt;img src="https://aria.coffee/static/img/buttons/aria.gif" alt="Aria" style="image-rendering: pixelated;" /&gt;</code></pre>
+        <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
+            rel="stylesheet"
+        />
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
+        ></script>
+    </Partition>
+</BaseLayout>

src/pages/index.astro

@@ -1,8 +1,32 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
+import Partition from "../components/Partition.astro";
+
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Greeting from "../components/Greeting";
+import Social from "../components/Social.astro";
 const pageTitle = "Aria";
 ---
+
 <BaseLayout pageTitle={pageTitle}>
-  <h2>You're all super cute!~</h2>
-  <h3>:3c</h3>
-</BaseLayout>
+    <Partition>
+        <main>
+            <h1 class="text-4xl">Welcome!~</h1>
+            <p>
+                I'm Aria, a 22 year old software developer and electronics
+                repair tech out of rural <span style="color: #D4F7CF;"
+                    >Australia <span
+                        class="backdrop-brightness-200 px-1 text-2xl rounded"
+                        >🇦🇺</span
+                    ></span
+                >
+            </p>
+        </main>
+    </Partition>
+    <Partition>
+        <Greeting client:load messages={["Yo", "Hallo", "Ayo", "Hiya", "You're cute"]} />
+    </Partition>
+    <Partition>
+        <h1>Socials:</h1>
+        <Social />
+    </Partition>
+</BaseLayout>

src/pages/posts/[...slug].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection, render } from 'astro:content';
+import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map(post => ({
+    params: { slug: post.id }, props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+<MarkdownPostLayout frontmatter={post.data}>
+  <Content />
+</MarkdownPostLayout>

src/pages/posts/post-1.md

@@ -1,12 +0,0 @@
----
-title: 'Getting started here'
-pubDate: 2024-12-16
-description: 'This is the first post of my new website.'
-author: 'Aria'
-tags: ["blogging", "learning in public"]
----
-# Getting started here
-
-Published on: 2024-12-16
-
-I'll be expanding this as I work on it but for now this is my first more indepth website

src/pages/rss.xml.js

@@ -0,0 +1,18 @@
+import rss from '@astrojs/rss';
+import { getCollection } from "astro:content";
+
+export async function GET(context) {
+    const posts = await getCollection("blog");
+    return rss({
+        title: "Aria | Blog",
+        description: "Just me being a silly little thing",
+        site: context.site,
+        items: posts.map((post) => ({
+            title: post.data.title,
+            pubDate: post.data.pubDate,
+            description: post.data.description,
+            link: `/posts/${post.id}/`,
+        })),
+        customData: `<language>en-us</language>`,
+    });
+}

src/pages/tags/[tag].astro

@@ -0,0 +1,45 @@
+---
+import { getCollection } from "astro:content";
+
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import BlogEntry from "../../components/BlogEntry.astro";
+import Partition from "../../components/Partition.astro";
+
+export async function getStaticPaths() {
+    const allPosts = await getCollection("blog");
+
+    const uniqueTags = [
+        ...new Set(allPosts.map((post: any) => post.data.tags).flat()),
+    ];
+
+    return uniqueTags.map((tag) => {
+        const filteredPosts = allPosts.filter((post: any) =>
+            post.data.tags.includes(tag)
+        );
+        return {
+            params: { tag },
+            props: { posts: filteredPosts },
+        };
+    });
+}
+
+const { tag } = Astro.params;
+const { posts } = Astro.props;
+---
+
+<BaseLayout pageTitle={tag}>
+    <Partition>
+        <p>Posts tagged with {tag}:</p>
+        <ul>
+            {
+                posts.map((post: any) => (
+                    <BlogEntry
+                        url={`/posts/${post.id}/`}
+                        title={post.data.title}
+                        date={post.data.pubDate.toLocaleDateString()}
+                    />
+                ))
+            }
+        </ul>
+    </Partition>
+</BaseLayout>

src/pages/tags/index.astro

@@ -0,0 +1,28 @@
+---
+import { getCollection } from "astro:content";
+
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Partition from "../../components/Partition.astro";
+const allPosts = await getCollection("blog");
+const tags = [
+    ...new Set(allPosts.map((post: any) => post.data.tags).flat()),
+];
+const pageTitle = "Tag Index";
+---
+
+<BaseLayout pageTitle={pageTitle}>
+    <Partition>
+        <h1 class="text-xl">Blog tags:</h1>
+    <div class="tags">
+        <main>
+        {
+            tags.map((tag) => (
+                <a href={`/tags/${tag}`}>
+                    <p class="tag">- {tag}</p>
+                </a>
+            ))
+        }
+        </main>
+    </div>
+</Partition>
+</BaseLayout>

src/styles/aria.css

@@ -1,25 +1,93 @@
+@font-face {
+  font-family: "Noto Sans";
+  src:
+    local("Noto Sans"),
+    url("/static/fonts/NotoSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Comic Shanns";
+  src:
+    local("Comic Shanns Regular"),
+    url("/static/fonts/comic shanns.otf") format("opentype"),
+    url("/static/fonts/comic shanns 2.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Comic Mono";
+  src:
+    local("Comic Mono"),
+    url("/static/fonts/ComicMono.ttf") format("ttf"),
+    url("https://dtinth.github.io/comic-mono-font/ComicMono.ttf") format("truetype")
+}
+
+:root {
+  --first-colour: #16111a;
+  --second-colour: #21042c;
+  --third-colour: #2E236C;
+  --fourth-colour: #F5EFFF;
+
+  --border: #27272a;
+}
+
 html {
-    background-color: #bbbec2;
-    font-family: sans-serif;
+    background-color: var(--first-colour);
+    font-family: "Comic Mono", "Comic Shanns", "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Noto Sans", sans-serif;
+    font-size: larger;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 body {
-    margin: 0 auto;
-    width: 100%;
-    max-width: 80ch;
-    padding: 1rem;
-    line-height: 1.5;
+    /* margin: 0 auto; */
+    /* width: 100%; */
+    /* max-width: 40em; */
+    padding: 2em;
+    /* padding: 1rem; */
+    /* line-height: 1.5; */
+    color: var(--fourth-colour);
 }
 
-* {
-    box-sizing: border-box;
+@media screen and (max-width: 899px) {
+  body {
+      width: 95%;
+      padding-top: 0.5em;
+      padding-left: 0;
+      padding-right: 0;
+      flex-wrap: wrap;
+  }
 }
 
-h1 {
-    margin: 1rem 0;
-    font-size: 2.5rem;
+
+a {
+  color: var(--fourth-colour);
+  text-decoration: underline 2px;
+  text-underline-offset: 2px;
+  text-decoration-color: #00000000;
 }
 
+
+a:hover {
+  text-decoration-color: #fff;
+  transition: text-decoration-color 0.25s;
+}
+
+/* h1 { */
+    /* margin: 1rem 0; */
+    /* font-size: 2.5rem; */
+/* } */
+
+/* footer { */
+  /* display: flex; */
+  /* gap: 1rem; */
+  /* margin-top: 2rem; */
+  /* background-color: var(--third-colour); */
+  /* border-radius: 4px; */
+  /* padding: 0.5rem; */
+/* } */
+
 .badge {
     image-rendering: pixelated;
     min-width: 88px;
@@ -29,51 +97,28 @@ h1 {
 
 .linked-buttons {
     outline-style: dashed;
-    display:inline-block
+    width:fit-content;
+    display: inline-flex;
 }
 
-/* nav styles */
+.container {
+  background-color: var(--second-colour);
+  border-radius: 8px;
+  padding: 16px;
+  display:flex;
+  flex-direction: column;
+  /* flex: content; */
+}
 
-.nav-links {
-    width: 100%;
-    top: 5rem;
-    left: 48px;
-    background-color: #ff9776;
-    display: none;
-    margin: 0;
-  }
-  
-  .nav-links a {
-    display: block;
-    text-align: center;
-    padding: 10px 0;
-    text-decoration: none;
-    font-size: 1.2rem;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-  
-  .nav-links a:hover,
-  .nav-links a:focus {
-    background-color: #ff9776;
-  }
-  
-  .expanded {
-    display: unset;
-  }
-  
-  @media screen and (min-width: 636px) {
-    .nav-links {
-      margin-left: 5em;
-      display: block;
-      position: static;
-      width: auto;
-      background: none;
-    }
-  
-    .nav-links a {
-      display: inline-block;
-      padding: 15px 20px;
-    }
-  
-  }
+.greetButton {
+  color: var(--fourth-colour);
+  background-color: var(--second-colour);
+  border-color: var(--second-colour);
+  transition-duration: 0.4s;
+}
+
+.greetButton:hover {
+  color: var(--third-colour);
+  background-color: var(--fourth-colour);
+  border-color: var(--fourth-colour);
+}

tailwind.config.mjs

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
+}

tsconfig.json

@@ -1,5 +1,14 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
-}
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}