Static frontend

.github/workflows/web.yaml

@@ -0,0 +1,42 @@
+name: Deploy to Github pages
+
+on:
+  push:
+    branches: [ frontend ]  # NOTE: Switch to 'main' when confirmed it's working.
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:  # NOTE: This only applies to 'run' steps like make, sed, cp; not to actions.
+        working-directory: './tqweb'
+    steps:
+    - name: Set up Go
+      uses: actions/setup-go@v5.4.0
+      with:
+        go-version: '1.26'
+
+    - name: Checkout
+      uses: actions/checkout@v4.2.0
+      with:
+        fetch-depth: 0
+
+    - name: Install dependencies
+      run: |
+        go version
+
+    - name: Build
+      run: make build
+
+    - name: Change base tag in index.html from / to tq
+      run: sed -i 's/<base href="\/" \/>/<base href="\/tq\/" \/>/g' index.html
+
+    - name: Copy index.html to 404.html
+      run: cp index.html 404.html
+
+    - name: Commit GitHub Pages
+      uses: JamesIves/github-pages-deploy-action@3.7.1
+      with:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        BRANCH: gh-pages
+        FOLDER: tqweb  # NOTE: Might be better to copy the files to be deployed to a specific catalog first.

.gitignore

@@ -18,4 +18,4 @@
 # vendor/
 
 # Go workspace file
-go.work
+# go.work

go.mod

@@ -6,3 +6,5 @@ require (
 	github.com/mdm-code/scanner v1.2.1
 	github.com/pelletier/go-toml/v2 v2.1.0
 )
+
+require github.com/stretchr/testify v1.10.0 // indirect

go.sum

@@ -12,8 +12,9 @@ github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSS
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
-github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=

go.work

@@ -0,0 +1,6 @@
+go 1.26.0
+
+use (
+	.
+	./tqweb
+)

go.work.sum

@@ -0,0 +1 @@
+github.com/mdm-code/tq/v2 v2.5.1/go.mod h1:InmaslI3cLnYkGSxckoxdo+oGf58sT8cBz++ET5CylY=

tqweb/Makefile

@@ -0,0 +1,43 @@
+GO=go
+GOFLAGS=-mod=vendor -trimpath
+HTMX_VERSION?=2.0.8
+# NOTE
+# ====
+# #1 The master version of the Javascript code fom the go-wasm-http-server has
+# been updated since the version v2.2.1. If for any reason it might be necessary
+# to revert to the version used in Go code, here is a quick shell script to
+# pull the version from the go.mod file.
+#
+# GO_WASM_HTTP_SERVER_VERSION?=master
+#
+# #2 The master version seems not to work right with Go 1.24.0.
+#
+GO_WASM_HTTP_SERVER_VERSION?=$(shell\
+  grep go-wasm-http-server go.mod |\
+  cut -d' ' -f3\
+)
+# ====
+
+export CGO_ENABLED=0
+export GOOS=js
+export GOARCH=wasm
+
+ifndef VERBOSE
+.SILENT:
+endif
+
+.PHONY: assets build serve
+
+.PHONY: .ONESHELL
+.ONESHELL:
+
+assets:
+	cp $$(go env GOROOT)/lib/wasm/wasm_exec.js wasm_exec.js
+	curl https://cdn.jsdelivr.net/npm/htmx.org@$(HTMX_VERSION)/dist/htmx.min.js > htmx.min.js
+	curl https://cdn.jsdelivr.net/gh/nlepage/go-wasm-http-server@$(GO_WASM_HTTP_SERVER_VERSION)/sw.js > sw.js
+
+build:
+	$(GO) build $(GOFLAGS) -ldflags '-s -w' -o api.wasm .
+
+serve:
+	python3 -m http.server 8000

tqweb/copy.js

@@ -0,0 +1,14 @@
+/**
+* Copy the tq terminal command to the clipboard.
+*
+* @param {string} query - The query provided by the user.
+* @param {string} input - The input provided by the user.
+*/
+const onCopyClick = async (query, input) => {
+  var output = `<<EOF tq -q '${query}'\n${input}\nEOF`;
+  try {
+    navigator.clipboard.writeText(output);
+  } catch (err) {
+    console.log('Unable to copy the query.');
+  };
+};

tqweb/go.mod

