Skip to content

Deploy simulator to GitHub pages #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 8, 2025
Merged

Deploy simulator to GitHub pages #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
359677a
Prepare simulator HTML file with webpack
apasel422 Aug 7, 2025
74ba9bb
Deploy simulator to GitHub pages
apasel422 Aug 7, 2025
31917ce
Add missing webpack-cli dep
apasel422 Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ name: "Deploy to GitHub Pages"
on:
push:
branches: [ "main" ]
paths: [ "Makefile", "api.bs", "images/**", ".github/workflows/deploy.yml" ]
paths: [ "Makefile", "api.bs", "images/**", ".github/workflows/deploy.yml", "impl/**" ]

jobs:
build:
Expand Down
18 changes: 15 additions & 3 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.PHONY: all venv clean images
.PHONY: all venv clean images simulator
.SUFFIXES: .bs .html

IMAGES := $(wildcard images/*.svg)

all: build/index.html
all: build/index.html simulator

clean:
-rm -rf build venv
-rm -rf build venv impl/dist

venv-marker := venv/.make
bikeshed := venv/bin/bikeshed
Expand All @@ -32,3 +32,15 @@ images:
tmp="$$(mktemp)"; \
npx aasvg --extract --embed <"$$i" >"$$tmp" && mv "$$tmp" "$$i"; \
done

simulator: build/simulator.html build/simulator.js

build/simulator.html: impl/dist/index.html build
cp $< $@

build/simulator.js: impl/dist/simulator.js build
cp $< $@

impl/dist/index.html impl/dist/simulator.js: impl/index.html impl/package-lock.json impl/package.json impl/tsconfig.json impl/webpack.config.js impl/src/*.ts
@ npm ci --prefix ./impl
@ npm run pack --prefix ./impl
327 changes: 165 additions & 162 deletions impl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,172 +1,175 @@
<!doctype html>
<meta charset="utf-8" />
<title>Attribution Simulator</title>
<style>
* {
box-sizing: border-box;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Attribution Simulator</title>
<style>
* {
box-sizing: border-box;
}

dl {
display: grid;
grid-gap: 0.25em;
grid-template-columns: max-content;
dl {
display: grid;
grid-gap: 0.25em;
grid-template-columns: max-content;

dd {
grid-column-start: 2;
dd {
grid-column-start: 2;

input,
select {
width: 100%;
input,
select {
width: 100%;
}
}
}
}
}

body,
div,
nav {
display: flex;
gap: 1em;
width: 100%;
}
body,
div,
nav {
display: flex;
gap: 1em;
width: 100%;
}

body {
flex-direction: column;
margin: 0;
padding: 0.5em;
}
body {
flex-direction: column;
margin: 0;
padding: 0.5em;
}

form,
section {
border: 1px solid #000;
padding: 0.5em;
flex: 1;
}
form,
section {
border: 1px solid #000;
padding: 0.5em;
flex: 1;
}

table {
border-collapse: collapse;
}
table {
border-collapse: collapse;
}

th,
td {
padding: 0.5em;
border: 1px solid #000;
}
</style>
<body>
<nav>
<!-- TODO: Expose actions for simulating user- and site-initiated data clears -->
<form id="time">
<h2>Time: <time></time></h2>
<button>Advance</button> by
<label
><input id="days" type="number" min="0" value="1" step="0.25" />
days</label
>
</form>
<section>
<h2>Epoch Starts</h2>
<dl id="epochStarts"></dl>
</section>
<section>
<h2>Privacy Budget Entries</h2>
<dl id="privacyBudgetEntries"></dl>
</section>
</nav>
<div>
<form id="saveImpression">
<h2>Save Impression</h2>
<dl>
<dt><label for="impressionSite">Impression Site</label></dt>
<dd><input id="impressionSite" value="publisher.example" /></dd>
<dt><label for="impressionIntermediary">Intermediary Site</label></dt>
<dd><input id="impressionIntermediary" /></dd>
<dt><label for="histogramIndex">Histogram Index</label></dt>
<dd>
<input type="number" required id="histogramIndex" />
</dd>
<dt><label for="matchValue">Match Value</label></dt>
<dd><input type="number" id="matchValue" /></dd>
<dt><label for="lifetimeDays">Lifetime Days</label></dt>
<dd><input type="number" id="lifetimeDays" /></dd>
<dt><label for="priority">Priority</label></dt>
<dd><input type="number" id="priority" /></dd>
<dt><label for="conversionSites">Conversion Sites</label></dt>
<dd><input id="conversionSites" /></dd>
<dt><label for="conversionCallers">Conversion Callers</label></dt>
<dd><input id="conversionCallers" /></dd>
</dl>
<button>Submit</button>
<output>
<h3>Results</h3>
<ol></ol>
</output>
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Impression Site</th>
<th>Intermediary Site</th>
<th>Histogram Index</th>
<th>Match Value</th>
<th>Lifetime Days</th>
<th>Priority</th>
<th>Conversion Sites</th>
<th>Conversion Callers</th>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
<form id="measureConversion">
<h2>Measure Conversion</h2>
<dl>
<dt><label for="conversionSite">Conversion Site</label></dt>
<dd>
<input id="conversionSite" value="advertiser.example" />
</dd>
<dt><label for="conversionIntermediary">Intermediary Site</label></dt>
<dd><input id="conversionIntermediary" /></dd>
<dt><label for="histogramSize">Histogram Size</label></dt>
<dd><input type="number" required id="histogramSize" /></dd>
<dt><label for="lookbackDays">Lookback Days</label></dt>
<dd><input type="number" id="lookbackDays" /></dd>
<dt><label for="matchValues">Match Values</label></dt>
<dd>
<input id="matchValues" pattern="^\s*([0-9]+)(\s+[0-9]+)*\s*$" />
</dd>
<dt><label for="logic">Logic</label></dt>
<dd>
<select id="logic">
<option>last-n-touch</option>
</select>
</dd>
<dt><label for="credit">Credit</label></dt>
<dd>
<input
id="credit"
pattern="^\s*([0-9]+(\.[0-9]+)?)(\s+[0-9]+(\.[0-9]+)?)*\s*$"
value="1"
/>
</dd>
<dt><label for="value">Value</label></dt>
<dd><input type="number" id="value" /></dd>
<dt><label for="maxValue">Max Value</label></dt>
<dd><input type="number" id="maxValue" /></dd>
<dt><label for="epsilon">Epsilon</label></dt>
<dd>
<input type="number" id="epsilon" />
</dd>
<dt><label for="impressionSites">Impression Sites</label></dt>
<dd><input id="impressionSites" /></dd>
<dt><label for="impressionCallers">Impression Callers</label></dt>
<dd><input id="impressionCallers" /></dd>
</dl>
<button>Submit</button>
<output>
<h3>Results</h3>
<ol></ol>
</output>
</form>
</div>
<script src="dist/simulator.js"></script>
</body>
th,
td {
padding: 0.5em;
border: 1px solid #000;
}
</style>
</head>
<body>
<nav>
<!-- TODO: Expose actions for simulating user- and site-initiated data clears -->
<form id="time">
<h2>Time: <time></time></h2>
<button>Advance</button> by
<label
><input id="days" type="number" min="0" value="1" step="0.25" />
days</label
>
</form>
<section>
<h2>Epoch Starts</h2>
<dl id="epochStarts"></dl>
</section>
<section>
<h2>Privacy Budget Entries</h2>
<dl id="privacyBudgetEntries"></dl>
</section>
</nav>
<div>
<form id="saveImpression">
<h2>Save Impression</h2>
<dl>
<dt><label for="impressionSite">Impression Site</label></dt>
<dd><input id="impressionSite" value="publisher.example" /></dd>
<dt><label for="impressionIntermediary">Intermediary Site</label></dt>
<dd><input id="impressionIntermediary" /></dd>
<dt><label for="histogramIndex">Histogram Index</label></dt>
<dd>
<input type="number" required id="histogramIndex" />
</dd>
<dt><label for="matchValue">Match Value</label></dt>
<dd><input type="number" id="matchValue" /></dd>
<dt><label for="lifetimeDays">Lifetime Days</label></dt>
<dd><input type="number" id="lifetimeDays" /></dd>
<dt><label for="priority">Priority</label></dt>
<dd><input type="number" id="priority" /></dd>
<dt><label for="conversionSites">Conversion Sites</label></dt>
<dd><input id="conversionSites" /></dd>
<dt><label for="conversionCallers">Conversion Callers</label></dt>
<dd><input id="conversionCallers" /></dd>
</dl>
<button>Submit</button>
<output>
<h3>Results</h3>
<ol></ol>
</output>
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Impression Site</th>
<th>Intermediary Site</th>
<th>Histogram Index</th>
<th>Match Value</th>
<th>Lifetime Days</th>
<th>Priority</th>
<th>Conversion Sites</th>
<th>Conversion Callers</th>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
<form id="measureConversion">
<h2>Measure Conversion</h2>
<dl>
<dt><label for="conversionSite">Conversion Site</label></dt>
<dd>
<input id="conversionSite" value="advertiser.example" />
</dd>
<dt><label for="conversionIntermediary">Intermediary Site</label></dt>
<dd><input id="conversionIntermediary" /></dd>
<dt><label for="histogramSize">Histogram Size</label></dt>
<dd><input type="number" required id="histogramSize" /></dd>
<dt><label for="lookbackDays">Lookback Days</label></dt>
<dd><input type="number" id="lookbackDays" /></dd>
<dt><label for="matchValues">Match Values</label></dt>
<dd>
<input id="matchValues" pattern="^\s*([0-9]+)(\s+[0-9]+)*\s*$" />
</dd>
<dt><label for="logic">Logic</label></dt>
<dd>
<select id="logic">
<option>last-n-touch</option>
</select>
</dd>
<dt><label for="credit">Credit</label></dt>
<dd>
<input
id="credit"
pattern="^\s*([0-9]+(\.[0-9]+)?)(\s+[0-9]+(\.[0-9]+)?)*\s*$"
value="1"
/>
</dd>
<dt><label for="value">Value</label></dt>
<dd><input type="number" id="value" /></dd>
<dt><label for="maxValue">Max Value</label></dt>
<dd><input type="number" id="maxValue" /></dd>
<dt><label for="epsilon">Epsilon</label></dt>
<dd>
<input type="number" id="epsilon" />
</dd>
<dt><label for="impressionSites">Impression Sites</label></dt>
<dd><input id="impressionSites" /></dd>
<dt><label for="impressionCallers">Impression Callers</label></dt>
<dd><input id="impressionCallers" /></dd>
</dl>
<button>Submit</button>
<output>
<h3>Results</h3>
<ol></ol>
</output>
</form>
</div>
</body>
</html>
Loading
Loading