update design

lucia-auth · Dec 9, 2023 · 8fc5a83 · 8fc5a83
1 parent 55b820b
commit 8fc5a83
Show file tree

Hide file tree

Showing 97 changed files with 521 additions and 445 deletions.
diff --git a/documentation/package.json b/documentation/package.json
@@ -7,7 +7,8 @@
 		"start": "astro dev",
 		"build": "astro check && astro build",
 		"preview": "astro preview",
-		"astro": "astro"
+		"astro": "astro",
+		"format": "prettier -w . --plugin=prettier-plugin-astro"
 	},
 	"dependencies": {
 		"@astrojs/tailwind": "^5.0.0",

diff --git a/documentation/src/components/CloseIcon.astro b/documentation/src/components/CloseIcon.astro
@@ -0,0 +1,8 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
+</svg>
diff --git a/documentation/src/components/Head.astro b/documentation/src/components/Head.astro
diff --git a/documentation/src/components/Layout.astro b/documentation/src/components/Layout.astro
@@ -0,0 +1,156 @@
+---
+import NavMenu from "@components/NavMenu.astro";
+import MenuIcon from "@components/MenuIcon.astro";
+
+import type { MarkdownLayoutProps } from "astro";
+import CloseIcon from "./CloseIcon.astro";
+
+type Props = MarkdownLayoutProps<{
+	title: string;
+	format?: "code";
+}>;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{Astro.props.frontmatter.title}</title>
+
+		<meta name="twitter:card" content="summary" />
+		<meta name="twitter:site" content="@lucia_auth" />
+		<meta name="twitter:title" content={Astro.props.frontmatter.title} />
+		<meta
+			name="twitter:description"
+			content="Lucia is an open source auth library that abstracts away the complexity of handling sessions."
+		/>
+		<!-- <meta property="og:image" content="" /> -->
+
+		<meta property="og:site_name" content="Lucia" />
+		<meta property="og:title" content={Astro.props.frontmatter.title} />
+		<meta property="og:url" content="https://v3.lucia-auth.com" />
+		<meta
+			property="og:description"
+			content="Lucia is an open source auth library that abstracts away the complexity of handling sessions."
+		/>
+	</head>
+	<body class="leading-relaxed text-zinc-900 lg:overflow-auto">
+		<main class="w-full lg:px-8">
+			<button
+				id="mobile-nav-button"
+				class="fixed right-0 mr-4 mt-8 h-8 w-8 rounded border bg-zinc-100 p-2 sm:mt-12 md:mr-8 lg:hidden"
+			>
+				<MenuIcon />
+			</button>
+			<div
+				class="fixed hidden h-full max-h-screen w-full overflow-auto overscroll-contain bg-white px-4 pb-4 pt-8 sm:pt-12 md:px-8 lg:hidden"
+				id="mobile-nav-menu"
+			>
+				<div class="flex place-content-between">
+					<a href="/" class="text-xl font-medium">Lucia</a>
+					<button id="mobile-nav-close-button" class="h-8 w-8 rounded p-2 lg:hidden">
+						<CloseIcon />
+					</button>
+				</div>
+				<div class="mt-4">
+					<NavMenu />
+				</div>
+			</div>
+			<div class="mx-auto w-full max-w-5xl px-4 md:px-8 lg:px-0">
+				<div class="fixed hidden h-screen w-56 shrink-0 pt-12 lg:block">
+					<div class="flex h-full flex-col">
+						<a href="/" class="text-2xl font-medium">Lucia</a>
+						<div class="mt-8 overflow-auto pb-4">
+							<NavMenu />
+						</div>
+					</div>
+				</div>
+				<div class="pb-24 pt-8 sm:pt-12 lg:ml-56 lg:pl-4">
+					<article class="md w-full overflow-hidden">
+						<slot />
+					</article>
+				</div>
+			</div>
+		</main>
+	</body>
+</html>
+
+<script>
+	document.getElementById("mobile-nav-button")!.addEventListener("click", (e) => {
+		const navMenu = document.getElementById("mobile-nav-menu")!;
+		if (navMenu.classList.contains("hidden")) {
+			document.getElementById("mobile-nav-button")!.classList.add("hidden");
+			navMenu.classList.remove("hidden");
+			document.body.classList.add("overflow-hidden");
+		} else {
+			closeMenu();
+		}
+	});
+
+	document.getElementById("mobile-nav-close-button")!.addEventListener("click", closeMenu);
+
+	function closeMenu() {
+		document.getElementById("mobile-nav-menu")!.classList.add("hidden");
+		document.getElementById("mobile-nav-button")!.classList.remove("hidden");
+		document.body.classList.remove("overflow-hidden");
+	}
+</script>
+
+<style>
+	:root {
+		--astro-code-color-background: rgb(246, 246, 246);
+		--astro-code-token-keyword: rgb(243, 89, 104);
+		/* --astro-code-token-function: rgb(171, 61, 131); */
+		--astro-code-token-comment: rgb(143, 143, 143);
+	}
+
+	:global(.md h1) {
+		@apply mb-8 break-words text-3xl  font-semibold sm:text-4xl;
+	}
+	:global(.md h2) {
+		@apply mb-4 mt-8 text-2xl font-semibold;
+	}
+	:global(.md h3) {
+		@apply text-xl font-medium;
+	}
+	:global(.md > p) {
+		@apply my-4;
+	}
+	:global(.md > ul) {
+		@apply mb-6 mt-4 list-inside list-disc pl-2;
+	}
+	:global(.md ul > li > ul) {
+		@apply list-inside list-disc pl-6;
+	}
+	:global(.md p a) {
+		@apply text-main hover:underline;
+	}
+	:global(.md li a) {
+		@apply text-main hover:underline;
+	}
+	:global(.md p > code, .md li > code, .md p > a > code, .md li > a > code) {
+		@apply text-sm;
+	}
+	:global(.md pre code a) {
+		@apply decoration-main hover:text-main underline hover:no-underline;
+	}
+	:global(.md pre) {
+		@apply mb-6 mt-4 w-full overflow-auto rounded-md bg-zinc-100 p-4 text-sm leading-snug;
+	}
+	:global(.md table) {
+		@apply my-2 w-full table-auto border-collapse text-left text-sm;
+	}
+	:global(.md .table-wrapper) {
+		@apply w-full overflow-auto whitespace-nowrap;
+	}
+	:global(.md table thead tr) {
+		@apply w-full border-b border-zinc-200;
+	}
+	:global(.md table :is(td, th)) {
+		@apply border-b border-zinc-200 px-1 py-1;
+	}
+	:global(.md table th) {
+		@apply text-xs font-medium;
+	}
+</style>
diff --git a/documentation/src/components/MarkdownArticle.astro b/documentation/src/components/MarkdownArticle.astro
diff --git a/documentation/src/components/MenuIcon.astro b/documentation/src/components/MenuIcon.astro
@@ -0,0 +1,8 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M1 1h15M1 7h15M1 13h15"></path>
+</svg>
diff --git a/documentation/src/components/NavMenu.astro b/documentation/src/components/NavMenu.astro
@@ -1,14 +1,53 @@
 ---
-interface Props {
-	sections: Section[];
-}
-
-export interface Section {
-	title: string;
-	pages: Page[];
-}
-
-export type Page = [title: string, href: string, format?: "code"];
+const sections: Section[] = [
+	{
+		title: "Start here",
+		pages: [
+			["Getting-started", "/getting-started"],
+			["Database", "/database"],
+			["Upgrade to v3", "/upgrade-v3"]
+		]
+	},
+	{
+		title: "Tutorials",
+		pages: [
+			["GitHub OAuth", "/tutorials/github-oauth"],
+			["Username and password", "/tutorials/username-and-password"]
+		]
+	},
+	{
+		title: "Basics",
+		pages: [
+			["Sessions", "/basics/sessions"],
+			["Users", "/basics/users"],
+			["Configuration", "/basics/configuration"],
+			["Troubleshooting", "/basics/help"]
+		]
+	},
+	{
+		title: "Guides",
+		pages: [
+			["Validate session cookies", "/guides/validate-session-cookies"],
+			["Validate bearer tokens", "/guides/validate-bearer-tokens"],
+			["OAuth", "/guides/oauth"],
+			["Email and password", "/guides/email-and-password"],
+			["Passkeys", "/guides/passkeys"],
+			["Improving sessions", "/guides/improving-sessions"]
+		]
+	},
+	{
+		title: "API reference",
+		pages: [["lucia", "/reference/main", "code"]]
+	},
+	{
+		title: "Community",
+		pages: [
+			["Discord", "https://discord.com/invite/PwrK3kpVR3"],
+			["GitHub", "https://github.com/lucia-auth/lucia"],
+			["Twitter", "https://twitter.com/lucia-auth"]
+		]
+	}
+];
 
 function isSelected(href: string, currentPathname: string): boolean {
 	if (removeLeadingSlash(href) === removeLeadingSlash(currentPathname)) {
@@ -23,17 +62,21 @@ function removeLeadingSlash(s: string): string {
 	}
 	return s;
 }
+
+interface Section {
+	title: string;
+	pages: Page[];
+}
+
+type Page = [title: string, href: string, format?: "code"];
 ---
 
-<ul class="text-sm">
+<ul class="flex flex-col gap-y-4 text-sm">
 	{
-		Astro.props.sections.map((section) => {
-			if (section.pages.length < 1) {
-				return null;
-			}
+		sections.map((section) => {
 			return (
-				<li class="mt-6">
-					<p class="mb-1  font-medium">{section.title}</p>
+				<li>
+					<p class="mb-1 font-medium">{section.title}</p>
 					<ul>
 						{section.pages.map((page) => {
 							return (