Add quotes

html/index.html

@@ -5,6 +5,14 @@
 {{ template "nav" }}
 <div class="container my-auto">
     <main class="post-index">
+        <div class="quote-carousel" style="--quote-count: {{ len .Quotes }}">
+            {{ range $i, $q := .Quotes }}
+            <blockquote style="--i: {{ $i }}">
+                <p>{{ $q.Quote }}</p>
+                <cite>{{ $q.Author }}</cite>
+            </blockquote>
+            {{ end }}
+        </div>
         {{ range .Posts }}
         {{ template "post/list" . }}
         {{ end }}

html/template/head.html

@@ -9,5 +9,6 @@
     <link rel="stylesheet" href="/css/tailwind.css?v={{- .Commit -}}">
     <link rel="stylesheet" href="/css/post.css?v={{- .Commit -}}">
     <link rel="stylesheet" href="/css/footer.css?v={{- .Commit -}}">
+    <link rel="stylesheet" href="/css/carousel.css?v={{- .Commit -}}">
 </head>
 {{ end }}

html/template/nav.html

@@ -1,5 +1,5 @@
 {{ define "nav" }}
-<div class="container my-3">
+<div class="container mt-3">
     <div id="nav">
         <nav class="mb-3 sm:px-3 text-sm">
             <a href="/">ekzyis</a>

static/css/carousel.css

@@ -0,0 +1,45 @@
+.quote-carousel {
+    --duration: 8s;
+    position: relative;
+    /* the biggest quote has 3 lines of text on screens with width smaller than 480px */
+    min-height: 6rem;
+    margin-bottom: 0.5rem;
+}
+
+/* the biggest quote quote has one less line of text on screens with width greater than 480px, so we reduce the min-height */
+@media (min-width: 480px) {
+    .quote-carousel {
+        min-height: 5rem;
+    }
+}
+
+.quote-carousel blockquote {
+    position: absolute;
+    height: fit-content;
+    inset: 0;
+    opacity: 0;
+    animation: quote-fade calc(var(--duration) * var(--quote-count)) ease-in-out infinite;
+    animation-delay: calc(var(--i) * var(--duration));
+}
+
+.quote-carousel blockquote p {
+    line-height: 1.25rem;
+}
+
+.quote-carousel blockquote cite {
+    display: block;
+    font-size: 0.875rem;
+    text-align: center;
+}
+
+/* Each animation starts at a different time due to the animation-delay
+ * property. However, each animation will then cycle through the same animation,
+ * without any delay after each cycle. This means that the quotes will start
+ * overlapping. To fix this, we need to pause the animations after each cycle,
+ * but since there's no CSS property for that, we do this manually here using
+ * percentages that depend on the number of quotes.
+ */
+@keyframes quote-fade {
+    0%, 33%, 100% { opacity: 0; }
+    3%, 30% { opacity: 1; } /* fade in */
+}

xbuild.go

@@ -26,6 +26,31 @@ import (
 	"gopkg.in/yaml.v3"
 )
 
+var (
+	quotes = []Quote{
+		{
+			// https://stacker.news/items/536315
+			Quote:  "I'm as much a bitcoiner as I'm not.",
+			Author: "ekzyis",
+		},
+		{
+			// https://stacker.news/items/547681
+			Quote:  "It's easier to give people the same grace you give yourself when you remember this is their first time in this life, too.",
+			Author: "plebpoet",
+		},
+		{
+			Quote:  "Because in the end it doesn't matter how feature-rich and easy-to-use the Lightning Network is if it can't keep user funds safe.",
+			Author: "Matt Morehouse",
+		},
+	}
+)
+
+type Quote struct {
+	Quote  string
+	Author string
+	URL    string
+}
+
 type Post struct {
 	Path     string
 	Title    string
@@ -43,6 +68,7 @@ type Post struct {
 }
 
 type IndexTemplateData struct {
+	Quotes []Quote
 	Posts  []Post
 	Commit string
 }
@@ -320,6 +346,7 @@ func executeIndexTemplate(tmpl *template.Template, outputPath string, posts []Po
 	mw := NewHtmlMinifyWriter(outputFile)
 	defer mw.Close()
 	err = tmpl.ExecuteTemplate(mw, "index.html", IndexTemplateData{
+		Quotes: quotes,
 		Posts:  posts,
 		Commit: commit,
 	})