chore(sites.docs): migrate home page and root layout to Svetle 5

sites/docs-v5/src/lib/contexts/settings.svelte.ts

@@ -0,0 +1,59 @@
+import { getContext, setContext } from 'svelte';
+
+import { browser } from '$app/environment';
+import { PUBLIC_COOKIE_SETTINGS_COLOR_SCHEME, PUBLIC_COOKIE_SETTINGS_PACKAGE_MANAGER } from '$env/static/public';
+
+const SETTINGS_CONTEXT_ID = 'settings';
+
+export const DEFAULT_SETTINGS = {
+	colorScheme: 'system',
+	packageManager: 'npm',
+} satisfies App.Settings;
+
+/**
+ * requires `window.matchMedia` (only in browser context)
+ * @returns user's color scheme preference
+ */
+function getPreferredColorScheme() {
+	if (!browser) return 'light';
+	return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export class Settings {
+	colorScheme: App.ColorScheme = $state(DEFAULT_SETTINGS.colorScheme);
+	preferredColorScheme = $derived.by(() => {
+		if (this.colorScheme === 'system') return getPreferredColorScheme();
+		return this.colorScheme;
+	});
+	packageManager: App.PackageManager = $state(DEFAULT_SETTINGS.packageManager);
+
+	constructor(init: App.Settings) {
+		this.colorScheme = init.colorScheme;
+		this.packageManager = init.packageManager;
+
+		// persist color scheme to cookie
+		$effect(() => {
+			if (browser) {
+				document.documentElement.dataset.colorScheme = this.colorScheme;
+				document.cookie = `${PUBLIC_COOKIE_SETTINGS_COLOR_SCHEME}=${this.colorScheme}; path=/; SameSite=Lax; Secure; Max-Age=604800`;
+			}
+		});
+
+		// persist package manager to cookie
+		$effect(() => {
+			if (browser) {
+				this.packageManager = init.packageManager;
+				document.cookie = `${PUBLIC_COOKIE_SETTINGS_PACKAGE_MANAGER}=${this.packageManager}; path=/; SameSite=Lax; Secure; Max-Age=604800`;
+			}
+		});
+	}
+
+	static createContext(init: App.Settings) {
+		return setContext(SETTINGS_CONTEXT_ID, new Settings(init));
+	}
+
+	static getContext() {
+		return getContext(SETTINGS_CONTEXT_ID) as Settings;
+	}
+}
+

sites/docs-v5/src/lib/css/app.css

@@ -0,0 +1,55 @@
+@import url('./fonts/fingerpaint/fingerpaint.font.css');
+@import url('@sveltevietnam/ui/css/fonts.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors */
+@custom-selector :--current
+	:is([data-current]:not([data-current='false']), [aria-current]:not([aria-current='false']));
+
+@layer base {
+  :root {
+    --header-height: 90px;
+    --sidebar-width: 250px;
+
+		@screen md {
+			--pad-min-padding-x: 24px;
+		}
+
+    @screen lg {
+      --sidebar-width: 230px;
+    }
+
+    @screen xl {
+      --header-height: 55px;
+			--pad-min-padding-x: 32px;
+    }
+
+		@screen pc {
+			--pad-max-width: 1920px;
+		}
+  }
+
+	svg[inline-src^='simpleicon/'] {
+		fill: currentcolor;
+	}
+}
+
+@layer components {
+  .c-num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.25rem;
+
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    color: theme('colors.white');
+
+    background-color: theme('colors.orange.600');
+    border-radius: theme('borderRadius.full');
+  }
+}

sites/docs-v5/src/lib/css/fonts/fingerpaint/fingerpaint.font.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Finger Paint';
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url('./fingerpaint.ttf') format('truetype');
+}

sites/docs-v5/src/lib/utils/badge.ts

