From f0e0aab91a64eb0f29497af0e6b5544fa663799e Mon Sep 17 00:00:00 2001 From: "David D. Riddle" Date: Thu, 12 Mar 2026 14:44:26 -0500 Subject: [PATCH 1/6] Add Makefile target server --- .gitignore | 3 +++ Makefile | 9 +++++++++ bin/server | 12 ++++++++++++ 3 files changed, 24 insertions(+) create mode 100644 Makefile create mode 100755 bin/server diff --git a/.gitignore b/.gitignore index 84518c1..940159c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +# Makefile targets +.server + # aspell files *.bak diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..9f24efa --- /dev/null +++ b/Makefile @@ -0,0 +1,9 @@ +.PHONY: server + +server: .server +.server: + bin/server & + +kill: + -kill $$(cat .server) + -rm .server diff --git a/bin/server b/bin/server new file mode 100755 index 0000000..5071ace --- /dev/null +++ b/bin/server @@ -0,0 +1,12 @@ +#!/bin/bash + +python -m http.server 8888 & +PID=$! +echo $PID > .server + +cleanup() { + rm .server +} +trap cleanup EXIT + +wait $PID From 80b31b6f59318cc814e7932c9a64400aa6e8f588 Mon Sep 17 00:00:00 2001 From: "David D. Riddle" Date: Thu, 12 Mar 2026 14:59:05 -0500 Subject: [PATCH 2/6] Add targets logs and tail --- .gitignore | 1 + CONTRIBUTING.md | 18 +++++++----------- Makefile | 9 +++++++++ bin/server | 2 +- 4 files changed, 18 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index 940159c..31767a0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # Makefile targets .server +.server.logs # aspell files *.bak diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 70f9b69..948da60 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,5 @@ # Local Testing / Debugging the Cookie Banner -1. Copy all necessary files to the `docs/js`, `docs/css`, and `docs/partials` folder. - - This happens automatically when the site is deployed, but must be done manually locally. - - On Linux or Mac run `setuppages.sh`. - - On Windows, use run `setuppages.ps1`. - 1. Run a mini local webserver. Modern browsers tend not to allow dynamic loading of page elements from local files, so a mini web server is needed when working on the cookie banner. @@ -15,11 +7,15 @@ If Python is available, a simple web server can be launched for testing using this command: ```shell - python -m http.server 8888 + make server ``` Once this mini web server is running, the pages can be tested by visiting `http://localhost:8888`. - To test the cookie banner, use the URL `http://localhost:8888/docs/Cookie-Banner.html`. - > Standard disclaimer: the Python mini web server is not acceptable for any production hosting. + + To stop the server run: + + ```shell + make kill + ``` diff --git a/Makefile b/Makefile index 9f24efa..f2f3244 100644 --- a/Makefile +++ b/Makefile @@ -4,6 +4,15 @@ server: .server .server: bin/server & +logs: + cat .server.logs + +tail: + tail -f .server.logs + kill: -kill $$(cat .server) -rm .server + +clean: kill + -rm .server.logs diff --git a/bin/server b/bin/server index 5071ace..e0c0af7 100755 --- a/bin/server +++ b/bin/server @@ -1,6 +1,6 @@ #!/bin/bash -python -m http.server 8888 & +python -m http.server 8888 >.server.logs 2>&1 & PID=$! echo $PID > .server From 81d382403b2ffa76848d4851214963a8d934f3f2 Mon Sep 17 00:00:00 2001 From: "David D. Riddle" Date: Thu, 12 Mar 2026 15:18:57 -0500 Subject: [PATCH 3/6] FIXUP --- Makefile | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Makefile b/Makefile index f2f3244..880b746 100644 --- a/Makefile +++ b/Makefile @@ -11,8 +11,8 @@ tail: tail -f .server.logs kill: - -kill $$(cat .server) - -rm .server + -kill -f $$(cat .server) + -rm -f .server clean: kill - -rm .server.logs + -rm -f .server.logs From 0fb1c0e45d48ec493eb79b920c5c62a02b4fa5f9 Mon Sep 17 00:00:00 2001 From: "David D. Riddle" Date: Thu, 12 Mar 2026 16:13:06 -0500 Subject: [PATCH 4/6] Add local dev server --- Makefile | 6 + bin/server | 7 +- bin/setuppages.ps1 | 21 ++ bin/setuppages.sh | 22 ++ requirements-test.in | 1 + src/web/Cookie-Banner-CSP.part.html | 208 ++++++++++++++++++ src/web/Cookie-Banner-UIC.html | 185 ++++++++++++++++ src/web/Cookie-Banner-UIS.html | 185 ++++++++++++++++ src/{ => web}/css/ila-cookie-banner.css | 0 src/{ => web}/css/ila-cookie-uic-colors.css | 0 src/{ => web}/css/ila-cookie-uis-colors.css | 0 src/{ => web}/css/ila-cookie-uiuc-colors.css | 0 .../css}/ila-slideover.css | 0 .../ila-cookie-banner-content.part.html | 0 .../ila-slideover.html | 0 src/web/index.html | 188 ++++++++++++++++ src/{ => web/js}/ila-cookie-banner.js | 0 .../js}/ila-slideover.js | 0 test/app.py | 6 + 19 files changed, 826 insertions(+), 3 deletions(-) create mode 100644 bin/setuppages.ps1 create mode 100755 bin/setuppages.sh create mode 100644 requirements-test.in create mode 100644 src/web/Cookie-Banner-CSP.part.html create mode 100644 src/web/Cookie-Banner-UIC.html create mode 100644 src/web/Cookie-Banner-UIS.html rename src/{ => web}/css/ila-cookie-banner.css (100%) rename src/{ => web}/css/ila-cookie-uic-colors.css (100%) rename src/{ => web}/css/ila-cookie-uis-colors.css (100%) rename src/{ => web}/css/ila-cookie-uiuc-colors.css (100%) rename src/{ila-slideovers => web/css}/ila-slideover.css (100%) rename src/{html => web}/ila-cookie-banner-content.part.html (100%) rename src/{ila-slideovers => web}/ila-slideover.html (100%) create mode 100644 src/web/index.html rename src/{ => web/js}/ila-cookie-banner.js (100%) rename src/{ila-slideovers => web/js}/ila-slideover.js (100%) create mode 100644 test/app.py diff --git a/Makefile b/Makefile index 880b746..9df2fd9 100644 --- a/Makefile +++ b/Makefile @@ -14,5 +14,11 @@ kill: -kill -f $$(cat .server) -rm -f .server +venv: .venv +.venv: requirements-test.in + rm -rf $@ + uv venv + uv pip install -r $< + clean: kill -rm -f .server.logs diff --git a/bin/server b/bin/server index e0c0af7..70b6ef3 100755 --- a/bin/server +++ b/bin/server @@ -1,11 +1,12 @@ #!/bin/bash -python -m http.server 8888 >.server.logs 2>&1 & +cd test +flask run > ../.server.logs 2>&1 & PID=$! -echo $PID > .server +echo $PID > ../.server cleanup() { - rm .server + rm ../.server } trap cleanup EXIT diff --git a/bin/setuppages.ps1 b/bin/setuppages.ps1 new file mode 100644 index 0000000..1fa10f7 --- /dev/null +++ b/bin/setuppages.ps1 @@ -0,0 +1,21 @@ +#!/bin/pwsh +# This script is not used in deployment, but assists in local development. +# This script is meant to exactly replicate `setuppages.sh`, on Windows. +# Apple and Linux developers should just run `setuppages.sh`. +$STAGE_DIR = 'docs' + +mkdir -p "$($STAGE_DIR)/css" -Force +mkdir -p "$($STAGE_DIR)/js" -Force +mkdir -p "$($STAGE_DIR)/partials" -Force + +Get-ChildItem -Recurse -Filter *.js -Path .\applications\ | Copy-Item -Destination "$($STAGE_DIR)\js\" -Force +Get-ChildItem -Recurse -Filter *.css -Path .\applications\ | Copy-Item -Destination "$($STAGE_DIR)\css\" -Force +Get-ChildItem -Recurse -Filter *.part.html -Path .\applications\ | Copy-Item -Destination "$($STAGE_DIR)\partials\" -Force + +Get-Content .\applications\ila-slideovers\ila-slideover.js | Out-File -Append "$($STAGE_DIR)\js\ila-cookie-banner.js" + + +# Append ila-cookie-banner.part.html to Cookie-Banner-CSP.html, immitating a Server Side Include +Get-Content "$(STAGE_DIR)\Cookie-Banner-CSP.part.html" | Out-File "$(STAGE_DIR)\Cookie-Banner-CSP.html" +Get-Content .\applications\ila-cookie-banner\ila-cookie-banner-content.part.html | Out-File -Append "$(STAGE_DIR)\Cookie-Banner-CSP.html" + diff --git a/bin/setuppages.sh b/bin/setuppages.sh new file mode 100755 index 0000000..c4c1443 --- /dev/null +++ b/bin/setuppages.sh @@ -0,0 +1,22 @@ +#!/bin/bash +DEPLOY_URL='https://app-illinois.github.io/Design-Resources' +STAGE_DIR='docs' + +mkdir -p $STAGE_DIR/css +mkdir -p $STAGE_DIR/js +mkdir -p $STAGE_DIR/partials + +find ./applications -iregex .*[.]js$ -exec cp {} $STAGE_DIR/js \; +find ./applications -name *.css -exec cp {} $STAGE_DIR/css \; +find ./applications -iregex .*[.]part[.]html$ -exec cp {} $STAGE_DIR/partials \; + +if [[ $OSTYPE == darwin* ]]; then + sed -i '' -e "s;DEPLOY_URL;$DEPLOY_URL;" $STAGE_DIR/js/ila-cookie-banner.js +else + sed -i "s;DEPLOY_URL;$DEPLOY_URL;" $STAGE_DIR/js/ila-cookie-banner.js +fi + +# Append ila-cookie-banner.part.html to Cookie-Banner-CSP.html, immitating a Server Side Include +cat $STAGE_DIR/Cookie-Banner-CSP.part.html > $STAGE_DIR/Cookie-Banner-CSP.html +cat applications/ila-cookie-banner/ila-cookie-banner-content.part.html >> $STAGE_DIR/Cookie-Banner-CSP.html + diff --git a/requirements-test.in b/requirements-test.in new file mode 100644 index 0000000..7e10602 --- /dev/null +++ b/requirements-test.in @@ -0,0 +1 @@ +flask diff --git a/src/web/Cookie-Banner-CSP.part.html b/src/web/Cookie-Banner-CSP.part.html new file mode 100644 index 0000000..fdfb2b6 --- /dev/null +++ b/src/web/Cookie-Banner-CSP.part.html @@ -0,0 +1,208 @@ + + + + + + + + Illinois Cookie Banner + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Illinois Cookie Banner

