2019-11-30 14:04:40 +00:00
|
|
|
#+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.
|
|
|
|
|
2019-12-03 10:00:00 +00:00
|
|
|
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:
|
2019-11-30 14:04:40 +00:00
|
|
|
|
|
|
|
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
|
2019-12-03 10:00:00 +00:00
|
|
|
convert src.jpg \
|
|
|
|
-resize 400x400\> \
|
|
|
|
-colorspace Gray \
|
|
|
|
-ordered-dither o8x8,8 \
|
|
|
|
dst.jpg
|
2019-11-30 14:04:40 +00:00
|
|
|
#+end_src
|
|
|
|
|
2019-12-03 10:00:00 +00:00
|
|
|
Somehow, I made 4 themes.
|
|
|
|
This is too much, but, I don't know I guess I felt inspired.
|
2019-11-30 14:04:40 +00:00
|
|
|
I'm particularly proud of the matrix theme (sci dark, try it by selecting
|
2019-12-03 10:00:00 +00:00
|
|
|
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.
|
2019-11-30 14:04:40 +00:00
|
|
|
|
2019-12-03 10:00:00 +00:00
|
|
|
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.
|
2019-11-30 14:04:40 +00:00
|
|
|
|
|
|
|
I'll certainly be able to optimize a lot more the size of my HTML files too.
|
2019-12-03 10:00:00 +00:00
|
|
|
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
|