@@ -0,0 +1,31 @@
+export function createNpmUrl(pkg: string) {
+  return `https://www.npmjs.com/package/${pkg}`;
+}
+
+export function createNpmBadgeUrl(pkg: string) {
+  return `https://img.shields.io/npm/v/${pkg}?style=for-the-badge`;
+}
+
+export function createNpmDownloadBadgeUrl(pkg: string, scope: 'dw' | 'dm' | 'dy' | 'dt' = 'dt') {
+  return `https://img.shields.io/npm/${scope}/${pkg}?style=for-the-badge`;
+}
+
+export function createBundlephobiaUrl(pkg: string) {
+  return `https://bundlephobia.com/package/${pkg}`;
+}
+
+export function createBundlephobiaBadgeUrl(pkg: string) {
+  return `https://img.shields.io/bundlephobia/minzip/${pkg}?label=minzipped&style=for-the-badge`;
+}
+
+export function createSvelteReplUrl(id: string) {
+  return `https://svelte.dev/repl/${id}`;
+}
+
+export function createSvelteReplBadgeUrl() {
+  return 'https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00&style=for-the-badge';
+}
+
+export function createChangelogBadgeUrl() {
+  return 'https://img.shields.io/badge/-changelog-blue?style=for-the-badge';
+}

sites/docs-v5/src/lib/utils/datetime.ts

