Blog

This is the source code for my personal site. It is a static site generated by a Hugo. The theme is heavily inspired by Paper Theme

License

The source code for this site is licensed under version 3 of the the GNU General Public Licence. See the LICENSE file. The content of the posts is licensed under the Creative Commons BY SA 4.0 licence.

Web Fonts

Typekit is used for loading external fonts. Font families currently used on the site:

• "Calluna" serif family with discretionary ligatures enabled is used in headers.

Syntax Highlighting

The blog fully supports user preferred dark/light theme. To support syntax highlighting, two color schemes are generated:

./scripts/generate_syntax.sh

This command will update themes/kpumuk/assets/syntax.css with syntax colors for both light and dark themes.

Hugo Version

Hugo version is installed via asdf in .tool-versions, and enforced on Netlify via netlify.toml. Update in both places!

To install asdf-hugo plugin, run:

asdf plugin add hugo https://github.com/nklmilojevic/asdf-hugo.git

# Get latest Hugo version
asdf latest hugo

Excalidraw Diagrams

1. Save *.excalidraw diagram anywhere in the page bundle.

2. Run scripts/render-excalidraw.sh to generate light and dark diagrams

3. Embed using figure shortcode:

   {{< figure lightsrc="/images/diagram-light.svg" darksrc="/images/diagram-dark.svg" >}}

Twitter Cards

Most of the graphics in the blog should be created in SVG, as it allows scaling for different devices. Unfortunately, Twitter only supports JPG, PNG, WEBP and GIF formats. In order to convert svg to another format, use a CLI conversion tool from Inkscape:

brew install inkscape --cask
inkscape --export-type=png --export-background="#fffef8" --export-dpi=150 memory-layout-light.svg

The image should be referenced in the front matter using full path, or be named with feature, cover, or thumbnail in the image page resources:

images = ["/blog/on-nginx-client-headers-parsing/memory-layout-light.png"]
# or name the file "memory-layout-light-cover.png"

Icons

Icons on the website (including social brands in the footer) are from Material Design Icons (also available on Iconify).

Brand icons in the set are no longer maintained. The missing "X" icon was taken from Simple Icons.