Merge pull request #101 from graphcore-research/top-notice-hiring

Add a hiring 'top notice' to every page
graphcore-research · Oct 10, 2024 · fa263fe · fa263fe
2 parents 88dbfad + acf7e78
commit fa263fe
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,4 +1,12 @@
 ---
+# Top Notice:
+#   If dismissed, it will stay hidden for expiry_ms
+#   Changing the label will re-show the notice
+#   Clearing cookies will re-show the notice
+#
+top_notice_text: "Graphcore Research are hiring!"
+top_notice_label: "hiring"
+top_notice_expiry_ms: 10080000  # 1 week (ms)
 ---
 
 <!doctype html>
@@ -13,11 +21,39 @@
 <head>
     {% include head.html %}
     {% include head/custom.html %}
+    <script>
+        // .top-notice
+        const topNoticeLabel = "{{ layout.top_notice_label }}";
+        const topNoticeExpiryMs = {{layout.top_notice_expiry_ms}};
+        function showTopNotice(s) {
+            for (const element of document.querySelectorAll(".top-notice,.top-notice-spacer")) {
+                element.style.display = s;
+            }
+        }
+        function onClickHideTopNotice() {
+            showTopNotice("none");
+            localStorage.setItem("dismiss-notice", topNoticeLabel);
+            localStorage.setItem("dismiss-notice-time", Date.now());
+        }
+        window.onload = function () {
+            if (topNoticeLabel !== "" && (
+                 (topNoticeLabel !== localStorage.getItem("dismiss-notice"))
+                 || (Date.now() > parseInt(localStorage.getItem("dismiss-notice-time")) + topNoticeExpiryMs))) {
+                showTopNotice("");  // Reset to CSS value
+            }
+        };
+    </script>
 </head>
 
 <body
     class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}">
     {% include_cached skip-links.html %}
+    <!-- .top-notice -->
+    <div class="top-notice-spacer" style="display: none;"></div>
+    <div class="top-notice" style="display: none;">
+        <a href="https://grnh.se/7120b5732us" target="_blank">{{layout.top_notice_text}}</a>
+        <span onclick="onClickHideTopNotice();">&#x2715;</span>
+    </div>
     {% include_cached masthead.html %}
 
     <div class="initial-content">

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -295,3 +295,34 @@ figcaption {
     margin-bottom: 0.75em;
     font-weight: bold;
 }
+
+.top-notice-spacer {
+    height: 1.25em;  // = top-notice.{font-size + 2*padding}
+    width: 100%;
+}
+.top-notice {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    text-align: center;
+    font-size: 0.75em;
+    padding: 0.25em;
+    font-weight: bold;
+    background-color: #ff6f7a;
+    z-index: 128; // nav has z-index 10
+}
+.top-notice a {
+    display: inline-block;
+    flex-grow: 1;
+    color: #FAF8F9;
+    text-decoration: none;
+}
+.top-notice span {
+    display: inline-block;
+    color: #FAF8F9;
+    padding-right: 1em;
+    padding-left: 1em;
+    cursor: pointer;
+}