1. Introduction
| This tutorial in under construction! |
In this tutorial, we’ll upgrade the Finisher.Tech website from version v0.9.2 to v1.0.0. We’ll be exercising the following practices and technologies while doing this:
-
Bash and some command line tools like:
2. Software
2.1. Requirements
-
Bash installed. [bash-version]
-
Git installed. [git-version]
-
GitHub CLI installed. [gh-version]
-
Node.js installed. [node-version]
-
Yarn installed. [yarn-version]
-
rsync installed. [rsync-version]
-
sed installed. [sed-version]
-
Pandoc installed. [pandoc-version]
Optional:
-
An IDE (like IntelliJ IDEA or Visual Studio Code).
2.2. Versions
My environment and software versions used in this tutorial:
$ sw_vers ProductName: Mac OS X ProductVersion: 10.15.7 BuildVersion: 19H2
$ echo $BASH_VERSION 5.1.4(1)-release
$ git --version git version 2.30.0
$ gh --version | head -1 gh version 1.4.0 (2020-12-15)
$ node -v v12.18.3
$ yarn -v 1.22.4
$ sed --version | head -1 gsed (GNU sed) 4.8
$ rsync --version | head -1 rsync version 2.6.9 protocol version 29
$ pandoc --version | head -1 pandoc 2.11.3.2
3. Our starting point
3.1. Downloading this tutorial
$ mkdir -p ~/tmp
$ cd ~/tmp && d=finishertech-website-tutorial; rm -rf $d
$ gh repo clone paulojeronimo/$d && cd $d
3.2. Downloading and testing Finisher.Tech website 0.9.2
The version v0.9.2 of the Finisher.Tech website was created by following
this tutorial.
You can also
watch
the videos in this playlist.
$ cd ~/tmp/$d && d=finishertech-website; rm -rf $d
$ gh repo clone finishertech/finishertech.github.io $d && cd $d
$ git checkout v0.9.2-src
$ yarn install $ yarn start
At this point we navigate through the website and its code and, after that, we stop its execution started above with a Ctrl+C.
4. Generating and reading the file events.json from an independent GitHub repository
4.1. Creating the repository and reading the file from it
$ cd ..; rm -rf finishertech-website-data && mkdir $_ && cd $_ && d=$_
$ yarn init -y
$ yarn add typescript @types/node ts-node $ `yarn bin`/tsc --init
$ yarn add jest @types/jest ts-jest $ `yarn bin`/jest --init
| ✔ Would you like to use Jest when running "test" script in "package.json"? … yes |
$ echo node_modules > .gitignore $ git init; git add .
$ yarn add jest-cucumber --dev
$ git apply ../patches/$d/jest.config.ts.diff
$ (cd ../initial/$d; rsync -R cucumber/events-scenarios.feature ../../$d) $ (cd ../initial/$d; rsync -R cucumber/events-scenarios.steps.ts ../../$d)
$ yarn test
$ git add .
$ yarn add fs
$ git apply ../patches/$d/cucumber/events-scenarios.steps.ts.diff
$ cp ../finishertech-website/src/events.json .
$ yarn test
$ git add . $ git commit -m 'Feature "Events Management", Scenario "Creating events from an existing file" passed'
4.2. Creating events.yaml and generating events.json from it
4.2.1. Creating events.yaml from events.json
$ yarn add js-yaml --dev
$ echo tmp >> .gitignore $ mkdir tmp $ `yarn bin`/js-yaml events.json > tmp/events.yaml
4.2.2. Converting body element to AsciiDoc format
$ cd tmp
$ sed -n '6,60p' events.yaml > 1.html
$ pandoc --wrap=none -f html -t asciidoc 1.html > 1.adoc
$ sed -n '66,230p' events.yaml > 2.html
$ pandoc --wrap=none -f html -t asciidoc 2.html > 2.adoc
$ for f in {1,2}.adoc; do \
sed -i 's/\([^ ]\) \([,\?\.]\)/\1\2/g' $f; \
sed 's/^/ /g' $f > $f.indented ; \
done
$ sed -i -e '66,230d' -e '6,60d' events.yaml
$ sed -i -e '10r 2.adoc.indented' -e '5r 1.adoc.indented' events.yaml
$ sed -i -e 's/^ $//g' events.yaml
$ cp events.yaml ..
$ cd ..
|
5. Adicional resources
- React and the first version of the Finisher.Tech website tutorial:
- BDD, Cucumber, Jest Cucumber: