From 46b904d8cb6d63ea49b7fb9eb621c5230e1103d0 Mon Sep 17 00:00:00 2001
From: rofe <github@rofe.com>
Date: Mon, 18 Mar 2024 20:03:09 +0100
Subject: [PATCH 1/3] feat: deprecation banner

---
 blocks/deprecation/deprecation.css | 10 ++++++++++
 blocks/deprecation/deprecation.js  |  0
 scripts/scripts.js                 | 14 ++++++++++++++
 3 files changed, 24 insertions(+)
 create mode 100644 blocks/deprecation/deprecation.css
 create mode 100644 blocks/deprecation/deprecation.js

diff --git a/blocks/deprecation/deprecation.css b/blocks/deprecation/deprecation.css
new file mode 100644
index 00000000..cc484800
--- /dev/null
+++ b/blocks/deprecation/deprecation.css
@@ -0,0 +1,10 @@
+.deprecation {
+  padding: 10px 16px;
+  margin-bottom: 16px;
+  background-color: var(--color-gray-500);
+  color: #fff;
+  border-radius: var(--image-border-radius-l);
+  font-size: var(--type-body-s-size);
+  line-height: var(--type-body-s-lh);
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/blocks/deprecation/deprecation.js b/blocks/deprecation/deprecation.js
new file mode 100644
index 00000000..e69de29b
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 044297c9..f5996417 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -623,6 +623,20 @@ async function loadEager(doc) {
     }
   }
 
+  // deprecation banner
+  const deprecation = getMetadata('deprecation');
+  if (deprecation) {
+    const deprecationBanner = buildBlock('deprecation', deprecation);
+    const h1 = document.querySelector('h1');
+    if (h1) {
+      // insert above title
+      h1.parentElement.insertBefore(deprecationBanner, h1);
+    } else {
+      // insert at top of page
+      document.querySelector('main > div').append(deprecationBanner);
+    }
+  }
+
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);

From 3e3c90ece828ad1f65ee57215cfc72cdaed0a5e9 Mon Sep 17 00:00:00 2001
From: rofe <github@rofe.com>
Date: Mon, 18 Mar 2024 20:14:38 +0100
Subject: [PATCH 2/3] feat: deprecation banner header

---
 blocks/deprecation/deprecation.css | 5 +++++
 blocks/deprecation/deprecation.js  | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/blocks/deprecation/deprecation.css b/blocks/deprecation/deprecation.css
index cc484800..5bb3eea8 100644
--- a/blocks/deprecation/deprecation.css
+++ b/blocks/deprecation/deprecation.css
@@ -6,5 +6,10 @@
   border-radius: var(--image-border-radius-l);
   font-size: var(--type-body-s-size);
   line-height: var(--type-body-s-lh);
+}
+
+.deprecation .header {
+  font-weight: 700;
+  font-size: var(--type-body-m-size);
   text-transform: uppercase;
 }
\ No newline at end of file
diff --git a/blocks/deprecation/deprecation.js b/blocks/deprecation/deprecation.js
index e69de29b..dfb71225 100644
--- a/blocks/deprecation/deprecation.js
+++ b/blocks/deprecation/deprecation.js
@@ -0,0 +1,6 @@
+export default function decorate(block) {
+  const header = document.createElement('div');
+  header.className = 'header';
+  header.textContent = 'Deprecation notice';
+  block.prepend(header);
+}

From f7af249b8114fe090f69c6056f70cca81c97ad5e Mon Sep 17 00:00:00 2001
From: rofe <github@rofe.com>
Date: Mon, 18 Mar 2024 20:31:01 +0100
Subject: [PATCH 3/3] chore: more in your face

---
 blocks/deprecation/deprecation.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/deprecation/deprecation.css b/blocks/deprecation/deprecation.css
index 5bb3eea8..31c7213f 100644
--- a/blocks/deprecation/deprecation.css
+++ b/blocks/deprecation/deprecation.css
@@ -1,7 +1,7 @@
 .deprecation {
   padding: 10px 16px;
   margin-bottom: 16px;
-  background-color: var(--color-gray-500);
+  background-color: #d31510;
   color: #fff;
   border-radius: var(--image-border-radius-l);
   font-size: var(--type-body-s-size);