This commit is contained in:
fido-node 2024-06-24 19:34:54 +00:00
parent 942f74bdce
commit 27a039a955
9 changed files with 485 additions and 533 deletions

View File

@ -1,11 +1,11 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Personal page with a blog about my adventures in a world of tech things"/><meta name="og:description" content="Personal page with a blog about my adventures in a world of tech things"/><meta name="twitter:description" content="Personal page with a blog about my adventures in a world of tech things"/><meta name="og:image" content="https://fidonode.me/resources/images/index.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/index.org.png"/><meta name="og:title" content="Alex Mikhailov"/><meta name="twitter:title" content="Alex Mikhailov"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>Alex Mikhailov</title></head><body><main class="container"><header class="header"><nav><ul><li><strong>Alex Mikhailov</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Personal page with a blog about my adventures in a world of tech things"/><meta name="og:description" content="Personal page with a blog about my adventures in a world of tech things"/><meta name="twitter:description" content="Personal page with a blog about my adventures in a world of tech things"/><meta name="og:image" content="https://fidonode.me/resources/images/index.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/index.org.png"/><meta name="og:title" content="Alex Mikhailov"/><meta name="twitter:title" content="Alex Mikhailov"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>Alex Mikhailov</title></head><body class="line-numbers"><main class="container"><header class="header"><nav><ul><li><strong>Alex Mikhailov</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header>
<div class="figure">
<p><img src="./resources/images/index/avatar.jpg" alt="avatar.jpg" />
</p>
</div>
<div id="outline-container-orgfb3ea96" class="outline-2">
<h2 id="orgfb3ea96">&nbsp;</h2>
<div class="outline-text-2" id="text-orgfb3ea96">
<div id="outline-container-org129a950" class="outline-2">
<h2 id="org129a950">&nbsp;</h2>
<div class="outline-text-2" id="text-org129a950">
<p>
Full stack engineer
FP-curious | λ-affected
@ -13,9 +13,9 @@ Wanna be rustacean 🦀 and/or secops guy 🔒
</p>
</div>
</div>
<div id="outline-container-orgdf48722" class="outline-2">
<h2 id="orgdf48722">Experience</h2>
<div class="outline-text-2" id="text-orgdf48722">
<div id="outline-container-org6ca436c" class="outline-2">
<h2 id="org6ca436c">Experience</h2>
<div class="outline-text-2" id="text-org6ca436c">
<ul class="org-ul">
<li>Current position <a href="https://www.samsungfood.com/">@SamsungFood</a>.
Internal tools engineer for data platform ➡ Internal tools engineer for developers.</li>
@ -24,9 +24,9 @@ Fullstack engineer.</li>
</ul>
</div>
</div>
<div id="outline-container-orgb7e2256" class="outline-2">
<h2 id="orgb7e2256">Technologies</h2>
<div class="outline-text-2" id="text-orgb7e2256">
<div id="outline-container-orgfe3ea2f" class="outline-2">
<h2 id="orgfe3ea2f">Technologies</h2>
<div class="outline-text-2" id="text-orgfe3ea2f">
<p>
Work with:
</p>
@ -43,9 +43,9 @@ Work with:
</ul>
</div>
</div>
<div id="outline-container-org8ab3d6f" class="outline-2">
<h2 id="org8ab3d6f">Contacts</h2>
<div class="outline-text-2" id="text-org8ab3d6f">
<div id="outline-container-orgfac3f04" class="outline-2">
<h2 id="orgfac3f04">Contacts</h2>
<div class="outline-text-2" id="text-orgfac3f04">
<p>
Contact me via:
</p>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Index page for my blog"/><meta name="og:description" content="Index page for my blog"/><meta name="twitter:description" content="Index page for my blog"/><meta name="og:image" content="https://fidonode.me/resources/images/posts.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts.org.png"/><meta name="og:title" content="Alex Mikhailov - Blog"/><meta name="twitter:title" content="Alex Mikhailov - Blog"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>Alex Mikhailov - Blog</title></head><body><main class="container"><header class="header"><nav><ul><li><strong>Alex Mikhailov - Blog</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header>
<div id="outline-container-orgf081f14" class="outline-2">
<h2 id="orgf081f14">Posts</h2>
<div class="outline-text-2" id="text-orgf081f14">
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Index page for my blog"/><meta name="og:description" content="Index page for my blog"/><meta name="twitter:description" content="Index page for my blog"/><meta name="og:image" content="https://fidonode.me/resources/images/posts.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts.org.png"/><meta name="og:title" content="Alex Mikhailov - Blog"/><meta name="twitter:title" content="Alex Mikhailov - Blog"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>Alex Mikhailov - Blog</title></head><body class="line-numbers"><main class="container"><header class="header"><nav><ul><li><strong>Alex Mikhailov - Blog</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header>
<div id="outline-container-orgd68ace3" class="outline-2">
<h2 id="orgd68ace3">Posts</h2>
<div class="outline-text-2" id="text-orgd68ace3">
<ul class="org-ul">
<li><a href="./posts/keeb.html">Keyboard journey</a></li>
<li><a href="./posts/about_blog.html">Org to HTML and back</a></li>

View File

@ -1,45 +1,45 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Blog post about publishing my blog with Org Mode"/><meta name="og:description" content="Blog post about publishing my blog with Org Mode"/><meta name="twitter:description" content="Blog post about publishing my blog with Org Mode"/><meta name="og:image" content="https://fidonode.me/resources/images/posts/about_blog.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts/about_blog.org.png"/><meta name="og:title" content="Org to HTML and back"/><meta name="twitter:title" content="Org to HTML and back"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>Org to HTML and back</title></head><body><main class="container"><header class="header"><nav><ul><li><strong>Org to HTML and back</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Blog post about publishing my blog with Org Mode"/><meta name="og:description" content="Blog post about publishing my blog with Org Mode"/><meta name="twitter:description" content="Blog post about publishing my blog with Org Mode"/><meta name="og:image" content="https://fidonode.me/resources/images/posts/about_blog.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts/about_blog.org.png"/><meta name="og:title" content="Org to HTML and back"/><meta name="twitter:title" content="Org to HTML and back"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><nil><link rel="stylesheet" type="text/css" href="/resources/css/quirks.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-solarizedlight.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script></nil><title>Org to HTML and back</title></head><body class="line-numbers"><main class="container"><header class="header"><nav><ul><li><strong>Org to HTML and back</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgaddca29">Disclaimer</a></li>
<li><a href="#org4f5e8ad">What is Org?</a></li>
<li><a href="#org0e06c6e">Why Org Mode?</a></li>
<li><a href="#org25ea74d">Render Org to blog or whatever</a>
<li><a href="#org6b12015">Disclaimer</a></li>
<li><a href="#org82bbe6a">What is Org?</a></li>
<li><a href="#org0f40ba1">Why Org Mode?</a></li>
<li><a href="#org067c652">Render Org to blog or whatever</a>
<ul>
<li><a href="#org3727520">Render HTML</a></li>
<li><a href="#org66cd08d">Static files</a></li>
<li><a href="#org2d50f8e">Whole build script</a></li>
<li><a href="#orge432482">Render HTML</a></li>
<li><a href="#orgbe39baf">Static files</a></li>
<li><a href="#org4c2b7df">Whole build script</a></li>
</ul>
</li>
<li><a href="#orgf5d456b">Publish through GitHub Action</a>
<li><a href="#org720a634">Publish through GitHub Action</a>
<ul>
<li><a href="#org16be392">Install Emacs</a></li>
<li><a href="#orgd9561a3">Just bring everything</a></li>
<li><a href="#org4da44cb">BTW I use GNU Emacs</a></li>
<li><a href="#org8358f01">Install Emacs</a></li>
<li><a href="#orgda4c3da">Just bring everything</a></li>
<li><a href="#orgd494432">BTW I use GNU Emacs</a></li>
</ul>
</li>
<li><a href="#orgeb3b53c">What is next</a>
<li><a href="#orgb2469f9">What is next</a>
<ul>
<li><a href="#orgef929fb">RSS Feed</a></li>
<li><a href="#orgd92b3bd">Open Graph</a></li>
<li><a href="#orge558f1c">Code highlighting</a></li>
<li><a href="#org44a2efc">RSS Feed</a></li>
<li><a href="#org7be84da">Open Graph</a></li>
<li><a href="#org2eccbc3">Code highlighting</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="outline-container-orgaddca29" class="outline-2">
<h2 id="orgaddca29">Disclaimer</h2>
<div class="outline-text-2" id="text-orgaddca29">
<div id="outline-container-org6b12015" class="outline-2">
<h2 id="org6b12015">Disclaimer</h2>
<div class="outline-text-2" id="text-org6b12015">
<p>
I'm neither proficient in Org Mode (further on "Org"), nor a good front-end engineer. I think that a simple solution is better than no solution. If you see a mistake, you can contact me via <a href="mailto:iam@fidonode.me">iam@fidonode.me</a>.
</p>
</div>
</div>
<div id="outline-container-org4f5e8ad" class="outline-2">
<h2 id="org4f5e8ad">What is Org?</h2>
<div class="outline-text-2" id="text-org4f5e8ad">
<div id="outline-container-org82bbe6a" class="outline-2">
<h2 id="org82bbe6a">What is Org?</h2>
<div class="outline-text-2" id="text-org82bbe6a">
<blockquote>
<p>
Your life in plain text
@ -55,9 +55,9 @@ Everything you can do in Org is to write a text. With a special markup, of cours
</div>
</div>
<div id="outline-container-org0e06c6e" class="outline-2">
<h2 id="org0e06c6e">Why Org Mode?</h2>
<div class="outline-text-2" id="text-org0e06c6e">
<div id="outline-container-org0f40ba1" class="outline-2">
<h2 id="org0f40ba1">Why Org Mode?</h2>
<div class="outline-text-2" id="text-org0f40ba1">
<ol class="org-ol">
<li>Plain text.
Plain text as a data source offers significant versatility. You can read and understand what happens in org files without needing Emacs.</li>
@ -69,75 +69,72 @@ I do not have a habit of collecting and keeping information. I believe that disc
</div>
</div>
<div id="outline-container-org25ea74d" class="outline-2">
<h2 id="org25ea74d">Render Org to blog or whatever</h2>
<div class="outline-text-2" id="text-org25ea74d">
<div id="outline-container-org067c652" class="outline-2">
<h2 id="org067c652">Render Org to blog or whatever</h2>
<div class="outline-text-2" id="text-org067c652">
<p>
Org already has a way to render files into HTML, allowing you to create simple HTML files with minimal styling. I'm not interesting in styling from org, so I decide to use <a href="https://picocss.com">picocss</a> framework.
</p>
</div>
<div id="outline-container-org3727520" class="outline-3">
<h3 id="org3727520">Render HTML</h3>
<div class="outline-text-3" id="text-org3727520">
<div id="outline-container-orge432482" class="outline-3">
<h3 id="orge432482">Render HTML</h3>
<div class="outline-text-3" id="text-orge432482">
<p>
I want to change some templates here and there. I've found <code>esxml</code> package. It is a decent DSL for writing XML/HTML.
Here is how page header and footer look in this DSL.
</p>
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/header</span> (info)
`(header (@ (class <span style="font-style: italic;">"header"</span>))
<pre><code class="language-elisp">(defun my/header (info)
`(header (@ (class &quot;header&quot;))
(nav
(ul
(li
(strong
,(org-export-data (plist-get info <span style="font-weight: bold;">:title</span>) info))))
,(org-export-data (plist-get info :title) info))))
(ul
(li (a (@ (href <span style="font-style: italic;">"/index.html"</span>)) <span style="font-style: italic;">"About"</span>))
(li (a (@ (href <span style="font-style: italic;">"/blog.html"</span>)) <span style="font-style: italic;">"Blog"</span>))
(li (a (@ (href <span style="font-style: italic;">"/rss.xml"</span>)) <span style="font-style: italic;">"RSS"</span>))
(li (a (@ (href &quot;/index.html&quot;)) &quot;About&quot;))
(li (a (@ (href &quot;/blog.html&quot;)) &quot;Blog&quot;))
(li (a (@ (href &quot;/rss.xml&quot;)) &quot;RSS&quot;))
)
))
)
(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/footer</span> (info)
`(footer (@ (class <span style="font-style: italic;">"footer"</span>))
(defun my/footer (info)
`(footer (@ (class &quot;footer&quot;))
(hr)
(p <span style="font-style: italic;">"Alex Mikhailov"</span>)
(p <span style="font-style: italic;">"Built with: "</span>
(a (@ (href <span style="font-style: italic;">"https://www.gnu.org/software/emacs/"</span>)) <span style="font-style: italic;">"GNU Emacs"</span>) <span style="font-style: italic;">" "</span>
(a (@ (href <span style="font-style: italic;">"https://orgmode.org/"</span>)) <span style="font-style: italic;">"Org Mode"</span>) <span style="font-style: italic;">" "</span>
(a (@ (href <span style="font-style: italic;">"https://picocss.com/"</span>)) <span style="font-style: italic;">"picocss"</span>)
(p &quot;Alex Mikhailov&quot;)
(p &quot;Built with: &quot;
(a (@ (href &quot;https://www.gnu.org/software/emacs/&quot;)) &quot;GNU Emacs&quot;) &quot; &quot;
(a (@ (href &quot;https://orgmode.org/&quot;)) &quot;Org Mode&quot;) &quot; &quot;
(a (@ (href &quot;https://picocss.com/&quot;)) &quot;picocss&quot;)
)
))
</pre>
</div>
</code></pre>
<p>
Looks neat for me. At least I don't need to mess with string concatenation.
Whole template wiring looks like that. Not much, but it works and easy to maintain.
</p>
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/template</span> (contents info)
<pre><code class="language-elisp">(defun my/template (contents info)
(concat
<span style="font-style: italic;">"&lt;!DOCTYPE html&gt;"</span>
&quot;&amp;lt;!DOCTYPE html&amp;gt;&quot;
(sxml-to-xml
`(html (@ (lang <span style="font-style: italic;">"en"</span>))
`(html (@ (lang &quot;en&quot;))
(head
(meta (@ (charset <span style="font-style: italic;">"utf-8"</span>)))
(meta (@ (author <span style="font-style: italic;">"Alex Mikhailov"</span>)))
(meta (@ (name <span style="font-style: italic;">"viewport"</span>)
(content <span style="font-style: italic;">"width=device-width, initial-scale=1, shrink-to-fit=no"</span>)))
(meta (@ (name <span style="font-style: italic;">"color-scheme"</span>) (content <span style="font-style: italic;">"light dark"</span>)))
(meta (@ (http-equiv <span style="font-style: italic;">"content-language"</span>) (content <span style="font-style: italic;">"en-us"</span>)))
(meta (@ (name <span style="font-style: italic;">"description"</span>) (content <span style="font-style: italic;">"Personal page with a blog about my technical adventures"</span>)))
(link (@ (rel <span style="font-style: italic;">"icon"</span>) (type <span style="font-style: italic;">"image/x-icon"</span>) (href <span style="font-style: italic;">"/resources/favicon.ico"</span>)))
(link (@ (rel <span style="font-style: italic;">"stylesheet"</span>) (href <span style="font-style: italic;">"/resources/css/pico.sand.min.css"</span>)))
(meta (@ (charset &quot;utf-8&quot;)))
(meta (@ (author &quot;Alex Mikhailov&quot;)))
(meta (@ (name &quot;viewport&quot;)
(content &quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;)))
(meta (@ (name &quot;color-scheme&quot;) (content &quot;light dark&quot;)))
(meta (@ (http-equiv &quot;content-language&quot;) (content &quot;en-us&quot;)))
(meta (@ (name &quot;description&quot;) (content &quot;Personal page with a blog about my technical adventures&quot;)))
(link (@ (rel &quot;icon&quot;) (type &quot;image/x-icon&quot;) (href &quot;/resources/favicon.ico&quot;)))
(link (@ (rel &quot;stylesheet&quot;) (href &quot;/resources/css/pico.sand.min.css&quot;)))
(script (@ (defer <span style="font-style: italic;">"true"</span>) (src <span style="font-style: italic;">"https://umami.dokutsu.xyz/script.js"</span>) (data-website-id <span style="font-style: italic;">"d52d9af1-0c7d-4531-84c6-0b9c2850011f"</span>)) ())
(title ,(org-export-data (plist-get info <span style="font-weight: bold;">:title</span>) info)))
(script (@ (defer &quot;true&quot;) (src &quot;https://umami.dokutsu.xyz/script.js&quot;) (data-website-id &quot;d52d9af1-0c7d-4531-84c6-0b9c2850011f&quot;)) ())
(title ,(org-export-data (plist-get info :title) info)))
(body
(main (@ (class <span style="font-style: italic;">"container"</span>))
(main (@ (class &quot;container&quot;))
,(my/header info)
(*RAW-STRING* ,contents)
,(my/footer info)
@ -145,164 +142,157 @@ Whole template wiring looks like that. Not much, but it works and easy to mainta
))
))
)
</pre>
</div>
</code></pre>
<p>
Ok, now we need some additional steps to wire these templating function.
</p>
<div class="org-src-container">
<pre class="src src-elisp"><span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">Derive new backend with our custom tepmplating function</span>
<span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">We derive it from regular HTML backend</span>
<pre><code class="language-elisp">;; Derive new backend with our custom tepmplating function
;; We derive it from regular HTML backend
(org-export-define-derived-backend 'my-html 'html
<span style="font-weight: bold;">:translate-alist</span> '((template . my/template)
(org-export-define-derived-backend &apos;my-html &apos;html
:translate-alist &apos;((template . my/template)
))
<span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">Define publish function which uses our freshly derived backend</span>
(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/publish-to-html</span> (plist filename pub-dir)
<span style="font-style: italic;">"Publish an Org file to HTML using the custom backend."</span>
(org-publish-org-to 'my-html filename <span style="font-style: italic;">".html"</span> plist pub-dir))
</pre>
</div>
;; Define publish function which uses our freshly derived backend
(defun my/publish-to-html (plist filename pub-dir)
&quot;Publish an Org file to HTML using the custom backend.&quot;
(org-publish-org-to &apos;my-html filename &quot;.html&quot; plist pub-dir))
</code></pre>
<p>
So everything is almost done. Time to use our custom publishing function in projects list.
</p>
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">setq</span> org-publish-project-alist
<pre><code class="language-elisp">(setq org-publish-project-alist
(list
(list <span style="font-style: italic;">"blog"</span>
<span style="font-weight: bold;">:recursive</span> t
<span style="font-weight: bold;">:base-directory</span> my/blog-src-path
<span style="font-weight: bold;">:publishing-directory</span> my/web-export-path
<span style="font-weight: bold;">:publishing-function</span> 'my/publish-to-html
<span style="font-weight: bold;">:html-html5-fancy</span> t
<span style="font-weight: bold;">:htmlized-source</span> t
<span style="font-weight: bold;">:with-author</span> nil
<span style="font-weight: bold;">:with-creator</span> t
<span style="font-weight: bold;">:with-toc</span> t
<span style="font-weight: bold;">:section-numbers</span> nil
<span style="font-weight: bold;">:time-stamp-file</span> nil
(list &quot;blog&quot;
:recursive t
:base-directory my/blog-src-path
:publishing-directory my/web-export-path
:publishing-function &apos;my/publish-to-html
:html-html5-fancy t
:htmlized-source t
:with-author nil
:with-creator t
:with-toc t
:section-numbers nil
:time-stamp-file nil
)
))
</pre>
</code></pre>
</div>
</div>
</div>
<div id="outline-container-org66cd08d" class="outline-3">
<h3 id="org66cd08d">Static files</h3>
<div class="outline-text-3" id="text-org66cd08d">
<div id="outline-container-orgbe39baf" class="outline-3">
<h3 id="orgbe39baf">Static files</h3>
<div class="outline-text-3" id="text-orgbe39baf">
<p>
Yep, you may want to publish some photos with your blog or any other static files.
</p>
<pre class="example">
(setq org-publish-project-alist
<pre><code class="language-nil">(setq org-publish-project-alist
(list
(list "static"
(list &quot;static&quot;
:base-directory my/blog-src-path
:base-extension "css\\|js\\|png\\|jpg\\|jpeg\\|gif\\|pdf\\|ico\\|txt"
:base-extension &quot;css\\|js\\|png\\|jpg\\|jpeg\\|gif\\|pdf\\|ico\\|txt&quot;
:publishing-directory my/web-export-path
:recursive t
:publishing-function 'org-publish-attachment
:publishing-function &apos;org-publish-attachment
)
))
</pre>
</code></pre>
<p>
Looks self explanatory.
</p>
</div>
</div>
<div id="outline-container-org2d50f8e" class="outline-3">
<h3 id="org2d50f8e">Whole build script</h3>
<div class="outline-text-3" id="text-org2d50f8e">
<div id="outline-container-org4c2b7df" class="outline-3">
<h3 id="org4c2b7df">Whole build script</h3>
<div class="outline-text-3" id="text-org4c2b7df">
<p>
Here is the whole elisp script which I use to publish my blog. It have some additional quirks to work with <code class="src src-sh">doomscript ./build-site.el</code>.
</p>
<div class="org-src-container">
<pre class="src src-elisp"><span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">Load the publishing system</span>
<span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">Configure environment</span>
<span style="font-weight: bold; font-style: italic;">;;</span>
(<span style="font-weight: bold;">setq</span> debug-on-error t)
<pre><code class="language-elisp">;; Load the publishing system
;; Configure environment
;;
(setq debug-on-error t)
(<span style="font-weight: bold;">let</span> ((default-directory (concat <span style="font-style: italic;">"~/.config/emacs/.local/straight/build-"</span> emacs-version <span style="font-style: italic;">"/"</span>)))
(let ((default-directory (concat &quot;~/.config/emacs/.local/straight/build-&quot; emacs-version &quot;/&quot;)))
(normal-top-level-add-subdirs-to-load-path))
(add-to-list 'custom-theme-load-path
(concat <span style="font-style: italic;">"~/.config/emacs/.local/straight/build-"</span> emacs-version <span style="font-style: italic;">"/doom-themes"</span>))
(add-to-list 'custom-theme-load-path (concat <span style="font-style: italic;">"~/.config/emacs/.local/straight/build-"</span> emacs-version <span style="font-style: italic;">"/base16-theme"</span>))
(add-to-list 'custom-theme-load-path (concat <span style="font-style: italic;">"~/.config/emacs/.local/straight/build-"</span> emacs-version <span style="font-style: italic;">"/moe-theme"</span>))
(add-to-list &apos;custom-theme-load-path
(concat &quot;~/.config/emacs/.local/straight/build-&quot; emacs-version &quot;/doom-themes&quot;))
(add-to-list &apos;custom-theme-load-path (concat &quot;~/.config/emacs/.local/straight/build-&quot; emacs-version &quot;/base16-theme&quot;))
(add-to-list &apos;custom-theme-load-path (concat &quot;~/.config/emacs/.local/straight/build-&quot; emacs-version &quot;/moe-theme&quot;))
(<span style="font-weight: bold;">require</span> '<span style="font-weight: bold; text-decoration: underline;">xml</span>)
(<span style="font-weight: bold;">require</span> '<span style="font-weight: bold; text-decoration: underline;">dom</span>)
(<span style="font-weight: bold;">require</span> '<span style="font-weight: bold; text-decoration: underline;">ox-publish</span>)
(<span style="font-weight: bold;">require</span> '<span style="font-weight: bold; text-decoration: underline;">ox-rss</span>)
(<span style="font-weight: bold;">require</span> '<span style="font-weight: bold; text-decoration: underline;">org</span>)
(<span style="font-weight: bold;">require</span> '<span style="font-weight: bold; text-decoration: underline;">esxml</span>)
(require &apos;xml)
(require &apos;dom)
(require &apos;ox-publish)
(require &apos;ox-rss)
(require &apos;org)
(require &apos;esxml)
<span style="font-weight: bold; font-style: italic;">;;</span>
<span style="font-weight: bold; font-style: italic;">;;</span><span style="font-weight: bold; font-style: italic;">Variables</span>
<span style="font-weight: bold; font-style: italic;">;;</span>
(<span style="font-weight: bold;">setq</span>
my/url <span style="font-style: italic;">"https://fidonode.me"</span>
my/web-export-path <span style="font-style: italic;">"./public"</span>
my/blog-src-path <span style="font-style: italic;">"./home/05 Blog"</span>
org-html-validation-link nil <span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">Don't show validation link</span>
org-html-htmlize-output-type 'inline-css
;;
;;Variables
;;
(setq
my/url &quot;https://fidonode.me&quot;
my/web-export-path &quot;./public&quot;
my/blog-src-path &quot;./home/05 Blog&quot;
org-html-validation-link nil ;; Don&apos;t show validation link
org-html-htmlize-output-type &apos;inline-css
org-src-fontify-natively t)
<span style="font-weight: bold; font-style: italic;">;;</span>
<span style="font-weight: bold; font-style: italic;">;;</span><span style="font-weight: bold; font-style: italic;">Templates</span>
<span style="font-weight: bold; font-style: italic;">;;</span>
(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/footer</span> (info)
`(footer (@ (class <span style="font-style: italic;">"footer"</span>))
;;
;;Templates
;;
(defun my/footer (info)
`(footer (@ (class &quot;footer&quot;))
(hr)
(p <span style="font-style: italic;">"Alex Mikhailov"</span>)
(p <span style="font-style: italic;">"Built with: "</span>
(a (@ (href <span style="font-style: italic;">"https://www.gnu.org/software/emacs/"</span>)) <span style="font-style: italic;">"GNU Emacs"</span>) <span style="font-style: italic;">" "</span>
(a (@ (href <span style="font-style: italic;">"https://orgmode.org/"</span>)) <span style="font-style: italic;">"Org Mode"</span>) <span style="font-style: italic;">" "</span>
(a (@ (href <span style="font-style: italic;">"https://picocss.com/"</span>)) <span style="font-style: italic;">"picocss"</span>)
(p &quot;Alex Mikhailov&quot;)
(p &quot;Built with: &quot;
(a (@ (href &quot;https://www.gnu.org/software/emacs/&quot;)) &quot;GNU Emacs&quot;) &quot; &quot;
(a (@ (href &quot;https://orgmode.org/&quot;)) &quot;Org Mode&quot;) &quot; &quot;
(a (@ (href &quot;https://picocss.com/&quot;)) &quot;picocss&quot;)
)
))
(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/header</span> (info)
`(header (@ (class <span style="font-style: italic;">"header"</span>))
(defun my/header (info)
`(header (@ (class &quot;header&quot;))
(nav
(ul
(li
(strong
,(org-export-data (plist-get info <span style="font-weight: bold;">:title</span>) info))))
,(org-export-data (plist-get info :title) info))))
(ul
(li (a (@ (href <span style="font-style: italic;">"/index.html"</span>)) <span style="font-style: italic;">"About"</span>))
(li (a (@ (href <span style="font-style: italic;">"/blog.html"</span>)) <span style="font-style: italic;">"Blog"</span>))
(li (a (@ (href <span style="font-style: italic;">"/rss.xml"</span>)) <span style="font-style: italic;">"RSS"</span>))
(li (a (@ (href &quot;/index.html&quot;)) &quot;About&quot;))
(li (a (@ (href &quot;/blog.html&quot;)) &quot;Blog&quot;))
(li (a (@ (href &quot;/rss.xml&quot;)) &quot;RSS&quot;))
)
))
)
(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/template</span> (contents info)
(defun my/template (contents info)
(concat
<span style="font-style: italic;">"&lt;!DOCTYPE html&gt;"</span>
&quot;&amp;lt;!DOCTYPE html&amp;gt;&quot;
(sxml-to-xml
`(html (@ (lang <span style="font-style: italic;">"en"</span>))
`(html (@ (lang &quot;en&quot;))
(head
(meta (@ (charset <span style="font-style: italic;">"utf-8"</span>)))
(meta (@ (author <span style="font-style: italic;">"Alex Mikhailov"</span>)))
(meta (@ (name <span style="font-style: italic;">"viewport"</span>)
(content <span style="font-style: italic;">"width=device-width, initial-scale=1, shrink-to-fit=no"</span>)))
(meta (@ (name <span style="font-style: italic;">"color-scheme"</span>) (content <span style="font-style: italic;">"light dark"</span>)))
(meta (@ (http-equiv <span style="font-style: italic;">"content-language"</span>) (content <span style="font-style: italic;">"en-us"</span>)))
(meta (@ (name <span style="font-style: italic;">"description"</span>) (content <span style="font-style: italic;">"Personal page with a blog about my technical adventures"</span>)))
(link (@ (rel <span style="font-style: italic;">"icon"</span>) (type <span style="font-style: italic;">"image/x-icon"</span>) (href <span style="font-style: italic;">"/resources/favicon.ico"</span>)))
(link (@ (rel <span style="font-style: italic;">"stylesheet"</span>) (href <span style="font-style: italic;">"/resources/css/pico.sand.min.css"</span>)))
(meta (@ (charset &quot;utf-8&quot;)))
(meta (@ (author &quot;Alex Mikhailov&quot;)))
(meta (@ (name &quot;viewport&quot;)
(content &quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;)))
(meta (@ (name &quot;color-scheme&quot;) (content &quot;light dark&quot;)))
(meta (@ (http-equiv &quot;content-language&quot;) (content &quot;en-us&quot;)))
(meta (@ (name &quot;description&quot;) (content &quot;Personal page with a blog about my technical adventures&quot;)))
(link (@ (rel &quot;icon&quot;) (type &quot;image/x-icon&quot;) (href &quot;/resources/favicon.ico&quot;)))
(link (@ (rel &quot;stylesheet&quot;) (href &quot;/resources/css/pico.sand.min.css&quot;)))
(script (@ (defer <span style="font-style: italic;">"true"</span>) (src <span style="font-style: italic;">"https://umami.dokutsu.xyz/script.js"</span>) (data-website-id <span style="font-style: italic;">"d52d9af1-0c7d-4531-84c6-0b9c2850011f"</span>)) ())
(title ,(org-export-data (plist-get info <span style="font-weight: bold;">:title</span>) info)))
(script (@ (defer &quot;true&quot;) (src &quot;https://umami.dokutsu.xyz/script.js&quot;) (data-website-id &quot;d52d9af1-0c7d-4531-84c6-0b9c2850011f&quot;)) ())
(title ,(org-export-data (plist-get info :title) info)))
(body
(main (@ (class <span style="font-style: italic;">"container"</span>))
(main (@ (class &quot;container&quot;))
,(my/header info)
(*RAW-STRING* ,contents)
,(my/footer info)
@ -312,73 +302,72 @@ Here is the whole elisp script which I use to publish my blog. It have some addi
)
(org-export-define-derived-backend 'my-html 'html
<span style="font-weight: bold;">:translate-alist</span> '((template . my/template)
(org-export-define-derived-backend &apos;my-html &apos;html
:translate-alist &apos;((template . my/template)
))
(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/publish-to-html</span> (plist filename pub-dir)
<span style="font-style: italic;">"Publish an Org file to HTML using the custom backend."</span>
(org-publish-org-to 'my-html filename <span style="font-style: italic;">".html"</span> plist pub-dir))
(defun my/publish-to-html (plist filename pub-dir)
&quot;Publish an Org file to HTML using the custom backend.&quot;
(org-publish-org-to &apos;my-html filename &quot;.html&quot; plist pub-dir))
<span style="font-weight: bold; font-style: italic;">;;</span>
<span style="font-weight: bold; font-style: italic;">;;</span><span style="font-weight: bold; font-style: italic;">Helpers</span>
<span style="font-weight: bold; font-style: italic;">;;</span>
(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/format-date-subtitle</span> (file project)
<span style="font-style: italic;">"Format the date found in FILE of PROJECT."</span>
(format-time-string <span style="font-style: italic;">"posted on %Y-%m-%d"</span> (org-publish-find-date file project)))
;;
;;Helpers
;;
(defun my/format-date-subtitle (file project)
&quot;Format the date found in FILE of PROJECT.&quot;
(format-time-string &quot;posted on %Y-%m-%d&quot; (org-publish-find-date file project)))
<span style="font-weight: bold; font-style: italic;">;;</span>
<span style="font-weight: bold; font-style: italic;">;;</span><span style="font-weight: bold; font-style: italic;">Clear folder with results</span>
<span style="font-weight: bold; font-style: italic;">;;</span>
(<span style="font-weight: bold;">when</span> (file-directory-p my/web-export-path)
;;
;;Clear folder with results
;;
(when (file-directory-p my/web-export-path)
(delete-directory my/web-export-path t))
(mkdir my/web-export-path)
<span style="font-weight: bold; font-style: italic;">;;</span>
<span style="font-weight: bold; font-style: italic;">;;</span><span style="font-weight: bold; font-style: italic;">Main blog configuration</span>
<span style="font-weight: bold; font-style: italic;">;;</span>
(<span style="font-weight: bold;">setq</span> org-publish-project-alist
;;
;;Main blog configuration
;;
(setq org-publish-project-alist
(list
(list <span style="font-style: italic;">"static"</span>
<span style="font-weight: bold;">:base-directory</span> my/blog-src-path
<span style="font-weight: bold;">:base-extension</span> <span style="font-style: italic;">"css</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">js</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">png</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">jpg</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">jpeg</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">gif</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">pdf</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">ico</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">txt"</span>
<span style="font-weight: bold;">:publishing-directory</span> my/web-export-path
<span style="font-weight: bold;">:recursive</span> t
<span style="font-weight: bold;">:publishing-function</span> 'org-publish-attachment
(list &quot;static&quot;
:base-directory my/blog-src-path
:base-extension &quot;css\\|js\\|png\\|jpg\\|jpeg\\|gif\\|pdf\\|ico\\|txt&quot;
:publishing-directory my/web-export-path
:recursive t
:publishing-function &apos;org-publish-attachment
)
(list <span style="font-style: italic;">"blog"</span>
<span style="font-weight: bold;">:recursive</span> t
<span style="font-weight: bold;">:base-directory</span> my/blog-src-path
<span style="font-weight: bold;">:publishing-directory</span> my/web-export-path
<span style="font-weight: bold;">:publishing-function</span> 'my/publish-to-html
<span style="font-weight: bold;">:html-html5-fancy</span> t
<span style="font-weight: bold;">:htmlized-source</span> t
<span style="font-weight: bold;">:with-author</span> nil
<span style="font-weight: bold;">:with-creator</span> t
<span style="font-weight: bold;">:with-toc</span> t
<span style="font-weight: bold;">:section-numbers</span> nil
<span style="font-weight: bold;">:time-stamp-file</span> nil
(list &quot;blog&quot;
:recursive t
:base-directory my/blog-src-path
:publishing-directory my/web-export-path
:publishing-function &apos;my/publish-to-html
:html-html5-fancy t
:htmlized-source t
:with-author nil
:with-creator t
:with-toc t
:section-numbers nil
:time-stamp-file nil
)
))
<span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">Generate the site output</span>
;; Generate the site output
(org-publish-all t)
(message <span style="font-style: italic;">"Build complete!"</span>)
(message &quot;Build complete!&quot;)
</pre>
</div>
</code></pre>
</div>
</div>
</div>
<div id="outline-container-orgf5d456b" class="outline-2">
<h2 id="orgf5d456b">Publish through GitHub Action</h2>
<div class="outline-text-2" id="text-orgf5d456b">
<div id="outline-container-org720a634" class="outline-2">
<h2 id="org720a634">Publish through GitHub Action</h2>
<div class="outline-text-2" id="text-org720a634">
<p>
With all previous preparations, this step sounds simple like: <code class="src src-sh">emacs -Q --script ./build-site.el</code>
I've chosen a pretty standard way to publish static sites through GitHub Pages. Since I keep my Org files in a private repo, I need some additional steps to address it. I use the <code>peaceiris/actions-gh-pages@v3</code> action to publish from my Org repo to the Pages repo.
@ -386,24 +375,22 @@ However, since I use <code>Doom Emacs</code> as my configuration framework, we n
</p>
</div>
<div id="outline-container-org16be392" class="outline-3">
<h3 id="org16be392">Install Emacs</h3>
<div class="outline-text-3" id="text-org16be392">
<div id="outline-container-org8358f01" class="outline-3">
<h3 id="org8358f01">Install Emacs</h3>
<div class="outline-text-3" id="text-org8358f01">
<p>
If you want to run <code>Emacs Lisp</code>, you need the whole Emacs, at least without GUI. In a GitHub Action, you can simply run:
</p>
<div class="org-src-container">
<pre class="src src-sh">sudo apt install emacs-nox --yes
</pre>
</div>
<pre><code class="language-sh">sudo apt install emacs-nox --yes
</code></pre>
<p>
This way has a downside - you will install Emacs on each action run since the system state is disposable.
</p>
</div>
</div>
<div id="outline-container-orgd9561a3" class="outline-3">
<h3 id="orgd9561a3">Just bring everything</h3>
<div class="outline-text-3" id="text-orgd9561a3">
<div id="outline-container-orgda4c3da" class="outline-3">
<h3 id="orgda4c3da">Just bring everything</h3>
<div class="outline-text-3" id="text-orgda4c3da">
<p>
I need to take extra steps since I use Doom Emacs and have my configs in Org. You may also need to install dependencies for your configuration.
</p>
@ -411,60 +398,51 @@ I need to take extra steps since I use Doom Emacs and have my configs in Org. Yo
<p>
Fetch doom guts
</p>
<div class="org-src-container">
<pre class="src src-sh">git clone --depth 1 https://github.com/doomemacs/doomemacs ~/.config/emacs
</pre>
</div>
<pre><code class="language-sh">git clone --depth 1 https://github.com/doomemacs/doomemacs ~/.config/emacs
</code></pre>
<p>
Prepare minimal config for rendering Org file to config.
</p>
<div class="org-src-container">
<pre class="src src-sh"><span style="font-weight: bold;">echo</span> <span style="font-style: italic;">'(doom! :config literate)'</span> &gt; ~/.config/doom/init.el
<span style="font-weight: bold;">echo</span> <span style="font-style: italic;">'(setq +literate-config-file "'</span>$(<span style="font-weight: bold;">pwd</span>)<span style="font-style: italic;">'/config/config.org")'</span> &gt; ~/.config/doom/cli.el
</pre>
</div>
<pre><code class="language-sh">echo &apos;(doom! :config literate)&apos; &amp;gt; ~/.config/doom/init.el
echo &apos;(setq +literate-config-file &quot;&apos;$(pwd)&apos;/config/config.org&quot;)&apos; &amp;gt; ~/.config/doom/cli.el
</code></pre>
<p>
Finally, install all dependencies according to my config. Yes, it is overhead, but I can be sure that I have the same dependencies as on my dev machine.
</p>
<div class="org-src-container">
<pre class="src src-sh">~/.config/emacs/bin/doom sync -B
</pre>
</div>
<pre><code class="language-sh">~/.config/emacs/bin/doom sync -B
</code></pre>
<p>
Of course, I use a caching step to make the whole process faster:
</p>
<div class="org-src-container">
<pre class="src src-yaml">- name: Cache doom-emacs
<pre><code class="language-yaml">- name: Cache doom-emacs
uses: actions/cache@v4
id: cache-doom-save
with:
path: ~/.config/emacs
key: ${{ runner.os }}-doom
</pre>
</div>
</code></pre>
</div>
</div>
<div id="outline-container-org4da44cb" class="outline-3">
<h3 id="org4da44cb">BTW I use GNU Emacs</h3>
<div class="outline-text-3" id="text-org4da44cb">
<div id="outline-container-orgd494432" class="outline-3">
<h3 id="orgd494432">BTW I use GNU Emacs</h3>
<div class="outline-text-3" id="text-orgd494432">
<p>
Here's the whole publishing workflow.
</p>
<div class="org-src-container">
<pre class="src src-yaml">name: pages
<pre><code class="language-yaml">name: pages
on:
push:
branches:
- "main"
- &quot;main&quot;
# Do not trigger build on changes in other folders
paths-ignore:
- "./home/02 Action"
- "./home/03 PKM"
- "./home/04 Log"
- "./home/06 Projects"
- &quot;./home/02 Action&quot;
- &quot;./home/03 PKM&quot;
- &quot;./home/04 Log&quot;
- &quot;./home/06 Projects&quot;
workflow_dispatch:
jobs:
@ -495,11 +473,11 @@ jobs:
# I use literate config, so we need some extra steps to botstrap my config
- name: Put template for literate config
run: echo '(doom! :config literate)' &gt; ~/.config/doom/init.el
run: echo &apos;(doom! :config literate)&apos; &amp;gt; ~/.config/doom/init.el
# Yep. I also keep my emacs config in org in my org repo
- name: Propagate org conf
run: echo '(setq +literate-config-file "'$(pwd)'/config/config.org")' &gt; ~/.config/doom/cli.el
run: echo &apos;(setq +literate-config-file &quot;&apos;$(pwd)&apos;/config/config.org&quot;)&apos; &amp;gt; ~/.config/doom/cli.el
# Build doomemacs deps. Should be relativelly fast, cause almost everything cached.
- name: Sync doom
@ -525,32 +503,31 @@ jobs:
publish_branch: gh-pages
publish_dir: ./public
</pre>
</code></pre>
</div>
</div>
</div>
</div>
<div id="outline-container-orgeb3b53c" class="outline-2">
<h2 id="orgeb3b53c">What is next</h2>
<div class="outline-text-2" id="text-orgeb3b53c">
<div id="outline-container-orgb2469f9" class="outline-2">
<h2 id="orgb2469f9">What is next</h2>
<div class="outline-text-2" id="text-orgb2469f9">
<p>
I have a plans to make posts about next features:
</p>
</div>
<div id="outline-container-orgef929fb" class="outline-3">
<h3 id="orgef929fb"><a href="./add_rss_to_blog.html">RSS Feed</a></h3>
<div id="outline-container-org44a2efc" class="outline-3">
<h3 id="org44a2efc"><a href="./add_rss_to_blog.html">RSS Feed</a></h3>
</div>
<div id="outline-container-orgd92b3bd" class="outline-3">
<h3 id="orgd92b3bd">Open Graph</h3>
<div class="outline-text-3" id="text-orgd92b3bd">
<div id="outline-container-org7be84da" class="outline-3">
<h3 id="org7be84da">Open Graph</h3>
<div class="outline-text-3" id="text-org7be84da">
<p>
Already implemented. Need to document process.
</p>
</div>
</div>
<div id="outline-container-orge558f1c" class="outline-3">
<h3 id="orge558f1c">Code highlighting</h3>
<div class="outline-text-3" id="text-orge558f1c">
<div id="outline-container-org2eccbc3" class="outline-3">
<h3 id="org2eccbc3">Code highlighting</h3>
<div class="outline-text-3" id="text-org2eccbc3">
<p>
Only rudimentary highlight. Want something fancier.
</p>

View File

@ -1,138 +1,128 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Let&apos;s add RSS feed to blog"/><meta name="og:description" content="Let&apos;s add RSS feed to blog"/><meta name="twitter:description" content="Let&apos;s add RSS feed to blog"/><meta name="og:image" content="https://fidonode.me/resources/images/posts/add_rss_to_blog.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts/add_rss_to_blog.org.png"/><meta name="og:title" content="Org blog with RSS"/><meta name="twitter:title" content="Org blog with RSS"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>Org blog with RSS</title></head><body><main class="container"><header class="header"><nav><ul><li><strong>Org blog with RSS</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Let&apos;s add RSS feed to blog"/><meta name="og:description" content="Let&apos;s add RSS feed to blog"/><meta name="twitter:description" content="Let&apos;s add RSS feed to blog"/><meta name="og:image" content="https://fidonode.me/resources/images/posts/add_rss_to_blog.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts/add_rss_to_blog.org.png"/><meta name="og:title" content="Org blog with RSS"/><meta name="twitter:title" content="Org blog with RSS"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><nil><link rel="stylesheet" type="text/css" href="/resources/css/quirks.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-solarizedlight.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script></nil><title>Org blog with RSS</title></head><body class="line-numbers"><main class="container"><header class="header"><nav><ul><li><strong>Org blog with RSS</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgae3bcfc">Why do you even need RSS?</a></li>
<li><a href="#org9d3aef3">Add RSS feed</a>
<li><a href="#org4f74f6a">Why do you even need RSS?</a></li>
<li><a href="#orga6d6788">Add RSS feed</a>
<ul>
<li><a href="#org41dcd5c">Use sitemap backend in the build</a></li>
<li><a href="#org1dba26e">Publishing and formatting functions</a></li>
<li><a href="#org090269f">Use sitemap backend in the build</a></li>
<li><a href="#org401a2ad">Publishing and formatting functions</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="outline-container-orgae3bcfc" class="outline-2">
<h2 id="orgae3bcfc">Why do you even need RSS?</h2>
<div class="outline-text-2" id="text-orgae3bcfc">
<div id="outline-container-org4f74f6a" class="outline-2">
<h2 id="org4f74f6a">Why do you even need RSS?</h2>
<div class="outline-text-2" id="text-org4f74f6a">
<p>
RSS might seem like an outdated, marginal thing. But it still has at least one benefit—you can use an RSS feed as a sitemap for search engines. Plus, it's pretty geeky.
</p>
</div>
</div>
<div id="outline-container-org9d3aef3" class="outline-2">
<h2 id="org9d3aef3">Add RSS feed</h2>
<div class="outline-text-2" id="text-org9d3aef3">
<div id="outline-container-orga6d6788" class="outline-2">
<h2 id="orga6d6788">Add RSS feed</h2>
<div class="outline-text-2" id="text-orga6d6788">
<p>
So, what's happening here? Let's start by integrating our templating functions into the build.
</p>
</div>
<div id="outline-container-org41dcd5c" class="outline-3">
<h3 id="org41dcd5c">Use sitemap backend in the build</h3>
<div class="outline-text-3" id="text-org41dcd5c">
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">setq</span> org-publish-project-alist
<div id="outline-container-org090269f" class="outline-3">
<h3 id="org090269f">Use sitemap backend in the build</h3>
<div class="outline-text-3" id="text-org090269f">
<pre><code class="language-elisp">(setq org-publish-project-alist
(list
(list <span style="font-style: italic;">"blog-rss"</span>
<span style="font-weight: bold;">:author</span> <span style="font-style: italic;">"Alex M"</span>
<span style="font-weight: bold;">:email</span> <span style="font-style: italic;">"iam@fidonode.me"</span>
<span style="font-weight: bold;">:base-directory</span> my/blog-src-path
<span style="font-weight: bold;">:base-extension</span> <span style="font-style: italic;">"org"</span>
<span style="font-weight: bold;">:recursive</span> t
<span style="font-weight: bold;">:exclude</span> (regexp-opt '(<span style="font-style: italic;">"rss.org"</span> <span style="font-style: italic;">"index.org"</span> <span style="font-style: italic;">"404.org"</span> <span style="font-style: italic;">"posts.org"</span>))
<span style="font-weight: bold;">:publishing-function</span> 'my/publish-to-rss
<span style="font-weight: bold;">:publishing-directory</span> my/web-export-path
<span style="font-weight: bold;">:rss-extension</span> <span style="font-style: italic;">"xml"</span>
<span style="font-weight: bold;">:html-link-home</span> my/url
<span style="font-weight: bold;">:html-link-use-abs-url</span> t
<span style="font-weight: bold;">:html-link-org-files-as-html</span> t
<span style="font-weight: bold;">:auto-sitemap</span> t
<span style="font-weight: bold;">:sitemap-filename</span> <span style="font-style: italic;">"rss.org"</span>
<span style="font-weight: bold;">:sitemap-title</span> <span style="font-style: italic;">"rss"</span>
<span style="font-weight: bold;">:sitemap-style</span> 'list
<span style="font-weight: bold;">:sitemap-sort-files</span> 'anti-chronologically
<span style="font-weight: bold;">:sitemap-function</span> 'my/format-rss-feed
<span style="font-weight: bold;">:sitemap-format-entry</span> 'my/format-rss-feed-entry)
(list &quot;blog-rss&quot;
:author &quot;Alex M&quot;
:email &quot;iam@fidonode.me&quot;
:base-directory my/blog-src-path
:base-extension &quot;org&quot;
:recursive t
:exclude (regexp-opt &apos;(&quot;rss.org&quot; &quot;index.org&quot; &quot;404.org&quot; &quot;posts.org&quot;))
:publishing-function &apos;my/publish-to-rss
:publishing-directory my/web-export-path
:rss-extension &quot;xml&quot;
:html-link-home my/url
:html-link-use-abs-url t
:html-link-org-files-as-html t
:auto-sitemap t
:sitemap-filename &quot;rss.org&quot;
:sitemap-title &quot;rss&quot;
:sitemap-style &apos;list
:sitemap-sort-files &apos;anti-chronologically
:sitemap-function &apos;my/format-rss-feed
:sitemap-format-entry &apos;my/format-rss-feed-entry)
))
</pre>
</div>
</code></pre>
<p>
How does it work? As you can see, we use the default sitemap generator from Org Export with some additional steps. By default, the sitemap generator collects all org files from <code>:base-directory</code>. It then places links to these files as separate entries into an intermediate org file and publishes this org file. We use custom functions for collecting entries, formatting entries, and publishing the org file.
</p>
</div>
</div>
<div id="outline-container-org1dba26e" class="outline-3">
<h3 id="org1dba26e">Publishing and formatting functions</h3>
<div class="outline-text-3" id="text-org1dba26e">
<div id="outline-container-org401a2ad" class="outline-3">
<h3 id="org401a2ad">Publishing and formatting functions</h3>
<div class="outline-text-3" id="text-org401a2ad">
<p>
We need a mandatory dependency because we don't want to mess with forming correct XML by ourselves.
</p>
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">require</span> '<span style="font-weight: bold; text-decoration: underline;">ox-rss</span>)
</pre>
</div>
<pre><code class="language-elisp">(require &apos;ox-rss)
</code></pre>
<p>
Here's the core of the process. We need to prepare entries before feeding them to the <code>org-rss-publish-to-rss</code> function. Since we're doing it our own way, we need to start by creating a bullet with a link to the post, and then add <code>RSS_PERMALINK</code>, <code>RSS_TITLE</code>, and <code>PUBDATE</code>. I also add the first two lines of the blog post instead of a description. This is the native way to do a preview in the RSS world.
</p>
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/format-rss-feed-entry</span> (entry style project)
<span style="font-style: italic;">"Format ENTRY for the RSS feed.</span>
<span style="font-style: italic;">ENTRY is a file name. STYLE is either 'list' or 'tree'.</span>
<span style="font-style: italic;">PROJECT is the current project."</span>
(<span style="font-weight: bold;">cond</span> ((not (directory-name-p entry))
(<span style="font-weight: bold;">let*</span> ((file (org-publish--expand-file-name entry project))
<pre><code class="language-elisp">(defun my/format-rss-feed-entry (entry style project)
&quot;Format ENTRY for the RSS feed.
ENTRY is a file name. STYLE is either &apos;list&apos; or &apos;tree&apos;.
PROJECT is the current project.&quot;
(cond ((not (directory-name-p entry))
(let* ((file (org-publish--expand-file-name entry project))
(title (org-publish-find-title entry project))
(date (format-time-string <span style="font-style: italic;">"%Y-%m-%d"</span> (org-publish-find-date entry project)))
(link (concat (file-name-sans-extension entry) <span style="font-style: italic;">".html"</span>)))
(<span style="font-weight: bold;">with-temp-buffer</span>
(date (format-time-string &quot;%Y-%m-%d&quot; (org-publish-find-date entry project)))
(link (concat (file-name-sans-extension entry) &quot;.html&quot;)))
(with-temp-buffer
(org-mode)
(insert (format <span style="font-style: italic;">"* [[file:%s][%s]]\n"</span> file title))
(org-set-property <span style="font-style: italic;">"RSS_PERMALINK"</span> link)
(org-set-property <span style="font-style: italic;">"RSS_TITLE"</span> title)
(org-set-property <span style="font-style: italic;">"PUBDATE"</span> date)
(<span style="font-weight: bold;">let</span> ((first-two-lines (<span style="font-weight: bold;">with-temp-buffer</span>
(insert (format &quot;* [[file:%s][%s]]\n&quot; file title))
(org-set-property &quot;RSS_PERMALINK&quot; link)
(org-set-property &quot;RSS_TITLE&quot; title)
(org-set-property &quot;PUBDATE&quot; date)
(let ((first-two-lines (with-temp-buffer
(insert-file-contents file)
(buffer-substring-no-properties
(point-min)
(<span style="font-weight: bold;">progn</span> (forward-line 2) (point))))))
(<span style="font-weight: bold;">if</span> (string-suffix-p <span style="font-style: italic;">"\n"</span> first-two-lines)
(<span style="font-weight: bold;">setq</span> first-two-lines (substring first-two-lines 0 -1)))
(progn (forward-line 2) (point))))))
(if (string-suffix-p &quot;\n&quot; first-two-lines)
(setq first-two-lines (substring first-two-lines 0 -1)))
(insert first-two-lines))
(goto-char (point-max))
(insert <span style="font-style: italic;">"..."</span>)
(insert &quot;...&quot;)
(buffer-string))))
((eq style 'tree)
<span style="font-weight: bold; font-style: italic;">;; </span><span style="font-weight: bold; font-style: italic;">Return only last subdir.</span>
((eq style &apos;tree)
;; Return only last subdir.
(file-name-nondirectory (directory-file-name entry)))
(t entry)))
</pre>
</div>
</code></pre>
<p>
This function creates the content of the intermediate org file. Mostly a rudimentary title, and then we ask Org to unwind the list of collected files with the <code>my/format-rss-feed-entry</code> function.
</p>
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/format-rss-feed</span> (title list)
<span style="font-style: italic;">"Generate RSS feed, as a string.</span>
<span style="font-style: italic;">TITLE is the title of the RSS feed. LIST is an internal</span>
<span style="font-style: italic;">representation for the files to include, as returned by</span>
<span style="font-style: italic;">`</span><span style="font-weight: bold; font-style: italic; text-decoration: underline;">org-list-to-lisp</span><span style="font-style: italic;">'. PROJECT is the current project."</span>
(concat <span style="font-style: italic;">"#+TITLE: "</span> title <span style="font-style: italic;">"\n"</span>
<span style="font-style: italic;">"#+STARTUP: showall \n\n"</span>
(org-list-to-subtree list 1 '(<span style="font-weight: bold;">:icount</span> <span style="font-style: italic;">""</span> <span style="font-weight: bold;">:istart</span> <span style="font-style: italic;">""</span>))))
</pre>
</div>
<pre><code class="language-elisp">(defun my/format-rss-feed (title list)
&quot;Generate RSS feed, as a string.
TITLE is the title of the RSS feed. LIST is an internal
representation for the files to include, as returned by
`org-list-to-lisp&apos;. PROJECT is the current project.&quot;
(concat &quot;#+TITLE: &quot; title &quot;\n&quot;
&quot;#+STARTUP: showall \n\n&quot;
(org-list-to-subtree list 1 &apos;(:icount &quot;&quot; :istart &quot;&quot;))))
</code></pre>
<p>
This function replaces the default publishing function to filter everything except the intermediate file before publishing.
</p>
<div class="org-src-container">
<pre class="src src-elisp">(<span style="font-weight: bold;">defun</span> <span style="font-weight: bold;">my/publish-to-rss</span> (plist filename pub-dir)
<span style="font-style: italic;">"Publish RSS with PLIST, only when FILENAME is 'rss.org'.</span>
<span style="font-style: italic;">PUB-DIR is when the output will be placed."</span>
(<span style="font-weight: bold;">if</span> (equal <span style="font-style: italic;">"rss.org"</span> (file-name-nondirectory filename))
<pre><code class="language-elisp">(defun my/publish-to-rss (plist filename pub-dir)
&quot;Publish RSS with PLIST, only when FILENAME is &apos;rss.org&apos;.
PUB-DIR is when the output will be placed.&quot;
(if (equal &quot;rss.org&quot; (file-name-nondirectory filename))
(org-rss-publish-to-rss plist filename pub-dir)))
</pre>
</div>
</code></pre>
<p>
Voila! Now you have an <code>rss.xml</code> in your export path.
</p>

View File

@ -1,52 +1,52 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Blog post about my keyboards"/><meta name="og:description" content="Blog post about my keyboards"/><meta name="twitter:description" content="Blog post about my keyboards"/><meta name="og:image" content="https://fidonode.me/resources/images/posts/keeb.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts/keeb.org.png"/><meta name="og:title" content="My keyboard journey"/><meta name="twitter:title" content="My keyboard journey"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>My keyboard journey</title></head><body><main class="container"><header class="header"><nav><ul><li><strong>My keyboard journey</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content="Blog post about my keyboards"/><meta name="og:description" content="Blog post about my keyboards"/><meta name="twitter:description" content="Blog post about my keyboards"/><meta name="og:image" content="https://fidonode.me/resources/images/posts/keeb.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/posts/keeb.org.png"/><meta name="og:title" content="My keyboard journey"/><meta name="twitter:title" content="My keyboard journey"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><nil><link rel="stylesheet" type="text/css" href="/resources/css/quirks.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-solarizedlight.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script></nil><title>My keyboard journey</title></head><body class="line-numbers"><main class="container"><header class="header"><nav><ul><li><strong>My keyboard journey</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgb88cbf4">My end-game (at least I hope) keyboard</a>
<li><a href="#org62f78ec">My end-game (at least I hope) keyboard</a>
<ul>
<li><a href="#org6d08262">Keebs path</a>
<li><a href="#org2ce3842">Keebs path</a>
<ul>
<li><a href="#orgbecf518">Dactyl manuform</a></li>
<li><a href="#org983f6ad">Moonlander</a></li>
<li><a href="#org0189c18">Custom Corne</a></li>
<li><a href="#org66bc595">Dactyl manuform again</a></li>
<li><a href="#orge5b75cc">Dactyl manuform</a></li>
<li><a href="#orgee1e688">Moonlander</a></li>
<li><a href="#org8824684">Custom Corne</a></li>
<li><a href="#org1db9be2">Dactyl manuform again</a></li>
</ul>
</li>
<li><a href="#orgdff19f3">Hardware</a>
<li><a href="#org0244861">Hardware</a>
<ul>
<li><a href="#orgaede2bc">Body</a></li>
<li><a href="#orgd43eb3a">Switches and caps</a></li>
<li><a href="#orgf91b88a">Controllers</a></li>
<li><a href="#orgef608a8">Amoeba things</a></li>
<li><a href="#org14457ba">Body</a></li>
<li><a href="#orgc8c4538">Switches and caps</a></li>
<li><a href="#orgf4499d7">Controllers</a></li>
<li><a href="#org2e12bfb">Amoeba things</a></li>
</ul>
</li>
<li><a href="#orgbacc290">Software</a>
<li><a href="#org6f474f7">Software</a>
<ul>
<li><a href="#orgfb676c7">Plain default - QMK</a></li>
<li><a href="#orgaf071d4">Make own layout</a></li>
<li><a href="#org791cb95">Plain default - QMK</a></li>
<li><a href="#org0eab6b6">Make own layout</a></li>
</ul>
</li>
<li><a href="#org1cc0ca6">Whats next?</a></li>
<li><a href="#orgc0ed1d9">Whats next?</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="outline-container-orgb88cbf4" class="outline-2">
<h2 id="orgb88cbf4">My end-game (at least I hope) keyboard</h2>
<div class="outline-text-2" id="text-orgb88cbf4">
<div id="outline-container-org62f78ec" class="outline-2">
<h2 id="org62f78ec">My end-game (at least I hope) keyboard</h2>
<div class="outline-text-2" id="text-org62f78ec">
</div>
<div id="outline-container-org6d08262" class="outline-3">
<h3 id="org6d08262">Keebs path</h3>
<div class="outline-text-3" id="text-org6d08262">
<div id="outline-container-org2ce3842" class="outline-3">
<h3 id="org2ce3842">Keebs path</h3>
<div class="outline-text-3" id="text-org2ce3842">
<p>
Sometimes I think about the long journey I've made with keebs. In childhood, I had decent membrane keyboards, most of which had an ergonomic profile like the MS. Not sure if it somehow affected my taste because I started my career with the simplest, cheapest board and typed countless lines of code on such keebs. Then I heard about clickity-clack mechanical keyboards and decided to try one. It was a simple Chinese keeb with a thick metal body, double-shot caps, and Cherry Brown switches. A decent thing to annoy everyone around you. I think this purchase marked my dive into mech keebs
I'm not a geeky aficionado who thinks you can fix everything with a new keyboard, but I built a couple of them. I hope I've finally built the last one for quite some time.
</p>
</div>
<div id="outline-container-orgbecf518" class="outline-4">
<h4 id="orgbecf518">Dactyl manuform</h4>
<div class="outline-text-4" id="text-orgbecf518">
<div id="outline-container-orge5b75cc" class="outline-4">
<h4 id="orge5b75cc">Dactyl manuform</h4>
<div class="outline-text-4" id="text-orge5b75cc">
<p>
Almost all of the time, I struggle with my maximalism. So I decided to build the ultimate mechanical ergonomic split keyboard and chose the Dactyl Manuform. Sounds like a crazy idea. Zero experience with QMK, zero experience with hand-wired keyboards, and zero experience in 3D printing.
The last problem was the easiest one; I just asked my friend to print the bodies from PETG polymer, and Bob's your uncle. I got two pieces of rough-layered plastic with all the support structures. God, it was a nightmare to clean these prints from supports and small artifacts, but I was happy.
@ -92,9 +92,9 @@ To be honest, this keeb was ugly, and I decided that I wanted a beautiful factor
</p>
</div>
</div>
<div id="outline-container-org983f6ad" class="outline-4">
<h4 id="org983f6ad">Moonlander</h4>
<div class="outline-text-4" id="text-org983f6ad">
<div id="outline-container-orgee1e688" class="outline-4">
<h4 id="orgee1e688">Moonlander</h4>
<div class="outline-text-4" id="text-orgee1e688">
<p>
Nothing special. Ordered, paid, got it, tried it. Everything worked. Looked good. Happy year of typing. Bored. Annoyed. Too big and chunky. No concave. Quality not the best. Started planning the next one.
</p>
@ -107,9 +107,9 @@ Nothing special. Ordered, paid, got it, tried it. Everything worked. Looked good
</div>
</div>
<div id="outline-container-org0189c18" class="outline-4">
<h4 id="org0189c18">Custom Corne</h4>
<div class="outline-text-4" id="text-org0189c18">
<div id="outline-container-org8824684" class="outline-4">
<h4 id="org8824684">Custom Corne</h4>
<div class="outline-text-4" id="text-org8824684">
<p>
This journey started with discovering the Jian keyboard. It is a niche keeb from the Ru community focused on full support of the whole Russian layout. It was originally created by KGOH. I missed the group buy and decided that I could easily patch a Corne board with two additional keys to mimic the Jian.
Interesting journey. I learned how to use KiCad, and how to export gerbers.
@ -158,9 +158,9 @@ Daily driver for ~6 months. Then the world changed, and I decided to leave my ho
</p>
</div>
</div>
<div id="outline-container-org66bc595" class="outline-4">
<h4 id="org66bc595">Dactyl manuform again</h4>
<div class="outline-text-4" id="text-org66bc595">
<div id="outline-container-org1db9be2" class="outline-4">
<h4 id="org1db9be2">Dactyl manuform again</h4>
<div class="outline-text-4" id="text-org1db9be2">
<p>
Two years late I've settled down in new country and decide that I want to bring back my dactyl manuform experience.
</p>
@ -174,13 +174,13 @@ Two years late I've settled down in new country and decide that I want to bring
</div>
</div>
<div id="outline-container-orgdff19f3" class="outline-3">
<h3 id="orgdff19f3">Hardware</h3>
<div class="outline-text-3" id="text-orgdff19f3">
<div id="outline-container-org0244861" class="outline-3">
<h3 id="org0244861">Hardware</h3>
<div class="outline-text-3" id="text-org0244861">
</div>
<div id="outline-container-orgaede2bc" class="outline-4">
<h4 id="orgaede2bc">Body</h4>
<div class="outline-text-4" id="text-orgaede2bc">
<div id="outline-container-org14457ba" class="outline-4">
<h4 id="org14457ba">Body</h4>
<div class="outline-text-4" id="text-org14457ba">
<p>
I've choose to use a <a href="https://ryanis.cool/dactyl/#manuform">Ryan's generator</a> and generate body on top of Corne preset with all keys in last row and disabled stagger for the last two columns. <a href="https://ryanis.cool/dactyl/#manuform:CiUIBhAEGgp0aHJlZS1taW5pIgRmdWxsKgNib3gyBm5vcm1pZTgAGgoIARIEbm9uZRgAIhdVAACAQBgAIABdAADgQGUAAEBAQABIADL5AZUDAAAgQJ0DAACAP4ADAIgDAA0AAAAAFQAAAAAdMzMzQCUAANDALQAAUME1AADAQD0AAAAARQAAAABNAADAQFUAAEDAXQAA4EBlMzNhwm0zMy3CdQAAvMF45wKAAc0YiAHIJJUBMzMXwp0BMzNdwqUBZmbKwagBnwuwAZkXuAH8JcUBAABQws0BAADQwdUBAABAwdgBnATgAfMX6AGQHPUBAADowf0BAAAkwoUCAABQwYgCmwSQAvMXmALgIaUCAAAMwq0CAABwwbUCAAAAwLgChAfAApUQyAKEB9UCAABAwd0CAACAweUCAABAQOgChAfwApUQ+AKEBw==">Generator preset</a>
The body was printed by JLC3DP (JLCPCB printing department). I've choose <a href="https://jlc3dp.com/help/article/502-Precimid-1172-Pro">SLS from nylon</a>. Print has minor artifacts; I expected better quality.
@ -216,9 +216,9 @@ Overall, I'm happy with results. I also printed bottom plates and <a href="https
</div>
</div>
<div id="outline-container-orgd43eb3a" class="outline-4">
<h4 id="orgd43eb3a">Switches and caps</h4>
<div class="outline-text-4" id="text-orgd43eb3a">
<div id="outline-container-orgc8c4538" class="outline-4">
<h4 id="orgc8c4538">Switches and caps</h4>
<div class="outline-text-4" id="text-orgc8c4538">
<p>
I've chosen Kailh BOX Navy switches. I really like the clickity-clack sound. They have a dedicated clickbar to produce this sound, and the box profile helps with moving down perpendicularly.
</p>
@ -234,9 +234,9 @@ The caps are inherited from the Moonlander. They are thick, double-shot caps wit
</p>
</div>
</div>
<div id="outline-container-orgf91b88a" class="outline-4">
<h4 id="orgf91b88a">Controllers</h4>
<div class="outline-text-4" id="text-orgf91b88a">
<div id="outline-container-orgf4499d7" class="outline-4">
<h4 id="orgf4499d7">Controllers</h4>
<div class="outline-text-4" id="text-orgf4499d7">
<p>
I used a bootleg Pro Micro called Tenstar Robot, based on the ATmega32u4. It's perfectly supported by QMK, pin-to-pin and size-compatible with the Pro Micro.
</p>
@ -249,9 +249,9 @@ I used a bootleg Pro Micro called Tenstar Robot, based on the ATmega32u4. It's p
</div>
</div>
<div id="outline-container-orgef608a8" class="outline-4">
<h4 id="orgef608a8">Amoeba things</h4>
<div class="outline-text-4" id="text-orgef608a8">
<div id="outline-container-org2e12bfb" class="outline-4">
<h4 id="org2e12bfb">Amoeba things</h4>
<div class="outline-text-4" id="text-org2e12bfb">
<p>
During this build, I decided that I did not want to make a big mess of wires and chose Amoeba single-switch PCBs.
</p>
@ -281,13 +281,13 @@ They are nice, have diodes on board, and simplify wiring. However, they have the
</div>
</div>
<div id="outline-container-orgbacc290" class="outline-3">
<h3 id="orgbacc290">Software</h3>
<div class="outline-text-3" id="text-orgbacc290">
<div id="outline-container-org6f474f7" class="outline-3">
<h3 id="org6f474f7">Software</h3>
<div class="outline-text-3" id="text-org6f474f7">
</div>
<div id="outline-container-orgfb676c7" class="outline-4">
<h4 id="orgfb676c7">Plain default - QMK</h4>
<div class="outline-text-4" id="text-orgfb676c7">
<div id="outline-container-org791cb95" class="outline-4">
<h4 id="org791cb95">Plain default - QMK</h4>
<div class="outline-text-4" id="text-org791cb95">
<p>
Prerequiremets:
<a href="https://docs.qmk.fm/cli">QMK CLI</a>
@ -296,135 +296,116 @@ Prerequiremets:
<p>
Clone QMK, setup QMK CLI.
</p>
<div class="org-src-container">
<pre class="src src-bash">git clone git@github.com:qmk/qmk_firmware.git
<span style="font-weight: bold;">cd</span> qmk_firmware
<pre><code class="language-bash">git clone git@github.com:qmk/qmk_firmware.git
cd qmk_firmware
qmk setup -h ./
</pre>
</div>
</code></pre>
<p>
You may want to create a separate keyboard entry in QMK.
</p>
<div class="org-src-container">
<pre class="src src-bash">qmk new-keyboard
</pre>
</div>
<pre><code class="language-bash">qmk new-keyboard
</code></pre>
</div>
</div>
<div id="outline-container-orgaf071d4" class="outline-4">
<h4 id="orgaf071d4">Make own layout</h4>
<div class="outline-text-4" id="text-orgaf071d4">
<div id="outline-container-org0eab6b6" class="outline-4">
<h4 id="org0eab6b6">Make own layout</h4>
<div class="outline-text-4" id="text-org0eab6b6">
<p>
I'll try to go through setting of my personal layout. It is based on <a href="http://www.keyboard-layout-editor.com/#/gists/4b6c2af67148f58ddd6c6b2976c4370f">Jian layout</a>.
</p>
<div class="org-src-container">
<pre class="src src-JSON">"features": {
"rgb_matrix": false,
"bootmagic": true,
"command": false,
"console": false,
"extrakey": true,
"mousekey": true,
"nkro": true,
"rgblight": true
<pre><code class="language-JSON">&quot;features&quot;: {
&quot;rgb_matrix&quot;: false,
&quot;bootmagic&quot;: true,
&quot;command&quot;: false,
&quot;console&quot;: false,
&quot;extrakey&quot;: true,
&quot;mousekey&quot;: true,
&quot;nkro&quot;: true,
&quot;rgblight&quot;: true
},
</pre>
</div>
</code></pre>
<p>
Bootloader flashed to Pro Micro and target MC.
</p>
<div class="org-src-container">
<pre class="src src-JSON">"bootloader": "caterina",
"processor": "atmega32u4",
</pre>
</div>
<pre><code class="language-JSON">&quot;bootloader&quot;: &quot;caterina&quot;,
&quot;processor&quot;: &quot;atmega32u4&quot;,
</code></pre>
<p>
Pins used to attach keyboard matrix.
</p>
<div class="org-src-container">
<pre class="src src-JSON">"matrix_pins": {
"cols": ["B5", "B4", "E6", "D7", "C6", "D4", "D0"],
"rows": ["B1", "B3", "B2", "B6"]
<pre><code class="language-JSON">&quot;matrix_pins&quot;: {
&quot;cols&quot;: [&quot;B5&quot;, &quot;B4&quot;, &quot;E6&quot;, &quot;D7&quot;, &quot;C6&quot;, &quot;D4&quot;, &quot;D0&quot;],
&quot;rows&quot;: [&quot;B1&quot;, &quot;B3&quot;, &quot;B2&quot;, &quot;B6&quot;]
},
</pre>
</div>
</code></pre>
<p>
RGB underglow configuration.
</p>
<div class="org-src-container">
<pre class="src src-JSON">"ws2812": {
"pin": "D3"
<pre><code class="language-JSON">&quot;ws2812&quot;: {
&quot;pin&quot;: &quot;D3&quot;
},
"rgblight": {
"led_count": 16,
"led_map": [7, 6, 5, 4, 3, 2, 1, 0, 8, 9, 10, 11, 12, 13, 14, 15],
"animations": {
"static_light": true,
"breathing": true,
"rainbow_mood": true,
"snake": false
&quot;rgblight&quot;: {
&quot;led_count&quot;: 16,
&quot;led_map&quot;: [7, 6, 5, 4, 3, 2, 1, 0, 8, 9, 10, 11, 12, 13, 14, 15],
&quot;animations&quot;: {
&quot;static_light&quot;: true,
&quot;breathing&quot;: true,
&quot;rainbow_mood&quot;: true,
&quot;snake&quot;: false
},
"layers": {
"enabled": true,
"blink": true
&quot;layers&quot;: {
&quot;enabled&quot;: true,
&quot;blink&quot;: true
},
"default": {
"animation": "rainbow_mood"
&quot;default&quot;: {
&quot;animation&quot;: &quot;rainbow_mood&quot;
},
"split": true,
"split_count": [8, 8]
&quot;split&quot;: true,
&quot;split_count&quot;: [8, 8]
}
</pre>
</div>
</code></pre>
<p>
Need to use another direction, since I use Amoeba pcbs turned 90 degrees.
</p>
<div class="org-src-container">
<pre class="src src-JSON">"diode_direction": "ROW2COL",
</pre>
</div>
<pre><code class="language-JSON">&quot;diode_direction&quot;: &quot;ROW2COL&quot;,
</code></pre>
<p>
Turn on split feature, assign pin for halves communication, choose what to sync.
</p>
<div class="org-src-container">
<pre class="src src-JSON">"split": {
"enabled": true,
"soft_serial_pin": "D2",
"transport": {
"protocol": "serial",
"sync": {
"layer_state": true,
"indicators": true,
"modifiers": true
<pre><code class="language-JSON">&quot;split&quot;: {
&quot;enabled&quot;: true,
&quot;soft_serial_pin&quot;: &quot;D2&quot;,
&quot;transport&quot;: {
&quot;protocol&quot;: &quot;serial&quot;,
&quot;sync&quot;: {
&quot;layer_state&quot;: true,
&quot;indicators&quot;: true,
&quot;modifiers&quot;: true
}
}
},
</pre>
</div>
</code></pre>
<p>
This is the <code>config.h</code> file. Enables keeping handness information in EEPROM of MC. You need to flash each half once with a special commands to write EEPROM data.
<code>qmk flash -bl avrdude-split-right</code> and <code>qmk flash -bl avrdude-split-left</code>
</p>
<div class="org-src-container">
<pre class="src src-C"><span style="font-weight: bold;">#pragma</span> once
<span style="font-weight: bold;">#define</span> <span style="font-weight: bold; font-style: italic;">EE_HANDS</span>
</pre>
</div>
<pre><code class="language-C">#pragma once
#define EE_HANDS
</code></pre>
<p>
This is the <code>keymaps/default/keymap.c</code> file.
</p>
<pre class="example">
#include QMK_KEYBOARD_H
<pre><code class="language-nil">#include QMK_KEYBOARD_H
#define _B 0
#define _L 1
@ -483,12 +464,12 @@ const uint16_t PROGMEM keymaps[][MATRIX_ROWS][MATRIX_COLS] = {
// clang-format on
};
</pre>
</code></pre>
</div>
</div>
</div>
<div id="outline-container-org1cc0ca6" class="outline-3">
<h3 id="org1cc0ca6">Whats next?</h3>
<div id="outline-container-orgc0ed1d9" class="outline-3">
<h3 id="orgc0ed1d9">Whats next?</h3>
</div>
</div>
<footer class="footer"><hr/><small><p>Alex Mikhailov</p><p>Built with: <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a> <a href="https://orgmode.org/">Org Mode</a> <a href="https://picocss.com/">picocss</a></p></small></footer></main></body></html>

View File

4
resources/css/quirks.css Normal file
View File

@ -0,0 +1,4 @@
code[class*="language-"],
pre[class*="language-"] {
font-size: 0.95em !important;
}

View File

@ -1,27 +1,27 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content=""/><meta name="og:description" content=""/><meta name="twitter:description" content=""/><meta name="og:image" content="https://fidonode.me/resources/images/rss.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/rss.org.png"/><meta name="og:title" content="rss"/><meta name="twitter:title" content="rss"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>rss</title></head><body><main class="container"><header class="header"><nav><ul><li><strong>rss</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta author="Alex Mikhailov"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="color-scheme" content="light dark"/><meta http-equiv="content-language" content="en-us"/><meta name="description" content=""/><meta name="og:description" content=""/><meta name="twitter:description" content=""/><meta name="og:image" content="https://fidonode.me/resources/images/rss.org.png"/><meta name="twitter:image" content="https://fidonode.me/resources/images/rss.org.png"/><meta name="og:title" content="rss"/><meta name="twitter:title" content="rss"/><meta name="twitter:card" content="summary_large_image"/><link rel="icon" type="image/x-icon" href="/resources/favicon.ico"/><link rel="stylesheet" type="text/css" href="/resources/css/pico.sand.min.css"/><script defer="true" src="https://umami.dokutsu.xyz/script.js" data-website-id="d52d9af1-0c7d-4531-84c6-0b9c2850011f"></script><title>rss</title></head><body class="line-numbers"><main class="container"><header class="header"><nav><ul><li><strong>rss</strong></li></ul><ul><li><a href="/index.html">About</a></li><li><a href="/posts.html">Blog</a></li><li><a href="/rss.xml">RSS</a></li></ul></nav></header><div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgaa45567">Org blog with</a></li>
<li><a href="#orgcd79849">Org to HTML and back</a></li>
<li><a href="#orgb529095">My keyboard journey</a></li>
<li><a href="#org77c85ab">Org blog with RSS</a></li>
<li><a href="#orgce89d69">Org to HTML and back</a></li>
<li><a href="#orgbde27b6">My keyboard journey</a></li>
</ul>
</div>
</div>
<div id="outline-container-orgaa45567" class="outline-2">
<h2 id="orgaa45567"><a href="file:///home/fido-node/org/home/05 Blog/posts/add_rss_to_blog.html">Org blog with</a></h2>
<div class="outline-text-2" id="text-orgaa45567">
<div id="outline-container-org77c85ab" class="outline-2">
<h2 id="org77c85ab"><a href="file:///home/fido-node/org/home/05 Blog/posts/add_rss_to_blog.html">Org blog with RSS</a></h2>
<div class="outline-text-2" id="text-org77c85ab">
</div>
</div>
<div id="outline-container-orgcd79849" class="outline-2">
<h2 id="orgcd79849"><a href="file:///home/fido-node/org/home/05 Blog/posts/about_blog.html">Org to HTML and back</a></h2>
<div class="outline-text-2" id="text-orgcd79849">
<div id="outline-container-orgce89d69" class="outline-2">
<h2 id="orgce89d69"><a href="file:///home/fido-node/org/home/05 Blog/posts/about_blog.html">Org to HTML and back</a></h2>
<div class="outline-text-2" id="text-orgce89d69">
</div>
</div>
<div id="outline-container-orgb529095" class="outline-2">
<h2 id="orgb529095"><a href="file:///home/fido-node/org/home/05 Blog/posts/keeb.html">My keyboard journey</a></h2>
<div class="outline-text-2" id="text-orgb529095">
<div id="outline-container-orgbde27b6" class="outline-2">
<h2 id="orgbde27b6"><a href="file:///home/fido-node/org/home/05 Blog/posts/keeb.html">My keyboard journey</a></h2>
<div class="outline-text-2" id="text-orgbde27b6">
</div>
</div>
<footer class="footer"><hr/><small><p>Alex Mikhailov</p><p>Built with: <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a> <a href="https://orgmode.org/">Org Mode</a> <a href="https://picocss.com/">picocss</a></p></small></footer></main></body></html>

View File

@ -14,8 +14,8 @@
<link>https://fidonode.me</link>
<description><![CDATA[]]></description>
<language>en</language>
<pubDate>Sun, 23 Jun 2024 18:44:00 +0000</pubDate>
<lastBuildDate>Sun, 23 Jun 2024 18:44:00 +0000</lastBuildDate>
<pubDate>Mon, 24 Jun 2024 19:34:52 +0000</pubDate>
<lastBuildDate>Mon, 24 Jun 2024 19:34:52 +0000</lastBuildDate>
<generator>Emacs 27.1 Org-mode 9.3</generator>
<webMaster>iam@fidonode.me (Alex M)</webMaster>
<image>