lume: new index page

Signed-off-by: Xe Iaso <me@xeiaso.net>

5 files changed, 96 insertions, 52 deletions

diff --git a/dhall/resume.dhall b/dhall/resume.dhall
index 7036e9e..29b4108 100644
--- a/dhall/resume.dhall
+++ b/dhall/resume.dhall
@@ -47,12 +47,6 @@ in  Resume::{
             "The release post for Palisade, a tool to automate version bumping, release tagging and more."
         }
       , Link::{
-        , url = "https://tailscale.com/blog/steam-deck/"
-        , title = "Putting Tailscale on the Steam Deck"
-        , description =
-            "An engineering log of all the steps taken to run Tailscale on the Valve Steam Deck and the tradeoffs between the various methods you could use to do this."
-        }
-      , Link::{
         , url = "https://tailscale.com/blog/magicdns-why-name/"
         , title = "An epic treatise on DNS, magical and otherwise"
         , description =
@@ -71,5 +65,11 @@ in  Resume::{
         , description =
             "An award-winning April Fools Day post describing how you can use Tailscale via Headscale via Tailscale Funnel. This post is notable for demonstrating all five of the Tailscale company values at the same time."
         }
+      , Link::{
+        , url = "https://fly.io/blog/how-i-fly/"
+        , title = "How I Fly"
+        , description =
+            "A post about how I use Fly.io to host my personal website and its supporting infrastructure."
+        }
       ]
     }
diff --git a/lume/_config.ts b/lume/_config.ts
index 7cfdec0..f337420 100644
--- a/lume/_config.ts
+++ b/lume/_config.ts
@@ -11,6 +11,8 @@ import postcss from "lume/plugins/postcss.ts";
 import sitemap from "lume/plugins/sitemap.ts";
 import readInfo from "lume/plugins/reading_info.ts";
 
+import annotateYear from "./plugins/annotate_year.ts";
+
 //import pagefind from "lume/plugins/pagefind.ts";
 //import _ from "npm:@pagefind/linux-x64";
 
