refactor: use components for repeated sections, cleanup

uncenter · Nov 21, 2024 · 880a13c · 880a13c
1 parent 2cdef01
commit 880a13c
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 144 deletions.
diff --git a/src/components/postlist.vto b/src/components/postlist.vto
@@ -0,0 +1,17 @@
+{{ import { Time } from './time.vto' }}
+{{ import { Tags } from './tags.vto' }}
+
+{{ export function PostList(posts) }}
+	{{- for index, post of posts -}}
+		<div class="{{ if index === 0 }}mt-0{{ else }}mx-0 my-8{{ /if }} no-underline">
+			<h2 class="font-semibold mx-0 my-0 text-xl leading-8" style="view-transition-name: post-{{ post.data.title |> slugify }}">
+				<a href="{{ post.url }}">{{ post.data.title }}</a>
+			</h2>
+			<div class="flex flex-row flex-wrap gap-2 lowercase my-2">
+				{{ Time(post.data.date, post.data.edited) }}
+				{{ Tags(post.data.tags) }}
+			</div>
+			<p class="mb-0 mt-1">{{ post.data.description }}</p>
+		</div>
+	{{- /for -}}
+{{ /export }}
diff --git a/src/components/postslist.vto b/src/components/postslist.vto
diff --git a/src/components/projectlist.vto b/src/components/projectlist.vto
@@ -0,0 +1,35 @@
+{{ export async function ProjectList(projects) }}
+	<div class="grid grid-cols-1 md:grid-cols-2 gap-[1rem_1rem] m-0 p-0">
+		{{- for project of projects -}}
+			<a class="flex flex-col p-6 gap-2 rounded-md hover:bg-mantle transition-colors justify-between not-fancy no-external-link" href="{{ project.link }}" data-umami-event="project-link-{{ project.name |> slugify }}">
+				<div>
+					<h2 class="font-bold text-lg m-0">{{ project.name }}</h2>
+					<p class="mx-0 my-1">{{ project.description }}</p>
+				</div>
+				<div class="flex flex-row justify-between items-center ">
+					{{ set classes = 'block w-5 h-5 text-text align-baseline' }}
+					<div class="flex flex-row gap-4">
+						{{ for item of project.stack }}
+							{{- icon "si:" + item, { class: classes } -}}
+						{{ /for }}
+					</div>
+					<div class="flex flex-row gap-4">
+						<div>{{- icon "si:github", { class: classes } -}}</div>
+						{{ if project.live && !project.live.startsWith("https://crates.io") }}
+							{{- if project.live.startsWith("https://discord.gg") -}}
+								{{- set liveIcon = 'si:discord' -}}
+							{{- else if project.live.startsWith("https://npmjs.com") || project.live.startsWith("https://www.npmjs.com")  -}}
+								{{- set liveIcon = 'si:npm' -}}
+							{{ else if project.live.startsWith("https://chrome.google.com/webstore") || project.live.startsWith("https://chromewebstore.google.com") }}
+								{{- set liveIcon = 'si:chromewebstore' -}}
+							{{- else -}}
+								{{- set liveIcon = 'lucide:globe' -}}
+							{{- /if -}}
+							<div>{{- icon liveIcon, { class: classes } -}}</div>
+						{{ /if }}
+					</div>
+				</div>
+			</a>
+		{{ /for }}
+	</div>
+{{ /export }}
diff --git a/src/components/projectslist.vto b/src/components/projectslist.vto
diff --git a/src/components/tags.vto b/src/components/tags.vto
@@ -0,0 +1,13 @@
+{{ export function Tags(tags) }}
+{{- if tags -}}
+	<span>&middot;</span>
+	<div class="flex flex-row flex-wrap space-x-1">
+		{{- for index, tag of tags -}}
+		<span>
+			<a href="/tags/{{ tag |> slugify }}">{{ tag }}</a>
+			{{- index != (tags.length - 1) ? ',' : '' -}}
+		</span>
+		{{- /for -}}
+	</div>
+{{- /if -}}
+{{ /export }}
diff --git a/src/components/time.vto b/src/components/time.vto
@@ -0,0 +1,12 @@
+{{ export function Time(written, edited) }}
+{{ if written }}
+	<span>
+		{{ set shortWritten = written |> toShortDate }}
+		{{ set shortEdited = edited |> toShortDate }}
+		<time datetime="{{ written }}">{{ shortWritten }}</time>
+		{{- if edited && (edited !== written) -}}
+			&nbsp;(last edited <time datetime="{{ edited }}">{{ shortEdited }}</time>)
+		{{- /if -}}
+	</span>
+{{ /if }}
+{{ /export }}
diff --git a/src/generated/feed.xml.vto b/src/generated/feed.xml.vto
@@ -3,23 +3,23 @@ permalink: /feed.xml
 eleventyExcludeFromCollections: false
 ---
 <feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ site.url }}">
