Implement guestbook
This commit is contained in:
@ -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",
|
||||
|
@ -3,6 +3,6 @@ layout: layouts/base.njk
|
||||
showPostListHeader: yep
|
||||
---
|
||||
<h1>I'm Nathan; welcome 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 }}
|
||||
|
@ -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
55
content/guestbook.njk
Normal 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>
|
@ -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" %}
|
||||
|
@ -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>
|
||||
|
@ -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";
|
||||
|
Reference in New Issue
Block a user