@@ -0,0 +1,16 @@
+module github.com/mdm-code/tqweb
+
+go 1.26.0
+
+require (
+	github.com/mdm-code/tq/v2 v2.5.1
+	github.com/nlepage/go-wasm-http-server/v2 v2.2.1
+)
+
+require (
+	github.com/hack-pad/safejs v0.1.1 // indirect
+	github.com/mdm-code/scanner v1.2.1 // indirect
+	github.com/nlepage/go-js-promise v1.0.0 // indirect
+	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
+	github.com/stretchr/testify v1.10.0 // indirect
+)

tqweb/go.sum

@@ -0,0 +1,29 @@
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/hack-pad/safejs v0.1.1 h1:d5qPO0iQ7h2oVtpzGnLExE+Wn9AtytxIfltcS2b9KD8=
+github.com/hack-pad/safejs v0.1.1/go.mod h1:HdS+bKF1NrE72VoXZeWzxFOVQVUSqZJAG0xNCnb+Tio=
+github.com/mdm-code/scanner v1.2.1 h1:GZ1DYAkhTXK+M4AG65L5fnl5eUt7M6XDAYBVZNH+cBc=
+github.com/mdm-code/scanner v1.2.1/go.mod h1:ut94FGYZVrQk7uBkf0vJ0ngKuJbdkTEDnmY07ZI8yb0=
+github.com/mdm-code/tq/v2 v2.5.1 h1:G6rSTYYByx+/jRodFkrLnsWNK617nMMx34jWZWxX470=
+github.com/mdm-code/tq/v2 v2.5.1/go.mod h1:InmaslI3cLnYkGSxckoxdo+oGf58sT8cBz++ET5CylY=
+github.com/nlepage/go-js-promise v1.0.0 h1:K7OmJ3+0BgWJ2LfXchg2sI6RDr7AW/KWR8182epFwGQ=
+github.com/nlepage/go-js-promise v1.0.0/go.mod h1:bdOP0wObXu34euibyK39K1hoBCtlgTKXGc56AGflaRo=
+github.com/nlepage/go-wasm-http-server/v2 v2.2.1 h1:4tzhSb3HKQ3Ykt2TPfqEnmcPfw8n1E8agv4OzAyckr8=
+github.com/nlepage/go-wasm-http-server/v2 v2.2.1/go.mod h1:r8j7cEOeUqNp+c+C52sNuWaFTvvT/cNqIwBuEtA36HA=
+github.com/pelletier/go-toml/v2 v2.1.0 h1:FnwAJ4oYMvbT/34k9zzHuZNrhlz48GB3/s6at6/MHO4=
+github.com/pelletier/go-toml/v2 v2.1.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

