Add staging banner

2026-02-05 03:39:26 +00:00 · 2026-01-15 14:38:06 +01:00
parent c481b105c5
commit a2cae3f066
12 changed files with 70 additions and 9 deletions
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ Optional:
 | Variable | Description | Example Value |
 |----------|-------------|---------------|
 | `IMGFLOAT_COMMIT_URL_PREFIX` | Git commit URL prefix used for the build link badge (unset to hide the badge) | https://github.com/imgfloat/server/commit/ |
+| `IMGFLOAT_IS_STAGING` | Show a staging warning banner on non-broadcast pages when set to `1` | 1 |
 | `IMGFLOAT_MARKETPLACE_SCRIPTS_PATH` | Filesystem path to marketplace script seed directories (each containing `metadata.json`, optional `source.js`, optional `logo.png`, and optional `attachments/`) | /var/imgfloat/marketplace-scripts |
 | `IMGFLOAT_SYSADMIN_CHANNEL_ACCESS_ENABLED` | Allow sysadmins to manage any channel without being listed as a channel admin | true |
 | `TWITCH_REDIRECT_URI` | Override default redirect URI | http://localhost:8080/login/oauth2/code/twitch |
--- a/src/main/java/dev/kruhlmann/imgfloat/controller/ViewController.java
+++ b/src/main/java/dev/kruhlmann/imgfloat/controller/ViewController.java
@@ -16,6 +16,7 @@ import dev.kruhlmann.imgfloat.service.VersionService;
 import dev.kruhlmann.imgfloat.util.LogSanitizer;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.oauth2.client.authentication.OAuth2AuthenticationToken;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -34,6 +35,7 @@ public class ViewController {
    private final GithubReleaseService githubReleaseService;
    private final SystemAdministratorService systemAdministratorService;
    private final long uploadLimitBytes;
+    private final boolean isStaging;

    public ViewController(
        ChannelDirectoryService channelDirectoryService,
@@ -44,7 +46,8 @@ public class ViewController {
        AuthorizationService authorizationService,
        GithubReleaseService githubReleaseService,
        SystemAdministratorService systemAdministratorService,
-        long uploadLimitBytes
+        long uploadLimitBytes,
+        @Value("${IMGFLOAT_IS_STAGING:0}") String isStagingFlag
    ) {
        this.channelDirectoryService = channelDirectoryService;
        this.versionService = versionService;
@@ -55,6 +58,7 @@ public class ViewController {
        this.githubReleaseService = githubReleaseService;
        this.systemAdministratorService = systemAdministratorService;
        this.uploadLimitBytes = uploadLimitBytes;
+        this.isStaging = "1".equals(isStagingFlag);
    }

    @org.springframework.web.bind.annotation.GetMapping("/")
@@ -67,9 +71,11 @@ public class ViewController {
            model.addAttribute("channel", sessionUsername);
            model.addAttribute("adminChannels", channelDirectoryService.adminChannelsFor(sessionUsername));
            model.addAttribute("isSystemAdmin", authorizationService.userIsSystemAdministrator(sessionUsername));
+            addStagingAttribute(model);
            addVersionAttributes(model);
            return "dashboard";
        }
+        addStagingAttribute(model);
        addVersionAttributes(model);
        return "index";
    }
@@ -77,6 +83,7 @@ public class ViewController {
    @org.springframework.web.bind.annotation.GetMapping("/channels")
    public String channelDirectory(Model model) {
        LOG.info("Rendering channel directory");
+        addStagingAttribute(model);
        addVersionAttributes(model);
        return "channels";
    }
@@ -84,6 +91,7 @@ public class ViewController {
    @org.springframework.web.bind.annotation.GetMapping("/terms")
    public String termsOfUse(Model model) {
        LOG.info("Rendering terms of use");
+        addStagingAttribute(model);
        addVersionAttributes(model);
        return "terms";
    }
@@ -91,6 +99,7 @@ public class ViewController {
    @org.springframework.web.bind.annotation.GetMapping("/privacy")
    public String privacyPolicy(Model model) {
        LOG.info("Rendering privacy policy");
+        addStagingAttribute(model);
        addVersionAttributes(model);
        return "privacy";
    }
@@ -98,6 +107,7 @@ public class ViewController {
    @org.springframework.web.bind.annotation.GetMapping("/cookies")
    public String cookiePolicy(Model model) {
        LOG.info("Rendering cookie policy");
+        addStagingAttribute(model);
        addVersionAttributes(model);
        return "cookies";
    }
@@ -116,6 +126,7 @@ public class ViewController {
            throw new ResponseStatusException(INTERNAL_SERVER_ERROR, "Failed to serialize settings");
        }
        model.addAttribute("initialSysadmin", systemAdministratorService.getInitialSysadmin());
+        addStagingAttribute(model);
        return "settings";
    }

@@ -144,6 +155,7 @@ public class ViewController {
            LOG.error("Failed to serialize settings for admin view", e);
            throw new ResponseStatusException(INTERNAL_SERVER_ERROR, "Failed to serialize settings");
        }
+        addStagingAttribute(model);

        return "admin";
    }
@@ -167,4 +179,8 @@ public class ViewController {
        model.addAttribute("buildCommitShort", gitInfoService.getShortCommitSha());
        model.addAttribute("buildCommitUrl", gitInfoService.getCommitUrl());
    }
+
+    private void addStagingAttribute(Model model) {
+        model.addAttribute("isStaging", isStaging);
+    }
 }
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -22,6 +22,34 @@ body {
    padding: 0;
 }

+body.has-staging-banner {
+    padding-top: 44px;
+}
+
+.staging-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    padding: 8px 16px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    font-weight: 700;
+    background: repeating-linear-gradient(135deg, #111827 0 18px, #facc15 18px 36px);
+}
+
+.staging-banner span {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background: #111827;
+    color: #facc15;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+}
+
 .landing-body {
    min-height: 100vh;
    background:
--- a/src/main/resources/templates/admin.html
+++ b/src/main/resources/templates/admin.html
@@ -29,7 +29,8 @@
        <script src="/js/vendor/OBJLoader.js"></script>
        <script src="/js/csrf.js"></script>
    </head>
-    <body class="admin-body">
+    <body class="admin-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <div class="admin-frame">
            <header class="admin-topbar">
                <div class="topbar-left">
--- a/src/main/resources/templates/cookies.html
+++ b/src/main/resources/templates/cookies.html
@@ -6,7 +6,8 @@
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/css/styles.css" />
    </head>
-    <body>
+    <body th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <main class="landing">
            <header class="landing-header">
                <div class="brand">
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -8,7 +8,8 @@
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/css/styles.css" />
    </head>
-    <body class="dashboard-body">
+    <body class="dashboard-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <div class="dashboard-shell">
            <header class="dashboard-topbar">
                <div class="brand">
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -6,7 +6,8 @@
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/css/styles.css" />
    </head>
-    <body class="error-body">
+    <body class="error-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <div class="error-shell">
            <header class="error-header">
                <div class="brand">
--- a/src/main/resources/templates/fragments/staging.html
+++ b/src/main/resources/templates/fragments/staging.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+    <body>
+        <div th:fragment="banner" th:if="${isStaging}" class="staging-banner" role="status">
+            <span>Staging environment</span>
+        </div>
+    </body>
+</html>
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -6,7 +6,8 @@
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/css/styles.css" />
    </head>
-    <body class="landing-body">
+    <body class="landing-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <div class="landing">
            <header class="landing-header">
                <div class="brand">
--- a/src/main/resources/templates/privacy.html
+++ b/src/main/resources/templates/privacy.html
@@ -6,7 +6,8 @@
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/css/styles.css" />
    </head>
-    <body>
+    <body th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <main class="landing">
            <header class="landing-header">
                <div class="brand">
--- a/src/main/resources/templates/settings.html
+++ b/src/main/resources/templates/settings.html
@@ -18,7 +18,8 @@
        <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
        <script src="/js/csrf.js"></script>
    </head>
-    <body class="settings-body">
+    <body class="settings-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <div class="settings-shell">
            <header class="settings-header">
                <div class="brand">
--- a/src/main/resources/templates/terms.html
+++ b/src/main/resources/templates/terms.html
@@ -6,7 +6,8 @@
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/css/styles.css" />
    </head>
-    <body>
+    <body th:classappend="${isStaging} ? ' has-staging-banner' : ''">
+        <div th:insert="~{fragments/staging :: banner}"></div>
        <main class="landing">
            <header class="landing-header">
                <div class="brand">