chore: simplify banner (#9246)

adds a new server route that contains banner data, that site-kit can read through its new banner components/helpers and display correctly

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

pnpm-lock.yaml

@@ -188,8 +188,8 @@ importers:
         specifier: ^1.27.6
         version: 1.27.6(svelte@packages+svelte)(vite@4.5.0)
       '@sveltejs/site-kit':
-        specifier: 6.0.0-next.50
-        version: 6.0.0-next.50(@sveltejs/kit@1.27.6)(svelte@packages+svelte)
+        specifier: 6.0.0-next.53
+        version: 6.0.0-next.53(@sveltejs/kit@1.27.6)(svelte@packages+svelte)
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
@@ -1835,8 +1835,8 @@ packages:
       svelte-local-storage-store: 0.4.0(svelte@packages+svelte)
     dev: false
 
-  /@sveltejs/site-kit@6.0.0-next.50(@sveltejs/kit@1.27.6)(svelte@packages+svelte):
-    resolution: {integrity: sha512-kgJVREVGuhhNO1YfQwJelFsBqfJiPhP7J4ytGUg05FaYlNQn3jb+BMUo027fSRpLgAjCqoo0IzIwX6CSSqqyJg==}
+  /@sveltejs/site-kit@6.0.0-next.53(@sveltejs/kit@1.27.6)(svelte@packages+svelte):
+    resolution: {integrity: sha512-TWfM9YqfWfK0NIVLORWDMN9hGSbtPZf80ktnLK2tyn8uRlbnhDAPd6YufdvS4VA3vmwAJGY68GyqOIuqD7JJMg==}
     peerDependencies:
       '@sveltejs/kit': ^1.20.0
       svelte: ^4.0.0
@@ -1844,7 +1844,7 @@ packages:
       '@sveltejs/kit': 1.27.6(svelte@packages+svelte)(vite@4.5.0)
       esm-env: 1.0.0
       svelte: link:packages/svelte
-      svelte-local-storage-store: 0.6.0(svelte@packages+svelte)
+      svelte-local-storage-store: 0.6.4(svelte@packages+svelte)
     dev: true
 
   /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.3)(svelte@packages+svelte)(vite@4.5.0):
@@ -5961,11 +5961,11 @@ packages:
       svelte: link:packages/svelte
     dev: false
 
-  /svelte-local-storage-store@0.6.0(svelte@packages+svelte):
-    resolution: {integrity: sha512-UbCY/yT/YUadU5IX/gZkoRQnA+ebFZHKKQjlJvfWHnBj3CPe9sNn8ndxYz/xy4LUzGjuBLq8+wH5RYK54ba3wA==}
+  /svelte-local-storage-store@0.6.4(svelte@packages+svelte):
+    resolution: {integrity: sha512-45WoY2vSGPQM1sIQJ9jTkPPj20hYeqm+af6mUGRFSPP5WglZf36YYoZqwmZZ8Dt/2SU8lem+BTA8/Z/8TkqNLg==}
     engines: {node: '>=0.14'}
     peerDependencies:
-      svelte: ^3.48.0 || ^4.0.0
+      svelte: ^3.48.0 || >4.0.0
     dependencies:
       svelte: link:packages/svelte
     dev: true

sites/svelte.dev/package.json

@@ -30,7 +30,7 @@
     "@resvg/resvg-js": "^2.6.0",
     "@sveltejs/adapter-vercel": "^3.1.0",
     "@sveltejs/kit": "^1.27.6",
-    "@sveltejs/site-kit": "6.0.0-next.50",
+    "@sveltejs/site-kit": "6.0.0-next.53",
     "@types/cookie": "^0.6.0",
     "@types/node": "^20.10.2",
     "browserslist": "^4.22.1",

sites/svelte.dev/src/routes/+layout.server.js

@@ -1,9 +1,13 @@
+import { fetchBanner } from '@sveltejs/site-kit/components';
+
 export const load = async ({ url, fetch }) => {
-	const nav_list = await fetch('/nav.json').then((r) => r.json());
+	const nav_links = fetch('/nav.json').then((r) => r.json());
+	const banner = fetchBanner('svelte.dev', fetch);
 
 	return {
 		nav_title: get_nav_title(url),
-		nav_links: nav_list
+		nav_links,
+		banner
 	};
 };
 

sites/svelte.dev/src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script>
+	import '@sveltejs/site-kit/styles/index.css';
+
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
-	import { Icon, Shell } from '@sveltejs/site-kit/components';
+	import { Icon, Shell, Banners } from '@sveltejs/site-kit/components';
 	import { Nav, Separator } from '@sveltejs/site-kit/nav';
 	import { Search, SearchBox } from '@sveltejs/site-kit/search';
-	import '@sveltejs/site-kit/styles/index.css';
 
 	export let data;
 
@@ -68,6 +69,8 @@
 		</Nav>
 
 		<slot />
+
+		<Banners slot="banner-bottom" data={data.banner} />
 	</Shell>
 </div>
 

sites/svelte.dev/src/routes/_components/Hero.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { Icon } from '@sveltejs/site-kit/components';
 	import SvelteLogotype from './svelte-logotype.svg';
+
 	// @ts-ignore
 	import MachineDesktop from './svelte-machine-desktop.png?w=1200;2000;2800;4400&format=avif;webp;png;&as=picture';
 	// @ts-ignore

sites/svelte.dev/src/routes/banner.json/+server.js

@@ -0,0 +1,29 @@
+import { json } from '@sveltejs/kit';
+
+// This server route is used by all Svelte sites to load info about which banner to show.
+// site-kit contains components/helpers to make fetching+displaying them easier.
+export const GET = async () => {
+	return json(
+		/** @satisfies {Awaited<ReturnType<typeof import('@sveltejs/site-kit/components').fetchBanner>>} */ ([
+			{
+				id: 'advent2023',
+				start: new Date('1 Dec, 2023 00:00:00 UTC'),
+				end: new Date('24 Dec, 2024 23:59:59 UTC'),
+				arrow: true,
+				content: 'Svelte Advent 2023 is here!',
+				href: 'https://advent.sveltesociety.dev/'
+			},
+
+			// This one skips the blog post and just changes the link
+			{
+				id: 'advent2023-finished',
+				start: new Date('25 Dec, 2023 00:00:00 UTC'),
+				end: new Date('1 Jan, 2024 00:00:00 UTC'),
+				arrow: true,
+				content: 'Svelte Advent 2023 is over. See you next year!',
+				href: 'https://advent.sveltesociety.dev/'
+				// scope: ['svelte.dev, kit.svelte.dev'] // Dont show on learn.svelte.dev by not adding it to the array
+			}
+		])
+	);
+};

sites/svelte.dev/src/routes/docs/+layout.svelte

@@ -74,8 +74,7 @@
 			position: fixed;
 			left: 0;
 			top: var(--sk-nav-height);
-			overflow-x: hidden;
-			overflow-y: auto;
+			overflow: hidden;
 		}
 
 		.toc-container::before {