lepton/Webserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated look
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
Details

Browse Source
This commit is contained in:
Akshay Kolli
2026-04-11 23:27:29 -04:00
parent aa7fe8ecc7
commit 382edaab75
21 changed files with 740 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/mdx/Citation.tsx
View File

@@ -3,7 +3,7 @@ export function Citation({ id, index }: { id: string; index: number }) {
<sup id={`cite-ref-${id}`} className="ml-0.5">
<a
href={`#cite-note-${id}`}
className="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors font-mono text-[10px] no-underline"
className="font-mono text-[10px] text-muted-strong transition-colors no-underline hover:text-ink"
>
[{index}]
</a>
@@ -15,13 +15,13 @@ export function Bibliography({ items, children }: { items?: { id: string; conten
if (!items && !children) return null;
return (
<div className="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
<h3 className="text-sm font-bold uppercase tracking-wider text-zinc-900 dark:text-zinc-100 mb-4">References</h3>
<ol className="list-decimal pl-4 space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
{Array.isArray(items) && items.map((item, i) => (
<div className="mt-12 border-t border-line pt-8">
<h3 className="eyebrow mb-4">References</h3>
<ol className="list-decimal space-y-2 pl-4 text-[0.94rem] leading-7 text-muted">
{Array.isArray(items) && items.map((item) => (
<li key={item.id} id={`cite-note-${item.id}`}>
{item.content}
<a href={`#cite-ref-${item.id}`} className="ml-2 hover:text-zinc-900 dark:hover:text-zinc-100">
<a href={`#cite-ref-${item.id}`} className="ml-2 transition-colors hover:text-ink">
↩
</a>
</li>

56
components/mdx/MobileTableOfContents.tsx
View File

@@ -1,7 +1,3 @@
'use client';
import { useState } from 'react';
type Heading = {
id: string;
text: string;
@@ -9,42 +5,28 @@ type Heading = {
};
export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
const [isOpen, setIsOpen] = useState(false);
if (headings.length === 0) return null;
return (
<div className="block xl:hidden mb-8 border border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
<button
onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen}
aria-controls="mobile-toc"
className="w-full flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 text-sm font-medium text-zinc-900 dark:text-zinc-100"
>
<span>Table of Contents</span>
<span className={`transform transition-transform ${isOpen ? 'rotate-180' : ''}`}>
▼
</span>
</button>
{isOpen && (
<ul id="mobile-toc" className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
{headings.map((heading) => (
<li
key={heading.id}
style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
<details className="mb-8 border-y border-line py-4">
<summary className="eyebrow cursor-pointer list-none">
Contents
</summary>
<ul className="mt-4 space-y-2">
{headings.map((heading) => (
<li
key={heading.id}
style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
>
<a
href={`#${heading.id}`}
className="block text-[0.94rem] leading-7 text-muted transition-colors hover:text-ink"
>
<a
href={`#${heading.id}`}
onClick={() => setIsOpen(false)}
className="block text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 truncate"
>
{heading.text}
</a>
</li>
))}
</ul>
)}
</div>
{heading.text}
</a>
</li>
))}
</ul>
</details>
);
}

12
components/mdx/SideNote.tsx
View File

@@ -1,12 +1,8 @@
export function SideNote({ children, title }: { children: React.ReactNode; title?: string }) {
return (
<aside className="my-6 p-4 bg-zinc-50 dark:bg-zinc-900/50 border-l-2 border-zinc-300 dark:border-zinc-700 text-sm text-zinc-600 dark:text-zinc-400 font-light italic rounded-r-lg lg:absolute lg:right-0 lg:w-64 lg:mr-[-20rem] lg:my-0 lg:p-0 lg:bg-transparent lg:dark:bg-transparent lg:border-0 lg:not-italic lg:rounded-none">
{/* Mobile/Tablet view: distinct block */}
{/* Desktop view: Absolute positioning to the right margin */}
<span className="lg:block lg:text-xs lg:leading-relaxed">
{title && <strong className="block mb-1 text-zinc-900 dark:text-zinc-200 not-italic">{title}</strong>}
{children}
</span>
</aside>
<span role="note" className="side-note">
{title ? <strong>{title}</strong> : null}
{children}
</span>
);
}

14
components/mdx/TableOfContents.tsx
View File

@@ -54,19 +54,19 @@ export function TableOfContents({ headings }: { headings: Heading[] }) {
if (headings.length === 0) return null;
return (
<nav aria-label="Table of contents" className="text-sm animate-fade-in text-left">
<h4 className="font-bold text-zinc-900 dark:text-zinc-100 mb-4 uppercase tracking-wider text-xs">On this page</h4>
<ul className="space-y-3">
<nav aria-label="Table of contents" className="text-left">
<h4 className="eyebrow mb-4">Contents</h4>
<ul className="space-y-2">
{Array.isArray(headings) && headings.map((heading) => (
<li
key={heading.id}
style={{ paddingRight: `${(heading.level - 2) * 12}px` }}
style={{ paddingLeft: `${(heading.level - 2) * 10}px` }}
>
<a
href={`#${heading.id}`}
className={`block transition-all duration-200 border-l-2 pl-4 ${activeId === heading.id
? 'border-zinc-900 dark:border-zinc-100 text-zinc-900 dark:text-zinc-50 font-bold'
: 'border-transparent text-zinc-500 dark:text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
className={`block text-[0.82rem] leading-6 transition-colors ${activeId === heading.id
? 'text-ink'
: 'text-muted hover:text-ink'
}`}
>
{heading.text}