@@ -0,0 +1,12 @@
+/**
+ * https://www.w3.org/TR/NOTE-datetime
+ * @param date
+ * @returns
+ */
+export function toW3CDate(date: Date | number): string {
+	date = new Date(date);
+	return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date
+		.getDate()
+		.toString()
+		.padStart(2, '0')}`;
+}

sites/docs-v5/src/routes/(api)/humans.txt/+server.ts

@@ -0,0 +1,17 @@
+import Mustache from 'mustache';
+
+import { toW3CDate } from '$lib/utils/datetime';
+
+import type { RequestHandler } from './$types';
+import template from './humans.template.txt?raw';
+
+export const GET: RequestHandler = async () => {
+  const txt = Mustache.render(template, {
+    last_update: toW3CDate(parseInt(__BUILD_TIMESTAMP__, 10)),
+  });
+  const headers = {
+    'Cache-Control': 'max-age=0, s-maxage=3600',
+    'Content-Type': 'text/plain',
+  };
+  return new Response(txt, { headers });
+};

sites/docs-v5/src/routes/(api)/humans.txt/humans.template.txt

@@ -0,0 +1,21 @@
+/* TEAM */
+
+Developer: Quang Phan
+Github: https://github.com/vnphanquang
+Twitter: https://twitter.com/vnphanquang
+From: Vietnam
+
+/* SITE */
+
+Last update: {{last_update}}
+Language: English
+Doctype: HTML5
+IDE: VSCode
+
+/* TECHNOLOGY */
+
+Svelte: https://svelte.dev/
+Svelte-kit: https://kit.svelte.dev/
+Tailwind CSS: https://tailwindcss.com/
+Cloudflare: https://cloudflare.com/
+Typescript: https://www.typescriptlang.org/

sites/docs-v5/src/routes/+layout.server.ts

@@ -0,0 +1,8 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = ({ url, locals }) => {
+	return {
+		pathname: url.pathname, // to trigger when pathname changes
+		settings: locals.settings,
+	};
+};

sites/docs-v5/src/routes/+layout.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { PUBLIC_MODE } from '$env/static/public';
+	import ogImageHome from '$lib/assets/images/og/svelte-put.jpg';
+	import { Settings } from '$lib/contexts/settings.svelte';
+
+	import '../lib/css/app.css';
+
+	let { children, data } = $props();
+
+	const DEFAULT_KEYWORDS = ['svelte', 'svelte-put', 'utility'];
+
+	let meta = $derived.by(() => {
+		// eslint-disable-next-line svelte/valid-compile
+		const meta = $page.data.meta;
+		const title = meta?.title ?? 'svelte-put';
+		const description =
+			meta?.description ?? 'svelte-put is a collection of utilities, minimal components, and tooling support for projects using Svelte';
+		const keywords = meta?.keywords ? [...DEFAULT_KEYWORDS, ...meta.keywords] : DEFAULT_KEYWORDS;
+		const canonical =
+			meta?.canonical ?? `${$page.url.origin}${$page.url.pathname}`;
+
+		const rootRelativeOgImage = meta?.og?.image ?? ogImageHome;
+
+		const og = {
+			title: meta?.og?.title ?? title,
+			description: meta?.og?.description ?? description,
+			type: meta?.og?.type ?? 'website',
+			url: meta?.og?.url ?? canonical,
+			image: rootRelativeOgImage.startsWith('/') ? `${$page.url.origin}${rootRelativeOgImage}` : rootRelativeOgImage,
+			imageAlt: meta?.og?.imageAlt ?? title,
+		};
+
+		const twitter = {
+			title: meta?.twitter?.title ?? og.title,
+			description: meta?.twitter?.description ?? og.description,
+			image: meta?.twitter?.image ?? og.image,
+			imageAlt: meta?.twitter?.imageAlt ?? og.imageAlt,
+			card: meta?.twitter?.card ?? 'summary_large_image',
+			site: meta?.twitter?.site ?? '@vnphanquang',
+			creator: meta?.twitter?.creator ?? '@vnphanquang',
+		};
+
+		return {
+			title,
+			description,
+			keywords,
+			canonical,
+			og,
+			twitter,
+		};
+	});
+
+	let settings = Settings.createContext(data.settings);
+	$effect(() => {
+		settings.colorScheme = data.settings.colorScheme;
+		settings.packageManager = data.settings.packageManager;
+	});
+</script>
+
+<svelte:head>
+	<!-- SEO meta tags -->
+	<title>{meta.title}</title>
+	<meta name="description" content={meta.description} />
+	<meta name="keywords" content={meta.keywords.join(', ')} />
+
+	<meta property="og:title" content={meta.og.title} />
+	<meta property="og:description" content={meta.og.description} />
+	<meta property="og:type" content={meta.og.type} />
+	<meta property="og:image" content={meta.og.image} />
+	<meta property="og:image:alt" content={meta.og.imageAlt} />
+	<meta property="og:url" content={meta.og.url} />
+
+	<meta name="twitter:title" content={meta.twitter.title} />
+	<meta name="twitter:description" content={meta.twitter.description} />
+	<meta name="twitter:card" content={meta.twitter.card} />
+	<meta name="twitter:image" content={meta.twitter.image} />
+	<meta name="twitter:image:alt" content={meta.twitter.imageAlt} />
+	<meta name="twitter:site" content={meta.twitter.site} />
+	<meta name="twitter:creator" content={meta.twitter.creator} />
+
+	<link href={meta.canonical} rel="canonical" />
+	<link type="text/plain" rel="author" href="{$page.url.origin}/humans.txt" />
+
+	<meta name="mode" content={PUBLIC_MODE} />
+</svelte:head>
+
+{@render children()}

sites/docs-v5/src/routes/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { SOCIAL_LINKS } from "$lib/constants";
+
+</script>
+
+<main class="h-dvh flex items-center flex-col justify-center gap-10">
+	<div class="flex items-end gap-6">
+		<svg data-inline-src="svelte-put" height="100" width="100"></svg>
+		<h1 class=" text-4xl c-text-h1 font-fingerpaint text-gradient-brand">svelte-put</h1>
+	</div>
+	<p>
+		Useful
+		<a class="c-link" href="https://svelte.dev">svelte</a> stuff to put in your projects
+	</p>
+	<div class="flex items-center justify-between gap-10 uppercase text-sm">
+		<a class="c-link c-link--preserved text-link" href="/docs">
+			Read Docs
+		</a>
+		<a class="c-link c-link--preserved text-link" href={SOCIAL_LINKS.GITHUB} data-external>
+			See Github
+		</a>
+	</div>
+</main>

sites/docs-v5/svelte.config.js

@@ -37,7 +37,6 @@ const config = {
 			},
 		}], {
 			inlineSrcAttributeName: 'data-inline-src',
-			keepInlineSrcAttribute: true,
 		}),
     vitePreprocess(),
   ],
@@ -68,6 +67,5 @@ const config = {
     },
   },
 };
-console.log(`Turbo ~ config.externalLink:`, config.externalLink);
 
 export default config;