feat: Refactor everything into better maintainability

README.md

@@ -30,9 +30,14 @@ nix develop ./nix#default
 where all requirements are installed to start working on your first
 presentation.
 
-## Examples
+## Usage
+
+1. `just init` -> Init the `build` folder with the pinned `reveal.js` source and
+   inject some changed files (styles, fonts, etc.) and install dependencies inside the build folder.
+2. `just watch` -> Watch the files in [`src`](src/) and synchronize changes to the `build` folder.
+3. `just install` -> Install all dependencies inside the `build` folder
+4. `just present`
 
-- `just install` -> Install all dependencies.
 - `just present` -> Presentation in Browser.
 - `just package` -> PDF & HTML and standalone `zip` file to distribute.
 

justfile

@@ -10,30 +10,65 @@ nix-develop:
 init:
     #!/usr/bin/env bash
     set -eu
-    rsync -avv "{{root_dir}}/external/reveal.js/" "{{root_dir}}/build/"
-    rsync -avv "{{root_dir}}/src/mixing/" "{{root_dir}}/build/"
-    ln -fs "{{root_dir}}/src/export" "{{root_dir}}/build/export"
-    ln -fs "{{root_dir}}/src/files" "{{root_dir}}/build/files"
-    ln -fs "{{root_dir}}/src/index.html" "{{root_dir}}/build/index.html"
+    cd "{{root_dir}}"
+    rm -rf "build"
+    mkdir -p "build"
 
+    echo "Init pinned reveal.js folder to 'build'..."
+    rsync -avv "external/reveal.js/" "build/"
 
-# Install all stuff.
-install:
-    npm install
+    just sync
 
-# Build all stuff.
-# When you changes styles and
-# themes you need to run this.
-build:
-    npm run build
+    echo "Install node packages in 'build' ..."
+    (cd build && yarn install)
+
+[private]
+sync:
+    #!/usr/bin/env bash
+    set -eu
+    cd "{{root_dir}}"
+
+    sync() {
+      rsync --checksum -avv "$@"
+    }
+
+    echo "Add additional 'npm' scripts."
+    jq -s '.[0] *= .[1] | .[0]' external/reveal.js/package.json src/package.json > build/package.json
+
+    # Cannot use symlink because `serve` does not like it.
+    echo "Add additional files (styles, themes, etc.) ..."
+    sync src/export/ build/export/
+    sync src/files/ build/files/
+    sync src/mixing/ build/
+    sync src/index.html build/index.html
+
+watch:
+    #!/usr/bin/env bash
+    set -eu
+    cd "{{root_dir}}"
+
+    EVENTS="CREATE,DELETE,MODIFY,MOVED_FROM,MOVED_TO"
+    watch() {
+      inotifywait -e "$EVENTS" -m -r --format '%:e %f' "$1"
+    }
+
+    watch src | (
+        while true ; do
+          read -t 1 LINE &&
+            just sync
+        done
+    )
+
+clean:
+    cd "{{root_dir}}" && rm -rf build && mkdir -p build && \
 
 # Present the presentation.
 present:
-    npm run present
+    cd "{{root_dir}}/build" && npm run present
 
 # Package the presentation.
 package:
-    npm run package
+    cd "{{root_dir}}/build" && npm run package
 
 # Bake the logo into the style-sheets.
 bake-logo mime="svg":

nix/flake.nix

@@ -50,7 +50,8 @@
           parallel
           direnv
           nodePackages_latest.npm
