Implement guestbook

This commit is contained in:
2025-08-14 21:54:26 -05:00
parent 23bee4569d
commit e962fd1ebe
7 changed files with 118 additions and 9 deletions

View File

@ -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",

View File

@ -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 Ive 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 Ive 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 }}

View File

@ -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

55
content/guestbook.njk Normal file
View File

@ -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>

View File

@ -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" %}

View File

@ -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>

View File

@ -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";