Add Development Mode warning.

robobario · robobario · commit f1249e542b48 · 2025-07-16T09:15:21.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.

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
@@ -11,6 +11,9 @@
     {% 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 */
+}
