Merge pull request #10945 from marmelab/shadcn-banner-master

fzaninotto · web-flow · commit 4f9fb43dc092 · 2025-09-18T15:05:47.000+02:00
[website] Add banner to announce Shadcn Admin Kit - `master`
diff --git a/docs/_includes/banner.html b/docs/_includes/banner.html
@@ -0,0 +1,42 @@
+<div
+    id="banner"
+    style="
+        background-color: #db2777;
+        padding: 6px 20px;
+        text-align: center;
+        justify-content: center;
+        display: none;
+    "
+>
+    <!-- <a
+    href="https://react-admin.lemonsqueezy.com/"
+    style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
+  >
+    <span aria-hidden="true" id="randomEmoji"></span>
+    <span style="text-align: center">
+      <strong> - Save 30% on all yearly plans </strong>
+      until December 20th with code
+      <strong>XMAS</strong>
+      <strong>&gt;</strong>
+    </span>
+  </a> -->
+    <a
+        href="https://marmelab.com/shadcn-admin-kit/"
+        style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
+    >
+        <span style="text-align: center">
+            📣 React-admin for Shadcn UI is here! Check out
+            <b>Shadcn Admin Kit</b>
+            📣
+        </span>
+    </a>
+    <span
+        id="closeBanner"
+        aria-label="Close"
+        style="position: absolute; right: 10px; top: 6px"
+    >
+        <a href="javascript:hideBanner()" style="color: #fff">
+            <span>✕</span>
+        </a>
+    </span>
+</div>
diff --git a/docs/_includes/banner_script.html b/docs/_includes/banner_script.html
@@ -0,0 +1,27 @@
+<script>
+  function hideBanner() {
+    const banner = document.getElementById("banner");
+    if (banner) {
+      banner.style.display = "none";
+    }
+    window.localStorage.setItem("hideBannerDate", Date.now().toString());
+  }
+  const hideBannerDate = parseInt(
+    window.localStorage.getItem("hideBannerDate") || "0",
+    10
+  );
+  if (
+    !hideBannerDate ||
+    Date.now() - hideBannerDate > 14 * 24 * 60 * 60 * 1000
+  ) {
+    const emojis = ["🎄", "🎅", "🎁", "🎉", "🦌", "🤶", "🌟", "🔔", "🧦"];
+    const randomEmoji = document.getElementById("randomEmoji");
+    if (randomEmoji) {
+      randomEmoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
+    }
+    const banner = document.getElementById("banner");
+    if (banner) {
+      banner.style.display = "flex";
+    }
+  }
+</script>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -105,6 +105,7 @@
 
     <body>
         <header>
+            {% include banner.html %}
             {% include nav.html %}
             <ul id="slide-out" class="sidenav sidenav-fixed">
                 <li class="logo">
@@ -192,5 +193,7 @@
 
             var AUTOHIDE = Boolean(0);
         </script>
+
+        {% include banner_script.html %}
     </body>
 </html>
diff --git a/docs/documentation.html b/docs/documentation.html
@@ -97,6 +97,7 @@
 
     <body>
         <header>
+            {% include banner.html %}
             {% include nav.html %}
             <ul id="slide-out" class="sidenav sidenav-fixed">
                 <li class="logo">
@@ -361,5 +362,7 @@ <h2>Recipes</h2>
 
             var AUTOHIDE = Boolean(0);
         </script>
+
+        {% include banner_script.html %}
     </body>
 </html>