+

+ Provides a Cookie Notification Banner that includes + buttons to open a slideout where more information can + be provided to the User +

+

+ This page gives an example of serving all Cookie Banner resources locally, + which may be required when using stronger Content Security Policy headers. +

+
+ +
+

Placement

+

+ Use with JavaScript onload functionality +

+
+ +
+

Behavior

+

+ Places a notification at the bottom of the screen +

+
+ +
+

Accessibility Guidelines

+

+ Colors and behavior of the button and banner styles have been chosen in-line with brand and + accessibility guidelines +

+
+ +
+

Example

+

+ The Cookie Banner is presented after loading this page +

+

Illinois example here.

+

UIC example here.

+

UIS example here.

+ +

+ When the cookie banner is dismissed, a cookie is set to prevent it from displaying again for six months on any site that allows the cookie. +

+

+ Press the button below to remove the cookie. +

+ +
+ + + +
+ + + + + + + + + + + + + + + + + diff --git a/src/web/Cookie-Banner-UIC.html b/src/web/Cookie-Banner-UIC.html new file mode 100644 index 0000000..27beff2 --- /dev/null +++ b/src/web/Cookie-Banner-UIC.html @@ -0,0 +1,185 @@ + + + + + + + + UIC Cookie Banner + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

UIC Cookie Banner

