Add decomission banner (#1692)

acelaya · web-flow · commit 4ede0a5fc002 · 2025-12-03T09:32:46.000+01:00
* Add decomission banner

* Update decomission banner date and post link
diff --git a/via/templates/index.html.jinja2 b/via/templates/index.html.jinja2
@@ -67,9 +67,21 @@
     .annotate-btn:hover {
       background-color: #d00032;
     }
+
+    .decommission-banner {
+        padding: 10px 15px;
+        background: #fceedb;
+        position: relative;
+        z-index: 1000;
+        font-weight: bold;
+        border: 1px solid #fbc168;
+    }
   </style>
 </head>
 <body>
+  <div class="decommission-banner">
+      Access to Via is being restricted as of Monday, February 2nd, 2026. You can find information <a href="https://web.hypothes.is/blog/changes-to-via-hypothesis-proxy-server-for-annotation/" target="_blank">here</a>, and you can <a href="https://web.hypothes.is/get-help/" target="_blank">reach our team here</a>.
+  </div>
   <div class="content">
     <a href="https://hypothes.is">
       <svg xmlns="http://www.w3.org/2000/svg"
diff --git a/via/templates/proxy.html.jinja2 b/via/templates/proxy.html.jinja2
@@ -17,7 +17,7 @@
 
     .proxied-content-iframe {
       position: fixed;
-      top: 0;
+      top: 40px;
       left: 0;
       bottom: 0;
       right: 0;
@@ -98,6 +98,14 @@
         opacity: 0.0;
       }
     }
+
+    .decommission-banner {
+        padding: 10px 15px;
+        background: #fceedb;
+        position: relative;
+        font-weight: bold;
+        border: 1px solid #fbc168;
+    }
   </style>
 
   <script>
@@ -154,10 +162,23 @@
       history.replaceState(null, document.title, viaURL);
     }
   });
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const frame = /** @type {HTMLElement} */  document.getElementById('proxied-content-iframe');
+    const banner = document.getElementById('decommission-banner');
+    const observer = new ResizeObserver(() => {
+      const { height } = banner.getBoundingClientRect();
+      frame.style.top = `${height}px`;
+    });
+    observer.observe(frame);
+  });
   </script>
 </head>
   <body>
-    <iframe class="js-content-frame proxied-content-iframe" allow="clipboard-write" src={{ src }}></iframe>
+    <div class="decommission-banner" id="decommission-banner">
+        Access to Via is being restricted as of Monday, February 2nd, 2026. You can find information <a href="https://web.hypothes.is/blog/changes-to-via-hypothesis-proxy-server-for-annotation/" target="_blank">here</a>, and you can <a href="https://web.hypothes.is/get-help/" target="_blank">reach our team here</a>.
+    </div>
+    <iframe id="proxied-content-iframe" class="js-content-frame proxied-content-iframe" allow="clipboard-write" src={{ src }}></iframe>
 
     {# Loading indicator.
 
