feat: initial commit

Author: anonrig

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.contentlayer

README.md

@@ -0,0 +1,15 @@
+## Getting started
+
+`ada-url.com` requires Node.js 20 with [pnpm](https://pnpm.io) to install dependencies.
+
+- To install `pnpm` follow the steps in https://pnpm.io/installation.
+- To build locally, run `pnpm install` in the root repository and navigate to `http://localhost:3000`
+- To run the linter, run `pnpm run lint-fix`
+
+## Documentation
+
+All documentation lives inside `contents/docs` folder
+
+## Credits
+
+- Components of this website is developed by `ui.shadcn.com`

app/docs/[[...slug]]/mdx.css

@@ -0,0 +1,67 @@
+[data-theme="light"] {
+  display: block;
+}
+
+[data-theme="dark"] {
+  display: none;
+}
+
+.dark [data-theme="light"] {
+  display: none;
+}
+
+.dark [data-theme="dark"] {
+  display: block;
+}
+
+[data-rehype-pretty-code-fragment] {
+  @apply relative;
+}
+
+[data-rehype-pretty-code-fragment] code {
+  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
+  counter-reset: line;
+  box-decoration-break: clone;
+}
+
+[data-rehype-pretty-code-fragment] .line {
+  @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
+}
+
+[data-rehype-pretty-code-fragment] [data-line-numbers] .line {
+  @apply px-2;
+}
+
+[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+  @apply text-muted-foreground/40 text-xs;
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1.8rem;
+  margin-right: 1.4rem;
+  text-align: right;
+}
+
+[data-rehype-pretty-code-fragment] .line--highlighted {
+  @apply bg-muted;
+}
+
+[data-rehype-pretty-code-fragment] .line-highlighted span {
+  @apply relative;
+}
+
+[data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply rounded-md bg-muted border-muted border p-1;
+}
+
+.dark [data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply bg-zinc-900;
+}
+
+[data-rehype-pretty-code-title] {
+  @apply mt-2 pt-6 px-4 text-sm font-medium;
+}
+
+[data-rehype-pretty-code-title] + pre {
+  @apply mt-2;
+}

app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,107 @@
+import { allDocs } from 'contentlayer/generated'
+import { notFound } from 'next/navigation'
+
+import './mdx.css'
+import { ChevronRight } from 'lucide-react'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import Balancer from 'react-wrap-balancer'
+
+import { Icons } from '@/components/icons'
+import { Mdx } from '@/components/mdx-components'
+import { DocsPager } from '@/components/pager'
+import { DashboardTableOfContents } from '@/components/toc'
+import { badgeVariants } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Separator } from '@/components/ui/separator'
+import { getTableOfContents } from '@/lib/toc'
+import { absoluteUrl, cn } from '@/lib/utils'
+
+interface DocPageProps {
+  params: {
+    slug: string[]
+  }
+}
+
+async function getDocFromParams({ params }: DocPageProps) {
+  const slug = params.slug?.join('/') || ''
+  const doc = allDocs.find((doc) => doc.slugAsParams === slug)
+
+  if (!doc) {
+    null
+  }
+
+  return doc
+}
+
+export async function generateMetadata({ params }: DocPageProps): Promise<Metadata> {
+  const doc = await getDocFromParams({ params })
+
+  if (!doc) {
+    return {}
+  }
+
+  return {
+    title: doc.title,
+    description: doc.description,
+    openGraph: {
+      title: doc.title,
+      description: doc.description,
+      type: 'article',
+      url: absoluteUrl(doc.slug),
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: doc.title,
+      description: doc.description,
+      images: [],
+    },
+  }
+}
+
+export async function generateStaticParams(): Promise<DocPageProps['params'][]> {
+  return allDocs.map((doc) => ({
+    slug: doc.slugAsParams.split('/'),
+  }))
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+  const doc = await getDocFromParams({ params })
+
+  if (!doc) {
+    notFound()
+  }
+
+  const toc = await getTableOfContents(doc.body.raw)
+
+  return (
+    <main className='relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]'>
+      <div className='mx-auto w-full min-w-0'>
+        <div className='mb-4 flex items-center space-x-1 text-sm text-muted-foreground'>
+          <div className='overflow-hidden text-ellipsis whitespace-nowrap'>Docs</div>
+          <ChevronRight className='h-4 w-4' />
+          <div className='font-medium text-foreground'>{doc.title}</div>
+        </div>
+        <div className='space-y-2'>
+          <h1 className={cn('scroll-m-20 text-4xl font-bold tracking-tight')}>{doc.title}</h1>
+          {doc.description && (
+            <p className='text-lg text-muted-foreground'>
+              <Balancer>{doc.description}</Balancer>
+            </p>
+          )}
+        </div>
+        <Separator className='my-4 md:my-6' />
+        <Mdx code={doc.body.code} />
+        <Separator className='my-4 md:my-6' />
+        <DocsPager doc={doc} />
+      </div>
+      <div className='hidden text-sm xl:block'>
+        <div className='sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6'>
+          <ScrollArea className='pb-10'>
+            <DashboardTableOfContents toc={toc} />
+          </ScrollArea>
+        </div>
+      </div>
+    </main>
+  )
+}

app/docs/layout.tsx

@@ -0,0 +1,17 @@
+import { DocsSidebarNav } from '@/components/sidebar-nav'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { docsConfig } from '@/config/docs'
+import { PropsWithChildren } from 'react'
+
+export default function DocsLayout({ children }: PropsWithChildren) {
+  return (
+    <div className='container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10'>
+      <aside className='fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block'>
+        <ScrollArea className='py-6 pr-6 lg:py-8'>
+          <DocsSidebarNav items={docsConfig.sidebarNav} />
+        </ScrollArea>
+      </aside>
+      {children}
+    </div>
+  )
+}

app/favicon.ico

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 215 20.2% 65.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+ 
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+ 
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+ 
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+ 
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+ 
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 216 34% 17%;
+ 
+    --radius: 0.5rem;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}

app/globals.css

@@ -0,0 +1,49 @@
+import './globals.css'
+import { SiteFooter } from '@/components/site-footer'
+import { SiteHeader } from '@/components/site-header'
+import { ThemeProvider } from '@/components/theme-provider'
+import { siteConfig } from '@/config/site'
+import { cn } from '@/lib/utils'
+import { Inter } from 'next/font/google'
+import type { PropsWithChildren } from 'react'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: {
+    default: 'Home',
+    template: `%s - ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  keywords: ['WHATWG', 'URL Parser', 'Fast URL parsing', 'ada-url', 'Ada URL Parser'],
+  authors: [
+    {
+      name: 'Yagiz Nizipli',
+      url: 'https://yagiz.co',
+    },
+    {
+      name: 'Daniel Lemire',
+      url: 'https://lemire.me',
+    },
+  ],
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+}
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang='en' suppressHydrationWarning>
+      <body className={cn('min-h-screen bg-background font-sans antialiased', inter.className)}>
+        <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+          <div className='relative flex min-h-screen flex-col'>
+            <SiteHeader />
+            <div className='flex-1'>{children}</div>
+            <SiteFooter />
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}