feat: Style the online version of the tool (wasm)

.dockerignore

@@ -1,5 +1,6 @@
 /.git
 /.github
+/dist
 /tools
 /wasm
 /web

.github/workflows/deploy_website.yml

@@ -28,6 +28,8 @@ jobs:
           mdbook-version: "latest"
       - name: Install static-sitemap-cli
         run: npm install static-sitemap-cli
+      - name: Install Tailwind CSS CLI
+        run: npm install tailwindcss @tailwindcss/cli
       - name: Build Website
         run: make website
       - name: Setup Pages

.gitignore

@@ -27,6 +27,7 @@ go.work.sum
 # Build files
 dist/
 www/
+web/online/output.css
 
 # WebAssembly file
-web/wasm/overscry.wasm
+web/online/overscry.wasm

Makefile

@@ -8,16 +8,17 @@ cli-docker:
 
 wasm:
 	GOOS=js GOARCH=wasm go build -o dist/overscry.wasm -ldflags '-s -w' ./wasm
-	cp dist/overscry.wasm web/wasm
-	cp "$(shell go env GOROOT)/lib/wasm/wasm_exec.js" web/wasm
+	cp dist/overscry.wasm web/online
+	cp "$(shell go env GOROOT)/lib/wasm/wasm_exec.js" web/online
 
 website:
 	$(MAKE) wasm
 	-mkdir www
 	cd web/book && mdbook build --dest-dir ../../www
