From ece0f56d29509685f9b61642056f15f84a8a0726 Mon Sep 17 00:00:00 2001 From: Matthew Kosarek Date: Wed, 1 May 2024 14:12:17 -0400 Subject: cleanup: quick update, removing outdated items --- posts/hello.html | 164 +++++++++++++++++++++++++++---------------------------- 1 file changed, 82 insertions(+), 82 deletions(-) (limited to 'posts/hello.html') diff --git a/posts/hello.html b/posts/hello.html index ea52aaa..8469f4e 100644 --- a/posts/hello.html +++ b/posts/hello.html @@ -28,9 +28,9 @@ -
-

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:

@@ -71,9 +71,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.

@@ -114,9 +114,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.

@@ -146,9 +146,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.

@@ -206,54 +206,54 @@ Now that our generated elements have class names, we can define the style for ea

-
pre {
+
pre {
     background-color: #FEFEFE;
     border: 1px solid #D5D5D5;
     border-radius: 2px;
     padding: 1rem;
 }
 
-code {
+code {
     font-family: "Consolas" sans-serif;
     color: #D0372D;
 }
 
-.underline {
+.underline {
     text-decoration: underline;
 }
 
 /* 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;}
-pre span.org-keyword                     {color:#0000FF;}
-pre span.org-variable-name               {color:#BA36A5;}
-pre span.org-function-name               {color:#006699;}
-pre span.org-type                        {color:#6434A3;}
-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-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}
-pre span.org-outshine-level-5            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-6            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-7            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-8            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-9            {color:#8D8D84;font-style:italic}
-pre span.org-rainbow-delimiters-depth-1  {color:#707183;}
-pre span.org-rainbow-delimiters-depth-2  {color:#7388d6;}
-pre span.org-rainbow-delimiters-depth-3  {color:#909183;}
-pre span.org-rainbow-delimiters-depth-4  {color:#709870;}
-pre span.org-rainbow-delimiters-depth-5  {color:#907373;}
-pre span.org-rainbow-delimiters-depth-6  {color:#6276ba;}
-pre span.org-rainbow-delimiters-depth-7  {color:#858580;}
-pre span.org-rainbow-delimiters-depth-8  {color:#80a880;}
-pre span.org-rainbow-delimiters-depth-9  {color:#887070;}
-pre span.org-sh-quoted-exec              {color:#FF1493;}
-pre span.org-css-selector                {color:#0000FF;}
-pre span.org-css-property                {color:#00AA00;}
+pre span.org-builtin                     {color:#006FE0;font-weight:bold;}
+pre span.org-string                      {color:#008000;}
+pre span.org-keyword                     {color:#0000FF;}
+pre span.org-variable-name               {color:#BA36A5;}
+pre span.org-function-name               {color:#006699;}
+pre span.org-type                        {color:#6434A3;}
+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-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}
+pre span.org-outshine-level-5            {color:#8D8D84;font-style:italic}
+pre span.org-outshine-level-6            {color:#8D8D84;font-style:italic}
+pre span.org-outshine-level-7            {color:#8D8D84;font-style:italic}
+pre span.org-outshine-level-8            {color:#8D8D84;font-style:italic}
+pre span.org-outshine-level-9            {color:#8D8D84;font-style:italic}
+pre span.org-rainbow-delimiters-depth-1  {color:#707183;}
+pre span.org-rainbow-delimiters-depth-2  {color:#7388d6;}
+pre span.org-rainbow-delimiters-depth-3  {color:#909183;}
+pre span.org-rainbow-delimiters-depth-4  {color:#709870;}
+pre span.org-rainbow-delimiters-depth-5  {color:#907373;}
+pre span.org-rainbow-delimiters-depth-6  {color:#6276ba;}
+pre span.org-rainbow-delimiters-depth-7  {color:#858580;}
+pre span.org-rainbow-delimiters-depth-8  {color:#80a880;}
+pre span.org-rainbow-delimiters-depth-9  {color:#887070;}
+pre span.org-sh-quoted-exec              {color:#FF1493;}
+pre span.org-css-selector                {color:#0000FF;}
+pre span.org-css-property                {color:#00AA00;}
@@ -319,9 +319,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:

@@ -366,7 +366,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:

-
+

squirrel.jpg

Figure 1: A Cute Squirrel

@@ -375,9 +375,9 @@ That's all there is to it! There are simpler ways as well, but that should do it
-
-

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

@@ -417,11 +417,11 @@ On top of this, we can modify our posts/post.css file to make the t

-
.org-article-title > h1 {
+
.org-article-title > h1 {
     margin-bottom: 0;
 }
 
-.org-article-title > span {
+.org-article-title > span {
     color: #707183;
 }
 

@@ -437,9 +437,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:

@@ -500,9 +500,9 @@ From here, you may customize it however you like. The following are my customiz

-
-

Sitemap Title

-
+
+

Sitemap Title

+

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

@@ -526,9 +526,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.

@@ -550,9 +550,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:

@@ -596,7 +596,7 @@ We extract the "filetags" from the org file, concatenate them into a comma-delim

-
.sitemap_tag {
+
.sitemap_tag {
     display: none;
 }
 

@@ -717,14 +717,14 @@ Finally, let's append the following to posts/posts.css so that our
 

 
 

-
#tag-filter-container {
+
#tag-filter-container {
     display: flex;
     flex-direction: row;
     column-gap: 8px;
     margin-top: 1rem;
 }
 
-.tag-filter-item {
+.tag-filter-item {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -736,7 +736,7 @@ Finally, let's append the following to posts/posts.css so that our
     background-color: #fffed8;
 }
 
-.tag-filter-item button {
+.tag-filter-item button {
     background: none;
     border: none;
     outline: none;
@@ -746,25 +746,25 @@ Finally, let's append the following to posts/posts.css so that our
     font-size: 1.5rem;
 }
 
-.tag-filter-item button:before {
+.tag-filter-item button:before {
     content: '\00d7';
 }
 
-.tag-filter-item.disabled button:before {
+.tag-filter-item.disabled button:before {
     content: '+';
 }
 
-.tag-filter-item.disabled {
+.tag-filter-item.disabled {
     background-color: #f2f2f2;
     color: gray;
     border-color: gray;
 }
 
-.tag-filter-item.disabled button {
+.tag-filter-item.disabled button {
     color: green;
 }
 
-.tag-filter-item button:hover {
+.tag-filter-item button:hover {
     cursor: pointer;
     opacity: 0.8;
 }
@@ -773,9 +773,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.

-- cgit v1.2.1