Merge pull request #4 from LunarEclipse363/main

Small fixes (updated bootstrap, fixed mismatched HTML tags, etc)

Author: MarinX

.gitignore

@@ -11,9 +11,11 @@
 # Output of the go coverage tool, specifically when used with LiteIDE
 *.out
 
-# Dependency directories (remove the comment below to include it)
-# vendor/
+# Dependency directories
+/vendor/
+
+# (P)NPM
+/node_modules/
 
 # Output
-static/age.wasm
-static/wasm_exec.js
+/dist/

Makefile

@@ -1,15 +1,79 @@
-.PHOHY: import build deploy-gcp
+.PHOHY: import build-wasm npm-install build clean zip deploy-gcp help
+
+go-sources = go.mod go.sum *.go
+web-sources = package.json pnpm-lock.yaml vite.config.js src/*
 
 GOROOT:=$(shell go env GOROOT)
 
-import:
-	cp "$(GOROOT)/misc/wasm/wasm_exec.js" static/
+# The below code utilizes make's file change tracking
+# (i.e. not rebuilding targets unnecessarily)
+# while still allowing human-readable target names.
+# 
+# First we set a variable named foo that holds
+# all the actual output filenames.
+# Then we use $(foo) anywhere we need
+# to reference that target as a prerequisite.
+# Finally we create a target foo which
+# has $(foo) as a prerequisite.
+
+# make import: copy the required wasm_exec.js file from the Go toolchain (output in vendor/)
+import = vendor/wasm_exec.js
+
+$(import): $(GOROOT)/misc/wasm/wasm_exec.js
+	mkdir -p vendor
+	cp "$(GOROOT)/misc/wasm/wasm_exec.js" vendor/
+
+import: $(import)
+
+# make build-wasm: build the WebAssembly module (output in vendor/)
+build-wasm = vendor/age.wasm
+
+$(build-wasm): $(go-sources)
+	mkdir -p vendor
+	GOOS=js GOARCH=wasm go build -mod=mod -o vendor/age.wasm
+
+build-wasm: $(build-wasm)
+
+# make npm-install: installs tools and dependencies from npm (output in node_modules/)
+#
+# This uses an empty target file to track when it needs to be re-ran
+npm-install = node_modules/.make-sentinel
+
+$(npm-install): package.json pnpm-lock.yaml
+	pnpm install
+	touch $(npm-install)
+
+npm-install: $(npm-install)
+
+# make build: build the complete static website (output in dist/)
+# 
+# If dist/ doesn't exist $(build) will evaluate to 'dist/*'
+# but that's fine here because it means the target will run.
+build = dist/*
+
+$(build): $(import) $(build-wasm) $(npm-install) $(web-sources)
+	pnpm run build
+
+build: $(build)
+
+# make clean: delete all existing build files (deletes vendor/* dist/*)
+clean:
+	rm -rf vendor/ dist/
 
-build:
-	GOOS=js GOARCH=wasm go build -o static/age.wasm
+# make zip: create a zip archive with the output static website (outputs agewasm.zip)
+zip = agewasm.zip
+$(zip): $(build)
+	cd dist && zip -r ../$(zip) .
+zip: $(zip)
 
-zip:
-	cd static && zip -r ../agewasm.zip .
+# make deploy-gcp: deploys to google cloud
+deploy-gcp: build
+	gcloud app deploy
 
-deploy-gcp:
-	gcloud app deploy
+# make help: print this help page
+help:
+	@echo "agewasm Makefile"
+	@echo "Usage: make <TARGET>"
+	@echo ""
+	@echo "Available targets:"
+	@grep -P '^# make [[:alnum:]_-]+:' Makefile | sed -e 's/^# /    /'

README.md

@@ -6,41 +6,34 @@ View online [here](https://age-wasm.ey.r.appspot.com/)
 
 ## Building
 
-You will need `Go` and `wasm_exec.js` (which is included with Go)
+You will need:
+- [Go](https://go.dev/) and `wasm_exec.js` (included with Go)
+- [PNPM](https://pnpm.io/)
 
-### Supporting wasm_exec.js
+Use the provided `Makefile` and execute `make build`.
 
-The JavaScript file can be found in the GOROOT folder. To copy it to the static directory use the following command:
+See `make help` for descriptions of  other targets.
 
-```sh
-cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./static
-```
+The final static website will be placed in `dist/`
 
-or use provided `Makefile` and execute `make import`
+## Usage
 
-### Compile it to a .wasm file
-
-```sh
-GOOS=js GOARCH=wasm go build -o static/age.wasm
-```
-
-or use provided `Makefile` and execute `make build`
-
-Now you should have `age.wasm` and `wasm_exec.js` in static folder.
-
-## Using
-
-Put the static folder on your favorite web server server or open `index.html`.
+Put the `dist` folder on your favorite web server server or open `index.html`.
 There is no binary to run :)
 
 ---
 
 **Prebuilt files?**
 
-You can grab generated zip file which includes `age.wasm` and `wasm_exec.js` on [release page](https://github.com/MarinX/agewasm/releases).
+You can grab a generated zip file on the [release page](https://github.com/MarinX/agewasm/releases).
 
 ---
 
+## Developement
+You can run a developement Vite server with live-reload using `pnpm run dev` (this will not auto-rebuild the WASM).
+
+Please format the source files before commiting with `pnpm run format`
+
 ## License
 
 This project is licensed under the MIT License. See the LICENSE file for the full license text.

app.yaml

@@ -4,9 +4,9 @@ threadsafe: true
 
 handlers:
 - url: /
-  static_files: static/index.html
-  upload: static/index.html
+  static_files: dist/index.html
+  upload: dist/index.html
 
 - url: /(.*)
-  static_files: static/\1
-  upload: static/(.*)
+  static_files: dist/\1
+  upload: dist/(.*)

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "agewasm",
+  "version": "1.1.0",
+  "description": "A simple and secure online client-side Age key generator, encryption and decryption tool built using wasm.",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --emptyOutDir",
+    "preview": "vite preview",
+    "format": "prettier --write src/*.html src/*.js src/*.scss"
+  },
+  "keywords": [
+    "encryption",
+    "age-encryption"
+  ],
+  "author": "Marin Basic (marin-basic.com)",
+  "license": "MIT",
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3"
+  },
+  "devDependencies": {
+    "prettier": "^3.5.0",
+    "sass-embedded": "^1.83.4",
+    "vite": "^6.1.0"
+  }
+}