-	-mkdir www/wasm
-	cp web/wasm/* www/wasm
+	-mkdir www/online
+	cp web/online/* www/online
 	cd www && npx sscli --no-clean --base https://overscry.krypton.ninja
+	cd www/online && npx @tailwindcss/cli -i input.css -o output.css && rm input.css
 
 install:
 	go install .

README.md

@@ -23,6 +23,10 @@ OverScry is a tool designed to simplify the process of generating Overpass queri
 
 ## Getting Started
 
+> [!TIP]
+> There is a **web version** of the tool available, no installation required, just your browser.
+> Check it out [here](https://overscry.krypton.ninja/online/)
+
 ### Installation
 
 Installing the tool can currently only be done via Go and Docker.
@@ -35,12 +39,6 @@ You need to have [Go](https://go.dev/dl/) installed. You can then install using:
 go install github.com/kkrypt0nn/overscry@latest
 ```
 
-You can then generate a query with the basic examples in the [examples](_examples) folder with
-
-```bash
-overscry gen --settings _examples/housenumber.yml
-```
-
 #### Docker
 
 You can run the tool from the published [Docker image](https://hub.docker.com/r/kkrypt0nn/overscry) using:
@@ -59,22 +57,43 @@ overscry --help
 
 This will give you the list of commands and their respective flags.
 
+You can then simply generate a query with
+
+```bash
+overscry gen --settings _examples/housenumber.yml
+```
+
 ## Settings YML File
 
 The YML file for the settings has the following example structure
 
 ```yml
-version: 0.0.1-dev
-author: Krypton (@kkrypt0nn)
-description: A query to get every house with number 1337
+version: 0.0.7-dev
+author: "Krypton (@kkrypt0nn)"
+description: "A query to get apartments with 2 levels"
 node:
-  addr:
-    housenumber:
-      value: 1337
-      match: equals
+  building:
+    value: apartments
+    levels:
+      value: 2
 ```
 
-A lot of work is put into so that more arguments and features/tags are supported. Please be patient for upcoming changes.
+More details about the supported fields is available [here](https://overscry.krypton.ninja/settings/introduction.html).
+
+
+> [!NOTE]
+> A lot of work is put into so that more arguments and features/tags are supported. Please be patient for upcoming changes.
+
+## Supported Platforms
+
+OverScry works on the following platforms:
+
+- **Linux**
+- **macOS**
+- **Windows**
+- **Browser (via WebAssembly)** - See https://overscry.krypton.ninja/online/
+- **Docker**
+- **Android**
 
 ## Troubleshooting
 

_examples/building.yml

@@ -1,6 +1,6 @@
 version: 0.0.7-dev
-author: Krypton (@kkrypt0nn)
-description: A query to get apartments with 2 levels
+author: "Krypton (@kkrypt0nn)"
+description: "A query to get apartments with 2 levels"
 node:
   building:
     value: apartments

_examples/housenumber.yml

@@ -1,6 +1,6 @@
 version: 0.0.1-dev
-author: Krypton (@kkrypt0nn)
-description: A query to get every house with number 1337
+author: "Krypton (@kkrypt0nn)"
+description: "A query to get every house with number 1337"
 node:
   addr:
     housenumber:

core/constants.go

@@ -2,7 +2,7 @@ package core
 
 const (
 	Name    = "OverScry"
-	Version = "0.0.10-dev"
+	Version = "0.0.11-dev"
 	Author  = "Krypton (root@krypton.ninja)"
 	Website = "https://overscry.krypton.ninja"
 )

wasm/main.go

@@ -6,11 +6,12 @@ import (
 	"fmt"
 	"syscall/js"
 
+	"github.com/kkrypt0nn/overscry/core"
 	"github.com/kkrypt0nn/overscry/models"
 	"github.com/kkrypt0nn/overscry/settings"
 )
 
-func parseYAML(this js.Value, args []js.Value) any {
+func convertYAMLToOQL(this js.Value, args []js.Value) any {
 	if len(args) < 1 {
 		return js.ValueOf("Missing YAML input")
 	}
@@ -26,7 +27,12 @@ func parseYAML(this js.Value, args []js.Value) any {
 	return js.ValueOf(res)
 }
 
+func getVersion(this js.Value, args []js.Value) any {
+	return js.ValueOf(core.Version)
+}
+
 func main() {
-	js.Global().Set("parseYAMLToOQL", js.FuncOf(parseYAML))
+	js.Global().Set("convertYAMLToOQL", js.FuncOf(convertYAMLToOQL))
+	js.Global().Set("getVersion", js.FuncOf(getVersion))
 	select {}
 }

web/book/src/introduction.md

@@ -8,4 +8,19 @@
 
 OverScry is a tool designed to simplify the process of generating Overpass queries from a YML structure file. By taking a structured YML input that defines specific geographical data and search parameters, OverScry automatically converts it into a valid Overpass query. Overall it makes it easier for both beginners and experts to leverage Overpass API capabilities without needing to understand how to write complex raw queries.
 
+---
+
+## Test the online version of the tool [here](/online/)
+
+#### Supports
+
+<div>
+    <img alt="Linux" width="48px" height="48px" src="assets/linux.svg" />
+    <img alt="macOS" width="48px" height="48px" src="assets/apple.svg" />
+    <img alt="Windows" width="48px" height="48px" src="assets/windows.svg" />
+    <img alt="WebAssembly" width="48px" height="48px" src="assets/wasm.svg" />
+    <img alt="Docker" width="48px" height="48px" src="assets/docker.svg" />
+    <img alt="Android" width="48px" height="48px" src="assets/android.svg" />
+</div>
+
 </div>

web/book/src/settings/introduction.md

@@ -9,14 +9,14 @@ A lot of work is put into so that more arguments and features/tags are supported
 An example YML file looks like
 
 ```yml
-version: 0.0.1-dev
-author: Krypton (@kkrypt0nn)
-description: A query to get every house with number 1337
+version: 0.0.7-dev
+author: "Krypton (@kkrypt0nn)"
+description: "A query to get apartments with 2 levels"
 node:
-  addr:
-    housenumber:
-      value: 1337
-      match: equals
+  building:
+    value: apartments
+    levels:
+      value: 2
 ```
 
 The following fields are allowed

web/online/ace_editor.js

@@ -0,0 +1,21 @@
+var editor = ace.edit("editor");
+editor.setTheme("ace/theme/twilight");
+editor.getSession().setMode("ace/mode/yaml");
+editor.getSession().setValue(`version: 0.0.7-dev
+author: "Krypton (@kkrypt0nn)"
+description: "A query to get apartments with 2 levels"
+node:
+  building:
+    value: apartments
+    levels:
+      value: 2`);
+
+var output = ace.edit("output");
+output.setTheme("ace/theme/twilight");
+output.setOptions({
+  readOnly: true,
+  showLineNumbers: false,
+  showGutter: false,
+});
+output.container.style.color = "gray";
+output.getSession().setValue("// The generated query will appear here");