Skip to content

Commit 5172753

Browse files
fzaninottofzaninotto
authored
Merge pull request #10944 from marmelab/shadcn-banner-gh-pages
[website] Add banner to announce Shadcn Admin Kit - `gh-pages`
2 parents 2ce9751 + 488b9bf commit 5172753

File tree

10 files changed

+186
-19
lines changed

10 files changed

+186
-19
lines changed

‎_includes/banner.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div
2+
id="banner"
3+
style="
4+
background-color: #db2777;
5+
padding: 6px 20px;
6+
text-align: center;
7+
justify-content: center;
8+
display: none;
9+
"
10+
>
11+
<!-- <a
12+
href="https://react-admin.lemonsqueezy.com/"
13+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
14+
>
15+
<span aria-hidden="true" id="randomEmoji"></span>
16+
<span style="text-align: center">
17+
<strong> - Save 30% on all yearly plans </strong>
18+
until December 20th with code
19+
<strong>XMAS</strong>
20+
<strong>&gt;</strong>
21+
</span>
22+
</a> -->
23+
<a
24+
href="https://marmelab.com/shadcn-admin-kit/"
25+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
26+
>
27+
<span style="text-align: center">
28+
📣 React-admin for Shadcn UI is here! Check out
29+
<b>Shadcn Admin Kit</b>
30+
📣
31+
</span>
32+
</a>
33+
<span
34+
id="closeBanner"
35+
aria-label="Close"
36+
style="position: absolute; right: 10px; top: 6px"
37+
>
38+
<a href="javascript:hideBanner()" style="color: #fff">
39+
<span>✕</span>
40+
</a>
41+
</span>
42+
</div>

‎_includes/banner_script.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
function hideBanner() {
3+
const banner = document.getElementById("banner");
4+
if (banner) {
5+
banner.style.display = "none";
6+
}
7+
window.localStorage.setItem("hideBannerDate", Date.now().toString());
8+
}
9+
const hideBannerDate = parseInt(
10+
window.localStorage.getItem("hideBannerDate") || "0",
11+
10
12+
);
13+
if (
14+
!hideBannerDate ||
15+
Date.now() - hideBannerDate > 14 * 24 * 60 * 60 * 1000
16+
) {
17+
const emojis = ["🎄", "🎅", "🎁", "🎉", "🦌", "🤶", "🌟", "🔔", "🧦"];
18+
const randomEmoji = document.getElementById("randomEmoji");
19+
if (randomEmoji) {
20+
randomEmoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
21+
}
22+
const banner = document.getElementById("banner");
23+
if (banner) {
24+
banner.style.display = "flex";
25+
}
26+
}
27+
</script>

‎_layouts/default.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105

106106
<body>
107107
<header>
108+
{% include banner.html %}
108109
{% include nav.html %}
109110
<ul id="slide-out" class="sidenav sidenav-fixed">
110111
<li class="logo">
@@ -192,5 +193,7 @@
192193

193194
var AUTOHIDE = Boolean(0);
194195
</script>
196+
197+
{% include banner_script.html %}
195198
</body>
196199
</html>

assets/index-f983711d.js renamed to assets/index-a858c906.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

assets/index-be231f7c.css renamed to assets/index-d537f6f8.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎documentation.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797

9898
<body>
9999
<header>
100+
{% include banner.html %}
100101
{% include nav.html %}
101102
<ul id="slide-out" class="sidenav sidenav-fixed">
102103
<li class="logo">
@@ -361,5 +362,7 @@ <h2>Recipes</h2>
361362

362363
var AUTOHIDE = Boolean(0);
363364
</script>
365+
366+
{% include banner_script.html %}
364367
</body>
365368
</html>

‎index.html‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,53 @@
2323
content="https://marmelab.com/react-admin/img/react-admin-banner.jpg"
2424
/>
2525

26-
<script type="module" crossorigin src="./assets/index-f983711d.js"></script>
27-
<link rel="stylesheet" href="./assets/index-be231f7c.css">
26+
<script type="module" crossorigin src="./assets/index-a858c906.js"></script>
27+
<link rel="stylesheet" href="./assets/index-d537f6f8.css">
2828
</head>
2929

