diff --git a/.gitignore b/.gitignore index 84518c1..31767a0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ +# 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 new file mode 100644 index 0000000..9df2fd9 --- /dev/null +++ b/Makefile @@ -0,0 +1,24 @@ +.PHONY: server + +server: .server +.server: + bin/server & + +logs: + cat .server.logs + +tail: + tail -f .server.logs + +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 new file mode 100755 index 0000000..70b6ef3 --- /dev/null +++ b/bin/server @@ -0,0 +1,13 @@ +#!/bin/bash + +cd test +flask run > ../.server.logs 2>&1 & +PID=$! +echo $PID > ../.server + +cleanup() { + rm ../.server +} +trap cleanup EXIT + +wait $PID 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/.gitkeep b/src/.gitkeep deleted file mode 100644 index e69de29..0000000 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. +

+ +
+ +
+

Link

+

+ Link to this standard in GitHub +

+
+ +
+ + + + + + + + + + + + + + + + + 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. +

+ +
+ +
+

Link

+

+ Link to this standard in GitHub +

+
+ +
+ + + + + + + + + + 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. +

+ +
+ +
+

Link

+

+ Link to this standard in GitHub +

+
+ +
+ + + + + + + + + + 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. +

+ +
+ +
+

Link

+

+ Link to this standard in GitHub +

+
+ +
+ + + + + + + + + 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..5aa3503 --- /dev/null +++ b/test/app.py @@ -0,0 +1,10 @@ +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)) + +@app.route("/") +def stupid_hack(): + return ''