@@ -103,10 +105,6 @@ site.use(sitemap({
 site.use(readInfo({
   extensions: [".md", ".mdx"],
 }));
-site.preprocess([".html"], (pages) => {
-  for (const page of pages) {
-    page.data.year = page.data.date.getFullYear();
-  }
-});
+site.use(annotateYear());
 
 export default site;
diff --git a/lume/plugins/annotate_year.ts b/lume/plugins/annotate_year.ts
new file mode 100644
index 0000000..39b6e2c
--- /dev/null
+++ b/lume/plugins/annotate_year.ts
@@ -0,0 +1,11 @@
+import type Site from "lume/core/site.ts";
+
+export default function () {
+    return (site: Site) => {
+        site.preprocess([".html"], (pages) => {
+            for (const page of pages) {
+                page.data.year = page.data.date.getFullYear();
+            }
+        });
+    };
+}
\ No newline at end of file
diff --git a/lume/src/index.jsx b/lume/src/index.jsx
new file mode 100644
index 0000000..1f7f85a
--- /dev/null
+++ b/lume/src/index.jsx
@@ -0,0 +1,76 @@
+export const layout = "base.njk";
+export const date = "2012-12-21";
+
+export default ({ search, resume, notableProjects, contactLinks }, { date }) => {
+    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
+
+    return (
+        <>
+            <h1 class="text-3xl mb-4">{resume.name}</h1>
+            <p class="text-xl mb-4">{resume.tagline} - {resume.location.city}, {resume.location.country}</p>
+            <div className="my-4 flex space-x-4 rounded-md border border-solid border-fg-4 bg-bg-2 p-3 dark:border-fgDark-4 dark:bg-bgDark-2 max-w-full min-h-fit">
+                <div className="flex max-h-16 shrink-0 items-center justify-center self-center">
+                    <img
+                        style="max-height:6rem"
+                        alt="A pink haired orca character"
+                        loading="lazy"
+                        src="/static/img/avatar.png"
+                    />
+                </div>
+                <div className="convsnippet min-w-0 self-center">
+                    <p className="prose">
+                        I'm Xe Iaso, I'm a technical educator, <a href="/talks/">conference speaker</a>, <a href="https://twitch.tv/princessxen">twitch streamer</a>, vtuber, and philosopher that focuses on ways to help make technology easier to understand and do cursed things in the process. I live in {resume.location.city} with my husband and I do developer relations professionally. I am an avid writer for my <a href="/blog">blog</a>, where I have over 400 articles. I regularly experiment with new technologies and find ways to mash them up with old technologies for my own amusement.
+                    </p>
+                </div>
+            </div>
+
+            <h2 class="text-2xl mb-4">Recent Articles</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {search.pages("type=blog", "order date=desc", 5).map((post) => {
+                    const url = post.redirect_to ? post.redirect_to : post.url;
+                    return (
+                        <li>
+                            <time datetime={date(post.date)} className="font-mono">{post.date.toLocaleDateString("en-US", dateOptions)}</time> -{" "}
+                            <a href={url}>{post.title}</a>
+                        </li>
+                    );
+                })}
+            </ul>
+
+            <h2 class="text-2xl mb-4">Notable Publications</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {resume.notablePublications.map((publication) => (
+                    <li>
+                        <a href={publication.url}>{publication.title}</a><br />{publication.description}
+                    </li>
+                ))}
+            </ul>
+
+            <h2 class="text-2xl mb-4">Highlighted Projects</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {notableProjects.map((project) => (
+                    <li>
+                        <a href={project.url}>{project.title}</a> - {project.description}
+                    </li>
+                ))}
+            </ul>
+
+            <h2 class="text-2xl mb-4">Quick Links</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {contactLinks.map((link) => (
+                    <li>
+                        <a rel="me" target="_blank" href="{link.url}">{link.title}</a>
+                    </li>
+                ))}
+            </ul>
+
+            <p class="mb-4">Looking for someone for your team? Check <a href="/signalboost">here</a>.</p>
+
+            <div class="flex flex-wrap items-start justify-center p-5">
+                {resume.buzzwords.map((buzzword) => (
+                    <span class="m-2 p-2 text-sm bg-bg-1 dark:bg-bgDark-1 text-fg-1 dark:text-fgDark-1 rounded-lg">{buzzword}</span>
+                ))}
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/lume/src/index.njk b/lume/src/index.njk
deleted file mode 100644
index 9eb0a09..0000000
--- a/lume/src/index.njk
+++ /dev/null
@@ -1,41 +0,0 @@
----
-date: 2012-12-21
----
-
-<h1 class="text-3xl mb-4">{{ resume.name }}</h1>
-<p class="text-xl mb-4">{{ resume.tagline }} - {{ resume.location.city }}, {{ resume.location.country }}</p>
-<p class="text-lg mb-4">I'm a speaker, writer, chaos magician, and committed technologist. I regularly write articles on
-    my <a href="/blog">blog</a> and give <a href="/talks">conference talks</a>.</p>
-
-<h2 class="text-2xl mb-4">Highlighted Projects</h2>
-<ul class="list-disc ml-4 mb-4">
-    {% for project in notableProjects %}
-        <li>
-            <a href="{{project.url}}">{{project.title}}</a>: {{project.description}}</li>
-    {% endfor %}
-</ul>
-
-<h2 class="text-2xl mb-4">Recent Articles</h2>
-<ul class="list-disc ml-4 mb-4">
-    {% for post in search.pages("type=blog", "order date=desc", 5) %}
-        <li><time datetime={{post.date | date("DATE")}}>{{post.date | date("DATE")}}</time> - <a href="{{post.url}}">{{post.title}}</a>
-        </li>
-    {% endfor %}
-</ul>
-
-<h2 class="text-2xl mb-4">Quick Links</h2>
-<ul class="list-disc ml-4 mb-4">
-    {% for link in contactLinks %}
-        <li>
-            <a rel="me" target="_blank" href="{{link.url}}">{{link.title}}</a>
-        </li>
-    {% endfor %}
-</ul>
-
-<p class="mb-4">Looking for someone for your team? Check <a href="/signalboost">here</a>.</p>
-
-<div class="flex flex-wrap items-start justify-center p-5">
-    {% for word in resume.buzzwords %}
-        <span class="m-2 p-2 text-sm bg-bg-1 dark:bg-bgDark-1 text-fg-1 dark:text-fgDark-1 rounded-lg">{{word}}</span>
-    {% endfor %}
-</div>