chore: add archived notice to docs site (#4351)

Author: pfulton

.storybook/assets/index.css

@@ -36,6 +36,30 @@ body:lang(he) {
 	font-family: var(--spectrum-font-family-he);
 }
 
+#archived-notice {
+	background-color: rgb(215, 50, 32);
+	color: rgb(255, 255, 255);
+	font-family:
+		adobe-clean,
+		"Source Sans Pro",
+		-apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		Ubuntu,
+		"Trebuchet MS",
+		"Lucida Grande",
+		sans-serif;
+	font-size: 16px;
+	padding: 6px;
+	text-align: center;
+}
+
+#archived-notice a {
+	color: rgb(255, 255, 255);
+	text-decoration: underline;
+}
+
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;

.storybook/manager.js

@@ -9,6 +9,14 @@ import pkg from "./package.json";
 const root = document.body ?? document.documentElement;
 if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium");
 
+const archivedNotice = document.createElement("div");
+archivedNotice.id = "archived-notice";
+archivedNotice.innerHTML = `
+  <p>This documentation is archived. It is no longer being updated, but is available for reference. <br>View the <a href='https://github.com/adobe/spectrum-web-components/blob/main/CONTRIBUTOR-DOCS/README.md'>Spectrum Web Components contribution guidelines</a> for more information on how to contribute to the project.</p>
+`;
+
+root.insertBefore(archivedNotice, root.firstChild);
+
 addons.setConfig({
 	theme: create({
 		base: "light",