summaryrefslogtreecommitdiff
path: root/posts
diff options
context:
space:
mode:
authorMatthew Kosarek <matt.kosarek@canonical.com>2025-05-06 15:26:10 -0400
committerMatthew Kosarek <matt.kosarek@canonical.com>2025-05-06 15:26:10 -0400
commitb9ff9ab7398b005aeb94a86219a3408b03d87eb4 (patch)
treebaab8cc58037110955610e299b0eb33c7af86a23 /posts
parent3a996038684ed3d358259de6cde2f166dddaa04a (diff)
May 06, 2025 update postHEADmaster
Diffstat (limited to 'posts')
-rw-r--r--posts/hello.html90
-rw-r--r--posts/may_06_2025.html54
-rw-r--r--posts/sitemap.html13
3 files changed, 102 insertions, 55 deletions
diff --git a/posts/hello.html b/posts/hello.html
index 8469f4e..a777e06 100644
--- a/posts/hello.html
+++ b/posts/hello.html
@@ -25,12 +25,9 @@
</div>
</div>
<div id="content" class="content">
-
-
-
-<div id="outline-container-org8ca89e4" class="outline-2">
-<h2 id="org8ca89e4">TLDR</h2>
-<div class="outline-text-2" id="text-org8ca89e4">
+<div id="outline-container-org1c35b95" class="outline-2">
+<h2 id="org1c35b95">TLDR</h2>
+<div class="outline-text-2" id="text-org1c35b95">
<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>
@@ -44,10 +41,9 @@
</ul>
</div>
</div>
-
-<div id="outline-container-orgdbe8752" class="outline-2">
-<h2 id="orgdbe8752">Introduction</h2>
-<div class="outline-text-2" id="text-orgdbe8752">
+<div id="outline-container-orgaec3339" class="outline-2">
+<h2 id="orgaec3339">Introduction</h2>
+<div class="outline-text-2" id="text-orgaec3339">
<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,10 +66,9 @@ And that's pretty much it for now. Without further ado, let's jump into getting
</p>
</div>
</div>
-
-<div id="outline-container-orgaada31d" class="outline-2">
-<h2 id="orgaada31d">Basic HTML File</h2>
-<div class="outline-text-2" id="text-orgaada31d">
+<div id="outline-container-org065f319" class="outline-2">
+<h2 id="org065f319">Basic HTML File</h2>
+<div class="outline-text-2" id="text-org065f319">
<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>
@@ -113,10 +108,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-orgd7e6626" class="outline-2">
-<h2 id="orgd7e6626">Disabling features that we don't want</h2>
-<div class="outline-text-2" id="text-orgd7e6626">
+<div id="outline-container-org12c2edb" class="outline-2">
+<h2 id="org12c2edb">Disabling features that we don't want</h2>
+<div class="outline-text-2" id="text-org12c2edb">
<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>
@@ -145,10 +139,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-orgfe549f7" class="outline-2">
-<h2 id="orgfe549f7">Styling &amp; Code Highlighting</h2>
-<div class="outline-text-2" id="text-orgfe549f7">
+<div id="outline-container-org67311e9" class="outline-2">
+<h2 id="org67311e9">Styling &amp; Code Highlighting</h2>
+<div class="outline-text-2" id="text-org67311e9">
<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>
@@ -318,10 +311,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-org854b984" class="outline-2">
-<h2 id="org854b984">Images</h2>
-<div class="outline-text-2" id="text-org854b984">
+<div id="outline-container-org1a680fa" class="outline-2">
+<h2 id="org1a680fa">Images</h2>
+<div class="outline-text-2" id="text-org1a680fa">
<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>
@@ -366,18 +358,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="org9f865ab" class="figure">
+<div id="org93b98af" 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-orgd7096b3" class="outline-2">
-<h2 id="orgd7096b3">Creation Date</h2>
-<div class="outline-text-2" id="text-orgd7096b3">
+<div id="outline-container-orgbb8c88d" class="outline-2">
+<h2 id="orgbb8c88d">Creation Date</h2>
+<div class="outline-text-2" id="text-orgbb8c88d">
<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>
@@ -436,10 +426,9 @@ Note that the downside of this is that the created date will change whenever you
</p>
</div>
</div>
-
-<div id="outline-container-org5fd9dcc" class="outline-2">
-<h2 id="org5fd9dcc">Generating the Directory</h2>
-<div class="outline-text-2" id="text-org5fd9dcc">
+<div id="outline-container-orgc9dc7a9" class="outline-2">
+<h2 id="orgc9dc7a9">Generating the Directory</h2>
+<div class="outline-text-2" id="text-orgc9dc7a9">
<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>
@@ -499,10 +488,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-orga131ca9" class="outline-3">
-<h3 id="orga131ca9">Sitemap Title</h3>
-<div class="outline-text-3" id="text-orga131ca9">
+<div id="outline-container-org9d2a3ec" class="outline-3">
+<h3 id="org9d2a3ec">Sitemap Title</h3>
+<div class="outline-text-3" id="text-org9d2a3ec">
<p>
I changed the title to "Matthew's Blog Posts".
</p>
@@ -524,11 +512,9 @@ I changed the title to "Matthew's Blog Posts".
</div>
</div>
</div>
-
-
-<div id="outline-container-org39e11a9" class="outline-3">
-<h3 id="org39e11a9">Format blog entries in the list</h3>
-<div class="outline-text-3" id="text-org39e11a9">
+<div id="outline-container-orga214a94" class="outline-3">
+<h3 id="orga214a94">Format blog entries in the list</h3>
+<div class="outline-text-3" id="text-orga214a94">
<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>
@@ -549,10 +535,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-org22c8fbe" class="outline-2">
-<h2 id="org22c8fbe">Tags &amp; Filtering</h2>
-<div class="outline-text-2" id="text-org22c8fbe">
+<div id="outline-container-org8d4b3ac" class="outline-2">
+<h2 id="org8d4b3ac">Tags &amp; Filtering</h2>
+<div class="outline-text-2" id="text-org8d4b3ac">
<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>
@@ -772,10 +757,9 @@ Finally, let's append the following to <code>posts/posts.css</code> so that our
</div>
</div>
</div>
-
-<div id="outline-container-org85c3052" class="outline-2">
-<h2 id="org85c3052">Conclusion</h2>
-<div class="outline-text-2" id="text-org85c3052">
+<div id="outline-container-org15d430a" class="outline-2">
+<h2 id="org15d430a">Conclusion</h2>
+<div class="outline-text-2" id="text-org15d430a">
<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/may_06_2025.html b/posts/may_06_2025.html
new file mode 100644
index 0000000..11ab957
--- /dev/null
+++ b/posts/may_06_2025.html
@@ -0,0 +1,54 @@
+<?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 May 06, 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 May 06, 2025</h1>
+ <span>Last modified: 2025-05-06 Tue 17:00</span>
+ </div>
+</div>
+<div id="content" class="content">
+<div id="outline-container-org98ddd60" class="outline-2">
+<h2 id="org98ddd60">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org98ddd60">
+<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>
+
+<p>
+In the world of miracle-wm, I've been hard at work writing a new settings application for the compositor called <a href="https://github.com/miracle-wm-org/miracle-settings">miracle-settings</a>. While the application is written in Flutter, the logic behind the application is entirely implemented in <code>libmiracle-wm-config.so</code>, a new library that will ship with miracle as part of <code>v0.6.0</code>. If Flutter isn't your cup of tea, you should be able to implement your own settings app for miracle in the language/toolkit of your choice by simply binding to the C (or C++!) API.
+</p>
+
+<p>
+I also implemented <a href="https://wayland.app/protocols/wlr-output-management-unstable-v1">wlr-output-management</a> in miracle and changed how we do display configuration in a big way. The display configuration will now always be loaded from <code>$HOME/.config/miracle-wm/display.yaml</code>. Users should now be able to use apps like <a href="https://github.com/artizirk/wdisplays">wdisplays</a> to change the output configuration at runtime, which is pretty cool!
+</p>
+
+<p>
+On the Mir project, I've been working on accessibility features (e.g. magnification) in addition to exposing some facilities for compositor authors to write end-to-end tests for Mir-based compositors. These new testing facilities should help us write tests in miracle in a big way.
+</p>
+
+<p>
+Also - my cat who ate a sewing needle last year has turned two! 🐱
+</p>
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/posts/sitemap.html b/posts/sitemap.html
index 31ec52d..13d55c2 100644
--- a/posts/sitemap.html
+++ b/posts/sitemap.html
@@ -21,15 +21,24 @@
<div class="org-article-title">
<h1>Matthew's Blog Posts</h1>
- <span>Last modified: 2024-05-01 at 14:07</span>
+ <span>Last modified: 2025-05-06 at 15:10</span>
</div>
</div>
<div id="content" class="content">
<ul class="org-ul">
<li><p>
+<a href="may_06_2025.html">Update May 06, 2025</a> created on May 06, 2025
+</p>
+<div class="sitemap_tag" id="org44844d9">
+<p>
+update
+</p>
+
+</div></li>
+<li><p>
<a href="hello.html">Hello, Org</a> created on June 20, 2023
</p>
-<div class="sitemap_tag" id="orgb9e6a4a">
+<div class="sitemap_tag" id="orgeb9b117">
<p>
technology,home
</p>