docs: update to latests docs design (#629)

Co-authored-by: Hunter Johnston <[email protected]> Co-authored-by: Martin <[email protected]> Co-authored-by: Hunter Johnston <[email protected]>
huntabyte · Jan 10, 2024 · 1d119d9 · 1d119d9 · vercel · Jan 10, 2024
1 parent e6e3eba
commit 1d119d9
Show file tree

Hide file tree

Showing 56 changed files with 1,265 additions and 116 deletions.
diff --git a/apps/www/src/lib/components/docs/announcement.svelte b/apps/www/src/lib/components/docs/announcement.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Separator } from "@/registry/new-york/ui/separator";
+	import { cn } from "$lib/utils";
+	import { Icons } from "./icons";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<a
+	href="/docs/changelog"
+	class={cn(
+		"inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium",
+		className
+	)}
+	{...$$restProps}
+>
+	🎉 <Separator class="mx-2 h-4" orientation="vertical" />{" "}
+	<span class="sm:hidden">New components and more.</span>
+	<span class="hidden sm:inline">
+		New components, cli updates and more.
+	</span>
+	<Icons.arrowRight class="ml-1 h-4 w-4" />
+</a>
diff --git a/apps/www/src/lib/components/docs/charts/bar.svelte b/apps/www/src/lib/components/docs/charts/bar.svelte
@@ -124,11 +124,12 @@
 		<g>
 			{#each data as point, i}
 				<rect
+					class="bg-primary-foreground"
 					x={xScale(i) + 2}
 					y={yScale(point.total)}
 					width={barWidth - 8}
 					height={yScale(0) - yScale(point.total)}
-					fill="#adfa1d"
+					fill="currentColor"
 					rx="4"
 					ry="4"
 				/>

diff --git a/apps/www/src/lib/components/docs/charts/helpers.ts b/apps/www/src/lib/components/docs/charts/helpers.ts
@@ -5,6 +5,6 @@ export function color(opacity: string = "1") {
 export function colorArray<T>() {
 	return (_: T, i: number) => {
 		if (i === 0) return `hsl(var(--primary))`;
-		return `hsl(var(--primary) / 0.20)`;
+		return `hsl(var(--primary) / 0.25)`;
 	};
 }
diff --git a/apps/www/src/lib/components/docs/dashboard/team-switcher.svelte b/apps/www/src/lib/components/docs/dashboard/team-switcher.svelte
@@ -68,6 +68,7 @@
 					<Avatar.Image
 						src="https://avatar.vercel.sh/${selectedTeam.value}.png"
 						alt={selectedTeam.label}
+						class="grayscale"
 					/>
 					<Avatar.Fallback>SC</Avatar.Fallback>
 				</Avatar.Root>

diff --git a/apps/www/src/lib/components/docs/examples-nav/examples-nav.svelte b/apps/www/src/lib/components/docs/examples-nav/examples-nav.svelte
@@ -8,11 +8,12 @@
 	export { className as class };
 </script>
 
-<div class="relative pb-4 sm:pb-0">
-	<div class="max-w-[600px] lg:max-w-none">
+<div class="relative">
+	<div class="lg:max-w-none">
+		<!-- TODO: replace with srollarea component when it's ready -->
 		<div
 			class={cn(
-				"mb-4 flex items-center pb-2 overflow-x-auto sm:overflow-x-visible",
+				"mb-4 flex items-center overflow-y-auto pb-3 md:pb-0",
 				className
 			)}
 			{...$$restProps}
@@ -22,10 +23,11 @@
 					href={example.href}
 					data-sveltekit-noscroll
 					class={cn(
-						"flex items-center px-4",
-						$page.url.pathname.startsWith(example.href)
-							? "font-bold text-primary"
-							: "font-medium text-muted-foreground"
+						"flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
+						$page.url.pathname.startsWith(example.href) ||
+							($page.url.pathname === "/" && index === 0)
+							? "bg-muted font-medium text-primary"
+							: "text-muted-foreground"
 					)}
 				>
 					{example.name}{" "}

diff --git a/apps/www/src/lib/components/docs/icons/hamburger.svelte b/apps/www/src/lib/components/docs/icons/hamburger.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { IconProps } from "lucide-svelte";
+
+	type $$Props = IconProps;
+</script>
+
+<svg
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class="h-5 w-5"
+	{...$$restProps}
+>
+	<path
+		d="M3 5H11"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M3 12H16"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M3 19H21"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/apps/www/src/lib/components/docs/icons/index.ts b/apps/www/src/lib/components/docs/icons/index.ts
@@ -36,6 +36,7 @@ import RadixSvelte from "./radix-svelte.svelte";
 import Tailwind from "./tailwind.svelte";
 import Yarn from "./yarn.svelte";
 import Twitter from "./twitter.svelte";
+import Hamburger from "./hamburger.svelte";
 
 export type Icon = LucideIcon;
 
@@ -75,5 +76,6 @@ export const Icons = {
 	tailwind: Tailwind,
 	google: Google,
 	apple: Apple,
-	paypal: PayPal
+	paypal: PayPal,
+	Hamburger: Hamburger
 };
diff --git a/apps/www/src/lib/components/docs/index.ts b/apps/www/src/lib/components/docs/index.ts
@@ -21,6 +21,7 @@ export { default as TailwindIndicator } from "./tailwind-indicator.svelte";
 export { default as ComponentPreviewManual } from "./component-preview-manual.svelte";
 export { default as CommandMenu } from "./command-menu.svelte";
 export { default as ModeToggle } from "./mode-toggle.svelte";
+export { default as Announcement } from "./announcement.svelte";
 
 export * from "./icons";
 export * from "./page-header";

diff --git a/apps/www/src/lib/components/docs/nav/docs-sidebar-nav-items.svelte b/apps/www/src/lib/components/docs/nav/docs-sidebar-nav-items.svelte
@@ -13,7 +13,7 @@
 				<a
 					href={item.href}
 					class={cn(
-						"group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline whitespace-nowrap",
+						"group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
 						item.disabled && "cursor-not-allowed opacity-60",
 						$page.url.pathname === item.href
 							? "font-medium text-foreground"

diff --git a/apps/www/src/lib/components/docs/nav/main-nav.svelte b/apps/www/src/lib/components/docs/nav/main-nav.svelte
@@ -8,11 +8,11 @@
 <div class="mr-4 hidden md:flex">
 	<a href="/" class="mr-6 flex items-center space-x-2">
 		<Icons.logo class="h-6 w-6" />
-		<span class="hidden font-bold sm:inline-block text-[15px] lg:text-base">
+		<span class="hidden font-bold sm:inline-block">
 			{siteConfig.name}
 		</span>
 	</a>
-	<nav class="flex items-center space-x-6 text-sm font-medium">
+	<nav class="flex items-center gap-6 text-sm">
 		<a
 			href="/docs"
 			class={cn(
@@ -22,7 +22,7 @@
 					: "text-foreground/60"
 			)}
 		>
-			Documentation
+			Docs
 		</a>
 		<a
 			href="/docs/components"
@@ -62,7 +62,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			class={cn(
-				"hidden text-foreground/60 transition-colors hover:text-foreground/80 xl:block"
+				"hidden text-foreground/60 transition-colors hover:text-foreground/80 lg:block"
 			)}
 		>
 			GitHub

diff --git a/apps/www/src/lib/components/docs/nav/mobile-link.svelte b/apps/www/src/lib/components/docs/nav/mobile-link.svelte
@@ -11,11 +11,11 @@
 
 <a
 	{href}
-	on:click={() => (open = false)}
 	class={cn(
 		$page.url.pathname === href ? "text-foreground" : "text-foreground/60",
 		className
 	)}
+	on:click={() => (open = false)}
 	{...$$restProps}
 >
 	<slot />

diff --git a/apps/www/src/lib/components/docs/nav/mobile-nav.svelte b/apps/www/src/lib/components/docs/nav/mobile-nav.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import * as Sheet from "@/registry/new-york/ui/sheet";
-	import { ViewVertical } from "radix-icons-svelte";
 	import { Button } from "@/registry/new-york/ui/button";
 	import { docsConfig } from "$lib/config/docs";
 	import { siteConfig } from "$lib/config/site";
@@ -17,7 +16,7 @@
 			variant="ghost"
 			class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
 		>
-			<ViewVertical class="h-5 w-5" />
+			<Icons.Hamburger class="h-5 w-5" />
 			<span class="sr-only">Toggle Menu</span>
 		</Button>
 	</Sheet.Trigger>
@@ -30,7 +29,11 @@
 			<div class="flex flex-col space-y-3">
 				{#each docsConfig.mainNav as navItem, index (navItem + index.toString())}
 					{#if navItem.href}
-						<MobileLink href={navItem.href} bind:open>
+						<MobileLink
+							href={navItem.href}
+							bind:open
+							class="text-foreground"
+						>
 							{navItem.title}
 						</MobileLink>
 					{/if}
@@ -43,15 +46,11 @@
 						{#if navItem?.items?.length}
 							{#each navItem.items as item}
 								{#if !item.disabled && item.href}
-									<MobileLink
-										href={item.href}
-										bind:open
-										class="text-muted-foreground"
-									>
+									<MobileLink href={item.href} bind:open>
 										{item.title}
 										{#if item.label}
 											<span
-												class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000]"
+												class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline"
 											>
 												{item.label}
 											</span>

diff --git a/apps/www/src/lib/components/docs/page-header/page-header-description.svelte b/apps/www/src/lib/components/docs/page-header/page-header-description.svelte
@@ -2,18 +2,24 @@
 	import Balancer from "svelte-wrap-balancer";
 	import { cn } from "$lib/utils";
 
+	export let balanced = true;
+
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
 
 <p
 	class={cn(
-		"max-w-[750px] text-lg text-muted-foreground sm:text-xl",
+		"max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl",
 		className
 	)}
 	{...$$restProps}
 >
-	<Balancer>
+	{#if balanced}
+		<Balancer>
+			<slot />
+		</Balancer>
+	{:else}
 		<slot />
-	</Balancer>
+	{/if}
 </p>
diff --git a/apps/www/src/lib/components/docs/page-header/page-header-heading.svelte b/apps/www/src/lib/components/docs/page-header/page-header-heading.svelte
@@ -7,7 +7,7 @@
 
 <h1
 	class={cn(
-		"text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]",
+		"text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]",
 		className
 	)}
 	{...$$restProps}

diff --git a/apps/www/src/lib/components/docs/page-header/page-header.svelte b/apps/www/src/lib/components/docs/page-header/page-header.svelte
@@ -7,7 +7,7 @@
 
 <section
 	class={cn(
-		"flex max-w-[980px] flex-col items-start gap-2 px-4 pt-8 md:pt-12 pb-8",
+		"mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20",
 		className
 	)}
 	{...$$restProps}

diff --git a/apps/www/src/lib/components/docs/site-footer.svelte b/apps/www/src/lib/components/docs/site-footer.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { siteConfig } from "$lib/config/site";
-	import { Icons } from "./icons";
 </script>
 
 <footer class="py-6 md:px-8 md:py-0">
@@ -10,7 +9,6 @@
 		<div
 			class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0"
 		>
-			<Icons.logo class="hidden h-6 w-6 md:inline-block" />
 			<p
 				class="text-center text-sm leading-loose text-muted-foreground md:text-left"
 			>

diff --git a/apps/www/src/lib/components/docs/site-header.svelte b/apps/www/src/lib/components/docs/site-header.svelte
@@ -12,13 +12,13 @@
 </script>
 
 <header
-	class="supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur"
+	class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
 >
-	<div class="container flex h-14 items-center">
+	<div class="container flex h-14 max-w-screen-2xl items-center">
 		<MainNav />
 		<MobileNav />
 		<div
-			class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end"
+			class="flex flex-1 items-center justify-between space-x-2 md:justify-end"
 		>
 			<div class="w-full flex-1 md:w-auto md:flex-none">
 				<CommandMenu />

diff --git a/apps/www/src/lib/components/docs/table-of-contents.svelte b/apps/www/src/lib/components/docs/table-of-contents.svelte
@@ -2,6 +2,7 @@
 	import type { TableOfContents, TableOfContentsItem } from "$lib/types/docs";
 	import { onMount } from "svelte";
 	import { Tree } from "$components/docs";
+	import { writable } from "svelte/store";
 
 	let filteredHeadingsList: TableOfContents;
 
@@ -52,13 +53,57 @@
 		filteredHeadingsList = hierarchy;
 	}
 
+	const activeItem = writable<string | undefined>(undefined);
+
+	function useActiveItem(itemIds: string[]) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						$activeItem = entry.target.id;
+					}
+				});
+			},
+			{ rootMargin: `0% 0% -10% 0%` }
+		);
+
+		const observeElement = (id: string) => {
+			const element = document.getElementById(id);
+			if (element) {
+				observer.observe(element);
+			}
+		};
+
+		itemIds?.forEach(observeElement);
+
+		return () => {
+			const unobserveElement = (id: string) => {
+				const element = document.getElementById(id);
+				if (element) {
+					observer.unobserve(element);
+				}
+			};
+
+			itemIds?.forEach(unobserveElement);
+		};
+	}
+
 	// Lifecycle
 	onMount(() => {
 		getHeadingsWithHierarchy("mdsvex");
+		const allItemIds: string[] = [];
+		filteredHeadingsList.items.forEach((item) => {
+			allItemIds.push(item.url.replace("#", ""));
+			if (!item.items) return;
+			item.items.forEach((subItem) => {
+				allItemIds.push(subItem.url.replace("#", ""));
+			});
+		});
+		return useActiveItem(allItemIds);
 	});
 </script>
 
 <div class="space-y-2">
 	<p class="font-medium">On This Page</p>
-	<Tree tree={filteredHeadingsList} />
+	<Tree tree={filteredHeadingsList} activeItem={$activeItem} />
 </div>