From 85e2e9f099972d682046c8f8ae5b818e88d84c5c Mon Sep 17 00:00:00 2001
From: dish <pyrox@pyrox.dev>
Date: Sat, 15 Feb 2025 16:29:01 -0500
Subject: [PATCH] update blog code

---
 src/_components/logo.vto              |  4 ++
 src/_components/post_card.vto         | 23 ++++++++++
 src/{_data.toml => _data/author.toml} | 32 +++++++-------
 src/_data/metas.toml                  |  4 ++
 src/_data/nav.toml                    | 14 ++++++
 src/_includes/components/footer.vto   | 61 +++++++++++++++------------
 src/_includes/components/head.vto     | 10 ++++-
 src/_includes/components/navbar.vto   | 16 ++++++-
 src/_includes/layouts/about.vto       | 21 +++++++++
 src/_includes/layouts/base.vto        | 11 +++++
 src/_includes/layouts/blog-list.vto   | 13 ++++++
 src/_includes/layouts/blog-post.vto   | 21 +++++++++
 src/_includes/layouts/home.vto        | 31 ++++++++------
 src/_includes/layouts/projects.vto    | 19 +++++++++
 src/about.vto                         |  5 +++
 src/blog/_data.toml                   |  8 ++++
 src/blog/example-blog-post-2.md       |  8 ++++
 src/blog/example-blog-post.md         |  8 ++++
 src/blog/index.vto                    |  6 +++
 src/index.vto                         |  1 -
 src/projects.vto                      |  5 +++
 21 files changed, 260 insertions(+), 61 deletions(-)
 create mode 100644 src/_components/logo.vto
 create mode 100644 src/_components/post_card.vto
 rename src/{_data.toml => _data/author.toml} (75%)
 create mode 100644 src/_data/metas.toml
 create mode 100644 src/_data/nav.toml
 create mode 100644 src/_includes/layouts/about.vto
 create mode 100644 src/_includes/layouts/base.vto
 create mode 100644 src/_includes/layouts/blog-list.vto
 create mode 100644 src/_includes/layouts/blog-post.vto
 create mode 100644 src/_includes/layouts/projects.vto
 create mode 100644 src/about.vto
 create mode 100644 src/blog/_data.toml
 create mode 100644 src/blog/example-blog-post-2.md
 create mode 100644 src/blog/example-blog-post.md
 create mode 100644 src/blog/index.vto
 create mode 100644 src/projects.vto

diff --git a/src/_components/logo.vto b/src/_components/logo.vto
new file mode 100644
index 0000000..a450880
--- /dev/null
+++ b/src/_components/logo.vto
@@ -0,0 +1,4 @@
+<div class="flex flex-row justify-center gap-x-4 content-center">
+    <i class="bi bi-exclamation-triangle text-yellow self-center justify-self-end text-4xl"></i>
+    <p class="text-text text-xl self-center">a space</p>
+</div>
diff --git a/src/_components/post_card.vto b/src/_components/post_card.vto
new file mode 100644
index 0000000..f8af49e
--- /dev/null
+++ b/src/_components/post_card.vto
@@ -0,0 +1,23 @@
+{{ if compact }}
+    <li class="bg-surface0 rounded">
+        <a href="{{ post.url }}">
+            <div class="m-4 pb-1">
+                <p class="text-subtext1 text-lg">{{ post.title }}</p>
+                <p class="inline italic text-subtext0">{{ post.summary }}</p>
+                <p class="float-right inline text-blue">{{ post.date |> date('DATE') }}</p>
+            </div>
+        </a>
+    </li>
+{{ else }}
+    <li class="bg-surface0 rounded-md">
+        <a href="{{ post.url }}">
+            <div class="m-6 py-2">
+                <h2 class="text-subtext1 font-serif text-2xl mb-2">{{ post.title }}</h2>
+                <h3 class="text-lg lg:inline italic text-subtext0">{{ post.summary }}</h3>
+                <p class="text-lg lg:float-right lg:inline text-blue">
+                    {{ post.date |> date('DATE') }}
+                </p>
+            </div>
+        </a>
+    </li>
+{{ /if }}
diff --git a/src/_data.toml b/src/_data/author.toml
similarity index 75%
rename from src/_data.toml
rename to src/_data/author.toml
index 1191c08..f1eea1f 100644
--- a/src/_data.toml
+++ b/src/_data/author.toml
@@ -1,29 +1,27 @@
-[metas]
-site = "dish's space"
-lang = "en"
-generator = true
-
-[author]
 name = "dish"
