Add v2 alert (#1095)

tcbegley · web-flow · commit 7e5d9786cbfe · 2025-03-03T19:45:38.000Z
diff --git a/docs/static/js/v2-alert.js b/docs/static/js/v2-alert.js
@@ -0,0 +1,11 @@
+var migrationAlertContainer = document.getElementById('v2-alert-container');
+
+if (!window.localStorage.getItem('dbc-v2-alert-seen')) {
+  migrationAlertContainer.setAttribute('style', 'display:block');
+}
+
+var migrationAlert = document.getElementById('v2-alert');
+migrationAlert.addEventListener('closed.bs.alert', function () {
+  window.localStorage.setItem('dbc-v2-alert-seen', 'true');
+  migrationAlertContainer.setAttribute('style', 'display:none');
+});
diff --git a/docs/templates/base.html b/docs/templates/base.html
@@ -6,6 +6,7 @@
   </head>
   <body>
     {% block header %}{% endblock %}
+    {% include "partials/v2-alert.html" %}
     {% block body %}{% endblock %}
     {% block scripts %}{% include "partials/scripts.html" %}{% endblock %}
   </body>
diff --git a/docs/templates/partials/scripts.html b/docs/templates/partials/scripts.html
@@ -1,4 +1,5 @@
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+<script src="/static/js/v2-alert.js"></script>
 <script src="/static/js/highlight.min.js"></script>
 <script>
   hljs.configure({ignoreUnescapedHTML: true})
diff --git a/docs/templates/partials/v2-alert.html b/docs/templates/partials/v2-alert.html
@@ -0,0 +1,9 @@
+<div id="v2-alert-container" style="display:none" class="mt-3 px-5">
+    <div id="v2-alert" class="alert alert-warning alert-dismissible mx-auto" style="max-width:1000px;"
+        role="alert">
+        You are viewing the documentation for
+        <i>dash-bootstrap-components</i> version 2! Please check our
+        <a href="/changelog">changelog</a> for details on breaking changes.
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+</div>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>`
	`2`	`+<script src="/static/js/v2-alert.js"></script>`
`2`	`3`	`<script src="/static/js/highlight.min.js"></script>`
`3`	`4`	`<script>`
`4`	`5`	`hljs.configure({ignoreUnescapedHTML: true})`