From 2ef049102f6824a6ab6ae99ee87c115f7608707e Mon Sep 17 00:00:00 2001 From: Matt Kosarek Date: Wed, 18 Feb 2026 16:50:30 -0500 Subject: Clean up posts and the styles throughout the webpage --- _posts/sitemap.org | 4 +- index.css | 5 +-- index.html | 3 ++ posts/dec_29_2025.html | 35 ++++++++-------- posts/feed.xml | 2 +- posts/hello.html | 91 +++++++++++++++++++++-------------------- posts/jul_28_2025.html | 23 ++++++----- posts/june_08_2025.html | 23 ++++++----- posts/may_06_2025.html | 23 ++++++----- posts/post.css | 16 +++++++- posts/post.js | 84 -------------------------------------- posts/sitemap.css | 105 +++++++++++++++--------------------------------- posts/sitemap.html | 41 ++++++++++--------- publish.el | 19 +++++---- 14 files changed, 193 insertions(+), 281 deletions(-) delete mode 100644 posts/post.js diff --git a/_posts/sitemap.org b/_posts/sitemap.org index 202c055..df1b240 100644 --- a/_posts/sitemap.org +++ b/_posts/sitemap.org @@ -1,6 +1,6 @@ -#+TITLE: Matthew's Blog Posts +#+TITLE: -#+DATE: 2025-12-29 at 13:03 +#+DATE: 2026-02-18 at 16:40 #+HTML_LINK_HOME: / diff --git a/index.css b/index.css index c07ffa8..4800826 100644 --- a/index.css +++ b/index.css @@ -1,6 +1,5 @@ body { - width: 60vw; - height: 100vh; + width: 50vw; font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; background-color: transparent; @@ -229,7 +228,7 @@ only screen and (max-width:1440px) { } body { - width: 90vw !important; + width: 70vw !important; } } diff --git a/index.html b/index.html index 23af4bc..d632f3b 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,10 @@ Matthew Kosarek + + + diff --git a/posts/dec_29_2025.html b/posts/dec_29_2025.html index 9e4ee07..60fb4b1 100644 --- a/posts/dec_29_2025.html +++ b/posts/dec_29_2025.html @@ -11,32 +11,35 @@ - -
- UP - HOME -
+
+ +

Update December 29, 2025

- Last modified: 2025-12-29 Mon 10:27 - RSS Feed + RSS Feed
-
-

What have I been up to?

-
+
+

What have I been up to?

+

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.

-
-

Miracle Update

-
+
+

Miracle Update

+

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,

@@ -105,9 +108,9 @@ v0.9.0 of Miracle will probably be a long time in the making. My estimate is tha

-
-

Conclusion

-
+
+

Conclusion

+

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.

diff --git a/posts/feed.xml b/posts/feed.xml index affbb37..b0a5397 100644 --- a/posts/feed.xml +++ b/posts/feed.xml @@ -5,7 +5,7 @@ https://matthewkosarek.xyz/ The RSS feed for Matthew Kosarek's Blog en-us - Mon, 29 December 2025 13:03:00 -0400 + Wed, 18 February 2026 16:40:00 -0400 Update December 29, 2025 diff --git a/posts/hello.html b/posts/hello.html index 992e0c7..c8044d9 100644 --- a/posts/hello.html +++ b/posts/hello.html @@ -11,24 +11,27 @@ - -
+
+ +

Hello, Org

- Last modified: 2023-06-20 Tue 11:45 - RSS Feed + RSS Feed
-
-

TLDR

-
+
+

TLDR

+
-
-

Introduction

-
+
+

Introduction

+

I've recently fallen in love with org-mode, specifically when I use it with org-roam. 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: org-mode. 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:

@@ -67,9 +70,9 @@ And that's pretty much it for now. Without further ado, let's jump into getting

-
-

Basic HTML File

-
+
+

Basic HTML File

+

As a pilot, we are going to use this org file that I am currently writing (hello.org) as our guinea pig. The goal is to have this org file be our very first blog post.