+url = "https://pyrox.dev"
 pronouns = "fox/it/she"
 icon = "assets/author.png"
-[[author.links]]
-service = "bluesky"
-link = "https://bsky.app/profile/pyrox.dev"
-description = "personal Bluesky account"
-[[author.links]]
+[[links]]
 service = "lastdotfm"
 link = "https://www.last.fm/user/thehedgeh0g"
 description = "last.fm profile"
-[[author.links]]
+extra_classes = "pt-2.5 text-[2.5rem]"
+[[links]]
+service = "kofi"
+link = "https://ko-fi.com/pyroxdev"
+description = "Ko-fi donation page"
+extra_classes = "pt-1 text-[2.5rem]"
+[[links]]
 service = "forgejo"
 link = "https://git.pyrox.dev/pyrox"
 description = "personal Git forge"
-[[author.links]]
+extra_classes = "-mx-1.5"
+[[links]]
 service = "github"
 link = "https://github.com/pyrox0"
 description = "Github profile"
-[[author.links]]
-service = "kofi"
-link = "https://ko-fi.com/pyroxdev"
-description = "Ko-fi donation page"
+[[links]]
+service = "bluesky"
+link = "https://bsky.app/profile/pyrox.dev"
+description = "personal Bluesky account"
diff --git a/src/_data/metas.toml b/src/_data/metas.toml
new file mode 100644
index 0000000..dc65daf
--- /dev/null
+++ b/src/_data/metas.toml
@@ -0,0 +1,4 @@
+site = "dish's space"
+lang = "en-US"
+generator = true
+color = [ "light", "dark"]
diff --git a/src/_data/nav.toml b/src/_data/nav.toml
new file mode 100644
index 0000000..aad64f3
--- /dev/null
+++ b/src/_data/nav.toml
@@ -0,0 +1,14 @@
+[[links]]
+name = "About"
+link = "/about"
+extra_classes = ""
+
+[[links]]
+name = "Blog"
+link = "/blog"
+extra_classes = ""
+
+[[links]]
+name = "Projects"
+link = "/projects"
+extra_classes = ""
diff --git a/src/_includes/components/footer.vto b/src/_includes/components/footer.vto
index ad18ff0..d993741 100644
--- a/src/_includes/components/footer.vto
+++ b/src/_includes/components/footer.vto
@@ -1,29 +1,36 @@
-<footer class="bg-mantle min-h-24 inset-x-0 bottom-0 absolute border-t-2 border-surface1 grid text-text grid-cols-3">
-  <div class="flex flex-row justify-center gap-x-4 content-center">
-    <i class="bi bi-exclamation-triangle text-yellow self-center justify-self-end text-4xl"></i>
-    <p class="text-text text-xl self-center">a space</p>
-  </div>
-  <div class="mt-2">
-    <p class="text-overlay2 text-lg">Social</p>
-    <ul class="list-none text-4xl text-subtext1">
-      {{ for link of author.links }}
-        <li class="inline-block">
-          <a href="{{link.link}}" rel="me" aria-label="{{author.name}}'s {{link.description}}">
-            <i class="si si-{{link.service}}"></i>
-          </a>
-        </li>
-      {{ /for }}
-        <li class="inline-block text-3xl">
-          <a href="/blog.rss" aria-label="Blog RSS Feed">
-            <i class="si si-rss"></i>
-          </a>
-        </li>
-    </ul>
-  </div>
-  <div class="mt-2">
-    <p class="text-overlay2 text-lg">Info</p>
-    <p class="text-lg text-overlay1">&copy; 2025 dish</p>
-    <a href="https://git.pyrox.dev/pyrox/new-blog/commit/{{ commit }}" target="_blank" class="text-blue underline">version {{ commit |> substring(0, 8) }}</a>
-  </div>
+<footer
+    class="bg-mantle min-h-24 inset-x-0 bottom-0 border-t-2 border-surface1 grid text-text grid-cols-3"
+>
+    {{ comp.logo() }}
+    <div class="mt-2">
+        <p class="text-overlay2 text-lg">Social</p>
+        <ul class="list-none text-4xl text-subtext1">
+            {{ for link of author.links }}
+                <li class="inline-block">
+                    <a
+                        href="{{link.link}}"
+                        rel="me"
+                        aria-label="{{author.name}}'s {{link.description}}"
+                    >
+                        <i class="si si-{{link.service}} {{link.extra_classes}}"></i>
+                    </a>
+                </li>
+            {{ /for }}
+            <li class="inline-block text-[2rem]">
+                <a href="/blog.rss" aria-label="Blog RSS Feed">
+                    <i class="si si-rss"></i>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="mt-2">
+        <p class="text-overlay2 text-lg">Info</p>
+        <p class="text-lg text-overlay1">&copy; 2025 dish</p>
+        <a
+            href="https://git.pyrox.dev/pyrox/new-blog/commit/{{ commit }}"
+            target="_blank"
+            class="text-blue underline"
+        >version {{ commit |> substring(0, 8) }}</a>
+    </div>
 </footer>
 <div style="display:none" class="latte"></div>
