Skip to content

Commit 6b4ac05

Browse files
PuruVJdummdidummRich-Harris
authored
banner: Svelte Hack 2024 (#618)
* Push * Oops update the link * Make font size bigger * Update apps/svelte.dev/src/routes/banner.json/+server.js * fix font * unhide the arrow on mobile, just looks like a weird title otherwise * remove indirection * simplify * rename css var * rename * remove :global * remove text-decoration: none * simplify markdown and css * use rem * finesse * increase contrast * change content and expiry date * tweaks * lint --------- Co-authored-by: Simon H <[email protected]> Co-authored-by: Rich Harris <[email protected]>
1 parent a28e194 commit 6b4ac05

File tree

12 files changed

+116
-237
lines changed

12 files changed

+116
-237
lines changed

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -189,8 +189,8 @@
189189
<style>
190190
.repl-outer {
191191
position: relative;
192-
height: calc(100% - var(--sk-nav-height) - var(--sk-banner-bottom-height));
193-
height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
192+
height: calc(100% - var(--sk-nav-height) - var(--sk-banner-height));
193+
height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-height));
194194
overflow: hidden;
195195
background-color: var(--sk-back-1);
196196
box-sizing: border-box;

‎apps/svelte.dev/src/routes/+layout.server.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { docs, index } from '$lib/server/content';
2-
import { fetchBanner } from '@sveltejs/site-kit/components';
3-
import type { NavigationLink } from '@sveltejs/site-kit';
2+
import type { BannerData, NavigationLink } from '@sveltejs/site-kit';
43

