feat: add EOF banner (#609)

* feat: add EOF banner * address the review comments * fix styling * Update links Co-authored-by: Nicholas C. Zakas <[email protected]> * Update src/_includes/layouts/base.html Co-authored-by: 唯然 <[email protected]> --------- Co-authored-by: Nicholas C. Zakas <[email protected]> Co-authored-by: 唯然 <[email protected]>
eslint · Aug 5, 2024 · 7cea70b · 7cea70b
1 parent d535593
commit 7cea70b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html
@@ -155,6 +155,25 @@
 </head>
 
 <body class="{{ hook | replace('_', '-') }}">
+    <div class="deprecation-notice">
+        <svg class="hourglass-icon" fill="#ffffff" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" viewBox="796 796 200 200"
+            enable-background="new 796 796 200 200" xml:space="preserve">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+                <g>
+                    <path
+                        d="M939.738,967.044c-2.866-16.875-12.071-32.797-25.945-42.713c-7.738-5.529-13.828-8.004-17.793-8.004 c-3.966,0-10.056,2.475-17.794,8.004c-13.875,9.916-23.08,25.838-25.946,42.713c-0.203,1.199,0.132,2.426,0.917,3.354 c0.784,0.928,1.938,1.462,3.153,1.462h79.338c1.214,0,2.365-0.536,3.149-1.463C939.602,969.469,939.941,968.241,939.738,967.044z">
+                    </path>
+                    <path
+                        d="M966.479,980.01h-5.077v-9.202c0-27.228-13.174-53.007-35.243-68.963l-8.084-5.843l8.084-5.847 c22.067-15.952,35.243-41.732,35.243-68.961v-9.203h5.077c4.415,0,7.995-3.58,7.995-7.996c0-4.415-3.58-7.995-7.995-7.995H825.522 c-4.416,0-7.996,3.58-7.996,7.995c0,4.416,3.58,7.996,7.996,7.996h5.074v11.397c0,23.987,13.374,48.915,35.775,66.679l7.485,5.936 l-7.485,5.934c-22.401,17.763-35.775,42.688-35.775,66.678v11.396h-5.074c-4.416,0-7.996,3.579-7.996,7.995 c0,4.415,3.58,7.995,7.996,7.995h140.956c4.415,0,7.995-3.58,7.995-7.995C974.474,983.589,970.894,980.01,966.479,980.01z M842.59,968.614c0-20.361,11.677-41.774,31.233-57.28l7.791-6.177c2.812-2.232,4.423-5.568,4.423-9.155 c0-3.59-1.613-6.928-4.425-9.157l-7.789-6.176c-19.557-15.508-31.233-36.921-31.233-57.281v-5.544c0-3.232,2.621-5.853,5.854-5.853 h95.112c3.232,0,5.853,2.621,5.853,5.853v3.35c0,23.391-11.317,45.537-30.277,59.242l-8.429,6.097 c-3.03,2.19-4.839,5.73-4.839,9.47c0,3.738,1.809,7.279,4.84,9.472l8.429,6.091c18.959,13.707,30.276,35.854,30.276,59.243v3.349 c0,3.232-2.62,5.854-5.853,5.854h-95.112c-3.232,0-5.854-2.621-5.854-5.854V968.614L842.59,968.614z">
+                    </path>
+                </g>
+            </g>
+        </svg>
+        ESLint v8.x end-of-life is 2024-10-05 and will not be maintained after that. <a href="/docs/latest/use/migrate-to-9.0.0"> Upgrade </a>
+        or consider <a href="/version-support/"> long-term support options </a> </div>
     <a href="#main" class="c-btn c-btn--primary" id="skip-link">{{ site.shared.skip_to_content }}</a>
 
     {{ content | safe }}

diff --git a/src/assets/scss/homepage.scss b/src/assets/scss/homepage.scss
@@ -280,3 +280,34 @@
 		display: block;
 	}
 }
+
+.deprecation-notice {
+	font-size: 14px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 4px 0;
+	background-color: var(--color-neutral-500);
+	color: white;
+
+	a {
+		color: white;
+		padding: 0 4px;
+	}
+
+	.hourglass-icon {
+		margin-right: 5px;
+	}
+
+	@media all and (max-width: 865px) {
+		display: block;
+		text-align: center;
+		padding: 4px 6px;
+
+		.hourglass-icon {
+			position: relative;
+			margin-right: 0;
+			top: 2px;
+		}
+	}
+}