3030
<body>
31+
<div
32+
id="banner"
33+
style="
34+
background-color: #db2777;
35+
padding: 6px 20px;
36+
text-align: center;
37+
justify-content: center;
38+
display: none;
39+
"
40+
>
41+
<!-- <a
42+
href="https://react-admin.lemonsqueezy.com/"
43+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
44+
>
45+
<span aria-hidden="true" id="randomEmoji"></span>
46+
<span style="text-align: center">
47+
<strong> - Save 30% on all yearly plans </strong>
48+
until December 20th with code
49+
<strong>XMAS</strong>
50+
<strong>&gt;</strong>
51+
</span>
52+
</a> -->
53+
<a
54+
href="https://marmelab.com/shadcn-admin-kit/"
55+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
56+
>
57+
<span style="text-align: center">
58+
📣 React-admin for Shadcn UI is here! Check out
59+
<strong>Shadcn Admin Kit</strong>
60+
📣
61+
</span>
62+
</a>
63+
<span
64+
id="closeBanner"
65+
aria-label="Close"
66+
style="position: absolute; right: 10px; top: 6px"
67+
>
68+
<a href="javascript:hideBanner()" style="color: #fff">
69+
<span>✕</span>
70+
</a>
71+
</span>
72+
</div>
3173
<nav class="bg-[#00023b] text-white">
3274
<div
3375
class="mx-auto max-w-screen-xl px-4 py-2 md:px-8 md:py-5 lg:px-16 lg:py-8"

‎landing-page/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,48 @@
2626
</head>
2727

2828
<body>
29+
<div
30+
id="banner"
31+
style="
32+
background-color: #db2777;
33+
padding: 6px 20px;
34+
text-align: center;
35+
justify-content: center;
36+
display: none;
37+
"
38+
>
39+
<!-- <a
40+
href="https://react-admin.lemonsqueezy.com/"
41+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
42+
>
43+
<span aria-hidden="true" id="randomEmoji"></span>
44+
<span style="text-align: center">
45+
<strong> - Save 30% on all yearly plans </strong>
46+
until December 20th with code
47+
<strong>XMAS</strong>
48+
<strong>&gt;</strong>
49+
</span>
50+
</a> -->
51+
<a
52+
href="https://marmelab.com/shadcn-admin-kit/"
53+
style="color: #fff; display: flex; align-items: center; gap: 0.5rem"
54+
>
55+
<span style="text-align: center">
56+
📣 React-admin for Shadcn UI is here! Check out
57+
<strong>Shadcn Admin Kit</strong>
58+
📣
59+
</span>
60+
</a>
61+
<span
62+
id="closeBanner"
63+
aria-label="Close"
64+
style="position: absolute; right: 10px; top: 6px"
65+
>
66+
<a href="javascript:hideBanner()" style="color: #fff">
67+
<span>✕</span>
68+
</a>
69+
</span>
70+
</div>
2971
<nav class="bg-[#00023b] text-white">
3072
<div
3173
class="mx-auto max-w-screen-xl px-4 py-2 md:px-8 md:py-5 lg:px-16 lg:py-8"

‎landing-page/src/main.ts‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import "./style.css";
2+
import "./newsletter.css";
23

34
const GITHUB_API_URL = "https://api.github.com/repos/marmelab/react-admin";
45

@@ -114,11 +115,27 @@ function hideBanner() {
114115
if (banner) {
115116
banner.style.display = "none";
116117
}
118+
window.localStorage.setItem("hideBannerDate", Date.now().toString());
117119
}
118-
const closeBanner = document.getElementById("closeBanner");
119-
if (closeBanner) {
120-
closeBanner.addEventListener("click", (e) => {
121-
e.preventDefault();
122-
hideBanner();
123-
});
120+
// Extend Window interface to include hideBanner
121+
declare global {
122+
interface Window {
123+
hideBanner: typeof hideBanner;
124+
}
125+
}
126+
window.hideBanner = hideBanner;
127+
const hideBannerDate = parseInt(
128+
window.localStorage.getItem("hideBannerDate") || "0",
129+
10
130+
);
131+
if (!hideBannerDate || Date.now() - hideBannerDate > 14 * 24 * 60 * 60 * 1000) {
132+
const emojis = ["🎄", "🎅", "🎁", "🎉", "🦌", "🤶", "🌟", "🔔", "🧦"];
133+
const randomEmoji = document.getElementById("randomEmoji");
134+
if (randomEmoji) {
135+
randomEmoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
136+
}
137+
const banner = document.getElementById("banner");
138+
if (banner) {
139+
banner.style.display = "flex";
140+
}
124141
}

‎landing-page/src/style.css‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,3 @@ body {
113113
calc(var(--scroll) * var(--translate-speed) * var(--translate-base))
114114
);
115115
}
116-
117-
#closeBanner {
118-
cursor: pointer;
119-
}
120-
@media screen and (max-width: 576px) {
121-
#closeBanner {
122-
display: none;
123-
}
124-
}

0 commit comments

Comments
 (0)