+

+ Provides a Cookie Notification Banner that includes + buttons to open a slideout where more information can + be provided to the User +

+
+ +
+

Placement

+

+ Use with JavaScript onload functionality +

+
+ +
+

Behavior

+

+ Places a notification at the bottom of the screen +

+
+ +
+

Accessibility Guidelines

+

+ Colors and behavior of the button and banner styles have been chosen in-line with brand and + accessibility guidelines +

+
+ +
+

Example

+

+ The Cookie Banner is presented after loading this page +

+

Illinois example here.

+

UIS example here.

+

Content Security Policy example here.

+ +

+ When the cookie banner is dismissed, a cookie is set to prevent it from displaying again for six months on any site that allows the cookie. +

+

+ Press the button below to remove the cookie. +

+ +
+ + + +
+ + + + + + + + + + diff --git a/src/web/Cookie-Banner-UIS.html b/src/web/Cookie-Banner-UIS.html new file mode 100644 index 0000000..2c462ee --- /dev/null +++ b/src/web/Cookie-Banner-UIS.html @@ -0,0 +1,185 @@ + + + + + + + + UIS Cookie Banner + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

UIS Cookie Banner

+

+ Provides a Cookie Notification Banner that includes + buttons to open a slideout where more information can + be provided to the User +

+
+ +
+

Placement

+

+ Use with JavaScript onload functionality +

+
+ +
+

Behavior

+

+ Places a notification at the bottom of the screen +

+
+ +
+

Accessibility Guidelines

+

+ Colors and behavior of the button and banner styles have been chosen in-line with brand and + accessibility guidelines +

+
+ +
+

Example

+

+ The Cookie Banner is presented after loading this page +

+

Illinois example here.

+

UIC example here.

+

Content Security Policy example here.

+ +

+ When the cookie banner is dismissed, a cookie is set to prevent it from displaying again for six months on any site that allows the cookie. +

