chore: ✈ move static resources to src/static and cleanup build scripts & ✨ Resolve some issues ✨

.gitignore

@@ -2,3 +2,4 @@
 **/node_modules/*
 **/certs/*
 **/.DS_Store
+dist/

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as build
+FROM node:20-alpine AS build
 
 ARG REACT_APP_SERVICES_HOST=/services/m
 

README.md

@@ -70,19 +70,19 @@ Compile from source:
 
 ```shell
 # Clone the repository
-> git clone https://github.com/ckabalan/visualsubnetcalc
+git clone https://github.com/ckabalan/visualsubnetcalc
 # Change to the repository directory
-> cd visualsubnetcalc
+cd visualsubnetcalc
 # Use recommended NVM version
-> nvm use
+nvm use
 # Change to the sources directory
-> cd src
+cd src
 # Install Bootstrap
-> npm install
+npm install
 # Compile Bootstrap (Also install sass command line globally)
-> npm run build
+npm run build
 # Run the local webserver
-> npm start
+npm start
 ```
 
 The full application should then be available within `./dist/`, open `./dist/index.html` in a browser.
@@ -94,15 +94,15 @@ The full application should then be available within `./dist/`, open `./dist/ind
 ```shell
 
 #Install mkcert
-> brew install mkcert
+brew install mkcert
 # generate CA Certs to be trusted by local browsers
-> mkcert install
+mkcert install
 # generate certs for local development
-> cd visualsubnetcalc/src
+cd visualsubnetcalc/src
 # generate certs for local development
-> npm run setup:certs
+npm run setup:certs
 # run the local webserver with https
-> npm run local-secure-start
+npm run local-secure-start
 ```
 
 ## Running in a container

src/package.json

@@ -2,11 +2,15 @@
   "dependencies": {
     "bootstrap": "^5.3.6",
     "http-server": "^14.1.1",
+    "jquery": "^3.7.1",
+    "jquery-validation": "^1.21.0",
     "lz-string": "^1.5.0"
   },
   "scripts": {
-    "postinstall": "npm install -g sass@1.77.6",
-    "build": "sass --style compressed scss/custom.scss:../dist/css/bootstrap.min.css && cp node_modules/lz-string/libs/lz-string.min.js ../dist/js/lz-string.min.js",
+    "process-sass": "npx sass --style compressed scss/custom.scss:../dist/css/bootstrap.min.css",
+    "copy-js-deps": "mkdir -p ../dist/js && cp node_modules/lz-string/libs/lz-string.min.js ../dist/js/lz-string.min.js && cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js ../dist/js/bootstrap.bundle.min.js && cp node_modules/jquery/dist/jquery.min.js ../dist/js/jquery.min.js && cp node_modules/jquery-validation/dist/jquery.validate.min.js ../dist/js/jquery.validate.min.js && cp node_modules/jquery-validation/dist/additional-methods.min.js ../dist/js/additional-methods.min.js",
+    "copy-static": "cp -r static/* ../dist/",
+    "build": "npm run process-sass && npm run copy-js-deps && npm run copy-static",
     "test": "npx playwright test",
     "setup:certs": "mkdir -p certs; mkcert -cert-file certs/cert.pem -key-file certs/cert.key localhost 127.0.0.1",
     "start": "node node_modules/http-server/bin/http-server ../dist -c-1",

dist/404.html → src/static/404.html

@@ -33,18 +33,10 @@ <h1>Visual Subnet Calculator | 404 - Page Not Found</h1>
     <p class="text-muted">
         If you believe this is an error, please <a href="https://github.com/ckabalan/visualsubnetcalc/issues" target="_blank" rel="noopener noreferrer">open an issue</a> on GitHub.
     </p>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
-            crossorigin="anonymous"></script>
-    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
-            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
-            crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.1/dist/jquery.validate.min.js"
-            integrity="sha256-0xVRcEF27BnewkTwGDpseENfeitZEOsQAVSlDc7PgG0="
-            crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.1/dist/additional-methods.min.js"
-            integrity="sha384-Wxa7enUK34eRCZgjQIh81NeuzGHX2YaEkcLPCBIvASsdqlXBtAvVUiM7Tb56UvtC"
-            crossorigin="anonymous"></script>
+    <script src="js/bootstrap.bundle.min.js"></script>
+    <script src="js/jquery.min.js"></script>
+    <script src="js/jquery.validate.min.js"></script>
+    <script src="js/additional-methods.min.js"></script>
     <script src="js/lz-string.min.js"></script>
     <script src="js/main.js"></script>
 </div>

dist/icon/site.webmanifest → src/static/icon/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "Visual Subnet Calc",
     "icons": [
         {
-            "src": "icon/android-chrome-192x192.png",
+            "src": "android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "icon/android-chrome-512x512.png",
+            "src": "android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
@@ -17,3 +17,4 @@
     "background_color": "#ffffff",
     "display": "standalone"
 }
+