From 99c5ca9fb2e14909257dddecdba6204c50f9b2f6 Mon Sep 17 00:00:00 2001
From: Tom Willemse <tom@ryuslash.org>
Date: Thu, 7 Sep 2023 13:27:04 -0700
Subject: [PATCH] Fix some navigation section issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The main navigation bar now shows up on every page.

- For consistency the index page now has up/home links that both point to
  itself.

- The “up” link doesn't include a space that gets styled anymore.
---
 index.org          |  6 ++----
 literate-build.org | 16 ++++++++++++++--
 src/scss/main.scss | 11 ++++++++++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/index.org b/index.org
index bbfbf83..474ddf6 100644
--- a/index.org
+++ b/index.org
@@ -3,10 +3,8 @@
 #+OPTIONS: toc:nil num:nil
 #+STARTUP: showall
 #+STARTUP: inlineimages
-
-#+begin_main-navigation
-[[https://ryuslash.org][home]] | [[https://code.ryuslash.org][code]] | [[https://blog.ryuslash.org][blog]]
-#+end_main-navigation
+#+html_link_up: /
+#+html_link_home: /
 
 #+begin_introduction
 #+ATTR_HTML: :id avatar :alt Angry black prinny (looking like Tux), playing on a PSP
diff --git a/literate-build.org b/literate-build.org
index 915fe0a..7d6a636 100644
--- a/literate-build.org
+++ b/literate-build.org
@@ -233,7 +233,12 @@ Here come the actual projects.
 
 The pages project is the main publishing project. It exports all of the =.org= files except for =README.org= and anything found in the =posts/= directory. The =README.org= is only relevant when you're looking at the source code for this website and =posts/= has its own project.
 
-It also loads the stylesheet into the HTML head, and add a link to my Mastodon account in the postamble, for verification purposes.
+It also sets:
+
+- =:html-head= :: Loads the stylesheet into the HTML head.
+- =:html-preamble-format= :: Adds a list of other sections of my website.
+- =:html-postamble-format= :: Adds a link to my Mastodon account in the postamble, for verification purposes.
+- =:html-home/up-format= :: Fixes the whitespace in the home/up links at the top of the page.
 
 #+begin_src emacs-lisp :tangle no :noweb-ref projects
 ("pages"
@@ -246,10 +251,17 @@ It also loads the stylesheet into the HTML head, and add a link to my Mastodon a
                    (and "README.org" string-end)))
  :publishing-function org-html-publish-to-html
  :html-head "<link rel=\"stylesheet\" href=\"/assets/css/main.css\" type=\"text/css\"/>"
+ :html-preamble t
+ :html-preamble-format (("en" ,(string-join (list "<ul class=\"main-navigation\">"
+                                                  "<li><a href=\"//code.ryuslash.org\">code</a></li>"
+                                                  "<li><a href=\"//laminar.ryuslash.org\">builds</a></li>"
+                                                  "<li><a href=\"//blog.ryuslash.org\">blog</a></li>"
+                                                  "</ul>"))))
  :html-postamble t
  :html-postamble-format (("en" "<p class=\"social social-mastodon\">Find me on <a href=\"https://fosstodon.org/@ryuslash\" rel=\"me\">Mastodon</a></p>
 <p class=\"date\">Date: %C</p>
-<p class=\"creator\">%c</p>")))
+<p class=\"creator\">%c</p>"))
+ :html-home/up-format "<div id=\"org-div-home-and-up\"><a accesskey=\"h\" href=\"%s\">UP</a> | <a accesskey=\"H\" href=\"%s\">HOME</a>\n</div>")
 #+end_src
 
 *** Posts
diff --git a/src/scss/main.scss b/src/scss/main.scss
index b6e03e3..656fce5 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -31,6 +31,7 @@ img.book-cover {
   font-size: 0.8rem;
   padding-right: 1rem;
   float: right;
+  text-transform: lowercase;
 }
 
 #postamble {
@@ -70,10 +71,18 @@ pre.src {
 .org-center { text-align: center; }
 
 .main-navigation {
-  text-align: center;
   margin: 0;
   line-height: 1;
   padding: 0;
+
+  li {
+    display: inline;
+    list-style: none;
+
+    &:not(:last-child)::after {
+      content: " | ";
+    }
+  }
 }
 
 .org-src-container span:target {