feat: Convert the blog to mdbook

.gitignore

@@ -1 +1,2 @@
+content/*
 blog/*

book.toml

@@ -0,0 +1,30 @@
+[book]
+title = "Blog"
+description = "Stories, adventures, and reflections from life's journey"
+authors = ["Matthew Binning"]
+language = "en"
+multilingual = false
+src = "content"
+
+[build]
+build-dir = "blog"
+create-missing = false
+
+[output.html]
+no-section-label = true
+git-repository-url = "https://forgejo.binning.net/matthew.binning/www"
+site-url = "/blog/"
+default-theme = "light"
+preferred-dark-theme = "light"
+curly-quotes = true
+mathjax-support = false
+copy-fonts = false
+additional-css = ["theme/sepia.css"]
+
+[output.html.fold]
+enable = true
+level = 0
+
+[output.html.playground]
+editable = false
+copyable = false

deploy.sh

@@ -2,8 +2,12 @@
 
 set -e
 
+# Build the blog with mdbook before deploying
+printf "Building blog with mdbook...\n"
+mdbook build
+
 # Common files to deploy (shared between staging and prod)
-DEPLOY_FILES="blog includes index.html blog.html resume.html style.css 404.html"
+DEPLOY_FILES="blog includes index.html resume.html style.css 404.html"
 
 # Usage information
 usage() {
@@ -61,7 +65,7 @@ case $ENV in
         ssh ${REMOTE_HOST} "mkdir -p /tmp/${REMOTE_PATH}"
         rsync -avz --delete ${DEPLOY_FILES} ${REMOTE_HOST}:/tmp/${REMOTE_PATH}/
         # Set proper permissions and move config on remote server
-        ssh ${REMOTE_HOST} "sudo mv /tmp/${REMOTE_PATH} ${REMOTE_PATH} && \
+        ssh ${REMOTE_HOST} "sudo rsync -avz --delete /tmp/${REMOTE_PATH} ${REMOTE_PATH} && \
             sudo chown -R nginx:nginx ${REMOTE_PATH}/ && \
             printf 'Content deployed.\n'"
         

includes/navbar.html

@@ -2,7 +2,7 @@
         <div class="nav-container">
             <a href="/" class="nav-brand">Home</a>
             <ul class="nav-menu">
-                <li><a href="/blog.html">Blog</a></li>
+                <li><a href="/blog/">Blog</a></li>
                 <li><a href="https://forgejo.binning.net" target="_blank">Git</a></li>
                 <li><a href="/resume.html">Resume</a></li>
             </ul>

theme/sepia.css

@@ -0,0 +1,179 @@
+/* Sepia theme override for mdbook */
+/* This makes the mdbook-generated blog match the rest of the site */
+
+:root {
+    --bg: #f4ecd8;
+    --fg: #3e2723;
+    --sidebar-bg: #efebe9;
+    --sidebar-fg: #5d4037;
+    --sidebar-non-existant: #a1887f;
+    --sidebar-active: #4e342e;
+    --sidebar-spacer: #8d6e63;
+    --scrollbar: #8d6e63;
+    --icons: #5d4037;
+    --icons-hover: #4e342e;
+    --links: #6d4c41;
+    --inline-code-color: #4e342e;
+    --theme-popup-bg: #efebe9;
+    --theme-popup-border: #d7ccc8;
+    --theme-hover: #f4ecd8;
+    --quote-bg: #faf8f3;
+    --quote-border: #d7ccc8;
+    --table-border-color: #d7ccc8;
+    --table-header-bg: #efebe9;
+    --table-alternate-bg: #faf8f3;
+    --searchbar-border-color: #d7ccc8;
+    --searchbar-bg: #efebe9;
+    --searchbar-fg: #3e2723;
+    --searchbar-shadow-color: rgb(62, 39, 35, 0.1);
+    --searchresults-header-fg: #4e342e;
+    --searchresults-border-color: #d7ccc8;
+    --searchresults-li-bg: #faf8f3;
+    --search-mark-bg: #d7ccc8;
+}
+
+body {
+    font-family: 'Courier New', 'Courier', 'Monaco', 'Lucida Console', monospace;
+    background-color: #f4ecd8;
+    color: #3e2723;
+}
+
+.sidebar {
+    background-color: #efebe9;
+    border-right: 2px solid #d7ccc8;
+}
+
+.chapter {
+    color: #5d4037;
+    line-height: 1.7;
+}
+
+.chapter li.chapter-item {
+    line-height: 1.7;
+}
+
+.chapter li a {
+    color: #6d4c41;
+    text-decoration: none;
+}
+
+.chapter li a:hover {
+    color: #4e342e;
+}
+
+.chapter li a.active {
+    color: #4e342e;
+    font-weight: bold;
+}
+
+#content {
+    max-width: 1200px;
+}
+
+.content {
+    padding: 2rem;
+}
+
+h1, h2, h3, h4, h5 {
+    color: #4e342e;
+}
+
+h1 {
+    border-bottom: 3px solid #8d6e63;
+    padding-bottom: 0.5rem;
+}
+
+h2 {
+    border-bottom: 2px solid #8d6e63;
+    padding-bottom: 0.3rem;
+    margin-top: 2rem;
+}
+
+a {
+    color: #6d4c41;
+}
+
+a:hover {
+    color: #4e342e;
+}
+
+blockquote {
+    border-left: 4px solid #8d6e63;
+    background-color: #faf8f3;
+    padding: 1rem;
+    margin: 1rem 0;
+}
+
+code {
+    background-color: #faf8f3;
+    border: 1px solid #d7ccc8;
+    border-radius: 3px;
+    padding: 0.1em 0.3em;
+    color: #4e342e;
+    font-family: 'Courier New', 'Courier', 'Monaco', monospace;
+}
+
+pre {
+    background-color: #faf8f3;
+    border: 1px solid #d7ccc8;
+    border-radius: 4px;
+    padding: 1rem;
+}
+
+pre > code {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+}
+
+table {
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+table thead {
+    background-color: #efebe9;
+}
+
+table th, table td {
+    border: 1px solid #d7ccc8;
+    padding: 0.5rem;
+}
+
+table tr:nth-child(even) {
+    background-color: #faf8f3;
+}
+
+hr {
+    border: none;
+    border-top: 2px solid #d7ccc8;
+    margin: 2rem 0;
+}
+
+/* Navigation buttons */
+.nav-chapters {
+    color: #6d4c41;
+}
+
+.nav-chapters:hover {
+    color: #4e342e;
+    text-decoration: none;
+}
+
+/* Hide default mdbook elements we don't want */
+.menu-title {
+    color: #4e342e;
+    font-weight: bold;
+}
+
+/* Adjust sidebar chapter spacing */
+.chapter li {
+    margin: 0.5rem 0;
+}
+
+/* Make separators in SUMMARY.md look nice */
+.chapter .spacer {
+    height: 2px;
+    background-color: #d7ccc8;
+    margin: 1rem 0;
+}

todo.txt

@@ -1,5 +1,3 @@
-(A) Populate the blog sections dynamically with blog folders using some include or frame mechanism
-(B) Add a sidebar to navigate across the Blog sections, subsections, and pages
 (C) Integrate photos for recipes
 DefCon article
 Oktoberfest article
@@ -23,3 +21,5 @@ x Re-use code or code blocks where possible between staging.nginx.nix and prod.n
 x Re-use code or code blocks where possible between deploy.sh staging and deploy.sh prod
 x Re-theme the blog with sepia tone and monospace fonts/typefaces.
 x Create a recipe section in the blog based on the markdown content in blog/public/recipes
+x Populate the blog sections dynamically with blog folders using some include or frame mechanism
+x Add a sidebar to navigate across the Blog sections, subsections, and pages