Finalizing v1 of the blogging sytem

1 files changed, 120 insertions, 35 deletions

diff --git a/posts/hello.html b/posts/hello.html
index 5a94493..b1fb9a4 100644
--- a/posts/hello.html
+++ b/posts/hello.html
@@ -21,15 +21,33 @@
 
   <div class="org-article-title">
     <h1>Hello, Org</h1>
-    <span>Last modified: 2023-06-15 Thu 00:00</span>
+    <span>Last modified: 2023-06-20 Tue 11:45</span>
   </div>
 </div>
 <div id="content" class="content">
 
 
-<div id="outline-container-orgef08f12" class="outline-2">
-<h2 id="orgef08f12">Introduction</h2>
-<div class="outline-text-2" id="text-orgef08f12">
+
+<div id="outline-container-orgac38a6d" class="outline-2">
+<h2 id="orgac38a6d">TLDR</h2>
+<div class="outline-text-2" id="text-orgac38a6d">
+<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>
+<li>Create a folder called <code>_posts</code> (this is where blog posts are written)</li>
+<li>Create an org file in <code>_posts</code>, ideally with a <code>#+DATE</code> and <code>#+TITLE</code> attribute</li>
+<li>Create a folder called <code>posts</code> (this is where blog posts are published to)</li>
+<li>Put <a href="https://raw.githubusercontent.com/mattkae/matthewkosarek-xyz/master/posts/post.js">post.js</a> and <a href="https://github.com/mattkae/matthewkosarek-xyz/blob/master/posts/post.css">post.css</a> inside of the <code>posts</code> directory</li>
+<li>Run <code>./publish.sh</code> to generate the blog post files</li>
+<li>Run <code>./python -m http.server 8080</code> from the root folder</li>
+<li>Navigate to <code>localhost:8080/posts/sitemap.html</code> to see your posts</li>
+</ul>
+</div>
+</div>
+
+<div id="outline-container-orgf16191c" class="outline-2">
+<h2 id="orgf16191c">Introduction</h2>
+<div class="outline-text-2" id="text-orgf16191c">
 <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>
@@ -53,9 +71,9 @@ And that's pretty much it for now. Without further ado, let's jump into getting
 </div>
 </div>
 
-<div id="outline-container-org9f1b46e" class="outline-2">
-<h2 id="org9f1b46e">Basic HTML File</h2>
-<div class="outline-text-2" id="text-org9f1b46e">
+<div id="outline-container-org5eda980" class="outline-2">
+<h2 id="org5eda980">Basic HTML File</h2>
+<div class="outline-text-2" id="text-org5eda980">
 <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>
@@ -96,9 +114,9 @@ We then do a <code>chmod +x publish.sh</code> to make it an executable and run i
 </div>
 </div>
 
-<div id="outline-container-org69d49de" class="outline-2">
-<h2 id="org69d49de">Disabling features that we don't want</h2>
-<div class="outline-text-2" id="text-org69d49de">
+<div id="outline-container-orgf147dc3" class="outline-2">
+<h2 id="orgf147dc3">Disabling features that we don't want</h2>
+<div class="outline-text-2" id="text-orgf147dc3">
 <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>
@@ -127,9 +145,9 @@ The next thing will be to remove some of the generated items that I didn't ask f
 </div>
 </div>
 
-<div id="outline-container-org45266c1" class="outline-2">
-<h2 id="org45266c1">Styling &amp; Code Highlighting</h2>
-<div class="outline-text-2" id="text-org45266c1">
+<div id="outline-container-org03a743e" class="outline-2">
+<h2 id="org03a743e">Styling &amp; Code Highlighting</h2>
+<div class="outline-text-2" id="text-org03a743e">
 <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>
@@ -300,9 +318,9 @@ If we run the publish again, we can see that we have full styling on our code sn
 </div>
 </div>
 
-<div id="outline-container-orgbab5975" class="outline-2">
-<h2 id="orgbab5975">Images</h2>
-<div class="outline-text-2" id="text-orgbab5975">
+<div id="outline-container-orgc8db25f" class="outline-2">
+<h2 id="orgc8db25f">Images</h2>
+<div class="outline-text-2" id="text-orgc8db25f">
 <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>
@@ -347,7 +365,7 @@ 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="org071f289" class="figure">
+<div id="orgfcaaaca" 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>
@@ -356,9 +374,9 @@ That's all there is to it! There are simpler ways as well, but that should do it
 </div>
 
 
-<div id="outline-container-org24cf931" class="outline-2">
-<h2 id="org24cf931">Creation Date</h2>
-<div class="outline-text-2" id="text-org24cf931">
+<div id="outline-container-org3a8d460" class="outline-2">
+<h2 id="org3a8d460">Creation Date</h2>
+<div class="outline-text-2" id="text-org3a8d460">
 <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>
@@ -418,9 +436,9 @@ Note that the downside of this is that the created date will change whenever you
 </div>
 </div>
 
-<div id="outline-container-org495f7e6" class="outline-2">
-<h2 id="org495f7e6">Generating the Directory</h2>
-<div class="outline-text-2" id="text-org495f7e6">
+<div id="outline-container-orgf178cba" class="outline-2">
+<h2 id="orgf178cba">Generating the Directory</h2>
+<div class="outline-text-2" id="text-orgf178cba">
 <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>
@@ -481,9 +499,9 @@ From here, you may customize it however you like.  The following are my customiz
 </p>
 </div>
 
