Website redesign

website/scripts/build.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+set -e
+
+yarn install
+npx tailwindcss -i ./styles/input.css -o ./site/public/styles.css  --config ./tailwind.config.js --postcss ./postcss.config.js
+elm make --output site/static/js/bundle.js --optimize elm/Main.elm
+cd site && zola build
+cd ..
+
+echo "Site is in site/public."

website/scripts/run-elm.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+CMD="elm make --output site/static/js/bundle.js --optimize elm/Main.elm elm/Search.elm"
+$CMD
+
+inotifywait -m -e close_write -r elm/ |
+    while read f; do
+        $CMD
+    done

website/scripts/run-styles.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+mkdir -p ./site/public/files
+mkdir -p ./site/public/webfonts
+
+echo "Copy webfonts…"
+cp node_modules/@fontsource/*/files/* ./site/public/files/
+cp node_modules/@fortawesome/fontawesome-free/webfonts/* ./site/public/webfonts/
+
+echo "Running tailwind…"
+npx tailwindcss -i ./styles/input.css -o ./site/public/styles.css  --config ./tailwind.config.js --postcss ./postcss.config.js "$1"

website/scripts/screenshot.sh

@@ -0,0 +1,74 @@
+#!/usr/bin/env bash
+#
+# Little tool to help with doing screenshots.
+#
+# Run: ./screenshot.sh output.png
+#
+# Then select a window. It will create a screenshot from that window,
+# cut (optionally) some pixels (removes the browser bar) and then
+# resizes it to some maximum width.
+
+set -e
+
+# input file
+file=/tmp/screenshot.png
+
+# final output file
+out=/tmp/screenshot-out.png
+
+# image dimension ratio w:h
+ratio=${RATIO:-"16:9"}
+# cut that much from the top to remove browser bar (my firefox settings)
+top_cut=${TOP_CUT:-85}
+# maximum width of final image
+maxw=${MAXW:-1200}
+# time to wait in secs
+waitsec=${WAIT_SEC:-3}
+
+
+#### Main ############
+work=/tmp/screenshot-work.png
+
+debug() {
+    (1>&2 echo "$@")
+}
+
+scrot -s -c -d $waitsec "$file" 1>&2
+cp "$file" "$work"
+
+
+read -r w h < <(identify -verbose $file |\
+                    grep "Geometry:" | \
+                    cut -d':' -f2 | \
+                    cut -d'+' -f1 | \
+                    tr 'x' ' ' | xargs)
+debug "Original size: ${w}x${h}"
+
+read nw nh < <(echo $ratio | tr ':' ' ')
+
+# remove browser bar from top
+((h=$h - $top_cut))
+
+# create height to match ratio
+((newH=($w * $nh) / $nw))
+
+if [ $newH -gt $h ]; then
+    debug "Cropping to $w x $h"
+    debug "Cannot crop to ratio without reducing width"
+    convert -crop ${w}x${h}+0+${top_cut} "$work" "$out"
+else
+    debug "Cropping to $w x $h"
+    convert -crop ${w}x${newH}+0+${top_cut} "$work" "$out"
+fi
+cp "$out" "$work"
+
+debug "Resize to max width $maxw"
+convert -resize $maxw "$work" "$out"
+rm -f "$work" "$file"
+
+if [ -z "$1" ]; then
+    echo "$out"
+else
+    mv "$out" "$1"
+    echo "$1"
+fi

website/scripts/screenshot2.sh

@@ -0,0 +1,40 @@
+#!/usr/bin/env bash
+#
+# Uses the `screenshot.sh` script to create one screenshot per theme.
+#
+# First sets light theme and takes a screenshot, then sets dark theme
+# and calls screenshot.sh again
+#
+# Might need to fiddle with the xdotool command
+
+
+docspell_url=http://localhost:7880
+docspell_user=demo
+docspell_pass=test
+
+screenshot="$(dirname $0)/screenshot.sh"
+
+out_base="$1"
+
+work_dir=$(mktemp -dt screenshot2-script.XXXXXX)
+export HOME=$work_dir
+export RATIO="16:9"
+export WAIT_SEC=4
+#export TOP_CUT=400
+
+dsc write-default-config
+sed -i "s,http://localhost:7880,$docspell_url,g" $HOME/.config/dsc/config.toml
+
+set_theme() {
+    dsc login -u $docspell_user --password $docspell_pass 2>&1 > /dev/null
+    local token=$(cat $HOME/.config/dsc/dsc-token.json | jq -r '.token')
+    data=$(curl -sSL -H "X-Docspell-Auth: $token" $docspell_url/api/v1/sec/clientSettings/webClient | jq ".uiTheme=\"$1\"")
+
+    curl -sSL -H "X-Docspell-Auth: $token" -XPUT --data "$data" $docspell_url/api/v1/sec/clientSettings/user/webClient
+    xdotool search --name "Mozilla Firefox" | xargs xdotool windowactivate && xdotool key F5
+}
+
+set_theme "Light"
+$screenshot "${out_base}.png"
+set_theme "dark"
+$screenshot "${out_base}_dark.png"