blog.jakubholy.net

FIXME

1. Loading failed for the <script> with source “https://www.googletagmanager.com/gtag/js?id=UA-98603541-2”

Usage

Building and serving

Prereq.:

yarn install # Netlify does this automatically

Regular usage:

# Auto-reloading:
bb serve-fast
#lein ring server
#clojure -X:serve # or clojure -X:serve-fast

# Build once:
bb build
#lein run
#clojure -M:build

Testing search (after bb build):

npx -y pagefind --site public --serve

Develop SCSS

Run bb build + run a static http file serving server from ./public/ + run sass -w --stop-on-error --charset themes/lotus/css/blog.scss:public/css/blog.css. And perhaps also sass -w --stop-on-error --charset themes/lotus/css/lotus-highlightjs.min.scss:public/css/lotus-highlightjs.min.css.

Authoring

Preamble {...}

Common preamble keys: :category :date :draft? :layout :tags :title :toc

Special preamble keys (those marked ❌ are carry-over from old platforms and currently do nothing):

• :related - mark a set of related posts with the same keyword so that they will automatically be linked to each other (at the bottom of each post, next to Tags)
• ❌ :extra-css
• ❌ :categories
• ❌ :slug
• :extra-css ["/pagefind/pagefind-ui.css"] - see ./themes/lotus/html/base.html
• :extra-js [{:src "/pagefind/pagefind-ui.js" :async? true}]} - see ./themes/lotus/html/base.
• :asciidoctor {:attributes {"k1" "v1", ...}}

Images

Put them inside ~/content/img/<post name>/ and refer to them from the post via image::<post name>/<img file>[label]. (imagesdir is configured in config.edn to prepend /img for a correct url, and in local VS Code settings to point to the correct absolute dir path in asciidoc preview.)

You can add role="left-floating-img" (or right-...) to set css class of the same name.

Custom macros

See content/config.edn - e.g. abbr

Inter-document links

Use xref:relative/path/to/target.adoc[some label]; adoc attributes relfile* in config.edn adjust for the fact that we turn target.adoc -> target/index.html.

TODO

1. Mark posts with best tag, show them on the "Best" page
2. Optimize images for client screen size; use .webp if supported ... (the sharp plugin can do that, webp is off by default; only for local images though)
   • use https://web.dev/fast/use-lazysizes-to-lazyload-images (is there a Gatsby thing?) <> change img tags
   • see https://web.dev/fast/serve-responsive-images <> change img tags in old posts
3. Check for broken links
4. Link to holyjak.tumblr.com
5. On mobile, quotes have too much wasted space (padding?) on the sides - see e.g. /clojure-vs-java-few-datastructures-over-many-objects/

---

• ? for WP posts, fetch gists ahead of getsby build
• The 's top is hidden behind the on some pages such as 404 => add margin-top: 80px or something
• Old WP posts
  • Merge / remove some categories such as J2EE, DB2
  • FIXME handle [gist https://gist.github.com/3683899 /]\ or gist at the end of the input if preceeded by a new line
• Old WP pages
  • replace indented with fenced code blocks, add lang
  • 👎 /pages/-heroes/: the image should be on right and the text flow next to it, ie 2 columns
• Look & feel:
  • re-enable support for cover images (commented out; need to pass remark its plugins in gatsby-node; perhaps move the code into a local plugin first)
  • desktop: show top pages, tag cloud, ...
• Highlight.js - include only + all langs used, incl. e.g. terraform
  • collapsible code blocks
• AsciDoc - add styling for NOTE etc.

---