docs: v8.x Add EOL banner (#18744)

amareshsm · nzakas · web-flow · commit 6a5add41e809 · 2024-08-05T11:11:10.000-04:00
* docs: add EOL banner

* add indentation

* update links

* Update base.html

* Update docs/src/_includes/layouts/base.html

---------

Co-authored-by: Nicholas C. Zakas &lt;nicholas@humanwhocodes.com&gt;
diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
@@ -155,7 +155,27 @@
 
 <body class="{{ hook }}">
     <a href="#main" class="c-btn c-btn--primary" id="skip-link">Skip to main content</a>
-
+    <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="https://eslint.org/version-support/"> long-term support options </a>
+    </div>
     {{ content | safe }}
 
     <script src="{{ '/assets/js/css-vars-ponyfill@2.js' | url }}"></script>
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
@@ -214,3 +214,34 @@ pre[class*="language-"] {
         right: 25px;
     }
 }
+
+.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;
+        }
+    }
+}