tqweb/index.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <base href="/tq/" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="htmx.min.js"></script>
+    <script src="copy.js"></script>
+    <script>
+      navigator.serviceWorker.register("worker.js");
+    </script>
+  </head>
+  <body class="bg-[#000000] text-[#9cd0f4] min-h-screen font-mono">
+    <div class="flex flex-col min-h-screen">
+      <nav class="flex items-center justify-between px-4 py-3 bg-gray-700">
+        <div class="flex items-center space-x-2">
+          <a href="https://github.com/mdm-code/tq">
+            <img class="w-6" src="tq.svg" alt="TQ">
+          </a>
+          <span class="text-base font-bold">
+            <h1>
+              playground
+            </h1>
+          </span>
+        </div>
+        <div class="flex fill-[#9cd0f4] items-center space-x-4 me-4 text-xl">
+          <div class="flex relative group">
+            <button
+              onclick="onCopyClick(document.querySelector('#query').value, document.querySelector('#input').value)"
+              class="hover:fill-gray-900"
+            >
+              <svg class="w-6" viewBox="0 0 24 24">
+                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"/>
+              </svg>
+            </button>
+            <div class="absolute mt-9 text-xs left-1/2 -translate-x-1/2 hidden group-hover:block bg-gray-800 text-sm px-2 py-1 rounded">copy</div>
+          </div>
+          <div class="flex relative group">
+            <button class="hover:fill-gray-900">
+              <a href="https://github.com/mdm-code/tq">
+                <svg class="w-6" viewBox="0 0 24 24">
+                  <path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"/>
+                </svg>
+              </a>
+            </button>
+              <div class="absolute mt-9 text-xs left-1/2 -translate-x-1/2 hidden group-hover:block bg-gray-800 text-sm px-2 py-1 rounded">source</div>
+          </div>
+        </div>
+      </nav>
+      <main class="flex flex-1 overflow-hidden">
+        <form class="flex w-full" id="tq-form">
+          <section class="w-1/2 border-r border-gray-700 flex flex-col gap-4 p-4">
+            <div class="border border border-gray-700 bg-[#171717] rounded" id="tq-form-field-query">
+              <header class="border-b border-gray-700 px-4 py-2">
+                <h2 class="text-sm font-bold tracking-widest">
+                  QUERY
+                </h2>
+              </header>
+              <div class="h-32">
+                <textarea
+                  spellcheck="false"
+                  class="w-full h-full bg-transparent text-sm px-4 py-2 resize-none focus:outline-none"
+                  name="query"
+                  id="query"
+                  hx-post="api/process"
+                  hx-trigger="input changed delay:1000ms"
+                  hx-sync="this:replace"
+                  hx-swap="outerHTML"
+                  hx-target="#output"
+                ></textarea>
+              </div>
+            </div>
+            <div class="flex-1 border border-gray-700 bg-[#171717] rouded flex flex-col" id="tq-form-field-input">
+              <header class="border-b border-gray-700 px-4 py-2">
+                <h2 class="text-sm font-bold tracking-widest">
+                  TOML
+                </h2>
+              </header>
+              <div class="flex-1">
+                <textarea
+                  spellcheck="false"
+                  class="w-full h-full bg-transparent text-sm px-4 py-2 resize-none focus:outline-none"
+                  name="input"
+                  id="input"
+                  hx-post="api/process"
+                  hx-trigger="input changed delay:1000ms"
+                  hx-sync="this:replace"
+                  hx-swap="outerHTML"
+                  hx-target="#output"
+                ></textarea>
+              </div>
+            </div>
+          </section>
+          <section class="w-1/2 flex flex-col p-4">
+            <div class="flex-1 border border-gray-700 bg-[#171717] rounded flex flex-col" id="tq-form-field-output">
+              <header class="border-b border-gray-700 px-4 py-2">
+                <h2 class="text-sm font-bold tracking-widest">
+                  OUTPUT
+                </h2>
+              </header>
+              <div class="flex-1">
+                <textarea
+                  spellcheck="false"
+                  class="w-full h-full bg-transparent text-sm px-4 py-2 resize-none focus:outline-none"
+                  name="output"
+                  id="output"
+                  readonly
+                ></textarea>
+              </div>
+            </div>
+          </section>
+        </form>
+      </main>
+    </div>
+  </body>
+</html>

tqweb/main.go

@@ -0,0 +1,57 @@
+//go:build js && wasm
+
+package main
+
+import (
+	"bytes"
+	_ "embed"
+	"html/template"
+	"net/http"
+	"strings"
+
+	"github.com/mdm-code/tq/v2"
+	"github.com/mdm-code/tq/v2/toml"
+	wasmhttp "github.com/nlepage/go-wasm-http-server/v2"
+)
+
+/*
+TODO:
+1. Tq config for GoTOML is sent from the frontend selection component.
+- Checkboxes: send true if checked.
+- Buttons: on click, keep highlighted and add to the payload.
+2. The config and TQ has to be instantiated with each call.
+3. Curl tailwind css scripts.
+*/
+
+var (
+	//go:embed views/index.html
+	index  string
+	indexT = template.Must(template.New("index").Parse(index))
+)
+
+func main() {
+	conf := toml.GoTOMLConf{}
+	goToml := toml.NewGoTOML(conf)
+	adapter := toml.NewAdapter(goToml)
+	tq := tq.New(adapter)
+
+	http.HandleFunc("/process", func(w http.ResponseWriter, r *http.Request) {
+		var output bytes.Buffer
+		var data struct{ Output string }
+		input := r.FormValue("input")
+		query := r.FormValue("query")
+		err := tq.Run(strings.NewReader(input), &output, query)
+		if err != nil {
+			data.Output = err.Error()
+		} else {
+			data.Output = output.String()
+		}
+		if err := indexT.ExecuteTemplate(w, "output", data); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	})
+
+	wasmhttp.Serve(nil)
+
+	select {}
+}