v4-dev: NES Edition

package.json

@@ -129,7 +129,7 @@
     "karma-qunit": "^4.1.2",
     "karma-sinon": "^1.0.5",
     "lockfile-lint": "^4.7.6",
-    "node-sass": "^7.0.1",
+    "node-sass": "^9.0.0",
     "nodemon": "^2.0.19",
     "npm-run-all": "^4.1.5",
     "popper.js": "^1.16.1",

site/assets/scss/_nav.scss

@@ -69,3 +69,12 @@
     background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem;
   }
 }
+
+.bd-announcement {
+  color: $white;
+  background-color: $bd-purple;
+  a {
+    color: $white;
+    text-decoration: underline;
+  }
+}

site/content/docs/4.6/end-of-life.md

@@ -0,0 +1,68 @@
+---
+layout: docs
+title: End of Life Status Bootstrap 4
+description: Get ongoing support, security fixes, and more with Bootstrap 4 thanks to Never-Ending Support from the folks at HeroDevs.
+group: end-of-life
+aliases: "/end-of-life/"
+toc: true
+---
+
+Bootstrap 3 was released over a decade ago in August 2013, and Bootstrap 4 over six years ago in January 2018. Since then, millions of people have learned Bootstrap, prototyped with it, and shipped some amazing sites and apps with it. While Bootstrap 5 is continuing that journey with developers all over the world, there are still tons of those teams living on an older version of Bootstrap with limited to no support. Until now.
+
+Bootstrap 3 reached end of life July 24, 2019, followed by Bootstrap 4 on January 1, 2023. As such, neither version receives new features, updates, or security fixes. However, both are still available on all existing distribution channels (CDNs, package managers, GitHub, etc).
+
+We strongly recommend folks start out on or [upgrade](https://getbootstrap.com/docs/5.3/migration/) to the [latest version of Bootstrap (v5.x)](https://getbootstrap.com/), but for those who can’t upgrade just yet and have compliance or security requirements, we’re introducing [Never-Ending Support for Bootstrap 3 and 4 with HeroDevs](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol).
+
+<a href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" class="btn btn-bd-primary">Purchase Bootstrap NES</a>
+
+## What’s Next
+
+Bootstrap 5 has been the default version of Bootstrap since May 5, 2021. Users who have migrated have enjoyed:
+
+- **No Dependency on jQuery**<br>
+  Bootstrap 5 completely removes jQuery as a dependency, opting instead for vanilla JavaScript. This change was aimed at improving performance, reducing project file sizes, and catering to modern development environments where jQuery is less prevalent.
+
+- **Enhanced Grid System**<br>
+  Bootstrap 5 further enhances the grid system with additional utility classes and improved customization options, making it even easier to create complex layouts. It also introduces the use of CSS custom properties (variables) for more dynamic styling.
+
+- **Improved Customization**<br>
+  Bootstrap 5 focuses heavily on custom properties (CSS variables), which are easier to use and allow for real-time theme customization without the need to recompile Sass. This makes theme customization far more accessible and dynamic.
+
+- **Updated Components and Utilities**<br>
+  Bootstrap 5 introduces new components (such as offcanvas menu for better mobile experiences) and updated existing components with new features and improved accessibility. It also expands Bootstraps utility API for spacing, typography, and color, providing more control over the design directly from the class attributes.
+
+- **Improved Accessibility**<br>
+  Accessibility has been a focus of Bootstrap, with each version making strides in ensuring web content is accessible to all users. Bootstrap 5 emphasizes improvements in form controls, color contrast ratios, and keyboard navigation to meet WCAG (Web Content Accessibility Guidelines) standards more closely.
+
+- **Enhanced Performance and Best Practices**<br>
+  By removing jQuery and making other optimizations, Bootstrap 5 aims to improve loading times and performance for websites and applications. Version 5 also embraces best practices for responsive design, encouraging a more mobile-first approach to layouts and interactions.
+
+- **Native Dark Mode Support**<br>
+  While not initially released with Bootstrap 5, subsequent updates have focused on native dark mode and custom color mode support, reflecting a growing trend in user interface design preferences.
+
+- **…and more!**<br>
+  When and if you can, consider migrating!
+
+## Still on Bootstrap 3 or 4?
+
+We know that some folks aren’t able to upgrade or fully migrate for one reason or another, so here are some other options to consider.
+
+### Update to the Bootstrap 3 or 4 Final Release (v3.4.1 / v4.6.2)
+
+The latest release of Bootstrap 3 (v3.4.1) and Bootstrap 4 (v4.6.2) were the final releases of these major versions and included security patches for XSS vulnerabilities (v3.x), bug fixes for enhanced stability, and updated documentation for better developer guidance.
+
+These versions will be the starting point for extended support mentioned below.
+
+### Purchase Extended Support for Bootstrap 3 and 4
+
+If you have to stay on Bootstrap 3 and 4 post-EOL, we have partnered with HeroDevs to offer Never-Ending Support (NES). NES for Bootstrap 3 and 4 provides ongoing updates and security patches for both versions even after EOL so that applications with strict compliance requirements remain secure and compliant. It also guarantees that Bootstrap 3 and Bootstrap 4 applications will continue to operate effectively in modern browsers and maintain compatibility with essential libraries. Finally, Bootstrap NES has continuous security monitoring and a 14-day SLA for fixes.
+
+Bootstrap NES is the continuation of the support you’ve enjoyed during the Bootstrap 3/4 LTS periods—but indefinitely. For more detailed information, visit the [HeroDevs Bootstrap NES page](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol).
+
+### Notify Your Users of your Bootstrap 3/4 Post-EOL Plan
+
+If you can’t migrate to Bootstrap 5 or use Bootstrap NES at the moment but still remain on Bootstrap 3 or 4, you may need to consider how you will communicate your security plans to your customers.
+
+This does not apply to all Bootstrap users, but many teams are prohibited from shipping unsupported software by SLAs, contracts and agreements, or other obligations to downstream parties. These could be with customers, compliance agencies, or even internal company departments. For an increasing number of industries, governing regulatory bodies are also raising expectations on what software creators are accountable for.
+
+If you work with such business requirements, You may need to let your customers, managers, CIO/CISO, or other relevant stakeholders know about your plan to manage, support and address any potential CVEs. While [Bootstrap 3 and 4 haven’t had any major vulnerabilities](https://security.snyk.io/package/npm/bootstrap) that have not received patches in later versions, CVEs do turn up for even the most mature EOL projects—whether directly or via compromised dependencies. Subscribing to CVE notifications through organizations like [OpenCVE](https://www.opencve.io/welcome) and [Snyk](https://snyk.io/) can be a good way to find out about vulnerabilities as soon as they’re discovered. Browsers may also ship changes that break legacy libraries—this is rare, but it does happen.

site/data/sidebar.yml

@@ -90,3 +90,5 @@
     - title: Brand
     - title: License
     - title: Translations
+
+- title: End of Life

site/layouts/_default/docs.html

@@ -6,6 +6,8 @@
   <body>
     {{ partial "skippy" . }}
 
+    {{ partial "announcement" . }}
+
     {{ partial "docs-navbar" . }}
 
     <div class="container-fluid">

site/layouts/_default/home.html

@@ -6,6 +6,8 @@
   <body>
     {{ partial "skippy" . }}
 
+    {{ partial "announcement" . }}
+
     {{ partial "docs-navbar" . }}
 
     {{ partial "home/masthead" . }}

site/layouts/_default/single.html

@@ -6,6 +6,8 @@
   <body>
     {{ partial "skippy" . }}
 
+    {{ partial "announcement" . }}
+
     {{ partial "docs-navbar" . }}
 
     <header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">

site/layouts/partials/announcement.html

@@ -0,0 +1,17 @@
+<div class="d-block px-3 py-2 text-center text-bold bd-announcement">
+  Bootstrap 4 has reached end of life.
+  <a
+    href="https://getbootstrap.com/docs/5.3/migration/"
+    target="_blank"
+    rel="noopener"
+    >Upgrade to the latest</a
+  >
+  or consider
+  <a
+    href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v4_eol"
+    target="_blank"
+    rel="noopener"
+    >Never-Ending Support</a
+  >
+  for your project.
+</div>