Add Development Mode warning.

robobario · robobario · commit 140983e07abe · 2025-07-18T10:12:06.000+12:00
Adds a transparent warning to the top right of the page when in
development environment. This is the default jekyll environment so in
the action I'm setting it to production for the real deal, though
nothing acts on the "production" value currently.

Swaps the favicon for a grayscale version to distinguish it.

We are considering deploying a development verstion of the website
continuously to GitHub pages somewhere, so we need a way to disambiguate
from the main page in case someone stumbles on it. It will also make it
immediately clear when developing locally that we are looking at a dev
deployment.

Signed-off-by: Robert Young &lt;robeyoun@redhat.com&gt;
diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml
@@ -70,7 +70,7 @@ jobs:
             -u "$(id -u):$(id -g)" \
             -v "$(pwd):/site" \
             localhost:5000/kroxy-jekyll:latest \
-            bash -c 'eval "$(rbenv init -)" && cp -r /css/_sass/bootstrap /site/_sass/ && bundle exec jekyll build --config=_config.yml,_config-overrides.yml'
+            bash -c 'eval "$(rbenv init -)" && cp -r /css/_sass/bootstrap /site/_sass/ && JEKYLL_ENV=production bundle exec jekyll build --config=_config.yml,_config-overrides.yml'
         env:
           JEKYLL_ENV: production
       - name: Upload artifact
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,16 +1,23 @@
+{%- assign favicon = '/favicon.ico' -%}
+{% if jekyll.environment == "development" %}
+  {%- assign favicon = '/snapshot-favicon.ico' -%}
+{% endif %}
 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }} | {{ site.description }}</title>
-    <link rel="icon" href="{{ '/favicon.ico' | absolute_url }}" type="image/x-icon" />
+    <link rel="icon" href="{{ favicon | absolute_url }}" type="image/x-icon" />
     <link rel="stylesheet" href="{{ '/css/style.css' | absolute_url }}" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" integrity="sha512-oAvZuuYVzkcTc2dH5z1ZJup5OmSQ000qlfRvuoTTiyTBjwX1faoyearj8KdMq0LgsBTHMrRuMek7s+CxF8yE+w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js" integrity="sha512-X/YkDZyjTf4wyc2Vy16YGCPHwAY8rZJY+POgokZjQB2mhIRFJCckEGc6YyX9eNsPfn0PzThEuNs+uaomE5CO6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     {% seo %}
 </head>
 <body class="d-flex flex-column min-vh-100" data-bs-theme="light">
+{% if jekyll.environment == "development" %}
+   <div class="dev-watermark">Development Mode</div>
+{% endif %}
 {% include nav.html %}
 <div class="container-fluid px-0 krx-content" data-bs-theme="light">
     {{ content }}
diff --git a/_sass/kroxylicious.scss b/_sass/kroxylicious.scss
@@ -290,3 +290,19 @@ b.conum * {
 .conum:not([data-value]):empty {
   display: none
 }
+
+.dev-watermark {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9999;
+
+  padding: 5px 10px;
+  background: rgba(255, 193, 7, 0.5);
+  color: #000;
+  font-family: $font-family-sans-serif;
+  font-size: 1.1em;
+  font-weight: bold;
+  
+  pointer-events: none; /* Clicks will "pass through" the watermark */
+}
diff --git a/snapshot-favicon.ico b/snapshot-favicon.ico
