fix: use webpack for npm dependencies

Author: ReenigneArcher

.github/workflows/build.yml

@@ -31,17 +31,8 @@ jobs:
 
       - name: Build website
         run: |
-          # install npm dependencies
-          npm install
-
-          # empty contents of gh-pages
-          rm -f -r ./gh-pages/*
-
-          # move contents of dist to gh-pages
-          mv -f ./dist/* ./gh-pages/
-
-          # move node_modules directory to gh-pages
-          mv -f ./node_modules/ ./gh-pages/
+          sudo chmod +x ./scripts/build.sh
+          ./scripts/build.sh
 
       - name: Upload Artifacts
         if: ${{ github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' }}

.gitignore

@@ -1,10 +1,8 @@
 # ignore JetBrains project
 .idea/
 
+dist/
+
 # ignore node modules
 node_modules/
 package-lock.json
-
-# ignore duplicated dist folder for localization
-dist/en
-dist/es-ES

package.json

@@ -1,7 +1,17 @@
 {
+  "scripts": {
+    "build": "webpack"
+  },
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.6.0",
     "bootstrap": "5.3.3",
     "jquery": "3.7.1"
+  },
+  "devDependencies": {
+    "css-loader": "6.10.0",
+    "mini-css-extract-plugin": "2.8.1",
+    "script-loader": "0.7.2",
+    "webpack": "5.90.3",
+    "webpack-cli": "5.1.4"
   }
 }

scripts/build.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+# if ./dist exists, remove it entirely
+if [ -d "./dist" ]; then
+  rm -rf ./dist
+fi
+
+# if ./gh-pages exists, remove the contents
+if [ -d "./gh-pages" ]; then
+  rm -rf ./gh-pages/*
+fi
+
+# copy ./src directory to ./dist
+cp -r ./src ./dist
+
+# install npm dependencies
+npm install
+npm run build
+
+# copy ./dist directory to ./gh-pages
+if [ -d "./gh-pages" ]; then
+  mv -f ./dist/* ./gh-pages/
+fi