@@ -109,9 +112,9 @@ We then do a chmod +x publish.sh to make it an executable and run i

-
-

Disabling features that we don't want

-
+
+

Disabling features that we don't want

+

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.

@@ -140,9 +143,9 @@ The next thing will be to remove some of the generated items that I didn't ask f
-
-

Styling & Code Highlighting

-
+
+

Styling & Code Highlighting

+

Next thing on our list is custom styling. This can be achieved by first installing the htmlize package from melpa / elpa. 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" (reference). 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 <span style="text-decoration: underline">...</span>). However, we are more interested in styling everything by ourselves: we don't want htmlize making assumptions about what underlining means to us! Luckily, htmlize gives us the option to export with class names instead of inline styles so that we can specify each style for ourselves.

@@ -312,9 +315,9 @@ If we run the publish again, we can see that we have full styling on our code sn

-
-

Images

-
+
+

Images

+

Our first two criteria have been met! Next on the list is solving images. As an example, let's use this squirrel image that I found online with an open source license. The ideal situation would be:

@@ -359,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:

-
+

squirrel.jpg

Figure 1: A Cute Squirrel

-
-

Creation Date

-
+
+

Creation Date

+

Let's add the creation date below the title next. To start, we will modify the publish command to remove the title (:with-title nil) and, in its place, show a preamble bit of HTML that contains a formatted div with the title and the "last modified" span.z

@@ -427,9 +430,9 @@ Note that the downside of this is that the created date will change whenever you

-
-

Generating the Directory

-
+
+

Generating the Directory

+

For every org file in my _posts folder, I would like to create a link to the generated HTML file at the /posts.html page of my website. You can think of this as the "directory" of all posts. My criteria is:

@@ -489,9 +492,9 @@ If you open the sitemap.html file in your browser, you will see a b From here, you may customize it however you like. The following are my customizations.

-
-

Sitemap Title

-
+
+

Sitemap Title

+

I changed the title to "Matthew's Blog Posts".

@@ -513,9 +516,9 @@ I changed the title to "Matthew's Blog Posts".
-
-

Format blog entries in the list

-
+
+

Format blog entries in the list

+

I like to include the creation date on the blog posts. To do this, we can use org-publish-find-property to find the date property of the org file. Afterward, we can format a string that includes our formatted timestamp and the org-publish-sitemap-default-entry, which is just a link with the title of the post.

@@ -536,9 +539,9 @@ I like to include the creation date on the blog posts. To do this, we can use
-
-

Tags & Filtering

-
+
+

Tags & Filtering

+

I use Org-roam 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:

@@ -758,9 +761,9 @@ Finally, let's append the following to posts/posts.css so that our
-
-

Conclusion

-
+
+

Conclusion

+

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.

diff --git a/posts/jul_28_2025.html b/posts/jul_28_2025.html index 304d202..5df5a8e 100644 --- a/posts/jul_28_2025.html +++ b/posts/jul_28_2025.html @@ -11,24 +11,27 @@ - -
+
+ +

Update July 28, 2025

- Last modified: 2025-07-28 Mon 17:30 - RSS Feed + RSS Feed
-
-

What have I been up to?

-
+
+

What have I been up to?

+

Whoops! I missed this month's update by a long shot, but I still want to get it out there before the end of the month.

diff --git a/posts/june_08_2025.html b/posts/june_08_2025.html index 4a69b4c..1252860 100644 --- a/posts/june_08_2025.html +++ b/posts/june_08_2025.html @@ -11,24 +11,27 @@ - -
+
+ +

Update June 08, 2025

- Last modified: 2025-06-08 Sun 15:30 - RSS Feed + RSS Feed
-
-

What have I been up to?

-
+
+

What have I been up to?

+

Another month has gone by, so I guess it's time to see what I've been up to.

diff --git a/posts/may_06_2025.html b/posts/may_06_2025.html index 6e4665e..d992aca 100644 --- a/posts/may_06_2025.html +++ b/posts/may_06_2025.html @@ -11,24 +11,27 @@ - -
+
+ +

