Customizing the Casper theme

Customizing the Casper theme
Photo by Sigmund / Unsplash

So, I think I did this because I wanted to add analytics to my blog and I read somewhere that code injection could potentially be wiped out (which hasn't happened for my css modes yet).  So, I forked the Casper theme GitHub (GH) repo and started making modifications to it.

One thing that I don't particularly like about this workflow though is it requires me to install a bunch of Node dependencies, and I didn't want to really do that ...🙃 So, like almost all things I don't like to do on my normal system, I put it in a container/VM 😁.

So, this is the Dockerfile I created (for a more up to date file just go to my repo (this applies to all of the following files)):

FROM node:lts

COPY . /app
WORKDIR /app
RUN yarn
CMD [ "/usr/local/bin/yarn", "zip" ]
ENTRYPOINT [ "bash" ]

Then I build a few scripts around that file, which will build the theme for me and zip it up to easily upload to my ghost blog. Here is the script which calls the other scripts (for ease of management):

#!/usr/bin/env bash

set -${-//[sc]/}eu${DEBUG+xv}o pipefail

function main(){

  docker/build_docker.sh
  docker/run_build.sh

}

if [[ "${0}" = "${BASH_SOURCE[0]}" ]] ; then
  main "${@}"
fi

Next is the build_docker.sh

#!/usr/bin/env bash

set -${-//[sc]/}eu${DEBUG+xv}o pipefail

function main(){

    if [[ $(docker image ls -q node:lts | wc -l) -eq 0 ]] ; then
      docker pull node:lts
    fi
    docker build --pull --rm -f "Dockerfile" "${@}" -t casper:latest "${PWD}"

}

if [[ "${0}" = "${BASH_SOURCE[0]}" ]] ; then
  main "${@}"
fi

Then the run_build.sh

#!/usr/bin/env bash

set -${-//[sc]/}eu${DEBUG+xv}o pipefail

function run_build(){

    docker container run --rm -it -v "${PWD}/dist/":/app/dist/   casper "${@}"

}

function move_zip(){

    dist_folder="${PWD}/dist"
    new_theme="${dist_folder}/${current_branch:-}$(date -Iseconds)_casper-personal.zip"
    theme_link="${dist_folder}/${current_branch:-}casper-personal.zip"
    mv "${dist_folder}/casper.zip" "${new_theme}"
    ln -sf "${new_theme}" "${theme_link}"
    ls "${theme_link}"

}

function branch_check(){
  if [[ "$(git branch --show-current)" == feat/* ]]; then
    current_branch='dev-'
  fi
}

function main(){

  run_build "${@}"
  branch_check
  move_zip

  echo "checkout https://gscan.ghost.org/ to check your theme"

}

if [[ "${0}" = "${BASH_SOURCE[0]}" ]] ; then
  main "${@}"
fi

Having all these scripts allows me to make one modification and then launch the full_build.sh (one that calls to the other scripts) inside the root of the directory (which the scripts are in the docker directory).  It automatically zips up my modified theme and if I'm on a branch that starts with feat/ it'll even automatically name it with dev- so when I upload it to my blog's themes it's a different name than my main "production" theme.