-<div id="outline-container-org240fee2" class="outline-3">
-<h3 id="org240fee2">Sitemap Title</h3>
-<div class="outline-text-3" id="text-org240fee2">
+<div id="outline-container-org3f454b3" class="outline-3">
+<h3 id="org3f454b3">Sitemap Title</h3>
+<div class="outline-text-3" id="text-org3f454b3">
 <p>
 I changed the title to "Matthew's Blog Posts".
 </p>
@@ -507,9 +525,9 @@ I changed the title to "Matthew's Blog Posts".
 </div>
 
 
-<div id="outline-container-org95082bc" class="outline-3">
-<h3 id="org95082bc">Format blog entries in the list</h3>
-<div class="outline-text-3" id="text-org95082bc">
+<div id="outline-container-org5ac2f68" class="outline-3">
+<h3 id="org5ac2f68">Format blog entries in the list</h3>
+<div class="outline-text-3" id="text-org5ac2f68">
 <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>
@@ -531,9 +549,9 @@ I like to include the creation date on the blog posts. To do this, we can use <c
 </div>
 </div>
 
-<div id="outline-container-org6d7bbef" class="outline-2">
-<h2 id="org6d7bbef">Tags &amp; Filtering</h2>
-<div class="outline-text-2" id="text-org6d7bbef">
+<div id="outline-container-org4267ca0" class="outline-2">
+<h2 id="org4267ca0">Tags &amp; Filtering</h2>
+<div class="outline-text-2" id="text-org4267ca0">
 <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>
@@ -555,6 +573,7 @@ Our criteria for the tag filtering system is:
 <li>Users can filter my one or many tags (i.e. "home" <i>and</i> "technology" but <i>not</i> "lifestyle")</li>
 <li>By default, users see all posts with all tags</li>
 <li>Searching happens on the client</li>
+<li>We don't have to manually maintain a list of valid tags. The list of valid tags should be dynamically loaded from the blog posts themselves.</li>
 </ul>
 
 <p>
@@ -680,8 +699,6 @@ We create a new file called <code>posts/post.js</code> and put the following ins
           }
         });
       }
-
-      <span class="org-comment-delimiter">// </span><span class="org-comment">Filter</span>
     };
   }
 }
@@ -691,7 +708,75 @@ window.onload = main;
 </div>
 
 <p>
-Finally, we can modify the <code>org-html-head</code> to include <code>&lt;script src='/posts/post.js'&gt;&lt;/script&gt;</code> so that this script is loaded on every blog post page.
+Next, we modify the <code>org-html-head</code> to include <code>&lt;script src='/posts/post.js'&gt;&lt;/script&gt;</code> so that this script is loaded on every blog post page.
+</p>
+
+<p>
+Finally, let's append the following to <code>posts/posts.css</code> so that our tag list is pretty:
+</p>
+
+<div class="org-src-container">
+<pre class="src src-css"><span class="org-css-selector">#tag-filter-container </span>{
+    <span class="org-css-property">display</span>: flex;
+    <span class="org-css-property">flex-direction</span>: row;
+    <span class="org-css-property">column-gap</span>: 8px;
+    <span class="org-css-property">margin-top</span>: 1rem;
+}
+
+<span class="org-css-selector">.tag-filter-item </span>{
+    <span class="org-css-property">display</span>: flex;
+    <span class="org-css-property">flex-direction</span>: row;
+    <span class="org-css-property">align-items</span>: center;
+    <span class="org-css-property">padding</span>: 0.25rem 0.5rem;
+    <span class="org-css-property">border</span>: 1px solid <span class="custom-5">black</span>;
+    <span class="org-css-property">border-radius</span>: 3px;
+    <span class="org-css-property">justify-content</span>: center;
+    <span class="org-css-property">column-gap</span>: 1rem;
+    <span class="org-css-property">background-color</span>: <span class="custom-4">#fffed8</span>;
+}
+
+<span class="org-css-selector">.tag-filter-item button </span>{
+    <span class="org-css-property">background</span>: none;
+    <span class="org-css-property">border</span>: none;
+    <span class="org-css-property">outline</span>: none;
+    <span class="org-css-property">margin</span>: 0;
+    <span class="org-css-property">padding</span>: 0;
+    <span class="org-css-property">color</span>: <span class="custom-3">red</span>;
+    <span class="org-css-property">font-size</span>: 1.5rem;
+}
+
+<span class="org-css-selector">.tag-filter-item button:before </span>{
+    <span class="org-css-property">content</span>: <span class="org-string">'\00d7'</span>;
+}
+
+<span class="org-css-selector">.tag-filter-item.disabled button:before </span>{
+    <span class="org-css-property">content</span>: <span class="org-string">'+'</span>;
+}
+
+<span class="org-css-selector">.tag-filter-item.disabled </span>{
+    <span class="org-css-property">background-color</span>: <span class="custom-2">#f2f2f2</span>;
+    <span class="org-css-property">color</span>: <span class="custom-1">gray</span>;
+    <span class="org-css-property">border-color</span>: <span class="custom-1">gray</span>;
+}
+
+<span class="org-css-selector">.tag-filter-item.disabled button </span>{
+    <span class="org-css-property">color</span>: <span class="custom">green</span>;
+}
+
+<span class="org-css-selector">.tag-filter-item button:hover </span>{
+    <span class="org-css-property">cursor</span>: pointer;
+    <span class="org-css-property">opacity</span>: 0.8;
+}
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-org529c129" class="outline-2">
+<h2 id="org529c129">Conclusion</h2>
+<div class="outline-text-2" id="text-org529c129">
+<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>
 </div>
 </div>