aeh

src/components/indieweb/Infobox.astro

@@ -0,0 +1,47 @@
+---
+import { siteConfig as sc } from "@lib/siteConfig";
+---
+
+<div class="h-card">
+    <p class="name">{sc.author.name}</p>
+    <p class="pronouns">she/her</p>
+    <img
+        src={sc.author.photo.url}
+        alt={sc.author.photo.alt}
+        width={sc.author.photo.size.w}
+        height={sc.author.photo.size.h}
+    />
+    <ul class="fa-ul">
+        <li>
+            <i class="fa-li fa-solid fa-globe"></i>
+            🇬🇧 England, UK
+        </li>
+        <li>
+            Links:
+            <ul>
+                <li><a href={sc.author.link} rel="me">laker.tech (here)</a></li>
+            </ul>
+        </li>
+        <li></li>
+        <li></li>
+    </ul>
+</div>
+
+<style>
+    div {
+        max-width: 200px;
+        padding: 1em 2em;
+        background-color: var(--ctp-mocha-mantle);
+        border: 1px var(--accent) solid;
+        display: flex;
+        vertical-align: middle;
+    }
+
+    p {
+        margin: 10px 0;
+    }
+
+    img {
+        border: 0;
+    }
+</style>

src/components/links/GoLink.astro

@@ -3,15 +3,15 @@ import Icon from "@cmp/utils/Icon.astro";
 
 const { go, displayText, icon } = Astro.props;
 interface Props {
-    go: string
-    displayText: string
-    icon?: string
+    go: string;
+    displayText: string;
+    icon?: string;
 }
 ---
 
 <ul class="fa-ul">
     <li>
         <Icon override={icon} fallback="fa-solid fa-arrow-right" li={true} />
-        <a href={go}> {displayText}</a>
+        <a href={go}><slot /></a>
     </li>
 </ul>

src/components/PinnedPosts.astro → src/components/lists/PinnedPosts.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import FormattedDate from "./DateTime.astro";
+import FormattedDate from "../DateTime.astro";
 
 const { collection } = Astro.props;
 

src/env.d.ts

@@ -4,6 +4,7 @@
 interface ImportMetaEnv {
     readonly LFM_API_KEY: string;
     readonly LFM_USER: string;
+    readonly WEBMENTION_API_KEY: string;
     // more env variables...
 }
 

src/lib/siteConfig.ts

@@ -17,7 +17,11 @@ export const siteConfig = {
         email: "[email protected]",
         photo: {
             url: "https://cdn.laker.tech/images/tree.png",
-            alt: "welcome to the club",
+            alt: "A cartoon tree with yellow boots on.",
+            size: {
+                h: "140",
+                w: "120"
+            }
         },
     },
     devMode: {

src/pages/blog/index.astro

@@ -1,7 +1,7 @@
 ---
 import PageLayout from "@lay/PageLayout.astro";
 import CollectionList from "@cmp/lists/CollectionList.astro";
-import PinnedPosts from "@cmp/PinnedPosts.astro";
+import PinnedPosts from "@cmp/lists/PinnedPosts.astro";
 import GoLink from "@cmp/links/GoLink.astro";
 
 const pageTitle = "Blog";

src/pages/meta/testing.astro

@@ -1,5 +1,8 @@
 ---
+import Infobox from "@cmp/indieweb/Infobox.astro";
 import Layout from "@lay/PageLayout.astro";
 ---
 
-<Layout pageTitle="testing" />
+<Layout pageTitle="testing">
+    <Infobox />
+</Layout>

src/pages/more.astro

@@ -5,12 +5,13 @@ import Layout from "@lay/PageLayout.astro";
 <Layout
     pageTitle="Everything else"
     description="All the pages that aren't in the header"
+    icon="fa-solid fa-bars"
 >
     <h3 id="me">/me</h3>
     <ul class="fa-ul">
         <li>
             <i class="fa-li fa-solid fa-toolbox"></i>
-            <a href="/me/uses">/uses</a>, what I use, if you want to know
+            <a href="/uses">/uses</a>, what I use, if you want to know
         </li>
         <li>
             <i class="fa-li fa-solid fa-clipboard"></i>
@@ -22,10 +23,11 @@ import Layout from "@lay/PageLayout.astro";
     <ul class="fa-ul">
         <li>
             <i
-                class="fa-li fa-solid fa-code-branch"
-                style="color: light-dark(var(--ctp-latte-red), var(--ctp-mocha-red));"
+                class="fa-li fa-solid fa-globe"
+                style="color: light-dark(var(--ctp-latte-blue), var(--ctp-mocha-blue));"
             ></i>
-            <a href="/meta/changelog">/changelog</a>, updates with this site.
+            <a href="/meta/others">/others</a>, webrings, buttons and all other
+            manners of fun things
         </li>
         <li>
             <i
@@ -47,8 +49,4 @@ import Layout from "@lay/PageLayout.astro";
             feeds.
         </li>
     </ul>
-    <h3>Stuff that doesn't exist right now, but eventually will</h3>
-    <ul>
-        <li>/about</li>
-    </ul>
 </Layout>

src/styles/global.css

@@ -1,7 +1,35 @@
-@import url(./vars.css);
 @import url(https://cdn.laker.tech/blog/style/reset.css);
 @import url(https://cdn.laker.tech/blog/style/util.css);
 @import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400,700i|ibm-plex-sans:300,300i,400,400i,500,500i,700,700i);
+@import url(https://cdn.laker.tech/blog/style/ctp.css);
+
+:root {
+    color-scheme: light dark;
+
+    --accent: light-dark(var(--ctp-latte-red), var(--ctp-mocha-lavender));
+
+    --lm-background: var(--ctp-latte-base);
+    --dm-background: var(--ctp-mocha-crust);
+
+    --lm-textcol: var(--ctp-latte-text);
+    --dm-textcol: var(--ctp-mocha-text);
+    --lm-linkcol: var(--ctp-latte-subtext1);
+    --dm-linkcol: var(--ctp-mocha-subtext1);
+
+    --background: light-dark(var(--lm-background), var(--dm-background));
+    --text-colour: light-dark(var(--lm-textcol), var(--dm-textcol));
+    --text-colour-rev: light-dark(var(--ctp-latte-base),
+            var(--ctp-mocha-crust));
+    --link-colour: light-dark(var(--lm-linkcol), var(--dm-linkcol));
+
+    --font-title: "OpenDyslexic", "Atkinson Hyperlegible", "IBM Plex Sans",
+        system-ui, sans-serif;
+    --font-prose: "OpenDyslexic", "Atkinson Hyperlegible", "IBM Plex Sans",
+        system-ui, sans-serif;
+    --font-code: "IBM Plex Mono", monospace;
+
+    --padding-def: 1.24em;
+}
 
 html {
     background: var(--background);