diff --git a/crates/bin/docs_rs_web/src/lib.rs b/crates/bin/docs_rs_web/src/lib.rs index 4ddbb8463..dfb76a77c 100644 --- a/crates/bin/docs_rs_web/src/lib.rs +++ b/crates/bin/docs_rs_web/src/lib.rs @@ -41,3 +41,11 @@ pub(crate) static GLOBAL_ALERT: Option = Some(GlobalAlert { fa_icon: "exclamation-triangle", }); */ + +pub(crate) fn get_alert() -> Option<(&'static str, usize)> { + Some(( + "We are changing which targets are built by default on May 1st.
\ + Learn more", + 1, + )) +} diff --git a/crates/bin/docs_rs_web/templates/alert.js b/crates/bin/docs_rs_web/templates/alert.js new file mode 100644 index 000000000..72992bbc6 --- /dev/null +++ b/crates/bin/docs_rs_web/templates/alert.js @@ -0,0 +1,16 @@ +(function() { + const alertCheckbox = document.getElementById("docsrs-alert-input"); + alertCheckbox.onchange = () => { + // If the user clicks on the "close button", we save this info in their local storage. + window.localStorage.setItem("hide-alert-id", alertCheckbox.getAttribute("data-id")); + }; + + const info = window.localStorage.getItem("hide-alert-id"); + if (info !== null) { + const alertId = alertCheckbox.getAttribute("data-id"); + // If the user already "closed" the alert, we don't show it anymore. + if (alertId === info) { + alertCheckbox.checked = true; + } + } +})(); diff --git a/crates/bin/docs_rs_web/templates/header/topbar_end.html b/crates/bin/docs_rs_web/templates/header/topbar_end.html index 6be3a52b5..34871edfd 100644 --- a/crates/bin/docs_rs_web/templates/header/topbar_end.html +++ b/crates/bin/docs_rs_web/templates/header/topbar_end.html @@ -123,3 +123,15 @@ + +{%- if let Some((alert, alert_id)) = crate::get_alert() -%} + + +
+ {{- crate::icons::IconCircleInfo.render_solid(false, false, "") -}} + {{- alert|safe -}} +
+ +{%- endif -%} diff --git a/crates/bin/docs_rs_web/templates/style/_navbar.scss b/crates/bin/docs_rs_web/templates/style/_navbar.scss index d904c05cb..e31017c4f 100644 --- a/crates/bin/docs_rs_web/templates/style/_navbar.scss +++ b/crates/bin/docs_rs_web/templates/style/_navbar.scss @@ -407,3 +407,53 @@ i.dependencies.normal { visibility: hidden; display: none; } + +#docsrs-alert-input { + display: none; +} +#docsrs-alert-hide { + z-index: 100001; // Must be one more than `#docsrs-alert`'s z-index. + right: 16px; + top: calc(#{$top-navbar-height} + 11px); + position: fixed; + cursor: pointer; + font-size: 1.3rem; + color: #ddd; +} +#docsrs-alert-hide:hover { + color: #fff; +} +#docsrs-alert { + position: fixed; + z-index: 100000; + right: 10px; + top: calc(#{$top-navbar-height} + 10px); + width: 40ch; + background: #3ea2ff; + border-radius: 6px; + font-family: $font-family-sans; + color: #fff; + display: flex; + + > .fa { + padding: 0 10px; + align-content: center; + background: #64b4ff; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + + > .alert-text { + padding: 8px; + padding-right: 4ch; + + a { + color: #fff; + text-decoration: underline; + } + } +} +#docsrs-alert-input:checked + label + #docsrs-alert, +#docsrs-alert-input:checked + label { + display: none; +}