Skip to content

Commit

Permalink
rework html
Browse files Browse the repository at this point in the history
  • Loading branch information
@pilcrowonpaper
pilcrowonpaper committed Dec 9, 2023
1 parent d0b07a3 commit ec9a3a1
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 90 deletions.
92 changes: 53 additions & 39 deletions documentation/src/components/Layout.astro
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
---
import NavMenu from "@components/NavMenu.astro";
import MenuIcon from "@components/MenuIcon.astro";
import type { MarkdownLayoutProps } from "astro";
import CloseIcon from "./CloseIcon.astro";
import { sections } from "src/nav";
import NavSection from "./NavSection.astro";
type Props = MarkdownLayoutProps<{
title: string;
Expand All @@ -17,6 +18,10 @@ type Props = MarkdownLayoutProps<{
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{Astro.props.frontmatter.title}</title>
<meta
name="description"
content="Lucia is an open source auth library that abstracts away the complexity of handling sessions."
/>

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@lucia_auth" />
Expand All @@ -35,41 +40,50 @@ type Props = MarkdownLayoutProps<{
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 w-full lg:px-8">
<body class="leading-relaxed lg:overflow-auto px-4 sm: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"
class="fixed right-0 mr-4 mt-8 h-8 w-8 rounded border bg-zinc-100 p-2 sm:mt-12 sm:mr-8 lg:hidden"
aria-label="Open menu"
>
<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"
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 sm:px-8 lg:hidden"
id="mobile-nav-menu"
>
<div class="flex place-content-between">
<div class="flex place-content-between mb-4">
<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">
<button
id="mobile-nav-close-button"
class="h-8 w-8 rounded p-2 lg:hidden"
aria-label="Close menu"
>
<CloseIcon />
</button>
</div>
<div class="mt-4">
<NavMenu />
</div>
<nav class="flex flex-col gap-y-4">
{
sections.map((section) => {
return <NavSection title={section.title} pages={section.pages} />;
})
}
</nav>
</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-4 overflow-auto pb-4">
<NavMenu />
</div>
</div>
</div>
<div class="pb-24 pt-8 sm:pt-12 lg:ml-56 lg:pl-4">
<main class="md w-full overflow-hidden">
<slot />
</main>
</div>
<div class="mx-auto w-full max-w-5xl">
<aside class="fixed hidden h-screen w-56 shrink-0 pt-12 lg:flex lg:flex-col">
<a href="/" class="text-2xl font-medium">Lucia</a>
<nav class="flex flex-col gap-y-4 mt-4 overflow-auto pb-4">
{
sections.map((section) => {
return <NavSection title={section.title} pages={section.pages} />;
})
}
</nav>
</aside>
<main class="pb-24 pt-8 sm:pt-12 lg:ml-56 lg:pl-4 overflow-hidden">
<slot />
</main>
</div>
</body>
</html>
Expand Down Expand Up @@ -103,52 +117,52 @@ type Props = MarkdownLayoutProps<{
--astro-code-token-comment: rgb(143, 143, 143);
}

:global(.md h1) {
:global(main h1) {
@apply mb-8 break-words text-3xl font-semibold sm:text-4xl;
}
:global(.md h2) {
:global(main h2) {
@apply mb-4 mt-8 text-2xl font-semibold;
}
:global(.md h3) {
:global(main h3) {
@apply text-xl font-medium;
}
:global(.md > p) {
:global(main > p) {
@apply my-4;
}
:global(.md > ul) {
:global(main > ul) {
@apply my-4 list-inside list-disc;
}
:global(.md ul > li > ul) {
:global(main ul > li > ul) {
@apply list-inside list-disc pl-6;
}
:global(.md p a) {
:global(main p a) {
@apply text-main hover:underline;
}
:global(.md li a) {
:global(main li a) {
@apply text-main hover:underline;
}
:global(.md p > code, .md li > code, .md p > a > code, .md li > a > code) {
:global(main p > code, main li > code, main p > a > code, main li > a > code) {
@apply text-sm;
}
:global(.md pre code a) {
:global(main pre code a) {
@apply decoration-main hover:text-main underline hover:no-underline;
}
:global(.md pre) {
:global(main pre) {
@apply mb-6 mt-4 w-full overflow-auto rounded-md bg-zinc-100 p-4 text-sm leading-snug;
}
:global(.md table) {
:global(main table) {
@apply my-2 w-full table-auto border-collapse text-left text-sm;
}
:global(.md .table-wrapper) {
:global(main .table-wrapper) {
@apply w-full overflow-auto whitespace-nowrap;
}
:global(.md table thead tr) {
:global(main table thead tr) {
@apply w-full border-b border-zinc-200;
}
:global(.md table :is(td, th)) {
:global(main table :is(td, th)) {
@apply border-b border-zinc-200 px-1 py-1;
}
:global(.md table th) {
:global(main table th) {
@apply text-xs font-medium;
}
</style>
46 changes: 46 additions & 0 deletions documentation/src/components/NavSection.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
import type { Page } from 'src/nav';
interface Props {
title: string
pages: Page[]
}
function isSelected(href: string, currentPathname: string): boolean {
if (removeLeadingSlash(href) === removeLeadingSlash(currentPathname)) {
return true;
}
return currentPathname.startsWith(removeLeadingSlash(href) + "/");
}
function removeLeadingSlash(s: string): string {
if (s.endsWith("/")) {
return s.split("/").slice(0, -1).join("/");
}
return s;
}
---

<section class="text-sm">
<h2 class="mb-1 font-medium">{Astro.props.title}</h2>
<ul>
{Astro.props.pages.map((page) => {
return (
<li class="my-1">
<a
class:list={[
"hover:underline",
{
"text-zinc-600": !isSelected(page[1], Astro.url.pathname),
"text-main": isSelected(page[1], Astro.url.pathname)
}
]}
href={page[1]}
>
{page[2] === "code" ? <code>{page[0]}</code> : page[0]}
</a>
</li>
);
})}
</ul>
</section>
54 changes: 3 additions & 51 deletions documentation/src/components/NavMenu.astro → documentation/src/nav.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
---
const sections: Section[] = [
export const sections: Section[] = [
{
title: "Start here",
pages: [
Expand Down Expand Up @@ -49,56 +48,9 @@ const sections: Section[] = [
}
];

function isSelected(href: string, currentPathname: string): boolean {
if (removeLeadingSlash(href) === removeLeadingSlash(currentPathname)) {
return true;
}
return currentPathname.startsWith(removeLeadingSlash(href) + "/");
}
function removeLeadingSlash(s: string): string {
if (s.endsWith("/")) {
return s.split("/").slice(0, -1).join("/");
}
return s;
}
interface Section {
export interface Section {
title: string;
pages: Page[];
}

type Page = [title: string, href: string, format?: "code"];
---

<ul class="flex flex-col gap-y-4 text-sm">
{
sections.map((section) => {
return (
<li>
<p class="mb-1 font-medium">{section.title}</p>
<ul>
{section.pages.map((page) => {
return (
<li class="my-1">
<a
class:list={[
"hover:underline",
{
"text-zinc-600": !isSelected(page[1], Astro.url.pathname),
"text-main": isSelected(page[1], Astro.url.pathname)
}
]}
href={page[1]}
>
{page[2] === "code" ? <code>{page[0]}</code> : page[0]}
</a>
</li>
);
})}
</ul>
</li>
);
})
}
</ul>
export type Page = [title: string, href: string, format?: "code"];

0 comments on commit ec9a3a1

Please sign in to comment.