Merge pull request #9975 from marmelab/add-react-admin-v5-banner

Add banner about react-admin v5 release
marmelab · Jul 4, 2024 · dbafb81 · dbafb81
2 parents 5d6b19b + 20f4915
commit dbafb81
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 0 deletions.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -95,6 +95,15 @@
                 font-family: 'Helvetica', sans-serif;
                 color: #c0ccda;
             }
+
+            #closeBanner {
+                cursor: pointer;
+            }
+            @media screen and (max-width: 576px) {
+                #closeBanner {
+                    display: none;
+                }
+            }
         </style>
         <link
             rel="stylesheet"
@@ -104,6 +113,37 @@
 
     <body>
         <header>
+            <span
+                id="banner"
+                style="
+                    background-color: #db2777;
+                    padding: 3px;
+                    text-align: center;
+                    color: #fff;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.75rem;
+                "
+            >
+                <span aria-hidden="true" id="randomEmoji"></span>
+                <span style="text-align: center">
+                    📣 React-admin v5 is here! Read the
+                    <a
+                        style="text-decoration: underline; color: #fff"
+                        href="https://marmelab.com/blog/2024/06/20/react-admin-v5.html"
+                        >announcement blog post</a
+                    >. 📣
+                </span>
+                <span
+                    id="closeBanner"
+                    aria-label="Close"
+                    style="position: absolute; right: 10px"
+                >
+                    <span aria-hidden="true">X</span>
+                </span>
+            </span>
             {% include nav.html %}
             <ul id="slide-out" class="sidenav sidenav-fixed">
                 <li class="logo">
@@ -198,5 +238,20 @@
             defer
             src="https://unpkg.com/[email protected]/parser-babel.js"
         ></script>
+        <script>
+            function hideBanner() {
+                const banner = document.getElementById('banner');
+                if (banner) {
+                    banner.style.display = 'none';
+                }
+            }
+            const closeBanner = document.getElementById('closeBanner');
+            if (closeBanner) {
+                closeBanner.addEventListener('click', e => {
+                    e.preventDefault();
+                    hideBanner();
+                });
+            }
+        </script>
     </body>
 </html>
diff --git a/docs/documentation.html b/docs/documentation.html
@@ -88,6 +88,14 @@
                 font-family: 'Helvetica', sans-serif;
                 color: #c0ccda;
             }
+            #closeBanner {
+                cursor: pointer;
+            }
+            @media screen and (max-width: 576px) {
+                #closeBanner {
+                    display: none;
+                }
+            }
         </style>
         <link
             rel="stylesheet"
@@ -97,6 +105,37 @@
 
     <body>
         <header>
+            <span
+                id="banner"
+                style="
+                    background-color: #db2777;
+                    padding: 3px;
+                    text-align: center;
+                    color: #fff;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.75rem;
+                "
+            >
+                <span aria-hidden="true" id="randomEmoji"></span>
+                <span style="text-align: center">
+                    📣 React-admin v5 is here! Read the
+                    <a
+                        style="text-decoration: underline; color: #fff"
+                        href="https://marmelab.com/blog/2024/06/20/react-admin-v5.html"
+                        >announcement blog post</a
+                    >. 📣
+                </span>
+                <span
+                    id="closeBanner"
+                    aria-label="Close"
+                    style="position: absolute; right: 10px"
+                >
+                    <span aria-hidden="true">X</span>
+                </span>
+            </span>
             {% include nav.html %}
             <ul id="slide-out" class="sidenav sidenav-fixed">
                 <li class="logo">
@@ -352,5 +391,20 @@ <h2>Recipes</h2>
             defer
             src="https://unpkg.com/[email protected]/parser-babel.js"
         ></script>
+        <script>
+            function hideBanner() {
+                const banner = document.getElementById('banner');
+                if (banner) {
+                    banner.style.display = 'none';
+                }
+            }
+            const closeBanner = document.getElementById('closeBanner');
+            if (closeBanner) {
+                closeBanner.addEventListener('click', e => {
+                    e.preventDefault();
+                    hideBanner();
+                });
+            }
+        </script>
     </body>
 </html>