techservicesillinois · ddriddle · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,7 @@
+# Makefile targets
+.server
+.server.logs
+
 # aspell files
 *.bak
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,25 +1,21 @@
 # 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.
 
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+flask
diff --git a/src/.gitkeep b/src/.gitkeep
diff --git a/src/web/Cookie-Banner-CSP.part.html b/src/web/Cookie-Banner-CSP.part.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en-US">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="profile" href="https://gmpg.org/xfn/11">
+    <title>Illinois Cookie Banner</title>
+    <meta name='robots' content='max-image-preview:large' />
+    <link rel='dns-prefetch' href='//cdn.toolkit.illinois.edu' />
+    <link rel='dns-prefetch' href='//cdn.disability.illinois.edu' />
+    <link rel='dns-prefetch' href='//stackpath.bootstrapcdn.com' />
+    <link rel='dns-prefetch' href='//kit.fontawesome.com' />
+    <link rel='dns-prefetch' href='//cdn.jsdelivr.net' />
+    <link rel="alternate" type="application/rss+xml" title="Illinois Web Theme &raquo; Feed"
+        href="https://webtheme.illinois.edu/feed/" />
+    <link rel="alternate" type="application/rss+xml" title="Illinois Web Theme &raquo; Comments Feed"
+        href="https://webtheme.illinois.edu/comments/feed/" />
+
+    <link rel='stylesheet' id='toolkit-css' href='https://cdn.toolkit.illinois.edu/2.16/toolkit.css?ver=6.6.2'
+        media='all' />
+
+    <link rel='stylesheet' id='main-css-css'
+        href='https://webtheme.illinois.edu/wp-content/themes/uofi-2020/style.css?ver=240229-01525' media='all' />
+    <script src="https://cdn.toolkit.illinois.edu/2.16/toolkit.js?ver=6.6.2" id="toolkit-js"></script>
+    <script src="https://webtheme.illinois.edu/wp-includes/js/jquery/jquery.min.js?ver=3.7.1"
+        id="jquery-core-js"></script>
+    <script src="https://webtheme.illinois.edu/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1"
+        id="jquery-migrate-js"></script>
+    <script src="https://webtheme.illinois.edu/wp-content/themes/uofi-2020/js/main.js?ver=240229-01525"
+        id="main_js-js"></script>
+    <script src="https://webtheme.illinois.edu/wp-content/themes/uofi-2020/js/skipto.config.js"
+        id="skiptoconf-js"></script>
+    <script src="https://cdn.disability.illinois.edu/skipto.min.js" id="skipto-js"></script>
+
+    <link rel="icon" href="https://cdn.brand.illinois.edu/favicon.ico">
+
+
+    <style>
+        body {
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 1.6666666667em;
+            font-family: var(--il-font-sans);
+        }
+
+        p, h2 {
+            /* Test for CSS bug that can break contrast. */
+            /* This CSS should lose to CSS in the Cookie Notice files. */
+            color: black;
+            font-family: "proxima-nova-alt", sans-serif;
+        }
+
+        a {
+            transition: color 0.3s;
+            color: var(--ila-cookieb-link-color);
+            text-decoration: underline;
+        }
+
+        a:focus,
+        a:hover {
+            outline-style: none;
+            color: var(--il-focused-link-color);
+        }
+
+        .button-holder {
+            display: flex;
+            position: relative;
+            z-index: 10;
+        }
+
+        .button-holder button {
+            margin-right: 5px;
+        }
+
+        .page-wrapper {
+            margin: 30px auto 0 auto;
+            padding: 0 30px;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="masthead" class="site-header">
+        <div class="masthead_inner d-flex justify-content-between align-items-stretch">
+            <div class="il-header-wrapper flex-grow-1">
+                <il-header>
+                    <div slot="wordmark">
+                        <il-unit-wordmark>
+                            <p class="il-primary-unit"><a href="https://appdev.illinois.edu/">Application Development
+                                    Standards</a></p>
+                            <h1 class="il-secondary-unit"><a
+                                    href="https://app-illinois.github.io/Design-Resources/">Application Development UX
+                                    Components</a></h1>
+                        </il-unit-wordmark>
+                    </div>
+                </il-header>
+            </div>
+        </div>
+    </header><!-- #masthead -->
+
+    <il-page id="primary">
+
+        <div class="page-wrapper" style="margin-bottom: 30px;">
+            <div>
+                <h1>Illinois Cookie Banner</h1>
+                <p>
+                    Provides a Cookie Notification Banner that includes
+                    buttons to open a slideout where more information can
+                    be provided to the User
+                </p>
+                <p>
+                    This page gives an example of serving all Cookie Banner resources locally,
+                    which may be required when using stronger Content Security Policy headers.
+                </p>
+            </div>
+
+            <div>
+                <h2>Placement</h2>
+                <p>
+                    Use with JavaScript onload functionality
+                </p>
+            </div>
+
+            <div>
+                <h2>Behavior</h2>
+                <p>
+                    Places a notification at the bottom of the screen
+                </p>
+            </div>
+
+            <div>
+                <h2>Accessibility Guidelines </h2>
+                <p>
+                    Colors and behavior of the button and banner styles have been chosen in-line with brand and
+                    accessibility guidelines
+                </p>
+            </div>
+
+            <div>
+                <h2>Example</h2>
+                <p>
+                    The Cookie Banner is presented after loading this page
+                </p>
+                <p><a href="Cookie-Banner.html">Illinois example here.</a></p>
+                <p><a href="Cookie-Banner-UIC.html">UIC example here.</a></p>
+                <p><a href="Cookie-Banner-UIS.html">UIS example here.</a></p>
+                <button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings il-button">
+                    About Cookies
+                </button>
+                <p>
+                    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.
+                </p>
+                <p>
+                    Press the button below to remove the cookie.
+                </p>
+                <button class="il-button" onClick="unsetCookieNoticeCookie()">
+                    Re-Show Cookie Notice
+                </button>
+            </div>
+
+            <div>
+                <h2>Link</h2>
+                <p>
+                    <a href="https://github.com/app-illinois/Design-Resources/tree/develop/applications/ila-cookie-banner"
+                        target="_blank">Link to this standard in GitHub</a>
+                </p>
+            </div>
+
+        </div><!-- closes page wrapper -->
+
+    </il-page>
+
+    <footer id="colophon" class="site-footer">
+        <il-footer>
+            <div slot="contact" class="il-footer-contact uofi_address">
+                <p><a href="https://appdev.illinois.edu/">Application Development Standards</a></p>
+            </div>
+            <nav slot="links" class="il-footer-links" aria-label="Legal notices">
+                <ul>
+                    <li><a data-il="privacy"></a></li>
+                    <li><a data-il="copyright"></a></li>
+                    <li><a data-il="accessibility"></a></li>
+                </ul>
+            </nav>
+        </il-footer>
+    </footer><!-- #colophon -->
+
+    <script data-cookie-fetch="no" src="js/ila-cookie-banner.js"></script>
+
+    <!-- Locally server all necessary CSS: -->
+    <link rel='stylesheet' href='css/ila-cookie-banner.css'/>
+    <link rel='stylesheet' href='css/ila-slideover.css'/>
+    <link rel='stylesheet' href='css/ila-cookie-uiuc-colors.css'/>
+
+    <!-- Embed all HTML from `ila-cookie-banner-content.part.html` into each page.
+
+        Typically this should be done with a server-side include (SSI).
+
+        Appending the raw HTML to each page also works.
+
+        Notice that the contents of `ila-cookie-banner-content.part.html` 
+        were appended after `</html>` when this serverless demo page was built.
+    -->
+
+</body>
+
+</html>