Implement guestbook

_data/metadata.js

@@ -35,6 +35,11 @@ export default {
 			linkDisplay: "Galleries",
 			linkURL: "/galleries/",
 		},
+		{
+			iconURL: "/img/icons/breeze/story-editor.svg",
+			linkDisplay: "Guestbook",
+			linkURL: "/guestbook/",
+		},
 		{
 			iconURL: "/img/icons/breeze/news-subscribe.svg",
 			linkDisplay: "Life Updates",

_includes/layouts/home.njk

@@ -3,6 +3,6 @@ layout: layouts/base.njk
 showPostListHeader: yep
 ---
 <h1>I'm Nathan; welcome&nbsp;friend.</h1>
-<p class="nodropcap page-block">My name is Nathan Upchurch, and this is my personal website and blog, where I write about all sorts of <a href="/tags">things</a> that I find interesting. On this website, you can learn more <a href="about">about me</a>, see <a href="now">what I’ve been up to lately</a>, <a href="blog">read my blog</a>, look at some <a href="galleries">pictures</a>, or explore the <a href="sitemap">sitemap</a> to see what else you can do here.</p>
+<p class="nodropcap page-block">My name is Nathan Upchurch, and this is my personal website and blog, where I write about all sorts of <a href="/tags">things</a> that I find interesting. On this website, you can learn more <a href="about">about me</a>, sign my <a href="guestbook">guestbook</a>, see <a href="now">what I’ve been up to lately</a>, <a href="blog">read my blog</a>, look at some <a href="galleries">pictures</a>, or explore the <a href="sitemap">sitemap</a> to see what else you can do here.</p>
 
 {{ content | safe }}

content/changelog.md

@@ -4,6 +4,8 @@ title: Nathan Upchurch | Changelog
 structuredData: none
 ---
 # Changelog
+* 2025-08-14
+	* Implemented a [guestbook](/guestbook/).
 * 2025-07-29
 	* Added [The 74](https://www.the74million.org/) to the [blogroll](/blogroll).
 * 2025-07-14

content/error/403.md

@@ -1,6 +1,6 @@
 ---
 layout: layouts/403.njk
-permalink: 403.html
+permalink: error/403.html
 title: Nathan Upchurch | 403
 structuredData: none
 eleventyExcludeFromCollections: true

content/error/404.md

@@ -1,6 +1,6 @@
 ---
 layout: layouts/404.njk
-permalink: 404.html
+permalink: error/404.html
 title: Nathan Upchurch | 404
 structuredData: none
 eleventyExcludeFromCollections: true

content/error/error.11tydata.js

@@ -0,0 +1,3 @@
+export default {
+	layout: "layouts/post.njk",
+};

content/guestbook.njk

@@ -0,0 +1,55 @@
+---
+layout: layouts/base.njk
+title: Nathan Upchurch | Guestbook
+structuredData: none
+---
+<h1>Sign My Guestbook</h1>
+<!-- Guestbook Script -->
+<script async src="https://guestbooks.meadow.cafe/resources/js/embed_script/835/script.js"></script>
+
+<!-- Guestbook Form -->
+<div id="guestbooks___guestbook-form-container">
+  <form id="guestbooks___guestbook-form"
+        action="https://guestbooks.meadow.cafe/guestbook/835/submit"
+        method="post">
+
+		<label for="name">Your name:</label>
+    <div class="guestbooks___input-container">
+      <input type="text"
+             id="name"
+             name="name"
+             required>
+    </div>
+
+    <label for="website">Your website (optional):</label>
+    <div class="guestbooks___input-container">
+      <input type="url"
+             id="website"
+             name="website">
+    </div>
+
+    <div id="guestbooks___challenge-answer-container"></div>
+
+    <label for="text">Your message:</label>
+    <div class="guestbooks___input-container">
+      <textarea id="text"
+                name="text"
+                rows="4"
+                style="width: 100%; box-sizing: border-box; resize: vertical;"
+                required></textarea>
+    </div>
+
+    <button type="submit">Sign Guestbook</button>
+    <div id="guestbooks___error-message"></div>
+  </form>
+</div>
+
+<!-- Attribution (optional but appreciated!) -->
+<div id="guestbooks___guestbook-made-with" style="text-align: right; margin-top: 10px;">
+  <small>Powered by <a href="https://guestbooks.meadow.cafe" target="_blank">Guestbooks</a></small>
+</div>
+
+<!-- Messages Section -->
+<hr/>
+<h2 id="guestbooks___guestbook-messages-header">Messages</h2>
+<div id="guestbooks___guestbook-messages-container"></div>

content/index.njk

@@ -3,10 +3,5 @@ layout: layouts/home.njk
 eleventyNavigation:
   key: Home
   order: 1
-numberOfLatestPostsToShow: 3
-numberOfNowPostsToShow: 1
-numberOfGalleriesToShow: 1
-numberOfQuizzesToShow: 1
-hideGalleryDescriptions: 1
 ---
 {% include "navigator.njk" %}

content/now-burning/Now Burning_Moss Garden (Nokiba)_Shoyeido_2025-08-14 13:05:00_1:05 PM.md

@@ -0,0 +1,7 @@
+---
+title: Moss Garden (Nokiba)
+manufacturer: Shoyeido
+date: 2025-08-14 13:05:00
+time: 1:05 PM
+---
+

content/sitemap/index.njk

@@ -22,7 +22,13 @@ structuredData: none
 			<li><a href="/me">Contact</a></li>
 			<li><a href="/feed/feed.xml">Feed</a></li>
 			<li><a href="/galleries">Galleries</a></li>
+			<li><a href="/guestbook">Guestbook</a></li>
 			<li><a href="/now">Now</a></li>
+			<li>Special
+				<ul>
+					<li><a href="/special/flying-toasters/">Flying Toasters</a></li>
+				</ul>
+			</li>
 			<li><a href="/tags">Tags</a></li>
 			<li><a href="/wish">Wishes</a></li>
 			<li><a href="/quizzes">Quizzes</a></li>

public/css/index.css

@@ -116,7 +116,7 @@
 	--transition-normal: all 0.3s;
 
 	/* Links */
-	--link-decoration-thickness: 0.1rem;
+	--link-decoration-thickness: 0.06rem;
 
 	/* Borders */
 	--border-details: 1px solid var(--color-gray-20);
@@ -180,6 +180,29 @@ html {
 	font-size: 13px;
 	overflow-y: scroll;
 }
+input,
+textarea {
+	background-color: var(--background-color);
+	border: var(--border-details);
+	border-color: var(--contrast-color);
+	border-radius: var(--border-radius);
+	color: var(--text-color);
+	font-family: var(--font-family);
+	font-size: var(--step-0);
+	font-variation-settings: var(--font-variation-default);
+	margin-block: 0 1lh;
+	min-height: var(--space-l);
+	padding: 0 var(--space-3xs);
+	width: 100%;
+	&:focus {
+		box-shadow: 0 0 0 2px var(--contrast-color);
+		outline: none;
+	}
+}
+label {
+	display: block;
+	margin-bottom: var(--space-3xs);
+}
 article:not(.postlist-item) h3 {
 	margin-bottom: var(--space-s);
 	margin-top: var(--space-m);
@@ -188,12 +211,14 @@ blockquote p {
 	font-style: italic;
 }
 blockquote:before {
+	color: var(--contrast-color);
 	content: "“";
 	font-size: 10rem;
 	margin-left: -4rem;
 	margin-top: -2rem;
-	position: fixed;
+	position: absolute;
 	filter: opacity(0.15);
+	z-index: 0;
 }
 .blogroll {
 	h2:first-of-type {
@@ -294,7 +319,7 @@ ul {
 
 a {
 	text-decoration-color: var(--contrast-color);
-	/*text-decoration-thickness: var(--link-decoration-thickness);*/
+	text-decoration-thickness: var(--link-decoration-thickness);
 	transition: var(--transition-normal);
 }
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
@@ -1043,6 +1068,27 @@ article.post {
 	}
 }
 
+/* Guestbook */
+.guestbook-message blockquote {
+	margin-bottom: var(--space-m);
+	margin-top: var(--space-3xs);
+}
+.guestbook-message p {
+	margin-block: 0 0;
+	position: relative;
+	z-index: 1;
+}
+.guestbook-message p b,
+.guestbook-message p small {
+	font-family: var(--meta-font-family);
+	font-size: var(--meta-font-size);
+	font-variation-settings: var(--meta-font-variation-settings);
+}
+#guestbooks___challenge-answer-container br,
+.guestbooks___input-container br {
+	display: none;
+}
+
 /* Add fleuron after <p> in article when footnotes are present */
 p:has(+ hr.footnotes-sep):after {
 	content: "\2766";