Deploy header validator using webpack

WICG · Aug 1, 2023 · ba4056a · ba4056a
1 parent bd0512d
commit ba4056a
Show file tree

Hide file tree

Showing 15 changed files with 2,368 additions and 144 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -11,9 +11,8 @@ on:
     - main
     paths:
     - 'Makefile'
-    - 'header-validator/validate-json.js'
+    - 'header-validator/*'
     - 'index.bs'
-    - 'validate-headers.html'
 jobs:
   build:
     name: Build

diff --git a/Makefile b/Makefile
@@ -3,7 +3,7 @@ OUT_DIR ?= out
 
 .PHONY: all clean validator
 
-all: $(OUT_DIR)/index.html $(OUT_DIR)/validate-headers.html $(OUT_DIR)/validate-json.js $(OUT_DIR)/validate-eligible.js $(OUT_DIR)/validate-os.js
+all: $(OUT_DIR)/index.html validator
 
 $(OUT_DIR)/index.html: index.bs $(OUT_DIR)
 	@ (HTTP_STATUS=$$(curl https://api.csswg.org/bikeshed/ \
@@ -18,20 +18,19 @@ $(OUT_DIR)/index.html: index.bs $(OUT_DIR)
 		exit 22 \
 	);
 
-$(OUT_DIR)/validate-headers.html: validate-headers.html $(OUT_DIR)
-	@ cp $< $@
-
-$(OUT_DIR)/validate-json.js: header-validator/validate-json.js $(OUT_DIR)
-	@ cp $< $@
+validator: $(OUT_DIR)/validate-headers.html $(OUT_DIR)/validate-headers.js
 
-$(OUT_DIR)/validate-eligible.js: header-validator/validate-eligible.js $(OUT_DIR)
+$(OUT_DIR)/validate-headers.html: header-validator/index.html $(OUT_DIR)
 	@ cp $< $@
 
-$(OUT_DIR)/validate-os.js: header-validator/validate-os.js $(OUT_DIR)
+$(OUT_DIR)/validate-headers.js: header-validator/dist/main.js $(OUT_DIR)
 	@ cp $< $@
 
 $(OUT_DIR):
 	@ mkdir -p $@
 
+header-validator/dist/main.js: header-validator/package.json header-validator/src/*.js
+	@ npm run build --prefix ./header-validator
+
 clean:
 	@ rm -rf $(OUT_DIR)
diff --git a/header-validator/.gitignore b/header-validator/.gitignore
@@ -1 +1,2 @@
+dist
 node_modules
diff --git a/header-validator/index.html b/header-validator/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Attribution Reporting Header Validation</title>
+<link
+  rel="icon"
+  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔷</text></svg>"
+/>
+<style>
+* {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 1em;
+}
+
+body,
+form,
+textarea,
+#output {
+  height: 100%;
+  width: 100%;
+}
+
+body,
+form,
+#right {
+  display: flex;
+}
+
+body,
+#right {
+  flex-direction: column;
+}
+
+#header {
+  flex: none;
+}
+
+#input {
+  flex: 1;
+}
+
+textarea {
+  resize: none;
+}
+</style>
+<body>
+<h1>Attribution Reporting Header Validation</h1>
+<form>
+  <noscript>JavaScript is required to use this form.</noscript>
+  <fieldset id=input>
+    <legend>Value</legend>
+    <textarea></textarea>
+  </fieldset>
+  <div id="right">
+    <fieldset id=header>
+      <legend>Header</legend>
+      <p><label><input type=radio name=header value=source><code>Attribution-Reporting-Register-Source</code></label>
+      <p><label><input type=radio name=header value=trigger><code>Attribution-Reporting-Register-Trigger</code></label>
+      <p><label><input type=radio name=header value=os-source><code>Attribution-Reporting-Register-OS-Source</code></label>
+      <p><label><input type=radio name=header value=os-trigger><code>Attribution-Reporting-Register-OS-Trigger</code></label>
+      <p><label><input type=radio name=header value=eligible><code>Attribution-Reporting-Eligible</code></label>
+    </fieldset>
+    <fieldset id=output>
+      <legend>Validation Result</legend>
+      <button type=button id=linkify>Copy Link</button>
+      <output>
+        <div id=success></div>
+        <p>Errors:
+        <ul id=errors></ul>
+        <p>Warnings:
+        <ul id=warnings></ul>
+      </output>
+    </fieldset>
+  </div>
+</form>
+<template id="pathful-issue">
+  <li><code></code> <span></span></li>
+</template>
+<script src="validate-headers.js"></script>