Update May 06, 2025

- Last modified: 2025-05-06 Tue 17:00 - RSS Feed + RSS Feed
-
-

What have I been up to?

-
+
+

What have I been up to?

+

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 :)

diff --git a/posts/post.css b/posts/post.css index 1867311..cadc228 100644 --- a/posts/post.css +++ b/posts/post.css @@ -15,6 +15,18 @@ code { text-decoration: underline; } +.org-article-title { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.org-article-title h1 { + margin: 0; + font-family: "Dancing Script", cursive; +} + + /* Taken from: https://emacs.stackexchange.com/questions/7629/the-syntax-highlight-and-indentation-of-source-code-block-in-exported-html-file */ pre span.org-builtin {color:#006FE0;font-weight:bold;} pre span.org-string {color:#008000;} @@ -26,7 +38,7 @@ pre span.org-preprocessor {color:#808080;font-weight:bold;} pre span.org-constant {color:#D0372D;} pre span.org-comment-delimiter {color:#8D8D84;} pre span.org-comment {color:#8D8D84;font-style:italic} -1pre span.org-outshine-level-1 {color:#8D8D84;font-style:italic} +pre span.org-outshine-level-1 {color:#8D8D84;font-style:italic} pre span.org-outshine-level-2 {color:#8D8D84;font-style:italic} pre span.org-outshine-level-3 {color:#8D8D84;font-style:italic} pre span.org-outshine-level-4 {color:#8D8D84;font-style:italic} @@ -49,7 +61,7 @@ pre span.org-css-selector {color:#0000FF;} pre span.org-css-property {color:#00AA00;} #content { - padding-bottom: 50vh; + padding-bottom: 10vh; } .figure p { diff --git a/posts/post.js b/posts/post.js deleted file mode 100644 index 233739f..0000000 --- a/posts/post.js +++ /dev/null @@ -1,84 +0,0 @@ - -function main() { - - // Gather the used set of tags - const tagSet = new Set(); - const postList = []; - const tagContainers = document.getElementsByClassName('sitemap_tag'); - for (let index = 0; index < tagContainers.length; index++) { - const container = tagContainers[index]; - const pContainer = container.children[0]; - if (!pContainer) { - continue; - } - - 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, - enabled: tagList.length - }); - } - - // Create the tag container - const contentContainer = document.getElementById('content'); - const tagContainer = document.createElement('div'); - tagContainer.id = 'tag-filter-container'; - contentContainer.before(tagContainer); - - for (const tag of tagSet) { - const tagElement = document.createElement('div'); - tagElement.className = "tag-filter-item"; - const tagElementLabel = document.createElement('span'); - tagElementLabel.innerHTML = tag; - tagElement.append(tagElementLabel); - tagContainer.append(tagElement); - - // Whenever a tag is clicked, execute the filtering behavior - tagElement.onclick = function() { - if (tagElement.classList.contains('disabled')) { - tagElement.classList.remove('disabled'); - - // Filter - postList.forEach(post => { - if (post.tagList.includes(tag)) { - post.enabled++; - - if (post.enabled) { - post.container.style.display = 'list-item'; - } - } - }); - } - else { - tagElement.classList.add('disabled'); - - // Filter - postList.forEach(post => { - if (post.tagList.includes(tag)) { - post.enabled--; - if (!post.enabled) { - post.container.style.display = 'none'; - } - } - }); - } - }; - } -} - -window.onload = main; diff --git a/posts/sitemap.css b/posts/sitemap.css index b2de932..0bd4125 100644 --- a/posts/sitemap.css +++ b/posts/sitemap.css @@ -1,65 +1,54 @@ -/* Sitemap-specific items */ -.sitemap_tag { - display: block; -} - -.sitemap_tag p { - margin: 0; +.sitemap_tags { display: flex; - align-items: center; - flex-wrap: wrap; + flex-direction: row; gap: 0.5rem; - font-size: 0.85rem; -} - -.sitemap_tag p::before { - content: '🏷️'; - font-size: 1rem; + align-items: center; + margin-left: auto; } -/* Individual tag badges */ -.post-tag { - display: inline-block; +.sitemap_tag { padding: 0.25rem 0.75rem; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color: #1976d2; - border-radius: 12px; - font-size: 0.8rem; + border-radius: 4px; + font-size: 0.7rem; font-weight: 500; border: 1px solid #90caf9; } +.sitemap_tag p { + margin: 0; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.5rem; + font-size: 0.75rem; +} + .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; + display: flex; + flex-direction: row; + align-items: center; + gap: 0.25rem; position: relative; - padding-bottom: 2.5rem; -} - -.org-ul > li:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); + margin-bottom: 0.25rem; } .org-ul > li > p { margin: 0; - font-size: 1.1rem; + font-size: 0.5rem; } .org-ul > li > p > a { color: #0066cc; text-decoration: none; font-weight: 600; - font-size: 1.25rem; + font-size: 1rem; } .org-ul > li > p > a:hover { @@ -73,14 +62,8 @@ } .org-article-title { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 2rem; -} - -.org-article-title > span:last-child { - font-size: 0.95rem; + width: 100%; + text-align: right; } #tag-filter-container { @@ -88,37 +71,28 @@ 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; + padding: 0.35rem; + border-radius: 2px; justify-content: center; - column-gap: 0.75rem; - background: linear-gradient(135deg, #667eea 0%, darkviolet 100%); + font-style: italic; + background: linear-gradient(135deg, purple 0%, darkviolet 100%); color: white; - font-weight: 600; - font-size: 0.9rem; + font-size: 0.75rem; 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); + background: linear-gradient(135deg, gray 0%, darkviolet 100%); 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; @@ -132,30 +106,17 @@ 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; + font-size: 0.75rem; color: #666; font-style: italic; } .sitemap_date { - position: absolute; - bottom: 0.75rem; - right: 1rem; - font-size: 0.85rem; + font-size: 0.8rem; color: #666; font-style: italic; } diff --git a/posts/sitemap.html b/posts/sitemap.html index 00ac911..458bacd 100644 --- a/posts/sitemap.html +++ b/posts/sitemap.html @@ -5,25 +5,28 @@ -Matthew's Blog Posts + - -
+
+ +
-

Matthew's Blog Posts

- Last modified: 2025-12-29 at 13:03 - RSS Feed +

+ RSS Feed
@@ -31,13 +34,13 @@
  • Update December 29, 2025

    -
    +

    December 29, 2025

    -
    +

    update

    @@ -46,13 +49,13 @@ update
  • Update July 28, 2025

    -
    +

    July 28, 2025

    -
    +

    update

    @@ -61,13 +64,13 @@ update
  • Update June 08, 2025

    -
    +

    June 08, 2025

    -
    +

    update

    @@ -76,13 +79,13 @@ update
  • Update May 06, 2025

    -
    +

    May 06, 2025

    -
    +

    update

    @@ -91,13 +94,13 @@ update
  • Hello, Org

    -
    +

    June 20, 2023

    -
    +

    technology,home

    diff --git a/publish.el b/publish.el index 537d5e1..3502ac4 100644 --- a/publish.el +++ b/publish.el @@ -48,13 +48,12 @@ :html-preamble-format '(("en" "

    %t

    - Last modified: %d - RSS Feed + RSS Feed
    ")) :auto-sitemap t :sitemap-sort-files 'anti-chronologically - :sitemap-title "Matthew's Blog Posts" + :sitemap-title "" :sitemap-format-entry (lambda (entry style project) (get-org-file-title entry style project)) :sitemap-function (lambda (title list) (my-sitemap-function title list)) ))) @@ -77,16 +76,20 @@ - " org-html-inline-images t org-html-link-home "/" org-html-link-up "/posts/sitemap.html" org-html-html5-fancy t - org-html-home/up-format "" + org-html-home/up-format "
    + +
    " ) (defun update-rss-feed () -- cgit v1.2.1