-    <title>{{ site.domain }}</title>
-    <subtitle>{{ site.feed.description }}</subtitle>
-    <link href="{{ permalink |> url }}" rel="self"/>
-    <link href="{{ site.url }}"/>
-    <updated>{{ collections.posts |> getNewestCollectionItemDate |> dateToRfc3339 }}</updated>
-    <id>{{ site.url }}</id>
-    <author>
-        <name>{{ site.author.name }}</name>
-    </author>
-    {{- for post of collections.posts.toReversed() }}
-		{{- set url = post.url |> url }}
-    <entry>
-        <title>{{ post.data.title }}</title>
-        <link href="{{ url }}"/>
-        <updated>{{ post.date |> dateToRfc3339 }}</updated>
-        <id>{{ url }}</id>
-        <content xml:lang="{{ site.lang }}" type="html">{{ post.content |> await htmlToAbsoluteUrls(url) |> escape }}</content>
-    </entry>
-    {{ /for }}
+	<title>{{ site.domain }}</title>
+	<subtitle>{{ site.feed.description }}</subtitle>
+	<link href="{{ permalink |> url }}" rel="self"/>
+	<link href="{{ site.url }}"/>
+	<updated>{{ collections.posts |> getNewestCollectionItemDate |> dateToRfc3339 }}</updated>
+	<id>{{ site.url }}</id>
+	<author>
+		<name>{{ site.author.name }}</name>
+	</author>
+	{{- for post of collections.posts.toReversed() }}
+	{{- set url = post.url |> url }}
+	<entry>
+		<title>{{ post.data.title }}</title>
+		<link href="{{ url }}"/>
+		<updated>{{ post.date |> dateToRfc3339 }}</updated>
+		<id>{{ url }}</id>
+		<content xml:lang="{{ site.lang }}" type="html">{{ post.content |> await htmlToAbsoluteUrls(url) |> escape }}</content>
+	</entry>
+	{{- /for }}
 </feed>
diff --git a/src/layouts/base.vto b/src/layouts/base.vto
@@ -15,6 +15,16 @@ footerLinks:
    url: /privacy/
  - title: Sitemap
    url: /sitemap.xml
+socialLinks:
+ - title: GitHub
+   slug: github
+   icon: github
+ - title: Bluesky
+   slug: bluesky
+   icon: bluesky
+ - title: Mastodon
+   slug: mastodon
+   icon: mastodon
 ---
 
 {{ set title = title ? (title + " - " + site.domain) : site.domain }}
@@ -107,15 +117,11 @@ footerLinks:
 		</main>
 		<footer class="flex flex-col py-8 items-center self-center w-full gap-2 leading-normal">
 			<ul id="social-icons" class="m-0 p-0 flex gap-4 justify-center list-none items-baseline">
-				<li>
-					<a rel="me noreferrer" href="{{ site.author.github.url }}" data-umami-event="author-github" title="GitHub" class="not-fancy">{{ icon 'si:github' }}</a>
-				</li>
-				<li>
-					<a rel="me noreferrer" href="{{ site.author.bluesky.url }}" data-umami-event="author-bluesky" title="Bluesky" class="not-fancy">{{ icon 'si:bluesky' }}</a>
-				</li>
-				<li>
-					<a rel="me noreferrer" href="{{ site.author.mastodon.url }}" data-umami-event="author-mastodon" title="Mastodon" class="not-fancy">{{ icon 'si:mastodon' }}</a>
-				</li>
+				{{ for item of socialLinks }}
+					<li>
+						<a rel="me noreferrer" href="{{ site.author[item.slug].url }}" data-umami-event="author-{{ item.slug }}" title="{{ item.title }}" class="not-fancy">{{ icon 'si:' + item.icon }}</a>
+					</li>
+				{{ /for }}
 			</ul>
 			<div class="flex flex-row text-center gap-x-3 text-xs">
 				<a href="https://ctp-webr.ing/uncenter/previous" class="not-fancy" data-umami-event="catppuccin-webring-previous">←</a>

diff --git a/src/layouts/post.vto b/src/layouts/post.vto
@@ -2,55 +2,42 @@
 layout: base.vto
 ---
 
+{{ import { Time } from '../components/time.vto' }}
+{{ import { Tags } from '../components/tags.vto' }}
+
 <article>