+

+ Press the button below to remove the cookie. +

+ +
+ + + +
+ + + + + + + + + + diff --git a/src/css/ila-cookie-banner.css b/src/web/css/ila-cookie-banner.css similarity index 100% rename from src/css/ila-cookie-banner.css rename to src/web/css/ila-cookie-banner.css diff --git a/src/css/ila-cookie-uic-colors.css b/src/web/css/ila-cookie-uic-colors.css similarity index 100% rename from src/css/ila-cookie-uic-colors.css rename to src/web/css/ila-cookie-uic-colors.css diff --git a/src/css/ila-cookie-uis-colors.css b/src/web/css/ila-cookie-uis-colors.css similarity index 100% rename from src/css/ila-cookie-uis-colors.css rename to src/web/css/ila-cookie-uis-colors.css diff --git a/src/css/ila-cookie-uiuc-colors.css b/src/web/css/ila-cookie-uiuc-colors.css similarity index 100% rename from src/css/ila-cookie-uiuc-colors.css rename to src/web/css/ila-cookie-uiuc-colors.css diff --git a/src/ila-slideovers/ila-slideover.css b/src/web/css/ila-slideover.css similarity index 100% rename from src/ila-slideovers/ila-slideover.css rename to src/web/css/ila-slideover.css diff --git a/src/html/ila-cookie-banner-content.part.html b/src/web/ila-cookie-banner-content.part.html similarity index 100% rename from src/html/ila-cookie-banner-content.part.html rename to src/web/ila-cookie-banner-content.part.html diff --git a/src/ila-slideovers/ila-slideover.html b/src/web/ila-slideover.html similarity index 100% rename from src/ila-slideovers/ila-slideover.html rename to src/web/ila-slideover.html diff --git a/src/web/index.html b/src/web/index.html new file mode 100644 index 0000000..d4e88ba --- /dev/null +++ b/src/web/index.html @@ -0,0 +1,188 @@ + + + + + + + + Illinois Cookie Banner + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Illinois Cookie Banner

+

+ Provides a Cookie Notification Banner that includes + buttons to open a slideout where more information can + be provided to the User +

+
+ +
+

Placement

+

+ Use with JavaScript onload functionality +

+
+ +
+

Behavior

+

+ Places a notification at the bottom of the screen +

+
+ +
+

Accessibility Guidelines

+

+ Colors and behavior of the button and banner styles have been chosen in-line with brand and + accessibility guidelines +

+
+ +
+

Example

+

+ The Cookie Banner is presented after loading this page +

+

UIC example here.

+

UIS example here.

+

Content Security Policy example here.

+ +

+ When the cookie banner is dismissed, a cookie is set to prevent it from displaying again for six months on any site that allows the cookie. +

+

+ Press the button below to remove the cookie. +

+ +
+ + + +
+ + + + + + + + + diff --git a/src/ila-cookie-banner.js b/src/web/js/ila-cookie-banner.js similarity index 100% rename from src/ila-cookie-banner.js rename to src/web/js/ila-cookie-banner.js diff --git a/src/ila-slideovers/ila-slideover.js b/src/web/js/ila-slideover.js similarity index 100% rename from src/ila-slideovers/ila-slideover.js rename to src/web/js/ila-slideover.js diff --git a/test/app.py b/test/app.py new file mode 100644 index 0000000..a709309 --- /dev/null +++ b/test/app.py @@ -0,0 +1,6 @@ +from pathlib import Path + +from flask import Flask + +WEB_PATH=Path(__file__).resolve().parent.parent / "src" / "web" +app = Flask(__name__, static_url_path="/", static_folder=str(WEB_PATH)) From 147d9c0ce138ee8865954db3eec68f0b17a6a899 Mon Sep 17 00:00:00 2001 From: "David D. Riddle" Date: Thu, 12 Mar 2026 16:13:32 -0500 Subject: [PATCH 5/6] FIXUP --- src/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/.gitkeep diff --git a/src/.gitkeep b/src/.gitkeep deleted file mode 100644 index e69de29..0000000 From a8402fbee8b75bc1a3a68e728dee021b83a62186 Mon Sep 17 00:00:00 2001 From: "David D. Riddle" Date: Thu, 12 Mar 2026 16:16:28 -0500 Subject: [PATCH 6/6] FIXUP --- test/app.py | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/app.py b/test/app.py index a709309..5aa3503 100644 --- a/test/app.py +++ b/test/app.py @@ -4,3 +4,7 @@ WEB_PATH=Path(__file__).resolve().parent.parent / "src" / "web" app = Flask(__name__, static_url_path="/", static_folder=str(WEB_PATH)) + +@app.route("/") +def stupid_hack(): + return ''