Add v1 beta alert (#700)

tcbegley · web-flow · commit 5c2fe249e7ff · 2021-09-16T23:08:21.000+01:00
diff --git a/docs/static/js/v1-alert.js b/docs/static/js/v1-alert.js
@@ -0,0 +1,11 @@
+var v1AlertContainer = document.getElementById('dbc-v1-alert-container');
+
+if (!window.localStorage.getItem('dbc-v1-alert-seen')) {
+  v1AlertContainer.setAttribute('style', 'display:block');
+}
+
+$('#dbc-v1-alert').on('closed.bs.alert', function() {
+  console.log('triggered');
+  window.localStorage.setItem('dbc-v1-alert-seen', 'true');
+  v1AlertContainer.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/v1-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
@@ -13,6 +13,7 @@
   integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
   crossorigin="anonymous"
 ></script>
+<script src="/static/js/v1-alert.js"></script>
 <script src="/static/js/highlight.min.js"></script>
 <script>
   hljs.configure({ignoreUnescapedHTML: true});
diff --git a/docs/templates/partials/v1-alert.html b/docs/templates/partials/v1-alert.html
@@ -0,0 +1,24 @@
+<div id="dbc-v1-alert-container" style="display:none" class="mt-3 px-5">
+  <div
+    id="dbc-v1-alert"
+    class="alert alert-warning alert-dismissible mx-auto"
+    style="max-width:1000px;"
+    role="alert"
+  >
+    <i>dash-bootstrap-components</i> version 1 is in beta! Please check
+    <a
+      href="https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526"
+      class="alert-link"
+      >the announcement post</a
+    >
+    on the Plotly forum for more information, and the
+    <a class="alert-link" href="https://dbc-v1.herokuapp.com/migration-guide"
+      >migration guide</a
+    >
+    in the preview documentation for information on breaking changes, and how to
+    continue to use version 0 if you're not ready to upgrade.
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+</div>
