Personal website

My personal website, hosted at mpardalos.com. I am trying to implement as many Indie Web technologies as possible. The website is implemented as a static site generated with Hugo and hosted on Netlify . I have applied the modular typography system to the design.

Adding Zettelkasten to site

I would like to publish my Zettelkasten on the website, as a Digital Garden . I am not yet sure about the process that will be used for this, but here are some requirements/constraints

  1. Notes are kept in org-roam .
  2. Only publish specific, tagged notes. A lot of my notes (mostly work-related) need to be private.
  3. I can not host my notes publicly (see above)
  4. I want to keep notes out of git. Adding version control adds too much friction and is not really useful.

There are also some nice-to-haves

  1. Add a graph similar to org-roam-ui
  2. Auto-export on save in org-roam

Because of the above, I think that the solution will probably involve manually exporting my notes into markdown files, and then pushing those to the website.

Here is an elisp script to export the notes into markdown on the website, using ox-hugo

(setq
 org-id-extra-files (org-roam-list-files)
 org-hugo-base-dir "/home/mpardalos/Documents/mpardalos.com"
 org-hugo-section "brain")

(dolist (fil (org-roam--list-files org-roam-directory))
  (with-current-buffer (find-file-noselect fil)
    (if (member "publish" (org-get-tags)) (org-hugo-export-wim-to-md))
    (kill-buffer)))

Allowing for missing files

The script above will only publish files tagged with “publish”, however, that means that the links to non-publish files will be broken. We can replace the hugo shortcode that ox-hugo uses with a different one that works with missing files.

Hugo links are generated by org-hugo-link. We could advise it to replace the relref links like this:

(defvar mpardalos/org-hugo-relref-shortcode "optionalref"
  "The hugo shortcode to use for references. org-hugo uses 'relref' by default")

(defun mpardalos/org-hugo-use-alternative-relref (f &rest args)
  (replace-regexp-in-string
   "\\[\\(.*?\\)\\]({ {< relref \"\\(.*?\\)\" >}})"
   (format "{ {< %s \"\\1\" \"\\2\" >}}" mpardalos/org-hugo-relref-shortcode)
   (apply f args)))

(advice-add 'org-hugo-link :around #'mpardalos/org-hugo-use-alternative-relref)

We then have to implement the new shortcode in hugo.

{ { if .Site.GetPage (.Get 1) }}
<a href="{ { relref . (.Get 1) }}">{ { .Get 0 }}</a>
{ { else }}
<span class="broken-link">{ { .Get 0 }}</span>
{ { end }}

Publishing a single note

The following function exports the current note, tags it as published, and jumps to the magit buffer of the website so you can commit and push the changes.

(defun mpardalos/org-roam-hugo-publish-and-magit ()
  "Publish the current org-roam note and then jump to the magit buffer for your website"
  (interactive)
  (org-roam-tag-add '("publish"))
  (org-hugo-export-wim-to-md)
  (magit-status org-hugo-base-dir))

Adding a graph

Copying from My Org Roam Notes Workflow - Hugo Cisneros. There is a node graph on Notes - Hugo Cisneros.

Add the following into the notes page:

<script defer="" src="https://d3js.org/d3.v7.min.js"></script>
<script defer="" src="/js/draw_graph.js"></script>
<svg id="note-graph" class="rounded-lg">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="#f7f7f7" flood-opacity=".9"></feFlood>
      <feComposite in="SourceGraphic" operator="xor"></feComposite>
    </filter>
  </defs>
  <rect id="base_rect" width="100%" height="100%" class="fill-slate-100 dark:fill-neutral-700"></rect>
</svg>

js/draw_graph.js is a modified version of the script at https://hugocisneros.com/js/graph.js.

See also D3.js

Resources