feat: mixer: Add suggested values for content-type header

.editorconfig

@@ -9,7 +9,7 @@ indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.md,*.html}]
+[*.md]
 indent_style = space
 
 [{*.yml,*.yaml}]

Taskfile.dist.yml

@@ -3,12 +3,12 @@ version: "3"
 
 vars:
   COMMIT:
-    sh: |
+    sh: |-
       git rev-parse HEAD
   NOW:
-    sh: |
+    sh: |-
       date -u +%FT%TZ
-  LD_FLAGS: |-
+  LD_FLAGS: >-
     -ldflags '-X github.com/sharat87/httpbun/server/spec.Commit={{.COMMIT}} -X github.com/sharat87/httpbun/server/spec.Date={{.NOW}}'
 
 

assets/mixer.html

@@ -24,23 +24,35 @@ <h1><img alt=Logo src='{{.pathPrefix}}/assets/icon-180.png'> Mixer &mdash; <a hr
 	<button data-directive=slack no-repeat>Slack Request Log</button>
 </p>
 
+<datalist id="content-types">
+	<option value="application/javascript"></option>
+	<option value="application/json"></option>
+	<option value="application/octet-stream"></option>
+	<option value="application/x-www-form-urlencoded"></option>
+	<option value="application/xml"></option>
+	<option value="image/svg+xml"></option>
+	<option value="text/html"></option>
+	<option value="text/plain"></option>
+	<option value="text/xml"></option>
+</datalist>
+
 <style>
 .entry {
-    align-items: start;
+	align-items: start;
 }
 .entry > :nth-child(2) {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
 }
 .entry small {
-    color: #888;
+	color: #888;
 }
 .entry input {
-    flex: 1;
+	flex: 1;
 }
 .entry + .entry {
-    margin-top: .6em;
+	margin-top: .6em;
 }
 </style>
 

assets/mixer.js

@@ -13,23 +13,26 @@ class EntryElement extends HTMLElement {
 		this.directive = this.tagName.substring("entry-".length).toLowerCase()
 		this.className = "entry"
 
-		this.innerHTML = "<div>" + this.formControl() + "</div>"
+		this.innerHTML = "<div>" + (this.formControl() || "") + "</div>"
+		const formRoot = this.firstElementChild
 
 		const label = el(`<label style="flex:0 0 min(20%, 9em)">${LABELS[this.directive]}</label>`)
-		this.insertBefore(label, this.firstChild)
+		this.insertBefore(label, formRoot)
 
 		const delBtn = el(`<button class=del>&times;</button>`)
 		delBtn.addEventListener("click", this.remove.bind(this))
 		this.append(delBtn)
 
-		const input = this.querySelector("input, textarea")
+		this.initUI(formRoot)
+
+		const input = formRoot.querySelector("input, textarea")
 		label.setAttribute("for", input.id = "e" + Math.random())
 		input.focus()
 	}
 
-	formControl() {
-		throw new Error("formControl unimplemented")
-	}
+	initUI(root) {}
+
+	formControl() {}
 
 	get path() {
 		return this.directive ? "/" + this.directive + "=" + this.value : ""
@@ -55,20 +58,32 @@ customElements.define("entry-s", class extends EntryElement {
 })
 
 customElements.define("entry-h", class extends EntryElement {
-	formControl() {
-		return `<div class=flex><input required pattern='^[-_a-zA-Z0-9]+$' placeholder=key>:<input placeholder=value></div>`
+	initUI(parent) {
+		parent.innerHTML = "<div class=flex></div>"
+		const root = parent.firstElementChild
+
+		const keyInput = this.keyInput = el(`<input required pattern='^[-_a-zA-Z0-9]+$' placeholder=key>`)
+		const valInput = this.valInput = el(`<input placeholder=value>`)
+		root.append(keyInput, el(`<span>:</span>`), valInput)
+
+		const contentTypeHeaders = new Set(["content-type", "accept"])
+		keyInput.addEventListener("input", (event) => {
+			if (contentTypeHeaders.has(keyInput.value?.toLocaleLowerCase())) {
+				valInput.setAttribute("list", "content-types")
+			} else {
+				valInput.removeAttribute("list")
+			}
+		})
 	}
 
 	get value() {
-		const inputs = this.querySelectorAll("input")
-		return inputs[0].value + ":" + encodeURIComponent(inputs[1].value)
+		return this.keyInput.value + ":" + encodeURIComponent(this.valInput.value)
 	}
 
 	set value(v) {
 		const [_, name, value] = v.match(/^(.+?):(.+)$/)
-		const inputs = this.querySelectorAll("input")
-		inputs[0].value = name
-		inputs[1].value = decodeURIComponent(value)
+		this.keyInput.value = name
+		this.valInput.value = decodeURIComponent(value)
 	}
 })
 

util/util.go

@@ -63,7 +63,6 @@ func ComputeFgForBg(c string) string {
 
 	luma := 0.2126*float64(r) + 0.7152*float64(g) + 0.0722*float64(b) // per ITU-R BT.709
 
-	log.Printf("R: %v, G: %v, B: %v, Luma: %v", r, g, b, luma)
 	if luma > 100 {
 		return "#222e"
 	} else {