The code and data behind xeiaso.net
lume: new index page
Signed-off-by: Xe Iaso <me@xeiaso.net>
+96
-52
+6
-6
dhall/resume.dhall
+6
-6
dhall/resume.dhall
···
47
47
"The release post for Palisade, a tool to automate version bumping, release tagging and more."
48
48
}
49
49
, Link::{
50
-
, url = "https://tailscale.com/blog/steam-deck/"
51
-
, title = "Putting Tailscale on the Steam Deck"
52
-
, description =
53
-
"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."
54
-
}
55
-
, Link::{
56
50
, url = "https://tailscale.com/blog/magicdns-why-name/"
57
51
, title = "An epic treatise on DNS, magical and otherwise"
58
52
, description =
···
70
64
, title = "Using Tailscale without Using Tailscale"
71
65
, description =
72
66
"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."
67
+
}
68
+
, Link::{
69
+
, url = "https://fly.io/blog/how-i-fly/"
70
+
, title = "How I Fly"
71
+
, description =
72
+
"A post about how I use Fly.io to host my personal website and its supporting infrastructure."
73
73
}
74
74
]
75
75
}
+3
-5
lume/_config.ts
+3
-5
lume/_config.ts
···
11
11
import sitemap from "lume/plugins/sitemap.ts";
12
12
import readInfo from "lume/plugins/reading_info.ts";
13
13
14
+
import annotateYear from "./plugins/annotate_year.ts";
15
+
14
16
//import pagefind from "lume/plugins/pagefind.ts";
15
17
//import _ from "npm:@pagefind/linux-x64";
16
18
···
103
105
site.use(readInfo({
104
106
extensions: [".md", ".mdx"],
105
107
}));
106
-
site.preprocess([".html"], (pages) => {
107
-
for (const page of pages) {
108
-
page.data.year = page.data.date.getFullYear();
109
-
}
110
-
});
108
+
site.use(annotateYear());
111
109
112
110
export default site;
+11
lume/plugins/annotate_year.ts
+11
lume/plugins/annotate_year.ts
+76
lume/src/index.jsx
+76
lume/src/index.jsx
···
1
+
export const layout = "base.njk";
2
+
export const date = "2012-12-21";
3
+
4
+
export default ({ search, resume, notableProjects, contactLinks }, { date }) => {
5
+
const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
6
+
7
+
return (
8
+
<>
9
+
<h1 class="text-3xl mb-4">{resume.name}</h1>
10
+
<p class="text-xl mb-4">{resume.tagline} - {resume.location.city}, {resume.location.country}</p>
11
+
<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">
12
+
<div className="flex max-h-16 shrink-0 items-center justify-center self-center">
13
+
<img
14
+
style="max-height:6rem"
15
+
alt="A pink haired orca character"
16
+
loading="lazy"
17
+
src="/static/img/avatar.png"
18
+
/>
19
+
</div>
20
+
<div className="convsnippet min-w-0 self-center">
21
+
<p className="prose">
22
+
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.
23
+
</p>
24
+
</div>
25
+
</div>
26
+
27
+
<h2 class="text-2xl mb-4">Recent Articles</h2>
28
+
<ul class="list-disc ml-4 mb-4">
29
+
{search.pages("type=blog", "order date=desc", 5).map((post) => {
30
+
const url = post.redirect_to ? post.redirect_to : post.url;
31
+
return (
32
+
<li>
33
+
<time datetime={date(post.date)} className="font-mono">{post.date.toLocaleDateString("en-US", dateOptions)}</time> -{" "}
34
+
<a href={url}>{post.title}</a>
35
+
</li>
36
+
);
37
+
})}
38
+
</ul>
39
+
40
+
<h2 class="text-2xl mb-4">Notable Publications</h2>
41
+
<ul class="list-disc ml-4 mb-4">
42
+
{resume.notablePublications.map((publication) => (
43
+
<li>
44
+
<a href={publication.url}>{publication.title}</a><br />{publication.description}
45
+
</li>
46
+
))}
47
+
</ul>
48
+
49
+
<h2 class="text-2xl mb-4">Highlighted Projects</h2>
50
+
<ul class="list-disc ml-4 mb-4">
51
+
{notableProjects.map((project) => (
52
+
<li>
53
+
<a href={project.url}>{project.title}</a> - {project.description}
54
+
</li>
55
+
))}
56
+
</ul>
57
+
58
+
<h2 class="text-2xl mb-4">Quick Links</h2>
59
+
<ul class="list-disc ml-4 mb-4">
60
+
{contactLinks.map((link) => (
61
+
<li>
62
+
<a rel="me" target="_blank" href="{link.url}">{link.title}</a>
63
+
</li>
64
+
))}
65
+
</ul>
66
+
67
+
<p class="mb-4">Looking for someone for your team? Check <a href="/signalboost">here</a>.</p>
68
+
69
+
<div class="flex flex-wrap items-start justify-center p-5">
70
+
{resume.buzzwords.map((buzzword) => (
71
+
<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>
72
+
))}
73
+
</div>
74
+
</>
75
+
);
76
+
}
-41
lume/src/index.njk
-41
lume/src/index.njk
···
1
-
---
2
-
date: 2012-12-21
3
-
---
4
-
5
-
<h1 class="text-3xl mb-4">{{ resume.name }}</h1>
6
-
<p class="text-xl mb-4">{{ resume.tagline }} - {{ resume.location.city }}, {{ resume.location.country }}</p>
7
-
<p class="text-lg mb-4">I'm a speaker, writer, chaos magician, and committed technologist. I regularly write articles on
8
-
my <a href="/blog">blog</a> and give <a href="/talks">conference talks</a>.</p>
9
-
10
-
<h2 class="text-2xl mb-4">Highlighted Projects</h2>
11
-
<ul class="list-disc ml-4 mb-4">
12
-
{% for project in notableProjects %}
13
-
<li>
14
-
<a href="{{project.url}}">{{project.title}}</a>: {{project.description}}</li>
15
-
{% endfor %}
16
-
</ul>
17
-
18
-
<h2 class="text-2xl mb-4">Recent Articles</h2>
19
-
<ul class="list-disc ml-4 mb-4">
20
-
{% for post in search.pages("type=blog", "order date=desc", 5) %}
21
-
<li><time datetime={{post.date | date("DATE")}}>{{post.date | date("DATE")}}</time> - <a href="{{post.url}}">{{post.title}}</a>
22
-
</li>
23
-
{% endfor %}
24
-
</ul>
25
-
26
-
<h2 class="text-2xl mb-4">Quick Links</h2>
27
-
<ul class="list-disc ml-4 mb-4">
28
-
{% for link in contactLinks %}
29
-
<li>
30
-
<a rel="me" target="_blank" href="{{link.url}}">{{link.title}}</a>
31
-
</li>
32
-
{% endfor %}
33
-
</ul>
34
-
35
-
<p class="mb-4">Looking for someone for your team? Check <a href="/signalboost">here</a>.</p>
36
-
37
-
<div class="flex flex-wrap items-start justify-center p-5">
38
-
{% for word in resume.buzzwords %}
39
-
<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>
40
-
{% endfor %}
41
-
</div>