Improve sitemap htmlHEADmaster

10 files changed, 93 insertions, 112 deletions

diff --git a/public/index.css b/public/index.css
index 0866b71..e88dea5 100644
--- a/public/index.css
+++ b/public/index.css
@@ -173,6 +173,14 @@ input:focus {
 }
 
 /* Theme Selector */
+#theme_section {
+  position: fixed;
+  bottom: 1rem;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
 #theme_selector {
 	display: flex;
 	align-items: center;
@@ -193,7 +201,7 @@ input:focus {
 	width: 6rem;
 	height: 2rem;
 	border-radius: 3px;
-	border: 1px solid black;
+	border: 1px solid gray;
 	color: black;
 	background-color: white;
 	cursor: pointer;
@@ -223,6 +231,10 @@ input:focus {
   background-color: yellow;
 }
 
+.theme_button_text {
+  margin-left: 0.5rem;
+}
+
 /* Phone screen adjustments */
 @media only screen and (device-width: 1280px),
 only screen and (max-width:1280px) {
@@ -237,10 +249,12 @@ only screen and (max-width:1280px) {
 
 @media only screen and (device-width: 960px),
 only screen and (max-width:960px) {
-    #theme_selector  {
-        padding-bottom: 2rem !important;
-        flex-direction: column;
-        gap: 1rem;
+    #theme_selector {
+      margin-left: 1rem;
+      margin-right: 1rem; 
+    }
+    .theme_button_text {
+      display: none;
     }
 
     #theme_selector > button {
diff --git a/public/index.html b/public/index.html
index 55e4ba2..eb8e9ee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,14 +46,13 @@
       </ul>
     </section>
 
-	  <section>
-      <h2>Theme</h2>
-      <div id="theme_selector" class="hidden">
-		    <button id="theme_button_default">Default</button>
-		    <button id="theme_button_autumn">🍁 Autumn</button>
-	      <button id="theme_button_winter">⛄ Winter</button>
-		    <button id="theme_button_spring">🐦 Spring</button>
-		    <button id="theme_button_summer">🌻 Summer</button>
+	  <section id="theme_section">
+      <div id="theme_selector">
+		    <button id="theme_button_default">🙂<span class="theme_button_text">Default</span></button>
+		    <button id="theme_button_autumn">🍁<span class="theme_button_text">Autumn</span></button>
+	      <button id="theme_button_winter">⛄<span class="theme_button_text">Winter</span></button>
+		    <button id="theme_button_spring">🐦<span class="theme_button_text">Spring</span></button>
+		    <button id="theme_button_summer">🌻<span class="theme_button_text">Summer</span></button>
       </div>
 	  </section>
   </body>
diff --git a/public/index.js b/public/index.js
index dc25d20..755879a 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,38 +1,6 @@
 
 function main() {
-    var themeSelector = document.getElementById('theme_selector');
-    themeSelector.classList.remove('hidden');
-
-    imageCallbacks();
-}
-
-function imageCallbacks() {
-  const imageContainer = document.getElementById('image_container');
-  
-    function onImageClicked() {
-        var background = document.createElement('div'); // 
-        background.classList.add('image_item_expanded_container');
-        var clone = this.cloneNode(true);
-        clone.classList.add('expanded');
-        background.append(clone);
-        clone.addEventListener('click', function(event) { event.stopPropagation(); });
-        background.addEventListener('click', function() { background.remove(); });
-        window.addEventListener('keydown', function(e) { if (e.key === 'Escape') background.remove(); });
-        document.body.parentElement.prepend(background);
-    }
-
-    function setImageClicked() {
-        for (var i = 0; i < numImages; i++) {
-            var image = imageList[i];
-            image.addEventListener('click', onImageClicked);
-        }
-    } 
-
-    // Set up on image clicked
-    var imageList = imageContainer.children,
-        numImages = imageContainer.children.length;
-
-    setImageClicked();
+   
 }
 
 main();
diff --git a/public/posts/dec_29_2025.html b/public/posts/dec_29_2025.html
index cbdd3c2..4ad9741 100644
--- a/public/posts/dec_29_2025.html
+++ b/public/posts/dec_29_2025.html
@@ -29,17 +29,17 @@
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org5ff3714" class="outline-2">
-<h2 id="org5ff3714">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org5ff3714">
+<div id="outline-container-org9af8e77" class="outline-2">
+<h2 id="org9af8e77">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org9af8e77">
 <p>
 2025 has been one busy year for me! I feel as though I've been working on a dozen things at once and have spent much of my working (and personal) days productively. Miracle finally feels like it's getting somewhere fast, the Flutter multi-window work is landing at a solid pace, and Mir is feeling like a truly solid option for Wayland compositor development. I will refrain from speaking too much on the Flutter and Mir work in this post, as those are best left in the hands of Canonical.
 </p>
 </div>
 </div>
-<div id="outline-container-org6ce815f" class="outline-2">
-<h2 id="org6ce815f">Miracle Update</h2>
-<div class="outline-text-2" id="text-org6ce815f">
+<div id="outline-container-orgdba38e1" class="outline-2">
+<h2 id="orgdba38e1">Miracle Update</h2>
+<div class="outline-text-2" id="text-orgdba38e1">
 <p>
 Miracle has come a long way this past year. I now feel entirely confident using it as my daily driver, minus a few hiccups that I encounter in-between releases. A lot of great things are cooking for 2026 too, 
 </p>
@@ -108,9 +108,9 @@ v0.9.0 of Miracle will probably be a long time in the making. My estimate is tha
 </p>
 </div>
 </div>
-<div id="outline-container-orgba126b9" class="outline-2">
-<h2 id="orgba126b9">Conclusion</h2>
-<div class="outline-text-2" id="text-orgba126b9">
+<div id="outline-container-orgf3ad059" class="outline-2">
+<h2 id="orgf3ad059">Conclusion</h2>
+<div class="outline-text-2" id="text-orgf3ad059">
 <p>
 2025 has been a whirlwind of a year, and I'm sure that 2026 won't slow down at all for me. A lot of the long term projects that I've been working on are finally coming together, and I feel as though I am on the cusp of making software that I'm truly proud of. On top of that, I am engaged! What a time to be alive :) I hope you all have a lovely New Year with your friends, family, cats, dogs, and everything else.
 </p>
diff --git a/public/posts/feed.xml b/public/posts/feed.xml
index 3493910..32330be 100644
--- a/public/posts/feed.xml
+++ b/public/posts/feed.xml
@@ -5,7 +5,7 @@
     <link>https://matthewkosarek.xyz/</link>
     <description>The RSS feed for Matthew Kosarek's Blog</description>
     <language>en-us</language>
-    <lastBuildDate>Thu, 19 February 2026 15:52:00 -0400</lastBuildDate>
+    <lastBuildDate>Mon, 23 February 2026 07:48:00 -0400</lastBuildDate>
 
     <item>
       <title>Update December 29, 2025</title>
diff --git a/public/posts/hello.html b/public/posts/hello.html
index 4966f18..6e6075b 100644
--- a/public/posts/hello.html
+++ b/public/posts/hello.html
@@ -29,9 +29,9 @@
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org9e9109d" class="outline-2">
-<h2 id="org9e9109d">TLDR</h2>
-<div class="outline-text-2" id="text-org9e9109d">
+<div id="outline-container-org62e71c9" class="outline-2">
+<h2 id="org62e71c9">TLDR</h2>
+<div class="outline-text-2" id="text-org62e71c9">
 <ul class="org-ul">
 <li>Create a new folder</li>
 <li>Put <a href="https://raw.githubusercontent.com/mattkae/matthewkosarek-xyz/master/index.css">index.css</a>, <a href="https://raw.githubusercontent.com/mattkae/matthewkosarek-xyz/master/publish.el">publish.el</a>, and <a href="https://github.com/mattkae/matthewkosarek-xyz/blob/master/publish.sh">publish.sh</a> in the folder</li>
@@ -45,9 +45,9 @@
 </ul>
 </div>
 </div>
-<div id="outline-container-org33cf264" class="outline-2">
-<h2 id="org33cf264">Introduction</h2>
-<div class="outline-text-2" id="text-org33cf264">
+<div id="outline-container-org1ef5aa8" class="outline-2">
+<h2 id="org1ef5aa8">Introduction</h2>
+<div class="outline-text-2" id="text-org1ef5aa8">
 <p>
 I've recently fallen in love with <code>org-mode</code>, specifically when I use it with <a href="https://www.orgroam.com/">org-roam</a>. I find the whole workflow of creating, tagging, and - later on - searching for information on my computer to be very elegant. On top of that, now that I have the time, I want to begin writing blog posts to better work out my thoughts. With both of these things in mind, I am again turning to the universal tool for human prospering: <code>org-mode</code>. This time, I want to see how it can help me turn a simple org file into a blog post on my website. My requirements are:
 </p>
@@ -70,9 +70,9 @@ And that's pretty much it for now. Without further ado, let's jump into getting
 </p>
 </div>
 </div>
-<div id="outline-container-org041489b" class="outline-2">
-<h2 id="org041489b">Basic HTML File</h2>
-<div class="outline-text-2" id="text-org041489b">
+<div id="outline-container-orgf6ae79f" class="outline-2">
+<h2 id="orgf6ae79f">Basic HTML File</h2>
+<div class="outline-text-2" id="text-orgf6ae79f">
 <p>
 As a pilot, we are going to use this org file that I am currently writing (<code>hello.org</code>) as our guinea pig. The goal is to have this org file be our very first blog post.
 </p>
@@ -112,9 +112,9 @@ We then do a <code>chmod +x publish.sh</code> to make it an executable and run i
 </p>
 </div>
 </div>
-<div id="outline-container-org0353981" class="outline-2">
-<h2 id="org0353981">Disabling features that we don't want</h2>
-<div class="outline-text-2" id="text-org0353981">
+<div id="outline-container-orgfcf3a5a" class="outline-2">
+<h2 id="orgfcf3a5a">Disabling features that we don't want</h2>
+<div class="outline-text-2" id="text-orgfcf3a5a">
 <p>
 The next thing will be to remove some of the generated items that I didn't ask for, namely the table of contents, author, section numbers, creation time stamp, and the validation link.
 </p>
@@ -143,9 +143,9 @@ The next thing will be to remove some of the generated items that I didn't ask f
 </div>
 </div>
 </div>
-<div id="outline-container-org8a1e73c" class="outline-2">
-<h2 id="org8a1e73c">Styling &amp; Code Highlighting</h2>
-<div class="outline-text-2" id="text-org8a1e73c">
+<div id="outline-container-org04af149" class="outline-2">
+<h2 id="org04af149">Styling &amp; Code Highlighting</h2>
+<div class="outline-text-2" id="text-org04af149">
 <p>
 Next thing on our list is custom styling. This can be achieved by first installing the <code>htmlize</code> package from <code>melpa</code> / <code>elpa</code>.  The EmacsWiki describes this as "a package for exporting the contents of an Emacs buffer to HTML while respecting display properties such as colors, fonts, underlining, invisibility, etc" (<a href="https://www.emacswiki.org/emacs/Htmlize">reference</a>). If used "out-of-the-box", the buffer will be exported to HTML with all of the styles inlined (e.g. if you underline something in your org file, you will generate a <code>&lt;span style="text-decoration: underline"&gt;...&lt;/span&gt;</code>).  However, we are more interested in styling everything by ourselves: we don't want <code>htmlize</code> making assumptions about what underlining means to us! Luckily, <code>htmlize</code> gives us the option to export with class names instead of inline styles so that we can specify each style for ourselves.
 </p>
@@ -315,9 +315,9 @@ If we run the publish again, we can see that we have full styling on our code sn
 </p>
 </div>
 </div>
-<div id="outline-container-org624adfd" class="outline-2">
-<h2 id="org624adfd">Images</h2>
-<div class="outline-text-2" id="text-org624adfd">
+<div id="outline-container-orgf56189b" class="outline-2">
+<h2 id="orgf56189b">Images</h2>
+<div class="outline-text-2" id="text-orgf56189b">
 <p>
 Our first two criteria have been met! Next on the list is solving images. As an example, let's use this <a href="file:///_posts/assets/squirrel.jpg">squirrel image</a> that I found online with an open source license. The ideal situation would be:
 </p>
@@ -362,16 +362,16 @@ So what's the fix here? Well, we have two options, but I am going to go with the
 That's all there is to it! There are simpler ways as well, but that should do it:
 </p>
 
-<div id="org9dc849e" class="figure">
+<div id="org36faa1d" class="figure">
 <p><img src="/_posts/assets/squirrel.jpg" alt="squirrel.jpg" width="300" />
 </p>
 <p><span class="figure-number">Figure 1: </span>A Cute Squirrel</p>
 </div>
 </div>
 </div>
-<div id="outline-container-org328d8f8" class="outline-2">
-<h2 id="org328d8f8">Creation Date</h2>
-<div class="outline-text-2" id="text-org328d8f8">
+<div id="outline-container-org62ee0b4" class="outline-2">
+<h2 id="org62ee0b4">Creation Date</h2>
+<div class="outline-text-2" id="text-org62ee0b4">
 <p>
 Let's add the creation date below the title next. To start, we will modify the publish command to remove the title (<code>:with-title nil</code>) and, in its place, show a preamble bit of HTML that contains a formatted <code>div</code> with the title and the "last modified" span.z
 </p>
@@ -430,9 +430,9 @@ Note that the downside of this is that the created date will change whenever you
 </p>
 </div>
 </div>
-<div id="outline-container-orge04dce8" class="outline-2">
-<h2 id="orge04dce8">Generating the Directory</h2>
-<div class="outline-text-2" id="text-orge04dce8">
+<div id="outline-container-orge9972f8" class="outline-2">
+<h2 id="orge9972f8">Generating the Directory</h2>
+<div class="outline-text-2" id="text-orge9972f8">
 <p>
 For every org file in my <code>_posts</code> folder, I would like to create a link to the generated HTML file at the <code>/posts.html</code> page of my website. You can think of this as the "directory" of all posts. My criteria is:
 </p>
@@ -492,9 +492,9 @@ If you open the <code>sitemap.html</code> file in your browser, you will see a b
 From here, you may customize it however you like.  The following are my customizations.
 </p>
 </div>
-<div id="outline-container-orgf0a663f" class="outline-3">
-<h3 id="orgf0a663f">Sitemap Title</h3>
-<div class="outline-text-3" id="text-orgf0a663f">
+<div id="outline-container-org7f8acd1" class="outline-3">
+<h3 id="org7f8acd1">Sitemap Title</h3>
+<div class="outline-text-3" id="text-org7f8acd1">
 <p>
 I changed the title to "Matthew's Blog Posts".
 </p>
@@ -516,9 +516,9 @@ I changed the title to "Matthew's Blog Posts".
 </div>
 </div>
 </div>
-<div id="outline-container-orgbf15acf" class="outline-3">
-<h3 id="orgbf15acf">Format blog entries in the list</h3>
-<div class="outline-text-3" id="text-orgbf15acf">
+<div id="outline-container-orgc20f61a" class="outline-3">
+<h3 id="orgc20f61a">Format blog entries in the list</h3>
+<div class="outline-text-3" id="text-orgc20f61a">
 <p>
 I like to include the creation date on the blog posts. To do this, we can use <code>org-publish-find-property</code> to find the date property of the org file. Afterward, we can format a string that  includes our formatted timestamp and the <code>org-publish-sitemap-default-entry</code>, which is just a link with the title of the post.
 </p>
@@ -539,9 +539,9 @@ I like to include the creation date on the blog posts. To do this, we can use <c
 </div>
 </div>
 </div>
-<div id="outline-container-orgbbf6e44" class="outline-2">
-<h2 id="orgbbf6e44">Tags &amp; Filtering</h2>
-<div class="outline-text-2" id="text-orgbbf6e44">
+<div id="outline-container-orgff28828" class="outline-2">
+<h2 id="orgff28828">Tags &amp; Filtering</h2>
+<div class="outline-text-2" id="text-orgff28828">
 <p>
 I use <a href="https://www.orgroam.com/">Org-roam</a> for all of my note-taking and, in the next blog post, I plan to demonstrate how I will hook up my Org-roam note-taking workflow to my blogging. In the meantime, just know that we can add tags to the top of our org files like this:
 </p>
@@ -761,9 +761,9 @@ Finally, let's append the following to <code>posts/posts.css</code> so that our
 </div>
 </div>
 </div>
-<div id="outline-container-org6068a86" class="outline-2">
-<h2 id="org6068a86">Conclusion</h2>
-<div class="outline-text-2" id="text-org6068a86">
+<div id="outline-container-orgb5a3dd2" class="outline-2">
+<h2 id="orgb5a3dd2">Conclusion</h2>
+<div class="outline-text-2" id="text-orgb5a3dd2">
 <p>
 There are many more customizations that I plan to do on this system in the future, but I plan to leave this for now so that I can actually get to some blogging. I will proofread and fix my mistakes as time goes on, but this should be a good jumping off point for anyone interested in using org for their own blogging system.
 </p>
diff --git a/public/posts/jul_28_2025.html b/public/posts/jul_28_2025.html
index ea4e38f..de96aa4 100644
--- a/public/posts/jul_28_2025.html
+++ b/public/posts/jul_28_2025.html
@@ -29,9 +29,9 @@
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org030cdd7" class="outline-2">
-<h2 id="org030cdd7">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org030cdd7">
+<div id="outline-container-orgac6e579" class="outline-2">
+<h2 id="orgac6e579">What have I been up to?</h2>
+<div class="outline-text-2" id="text-orgac6e579">
 <p>
 Whoops! I missed this month's update by a <i>long</i> shot, but I still want to get it out there before the end of the month.
 </p>
diff --git a/public/posts/june_08_2025.html b/public/posts/june_08_2025.html
index 9dc6840..074589b 100644
--- a/public/posts/june_08_2025.html
+++ b/public/posts/june_08_2025.html
@@ -29,9 +29,9 @@
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org3a3efed" class="outline-2">
-<h2 id="org3a3efed">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org3a3efed">
+<div id="outline-container-org89f76df" class="outline-2">
+<h2 id="org89f76df">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org89f76df">
 <p>
 Another month has gone by, so I guess it's time to see what I've been up to.
 </p>
diff --git a/public/posts/may_06_2025.html b/public/posts/may_06_2025.html
index 0dbf222..b7d9a0d 100644
--- a/public/posts/may_06_2025.html
+++ b/public/posts/may_06_2025.html
@@ -29,9 +29,9 @@
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org447f3cf" class="outline-2">
-<h2 id="org447f3cf">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org447f3cf">
+<div id="outline-container-org0dbab7b" class="outline-2">
+<h2 id="org0dbab7b">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org0dbab7b">
 <p>
 I've been meaning to do these little blog-post type updates for a while, and I figured now is as good a time as any. So let's start :)
 </p>
diff --git a/public/posts/sitemap.html b/public/posts/sitemap.html
index fac5832..e08ba16 100644
--- a/public/posts/sitemap.html
+++ b/public/posts/sitemap.html
@@ -34,13 +34,13 @@
 <li><p>
 <a href="dec_29_2025.html">Update December 29, 2025</a>
 </p>
-<div class="sitemap_date" id="org5a5f43e">
+<div class="sitemap_date" id="org527ba89">
 <p>
 December 29, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="org1ea5026">
+<div class="sitemap_tag" id="org4ec385f">
 <p>
 update
 </p>
@@ -49,13 +49,13 @@ update
 <li><p>
 <a href="jul_28_2025.html">Update July 28, 2025</a>
 </p>
-<div class="sitemap_date" id="orgf97cfcd">
+<div class="sitemap_date" id="orgef1c7f6">
 <p>
 July 28, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="org8ef1374">
+<div class="sitemap_tag" id="org3af4d70">
 <p>
 update
 </p>
@@ -64,13 +64,13 @@ update
 <li><p>
 <a href="june_08_2025.html">Update June 08, 2025</a>
 </p>
-<div class="sitemap_date" id="org22eabd6">
+<div class="sitemap_date" id="org88ac79f">
 <p>
 June 08, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="orgd49a1ce">
+<div class="sitemap_tag" id="org167800e">
 <p>
 update
 </p>
@@ -79,13 +79,13 @@ update
 <li><p>
 <a href="may_06_2025.html">Update May 06, 2025</a>
 </p>
-<div class="sitemap_date" id="orgea2a74c">
+<div class="sitemap_date" id="org3229ec9">
 <p>
 May 06, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="org0b31acc">
+<div class="sitemap_tag" id="org14192d3">
 <p>
 update
 </p>
@@ -94,13 +94,13 @@ update
 <li><p>
 <a href="hello.html">Hello, Org</a>
 </p>
-<div class="sitemap_date" id="orgd9dcebd">
+<div class="sitemap_date" id="org56da22b">
 <p>
 June 20, 2023
 </p>
 
 </div>
-<div class="sitemap_tag" id="org52466f8">
+<div class="sitemap_tag" id="orgaa36202">
 <p>
 technology,home
 </p>