her.esy.fun/src/posts/0008-further-blog-changes/index.org

#+TITLE: Further Blog Engine change
#+AUTHOR: Yann Esposito
#+EMAIL: yann@esposito.host
#+DATE: [2019-11-30 Sat]
#+KEYWORDS: blog
#+DESCRIPTION: Recent changes on my blog system
#+OPTIONS: auto-id:t toc:nil

When I started this new blog, I wanted to find something minimal to be able
to minimize my natural tendency to hack my blogging system.

Clearly it was a failure :), =org-publish= ecosystem is not easy enough to
handle all my needs, so I had to hack a few external scripts.
In particular regarding RSS.

Here are a few recent changes I did in my system:

1. I changed how I reduce the size of the images.
2. I do not merge all CSS styles in the same CSS file, I splitted 4
   different CSS each supporting light/dark theme.
   This way the size of each page is reduced.
3. I added an HTML minimize step. I could optimize this a lot I think.
4. I added a script that show the size of each webpage (HTML + CSS +
   Images). There is an example in all the footers of the pages of my website.

So to compress the images I use:

#+begin_src bash
convert src.jpg \
        -resize 400x400\> \
        -colorspace Gray \
        -ordered-dither o8x8,8 \
        dst.jpg
#+end_src

Somehow, I made 4 themes.
This is too much, but, I don't know I guess I felt inspired.
I'm particularly proud of the matrix theme (sci dark, try it by selecting
sci and then choose dark theme).
It takes care of making the images green, and inspired by this one I also
added this trick to all other themes.

To note, one of the theme is a minimal one.
It is used to minimize the size of the CSS, while I'm writting those lines,
the css size is 728 bytes.

I'll certainly be able to optimize a lot more the size of my HTML files too.
But I haven't invested much time in it yet. I just use the =minify= command
line tool for them.

So right now to build my website here is the script I use:

#+NAME: build.sh
#+begin_src bash
#!/usr/bin/env bash

# build the files via emacs
emacs \
  --load project.el \
  --eval "(progn (org-publish \"blog\" t) (evil-quit))"

echo "Optim HTML size"
./optim-html.sh
echo "Gen themes clones"
./dup-for-themes.sh
echo "Update file size"
./update-file-size.sh
echo "Building RSS"
./mkrss.sh
echo "RSS Built"
#+end_src

Where

#+NAME: optim-html.sh
#+begin_src bash
#!/usr/bin/env nix-shell
#!nix-shell -i zsh
#!nix-shell -I nixpkgs="https://github.com/NixOS/nixpkgs/archive/19.09.tar.gz"

webdir="_site"

debug () {
 print -- $* >/dev/null
}

type -a filelist
setopt extendedglob
if (($#>0)); then
    filelist=( $* )
else
    filelist=( $webdir/**/*.html(.) )
fi

tmp=$(mktemp)

for fic in $filelist; do
    if echo $fic|egrep -- '-(mk|min|sci|modern).html$'>/dev/null; then
        continue
    fi
    print -n -- "$fic "
    cp $fic $tmp; minify --mime text/html $tmp > $fic
    print "[OK]"
done
#+end_src

#+name: dup-for-themes.sh
#+begin_src bash
#!/usr/bin/env nix-shell
#!nix-shell -i zsh
#!nix-shell -I nixpkgs="https://github.com/NixOS/nixpkgs/archive/19.09.tar.gz"

webdir="_site"

debug () {
 print -- $* >/dev/null
}

if (($#>0)); then
    filelist=( $* )
else
    filelist=( $webdir/**/*.html(.) )
fi

trans(){
   local suff=$1;
   local fic=$2;
   cat $fic | perl -p -e 's#href="?/css/mk.css"?#href=/css/'$suff'.css#;s#(/?(index|archive|slides|about-me)).html#$1-'$suff'.html#g;s#(posts/[a-zA-Z0-9_-]*).html#$1-'$suff'.html#g;s#-'$suff'.html>mk#.html>mk#g' > ${fic:r}-${suff}.html
}

for fic in $filelist; do
    if echo $fic|egrep -- '-(mk|min|sci|modern).html$'>/dev/null; then
        continue
    fi
    print -n -- "$fic "
    for suff in sci min modern; do
        trans $suff $fic
    done
    print "[OK]"
done
#+end_src

and the script to write the size of the file inside the file:

#+name: update-file-size.sh
#+begin_src bash
#!/usr/bin/env nix-shell
#!nix-shell -i zsh
#!nix-shell -I nixpkgs="https://github.com/NixOS/nixpkgs/archive/19.09.tar.gz"

webdir="_site"

sizeof() {
    stat --format="%s" "$*"
}

debug () {
 print -- $* >/dev/null
}

toh () {
    numfmt --to=iec $*
}

tmpdir=$(mktemp -d)

type -a filelist
if (($#>0)); then
    filelist=( $* )
else
    filelist=( $webdir/**/*.html(.) )
fi

for fic in $filelist; do
    print -n -- "$fic   "

    htmlsize=$(sizeof $fic)
    debug HTML: $htmlsize

    xfic=$tmpdir/$fic
    mkdir -p $(dirname $xfic)
    hxclean $fic > $xfic

    images=( $( < $xfic hxselect -i -c -s '\n' 'img::attr(src)' | sed 's/^\.\.\///' ) )
    imgsize=0
    nbimg=0
    for i in $images; do
        ((nbimg++))
        isize=$( sizeof ${fic:h}/$i )
        debug $i '=>' $isize
        (( imgsize += isize ))
    done
    debug IMG: $imgsize

    css=( $( < $xfic hxselect -i -c -s '\n' 'link[rel=stylesheet]::attr(href)'))
    csssize=0
    for i in $css; do
        isize=$( sizeof $webdir/$i )
        debug $i '=>' $isize
        (( csssize += isize ))
    done
    debug CSS: $csssize
    total=$(( htmlsize + imgsize + csssize ))
    sizeinfos=$(print -- "Size: $(toh $total) (HTML: $(toh $htmlsize), CSS: $(toh $csssize), IMG: $(toh $imgsize))")
    print -- $sizeinfos
    perl -pi -e 's#(<div class="?web-file-size"?>)[^<]*(</div>)#$1'"$sizeinfos"'$2#' $fic
done
rm -rf $tmpdir
#+end_src