54
const nav_links: NavigationLink[] = [
65
{
@@ -52,8 +51,19 @@ const sections: Record<string, string> = {
5251
search: 'Search'
5352
};
5453

54+
const banner: BannerData = {
55+
id: 'sveltehack2024',
56+
start: new Date('22 Oct, 2024 00:00:00 UTC'),
57+
end: new Date('15 December, 2024 23:59:59 UTC'),
58+
arrow: true,
59+
content: {
60+
lg: 'Cast runes, win prizes: SvelteHack 2024',
61+
sm: 'SvelteHack 2024'
62+
},
63+
href: 'https://hack.sveltesociety.dev/2024'
64+
};
65+
5566
export const load = async ({ url, fetch }) => {
56-
const banner = await fetchBanner('svelte.dev', fetch);
5767
const nav_title = sections[url.pathname.split('/')[1]!] ?? '';
5868

5969
return {

‎apps/svelte.dev/src/routes/+layout.svelte‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
import '@sveltejs/site-kit/styles/index.css';
33
import { browser } from '$app/environment';
44
import { page } from '$app/stores';
5-
import { Shell, Banners } from '@sveltejs/site-kit/components';
5+
import { Shell, Banner } from '@sveltejs/site-kit/components';
66
import { Nav } from '@sveltejs/site-kit/nav';
7-
import { Search, SearchBox } from '@sveltejs/site-kit/search';
7+
import { SearchBox } from '@sveltejs/site-kit/search';
88
import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
99
import { beforeNavigate } from '$app/navigation';
1010
@@ -45,8 +45,10 @@
4545
{@render layout_children()}
4646
{/snippet}
4747

48-
{#snippet banner_bottom()}
49-
<Banners data={data.banner} />
48+
{#snippet banner()}
49+
{#if data.banner}
50+
<Banner banner={data.banner} />
51+
{/if}
5052
{/snippet}
5153
</Shell>
5254

‎apps/svelte.dev/src/routes/banner.json/+server.js‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
.toc-container {
4949
display: block;
5050
width: var(--sidebar-width);
51-
height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
51+
height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-height));
5252
position: fixed;
5353
left: 0;
5454
top: var(--sk-nav-height);

‎packages/site-kit/src/lib/components/Banner.svelte‎

Lines changed: 64 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,120 @@
11
<script lang="ts">
2-
import { onMount } from 'svelte';
32
import { quintOut } from 'svelte/easing';
43
import { fade } from 'svelte/transition';
4+
import { persisted } from 'svelte-persisted-store';
55
import Icon from './Icon.svelte';
6+
import type { BannerData } from '../types';
7+
import { browser } from '$app/environment';
68
7-
interface Props {
8-
/** Whether to show an arrow at the end */
9-
arrow?: boolean;
10-
/** Link to the event. It must be an absolute path (https://svelte.dev/blog/runes instead of /blog/runes) */
11-
href: string;
12-
content: {
13-
lg?: string;
14-
sm?: string;
15-
};
16-
close?: () => void;
17-
}
9+
let { banner }: { banner: BannerData } = $props();
10+
11+
const hidden = persisted<Record<string, boolean>>('svelte:hidden-banners', {});
12+
const time = +new Date();
1813
19-
let { arrow = false, href, content }: Props = $props();
14+
let visible = $derived(
15+
browser && !$hidden[banner.id] && time > +banner.start && time < +banner.end
16+
);
2017
21-
let show = $state(false);
22-
onMount(() => {
23-
setTimeout(() => {
24-
show = true;
25-
}, 300);
18+
$effect(() => {
19+
document.documentElement.style.setProperty('--sk-banner-height', visible ? '4.2rem' : '0px');
2620
});
2721
</script>
2822

29-
{#if show}
30-
<div class="banner-bottom" transition:fade={{ duration: 400, easing: quintOut }}>
31-
<div class="main-area">
32-
<a {href}>
33-
{#if content.lg}
34-
<span class="lg">{content.lg}</span>
35-
{/if}
23+
{#if visible}
24+
<div class="banner" transition:fade={{ duration: 400, easing: quintOut }}>
25+
<a href={banner.href}>
26+
{#if banner.content.lg}
27+
<span class="large">{banner.content.lg}</span>
28+
{/if}
3629

37-
{#if content.sm}
38-
<span class="sm">{content.sm}</span>
39-
{/if}
40-
</a>
30+
{#if banner.content.sm}
31+
<span class="small">{banner.content.sm}</span>
32+
{/if}
4133

42-
{#if arrow}
34+
{#if banner.arrow}
4335
<Icon name="arrow-right" size="1.2em" />
4436
{/if}
45-
</div>
46-
47-
<button class="close-button" onclick={() => close?.()}>
37+
</a>
38+
39+
<button
40+
aria-label="Dismiss"
41+
class="raised primary"
42+
onclick={() => {
43+
$hidden[banner.id] = true;
44+
}}
45+
>
4846
<Icon name="close" />
4947
</button>
5048
</div>
5149
{/if}
5250

5351
<style>
54-
.banner-bottom {
52+
.banner {
5553
position: fixed;
56-
bottom: 0;
54+
top: 0;
5755
left: 0;
5856
right: 0;
5957
z-index: 80;
60-
6158
display: flex;
6259
justify-content: center;
6360
align-items: center;
64-
61+
font: var(--sk-font-ui-medium);
6562
overflow-y: auto;
66-
6763
width: 100%;
68-
height: max-content;
69-
}
70-
71-
.banner-bottom {
72-
text-align: center;
64+
height: var(--sk-banner-height);
7365
background: var(--sk-theme-1-variant);
7466
color: white;
75-
padding: 8px;
76-
}
77-
78-
.banner-bottom :global(a) {
79-
color: hsl(0, 0%, 99%);
67+
padding: 0 4rem;
8068
}
8169
8270
button {
8371
position: absolute;
84-
top: 0;
85-
right: 1rem;
86-
87-
display: flex;
88-
align-items: center;
89-
72+
right: var(--sk-page-padding-side);
9073
height: 100%;
74+
width: 3.2rem;
75+
height: 3.2rem;
9176
}
9277
93-
.main-area {
94-
display: flex;
95-
align-items: center;
96-
gap: 0.6rem;
97-
}
98-
99-
.main-area :global(svg) {
100-
transition: transform 0.2s var(--quint-out);
78+
a {
79+
position: relative;
80+
color: inherit;
81+
width: 100%;
82+
overflow: hidden;
83+
text-overflow: ellipsis;
84+
white-space: pre;
85+
text-align: center;
86+
line-height: 1;
10187
}
10288
103-
.main-area:hover :global(svg) {
104-
transform: translateX(40%);
89+
span {
90+
position: relative;
91+
top: 0.05em;
10592
}
10693
107-
div :global(a[href]) {
108-
text-decoration: none;
109-
padding: 0;
94+
.large {
95+
display: none;
11096
}
11197
112-
a .lg {
98+
.small {
11399
display: initial;
114100
}
115101
116-
a .sm {
117-
display: none;
118-
}
119-
120-
@media screen and (max-width: 799px) {
121-
.banner-bottom {
122-
bottom: initial;
123-
top: 0;
102+
@media (min-width: 800px) {
103+
.banner {
104+
top: initial;
105+
bottom: 0;
124106
}
125107
126-
.main-area :global(svg) {
127-
display: none;
108+
button {
109+
right: 1rem;
128110
}
129111
130-
a .lg {
131-
display: none;
112+
.large {
113+
display: initial;
132114
}
133115
134-
a .sm {
135-
display: initial;
116+
.small {
117+
display: none;
136118
}
137119
}
138120
</style>

0 commit comments

Comments
 (0)