Skip to content

Commit 8dc80b5

Browse files
huntabytehuntabyte
authored
Improve site design part 1 (#126)
1 parent b573f94 commit 8dc80b5

22 files changed

+111
-95
lines changed

‎src/components/icons/book-open.svelte

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
2+
><path
3+
d="M224,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h64a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"
4+
/></svg
5+
>

‎src/components/icons/code.svelte

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
2+
><path
3+
d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
4+
/></svg
5+
>

‎src/components/icons/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ export { default as CopySimple } from "./copy-simple.svelte";
1717
export { default as ArrowSquareOut } from "./arrow-square-out.svelte";
1818
export { default as CaretUpDown } from "./caret-up-down.svelte";
1919
export { default as SquareHalf } from "./square-half.svelte";
20+
export { default as BookOpen } from "./book-open.svelte";
21+
export { default as Code } from "./code.svelte";
22+
export { default as RocketLaunch } from "./rocket-launch.svelte";
2023

2124
export type IconProps = Partial<HTMLAttributes<SVGElement>> & {
2225
class?: string;

‎src/components/icons/rocket-launch.svelte

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
2+
><path
3+
d="M103.77,185.94C103.38,187.49,93.63,224,40,224a8,8,0,0,1-8-8c0-53.63,36.51-63.38,38.06-63.77a8,8,0,0,1,3.88,15.53c-.9.25-22.42,6.54-25.56,39.86C81.7,204.48,88,183,88.26,182a8,8,0,0,1,15.51,4Zm93-67.4L192,123.31v58.33A15.91,15.91,0,0,1,187.32,193L153,227.3A15.91,15.91,0,0,1,141.7,232a16.11,16.11,0,0,1-5.1-.83,15.94,15.94,0,0,1-10.78-12.92l-5.37-38.49L76.24,135.55l-38.47-5.37A16,16,0,0,1,28.7,103L63,68.68A15.91,15.91,0,0,1,74.36,64h58.33l4.77-4.77c26.68-26.67,58.83-27.82,71.41-27.07a16,16,0,0,1,15,15C224.6,59.71,223.45,91.86,196.78,118.54ZM40,114.34l37.15,5.18L116.69,80H74.36ZM91.32,128,128,164.68l57.45-57.45a76.46,76.46,0,0,0,22.42-59.16,76.65,76.65,0,0,0-59.11,22.47ZM176,139.31l-39.53,39.53L141.67,216,176,181.64Z"
4+
/></svg
5+
>

‎src/components/navigation/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { default as SidebarNav } from "./sidebar-nav.svelte";
22
export { default as SidebarNavItems } from "./sidebar-nav-items.svelte";
33
export { default as MobileNav } from "./mobile-nav.svelte";
4+
export { default as SidebarNavMainItems } from "./sidebar-nav-main-items.svelte";

‎src/components/navigation/sidebar-accordion.svelte

-23
This file was deleted.

‎src/components/navigation/sidebar-nav-items.svelte

+2-4
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,9 @@
1313
<a
1414
href={item.href}
1515
class={cn(
16-
"group flex w-full items-center rounded-md px-2 py-1 hover:underline",
16+
"group flex w-full items-center rounded-md text-foreground py-2 px-2.5 hover:bg-muted transition-all",
1717
item.disabled && "cursor-not-allowed opacity-60",
18-
$page.url.pathname === item.href
19-
? "font-medium text-foreground"
20-
: "text-muted-foreground"
18+
$page.url.pathname === item.href ? "bg-muted" : ""
2119
)}
2220
target={item.external ? "_blank" : ""}
2321
rel={item.external ? "noreferrer" : ""}

‎src/components/navigation/sidebar-nav-main-items.svelte

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script lang="ts">
2+
import type { SidebarNavItem } from "@/config";
3+
import { RocketLaunch, BookOpen, Code } from "@/components/icons";
4+
import { page } from "$app/stores";
5+
import { cn } from "@/utils";
6+
7+
export let items: SidebarNavItem[] = [];
8+
9+
const iconMap = {
10+
Introduction: BookOpen,
11+
"Getting Started": RocketLaunch,
12+
"Render Delegation": Code
13+
} as const;
14+
15+
const iconMapKeys = Object.keys(iconMap) as (keyof typeof iconMap)[];
16+
17+
function isIconMapKey(key: string): key is keyof typeof iconMap {
18+
return iconMapKeys.includes(key as keyof typeof iconMap);
19+
}
20+
</script>
21+
22+
{#if items.length}
23+
<div class="grid grid-flow-row auto-rows-max text-sm pb-8">
24+
{#each items as item, index (index)}
25+
{#if item.href}
26+
<a
27+
href={item.href}
28+
class={cn(
29+
"group flex w-full items-center rounded-md p-2 text-sm text-foreground font-semibold gap-2.5 hover:bg-muted transition-all",
30+
$page.url.pathname === item.href ? "bg-muted" : "bg-transparent"
31+
)}
32+
target={item.external ? "_blank" : ""}
33+
rel={item.external ? "noreferrer" : ""}
34+
>
35+
{#if isIconMapKey(item.title)}
36+
<svelte:component this={iconMap[item.title]} class="sq-5" />
37+
{/if}
38+
{item.title}
39+
{#if item.label}
40+
<span
41+
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"
42+
>
43+
{item.label}
44+
</span>
45+
{/if}
46+
</a>
47+
{/if}
48+
{/each}
49+
</div>
50+
{/if}

‎src/components/navigation/sidebar-nav.svelte

+16-10
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
<script lang="ts">
22
import type { SidebarNavItem } from "@/config";
3-
import { SidebarNavItems } from "@/components";
3+
import { SidebarNavItems, SidebarNavMainItems } from "@/components";
44
export let items: SidebarNavItem[] = [];
55
</script>
66

77
{#if items.length}
88
<aside
9-
class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-64px)] lg:sticky lg:top-16 py-8 lg:px-4 lg:-mx-4"
9+
class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-64px)] lg:sticky lg:top-[60px] py-10 pr-2"
1010
>
1111
<div class="relative">
1212
<nav class="space-y-3">
1313
<div class="flex flex-col w-full">
1414
{#each items as item, index (index)}
15-
<div class="pb-4">
16-
<h4 class="mb-1 rounded-md px-1 py-1 text-sm font-semibold">
17-
{item.title}
18-
</h4>
19-
{#if item.items}
20-
<SidebarNavItems items={item.items} />
21-
{/if}
22-
</div>
15+
{#if item.title === "Overview"}
16+
<SidebarNavMainItems items={item.items} />
17+
{:else}
18+
<div class="pb-4">
19+
<h4
20+
class="mb-1 rounded-md text-foreground/40 py-2 px-2.5 text-sm font-normal uppercase"
21+
>
22+
{item.title}
23+
</h4>
24+
{#if item.items}
25+
<SidebarNavItems items={item.items} />
26+
{/if}
27+
</div>
28+
{/if}
2329
{/each}
2430
</div>
2531
</nav>

‎src/components/page-header/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
export { default as PageHeader } from "./page-header.svelte";
22
export { default as PageHeaderHeading } from "./page-header-heading.svelte";
3-
export { default as PageHeaderTagline } from "./page-header-tagline.svelte";
43
export { default as PageHeaderDescription } from "./page-header-description.svelte";

‎src/components/page-header/page-header-description.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
export { className as class };
66
</script>
77

8-
<p class={cn("text-lg text-muted-foreground mt-4", className)}>
8+
<p class={cn("text-xl font-medium text-foreground/40 mt-3", className)}>
99
<Balancer>
1010
<slot />
1111
</Balancer>

‎src/components/page-header/page-header-heading.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
export { className as class };
55
</script>
66

7-
<h1 class={cn("scroll-m-20 text-4xl font-extrabold tracking-tight", className)}>
7+
<h1 class={cn("scroll-m-20 text-5xl font-semibold tracking-tight", className)}>
88
<slot />
99
</h1>

‎src/components/page-header/page-header-tagline.svelte

-9
This file was deleted.

‎src/components/page-header/page-header.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
export { className as class };
55
</script>
66

7-
<section class={cn("relative border-b border-border py-8", className)}>
7+
<section class={cn("relative pt-[72px]", className)}>
88
<slot />
99
</section>

‎src/components/site-header.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</script>
77

88
<header class="bg-background/75 backdrop-blur border-b border-border -mb-px sticky top-0 z-50">
9-
<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
9+
<div class="mx-auto px-4 sm:px-6 lg:px-8 container">
1010
<div class="flex items-center justify-between gap-3 h-16">
1111
<div class="flex items-center gap-1.5">
1212
<MobileNav />

‎src/config/navigation.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ export const navigation: Navigation = {
3636
items: []
3737
},
3838
{
39-
title: "Getting started",
39+
title: "Getting Started",
4040
href: "/docs/getting-started",
4141
items: []
4242
},
4343
{
44-
title: "Render delegation",
44+
title: "Render Delegation",
4545
href: "/docs/render-delegation",
4646
items: []
4747
}

‎src/routes/+layout.svelte

+7-7
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313

1414
<SiteHeader />
1515
<main class="min-h-[calc(100vh-64px)]">
16-
<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
17-
<div class="lg:grid lg:grid-cols-10 lg:gap-10">
18-
<div class="lg:col-span-2">
16+
<div class="mx-auto px-4 sm:px-6 lg:px-8 container">
17+
<div class="lg:grid lg:grid-cols-12 lg:gap-6">
18+
<div class="lg:col-span-2 border-r border-border">
1919
<SidebarNav items={navigation.sidebar} />
2020
</div>
21-
<div class="lg:col-span-8">
22-
<div class="lg:grid lg:grid-cols-10 lg:gap-8">
23-
<div class="lg:col-span-8">
21+
<div class="lg:col-span-10 lg:col-start-4">
22+
<div class="lg:grid lg:grid-cols-9 lg:gap-6">
23+
<div class="lg:col-span-7">
2424
<slot />
2525
</div>
26-
<div class="lg:col-span-2 order-first lg:order-last" />
26+
<div class="lg:col-span-2 lg:col-start-11 order-first lg:order-last" />
2727
</div>
2828
</div>
2929
</div>

‎src/routes/+page.svelte

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
<script lang="ts">
2-
import { Button } from "@/components/ui/button";
3-
import {
4-
PageHeader,
5-
PageHeaderHeading,
6-
PageHeaderDescription,
7-
PageHeaderTagline
8-
} from "@/components";
2+
import { PageHeader, PageHeaderHeading, PageHeaderDescription } from "@/components";
93
</script>
104

115
<PageHeader>
12-
<PageHeaderTagline>Getting Started</PageHeaderTagline>
136
<PageHeaderHeading>Introduction</PageHeaderHeading>
147
<PageHeaderDescription>Headless UI Components for Svelte.</PageHeaderDescription>
158
</PageHeader>

‎src/routes/docs/[...slug]/+page.svelte

+1-7
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
import { page } from "$app/stores";
44
import type { SvelteComponent } from "svelte";
55
import type { PageData } from "./$types";
6-
import {
7-
PageHeader,
8-
PageHeaderDescription,
9-
PageHeaderHeading,
10-
PageHeaderTagline
11-
} from "@/components";
6+
import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
127
type Component = $$Generic<typeof SvelteComponent>;
138
149
export let data: PageData;
@@ -24,7 +19,6 @@
2419

2520
<div class="markdown pb-24">
2621
<PageHeader>
27-
<PageHeaderTagline>{tagline}</PageHeaderTagline>
2822
<PageHeaderHeading>{doc.title}</PageHeaderHeading>
2923
<PageHeaderDescription>{doc.description}</PageHeaderDescription>
3024
</PageHeader>

‎src/routes/docs/components/[name]/+page.svelte

+1-7
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
import { page } from "$app/stores";
44
import type { SvelteComponent } from "svelte";
55
import type { PageData } from "./$types";
6-
import {
7-
PageHeader,
8-
PageHeaderDescription,
9-
PageHeaderHeading,
10-
PageHeaderTagline
11-
} from "@/components";
6+
import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
127
type Component = $$Generic<typeof SvelteComponent>;
138
149
export let data: PageData;
@@ -25,7 +20,6 @@
2520

2621
<div class="markdown pb-24">
2722
<PageHeader>
28-
<PageHeaderTagline>{tagline}</PageHeaderTagline>
2923
<PageHeaderHeading>{doc.title}</PageHeaderHeading>
3024
<PageHeaderDescription>{doc.description}</PageHeaderDescription>
3125
</PageHeader>

‎src/styles/app.postcss

+7-7
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@
99

1010
@layer base {
1111
:root {
12-
--background: 0 0% 98%;
13-
--foreground: 320 7% 8%;
12+
--background: 0 0% 100%;
13+
--foreground: 0 0% 9%;
1414

15-
--muted: 320 4.8% 93%;
16-
--muted-foreground: 320 3.8% 38.1%;
15+
--muted: 240 5% 96%;
16+
--muted-foreground: 0 0% 64%;
1717

1818
--popover: 0 0% 98%;
1919
--popover-foreground: 320 7% 8%;
2020

2121
--card: 0 0% 98%;
2222
--card-foreground: 320 7% 8%;
2323

24-
--border: 320 5.9% 87%;
24+
--border: 0 0% 89%;
2525
--input: 320 5.9% 90%;
2626

2727
--primary: 320 7% 16%;
@@ -30,8 +30,8 @@
3030
--secondary: 163 62% 90%;
3131
--secondary-foreground: 170 31% 19%;
3232

33-
--accent: 320 4.8% 92%;
34-
--accent-foreground: 320 7% 16%;
33+
--accent: 204 94% 94%;
34+
--accent-foreground: 0 9% 9%;
3535

3636
--destructive: 0 84.2% 60.2%;
3737
--destructive-foreground: 0 0% 98%;

‎tailwind.config.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212
center: true,
1313
padding: "2rem",
1414
screens: {
15-
"2xl": "1400px"
15+
"2xl": "1440px"
1616
}
1717
},
1818
extend: {
@@ -51,11 +51,6 @@ export default {
5151
foreground: "hsl(var(--card-foreground))"
5252
}
5353
},
54-
borderRadius: {
55-
lg: "var(--radius)",
56-
md: "calc(var(--radius) - 2px)",
57-
sm: "calc(var(--radius) - 4px)"
58-
},
5954
fontFamily: {
6055
sans: ["Inter", ...fontFamily.sans]
6156
}

0 commit comments

Comments
 (0)