diff --git a/src/_includes/components/head.vto b/src/_includes/components/head.vto
index eef460d..1c49f68 100644
--- a/src/_includes/components/head.vto
+++ b/src/_includes/components/head.vto
@@ -1,10 +1,16 @@
+{{# Site-wide Metadata #}}
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 <meta name="view-transition" content="same-origin" />
-<meta name="supported-color-schemes" content="light dark" />
+<meta name="supported-color-schemes" content="dark light" />
+{{# Feed Links #}}
 <link rel="alternate" type="application/feed+json" href="/blog.json" />
 <link rel="alternate" type="application/rss+xml" href="/blog.rss" />
+{{# Stylesheets #}}
+<link rel="stylesheet" href="/static/fonts.css" />
 <link rel="stylesheet" href="/static/styles.css" />
 <link rel="stylesheet" href="/static/icons/bsi.min.css" />
 <link rel="stylesheet" href="/static/icons/si.min.css" />
-<title>{{title}}</title>
+{{# Page Metadata #}}
+<link rel="canonical" href="{{ url }}" />
+<title>{{ title }}</title>
diff --git a/src/_includes/components/navbar.vto b/src/_includes/components/navbar.vto
index 5155c3d..c632183 100644
--- a/src/_includes/components/navbar.vto
+++ b/src/_includes/components/navbar.vto
@@ -1,3 +1,15 @@
-<header role="banner" class="bg-mantle min-h-20 grid grid-cols-8 grid-rows-1 mb-2">
-  <p class="text-text">meow</p>
+<header role="banner" class="bg-mantle min-h-20 flex flex-row justify-around mb-2">
+    <a class="flex flex-row justify-center gap-x-4 content-center" href="/">
+        {{ comp.logo() }}
+    </a>
+    <nav
+        aria-label="Main"
+        class="flex flex-row text-3xl text-mauve underline gap-x-16 justify-center"
+    >
+        {{ for link of nav.links }}
+            <a class="underline self-center" href="{{ link.link }}">{{ link.name }}</a>
+        {{ /for }}
+    </nav>
+    <div></div>
+    <p class="text-overlay1 self-center">search coming soon</p>
 </header>
diff --git a/src/_includes/layouts/about.vto b/src/_includes/layouts/about.vto
new file mode 100644
index 0000000..ca26f78
--- /dev/null
+++ b/src/_includes/layouts/about.vto
@@ -0,0 +1,21 @@
+{{ layout "layouts/base.vto" }}
+    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2 h-card">
+        <h1 class="mt-8 text-5xl text-bold text-mauve">
+            About
+            <div class="p-name p-nickname inline">
+                dish
+            </div>
+        </h1>
+
+        <h2 class="text-2xl mt-4">
+            <div class="inline p-job-title">Student</div>, Sysadmin, and UX Crafter
+        </h2>
+        <p class="text-lg mt-2">
+            Howdy! I play with computers, with an emphasis on accessible, secure, and enjoyable
+            experiences.
+        </p>
+
+        <h3 class="text-mauve text-2xl">About This Blog</h3>
+        <p class="text-"></p>
+    </main>
+{{ /layout }}
diff --git a/src/_includes/layouts/base.vto b/src/_includes/layouts/base.vto
new file mode 100644
index 0000000..be61701
--- /dev/null
+++ b/src/_includes/layouts/base.vto
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        {{ include "components/head.vto" }}
+    </head>
+    <body id="body" class="mocha bg-crust grid">
+        {{ include "components/navbar.vto" }}
+        {{ content }}
+        {{ include "components/footer.vto" }}
+    </body>
+</html>
diff --git a/src/_includes/layouts/blog-list.vto b/src/_includes/layouts/blog-list.vto
new file mode 100644
index 0000000..7cf56a9
--- /dev/null
+++ b/src/_includes/layouts/blog-list.vto
@@ -0,0 +1,13 @@
+{{ layout "layouts/base.vto" }}
+    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">
+        <h1 class="text-5xl my-8">Blog</h1>
+        <a class="lg:inline float-right -mt-20 mr-1.5" href="/blog.rss" aria-label="Blog RSS Feed">
+            <i class="text-5xl si si-rss"></i>
+        </a>
+        <ul class="mt-8">
+            {{ for post of search.pages("category=blog") }}
+                {{ comp.post_card({"post": post}) }}
+            {{ /for }}
+        </ul>
+    </main>
+{{ /layout }}
diff --git a/src/_includes/layouts/blog-post.vto b/src/_includes/layouts/blog-post.vto
new file mode 100644
index 0000000..f3e1845
--- /dev/null
+++ b/src/_includes/layouts/blog-post.vto
@@ -0,0 +1,21 @@
+{{ layout "layouts/base.vto" }}
+    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">
+        <article class="h-entry">
+            <h1 class="text-5xl font-serif mt-8 p-name">{{ title }}</h1>
+            <h2 class="text-2xl font-sans mt-4 text-subtext0">
+                Published on
+                <time class="dt-published" datetime="{{ published |> date }}">
+                    {{ published |> date('POST_DATE') }}
+                </time>
+            </h2>
+            <h2 class="text-2xl font-sans mb-8 text-overlay1">
+                By
+                <div class="inline p-author">{{ author.name }}</div>
+            </h2>
+
+            <div class="e-content text-lg">
+                {{ content }}
+            </div>
+        </article>
+    </main>
+{{ /layout }}
diff --git a/src/_includes/layouts/home.vto b/src/_includes/layouts/home.vto
index e797bc4..d50c4f5 100644
--- a/src/_includes/layouts/home.vto
+++ b/src/_includes/layouts/home.vto
@@ -1,12 +1,19 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    {{ include "components/head.vto" }}
-  </head>
-  <body id="body" class="mocha bg-crust">
-    {{ include "components/navbar.vto" }}
-    <h1 class="text-blue">meow</h1>
-    <h2 class="text-mauve">the fitnessgram pacer test</h2>
-    {{ include "components/footer.vto" }}
-  </body>
-</html>
+{{ layout "layouts/base.vto" }}
+    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">
+        <h1 class="mt-8 text-5xl text-bold text-mauve">hi, I'm dish</h1>
+        {{# Profile picture goes here #}}
+        <div class="h-64 content-center border-2 mt-4">Profile Picture</div>
+        <h2 class="text-2xl mt-4">Student, Sysadmin, and UX Crafter</h2>
+        <p class="text-lg mt-2">
+            Howdy! I play with computers, with an emphasis on accessible, secure, and enjoyable
+            experiences.
+        </p>
+        <!-- <div class="h-4"></div> -->
+        <h2 class="my-8 text-2xl">Recent blog posts:</h2>
+        <ul class="lg:w-3/4">
+            {{ for post of search.pages("category=blog", "date", 5) }}
+                {{ comp.post_card({"post": post, compact: true}) }}
+            {{ /for }}
+        </ul>
+    </main>
+{{ /layout }}
diff --git a/src/_includes/layouts/projects.vto b/src/_includes/layouts/projects.vto
new file mode 100644
index 0000000..d50c4f5
--- /dev/null
+++ b/src/_includes/layouts/projects.vto
@@ -0,0 +1,19 @@
+{{ layout "layouts/base.vto" }}
+    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">
+        <h1 class="mt-8 text-5xl text-bold text-mauve">hi, I'm dish</h1>
+        {{# Profile picture goes here #}}
+        <div class="h-64 content-center border-2 mt-4">Profile Picture</div>
+        <h2 class="text-2xl mt-4">Student, Sysadmin, and UX Crafter</h2>
+        <p class="text-lg mt-2">
+            Howdy! I play with computers, with an emphasis on accessible, secure, and enjoyable
+            experiences.
+        </p>
+        <!-- <div class="h-4"></div> -->
+        <h2 class="my-8 text-2xl">Recent blog posts:</h2>
+        <ul class="lg:w-3/4">
+            {{ for post of search.pages("category=blog", "date", 5) }}
+                {{ comp.post_card({"post": post, compact: true}) }}
+            {{ /for }}
+        </ul>
+    </main>
+{{ /layout }}
diff --git a/src/about.vto b/src/about.vto
new file mode 100644
index 0000000..af74368
--- /dev/null
+++ b/src/about.vto
@@ -0,0 +1,5 @@
+---
+title: about dish
+summary: "Who is dish? Find out here."
+layout: layouts/about.vto
+---
diff --git a/src/blog/_data.toml b/src/blog/_data.toml
new file mode 100644
index 0000000..299e461
--- /dev/null
+++ b/src/blog/_data.toml
@@ -0,0 +1,8 @@
+layout = "layouts/blog-post.vto"
+category = "blog"
+
+[metas]
+title = "=title"
+description = "=summary"
+image = "=image"
+keywords = "=tags"
diff --git a/src/blog/example-blog-post-2.md b/src/blog/example-blog-post-2.md
new file mode 100644
index 0000000..071685f
--- /dev/null
+++ b/src/blog/example-blog-post-2.md
@@ -0,0 +1,8 @@
+---
+title: example blog post 2
+summary: "Testing how posts work in lume"
+draft: false
+published: 2025-02-14
+---
+
+# meow meow!
diff --git a/src/blog/example-blog-post.md b/src/blog/example-blog-post.md
new file mode 100644
index 0000000..2eaff5c
--- /dev/null
+++ b/src/blog/example-blog-post.md
@@ -0,0 +1,8 @@
+---
+title: example blog post
+summary: "Testing how posts work in lume"
+draft: false
+published: 2025-02-14
+---
+
+# meow meow!
diff --git a/src/blog/index.vto b/src/blog/index.vto
new file mode 100644
index 0000000..a519416
--- /dev/null
+++ b/src/blog/index.vto
@@ -0,0 +1,6 @@
+---
+title: Blog Posts
+summary: "dish's blog posts"
+layout: layouts/blog-list.vto
+category: "index"
+---
diff --git a/src/index.vto b/src/index.vto
index b3eafff..043bf32 100644
--- a/src/index.vto
+++ b/src/index.vto
@@ -3,4 +3,3 @@ title: a space
 summary: "Lover of computers, programming, and sysadmin."
 layout: layouts/home.vto
 ---
-
diff --git a/src/projects.vto b/src/projects.vto
new file mode 100644
index 0000000..557ee58
--- /dev/null
+++ b/src/projects.vto
@@ -0,0 +1,5 @@
+---
+title: Projects
+summary: "All the things dish works on"
+layout: layouts/projects.vto
+---
-- 
2.51.2