diff options
| -rw-r--r-- | _posts/sitemap.org | 2 | ||||
| -rw-r--r-- | posts.css | 58 | ||||
| -rw-r--r-- | posts.html | 53 | ||||
| -rw-r--r-- | posts/feed.xml | 26 | ||||
| -rw-r--r-- | posts/hello.html | 75 | ||||
| -rw-r--r-- | posts/may_06_2025.html | 7 | ||||
| -rw-r--r-- | posts/sitemap.html | 7 | ||||
| -rw-r--r-- | publish.el | 1 |
8 files changed, 74 insertions, 155 deletions
diff --git a/_posts/sitemap.org b/_posts/sitemap.org index cb91dd0..bd0f976 100644 --- a/_posts/sitemap.org +++ b/_posts/sitemap.org @@ -1,6 +1,6 @@ #+TITLE: Matthew's Blog Posts -#+DATE: 2025-05-06 at 15:10 +#+DATE: 2025-05-22 at 09:02 #+HTML_LINK_HOME: / diff --git a/posts.css b/posts.css deleted file mode 100644 index f07381c..0000000 --- a/posts.css +++ /dev/null @@ -1,58 +0,0 @@ -#tag_list { - width: 65%; - display: grid; - margin: auto; - grid-template-columns: repeat(3, 1fr); - column-gap: 8px; - row-gap: 16px -} - -@media (max-width: 767.98px) { - #tag_list { - width: 100%; - } -} - -#tag_list button { - padding: 12px 0px; - cursor: pointer; - border: 1px solid transparent; - border-radius: 3px; - font-family: inherit; - font-size: 14px; - width: 100%; - height: 100%; - color: black; - background-color: transparent; - border: 2px solid black; -} - -#tag_list button:hover { - background-color: lightgray; -} - -#post_list { - display: flex; - flex-direction: column; -} - -article { - width: 100%; - text-align: left; - padding-top: 1rem; -} - -article > h2 { - color: black; - padding: 0; - margin: 0; -} - -article > h3 { - margin: 0; - margin-top: 12px; - color: gray; - font-size: 12px; - font-weight: normal; - padding: 0; -} diff --git a/posts.html b/posts.html deleted file mode 100644 index b096170..0000000 --- a/posts.html +++ /dev/null @@ -1,53 +0,0 @@ - -<!DOCTYPE html> -<html lang="en"> - <head> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta charset="utf-8"> - <link rel="stylesheet" href="/index.css"> - <link rel="stylesheet" href="/posts.css"> - <title>Matthew Kosarek</title> - <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon"> - </head> - <body> - <header> - <nav> - <ul> - <li><a href='/'>🏡 Home</a></li> - <li><a href='/resume.html'>📘 CV</a></li> - <li><a href='/posts.html'>📝 Posts</a></li> - </ul> - </nav> - </header> - - <section> - <h2>Tags</h2> - - <div id='tag_list'> - - <a href="/posts/tag_personal.html"><button id="personal">Personal 👨</button></a> - - - <a href="/posts/tag_programming.html"><button id="programming">Programming 💻</button></a> - - - <a href="/posts/tag_books.html"><button id="books">Books 📖</button></a> - - - <a href="/posts/tag_food.html"><button id="food">Food 🍲</button></a> - - </div> - </section - - <section> - <h2>Posts</h2> - <ul id='post_list'> - - <li><a href="/posts/hello_world.html">Hello, World!</a></li> - - <li><a href="/posts/plato_1.html">Euthyphro: the pious and the god-loved</a></li> - - </ul> - </section> - </body> -</html> diff --git a/posts/feed.xml b/posts/feed.xml new file mode 100644 index 0000000..5341f95 --- /dev/null +++ b/posts/feed.xml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8"?> +<rss version="2.0"> + <channel> + <title>Matthew's Blog</title> + <link>https://matthewkosarek.xyz/</link> + <description>The RSS feed for Matthew Kosarek's Blog</description> + <language>en-us</language> + <lastBuildDate>Tue, 06 May 2025 17:00:00 -0400</lastBuildDate> + + <item> + <title>Update May 06, 2025</title> + <link>https://matthewkosarek.xyz/posts/may_06_2025.html</link> + <guid>https://matthewkosarek.xyz/posts/may_06_2025.html</guid> + <pubDate>Tue, 06 May 2025 17:00:00 -0400</pubDate> + <description>Update May 06, 2025</description> + </item> + + <item> + <title>Hello, Org</title> + <link>https://matthewkosarek.xyz/posts/hello.html</link> + <guid>https://matthewkosarek.xyz/posts/hello.html</guid> + <pubDate>Tue, 20 Jun 2023 11:45:00 -0400</pubDate> + <description>Hello, Org</description> + </item> + </channel> +</rss> diff --git a/posts/hello.html b/posts/hello.html index a777e06..7a62e80 100644 --- a/posts/hello.html +++ b/posts/hello.html @@ -22,12 +22,13 @@ <div class="org-article-title"> <h1>Hello, Org</h1> <span>Last modified: 2023-06-20 Tue 11:45</span> + <span><a href="/posts/feed.xml">RSS Feed</a></span> </div> </div> <div id="content" class="content"> -<div id="outline-container-org1c35b95" class="outline-2"> -<h2 id="org1c35b95">TLDR</h2> -<div class="outline-text-2" id="text-org1c35b95"> +<div id="outline-container-orgc6f1d20" class="outline-2"> +<h2 id="orgc6f1d20">TLDR</h2> +<div class="outline-text-2" id="text-orgc6f1d20"> <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> @@ -41,9 +42,9 @@ </ul> </div> </div> -<div id="outline-container-orgaec3339" class="outline-2"> -<h2 id="orgaec3339">Introduction</h2> -<div class="outline-text-2" id="text-orgaec3339"> +<div id="outline-container-orgf0fd8f0" class="outline-2"> +<h2 id="orgf0fd8f0">Introduction</h2> +<div class="outline-text-2" id="text-orgf0fd8f0"> <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> @@ -66,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-org065f319" class="outline-2"> -<h2 id="org065f319">Basic HTML File</h2> -<div class="outline-text-2" id="text-org065f319"> +<div id="outline-container-orgc203944" class="outline-2"> +<h2 id="orgc203944">Basic HTML File</h2> +<div class="outline-text-2" id="text-orgc203944"> <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> @@ -108,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-org12c2edb" class="outline-2"> -<h2 id="org12c2edb">Disabling features that we don't want</h2> -<div class="outline-text-2" id="text-org12c2edb"> +<div id="outline-container-orgb5be820" class="outline-2"> +<h2 id="orgb5be820">Disabling features that we don't want</h2> +<div class="outline-text-2" id="text-orgb5be820"> <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> @@ -139,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-org67311e9" class="outline-2"> -<h2 id="org67311e9">Styling & Code Highlighting</h2> -<div class="outline-text-2" id="text-org67311e9"> +<div id="outline-container-org8316009" class="outline-2"> +<h2 id="org8316009">Styling & Code Highlighting</h2> +<div class="outline-text-2" id="text-org8316009"> <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><span style="text-decoration: underline">...</span></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> @@ -311,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-org1a680fa" class="outline-2"> -<h2 id="org1a680fa">Images</h2> -<div class="outline-text-2" id="text-org1a680fa"> +<div id="outline-container-org227c647" class="outline-2"> +<h2 id="org227c647">Images</h2> +<div class="outline-text-2" id="text-org227c647"> <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> @@ -358,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="org93b98af" class="figure"> +<div id="org567fa83" 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-orgbb8c88d" class="outline-2"> -<h2 id="orgbb8c88d">Creation Date</h2> -<div class="outline-text-2" id="text-orgbb8c88d"> +<div id="outline-container-orgf513ceb" class="outline-2"> +<h2 id="orgf513ceb">Creation Date</h2> +<div class="outline-text-2" id="text-orgf513ceb"> <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> @@ -426,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-orgc9dc7a9" class="outline-2"> -<h2 id="orgc9dc7a9">Generating the Directory</h2> -<div class="outline-text-2" id="text-orgc9dc7a9"> +<div id="outline-container-org9eb5e7e" class="outline-2"> +<h2 id="org9eb5e7e">Generating the Directory</h2> +<div class="outline-text-2" id="text-org9eb5e7e"> <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> @@ -488,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-org9d2a3ec" class="outline-3"> -<h3 id="org9d2a3ec">Sitemap Title</h3> -<div class="outline-text-3" id="text-org9d2a3ec"> +<div id="outline-container-org17e71ed" class="outline-3"> +<h3 id="org17e71ed">Sitemap Title</h3> +<div class="outline-text-3" id="text-org17e71ed"> <p> I changed the title to "Matthew's Blog Posts". </p> @@ -512,9 +513,9 @@ I changed the title to "Matthew's Blog Posts". </div> </div> </div> -<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"> +<div id="outline-container-orgc81a45b" class="outline-3"> +<h3 id="orgc81a45b">Format blog entries in the list</h3> +<div class="outline-text-3" id="text-orgc81a45b"> <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> @@ -535,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-org8d4b3ac" class="outline-2"> -<h2 id="org8d4b3ac">Tags & Filtering</h2> -<div class="outline-text-2" id="text-org8d4b3ac"> +<div id="outline-container-org1c07067" class="outline-2"> +<h2 id="org1c07067">Tags & Filtering</h2> +<div class="outline-text-2" id="text-org1c07067"> <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> @@ -757,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-org15d430a" class="outline-2"> -<h2 id="org15d430a">Conclusion</h2> -<div class="outline-text-2" id="text-org15d430a"> +<div id="outline-container-org8a7a547" class="outline-2"> +<h2 id="org8a7a547">Conclusion</h2> +<div class="outline-text-2" id="text-org8a7a547"> <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 index 11ab957..713eb17 100644 --- a/posts/may_06_2025.html +++ b/posts/may_06_2025.html @@ -22,12 +22,13 @@ <div class="org-article-title"> <h1>Update May 06, 2025</h1> <span>Last modified: 2025-05-06 Tue 17:00</span> + <span><a href="/posts/feed.xml">RSS Feed</a></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"> +<div id="outline-container-org00fb593" class="outline-2"> +<h2 id="org00fb593">What have I been up to?</h2> +<div class="outline-text-2" id="text-org00fb593"> <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/sitemap.html b/posts/sitemap.html index 13d55c2..680b7c8 100644 --- a/posts/sitemap.html +++ b/posts/sitemap.html @@ -21,7 +21,8 @@ <div class="org-article-title"> <h1>Matthew's Blog Posts</h1> - <span>Last modified: 2025-05-06 at 15:10</span> + <span>Last modified: 2025-05-22 at 09:02</span> + <span><a href="/posts/feed.xml">RSS Feed</a></span> </div> </div> <div id="content" class="content"> @@ -29,7 +30,7 @@ <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"> +<div class="sitemap_tag" id="org7a48767"> <p> update </p> @@ -38,7 +39,7 @@ update <li><p> <a href="hello.html">Hello, Org</a> created on June 20, 2023 </p> -<div class="sitemap_tag" id="orgeb9b117"> +<div class="sitemap_tag" id="orgf3799b7"> <p> technology,home </p> @@ -44,6 +44,7 @@ <div class=\"org-article-title\"> <h1>%t</h1> <span>Last modified: %d</span> + <span><a href=\"/posts/feed.xml\">RSS Feed</a></span> </div> ")) :auto-sitemap t |