Merge branch 'main' into dynamic-og-images

Author: WarningImHack3r

package.json

@@ -27,7 +27,7 @@
 		"@shikijs/rehype": "^3.12.2",
 		"@shikijs/themes": "^3.12.2",
 		"@sveltejs/adapter-vercel": "^5.10.2",
-		"@sveltejs/kit": "^2.33.1",
+		"@sveltejs/kit": "^2.37.1",
 		"@sveltejs/vite-plugin-svelte": "^6.1.4",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.1.13",
@@ -42,7 +42,7 @@
 		"clsx": "^2.1.1",
 		"eslint": "^9.35.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.12.1",
+		"eslint-plugin-svelte": "^3.12.2",
 		"feed": "^5.1.0",
 		"globals": "^16.3.0",
 		"marked": "^16.2.1",

pnpm-lock.yaml

@@ -0,0 +1,10 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};

src/lib/components/ui/toggle-group/index.ts

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "$lib/utils.js";
+	import { type ToggleVariants, toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx.variant || variant}
+	data-size={ctx.size || size}
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+		className
+	)}
+	{value}
+	{...restProps}
+/>

src/lib/components/ui/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+	import type { ToggleVariants } from "$lib/components/ui/toggle/index.js";
+	export function setToggleGroupCtx(props: ToggleVariants) {
+		setContext("toggleGroup", props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<ToggleVariants>("toggleGroup");
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+
+	setToggleGroupCtx({
+		variant,
+		size,
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	class={cn(
+		"group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/toggle-group/toggle-group.svelte

@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};

src/lib/components/ui/toggle/index.ts

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border-input shadow-xs hover:bg-accent hover:text-accent-foreground border bg-transparent",
+			},
+			size: {
+				default: "h-9 min-w-9 px-2",
+				sm: "h-8 min-w-8 px-1.5",
+				lg: "h-10 min-w-10 px-2.5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

src/lib/components/ui/toggle/toggle.svelte

@@ -118,3 +118,12 @@ export type BranchCommit = {
  * The slug name for all the packages
  */
 export const ALL_SLUG = "all";
+
+/**
+ * A package's local visibility settings
+ */
+export type PackageSettings = {
+	showPrereleases: boolean;
+	releasesType: Lowercase<(typeof releasesTypes)[number]>;
+};
+export const releasesTypes = ["All", "Major", "Minor", "Patch"] as const;

src/lib/types.ts

@@ -25,12 +25,12 @@
 	onNavigate(({ complete }) => {
 		if (!document.startViewTransition) return;
 
-		return new Promise(resolve => {
+		return new Promise(resolve =>
 			document.startViewTransition(async () => {
 				resolve();
 				await complete;
-			});
-		});
+			})
+		);
 	});
 
 	// SEO
@@ -127,22 +127,22 @@
 					alt="Svelte"
 					class="size-8"
 				/>
-				{#if !page.route.id?.startsWith("/devlog")}
+				{#if !page.route.id?.startsWith(resolve("/devlog"))}
 					<span class="hidden text-xl font-semibold text-shadow-xs/10 xs:inline-block">
 						<span class="font-display">Svelte</span>
 						<span class="text-primary">Changelog</span>
 					</span>
 				{/if}
 			</a>
-			{#if page.route.id?.startsWith("/devlog")}
+			{#if page.route.id?.startsWith(resolve("/devlog"))}
 				<div class="mx-4 h-8 w-0.5 rotate-25 rounded-full bg-muted-foreground/40"></div>
 				<span class="text-xl font-semibold">Blog</span>
 			{/if}
 
 			<!-- Navigation -->
-			{#if !page.route.id?.startsWith("/devlog")}
+			{#if !page.route.id?.startsWith(resolve("/devlog"))}
 				<ul class="ml-6 hidden sm:flex">
-					{#each [{ link: "/packages", title: "Packages" }, { link: "/tracker", title: "Tracker" }, { link: "/devlog", title: "Devlog" }] as { link, title } (link)}
+					{#each [{ link: resolve("/packages"), title: "Packages" }, { link: resolve("/tracker"), title: "Tracker" }, { link: resolve("/devlog"), title: "Devlog" }] as { link, title } (link)}
 						{@const disabled = page.url.pathname.startsWith(link)}
 						<li>
 							<Button

src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 import { redirect } from "@sveltejs/kit";
+import { resolve } from "$app/paths";
 
 export async function load({ parent }) {
 	const { displayablePackages } = await parent();
 	const firstCategory = displayablePackages[0];
-	if (!firstCategory) redirect(307, "/packages");
+	if (!firstCategory) redirect(307, resolve("/packages"));
 	const firstPackage = firstCategory.packages[0];
-	if (!firstPackage) redirect(307, "/packages");
-	redirect(307, `/package/${firstPackage.pkg.name}`);
+	if (!firstPackage) redirect(307, resolve("/packages"));
+	redirect(307, resolve("/package/[...package]", { package: firstPackage.pkg.name }));
 }