Migrate project to Bootstrap 4

.gitignore

@@ -7,6 +7,7 @@ _pkginfo.txt
 /bin/
 /BundleArtifacts/
 /dist/
+/dist/node_modules
 /archives/*.zim*
 /archives/*wikivoyage*.zim
 /archives/*medicine*.zim

package.json

@@ -182,12 +182,14 @@
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.21.5",
     "@babel/preset-env": "^7.21.5",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "babel-plugin-polyfill-corejs3": "^0.7.1",
+    "bootstrap": "^4.6.2",
     "del-cli": "^5.0.0",
     "electron": "38.3.0",
     "electron-builder": "^26.0.18",
@@ -206,7 +208,6 @@
     "electron-context-menu": "^3.1.1",
     "electron-store": "^8.1.0",
     "electron-updater": "^6.6.8",
-    "express": "^4.21.0",
-    "jquery": "^3.7.1"
+    "express": "^4.21.0"
   }
 }

rollup.config.js

@@ -43,9 +43,12 @@ const config = {
         copy({
             targets: [{
                 src: ['www/js/lib/*dec-wasm.wasm', 'www/js/lib/libzim-asm.js', 'www/js/lib/libzim-wasm.*', 'www/js/lib/darkreader.min.js', 'www/js/lib/webpHeroBundle*',
-                    'node_modules/jquery/dist/jquery.slim.min.*', '!www/js/lib/libzim-wasm.dev*'],
+                    '!www/js/lib/libzim-wasm.dev*'],
                 dest: 'dist/www/js'
             },
+            { src: ['node_modules/bootstrap/dist/css/bootstrap.min.css'], dest: 'dist/www/css' },
+            { src: ['node_modules/@fortawesome/fontawesome-free/css/all.min.css'], dest: 'dist/www/css' },
+            { src: ['node_modules/@fortawesome/fontawesome-free/webfonts/*'], dest: 'dist/www/webfonts' },
             { src: ['archives', 'images', 'index.html', 'manifest.json', 'package.json', 'LICENSE', 'CHANGELOG.md', 'README.md', '*.appxmanifest', '*.pfx', '*.cjs', 'Package.StoreAssociation.xml'], dest: 'dist' }
             ],
             flatten: true
@@ -147,10 +150,9 @@ if (process.env.BUILD === 'production') {
                         .replace(/bundle\.js/, 'bundle.min.js')
                     // Comment out the old app.js link
                         .replace(/(<script type="module.*app.js.*)/, '<!-- $1 -->')
-                    // Redirect jQuery and bootstrap
-                        .replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
-                        // .replace(/(<script\s.*src=").*bootstrap.bundle.min.js/, '$1js/bootstrap.bundle.min.js')
-                        // .replace(/(<link\s.*href=").*bootstrap.min.css/, '$1css/bootstrap.min.css')
+                    // Redirect Bootstrap 4 and Font Awesome to dist locations
+                        .replace(/(<link\s.*href=")\.\.\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css/, '$1css/bootstrap.min.css')
+                        .replace(/(<link\s.*href=")\.\.\/node_modules\/@fortawesome\/fontawesome-free\/css\/all.min.css/, '$1css/all.min.css')
                 }
             ],
             flatten: false
@@ -200,10 +202,9 @@ if (process.env.BUILD === 'production') {
                         .replace(/<!--\s(<script type="text\/javascript.*bundle.js.*)\s-->/, '$1')
                     // Comment out the old app.js link
                         .replace(/(<script type="module.*app.js.*)/, '<!-- $1 -->')
-                    // Redirect jQuery and bootstrap
-                        .replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
-                        // .replace(/(<script\s.*src=").*bootstrap.bundle.min.js/, '$1js/bootstrap.bundle.min.js')
-                        // .replace(/(<link\s.*href=").*bootstrap.min.css/, '$1css/bootstrap.min.css')
+                    // Redirect Bootstrap 4 and Font Awesome to dist locations
+                        .replace(/(<link\s.*href=")\.\.\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css/, '$1css/bootstrap.min.css')
+                        .replace(/(<link\s.*href=")\.\.\/node_modules\/@fortawesome\/fontawesome-free\/css\/all.min.css/, '$1css/all.min.css')
                 }
             ],
             flatten: false

scripts/patch_gitignore.sh

@@ -3,10 +3,13 @@
 # Delete gitignore entry for the dist folder
 sed -i "/^\/dist\/$/d" .gitignore
 
-# Replace the /node_modules*/ entry in gitignore with the following
-sed -i 's|/node_modules\*/|/node_modules/*\
-!/node_modules/jquery\
-/node_modules/jquery/*\
-!/node_modules/jquery/dist\
-/node_modules/jquery/dist/*\
-!/node_modules/jquery/dist/jquery.slim.min.*|' .gitignore
+# Replace the /*node_modules*/ entry in gitignore with the following
+sed -i 's|/\*node_modules\*/|/node_modules/*\
+!/node_modules/bootstrap\
+/node_modules/bootstrap/*\
+!/node_modules/bootstrap/dist\
+/node_modules/bootstrap/dist/*\
+!/node_modules/bootstrap/dist/css\
+!/node_modules/bootstrap/dist/css/*\
+!/node_modules/bootstrap/dist/js\
+!/node_modules/bootstrap/dist/js/*|' .gitignore