💾 Archived View for her.esy.fun › posts › 0008-further-blog-changes › index.gmi captured on 2022-04-29 at 11:24:03. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Further Blog Engine change

author: Yann Esposito

email: yann@esposito.host

gpg

date: [2019-11-30 Sat]

keywords: blog

description: About recent changes on my blog system.

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:

convert src.jpg \
        -resize 400x400\> \
        -colorspace Gray \
        -ordered-dither o8x8,8 \
        dst.jpg

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:

#!/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"

Where

#!/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

#!/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

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

#!/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#(<span class="?web-file-size"?>)[^<]*(</span>)#$1'"$sizeinfos"'$2#' $fic
done
rm -rf $tmpdir