-    <h1 style="view-transition-name: post-{{ title |> slugify }};">{{ title }}</h1>
-    <div class="flex flex-row flex-wrap gap-2 lowercase -mt-10 mb-10">
-		{{ if date }}
-			<span>
-				{{ set shortenedDate = date |> toShortDate }}
-				<time datetime="{{ date }}">{{ shortenedDate }}</time>
-				{{ set shortenedEdited = edited |> toShortDate }}
-				{{ if edited && (shortenedEdited !== shortenedDate) }}
-					&nbsp;(last edited <time datetime="{{ edited }}">{{ shortenedEdited }}</time>)
-				{{ /if }}
-			</span>
-		{{ /if }}
-		{{ if tags }}
-			<span>&middot;</span>
-			<div class="flex flex-row flex-wrap space-x-1">
-					{{- for index, tag of tags -}}
-							<span>
-									<a href="/tags/{{ tag |> slugify }}">{{ tag }}</a>
-									{{- if index != (tags.length - 1) -}},{{ /if -}}
-							</span>
-					{{- /for -}}
-			</div>
-		{{ /if }}
-    </div>
+		<h1 style="view-transition-name: post-{{ title |> slugify }};">{{ title }}</h1>
+		<div class="flex flex-row flex-wrap gap-2 lowercase -mt-10 mb-10">
+			{{ Time(date, edited) }}
+			{{ Tags(tags) }}
+		</div>
 		<nav class="toc mb-10" aria-label="Table of contents">
 				{{ content |> toc |> safe }}
 		</nav>
-    {{ content |> safe }}
+		{{ content |> safe }}
 </article>
+
 {{ if comments }}
-    <div id="comments" class="mt-16"></div>
+<div id="comments" class="mt-16"></div>
 {{ /if }}
+
 {{ set previous = collections.posts |> getPreviousCollectionItem }}
 {{ set next = collections.posts |> getNextCollectionItem }}
+
 <div class="flex flex-row justify-between mt-8">
-    {{ if previous }}
-        <a class="text-center space-x-2 flex items-center" href="{{ previous.url }}" aria-label="Read previous post">
-            {{- icon 'lucide:arrow-left' -}}
-            <span>{{ previous.data.title }}</span>
-        </a>
-    {{ /if }}
-    {{ if !previous && next }}
-        <div></div>
-    {{ /if }}
-    {{ if next }}
-        <a class="text-center space-x-2 items-center" href="{{ next.url }}" aria-label="Read next post">
-            <span>{{ next.data.title }}</span>
-            {{- icon 'lucide:arrow-right' -}}
-        </a>
-    {{ /if }}
+{{ if previous }}
+	<a class="text-center space-x-2 flex items-center" href="{{ previous.url }}" aria-label="Read previous post">
+		{{- icon 'lucide:arrow-left' -}}
+		<span>{{ previous.data.title }}</span>
+	</a>
+{{ /if }}
+{{ if !previous && next }}
+		<div></div>
+{{ /if }}
+{{ if next }}
+	<a class="text-center space-x-2 items-center" href="{{ next.url }}" aria-label="Read next post">
+		<span>{{ next.data.title }}</span>
+		{{- icon 'lucide:arrow-right' -}}
+	</a>
+{{ /if }}
 </div>
diff --git a/src/posts/index.vto b/src/posts/index.vto
@@ -4,6 +4,6 @@ layout: page.vto
 description: Articles about programming, linguistics, and other things.
 ---
 
-{{ import { PostsList } from "../components/postslist.vto" }}
+{{ import { PostList } from "../components/postlist.vto" }}
 
-{{ PostsList(collections.posts.toReversed()) }}
+{{ PostList(collections.posts.toReversed()) }}
diff --git a/src/projects.vto b/src/projects.vto
@@ -4,12 +4,12 @@ title: Projects
 description: A list of projects I've worked on.
 ---
 
-{{ import { ProjectsList } from "./components/projectslist.vto" }}
+{{ import { ProjectList } from "./components/projectlist.vto" }}
 
-{{ await ProjectsList(projects.current) }}
+{{ await ProjectList(projects.current) }}
 
 <hr>
 
 <h2>Catppuccin</h2>
 
-{{ await ProjectsList(projects.catppuccin) }}
+{{ await ProjectList(projects.catppuccin) }}
diff --git a/src/tags.vto b/src/tags.vto
@@ -11,10 +11,10 @@ permalink: /tags/{{ tag |> slugify }}/
 description: Posts tagged “{{ tag }}”
 ---
 
-{{ import { PostsList } from "./components/postslist.vto" }}
+{{ import { PostList } from "./components/postlist.vto" }}
 
-{{ PostsList(collections[tag].toReversed()) }}
+{{ PostList(collections[tag].toReversed()) }}
 
 <p>
-    <a href="/posts" class="space-x-2">{{ icon 'lucide:arrow-left' }}<span>All posts</span></a>
+	<a href="/posts" class="space-x-2">{{ icon 'lucide:arrow-left' }}<span>All posts</span></a>
 </p>