summaryrefslogtreecommitdiff
path: root/posts
diff options
context:
space:
mode:
Diffstat (limited to 'posts')
-rw-r--r--posts/dec_29_2025.html122
-rw-r--r--posts/feed.xml10
-rw-r--r--posts/hello.html74
-rw-r--r--posts/jul_28_2025.html6
-rw-r--r--posts/june_08_2025.html6
-rw-r--r--posts/may_06_2025.html6
-rw-r--r--posts/post.css58
-rw-r--r--posts/post.js38
-rw-r--r--posts/sitemap.css169
-rw-r--r--posts/sitemap.html58
10 files changed, 413 insertions, 134 deletions
diff --git a/posts/dec_29_2025.html b/posts/dec_29_2025.html
new file mode 100644
index 0000000..9e4ee07
--- /dev/null
+++ b/posts/dec_29_2025.html
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Update December 29, 2025</title>
+<meta name="generator" content="Org Mode" />
+
+<link rel="stylesheet" href="/index.css" />
+<link rel="stylesheet" href="/posts/post.css" />
+<link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
+<script src='/posts/post.js'></script>
+</head>
+<body>
+<div id="org-div-home-and-up">
+ <a accesskey="h" href="/posts/sitemap.html"> UP </a>
+ <a accesskey="H" href="/"> HOME </a>
+</div><div id="preamble" class="status">
+
+ <div class="org-article-title">
+ <h1>Update December 29, 2025</h1>
+ <span>Last modified: 2025-12-29 Mon 10:27</span>
+ <span><a href="/posts/feed.xml">RSS Feed</a></span>
+ </div>
+</div>
+<div id="content" class="content">
+<div id="outline-container-orgbac5ed0" class="outline-2">
+<h2 id="orgbac5ed0">What have I been up to?</h2>
+<div class="outline-text-2" id="text-orgbac5ed0">
+<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-orgb1a98f7" class="outline-2">
+<h2 id="orgb1a98f7">Miracle Update</h2>
+<div class="outline-text-2" id="text-orgb1a98f7">
+<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>
+
+<p>
+One of the major upcoming features in Miracle is a <b>plugin system</b>. Having a plugin system in Miracle will empower 3rd party authors to extend the compositor in ways that I haven't currently imagined while also providing me with the flexibility to iterate quickly on designs. Many compositors already have plugin systems. For example, GNOME does this via JavaScript and Hyprland does this by dynamically loading shared libraries at runtime (note: this is my understanding as of writing this). Both of these solutions are reasonable, but they come with a few downsides.
+</p>
+
+<p>
+The "true" scripting language solution comes with the overhead of shipping a complicated interpreter inside of the compositor. In addition to this, plugin developers are forced to use a particular language, perhaps one that they are unfamiliar with. While you get increased programming flexibility from using a scripting language, you have to balance this with the introduced complexity of that language.
+</p>
+
+<p>
+The shared library approach also has its downsides. While dynamically loading a shared library at runtime is lightweight, it prevents users of the compositor from safely running plugins unless they first trust the plugin author. The shared library will be running inside of the same process as your very priveleged compositor. This increases the attack surface to an extent that I would feel uncomfortable shipping to users.
+</p>
+
+<p>
+For these reasons, I decided that Miracle plugins will be written in <b>WebAssembly</b> with the help of <a href="https://wasmedge.org">WasmEdge</a>. The benefits of this approach are:
+</p>
+
+<ol class="org-ol">
+<li>WebAssembly runs in a lightweight bytecode engine</li>
+<li>Many languages can compile down to WebAssembly (Rust will have first-class support to start)</li>
+<li>WebAssembly plugins will only be able to access APIs that we provide (reducing the requirement of "trusting" the plugin author)</li>
+</ol>
+
+<p>
+The WebAssembly modules will implement certain functions by signature. Miracle will search for a particular signature in the module. If that signature is found, Miracle will delegate the function call defined by that signature to the WebAssembly module instead of Miracle's internal implementation. In this way, the WASM plugin will only have the data that it needs to perform an action. It is perfectly isolated from the rest of the process while also running quickly in the bytecode engine. Here is an example of an animation plugin that will linearlly fade in a window:
+</p>
+
+<div class="org-src-container">
+<pre class="src src-rust"><span class="org-preprocessor">#[</span><span class="org-rust-unsafe">unsafe</span><span class="org-preprocessor">(no_mangle)]</span>
+<span class="org-keyword">pub</span> <span class="org-keyword">extern</span> <span class="org-string">"C"</span> <span class="org-keyword">fn</span> <span class="org-function-name">animate</span>(
+ <span class="org-variable-name">data</span>: <span class="org-type">MiracleAnimationFrameData</span>,
+) -&gt; <span class="org-type">MiracleAnimationFrameResult</span> {
+
+ <span class="org-keyword">let</span> <span class="org-variable-name">progress</span> = data.runtime_seconds / data.duration_seconds;
+ <span class="org-keyword">let</span> <span class="org-variable-name">opacity</span> = data.opacity_start + (data.opacity_end - data.opacity_start) * progress;
+ <span class="org-type">MiracleAnimationFrameResult</span> {
+ <span class="org-variable-name">completed</span>: 0,
+ <span class="org-variable-name">has_area</span>: 1,
+ <span class="org-variable-name">area</span>: [data.destination[0], data.destination[1], data.destination[2], data.destination[3]],
+ <span class="org-variable-name">has_transform</span>: 0,
+ <span class="org-variable-name">transform</span>: [0.0; 16],
+ <span class="org-variable-name">has_opacity</span>: 1,
+ opacity,
+ }
+}
+</pre>
+</div>
+
+<p>
+While this is still in a prototype phase, the types defined here will be provided by a Rust crate in the future. The system should be very easy to use from Rust.
+</p>
+
+<p>
+In parallel with this work, I have been working on improving the <b>shell authoring</b> experience in Miracle. The beginning of this has been the initial <a href="https://github.com/miracle-wm-org/miracle-wm/pull/745">implementation of a background on floating containers</a>, but work is proceeding to things like built-in context menus, workspace overview modes, and much more. The idea is to have simple, built-in versions for many shell components while allowing users to provide their own custom clients for each shell element. To this end, I have been working on <a href="https://github.com/miracle-wm-org/miracle.dart">miracle.dart</a>, which is a Dart API that should enable users to easily interact with Miracle in Flutter and provide Flutter apps as shell elements. This API is still in early stages, however.
+</p>
+
+<p>
+At the same time, I have been working on improving the <b>floating window management</b> in Miracle. Miracle should be a competent floating window manager for those who need it.
+</p>
+
+<p>
+v0.9.0 of Miracle will probably be a long time in the making. My estimate is that early spring will see it released. However, it should be the penultimate release before I am ready to make v1.0.0 the first, official stable release. And who knows - maybe we'll even have a shell to go along with it!
+</p>
+</div>
+</div>
+<div id="outline-container-org5047f79" class="outline-2">
+<h2 id="org5047f79">Conclusion</h2>
+<div class="outline-text-2" id="text-org5047f79">
+<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>
+
+<p>
+Keep on making great stuff ✌️
+</p>
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/posts/feed.xml b/posts/feed.xml
index a5769fa..affbb37 100644
--- a/posts/feed.xml
+++ b/posts/feed.xml
@@ -5,7 +5,15 @@
<link>https://matthewkosarek.xyz/</link>
<description>The RSS feed for Matthew Kosarek's Blog</description>
<language>en-us</language>
- <lastBuildDate>Mon, 28 July 2025 17:30:00 -0400</lastBuildDate>
+ <lastBuildDate>Mon, 29 December 2025 13:03:00 -0400</lastBuildDate>
+
+ <item>
+ <title>Update December 29, 2025</title>
+ <link>https://matthewkosarek.xyz/posts/dec_29_2025.html</link>
+ <guid>https://matthewkosarek.xyz/posts/dec_29_2025.html</guid>
+ <pubDate>Mon, 29 December 2025 10:27:00 -0400</pubDate>
+ <description>Update December 29, 2025</description>
+ </item>
<item>
<title>Update July 28, 2025</title>
diff --git a/posts/hello.html b/posts/hello.html
index 0017e02..992e0c7 100644
--- a/posts/hello.html
+++ b/posts/hello.html
@@ -26,9 +26,9 @@
</div>
</div>
<div id="content" class="content">
-<div id="outline-container-orgd53d495" class="outline-2">
-<h2 id="orgd53d495">TLDR</h2>
-<div class="outline-text-2" id="text-orgd53d495">
+<div id="outline-container-orgd5cccc4" class="outline-2">
+<h2 id="orgd5cccc4">TLDR</h2>
+<div class="outline-text-2" id="text-orgd5cccc4">
<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>
@@ -42,9 +42,9 @@
</ul>
</div>
</div>
-<div id="outline-container-orgb554240" class="outline-2">
-<h2 id="orgb554240">Introduction</h2>
-<div class="outline-text-2" id="text-orgb554240">
+<div id="outline-container-org61c4348" class="outline-2">
+<h2 id="org61c4348">Introduction</h2>
+<div class="outline-text-2" id="text-org61c4348">
<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>
@@ -67,9 +67,9 @@ And that's pretty much it for now. Without further ado, let's jump into getting
</p>
</div>
</div>
-<div id="outline-container-org3844cb4" class="outline-2">
-<h2 id="org3844cb4">Basic HTML File</h2>
-<div class="outline-text-2" id="text-org3844cb4">
+<div id="outline-container-org8795819" class="outline-2">
+<h2 id="org8795819">Basic HTML File</h2>
+<div class="outline-text-2" id="text-org8795819">
<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>
@@ -109,9 +109,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-org1e8c199" class="outline-2">
-<h2 id="org1e8c199">Disabling features that we don't want</h2>
-<div class="outline-text-2" id="text-org1e8c199">
+<div id="outline-container-org2f52ef7" class="outline-2">
+<h2 id="org2f52ef7">Disabling features that we don't want</h2>
+<div class="outline-text-2" id="text-org2f52ef7">
<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>
@@ -140,9 +140,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-orgdaa922d" class="outline-2">
-<h2 id="orgdaa922d">Styling &amp; Code Highlighting</h2>
-<div class="outline-text-2" id="text-orgdaa922d">
+<div id="outline-container-org809ec6b" class="outline-2">
+<h2 id="org809ec6b">Styling &amp; Code Highlighting</h2>
+<div class="outline-text-2" id="text-org809ec6b">
<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>
@@ -312,9 +312,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-org1f1fbf3" class="outline-2">
-<h2 id="org1f1fbf3">Images</h2>
-<div class="outline-text-2" id="text-org1f1fbf3">
+<div id="outline-container-org40ba39e" class="outline-2">
+<h2 id="org40ba39e">Images</h2>
+<div class="outline-text-2" id="text-org40ba39e">
<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>
@@ -359,16 +359,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="org3d13540" class="figure">
+<div id="org11fc996" 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-org4f88abf" class="outline-2">
-<h2 id="org4f88abf">Creation Date</h2>
-<div class="outline-text-2" id="text-org4f88abf">
+<div id="outline-container-orgbf45d8f" class="outline-2">
+<h2 id="orgbf45d8f">Creation Date</h2>
+<div class="outline-text-2" id="text-orgbf45d8f">
<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>
@@ -427,9 +427,9 @@ Note that the downside of this is that the created date will change whenever you
</p>
</div>
</div>
-<div id="outline-container-orga8f5992" class="outline-2">
-<h2 id="orga8f5992">Generating the Directory</h2>
-<div class="outline-text-2" id="text-orga8f5992">
+<div id="outline-container-org4838556" class="outline-2">
+<h2 id="org4838556">Generating the Directory</h2>
+<div class="outline-text-2" id="text-org4838556">
<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>
@@ -489,9 +489,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-orga5b4290" class="outline-3">
-<h3 id="orga5b4290">Sitemap Title</h3>
-<div class="outline-text-3" id="text-orga5b4290">
+<div id="outline-container-org033bdd5" class="outline-3">
+<h3 id="org033bdd5">Sitemap Title</h3>
+<div class="outline-text-3" id="text-org033bdd5">
<p>
I changed the title to "Matthew's Blog Posts".
</p>
@@ -513,9 +513,9 @@ I changed the title to "Matthew's Blog Posts".
</div>
</div>
</div>
-<div id="outline-container-org2dd1911" class="outline-3">
-<h3 id="org2dd1911">Format blog entries in the list</h3>
-<div class="outline-text-3" id="text-org2dd1911">
+<div id="outline-container-orgf3eb8a5" class="outline-3">
+<h3 id="orgf3eb8a5">Format blog entries in the list</h3>
+<div class="outline-text-3" id="text-orgf3eb8a5">
<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>
@@ -536,9 +536,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-org46d64fe" class="outline-2">
-<h2 id="org46d64fe">Tags &amp; Filtering</h2>
-<div class="outline-text-2" id="text-org46d64fe">
+<div id="outline-container-org7dc2312" class="outline-2">
+<h2 id="org7dc2312">Tags &amp; Filtering</h2>
+<div class="outline-text-2" id="text-org7dc2312">
<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>
@@ -758,9 +758,9 @@ Finally, let's append the following to <code>posts/posts.css</code> so that our
</div>
</div>
</div>
-<div id="outline-container-org88c4aa7" class="outline-2">
-<h2 id="org88c4aa7">Conclusion</h2>
-<div class="outline-text-2" id="text-org88c4aa7">
+<div id="outline-container-org9f7bdd1" class="outline-2">
+<h2 id="org9f7bdd1">Conclusion</h2>
+<div class="outline-text-2" id="text-org9f7bdd1">
<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/posts/jul_28_2025.html b/posts/jul_28_2025.html
index 41fdbf5..304d202 100644
--- a/posts/jul_28_2025.html
+++ b/posts/jul_28_2025.html
@@ -26,9 +26,9 @@
</div>
</div>
<div id="content" class="content">
-<div id="outline-container-orgb9814e7" class="outline-2">
-<h2 id="orgb9814e7">What have I been up to?</h2>
-<div class="outline-text-2" id="text-orgb9814e7">
+<div id="outline-container-org063974c" class="outline-2">
+<h2 id="org063974c">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org063974c">
<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/posts/june_08_2025.html b/posts/june_08_2025.html
index f73ac59..4a69b4c 100644
--- a/posts/june_08_2025.html
+++ b/posts/june_08_2025.html
@@ -26,9 +26,9 @@
</div>
</div>
<div id="content" class="content">
-<div id="outline-container-org248a2c5" class="outline-2">
-<h2 id="org248a2c5">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org248a2c5">
+<div id="outline-container-org7328e60" class="outline-2">
+<h2 id="org7328e60">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org7328e60">
<p>
Another month has gone by, so I guess it's time to see what I've been up to.
</p>
diff --git a/posts/may_06_2025.html b/posts/may_06_2025.html
index 43d276b..6e4665e 100644
--- a/posts/may_06_2025.html
+++ b/posts/may_06_2025.html
@@ -26,9 +26,9 @@
</div>
</div>
<div id="content" class="content">
-<div id="outline-container-org7dcd169" class="outline-2">
-<h2 id="org7dcd169">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org7dcd169">
+<div id="outline-container-org77ab60c" class="outline-2">
+<h2 id="org77ab60c">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org77ab60c">
<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/posts/post.css b/posts/post.css
index decceaa..1867311 100644
--- a/posts/post.css
+++ b/posts/post.css
@@ -68,61 +68,3 @@ pre span.org-css-property {color:#00AA00;}
display: flex;
column-gap: 8px;
}
-
-
-/* Sitemap-specific items */
-.sitemap_tag {
- display: none;
-}
-
-#tag-filter-container {
- display: flex;
- flex-direction: row;
- column-gap: 8px;
- margin-top: 1rem;
-}
-
-.tag-filter-item {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 0.25rem 0.5rem;
- border: 1px solid black;
- border-radius: 3px;
- justify-content: center;
- column-gap: 1rem;
- background-color: #fffed8;
-}
-
-.tag-filter-item button {
- background: none;
- border: none;
- outline: none;
- margin: 0;
- padding: 0;
- color: red;
- font-size: 1.5rem;
-}
-
-.tag-filter-item button:before {
- content: '\00d7';
-}
-
-.tag-filter-item.disabled button:before {
- content: '+';
-}
-
-.tag-filter-item.disabled {
- background-color: #f2f2f2;
- color: gray;
- border-color: gray;
-}
-
-.tag-filter-item.disabled button {
- color: green;
-}
-
-.tag-filter-item button:hover {
- cursor: pointer;
- opacity: 0.8;
-}
diff --git a/posts/post.js b/posts/post.js
index 0b5a4e4..233739f 100644
--- a/posts/post.js
+++ b/posts/post.js
@@ -1,7 +1,7 @@
function main() {
- // Gather the used set oof tags
+ // Gather the used set of tags
const tagSet = new Set();
const postList = [];
const tagContainers = document.getElementsByClassName('sitemap_tag');
@@ -12,8 +12,21 @@ function main() {
continue;
}
- const tagList = pContainer.textContent.split(',');
- tagList.forEach(tag => tagSet.add(tag));
+ const tagText = pContainer.textContent.trim();
+ const tagList = tagText.split(',').map(tag => tag.trim());
+
+ // Replace the text content with styled tag badges
+ pContainer.innerHTML = '';
+ tagList.forEach(tag => {
+ if (tag) {
+ tagSet.add(tag);
+ const tagBadge = document.createElement('span');
+ tagBadge.className = 'post-tag';
+ tagBadge.textContent = tag;
+ pContainer.appendChild(tagBadge);
+ }
+ });
+
postList.push({
container: container.parentElement,
tagList: tagList,
@@ -27,31 +40,18 @@ function main() {
tagContainer.id = 'tag-filter-container';
contentContainer.before(tagContainer);
- let numEnabled = tagSet.size;
for (const tag of tagSet) {
const tagElement = document.createElement('div');
tagElement.className = "tag-filter-item";
const tagElementLabel = document.createElement('span');
tagElementLabel.innerHTML = tag;
- const tagElementButton = document.createElement('button');
- tagElement.append(tagElementLabel, tagElementButton);
+ tagElement.append(tagElementLabel);
tagContainer.append(tagElement);
-
// Whenever a tag is clicked, execute the filtering behavior
- tagElementButton.onclick = function() {
- // Handle enable/disable
- tagElement.remove();
-
+ tagElement.onclick = function() {
if (tagElement.classList.contains('disabled')) {
tagElement.classList.remove('disabled');
- if (numEnabled === 0) {
- tagContainer.prepend(tagElement);
- }
- else {
- tagContainer.children[numEnabled - 1].after(tagElement);
- }
- numEnabled++;
// Filter
postList.forEach(post => {
@@ -66,8 +66,6 @@ function main() {
}
else {
tagElement.classList.add('disabled');
- tagContainer.append(tagElement);
- numEnabled--;
// Filter
postList.forEach(post => {
diff --git a/posts/sitemap.css b/posts/sitemap.css
new file mode 100644
index 0000000..b2de932
--- /dev/null
+++ b/posts/sitemap.css
@@ -0,0 +1,169 @@
+/* Sitemap-specific items */
+.sitemap_tag {
+ display: block;
+}
+
+.sitemap_tag p {
+ margin: 0;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ font-size: 0.85rem;
+}
+
+.sitemap_tag p::before {
+ content: '🏷️';
+ font-size: 1rem;
+}
+
+/* Individual tag badges */
+.post-tag {
+ display: inline-block;
+ padding: 0.25rem 0.75rem;
+ background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+ color: #1976d2;
+ border-radius: 12px;
+ font-size: 0.8rem;
+ font-weight: 500;
+ border: 1px solid #90caf9;
+}
+
+.org-ul {
+ list-style: none;
+ padding: 0;
+}
+
+.org-ul > li {
+ background: #f9f9f9;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ padding: 1.5rem;
+ margin-bottom: 1rem;
+ transition: box-shadow 0.2s ease, transform 0.2s ease;
+ position: relative;
+ padding-bottom: 2.5rem;
+}
+
+.org-ul > li:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px);
+}
+
+.org-ul > li > p {
+ margin: 0;
+ font-size: 1.1rem;
+}
+
+.org-ul > li > p > a {
+ color: #0066cc;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 1.25rem;
+}
+
+.org-ul > li > p > a:hover {
+ text-decoration: underline;
+ color: #004499;
+}
+
+.org-ul > li > p > a:after {
+ text-decoration: underline;
+ color: #004499;
+}
+
+.org-article-title {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-bottom: 2rem;
+}
+
+.org-article-title > span:last-child {
+ font-size: 0.95rem;
+}
+
+#tag-filter-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ margin-top: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.tag-filter-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ justify-content: center;
+ column-gap: 0.75rem;
+ background: linear-gradient(135deg, #667eea 0%, darkviolet 100%);
+ color: white;
+ font-weight: 600;
+ font-size: 0.9rem;
+ letter-spacing: 0.3px;
+ box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
+ transition: all 0.3s ease;
+}
+
+.tag-filter-item:hover {
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+ cursor: pointer;
+}
+
+.tag-filter-item button:before {
+ content: '\00d7';
+ line-height: 1;
+}
+
+.tag-filter-item.disabled {
+ background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
+ color: #666;
+ border-color: #999;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ opacity: 0.7;
+}
+
+.tag-filter-item.disabled:hover {
+ opacity: 1;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.tag-filter-item.disabled button {
+ background: rgba(0, 0, 0, 0.1);
+ color: #666;
+}
+
+.tag-filter-item.disabled button:before {
+ content: '+';
+ font-size: 1.1rem;
+}
+
+.post-date {
+ position: absolute;
+ bottom: 0.75rem;
+ right: 1rem;
+ font-size: 0.85rem;
+ color: #666;
+ font-style: italic;
+}
+
+.sitemap_date {
+ position: absolute;
+ bottom: 0.75rem;
+ right: 1rem;
+ font-size: 0.85rem;
+ color: #666;
+ font-style: italic;
+}
+
+.sitemap_date p {
+ margin: 0;
+}
+
+.sitemap_date p::before {
+ content: 'created on ';
+}
diff --git a/posts/sitemap.html b/posts/sitemap.html
index 669f389..00ac911 100644
--- a/posts/sitemap.html
+++ b/posts/sitemap.html
@@ -12,6 +12,7 @@
<link rel="stylesheet" href="/posts/post.css" />
<link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
<script src='/posts/post.js'></script>
+<link rel="stylesheet" href="/posts/sitemap.css" />
</head>
<body>
<div id="org-div-home-and-up">
@@ -21,43 +22,82 @@
<div class="org-article-title">
<h1>Matthew's Blog Posts</h1>
- <span>Last modified: 2025-07-28 at 15:19</span>
+ <span>Last modified: 2025-12-29 at 13:03</span>
<span><a href="/posts/feed.xml">RSS Feed</a></span>
</div>
</div>
<div id="content" class="content">
<ul class="org-ul">
<li><p>
-<a href="jul_28_2025.html">Update July 28, 2025</a> created on July 28, 2025
+<a href="dec_29_2025.html">Update December 29, 2025</a>
</p>
-<div class="sitemap_tag" id="org80df368">
+<div class="sitemap_date" id="orgd69e487">
+<p>
+December 29, 2025
+</p>
+
+</div>
+<div class="sitemap_tag" id="orgfc65be4">
<p>
update
</p>
</div></li>
<li><p>
-<a href="june_08_2025.html">Update June 08, 2025</a> created on June 08, 2025
+<a href="jul_28_2025.html">Update July 28, 2025</a>
</p>
-<div class="sitemap_tag" id="org93051c2">
+<div class="sitemap_date" id="org4f11db1">
+<p>
+July 28, 2025
+</p>
+
+</div>
+<div class="sitemap_tag" id="org6e689d4">
<p>
update
</p>
</div></li>
<li><p>
-<a href="may_06_2025.html">Update May 06, 2025</a> created on May 06, 2025
+<a href="june_08_2025.html">Update June 08, 2025</a>
</p>
-<div class="sitemap_tag" id="org18934f8">
+<div class="sitemap_date" id="org035bfd6">
+<p>
+June 08, 2025
+</p>
+
+</div>
+<div class="sitemap_tag" id="org374d739">
<p>
update
</p>
</div></li>
<li><p>
-<a href="hello.html">Hello, Org</a> created on June 20, 2023
+<a href="may_06_2025.html">Update May 06, 2025</a>
+</p>
+<div class="sitemap_date" id="org5523abd">
+<p>
+May 06, 2025
</p>
-<div class="sitemap_tag" id="orgb6f2931">
+
+</div>
+<div class="sitemap_tag" id="org2580b8e">
+<p>
+update
+</p>
+
+</div></li>
+<li><p>
+<a href="hello.html">Hello, Org</a>
+</p>
+<div class="sitemap_date" id="orgb561eb9">
+<p>
+June 20, 2023
+</p>
+
+</div>
+<div class="sitemap_tag" id="org57d4497">
<p>
technology,home
</p>
generated by cgit v1.2.1 (git 2.18.0) at 2025-12-31 09:30:59 +0000