-          lsyncd
+          nodePackages_latest.yarn
+          inotify-tools
         ];
       in
         with pkgs; {

src/index.html

@@ -120,7 +120,6 @@ <h2>Code</h2>
             <span class="fragment" data-fragment-index="1">This is now important</span>
 
             Link <a href="#/3/0/0">1</a>
-
             <span class="fragment" data-fragment-index="2">This is now important too.</span>
           </script>
         </section>

package.json → src/package.json

@@ -1,43 +1,16 @@
 {
-  "name": "reveal.js",
-  "version": "4.6.1",
-  "description": "The HTML Presentation Framework",
-  "homepage": "https://revealjs.com",
-  "subdomain": "revealjs",
-  "main": "dist/reveal.js",
-  "module": "dist/reveal.esm.js",
-  "license": "MIT",
   "scripts": {
-    "test": "gulp test",
-    "start": "gulp serve",
-    "build": "gulp build",
-    "present": "browser-sync start --index index.html --server --files . --ignore '.git/**'",
+    "present": "concurrently --kill-others --success first \"npm run start\" \"npm run present-browser-sync\"",
+    "present-browser-sync": "browser-sync start --index index.html --server --files . --ignore '.git/**' --port 3000",
     "package": "npm-run-all -s build pdf package-zip",
     "publish": "npm-run-all -s publish::clean publish::write",
     "package-zip": "gulp --export-presentation=index.html package",
-    "pdf::export": "delay 7 && docker run --rm -t --net=host -v \"$(pwd):/slides\" astefanutti/decktape -p 400 reveal \"http://localhost:3000/?fragments=true&decktape\" presentation.pdf",
-    "pdf::server": "browser-sync start --index index.html --server --port 3000",
+    "pdf::export": "delay 7 && docker run --rm -t --net=host -v \"$(pwd):/slides\" astefanutti/decktape -p 400 reveal \"http://localhost:3030/?fragments=true&decktape\" presentation.pdf",
+    "pdf::server": "browser-sync start --index index.html --server --port 3030",
     "pdf": "concurrently --kill-others --success first \"npm run pdf::export\" \"npm run pdf::server\"",
     "publish::clean": "del-cli --force \"./publish/presentation\"",
     "publish::write": "decompress --out-dir \"./publish/presentation\" presentation.zip"
   },
-  "author": {
-    "name": "Hakim El Hattab",
-    "email": "hakim.elhattab@gmail.com",
-    "web": "https://hakim.se"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/hakimel/reveal.js.git"
-  },
-  "engines": {
-    "node": ">=10.0.0"
-  },
-  "keywords": [
-    "reveal",
-    "slides",
-    "presentation"
-  ],
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/eslint-parser": "^7.14.3",
@@ -76,48 +49,5 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.39.2",
     "yargs": "^15.1.0"
-  },
-  "overrides": {
-    "chokidar": "3.5.3",
-    "glob-parent": "6.0.2"
-  },
-  "browserslist": "> 2%, not dead",
-  "eslintConfig": {
-    "env": {
-      "browser": true,
-      "es6": true
-    },
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-      "sourceType": "module",
-      "allowImportExportEverywhere": true,
-      "requireConfigFile": false
-    },
-    "globals": {
-      "module": false,
-      "console": false,
-      "unescape": false,
-      "define": false,
-      "exports": false
-    },
-    "rules": {
-      "curly": 0,
-      "eqeqeq": 2,
-      "wrap-iife": [
-        2,
-        "any"
-      ],
-      "no-use-before-define": [
-        2,
-        {
-          "functions": false
-        }
-      ],
-      "new-cap": 2,
-      "no-caller": 2,
-      "dot-notation": 0,
-      "no-eq-null": 2,
-      "no-unused-expressions": 0
-    }
   }
 }

tools/bake-logo.sh

@@ -21,10 +21,10 @@ function clean_up() {
   [ -f "$temp" ] && rm -rf "$temp"
 }
 
-repl=$(base64 -w 0 <"$ROOT_DIR/css/theme/source/files/company-logo.$type" | sed "s/\+/\\\+/g")
+repl=$(base64 -w 0 <"$ROOT_DIR/src/css/theme/source/files/company-logo.$type" | sed "s/\+/\\\+/g")
 temp=$(mktemp)
 
 # shellcheck disable=SC2028
 echo "Baking logo into 'company.scss'..."
 printf 's@background-image(.*);base64,.*"@background-image: url("data:image/%s;base64,%s"@' "$mime" "$repl" >"$temp"
-sed -i -E -f "$temp" "$ROOT_DIR/css/theme/source/company.scss"
+sed -i -E -f "$temp" "$ROOT_DIR/src/css/theme/source/company.scss"