straight.el

I’m messing around with using straight.el in addition to use-package because the package ox-attach-publish is not on Melpa or any other package repo currently. If this works well, I will work on refactoring the above dependencies to use straight.el instead of package.el.

This will bootstrap straight.el, I got it straight from their git repo:

(setq package-enable-at-startup nil)

(setq straight-build-dir (expand-file-name "./.packages"))
(setq straight-use-package-by-default t)

(defvar bootstrap-version)
(let ((bootstrap-file
       (expand-file-name "straight/repos/straight.el/bootstrap.el" user-emacs-directory))
      (bootstrap-version 6))
  (unless (file-exists-p bootstrap-file)
    (with-current-buffer
        (url-retrieve-synchronously
         "https://raw.githubusercontent.com/radian-software/straight.el/develop/install.el"
         'silent 'inhibit-cookies)
      (goto-char (point-max))
      (eval-print-last-sexp)))
  (load bootstrap-file nil 'nomessage))

(straight-use-package 'use-package)

Getting And Requiring Packages

Now that we can use-package we can get on with, well, using packages. Let’s start with org and htmlize. Org is… well it’s org! and htmlize is more or less pygments or highlight.js, but for org-publish.

;; Install needed packages
(use-package org)
(use-package htmlize)
(require 'ox-publish)
(require 'ox-html)
(require 'htmlize)

s is a package for handling strings, f is a package for working with files. I’m not actually using either right now, I just am leaving this here (untangled) as a reminder to myself to invest some time into making use of it at a future date.

(use-package s)
(use-package f)
(require 's)
(require 'f)

ox-attach-publish is a tool that converts attached files into valid links for orgmode to then export:

(use-package ox-attach-publish
  :straight '(ox-attach-publish
              :type git
              :host github
              :repo "simoninireland/ox-attach-publish"))
(require 'ox-attach-publish)

We require org-roam to build and parse the org-roam related files I have. Specifically, I’m looking to use this to generate the links and backlinks between those files.

(use-package org-roam)
(require 'org-roam)

This doesn’t work because it creates a new export type, but I’m leaving it here to maybe one day figure out…

(use-package org-tufte
  :straight '(org-tufte
              :type git
              :host github
              :repo "Zilong-Li/org-tufte")
  :ensure nil
  :config
        (require 'org-tufte)
        (setq org-tufte-htmlize-code t
              org-tufte-embed-images t))

Finally, we’ll require everything we need, including some things that we didn’t have to download first:

(require 'find-lisp)

Common Variables

Now to setup some variables for later use:

(defvar build--build-dir (getenv "PWD"))
(defvar build--project-dir (concat build--build-dir "/.."))
(defvar build-publish-dir (concat build--build-dir "/_html"))
(defvar build--site-name "Drollery")
(defvar build--publish-url "https://drollery.org")
(defvar build--date-format "%Y-%m-%d")

Initialize org-roam

We initialize the org-roam project and DB so that we can lean on it later to generate backlinks.

(setq org-roam-directory build--project-dir
      org-roam-db-location (concat build--project-dir "/org-roam.db"))

(org-roam-update-org-id-locations)
;; (require 'org-roam-export)

org-publish settings

There are some settings we need to tweak to get org-publish and ox-publish working the way we want.

This sets the org-timestamps dir to something local to our build dir. It’s probably not needed, but I like to keep this together to reduce on clutter since the default is ~/

(setq org-publish-timestamp-directory (concat build--build-dir "/org-timestamps/")

Now we’ll set some default HTML stuff. First is the `org-html-divs` alist which tells org-export what html element and id to use for the preamble, content, and postamble on each page:

org-html-divs '((preamble "header" "preamble")
                      (content "main" "content")
                      (postamble "footer" "postamble"))

org-html-container-element "section"
org-html-metadata-timestamp-format build--date-format
org-html-checkbox-type 'ascii
org-html-html5-fancy t
org-html-doctype "html5"
org-html-htmlize-output-type 'css
org-html-fontify-natively t)

<head>

Here we turn off inlining CSS and then inject our own CSS into the <head>

(defvar build--html-head
  (concat
   "<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\">"
   "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://gongzhitaao.org/orgcss/org.css\" />"
   "<link rel=\"stylesheet\" href=\"/style.css\" type=\"text/css\" />"
   "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=IM+Fell+English\" />"))

Some macros

(setq org-export-global-macros
      '(("timestamp" . "@@html:<span class=\"timestamp\">[$1]</span>@@")
        ("h" . "@@html:$1@@")))

Sitemap Maker

We’ll use this later to setup our /{dir}/index.html pages, for example to list all blog posts:

(defun build--org-sitemap-date-entry-format (entry _ project)
  "Build sitemap/index for a number of pages. Format ENTRY in org-publish
  PROJECT Sitemap format ENTRY ENTRY STYLE format that includes date."
  (format "{{{h(<span class=\"sitemap-entry\">)}}}{{{timestamp(%s)}}} [[file:%s][%s]]{{{h(</span>)}}}"
          (format-time-string build--date-format (org-publish-find-date entry project))
          entry
          (org-publish-find-title entry project)))

CSS Inliner

This inlines CSS, but I’m not using it right now. Eventually I’d like to pursue optimizations that would allow for in-lining critical CSS and then throwing the rest into the styles.css.

(defun my-org-inline-css-hook (exporter)
  (when (eq exporter 'html)
    (let* ((dir (ignore-errors (file-name-directory (buffer-file-name))))
           (path (concat dir "style.css"))
           (homestyle (or (null dir) (null (file-exists-p path))))
           (final (if homestyle (concat build--build-dir "/style.css") path))) ;; <- set your own style file path
      (setq org-html-head-include-default-style nil)
      (setq org-html-head (concat
                           "<style type=\"text/css\">\n"
                           "<!--/*--><![CDATA[/*><!--*/\n"
                           (with-temp-buffer
                             (insert-file-contents final)
                             (buffer-string))
                           "/*]]>*/-->\n"
                           "</style>\n")))))

(add-hook 'org-export-before-processing-hook 'my-org-inline-css-hook)

Navbar / Header

We’ll use this later on as the preamble for every page:

(defvar build--nav-bar "<nav><a href=\"/index.html\">index</a>
                |
                <a href=\"/about.html\">about</a>
                |
                <a href=\"/blog/index.html\">blog</a>
                |
                <a href=\"/grok/grok.html\">grok</a>")
(defvar build--logo
  (concat "<pre id=\"logo\">"
          (shell-command-to-string (concat "figlet " build--site-name))
          "</pre>"))

(defvar build--header (concat build--logo build--nav-bar))

Footer

This is the footer or postamble:

(defvar build--footer-left "<div id=\"footer-left\">
<p class=\"author\">Author: Ian S. Pringle</p>
<p class=\"date\">Site Updated: %T</p>
<p class=\"creator\">Created with %c</p>
</div>")

(defvar build--footer-mid "<div id=\"footer-mid\">
<img class=\"fleuron\" src=\"/fleuron.svg\"><img/>
</div>")

(defvar build--footer-right "<div id=\"footer-right\">
<p class=\"copyright-notice\">Creative Commons</p>
<a href=\"http://creativecommons.org/licenses/by-nc-sa/4.0/\">BY-NC-SA</a>
</div>")

(defvar build--scripts "<script type='module'>
import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
</script>")

(defvar build--footer (concat build--footer-left build--footer-mid build--footer-right))

“pages” project

(list "pages"
      :base-directory build--project-dir
      :publishing-directory build-publish-dir
      :publishing-function 'org-attach-publish-to-html
      :html-head-extra build--html-head
      :html-preamble build--header
      :html-postamble build--footer
      :html-head-include-default-style nil
      :auto-sitemap t
      :sitemap-filename "pages.org"
      :sitemap-format-entry 'build--org-sitemap-date-entry-format
      :sitemap-sort-files 'alphabetically
      :recursive nil
      :with-author t
      :with-creator t
      :with-drawer t
      :with-toc nil
      :section-numbers nil
      :exclude-tags (list "private" "draft")
      :exclude "life.org\\|dates.org\\|journal.org\\|jha.org\\|weekly.org\\|bible-plan.org")

“grok” project

(list "grok"
      :base-directory (concat build--project-dir "/grok")
      :publishing-directory (concat build-publish-dir "/grok")
      :publishing-function 'org-attach-publish-to-html
      :html-head-extra build--html-head
      :html-preamble build--header
      :html-postamble build--footer
      :html-head-include-default-style nil
      :auto-sitemap t
      :sitemap-filename "index.org"
      :sitemap-format-entry 'build--org-sitemap-date-entry-format
      :sitemap-sort-files 'alphabetically
      :with-author t
      :with-creator t
      :with-drawer t
      :with-toc nil
      :section-numbers nil)

“blog” project

This contains all the files in the blog dir. I eventually would like to figure out how to make this work with a single blog.org file and then each heading or maybe subheading in that file is a “page” on the site.

(list "blog"
      :base-directory (concat build--project-dir "/blog")
      :publishing-directory (concat build-publish-dir "/blog")
      :publishing-function 'org-attach-publish-to-html
      :attachments-project "static"
      :attachments-base-directory "files"
      :html-head-extra build--html-head
      :html-preamble build--header
      :html-postamble build--footer
      :html-head-include-default-style nil
      :auto-sitemap t
      :sitemap-filename "index.org"
      :sitemap-format-entry 'build--org-sitemap-date-entry-format
      :sitemap-sort-files 'anti-chronologically
      :with-author t
      :with-creator t
      :with-drawer t
      :with-toc nil
      :section-numbers nil)

“books” project

This contains all the files in the blog dir. I eventually would like to figure out how to make this work with a single blog.org file and then each heading or maybe subheading in that file is a “page” on the site.

(list "books"
      :base-directory (concat build--project-dir "/books")
      :publishing-directory (concat build-publish-dir "/books")
      :publishing-function 'org-attach-publish-to-html
      :attachments-project "static"
      :attachments-base-directory "files"
      :html-head-extra build--html-head
      :html-preamble build--header
      :html-postamble build--footer
      :html-head-include-default-style nil
      :auto-sitemap t
      :sitemap-filename "index.org"
      :sitemap-format-entry 'build--org-sitemap-date-entry-format
      :sitemap-sort-files 'alphabetically
      :with-author t
      :with-creator t
      :with-drawer t
      :with-toc nil
      :section-numbers nil)

“static” project

This contains all the static content in my org directory.

(list "static"
      :base-directory "~/org/"
      :base-extension "txt\\|jpg\\|jpeg\\|png\\|svg\\|gif\\|js"
      :recursive t
      :publishing-directory build-publish-dir
      :publishing-function 'org-publish-attachment)

“assets” project

This contains all the assets in my org/build directory.

(list "assets"
      :base-directory "~/org/build"
      :base-extension "css\\|js\\|svg"
      :recursive nil
      :publishing-directory build-publish-dir
      :publishing-function 'org-publish-attachment)

“site” project

This is just a “meta” project that contains all the above projects as components:

(list "site"
      :components (list "pages" "grok" "blog" "books" "static" "assets")
      :auto-sitemap t
      :sitemap-filename "sitemap.org"
      :sitemap-format-entry 'build--org-sitemap-date-entry-format
      :sitemap-sort-files 'anti-chronologically
      :html-doctype "html5"
      :html-html5-fancy t)))

TODO Backlinks

This is not working atm

(defun build--collect-backlinks-string (backend)
  "Insert backlinks into the end of the org file before parsing it."
  (when (org-roam-node-at-point)
    (goto-char (point-max))
    ;; Add a new header for the references
    (insert "\n** Xrefs\n")
    (let* ((backlinks (org-roam-backlinks-get (org-roam-node-at-point))))
      (dolist (backlink backlinks)
        (let* ((source-node (org-roam-backlink-source-node backlink))
               (point (org-roam-backlink-point backlink)))
          (insert
           (format "- [[./%s][%s]]\n"
                   (file-name-nondirectory (org-roam-node-file source-node))
                   (org-roam-node-title source-node))))))))

(defun build--add-extra-sections (backend)
  (when (org-roam-node-at-point)
    (save-excursion
      (goto-char (point-max))
      (build--collect-backlinks-string backend)
      (insert "\n** Mentions\n\n")
      (insert "#+BEGIN_EXPORT html
<div id='webmentions'></div>
#+END_EXPORT"))))

(add-hook 'org-export-before-processing-hook 'build--add-extra-sections)