Elgato_dark/taxonomy
1
0
Fork 0
mirror of https://github.com/shadcn-ui/taxonomy synced 2026-05-24 01:38:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement blog and doc sites

Browse source
This commit is contained in:
shadcn 2022-11-17 19:14:41 +04:00
parent fc9a1ab8df
commit 1c418b1ae5
101 changed files with 5268 additions and 937 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -37,3 +37,4 @@ yarn-error.log*
next-env.d.ts
.vscode
.contentlayer

4
app/(auth)/layout.tsx
View file

@ -1,9 +1,7 @@
import "styles/globals.css"
interface AuthLayoutProps {
children: React.ReactNode
}
export default function RootLayout({ children }: AuthLayoutProps) {
export default function AuthLayout({ children }: AuthLayoutProps) {
return <div className="min-h-screen">{children}</div>
}

8
app/(auth)/login/page.tsx
View file

@ -1,14 +1,14 @@
import Link from "next/link"
import { Icons } from "@/components/icons"
import { UserAuthForm } from "@/components/user-auth-form"
import { UserAuthForm } from "@/components/dashboard/user-auth-form"
export default function LoginPage() {
return (
<div className="container flex h-screen w-screen flex-col items-center justify-center">
<Link
href="/"
className="absolute top-4 left-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:left-8"
className="absolute top-4 left-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-200 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:left-8"
>
<>
<Icons.chevronLeft className="mr-2 h-4 w-4" />
@ -19,12 +19,12 @@ export default function LoginPage() {
<div className="flex flex-col space-y-2 text-center">
<Icons.logo className="mx-auto h-6 w-6" />
<h1 className="text-2xl font-bold">Welcome back</h1>
<p className="text-sm text-slate-500">
<p className="text-sm text-slate-600">
Enter your email to sign in to your account
</p>
</div>
<UserAuthForm />
<p className="px-8 text-center text-sm text-slate-500">
<p className="px-8 text-center text-sm text-slate-600">
<Link href="/register" className="underline hover:text-brand">
Don&apos;t have an account? Sign Up
</Link>

8
app/(auth)/register/page.tsx
View file

@ -1,14 +1,14 @@
import Link from "next/link"
import { Icons } from "@/components/icons"
import { UserAuthForm } from "@/components/user-auth-form"
import { UserAuthForm } from "@/components/dashboard/user-auth-form"
export default function RegisterPage() {
return (
<div className="container grid h-screen w-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
<Link
href="/login"
className="absolute top-4 right-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:right-8"
className="absolute top-4 right-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-200 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:right-8"
>
Login
</Link>
@ -18,12 +18,12 @@ export default function RegisterPage() {
<div className="flex flex-col space-y-2 text-center">
<Icons.logo className="mx-auto h-6 w-6" />
<h1 className="text-2xl font-bold">Create an account</h1>
<p className="text-sm text-slate-500">
<p className="text-sm text-slate-600">
Enter your email below to create your account
</p>
</div>
<UserAuthForm />
<p className="px-8 text-center text-sm text-slate-500">
<p className="px-8 text-center text-sm text-slate-600">
By clicking continue, you agree to our{" "}
<Link href="/terms" className="underline hover:text-brand">
Terms of Service

4
app/(dashboard)/dashboard/layout.tsx
View file

@ -2,8 +2,8 @@ import { notFound } from "next/navigation"
import Link from "next/link"
import { getCurrentUser } from "@/lib/session"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserAccountNav } from "@/components/user-account-nav"
import { DashboardNav } from "@/components/dashboard/nav"
import { UserAccountNav } from "@/components/dashboard/user-account-nav"
import { Icons } from "@/components/icons"
interface DashboardLayoutProps {

8
app/(dashboard)/dashboard/loading.tsx
View file

@ -1,7 +1,7 @@
import { DashboardHeader } from "@/components/dashboard-header"
import { DashboardShell } from "@/components/dashboard-shell"
import { PostCreateButton } from "@/components/post-create-button"
import { PostItem } from "@/components/post-item"
import { DashboardHeader } from "@/components/dashboard/header"
import { DashboardShell } from "@/components/dashboard/shell"
import { PostCreateButton } from "@/components/dashboard/post-create-button"
import { PostItem } from "@/components/dashboard/post-item"
export default function DashboardLoading() {
return (

10
app/(dashboard)/dashboard/page.tsx
View file

@ -4,11 +4,11 @@ import { db } from "@/lib/db"
import { getCurrentUser } from "@/lib/session"
import { User } from "@prisma/client"
import { authOptions } from "@/lib/auth"
import { DashboardHeader } from "@/components/dashboard-header"
import { PostCreateButton } from "@/components/post-create-button"
import { DashboardShell } from "@/components/dashboard-shell"
import { PostItem } from "@/components/post-item"
import { EmptyPlaceholder } from "@/components/empty-placeholder"
import { DashboardHeader } from "@/components/dashboard/header"
import { PostCreateButton } from "@/components/dashboard/post-create-button"
import { DashboardShell } from "@/components/dashboard/shell"
import { PostItem } from "@/components/dashboard/post-item"
import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"
async function getPostsForUser(userId: User["id"]) {
return await db.post.findMany({

4
app/(dashboard)/dashboard/settings/loading.tsx
View file

@ -1,5 +1,5 @@
import { DashboardHeader } from "@/components/dashboard-header"
import { DashboardShell } from "@/components/dashboard-shell"
import { DashboardHeader } from "@/components/dashboard/header"
import { DashboardShell } from "@/components/dashboard/shell"
import { Card } from "@/ui/card"
export default function DashboardSettingsLoading() {

6
app/(dashboard)/dashboard/settings/page.tsx
View file

@ -2,9 +2,9 @@ import { redirect } from "next/navigation"
import { getCurrentUser } from "@/lib/session"
import { authOptions } from "@/lib/auth"
import { DashboardHeader } from "@/components/dashboard-header"
import { DashboardShell } from "@/components/dashboard-shell"
import { UserNameForm } from "@/components/user-name-form"
import { DashboardHeader } from "@/components/dashboard/header"
import { DashboardShell } from "@/components/dashboard/shell"
import { UserNameForm } from "@/components/dashboard/user-name-form"
export default async function SettingsPage() {
const user = await getCurrentUser()

5
app/(docs)/docs/[[...slug]]/head.tsx Normal file
View file

@ -0,0 +1,5 @@
import MdxHead from "@/components/docs/mdx-head"
export default function Head({ params }) {
return <MdxHead params={params} />
}

50
app/(docs)/docs/[[...slug]]/page.tsx Normal file
View file

@ -0,0 +1,50 @@
import { notFound } from "next/navigation"
import { allDocs } from "contentlayer/generated"
import { getTableOfContents } from "@/lib/toc"
import { Mdx } from "@/components/docs/mdx"
import { DashboardTableOfContents } from "@/components/docs/toc"
import { DocsPageHeader } from "@/components/docs/page-header"
import { DocsPager } from "@/components/docs/pager"
import "@/styles/mdx.css"
interface DocPageProps {
params: {
slug: string[]
}
}
export async function generateStaticParams(): Promise<
DocPageProps["params"][]
> {
return allDocs.map((doc) => ({
slug: doc.slugAsParams.split("/"),
}))
}
export default async function DocPage({ params }: DocPageProps) {
const slug = params?.slug?.join("/") || ""
const doc = allDocs.find((doc) => doc.slugAsParams === slug)
if (!doc) {
notFound()
}
const toc = await getTableOfContents(doc.body.raw)
return (
<main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]">
<div className="mx-auto w-full min-w-0">
<DocsPageHeader heading={doc.title} text={doc.description} />
<Mdx code={doc.body.code} />
<hr className="my-4 border-slate-200 md:my-6" />
<DocsPager doc={doc} />
</div>
<div className="hidden text-sm xl:block">
<div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
<DashboardTableOfContents toc={toc} />
</div>
</div>
</main>
)
}

17
app/(docs)/docs/layout.tsx Normal file
View file

@ -0,0 +1,17 @@
import { docsConfig } from "@/config/docs"
import { DocsSidebarNav } from "@/components/docs/sidebar-nav"
interface DocsLayoutProps {
children: React.ReactNode
}
export default function DocsLayout({ children }: DocsLayoutProps) {
return (
<div className="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
<aside className="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full flex-shrink-0 overflow-y-auto border-r border-r-slate-100 py-6 pr-2 md:sticky md:block lg:py-10">
<DocsSidebarNav items={docsConfig.sidebarNav} />
</aside>
{children}
</div>
)
}

5
app/(docs)/guides/[...slug]/head.tsx Normal file
View file

@ -0,0 +1,5 @@
import MdxHead from "@/components/docs/mdx-head"
export default function Head({ params }) {
return <MdxHead params={params} />
}

60
app/(docs)/guides/[...slug]/page.tsx Normal file
View file

@ -0,0 +1,60 @@
import Link from "next/link"
import { notFound } from "next/navigation"
import { allGuides } from "contentlayer/generated"
import { getTableOfContents } from "@/lib/toc"
import { Mdx } from "@/components/docs/mdx"
import { DashboardTableOfContents } from "@/components/docs/toc"
import { DocsPageHeader } from "@/components/docs/page-header"
import { Icons } from "@/components/icons"
import "@/styles/mdx.css"
interface GuidePageProps {
params: {
slug: string[]
}
}
export async function generateStaticParams(): Promise<
GuidePageProps["params"][]
> {
return allGuides.map((guide) => ({
slug: guide.slugAsParams.split("/"),
}))
}
export default async function GuidePage({ params }: GuidePageProps) {
const slug = params?.slug?.join("/")
const guide = allGuides.find((guide) => guide.slugAsParams === slug)
if (!guide) {
notFound()
}
const toc = await getTableOfContents(guide.body.raw)
return (
<main className="relative py-6 lg:grid lg:grid-cols-[1fr_300px] lg:gap-10 lg:py-10 xl:gap-20">
<div>
<DocsPageHeader heading={guide.title} text={guide.description} />
<Mdx code={guide.body.code} />
<hr className="my-4 border-slate-200" />
<div className="flex justify-center py-6 lg:py-10">
<Link
href="/guides"
className="mb-4 inline-flex items-center justify-center text-sm font-medium text-slate-600 hover:text-slate-900"
>
<Icons.chevronLeft className="mr-2 h-4 w-4" />
See all guides
</Link>
</div>
</div>
<div className="hidden text-sm lg:block">
<div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
<DashboardTableOfContents toc={toc} />
</div>
</div>
</main>
)
}

7
app/(docs)/guides/layout.tsx Normal file
View file

@ -0,0 +1,7 @@
interface GuidesLayoutProps {
children: React.ReactNode
}
export default function GuidesLayout({ children }: GuidesLayoutProps) {
return <div className="mx-auto max-w-5xl">{children}</div>
}

59
app/(docs)/guides/page.tsx Normal file
View file

@ -0,0 +1,59 @@
import Link from "next/link"
import { compareDesc } from "date-fns"
import { allGuides } from "contentlayer/generated"
import { DocsPageHeader } from "@/components/docs/page-header"
import { formatDate } from "@/lib/utils"
export default function GuidesPage() {
const guides = allGuides
.filter((guide) => guide.published)
.sort((a, b) => {
return compareDesc(new Date(a.date), new Date(b.date))
})
return (
<div className="py-6 lg:py-10">
<DocsPageHeader
heading="Guides"
text="This section includes end-to-end guides for developing Next.js 13 apps."
/>
{guides?.length ? (
<div className="grid gap-4 md:grid-cols-2 md:gap-6">
{guides.map((guide) => (
<article
key={guide._id}
className="group relative rounded-lg border border-slate-200 bg-white p-6 shadow-md transition-shadow hover:shadow-lg"
>
{guide.featured && (
<span className="absolute top-4 right-4 rounded-full bg-slate-100 px-3 py-1 text-xs font-medium">
Featured
</span>
)}
<div className="flex flex-col justify-between space-y-4">
<div className="space-y-2">
<h2 className="text-xl font-medium tracking-tight text-slate-900">
{guide.title}
</h2>
{guide.description && (
<p className="text-slate-700">{guide.description}</p>
)}
</div>
{guide.date && (
<p className="text-sm text-slate-600">
{formatDate(guide.date)}
</p>
)}
</div>
<Link href={guide.slug} className="absolute inset-0">
<span className="sr-only">View</span>
</Link>
</article>
))}
</div>
) : (
<p>No guides published.</p>
)}
</div>
)
}

46
app/(docs)/layout.tsx Normal file
View file

@ -0,0 +1,46 @@
import Link from "next/link"
import { siteConfig } from "@/config/site"
import { docsConfig } from "@/config/docs"
import { Icons } from "@/components/icons"
import { MainNav } from "@/components/main-nav"
import { DocsSearch } from "@/components/docs/search"
import { SiteFooter } from "@/components/site-footer"
import { DocsSidebarNav } from "@/components/docs/sidebar-nav"
interface DocsLayoutProps {
children: React.ReactNode
}
export default function DocsLayout({ children }: DocsLayoutProps) {
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-40 w-full border-b border-b-slate-200 bg-white">
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
<MainNav items={docsConfig.mainNav}>
<DocsSidebarNav items={docsConfig.sidebarNav} />
</MainNav>
<div className="flex flex-1 items-center space-x-4 sm:justify-end">
<div className="flex-1 sm:flex-grow-0">
<DocsSearch />
</div>
<nav className="flex space-x-4">
<Link
href={siteConfig.links.github}
target="_blank"
rel="noreferrer"
>
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-slate-900 text-slate-50 hover:bg-slate-600">
<Icons.gitHub className="h-4 w-4 fill-white" />
<span className="sr-only">GitHub</span>
</div>
</Link>
</nav>
</div>
</div>
</header>
<div className="container flex-1">{children}</div>
<SiteFooter />
</div>
)
}

2
app/(editor)/editor/[postId]/not-found.tsx
View file

@ -1,6 +1,6 @@
import Link from "next/link"
import { EmptyPlaceholder } from "@/components/empty-placeholder"
import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"
export default function NotFound() {
return (

2
app/(editor)/editor/[postId]/page.tsx
View file

@ -4,7 +4,7 @@ import { Post, User } from "@prisma/client"
import { db } from "@/lib/db"
import { getCurrentUser } from "@/lib/session"
import { authOptions } from "@/lib/auth"
import { Editor } from "@/components/editor"
import { Editor } from "@/components/dashboard/editor"
async function getPostForUser(postId: Post["id"], userId: User["id"]) {
return await db.post.findFirst({

4
app/(editor)/editor/layout.tsx
View file

@ -1,7 +1,3 @@
import Link from "next/link"
import { Icons } from "@/components/icons"
interface EditorProps {
children?: React.ReactNode
}

19
app/(marketing)/[...slug]/head.tsx
View file

@ -1,18 +1,5 @@
import { Page } from "@/lib/mdx/sources"
import MdxHead from "@/components/docs/mdx-head"
export default async function Head({ params }) {
const page = await Page.getMdxNode(params?.slug)
if (!page) {
return null
}
return (
<>
<title>{page.frontMatter.title}</title>
{page.frontMatter.excerpt && (
<meta name="description" content={page.frontMatter.excerpt} />
)}
</>
)
export default function Head({ params }) {
return <MdxHead params={params} />
}

38
app/(marketing)/[...slug]/page.tsx
View file

@ -1,8 +1,8 @@
import { notFound } from "next/navigation"
import { allPages } from "contentlayer/generated"
import { Page } from "@/lib/mdx/sources"
import { MdxContent } from "@/components/mdx-content"
import { serialize } from "next-mdx-remote/serialize"
import { Mdx } from "@/components/docs/mdx"
import "@/styles/mdx.css"
interface PageProps {
params: {
@ -11,35 +11,31 @@ interface PageProps {
}
export async function generateStaticParams(): Promise<PageProps["params"][]> {
const files = await Page.getMdxFiles()
return files?.map((file) => ({
slug: file.slug.split("/"),
return allPages.map((page) => ({
slug: page.slugAsParams.split("/"),
}))
}
export default async function BasicPage({ params }: PageProps) {
const page = await Page.getMdxNode(params.slug)
export default async function PagePage({ params }: PageProps) {
const slug = params?.slug?.join("/")
const page = allPages.find((page) => page.slugAsParams === slug)
if (!page) {
notFound()
}
const mdx = await serialize(page.content)
return (
<article className="mx-auto max-w-2xl py-12">
<div className="flex flex-col space-y-2">
<h1 className="max-w-[90%] text-4xl font-bold leading-normal">
{page.frontMatter.title}
<article className="container max-w-3xl py-6 lg:py-10">
<div className="space-y-4">
<h1 className="inline-block text-4xl font-extrabold tracking-tight text-slate-900 lg:text-5xl">
{page.title}
</h1>
{page.description && (
<p className="text-xl text-slate-600">{page.description}</p>
)}
</div>
<hr className="my-6" />
{mdx && (
<div className="prose max-w-none">
<MdxContent source={mdx} />
</div>
)}
<hr className="my-4 border-slate-200" />
<Mdx code={page.body.code} />
</article>
)
}

19
app/(marketing)/blog/[...slug]/head.tsx
View file

@ -1,18 +1,5 @@
import { Blog } from "@/lib/mdx/sources"
import MdxHead from "@/components/docs/mdx-head"
export default async function Head({ params }) {
const post = await Blog.getMdxNode(params?.slug)
if (!post) {
return null
}
return (
<>
<title>{post.frontMatter.title}</title>
{post.frontMatter.excerpt && (
<meta name="description" content={post.frontMatter.excerpt} />
)}
</>
)
export default function Head({ params }) {
return <MdxHead params={params} />
}

97
app/(marketing)/blog/[...slug]/page.tsx
View file

@ -1,9 +1,12 @@
import { notFound } from "next/navigation"
import { serialize } from "next-mdx-remote/serialize"
import { allAuthors, allPosts } from "contentlayer/generated"
import { Blog } from "@/lib/mdx/sources"
import { MdxContent } from "@/components/mdx-content"
import { Mdx } from "@/components/docs/mdx"
import "@/styles/mdx.css"
import { formatDate } from "@/lib/utils"
import Link from "next/link"
import { Icons } from "@/components/icons"
import Image from "next/image"
interface PostPageProps {
params: {
@ -14,42 +17,86 @@ interface PostPageProps {
export async function generateStaticParams(): Promise<
PostPageProps["params"][]
> {
const files = await Blog.getMdxFiles()
return files?.map((file) => ({
slug: file.slug.split("/"),
return allPosts.map((post) => ({
slug: post.slugAsParams.split("/"),
}))
}
export default async function PostPage({ params }: PostPageProps) {
const post = await Blog.getMdxNode(params?.slug)
const slug = params?.slug?.join("/")
const post = allPosts.find((post) => post.slugAsParams === slug)
if (!post) {
notFound()
}
const mdx = await serialize(post.content)
const authors = post.authors.map((author) =>
allAuthors.find(({ slug }) => slug === `/authors/${author}`)
)
return (
<article className="container pt-8 md:max-w-3xl md:pt-12 lg:pt-24">
<div className="flex flex-col space-y-4">
<h1 className="md:leading-12 text-2xl font-bold leading-[1.2] sm:text-3xl md:text-5xl">
{post.frontMatter.title}
</h1>
{post.frontMatter.date && (
<p className="text-slate-800">{formatDate(post.frontMatter.date)}</p>
<article className="container relative max-w-3xl py-6 lg:py-10">
<Link
href="/blog"
className="absolute top-14 -left-[200px] hidden items-center justify-center text-sm font-medium text-slate-600 hover:text-slate-900 xl:inline-flex"
>
<Icons.chevronLeft className="mr-2 h-4 w-4" />
See all posts
</Link>
<div>
{post.date && (
<time dateTime={post.date} className="block text-sm text-slate-600">
Published on {formatDate(post.date)}
</time>
)}
<h1 className="mt-2 inline-block text-4xl font-extrabold leading-tight text-slate-900 lg:text-5xl">
{post.title}
</h1>
{authors?.length ? (
<div className="mt-4 flex space-x-4">
{authors.map((author) => (
<Link
key={author._id}
href={`https://twitter.com/${author.twitter}`}
className="flex items-center space-x-2 text-sm"
>
<Image
src={author.avatar}
alt={author.title}
width={42}
height={42}
className="rounded-full"
/>
<div className="flex-1 text-left leading-tight">
<p className="font-medium text-slate-900">{author.title}</p>
<p className="text-[12px] text-slate-600">
@{author.twitter}
</p>
</div>
</Link>
))}
</div>
) : null}
</div>
<div className="pt-12 pb-8 md:pt-10 md:pb-8 lg:pt-12 lg:pb-12">
<hr className="border-slate-100" />
</div>
{mdx && (
<div className="prose max-w-none">
<MdxContent source={mdx} />
</div>
{post.image && (
<Image
src={post.image}
alt={post.title}
width={840}
height={450}
className="my-8 rounded-md border border-slate-200 bg-slate-200 transition-colors group-hover:border-slate-900"
/>
)}
<div className="pt-12 pb-8 md:pt-10 md:pb-8 lg:pt-12 lg:pb-12">
<hr className="border-slate-100" />
<Mdx code={post.body.code} />
<hr className="my-4 border-slate-200" />
<div className="flex justify-center py-6 lg:py-10">
<Link
href="/blog"
className="inline-flex items-center justify-center text-sm font-medium text-slate-600 hover:text-slate-900"
>
<Icons.chevronLeft className="mr-2 h-4 w-4" />
See all posts
</Link>
</div>
</article>
)

99
app/(marketing)/blog/page.tsx
View file

@ -1,51 +1,70 @@
import Link from "next/link"
import { compareDesc } from "date-fns"
import { allPosts } from "contentlayer/generated"
import { Blog } from "@/lib/mdx/sources"
import { formatDate } from "@/lib/utils"
import Image from "next/image"
export default async function BlogPage() {
const posts = await Blog.getAllMdxNodes()
const posts = allPosts
.filter((post) => post.published)
.sort((a, b) => {
return compareDesc(new Date(a.date), new Date(b.date))
})
return (
<div className="container pt-8 md:max-w-3xl md:pt-12 lg:pt-24">
<div className="mx-auto flex flex-col gap-4">
<h1 className="text-2xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
Blog
</h1>
<p className="max-w-[75%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
A blog built using MDX content. I copied some sample blog posts from
my{" "}
<Link href="https://shadcn.com" target="_blank" className="underline">
personal site
</Link>
.
</p>
<div className="container max-w-4xl py-6 lg:py-10">
<div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
<div className="flex-1 space-y-4">
<h1 className="inline-block text-4xl font-extrabold tracking-tight text-slate-900 lg:text-5xl">
Blog
</h1>
<p className="text-xl text-slate-600">
A blog built using Contentlayer. Posts are written in MDX.
</p>
</div>
<Link
href="/guides"
className="relative inline-flex h-11 items-center rounded-md border border-slate-900 bg-white px-8 py-2 text-center font-medium text-slate-900 transition-colors hover:bg-slate-900 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
>
Build your own
</Link>
</div>
<div className="md:pt-18 pt-12 pb-8 md:pb-10 lg:pt-24 lg:pb-12">
<hr className="border-slate-100" />
</div>
{posts.map((post) => (
<article key={post.slug} className="flex flex-col space-y-4">
<div className="flex flex-col space-y-2">
<Link href={post.url}>
<h2 className="max-w-[80%] text-2xl font-bold leading-normal sm:text-3xl md:text-3xl">
{post.frontMatter.title}
</h2>
</Link>
{post.frontMatter.date && (
<p className="text-sm text-slate-600">
{formatDate(post.frontMatter.date)}
</p>
)}
</div>
{post.frontMatter.excerpt && (
<p className="text-slate-600">{post.frontMatter.excerpt}</p>
)}
<div className="py-8 md:py-10 lg:py-12">
<hr className="border-slate-100" />
</div>
</article>
))}
<hr className="my-8 border-slate-200" />
{posts?.length ? (
<div className="grid gap-10 sm:grid-cols-2">
{posts.map((post) => (
<article
key={post._id}
className="group relative flex flex-col space-y-2"
>
{post.image && (
<Image
src={post.image}
alt={post.title}
width={840}
height={450}
className="rounded-md border border-slate-200 bg-slate-200 transition-colors group-hover:border-slate-900"
/>
)}
<h2 className="text-2xl font-extrabold">{post.title}</h2>
{post.description && (
<p className="text-slate-600">{post.description}</p>
)}
{post.date && (
<p className="text-sm text-slate-600">
{formatDate(post.date)}
</p>
)}
<Link href={post.slug} className="absolute inset-0">
<span className="sr-only">View Article</span>
</Link>
</article>
))}
</div>
) : (
<p>No posts published.</p>
)}
</div>
)
}

41
app/(marketing)/layout.tsx
View file

@ -1,6 +1,10 @@
import { Icons } from "@/components/icons"
import Link from "next/link"
import { marketingConfig } from "@/config/marketing"
import { siteConfig } from "@/config/site"
import { MainNav } from "@/components/main-nav"
import { SiteFooter } from "@/components/site-footer"
interface MarketingLayoutProps {
children: React.ReactNode
}
@ -8,40 +12,21 @@ interface MarketingLayoutProps {
export default function MarketingLayout({ children }: MarketingLayoutProps) {
return (
<div className="flex min-h-screen flex-col">
<header className="container flex items-center justify-between py-4">
<div className="flex gap-6 md:gap-10">
<Link href="/" className="flex items-center space-x-2">
<Icons.logo />
<span className="hidden font-bold sm:inline-block">Taxonomy</span>
</Link>
<nav className="flex items-center gap-6 sm:gap-8">
<Link href="/blog" className="text-sm font-medium hover:underline">
Blog
</Link>
<header className="container sticky top-0 z-40 bg-white">
<div className="flex h-16 items-center justify-between border-b border-b-slate-200 py-4">
<MainNav items={marketingConfig.mainNav} />
<nav>
<Link
href="#"
className="cursor-not-allowed text-sm font-medium opacity-60 hover:underline"
href="/login"
className="relative inline-flex h-8 items-center rounded-md border border-transparent bg-brand-500 px-6 py-1 text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
>
Pricing
</Link>
<Link
href="#"
className="cursor-not-allowed text-sm font-medium opacity-60 hover:underline"
>
Docs
Login
</Link>
</nav>
</div>
<nav>
<Link
href="/login"
className="relative inline-flex items-center rounded-md border border-transparent bg-brand-500 px-6 py-2 text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
>
Login
</Link>
</nav>
</header>
<main className="flex-1">{children}</main>
<SiteFooter />
</div>
)
}

231
app/(marketing)/page.tsx
View file

@ -1,25 +1,34 @@
import Link from "next/link"
import Image from "next/image"
import { Icons } from "@/components/icons"
import hero from "../../public/images/hero.png"
import { siteConfig } from "@/config/site"
async function getGitHubStars(): Promise<string | null> {
const response = await fetch("https://api.github.com/repos/shadcn/taxonomy", {
headers: {
Accept: "application/vnd.github+json",
Authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
},
next: {
revalidate: 60,
},
})
try {
const response = await fetch(
"https://api.github.com/repos/shadcn/taxonomy",
{
headers: {
Accept: "application/vnd.github+json",
Authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
},
next: {
revalidate: 60,
},
}
)
if (!response?.ok) {
if (!response?.ok) {
return null
}
const json = await response.json()
return parseInt(json["stargazers_count"]).toLocaleString()
} catch (error) {
return null
}
const json = await response.json()
return parseInt(json["stargazers_count"]).toLocaleString()
}
export default async function IndexPage() {
@ -27,35 +36,28 @@ export default async function IndexPage() {
return (
<>
<section className="container grid items-center justify-center gap-6 pt-8 md:pt-12 lg:pt-24">
<div className="flex flex-col items-start gap-4 md:max-w-[800px]">
<Link
href="https://twitter.com/shadcn"
className="group inline-flex items-center space-x-2 rounded-full text-sm font-medium"
>
<span>Follow development on Twitter</span>
<span className="rounded-full bg-slate-100 p-1 transition-colors group-hover:bg-slate-900 group-hover:text-white">
<Icons.arrowRight className="h-3 w-3" />
</span>
</Link>
<h1 className="text-3xl font-black leading-[1.1] sm:text-4xl md:text-6xl">
Publishing Platform for Everyone
<section className="container grid items-center justify-center gap-6 pt-6 pb-8 md:pt-10 md:pb-12 lg:pt-16 lg:pb-24">
<Image src={hero} width={250} alt="Hero image" />
<div className="mx-auto flex flex-col items-start gap-4 lg:w-[52rem]">
<h1 className="text-3xl font-bold leading-[1.1] tracking-tighter sm:text-5xl md:text-6xl">
What&apos;s going on here?
</h1>
<p className="max-w-[85%] text-lg leading-normal text-slate-700 sm:text-xl sm:leading-8">
An open source application built using the new router, server
components and everything new in Next.js 13.
<p className="max-w-[42rem] leading-normal text-slate-700 sm:text-xl sm:leading-8">
I&apos;m building a web app with Next.js 13 and open sourcing
everything. Follow along as we figure this out together.
</p>
</div>
<div className="flex gap-4">
<Link
href="/login"
href={siteConfig.links.twitter}
target="_blank"
rel="noreferrer"
className="relative inline-flex h-11 items-center rounded-md border border-transparent bg-brand-500 px-8 py-2 font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
>
Get Started
<Icons.arrowRight className="ml-2 h-4 w-4" />
Start Here
</Link>
<Link
href="https://github.com/shadcn/taxonomy"
href={siteConfig.links.github}
target="_blank"
rel="noreferrer"
className="relative inline-flex h-11 items-center rounded-md border border-slate-200 bg-white px-8 py-2 font-medium text-slate-900 transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
@ -64,165 +66,162 @@ export default async function IndexPage() {
</Link>
</div>
</section>
<div className="md:py-18 container py-12 lg:py-24">
<hr className="border-slate-100" />
</div>
<section className="container grid justify-center gap-6">
<div className="mx-auto flex flex-col gap-4 md:max-w-[800px]">
<h2 className="text-2xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
<hr className="border-slate-200" />
<section className="container grid justify-center gap-6 py-8 md:py-12 lg:py-24">
<div className="mx-auto flex flex-col gap-4 md:max-w-[52rem]">
<h2 className="text-3xl font-bold leading-[1.1] tracking-tighter sm:text-3xl md:text-6xl">
Features
</h2>
<p className="max-w-[85%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
This project is as an experiment to see how a modern app, with
features like authentication, subscriptions, API routes, and static
pages, would work in Next.js 13.
This project is an experiment to see how a modern app, with features
like auth, subscriptions, API routes, and static pages would work in
Next.js 13 app dir.
</p>
</div>
<div className="grid justify-center gap-4 sm:grid-cols-2 md:max-w-[860px] md:grid-cols-3">
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000]/20 p-6">
<svg viewBox="0 0 24 24" className="h-12 w-12">
<div className="grid justify-center gap-4 sm:grid-cols-2 md:max-w-[56rem] md:grid-cols-3">
<div className="relative overflow-hidden rounded-lg border border-slate-200 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000] p-6 text-slate-200">
<svg viewBox="0 0 24 24" className="h-12 w-12 fill-current">
<path d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z" />
</svg>
<div className="space-y-2">
<h3 className="font-bold text-slate-900">Next.js 13</h3>
<p className="text-sm text-slate-900">
<h3 className="font-bold text-slate-100">Next.js 13</h3>
<p className="text-sm text-slate-100">
App dir, Routing, Layouts, Loading UI and API routes.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#61DAFB]/20 p-6">
<svg viewBox="0 0 24 24" className="h-12 w-12">
<div className="relative overflow-hidden rounded-lg border border-slate-200 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000] p-6 text-slate-200">
<svg viewBox="0 0 24 24" className="h-12 w-12 fill-current">
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38a2.167 2.167 0 0 0-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44a23.476 23.476 0 0 0-3.107-.534A23.892 23.892 0 0 0 12.769 4.7c1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442a22.73 22.73 0 0 0-3.113.538 15.02 15.02 0 0 1-.254-1.42c-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87a25.64 25.64 0 0 1-4.412.005 26.64 26.64 0 0 1-1.183-1.86c-.372-.64-.71-1.29-1.018-1.946a25.17 25.17 0 0 1 1.013-1.954c.38-.66.773-1.286 1.18-1.868A25.245 25.245 0 0 1 12 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933a25.952 25.952 0 0 0-1.345-2.32zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493a23.966 23.966 0 0 0-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23.142 23.142 0 0 0-1.086 2.964c-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39a25.819 25.819 0 0 0 1.341-2.338zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143a22.005 22.005 0 0 1-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295a1.185 1.185 0 0 1-.553-.132c-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
</svg>
<div className="space-y-2">
<h3 className="font-bold text-slate-900">React 18</h3>
<p className="text-sm text-slate-900">
<h3 className="font-bold text-slate-100">React 18</h3>
<p className="text-sm text-slate-100">
Server and Client Components. Use hook.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#f45e1e]/20 p-6">
<svg viewBox="0 0 24 24" className="h-12 w-12">
<div className="relative overflow-hidden rounded-lg border border-slate-200 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000] p-6 text-slate-200">
<svg viewBox="0 0 24 24" className="h-12 w-12 fill-current">
<path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a11.981 11.981 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.962 11.962 0 0 1 0 12Zm12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24Z" />
</svg>
<div className="space-y-2">
<h3 className="font-bold text-slate-900">Database</h3>
<p className="text-sm text-slate-900">
<h3 className="font-bold text-slate-100">Database</h3>
<p className="text-sm text-slate-100">
ORM using Prisma and deployed on PlanetScale.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#06B6D4]/20 p-6">
<svg viewBox="0 0 24 24" className="h-12 w-12">
<div className="relative overflow-hidden rounded-lg border border-slate-200 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000] p-6 text-slate-200">
<svg viewBox="0 0 24 24" className="h-12 w-12 fill-current">
<path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" />
</svg>
<div className="space-y-2">
<h3 className="font-bold text-slate-900">Components</h3>
<p className="text-sm text-slate-900">
<h3 className="font-bold text-slate-100">Components</h3>
<p className="text-sm text-slate-100">
UI components built using Radix UI and styled with Tailwind
CSS.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#29d7c4]/20 p-6">
<div className="relative overflow-hidden rounded-lg border border-slate-200 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000] p-6 text-slate-200">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1"
className="h-12 w-12"
className="h-12 w-12 fill-current"
>
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
<div className="space-y-2">
<h3 className="font-bold text-slate-900">Authentication</h3>
<p className="text-sm text-slate-900">
<h3 className="font-bold text-slate-100">Authentication</h3>
<p className="text-sm text-slate-100">
Authentication using NextAuth.js and middlewares.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#008CDD]/20 p-6">
<svg viewBox="0 0 24 24" className="h-12 w-12">
<div className="relative overflow-hidden rounded-lg border border-slate-200 bg-white p-2 shadow-2xl">
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000] p-6 text-slate-200">
<svg viewBox="0 0 24 24" className="h-12 w-12 fill-current">
<path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z" />
</svg>
<div className="space-y-2">
<h3 className="font-bold text-slate-900">Subscriptions</h3>
<p className="text-sm text-slate-900">
<h3 className="font-bold text-slate-100">Subscriptions</h3>
<p className="text-sm text-slate-100">
Free and paid subscriptions using Stripe.
</p>
</div>
</div>
</div>
</div>
<div className="mx-auto flex flex-col gap-4 md:max-w-[52rem]">
<p className="max-w-[85%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
Taxonomy also includes a blog and a full-featured documentation site
built using Contentlayer and MDX.
</p>
</div>
</section>
<div className="md:py-18 container py-12 lg:py-24">
<hr className="border-slate-100" />
</div>
<section className="container grid justify-center gap-6">
<div className="mx-auto flex flex-col gap-4 md:max-w-[800px]">
<h2 className="text-2xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
<hr className="border-slate-200" />
<section className="container grid justify-center gap-6 py-8 md:py-12 lg:py-24">
<div className="mx-auto flex flex-col gap-4 md:max-w-[52rem]">
<h2 className="text-3xl font-bold leading-[1.1] tracking-tighter sm:text-3xl md:text-6xl">
Proudly Open Source
</h2>
<p className="max-w-[85%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
Taxonomy is open source and powered by open source software. The
code is available on{" "}
<Link
href="https://github.com/shadcn/taxonomy"
href={siteConfig.links.github}
target="_blank"
rel="noreferrer"
className="border-b"
className="underline underline-offset-4"
>
GitHub
</Link>
. I copied this footer from{" "}
<Link
href="https://dub.sh"
target="_blank"
rel="noreferrer"
className="border-b"
>
dub.sh
. I&apos;m also documenting everything{" "}
<Link href="/docs" className="underline underline-offset-4">
here
</Link>
.
</p>
</div>
<Link
href="https://github.com/shadcn/taxonomy"
target="_blank"
rel="noreferrer"
className="flex"
>
<div className="flex h-10 w-10 items-center justify-center space-x-2 rounded-md border border-slate-600 bg-slate-800">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
className="h-5 w-5 text-white"
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
</svg>
</div>
<div className="flex items-center">
<div className="h-4 w-4 border-y-8 border-r-8 border-l-0 border-solid border-y-transparent border-r-slate-800"></div>
<div className="flex h-10 items-center rounded-md border border-slate-800 bg-slate-800 px-4 font-medium text-slate-200">
{stars} stars on GitHub
{stars && (
<Link
href={siteConfig.links.github}
target="_blank"
rel="noreferrer"
className="flex"
>
<div className="flex h-10 w-10 items-center justify-center space-x-2 rounded-md border border-slate-600 bg-slate-800">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
className="h-5 w-5 text-white"
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
</svg>
</div>
</div>
</Link>
<div className="flex items-center">
<div className="h-4 w-4 border-y-8 border-r-8 border-l-0 border-solid border-y-transparent border-r-slate-800"></div>
<div className="flex h-10 items-center rounded-md border border-slate-800 bg-slate-800 px-4 font-medium text-slate-200">
{stars} stars on GitHub
</div>
</div>
</Link>
)}
</section>
<div className="md:py-18 container py-12 lg:py-24">
<hr className="border-slate-100" />
</div>
</>
)
}

20
app/layout.tsx
View file

@ -1,8 +1,17 @@
import "styles/globals.css"
import { Inter as FontSans } from "@next/font/google"
import "@/styles/globals.css"
import { cn } from "@/lib/utils"
import { Toaster } from "@/ui/toast"
import { Help } from "@/components/help"
import { Analytics } from "@/components/analytics"
import { TailwindIndicator } from "@/components/tailwind-indicator"
const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-inter",
})
interface RootLayoutProps {
children: React.ReactNode
@ -10,13 +19,20 @@ interface RootLayoutProps {
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en" className="bg-white text-slate-900 antialiased">
<html
lang="en"
className={cn(
"bg-white font-sans text-slate-900 antialiased",
fontSans.variable
)}
>
<head />
<body className="min-h-screen">
{children}
<Analytics />
<Help />
<Toaster position="bottom-right" />
<TailwindIndicator />
</body>
</html>
)

4
components/editor.tsx → components/dashboard/editor.tsx
View file

@ -122,14 +122,14 @@ export function Editor({ post }: EditorProps) {
<div className="flex items-center space-x-10">
<Link
href="/dashboard"
className="inline-flex items-center rounded-lg border border-transparent bg-transparent py-2 pl-3 pr-5 text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
className="inline-flex items-center rounded-lg border border-transparent bg-transparent py-2 pl-3 pr-5 text-sm font-medium text-slate-900 hover:border-slate-200 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
>
<>
<Icons.chevronLeft className="mr-2 h-4 w-4" />
Back
</>
</Link>
<p className="text-sm text-slate-500">
<p className="text-sm text-slate-600">
{post.published ? "Published" : "Draft"}
</p>
</div>

0
components/empty-placeholder.tsx → components/dashboard/empty-placeholder.tsx
View file

0
components/dashboard-header.tsx → components/dashboard/header.tsx
View file

16
components/dashboard-nav.tsx → components/dashboard/nav.tsx
View file

@ -1,19 +1,13 @@
"use client"
import Link from "next/link"
import clsx from "clsx"
import { usePathname } from "next/navigation"
import { Icon, Icons } from "@/components/icons"
import { NavItem } from "types"
import { cn } from "@/lib/utils"
import { Icons } from "@/components/icons"
export type NavigationItem = {
title: string
href: string
disabled?: boolean
icon?: Icon
}
export const navigationItems: NavigationItem[] = [
export const navigationItems: NavItem[] = [
{
title: "Posts",
href: "/dashboard",
@ -49,7 +43,7 @@ export function DashboardNav() {
href={navigationItem.disabled ? "/" : navigationItem.href}
>
<span
className={clsx(
className={cn(
"group flex items-center rounded-md px-3 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100",
path === navigationItem.href ? "bg-slate-200" : "transparent",
navigationItem.disabled && "cursor-not-allowed opacity-50"

0
components/post-create-button.tsx → components/dashboard/post-create-button.tsx
View file

2
components/post-item.tsx → components/dashboard/post-item.tsx
View file

@ -2,7 +2,7 @@ import { Post } from "@prisma/client"
import Link from "next/link"
import { formatDate } from "@/lib/utils"
import { PostOperations } from "@/components/post-operations"
import { PostOperations } from "@/components/dashboard/post-operations"
import { Skeleton } from "@/ui/skeleton"
interface PostItemProps {

0
components/post-operations.tsx → components/dashboard/post-operations.tsx
View file

1
components/dashboard-shell.tsx → components/dashboard/shell.tsx
View file

@ -1,4 +1,5 @@
import * as React from "react"
import { cn } from "@/lib/utils"
interface DashboardShellProps extends React.HTMLAttributes<HTMLDivElement> {}

5
components/user-account-nav.tsx → components/dashboard/user-account-nav.tsx
View file

@ -4,8 +4,9 @@ import { User } from "next-auth"
import { signOut } from "next-auth/react"
import Link from "next/link"
import { siteConfig } from "@/config/site"
import { DropdownMenu } from "@/ui/dropdown"
import { UserAvatar } from "@/components/user-avatar"
import { UserAvatar } from "@/components/dashboard/user-avatar"
interface UserAccountNavProps extends React.HTMLAttributes<HTMLDivElement> {
user: Pick<User, "name" | "image" | "email">
@ -43,7 +44,7 @@ export function UserAccountNav({ user }: UserAccountNavProps) {
<DropdownMenu.Separator />
<DropdownMenu.Item>
<Link
href="https://github.com/shadcn/taxonomy"
href={siteConfig.links.github}
className="w-full"
target="_blank"
>

2
components/user-auth-form.tsx → components/dashboard/user-auth-form.tsx
View file

@ -93,7 +93,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
<div className="w-full border-t border-slate-300"></div>
</div>
<div className="relative flex justify-center text-xs uppercase">
<span className="bg-white px-2 text-slate-500">Or continue with</span>
<span className="bg-white px-2 text-slate-600">Or continue with</span>
</div>
</div>
<button

0
components/user-avatar.tsx → components/dashboard/user-avatar.tsx
View file

0
components/user-name-form.tsx → components/dashboard/user-name-form.tsx
View file

28
components/docs/callout.tsx Normal file
View file

@ -0,0 +1,28 @@
import { cn } from "@/lib/utils"
interface CalloutProps {
icon?: string
children?: React.ReactNode
type?: "default" | "warning" | "danger"
}
export function Callout({
children,
icon,
type = "default",
...props
}: CalloutProps) {
return (
<div
className={cn("my-6 flex items-start rounded-md border border-l-4 p-4", {
"border-slate-900 bg-slate-50": type === "default",
"border-red-900 bg-red-50": type === "danger",
"border-yellow-900 bg-yellow-50": type === "warning",
})}
{...props}
>
{icon && <span className="mr-4 text-2xl">{icon}</span>}
<div>{children}</div>
</div>
)
}

38
components/docs/card.tsx Normal file
View file

@ -0,0 +1,38 @@
import Link from "next/link"
import { cn } from "@/lib/utils"
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
href?: string
disabled?: boolean
}
export function Card({
href,
className,
children,
disabled,
...props
}: CardProps) {
return (
<div
className={cn(
"group relative rounded-lg border border-slate-200 bg-white p-6 shadow-md transition-shadow hover:shadow-lg",
disabled && "cursor-not-allowed opacity-60",
className
)}
{...props}
>
<div className="flex flex-col justify-between space-y-4">
<div className="space-y-2 [&>p]:text-slate-600 [&>h4]:!mt-0 [&>h3]:!mt-0">
{children}
</div>
</div>
{href && (
<Link href={disabled ? "#" : href} className="absolute inset-0">
<span className="sr-only">View</span>
</Link>
)}
</div>
)
}

33
components/docs/mdx-head.tsx Normal file
View file

@ -0,0 +1,33 @@
import { allDocuments } from "contentlayer/generated"
interface MdxHeadProps {
params: {
slug?: string[]
}
}
export default function MdxHead({ params }: MdxHeadProps) {
const slug = params?.slug?.join("/") || ""
const mdxDoc = allDocuments.find((doc) => doc.slugAsParams === slug)
if (!mdxDoc) {
return null
}
const title = `${mdxDoc.title} - Taxonomy`
return (
<>
<title>{title}</title>
<meta name="description" content={mdxDoc.description} />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://tx.shadcn.com" />
<meta property="og:image" content="https://tx.shadcn.com/og.jpg" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://tx.shadcn.com" />
<meta property="twitter:image" content="https://tx.shadcn.com/og.jpg" />
</>
)
}

179
components/docs/mdx.tsx Normal file
View file

@ -0,0 +1,179 @@
import * as React from "react"
import Image from "next/image"
import { useMDXComponent } from "next-contentlayer/hooks"
import { cn } from "@/lib/utils"
import { Callout } from "@/components/docs/callout"
import { Card } from "@/components/docs/card"
const components = {
h1: ({ className, ...props }) => (
<h1
className={cn(
"mt-2 scroll-m-20 text-4xl font-bold tracking-tight",
className
)}
{...props}
/>
),
h2: ({ className, ...props }) => (
<h2
className={cn(
"mt-10 scroll-m-20 border-b border-b-slate-200 pb-1 text-3xl font-semibold tracking-tight first:mt-0",
className
)}
{...props}
/>
),
h3: ({ className, ...props }) => (
<h3
className={cn(
"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight",
className
)}
{...props}
/>
),
h4: ({ className, ...props }) => (
<h4
className={cn(
"mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
className
)}
{...props}
/>
),
h5: ({ className, ...props }) => (
<h5
className={cn(
"mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
className
)}
{...props}
/>
),
h6: ({ className, ...props }) => (
<h6
className={cn(
"mt-8 scroll-m-20 text-base font-semibold tracking-tight",
className
)}
{...props}
/>
),
a: ({ className, ...props }) => (
<a
className={cn(
"font-medium text-slate-900 underline underline-offset-4",
className
)}
{...props}
/>
),
p: ({ className, ...props }) => (
<p
className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
{...props}
/>
),
ul: ({ className, ...props }) => (
<ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
),
ol: ({ className, ...props }) => (
<ol className={cn("my-6 ml-6 list-decimal", className)} {...props} />
),
li: ({ className, ...props }) => (
<li className={cn("mt-2", className)} {...props} />
),
blockquote: ({ className, ...props }) => (
<blockquote
className={cn(
"mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 [&>*]:text-slate-600",
className
)}
{...props}
/>
),
img: ({
className,
alt,
...props
}: React.ImgHTMLAttributes<HTMLImageElement>) => (
// eslint-disable-next-line @next/next/no-img-element
<img
className={cn("rounded-md border border-slate-200", className)}
alt={alt}
{...props}
/>
),
hr: ({ ...props }) => (
<hr className="my-4 border-slate-200 md:my-8" {...props} />
),
table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
<div className="my-6 w-full overflow-y-auto">
<table className={cn("w-full", className)} {...props} />
</div>
),
tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
<tr
className={cn(
"m-0 border-t border-slate-300 p-0 even:bg-slate-100",
className
)}
{...props}
/>
),
th: ({ className, ...props }) => (
<th
className={cn(
"border border-slate-200 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
className
)}
{...props}
/>
),
td: ({ className, ...props }) => (
<td
className={cn(
"border border-slate-200 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
className
)}
{...props}
/>
),
pre: ({ className, ...props }) => (
<pre
className={cn(
"mt-6 mb-4 overflow-x-auto rounded-lg bg-slate-100 py-4",
className
)}
{...props}
/>
),
code: ({ className, ...props }) => (
<code
className={cn(
"relative rounded border bg-slate-300 bg-opacity-25 py-[0.2rem] px-[0.3rem] font-mono text-sm text-slate-600",
className
)}
{...props}
/>
),
Image,
Callout,
Card,
}
interface MdxProps {
code: string
}
export function Mdx({ code }: MdxProps) {
const Component = useMDXComponent(code)
return (
<div className="mdx">
<Component components={components} />
</div>
)
}

25
components/docs/page-header.tsx Normal file
View file

@ -0,0 +1,25 @@
import { cn } from "@/lib/utils"
interface DocsPageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
heading: string
text?: string
}
export function DocsPageHeader({
heading,
text,
className,
...props
}: DocsPageHeaderProps) {
return (
<>
<div className={cn("space-y-4", className)} {...props}>
<h1 className="inline-block text-4xl font-black tracking-tight text-slate-900 lg:text-5xl">
{heading}
</h1>
{text && <p className="text-xl text-slate-600">{text}</p>}
</div>
<hr className="my-4 border-slate-200" />
</>
)
}

62
components/docs/pager.tsx Normal file
View file

@ -0,0 +1,62 @@
import Link from "next/link"
import { Doc } from "contentlayer/generated"
import { docsConfig } from "@/config/docs"
import { Icons } from "@/components/icons"
interface DocsPagerProps {
doc: Doc
}
export function DocsPager({ doc }: DocsPagerProps) {
const pager = getPagerForDoc(doc)
if (!pager) {
return null
}
return (
<div className="flex flex-row items-center justify-between">
{pager?.prev && (
<Link
href={pager.prev.href}
className="inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-200 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200"
>
<Icons.chevronLeft className="mr-2 h-4 w-4" />
{pager.prev.title}
</Link>
)}
{pager?.next && (
<Link
href={pager.next.href}
className="ml-auto inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-200 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200"
>
{pager.next.title}
<Icons.chevronRight className="ml-2 h-4 w-4" />
</Link>
)}
</div>
)
}
export function getPagerForDoc(doc: Doc) {
const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]
const activeIndex = flattenedLinks.findIndex(
(link) => doc.slug === link?.href
)
const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
const next =
activeIndex !== flattenedLinks.length - 1
? flattenedLinks[activeIndex + 1]
: null
return {
prev,
next,
}
}
export function flatten(links: { items? }[]) {
return links.reduce((flat, link) => {
return flat.concat(link.items ? flatten(link.items) : link)
}, [])
}

37
components/docs/search.tsx Normal file
View file

@ -0,0 +1,37 @@
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import toast from "@/ui/toast"
interface DocsSearchProps extends React.HTMLAttributes<HTMLFormElement> {}
export function DocsSearch({ className, ...props }: DocsSearchProps) {
function onSubmit(event: React.SyntheticEvent) {
event.preventDefault()
return toast({
title: "Not implemented",
message: "We're still working on the search.",
type: "error",
})
}
return (
<form
onSubmit={onSubmit}
className={cn("relative w-full", className)}
{...props}
>
<input
type="search"
placeholder="Search documentation..."
className="block h-8 w-full appearance-none rounded-md border border-slate-200 bg-slate-100 py-2 pl-3 pr-3 text-sm placeholder:text-slate-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:w-64 sm:pr-12"
/>
<kbd className="pointer-events-none absolute top-1.5 right-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-white px-1.5 font-mono text-[10px] font-medium text-slate-600 opacity-100 sm:flex">
<span className="text-xs">⌘</span>K
</kbd>
</form>
)
}

60
components/docs/sidebar-nav.tsx Normal file
View file

@ -0,0 +1,60 @@
"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { SidebarNavItem } from "types"
import { cn } from "@/lib/utils"
export interface DocsSidebarNavProps {
items: SidebarNavItem[]
}
export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
const pathname = usePathname()
return items.length ? (
<div className="w-full">
{items.map((item, index) => (
<div key={index} className={cn("pb-8")}>
<h4 className="mb-1 rounded-md px-2 py-1 text-sm font-medium">
{item.title}
</h4>
<DocsSidebarNavItems items={item.items} pathname={pathname} />
</div>
))}
</div>
) : null
}
interface DocsSidebarNavItemsProps {
items: SidebarNavItem[]
pathname: string
}
export function DocsSidebarNavItems({
items,
pathname,
}: DocsSidebarNavItemsProps) {
return items?.length ? (
<div className="grid grid-flow-row auto-rows-max text-sm">
{items.map((item, index) => (
<Link
key={index}
href={item.disabled ? "#" : item.href}
className={cn(
"flex w-full items-center rounded-md px-2 py-2 hover:underline",
item.disabled && "cursor-not-allowed opacity-60",
{
"bg-slate-100": pathname === item.href,
}
)}
target={item.external && "_blank"}
rel={item.external ? "noreferrer" : ""}
>
{item.title}
</Link>
))}
</div>
) : null
}

108
components/docs/toc.tsx Normal file
View file

@ -0,0 +1,108 @@
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { TableOfContents } from "@/lib/toc"
import { useMounted } from "@/hooks/use-mounted"
interface TocProps {
toc: TableOfContents
}
export function DashboardTableOfContents({ toc }: TocProps) {
const itemIds = React.useMemo(
() =>
toc.items
? toc.items
.flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
.flat()
.filter(Boolean)
.map((id) => id.split("#")[1])
: [],
[toc]
)
const activeHeading = useActiveItem(itemIds)
const mounted = useMounted()
if (!toc?.items) {
return null
}
return (
mounted && (
<div className="space-y-2">
<p className="font-medium">On This Page</p>
<Tree tree={toc} activeItem={activeHeading} />
</div>
)
)
}
function useActiveItem(itemIds: string[]) {
const [activeId, setActiveId] = React.useState(null)
React.useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveId(entry.target.id)
}
})
},
{ rootMargin: `0% 0% -80% 0%` }
)
itemIds?.forEach((id) => {
const element = document.getElementById(id)
if (element) {
observer.observe(element)
}
})
return () => {
itemIds?.forEach((id) => {
const element = document.getElementById(id)
if (element) {
observer.unobserve(element)
}
})
}
}, [itemIds])
return activeId
}
interface TreeProps {
tree: TableOfContents
level?: number
activeItem?: string
}
function Tree({ tree, level = 1, activeItem }: TreeProps) {
return tree?.items?.length && level < 3 ? (
<ul className={cn("m-0 list-none", { "pl-4": level !== 1 })}>
{tree.items.map((item, index) => {
return (
<li key={index} className={cn("mt-0 pt-2")}>
<a
href={item.url}
className={cn(
"inline-block no-underline",
item.url === `#${activeItem}`
? "text-state-900 font-medium"
: "text-sm text-slate-600 hover:text-slate-900"
)}
>
{item.title}
</a>
{item.items?.length ? (
<Tree tree={item} level={level + 1} activeItem={activeItem} />
) : null}
</li>
)
})}
</ul>
) : null
}

9
components/help.tsx
View file

@ -1,10 +1,11 @@
"use client"
import Image from "next/image"
import { Popover } from "@/ui/popover"
import { Icons } from "@/components/icons"
import { siteConfig } from "@/config/site"
import OgImage from "public/og.jpg"
import Image from "next/image"
export function Help() {
return (
@ -26,7 +27,7 @@ export function Help() {
<p>
You can follow the progress on Twitter{" "}
<a
href="https://twitter.com/shadcn"
href={siteConfig.links.twitter}
target="_blank"
rel="noreferrer"
className="border-b border-b-white"
@ -35,7 +36,7 @@ export function Help() {
</a>{" "}
or on{" "}
<a
href="https://github.com/shadcn/taxonomy"
href={siteConfig.links.github}
target="_blank"
rel="noreferrer"
className="border-b border-b-white"

6
components/icons.tsx
View file

@ -2,6 +2,7 @@ import {
AlertTriangle,
ArrowRight,
ChevronLeft,
ChevronRight,
Command,
File,
FileText,
@ -14,7 +15,9 @@ import {
Plus,
Settings,
Trash,
Twitter,
User,
X,
} from "lucide-react"
import type { Icon as LucideIcon } from "lucide-react"
@ -22,8 +25,10 @@ export type Icon = LucideIcon
export const Icons = {
logo: Command,
close: X,
spinner: Loader2,
chevronLeft: ChevronLeft,
chevronRight: ChevronRight,
trash: Trash,
post: FileText,
page: File,
@ -37,4 +42,5 @@ export const Icons = {
help: HelpCircle,
pizza: Pizza,
gitHub: Github,
twitter: Twitter,
}

55
components/main-nav.tsx Normal file
View file

@ -0,0 +1,55 @@
"use client"
import * as React from "react"
import Link from "next/link"
import { useSelectedLayoutSegment } from "next/navigation"
import { MainNavItem } from "types"
import { cn } from "@/lib/utils"
import { siteConfig } from "@/config/site"
import { Icons } from "@/components/icons"
import { MobileNav } from "@/components/mobile-nav"
interface MainNavProps {
items: MainNavItem[]
children?: React.ReactNode
}
export function MainNav({ items, children }: MainNavProps) {
const segment = useSelectedLayoutSegment()
const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false)
return (
<div className="flex gap-6 md:gap-10">
<Link href="/" className="hidden items-center space-x-2 md:flex">
<Icons.logo />
<span className="hidden font-bold sm:inline-block">
{siteConfig.name}
</span>
</Link>
<nav className="hidden gap-6 md:flex">
{items.map((item, index) => (
<Link
key={index}
href={item.disabled ? "#" : item.href}
className={cn(
"flex items-center text-lg font-semibold text-slate-600 sm:text-sm",
item.href.startsWith(`/${segment}`) && "text-slate-900",
item.disabled && "cursor-not-allowed opacity-60"
)}
>
{item.title}
</Link>
))}
</nav>
<button
className="flex items-center space-x-2 md:hidden"
onClick={() => setShowMobileMenu(!showMobileMenu)}
>
{showMobileMenu ? <Icons.close /> : <Icons.logo />}
<span className="font-bold">Menu</span>
</button>
{showMobileMenu && <MobileNav items={items}>{children}</MobileNav>}
</div>
)
}

7
components/mdx-content.tsx
View file

@ -1,7 +0,0 @@
"use client"
import { MDXRemote } from "next-mdx-remote"
export function MdxContent({ source }) {
return <MDXRemote {...source} />
}

47
components/mobile-nav.tsx Normal file
View file

@ -0,0 +1,47 @@
import * as React from "react"
import Link from "next/link"
import { MainNavItem } from "types"
import { cn } from "@/lib/utils"
import { useLockBody } from "@/hooks/use-lock-body"
import { Icons } from "./icons"
import { siteConfig } from "@/config/site"
interface MobileNavProps {
items: MainNavItem[]
children?: React.ReactNode
}
export function MobileNav({ items, children }: MobileNavProps) {
useLockBody()
return (
<div
className={cn(
"fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max overflow-auto p-6 pb-32 shadow-md animate-in slide-in-from-bottom-80 md:hidden"
)}
>
<div className="relative z-20 grid gap-6 rounded-md bg-white p-4 shadow-md">
<Link href="/" className="flex items-center space-x-2">
<Icons.logo />
<span className="font-bold">{siteConfig.name}</span>
</Link>
<nav className="grid grid-flow-row auto-rows-max text-sm">
{items.map((item, index) => (
<Link
key={index}
href={item.disabled ? "#" : item.href}
className={cn(
"flex w-full items-center rounded-md px-2 py-2 text-sm font-medium hover:underline",
item.disabled && "cursor-not-allowed opacity-60"
)}
>
{item.title}
</Link>
))}
</nav>
{children}
</div>
</div>
)
}

56
components/site-footer.tsx Normal file
View file

@ -0,0 +1,56 @@
import { siteConfig } from "@/config/site"
import { Icons } from "@/components/icons"
export function SiteFooter() {
return (
<footer className="container bg-white text-slate-600">
<div className="flex flex-col items-center justify-between gap-4 border-t border-t-slate-200 py-10 md:h-24 md:flex-row md:py-0">
<div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
<Icons.logo />
<p className="text-center text-sm leading-loose md:text-left">
Built by{" "}
<a
href={siteConfig.links.twitter}
target="_blank"
rel="noreferrer"
className="font-medium underline underline-offset-4"
>
shadcn
</a>
. Hosted on{" "}
<a
href="https://vercel.com"
target="_blank"
rel="noreferrer"
className="font-medium underline underline-offset-4"
>
Vercel
</a>
. Illustrations by{" "}
<a
href="https://popsy.co"
target="_blank"
rel="noreferrer"
className="font-medium underline underline-offset-4"
>
Popsy
</a>
.
</p>
</div>
<p className="text-center text-sm md:text-left">
The source code is available on{" "}
<a
href={siteConfig.links.github}
target="_blank"
rel="noreferrer"
className="font-medium underline underline-offset-4"
>
GitHub
</a>
.
</p>
</div>
</footer>
)
}

16
components/tailwind-indicator.tsx Normal file
View file

@ -0,0 +1,16 @@
export function TailwindIndicator() {
if (process.env.NODE_ENV === "production") return null
return (
<div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
<div className="block sm:hidden">xs</div>
<div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
sm
</div>
<div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
<div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
<div className="hidden xl:block 2xl:hidden">xl</div>
<div className="hidden 2xl:block">2xl</div>
</div>
)
}

136
config/docs.ts Normal file
View file

@ -0,0 +1,136 @@
import { DocsConfig } from "types/config"
export const docsConfig: DocsConfig = {
mainNav: [
{
title: "Documentation",
href: "/docs",
},
{
title: "Guides",
href: "/guides",
},
],
sidebarNav: [
{
title: "Getting Started",
items: [
{
title: "Introduction",
href: "/docs",
},
],
},
{
title: "Documentation",
items: [
{
title: "Introduction",
href: "/docs/documentation",
},
{
title: "Contentlayer",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Components",
href: "/docs/documentation/components",
},
{
title: "Code Blocks",
href: "/docs/documentation/code-blocks",
},
{
title: "Style Guide",
href: "/docs/documentation/style-guide",
},
{
title: "Search",
href: "/docs/in-progress",
disabled: true,
},
],
},
{
title: "Blog",
items: [
{
title: "Introduction",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Build your own",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Writing Posts",
href: "/docs/in-progress",
disabled: true,
},
],
},
{
title: "Dashboard",
items: [
{
title: "Introduction",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Layouts",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Server Components",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Authentication",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Database with Prisma",
href: "/docs/in-progress",
disabled: true,
},
{
title: "API Routes",
href: "/docs/in-progress",
disabled: true,
},
],
},
{
title: "Marketing Site",
items: [
{
title: "Introduction",
href: "/docs/in-progress",
disabled: true,
},
{
title: "File Structure",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Tailwind CSS",
href: "/docs/in-progress",
disabled: true,
},
{
title: "Typography",
href: "/docs/in-progress",
disabled: true,
},
],
},
],
}

29
config/marketing.ts Normal file
View file

@ -0,0 +1,29 @@
import { MarketingConfig } from "types/config"
export const marketingConfig: MarketingConfig = {
mainNav: [
{
title: "Features",
href: "/features",
disabled: true,
},
{
title: "Pricing",
href: "/pricing",
disabled: true,
},
{
title: "Blog",
href: "/blog",
},
{
title: "Documentation",
href: "/docs",
},
{
title: "Contact",
href: "/contact",
disabled: true,
},
],
}

9
config/site.ts Normal file
View file

@ -0,0 +1,9 @@
import { SiteConfig } from "types/config"
export const siteConfig: SiteConfig = {
name: "Taxonomy",
links: {
twitter: "https://twitter.com/shadcn",
github: "https://github.com/shadcn/taxonomy",
},
}

5
content/authors/shadcn.mdx Normal file
View file

@ -0,0 +1,5 @@
---
title: shadcn
avatar: /images/avatars/shadcn.png
twitter: shadcn
---

214
content/blog/deploying-next-apps.mdx Normal file
View file

@ -0,0 +1,214 @@
---
title: Deploying Next.js Apps
description: How to deploy your Next.js apps on Vercel.
image: /images/blog/blog-post-3.jpg
date: "2023-01-02"
authors:
- shadcn
---
<Callout>
The text below is from the [Tailwind
CSS](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) docs. I copied it
here to test the markdown styles. **Tailwind is awesome. You should use it.**
</Callout>
Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
We get lots of complaints about it actually, with people regularly asking us things like:
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
> We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
---
## What to expect from here on out
What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
It's important to cover all of these use cases for a few reasons:
1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
Now we're going to try out another header style.
### Typography should be easy
So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
Something a wise person once told me about typography is:
> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
It's probably important that images look okay here by default as well:
![](/images/blog/blog-post-4.jpg)
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Now I'm going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.
And that's the end of this section.
## What if we stack headings?
### We should make sure that looks good, too.
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
### When a heading comes after a paragraph …
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
- **I often do this thing where list items have headings.**
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
- **Since this is a list, I need at least two items.**
I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
- **It's not a bad idea to add a third item either.**
I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.
After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
## Code should look okay by default.
I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
Here's what a default `tailwind.config.js` file looks like at the time of writing:
```js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
```
Hopefully that looks good enough to you.
### What about nested lists?
Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
1. **Nested lists are rarely a good idea.**
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
2. **Since we need to have more items, here's another one.**
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
3. **Two items isn't really a list, three is good though.**
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
- **For example, here's another nested list.**
But this time with a second paragraph.
- These list items won't have `<p>` tags
- Because they are only one line each
- **But in this second top-level list item, they will.**
This is especially annoying because of the spacing on this paragraph.
- As you can see here, because I've added a second line, this list item now has a `<p>` tag.
This is the second line I'm talking about by the way.
- Finally here's another list item so it's more like a list.
- A closing list item, but with no nested list, because why not?
And finally a sentence to close off this section.
## There are other elements we need to style
I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
We even included table styles, check it out:
| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
### Sometimes I even use `code` in headings
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
#### We haven't used an `h4` yet
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
### We still need to think about stacked headings though.
#### Let's make sure we don't screw that up with `h4` elements, either.
Phew, with any luck we have styled the headings above this text and they look pretty good.
Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
What I've written here is probably long enough, but adding this final sentence can't hurt.
## GitHub Flavored Markdown
I've also added support for GitHub Flavored Mardown using `remark-gfm`.
With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals.
A link like www.example.com or https://example.com would automatically be converted into an `a` tag.
This works for email links too: contact@example.com.

214
content/blog/dynamic-routing-static-regeneration.mdx Normal file
View file

@ -0,0 +1,214 @@
---
title: Dynamic Routing and Static Regeneration
description: How to use incremental static regeneration using dynamic routes.
image: /images/blog/blog-post-2.jpg
date: "2023-03-04"
authors:
- shadcn
---
<Callout>
The text below is from the [Tailwind
CSS](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) docs. I copied it
here to test the markdown styles. **Tailwind is awesome. You should use it.**
</Callout>
Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
We get lots of complaints about it actually, with people regularly asking us things like:
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
> We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
---
## What to expect from here on out
What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
It's important to cover all of these use cases for a few reasons:
1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
Now we're going to try out another header style.
### Typography should be easy
So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
Something a wise person once told me about typography is:
> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
It's probably important that images look okay here by default as well:
![](/images/blog/blog-post-4.jpg)
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Now I'm going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.
And that's the end of this section.
## What if we stack headings?
### We should make sure that looks good, too.
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
### When a heading comes after a paragraph …
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
- **I often do this thing where list items have headings.**
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
- **Since this is a list, I need at least two items.**
I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
- **It's not a bad idea to add a third item either.**
I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.
After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
## Code should look okay by default.
I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
Here's what a default `tailwind.config.js` file looks like at the time of writing:
```js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
```
Hopefully that looks good enough to you.
### What about nested lists?
Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
1. **Nested lists are rarely a good idea.**
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
2. **Since we need to have more items, here's another one.**
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
3. **Two items isn't really a list, three is good though.**
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
- **For example, here's another nested list.**
But this time with a second paragraph.
- These list items won't have `<p>` tags
- Because they are only one line each
- **But in this second top-level list item, they will.**
This is especially annoying because of the spacing on this paragraph.
- As you can see here, because I've added a second line, this list item now has a `<p>` tag.
This is the second line I'm talking about by the way.
- Finally here's another list item so it's more like a list.
- A closing list item, but with no nested list, because why not?
And finally a sentence to close off this section.
## There are other elements we need to style
I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
We even included table styles, check it out:
| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
### Sometimes I even use `code` in headings
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
#### We haven't used an `h4` yet
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
### We still need to think about stacked headings though.
#### Let's make sure we don't screw that up with `h4` elements, either.
Phew, with any luck we have styled the headings above this text and they look pretty good.
Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
What I've written here is probably long enough, but adding this final sentence can't hurt.
## GitHub Flavored Markdown
I've also added support for GitHub Flavored Mardown using `remark-gfm`.
With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals.
A link like www.example.com or https://example.com would automatically be converted into an `a` tag.
This works for email links too: contact@example.com.

64
content/blog/next-auth-postmark.mdx
View file

@ -1,64 +0,0 @@
---
title: Using Postmark with NextAuth.js
excerpt: Send NextAuth emails using Postmark email templates.
date: "2023-03-04"
---
Install Postmark
```bash
yarn add postmark
```
Next add the following environment variables:
```
POSTMARK_API_TOKEN=
SMTP_HOST=smtp.postmarkapp.com
SMTP_PORT=25
SMTP_USER=
SMTP_PASSWORD=
SMTP_FROM=name <no-reply@name.com>
```
You can find the values for `POSTMARK_API_TOKEN`, `SMTP_USER` and `SMTP_PASSWORD` by visiting Servers → API Tokens from the Postmark dashboard.
To send next-auth emails using Postmark, update the `NextAuth` callback as follows:
```ts {3,5,19-32} title="pages/api/auth/[...nextauth].ts"
import NextAuth from "next-auth"
import Providers from "next-auth/providers"
import { Client } from "postmark"
const postmarkClient = new Client(process.env.POSTMARK_API_TOKEN)
export default NextAuth({
providers: [
Providers.Email({
server: {
host: process.env.SMTP_HOST,
port: Number(process.env.SMTP_PORT),
auth: {
user: process.env.SMTP_USER,
pass: process.env.SMTP_PASSWORD,
},
},
from: process.env.SMTP_FROM,
sendVerificationRequest: async ({ identifier, url, provider }) => {
const result = await postmarkClient.sendEmailWithTemplate({
TemplateId: "TEMPLATE-ID",
To: identifier,
From: provider.from,
TemplateModel: {
// variable: value,
},
})
if (result.ErrorCode) {
throw new Error(result.Message)
}
},
}),
],
})
```

83
content/blog/next-single-page-pagination.mdx
View file

@ -1,83 +0,0 @@
---
title: Single-page Pagination in Next.js
excerpt: Implement pagination with route parameters and rewrites.
date: "2023-04-09"
---
Let's say:
1. We have an API (local or from a headless CMS) returning **150 posts**.
2. We want to display **10 posts per page**.
We want to implement paginated static routes as follows: `/blog/1`, `blog/2` up to `blog/15`.
You can do this in a single page using [route parameters](https://nextjs.org/docs/routing/dynamic-routes) and [rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites):
```tsx title="pages/blog/[page].tsx"
interface BlogPageProps {
posts: Post[]
}
export default function BlogPage({ posts }: BlogPageProps) {
// Loop and render posts.
}
export async function getStaticPaths(context): Promise<GetStaticPathsResult> {
// Get total number of posts from API.
const totalPages = await getTotalPagesFromAPI()
const numberOfPages = Math.ceil(totalPages / 10)
// Build paths `blog/0`, `blog/1` ...etc.
const paths = Array(numberOfPages)
.fill(0)
.map((_, page) => ({
params: {
page: `${page + 1}`,
},
}))
return {
paths,
fallback: "false",
}
}
export async function getStaticProps(
context
): Promise<GetStaticPropsResult<BlogPageProps>> {
// Call your API and get the posts for the current page.
const posts = await getPostsFromAPI({
limit: 10,
offset: context.params.page ? 10 * context.params.page : 0,
})
if (!posts.length) {
return {
notFound: true,
}
}
return {
props: {
posts,
},
}
}
```
If we visit `/blog/0` we should see the first 10 posts, `/blog/1` the next 10 posts and so on.
We can use a rewrite to map `/blog` to `/blog/0`.
```js title="next.config.js"
module.exports = {
async rewrites() {
return [
{
source: "/blog",
destination: "/blog/0",
},
]
},
}
```

214
content/blog/preview-mode-headless-cms.mdx Normal file
View file

@ -0,0 +1,214 @@
---
title: Preview Mode for Headless CMS
description: How to implement preview mode in your headless CMS.
date: "2023-04-09"
image: /images/blog/blog-post-1.jpg
authors:
- shadcn
---
<Callout>
The text below is from the [Tailwind
CSS](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) docs. I copied it
here to test the markdown styles. **Tailwind is awesome. You should use it.**
</Callout>
Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
We get lots of complaints about it actually, with people regularly asking us things like:
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
> We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
---
## What to expect from here on out
What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
It's important to cover all of these use cases for a few reasons:
1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
Now we're going to try out another header style.
### Typography should be easy
So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
Something a wise person once told me about typography is:
> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
It's probably important that images look okay here by default as well:
![](/images/blog/blog-post-4.jpg)
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Now I'm going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.
And that's the end of this section.
## What if we stack headings?
### We should make sure that looks good, too.
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
### When a heading comes after a paragraph …
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
- **I often do this thing where list items have headings.**
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
- **Since this is a list, I need at least two items.**
I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
- **It's not a bad idea to add a third item either.**
I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.
After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
## Code should look okay by default.
I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
Here's what a default `tailwind.config.js` file looks like at the time of writing:
```js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
```
Hopefully that looks good enough to you.
### What about nested lists?
Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
1. **Nested lists are rarely a good idea.**
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
2. **Since we need to have more items, here's another one.**
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
3. **Two items isn't really a list, three is good though.**
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
- **For example, here's another nested list.**
But this time with a second paragraph.
- These list items won't have `<p>` tags
- Because they are only one line each
- **But in this second top-level list item, they will.**
This is especially annoying because of the spacing on this paragraph.
- As you can see here, because I've added a second line, this list item now has a `<p>` tag.
This is the second line I'm talking about by the way.
- Finally here's another list item so it's more like a list.
- A closing list item, but with no nested list, because why not?
And finally a sentence to close off this section.
## There are other elements we need to style
I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
We even included table styles, check it out:
| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
### Sometimes I even use `code` in headings
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
#### We haven't used an `h4` yet
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
### We still need to think about stacked headings though.
#### Let's make sure we don't screw that up with `h4` elements, either.
Phew, with any luck we have styled the headings above this text and they look pretty good.
Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
What I've written here is probably long enough, but adding this final sentence can't hurt.
## GitHub Flavored Markdown
I've also added support for GitHub Flavored Mardown using `remark-gfm`.
With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals.
A link like www.example.com or https://example.com would automatically be converted into an `a` tag.
This works for email links too: contact@example.com.

40
content/blog/prisma-jest-reset-database.mdx
View file

@ -1,40 +0,0 @@
---
title: Reset Prisma database before running tests with Jest
date: "2023-01-02"
---
Add a custom setup file to your `jest.config.ts`:
```ts title="jest.config.ts"
import type { Config } from "@jest/types"
const config: Config.InitialOptions = {
// ...
setupFilesAfterEnv: ["./src/tests/setup.ts"], // highlight-line
// ...
}
export default config
```
Then in `setup.ts`
```ts title="setup.ts"
import { Prisma } from ".prisma/client"
export async function resetDatabase() {
const tables = Prisma.dmmf.datamodel.models.map((model) => model.dbName)
for (const table of tables) {
await prisma.$executeRawUnsafe(`TRUNCATE TABLE ${table} CASCADE`)
}
}
beforeEach(async () => {
await resetDatabase()
})
afterAll(async () => {
prisma.$disconnect()
})
```

214
content/blog/server-client-components.mdx Normal file
View file

@ -0,0 +1,214 @@
---
title: Server and Client Components
description: React Server Components allow developers to build applications that span the server and client.
image: /images/blog/blog-post-4.jpg
date: "2023-01-08"
authors:
- shadcn
---
<Callout>
The text below is from the [Tailwind
CSS](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) docs. I copied it
here to test the markdown styles. **Tailwind is awesome. You should use it.**
</Callout>
Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
We get lots of complaints about it actually, with people regularly asking us things like:
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
> We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
---
## What to expect from here on out
What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
It's important to cover all of these use cases for a few reasons:
1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
Now we're going to try out another header style.
### Typography should be easy
So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
Something a wise person once told me about typography is:
> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
It's probably important that images look okay here by default as well:
![](/images/blog/blog-post-4.jpg)
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Now I'm going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.
And that's the end of this section.
## What if we stack headings?
### We should make sure that looks good, too.
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
### When a heading comes after a paragraph …
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
- **I often do this thing where list items have headings.**
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
- **Since this is a list, I need at least two items.**
I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
- **It's not a bad idea to add a third item either.**
I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.
After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
## Code should look okay by default.
I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
Here's what a default `tailwind.config.js` file looks like at the time of writing:
```js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
```
Hopefully that looks good enough to you.
### What about nested lists?
Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
1. **Nested lists are rarely a good idea.**
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
2. **Since we need to have more items, here's another one.**
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
3. **Two items isn't really a list, three is good though.**
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
- **For example, here's another nested list.**
But this time with a second paragraph.
- These list items won't have `<p>` tags
- Because they are only one line each
- **But in this second top-level list item, they will.**
This is especially annoying because of the spacing on this paragraph.
- As you can see here, because I've added a second line, this list item now has a `<p>` tag.
This is the second line I'm talking about by the way.
- Finally here's another list item so it's more like a list.
- A closing list item, but with no nested list, because why not?
And finally a sentence to close off this section.
## There are other elements we need to style
I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
We even included table styles, check it out:
| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
### Sometimes I even use `code` in headings
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
#### We haven't used an `h4` yet
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
### We still need to think about stacked headings though.
#### Let's make sure we don't screw that up with `h4` elements, either.
Phew, with any luck we have styled the headings above this text and they look pretty good.
Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
What I've written here is probably long enough, but adding this final sentence can't hurt.
## GitHub Flavored Markdown
I've also added support for GitHub Flavored Mardown using `remark-gfm`.
With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals.
A link like www.example.com or https://example.com would automatically be converted into an `a` tag.
This works for email links too: contact@example.com.

93
content/blog/validation-middleware.mdx
View file

@ -1,93 +0,0 @@
---
title: Next.js API Routes validation using Middlewares and Yup
date: "2023-01-08"
---
## Middlewares
### withMethods
Let's start with a simple middleware to validate `request.method`.
```ts
import type { NextApiHandler, NextApiRequest, NextApiResponse } from "next"
export function withMethods(methods: string[], handler: NextApiHandler) {
return async function (request: NextApiRequest, response: NextApiResponse) {
if (!methods.includes(request.method)) {
return response.status(405).json("")
}
return handler(request, response)
}
}
```
To use this middleware, we call our API handler by wrapping it inside `withMethods`:
```ts
async function handler(request: NextApiRequest, response: NextApiResponse) {}
export default withMethods(["POST"], handler)
```
### withValidation
Next, we're going to create a middleware to validate `request.body`
```ts
import type { NextApiHandler, NextApiRequest, NextApiResponse } from "next"
import type { ObjectShape, OptionalObjectSchema } from "yup/lib/object"
export function withValidation<T extends OptionalObjectSchema<ObjectShape>>(
schema: T,
handler: NextApiHandler
) {
return async function (request: NextApiRequest, response: NextApiResponse) {
try {
request.body = await schema.validate(request.body)
return handler(request, response)
} catch (error) {
if (error instanceof yup.ValidationError) {
return response.status(422).json(error.message)
}
return response.status(422).json("")
}
}
}
```
This middleware accepts a schema to validate `request.body` against. We use it as follows:
```ts
const postSchema = yup.object({
title: yup.string().required("`Title` field missing."),
body: yup.string().required("`Body` field missing"),
})
interface Post extends yup.TypeOf<typeof postSchema> {}
async function handler(request: NextApiRequest, response: NextApiResponse) {
const post: Post = request.body
// TODO: Save post.
response.status(201).json("")
}
export default withValidation(postSchema, handler)
```
## Chaining
We can call mutiple middlewares by chaining:
```ts title="pages/api/posts"
export default withMethods(["POST"], withValidation(postSchema, handler))
```
## Code
You can check out the code here: [https://github.com/arshad/nextjs-middleware-validation](https://github.com/arshad/nextjs-middleware-validation).

73
content/docs/documentation/code-blocks.mdx Normal file
View file

@ -0,0 +1,73 @@
---
title: Code Blocks
description: Advanced code blocks with highlighting, file names and more.
---
The code blocks on the documentation site and the blog are powered by [rehype-pretty-code](https://github.com/atomiks/rehype-pretty-code). The syntax highlighting is done using [shiki](https://github.com/shikijs/shiki).
It has the following features:
1. Beautiful code blocks with syntax highlighting.
2. Support for VS Code themes.
3. Works with hundreds of languages.
4. Line and word highlighting.
5. Support for line numbers.
6. Show code block titles using meta strings.
<Callout>
Thanks to Shiki, highlighting is done at build time. No JavaScript is sent to the client for runtime highlighting.
</Callout>
## Example
```ts showLineNumbers title="next.config.js" {3} /appDir: true/
import { withContentlayer } from "next-contentlayer"
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["avatars.githubusercontent.com"],
},
experimental: {
appDir: true,
serverComponentsExternalPackages: ["@prisma/client"],
},
}
export default withContentlayer(nextConfig)
```
## Title
````mdx
```ts title="path/to/file.ts"
// Code here
```
````
## Line Highlight
````mdx
```ts {1,3-6}
// Highlight line 1 and line 3 to 6
```
````
## Word Highlight
````mdx
```ts /shadcn/
// Highlight the word shadcn.
```
````
## Line Numbers
````mdx
```ts showLineNumbers
// This will show line numbers.
```
````

157
content/docs/documentation/components.mdx Normal file
View file

@ -0,0 +1,157 @@
---
title: Components
description: Use React components in Markdown using MDX.
---
The following components are available out of the box for use in Markdown.
If you'd like to build and add your own custom components, see the [Custom Components](#custom-components) section below.
## Built-in Components
### 1. Callout
```mdx
<Callout type=" default | warning | danger ">
This is a default callout. You can embed **Markdown** inside a `callout`.
</Callout>
```
<Callout>
This is a default callout. You can embed **Markdown** inside a `callout`.
</Callout>
<Callout type="warning">
This is a warning callout. It uses the props `type="warning"`.
</Callout>
<Callout type="danger">
This is a danger callout. It uses the props `type="danger"`.
</Callout>
### 2. Card
```mdx
<Card href="#">
#### Heading
You can use **markdown** inside cards.
</Card>
```
<Card href="#">
#### Heading
You can use **markdown** inside cards.
</Card>
You can also use HTML to embed cards in a grid.
```mdx
<div className="grid grid-cols-2 gap-4">
<Card href="#">
#### Card One
You can use **markdown** inside cards.
</Card>
<Card href="#">
#### Card Two
You can also use `inline code` and code blocks.
</Card>
</div>
```
<div className="grid grid-cols-2 gap-4">
<Card href="#">
#### Card One
You can use **markdown** inside cards.
</Card>
<Card href="#">
#### Card Two
You can also use `inline code` and code blocks.
</Card>
</div>
---
## Custom Components
You can add your own custom components using the `components` props from `useMDXComponent`.
```ts title="components/mdx.tsx" {2,6}
import { Callout } from "@/components/callout"
import { CustomComponent } from "@/components/custom"
const components = {
Callout,
CustomComponent,
}
export function Mdx({ code }) {
const Component = useMDXComponent(code)
return (
<div className="mdx">
<Component components={components} />
</div>
)
}
```
Once you've added your custom component, you can use it in MDX as follows:
```js
<CustomComponent propName="value" />
```
---
## HTML Elements
You can overwrite HTML elements using the same technique above.
```ts {4}
const components = {
Callout,
CustomComponent,
hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" />,
}
```
This will overwrite the `<hr />` tag or `---` in Mardown with the HTML output above.
---
## Styling
Tailwind CSS classes can be used inside MDX for styling.
```mdx
<p className="text-red-600">This text will be red.</p>
```
Make sure you have configured the path to your content in your `tailwind.config.js` file:
```js title="tailwind.config.js" {6}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./content/**/*.{md,mdx}",
],
}
```

60
content/docs/documentation/index.mdx Normal file
View file

@ -0,0 +1,60 @@
---
title: Documentation
description: Build your documentation site using Contentlayer and MDX.
---
Taxonomy includes a documentation site built using [Contentlayer](https://contentlayer.dev) and [MDX](http://mdxjs.com).
## Features
It comes with the following features out of the box:
1. Write content using MDX.
2. Transform and validate content using Contentlayer.
3. MDX components such as `<Callout />` and `<Card />`.
4. Support for table of contents.
5. Custom navigation with prev and next pager.
6. Beautiful code blocks using `rehype-pretty-code`.
7. Syntax highlighting using `shiki`.
8. Built-in search (_in progress_).
9. Dark mode (_in progress_).
## How is it built
Click on a section below to learn how the documentation site built.
<div className="grid gap-4 mt-6">
<Card href="/docs/documentation/contentlayer">
### Contentlayer
Learn how to use MDX with Contentlayer.
</Card>
<Card href="/docs/documentation/components">
### Components
Using React components in Mardown.
</Card>
<Card href="/docs/documentation/components">
### Code Blocks
Beautiful code blocks with syntax highlighting.
</Card>
<Card href="/docs/documentation/components">
### Style Guide
View a sample page with all the styles.
</Card>
</div>

211
content/docs/documentation/style-guide.mdx Normal file
View file

@ -0,0 +1,211 @@
---
title: Style Guide
description: Testing the MDX style guide with Tailwind Typography
---
<Callout>
- The text below is from the [Tailwind CSS](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) docs. I copied it here to test the markdown styles. **Tailwind is awesome. You should use it.**
- The CSS is from MDX sites I've built through the years. I copied this from [Nextra](https://github.com/shuding/nextra) and tweaked it a bit to fit the styles of this site.
</Callout>
Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
We get lots of complaints about it actually, with people regularly asking us things like:
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
> We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
---
## What to expect from here on out
What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
It's important to cover all of these use cases for a few reasons:
1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
Now we're going to try out another header style.
### Typography should be easy
So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
Something a wise person once told me about typography is:
> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
It's probably important that images look okay here by default as well:
![](/images/blog/blog-post-4.jpg)
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Now I'm going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.
And that's the end of this section.
## What if we stack headings?
### We should make sure that looks good, too.
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
### When a heading comes after a paragraph …
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
- **I often do this thing where list items have headings.**
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
- **Since this is a list, I need at least two items.**
I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
- **It's not a bad idea to add a third item either.**
I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.
After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
## Code should look okay by default.
I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
Here's what a default `tailwind.config.js` file looks like at the time of writing:
```js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
```
Hopefully that looks good enough to you.
### What about nested lists?
Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
1. **Nested lists are rarely a good idea.**
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
2. **Since we need to have more items, here's another one.**
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
3. **Two items isn't really a list, three is good though.**
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
- **For example, here's another nested list.**
But this time with a second paragraph.
- These list items won't have `<p>` tags
- Because they are only one line each
- **But in this second top-level list item, they will.**
This is especially annoying because of the spacing on this paragraph.
- As you can see here, because I've added a second line, this list item now has a `<p>` tag.
This is the second line I'm talking about by the way.
- Finally here's another list item so it's more like a list.
- A closing list item, but with no nested list, because why not?
And finally a sentence to close off this section.
## There are other elements we need to style
I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
We even included table styles, check it out:
| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
### Sometimes I even use `code` in headings
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
#### We haven't used an `h4` yet
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
### We still need to think about stacked headings though.
#### Let's make sure we don't screw that up with `h4` elements, either.
Phew, with any luck we have styled the headings above this text and they look pretty good.
Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
What I've written here is probably long enough, but adding this final sentence can't hurt.
## GitHub Flavored Markdown
I've also added support for GitHub Flavored Mardown using `remark-gfm`.
With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals.
A link like www.example.com or https://example.com would automatically be converted into an `a` tag.
This works for email links too: contact@example.com.

10
content/docs/in-progress.mdx Normal file
View file

@ -0,0 +1,10 @@
---
title: Not Implemented
description: This page is in progress.
---
<Callout>
This site is a work in progress. If you see dummy text on a page, it means I'm still working on it. You can follow updates on Twitter [@shadcn](https://twitter.com/shadcn).
</Callout>

54
content/docs/index.mdx Normal file
View file

@ -0,0 +1,54 @@
---
title: Documentation
description: Welcome to the Taxonomy documentation.
---
This is the documentation for the Taxonomy site.
I'm going to use this to document all the features of Taxonomy and how they are built. The documentation site is built using [ContentLayer](/docs/documentation/contentlayer) and MDX.
<Callout>
This site is a work in progress. If you see dummy text on a page, it means I'm still working on it. You can follow updates on Twitter [@shadcn](https://twitter.com/shadcn).
</Callout>
## Features
Select a feature below to learn more about it.
<div className="grid sm:grid-cols-2 gap-4 mt-6">
<Card href="/docs/documentation">
### Documentation
This documentation site built using Contentlayer.
</Card>
<Card href="/docs/marketing" disabled>
### Marketing
The marketing site with landing pages.
</Card>
<Card href="/docs/app" disabled>
### App
The dashboard with auth and subscriptions.
</Card>
<Card href="/docs/blog" disabled>
### Blog
The blog built using Contentlayer and MDX.
</Card>
</div>

217
content/guides/build-blog-using-contentlayer-mdx.mdx Normal file
View file

@ -0,0 +1,217 @@
---
title: Build a blog using ContentLayer and MDX.
description: Learn how to use ContentLayer to build a blog with Next.js
date: 2022-11-18
---
<Callout>
This site is a work in progress. If you see dummy text on a page, it means I'm still working on it. You can follow updates on Twitter [@shadcn](https://twitter.com/shadcn).
</Callout>
<Callout>
The text below is from the [Tailwind
CSS](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) docs. I copied it
here to test the markdown styles. **Tailwind is awesome. You should use it.**
</Callout>
Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
We get lots of complaints about it actually, with people regularly asking us things like:
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
> We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
---
## What to expect from here on out
What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
It's important to cover all of these use cases for a few reasons:
1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
Now we're going to try out another header style.
### Typography should be easy
So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
Something a wise person once told me about typography is:
> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
It's probably important that images look okay here by default as well:
![](/images/blog/blog-post-4.jpg)
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Now I'm going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.
And that's the end of this section.
## What if we stack headings?
### We should make sure that looks good, too.
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
### When a heading comes after a paragraph …
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
- **I often do this thing where list items have headings.**
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
- **Since this is a list, I need at least two items.**
I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
- **It's not a bad idea to add a third item either.**
I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.
After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
## Code should look okay by default.
I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
Here's what a default `tailwind.config.js` file looks like at the time of writing:
```js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
```
Hopefully that looks good enough to you.
### What about nested lists?
Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
1. **Nested lists are rarely a good idea.**
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
2. **Since we need to have more items, here's another one.**
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
3. **Two items isn't really a list, three is good though.**
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
- **For example, here's another nested list.**
But this time with a second paragraph.
- These list items won't have `<p>` tags
- Because they are only one line each
- **But in this second top-level list item, they will.**
This is especially annoying because of the spacing on this paragraph.
- As you can see here, because I've added a second line, this list item now has a `<p>` tag.
This is the second line I'm talking about by the way.
- Finally here's another list item so it's more like a list.
- A closing list item, but with no nested list, because why not?
And finally a sentence to close off this section.
## There are other elements we need to style
I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
We even included table styles, check it out:
| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
### Sometimes I even use `code` in headings
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
#### We haven't used an `h4` yet
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
### We still need to think about stacked headings though.
#### Let's make sure we don't screw that up with `h4` elements, either.
Phew, with any luck we have styled the headings above this text and they look pretty good.
Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
What I've written here is probably long enough, but adding this final sentence can't hurt.
## GitHub Flavored Markdown
I've also added support for GitHub Flavored Mardown using `remark-gfm`.
With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals.
A link like www.example.com or https://example.com would automatically be converted into an `a` tag.
This works for email links too: contact@example.com.

217
content/guides/using-next-auth-next-13.mdx Normal file
View file

@ -0,0 +1,217 @@
---
title: Using NextAuth.js with Next.13
description: How to use NextAuth.js in server components.
date: 2022-11-23
---
<Callout>
This site is a work in progress. If you see dummy text on a page, it means I'm still working on it. You can follow updates on Twitter [@shadcn](https://twitter.com/shadcn).
</Callout>
<Callout>
The text below is from the [Tailwind
CSS](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) docs. I copied it
here to test the markdown styles. **Tailwind is awesome. You should use it.**
</Callout>
Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
We get lots of complaints about it actually, with people regularly asking us things like:
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
> We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful.
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
---
## What to expect from here on out
What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
It's important to cover all of these use cases for a few reasons:
1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
Now we're going to try out another header style.
### Typography should be easy
So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.
Something a wise person once told me about typography is:
> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.
It's probably important that images look okay here by default as well:
![](/images/blog/blog-post-4.jpg)
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Now I'm going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.
And that's the end of this section.
## What if we stack headings?
### We should make sure that looks good, too.
Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.
### When a heading comes after a paragraph …
When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.
- **I often do this thing where list items have headings.**
For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.
I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
- **Since this is a list, I need at least two items.**
I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.
- **It's not a bad idea to add a third item either.**
I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it.
After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.
## Code should look okay by default.
I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting.
Here's what a default `tailwind.config.js` file looks like at the time of writing:
```js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
```
Hopefully that looks good enough to you.
### What about nested lists?
Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work.
1. **Nested lists are rarely a good idea.**
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
2. **Since we need to have more items, here's another one.**
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
3. **Two items isn't really a list, three is good though.**
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
The most annoying thing about lists in Markdown is that `<li>` elements aren't given a child `<p>` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.
- **For example, here's another nested list.**
But this time with a second paragraph.
- These list items won't have `<p>` tags
- Because they are only one line each
- **But in this second top-level list item, they will.**
This is especially annoying because of the spacing on this paragraph.
- As you can see here, because I've added a second line, this list item now has a `<p>` tag.
This is the second line I'm talking about by the way.
- Finally here's another list item so it's more like a list.
- A closing list item, but with no nested list, because why not?
And finally a sentence to close off this section.
## There are other elements we need to style
I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.
We even included table styles, check it out:
| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
We also need to make sure inline code looks good, like if I wanted to talk about `<span>` elements or tell you the good news about `@tailwindcss/typography`.
### Sometimes I even use `code` in headings
Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really.
Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
#### We haven't used an `h4` yet
But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`.
We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks.
### We still need to think about stacked headings though.
#### Let's make sure we don't screw that up with `h4` elements, either.
Phew, with any luck we have styled the headings above this text and they look pretty good.
Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document.
What I've written here is probably long enough, but adding this final sentence can't hurt.
## GitHub Flavored Markdown
I've also added support for GitHub Flavored Mardown using `remark-gfm`.
With `remark-gfm`, we get a few extra features in our markdown. Example: autolink literals.
A link like www.example.com or https://example.com would automatically be converted into an `a` tag.
This works for email links too: contact@example.com.

2
content/pages/privacy.mdx
View file

@ -1,6 +1,6 @@
---
title: Privacy
excerpt: The Privacy Policy for Taxonomy App.
description: The Privacy Policy for Taxonomy App.
---
## Consent

2
content/pages/terms.mdx
View file

@ -1,6 +1,6 @@
---
title: Terms & Conditions
excerpt: Read our terms and conditions.
description: Read our terms and conditions.
---
## Legal Notices

180
contentlayer.config.js Normal file
View file

@ -0,0 +1,180 @@
import { defineDocumentType, makeSource } from "contentlayer/source-files"
import remarkGfm from "remark-gfm"
import rehypePrettyCode from "rehype-pretty-code"
import rehypeSlug from "rehype-slug"
import rehypeAutolinkHeadings from "rehype-autolink-headings"
/** @type {import('contentlayer/source-files').ComputedFields} */
const computedFields = {
slug: {
type: "string",
resolve: (doc) => `/${doc._raw.flattenedPath}`,
},
slugAsParams: {
type: "string",
resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
},
}
export const Doc = defineDocumentType(() => ({
name: "Doc",
filePathPattern: `docs/**/*.mdx`,
contentType: "mdx",
fields: {
title: {
type: "string",
required: true,
},
description: {
type: "string",
},
published: {
type: "boolean",
default: true,
},
},
computedFields,
}))
export const Guide = defineDocumentType(() => ({
name: "Guide",
filePathPattern: `guides/**/*.mdx`,
contentType: "mdx",
fields: {
title: {
type: "string",
required: true,
},
description: {
type: "string",
},
date: {
type: "date",
required: true,
},
published: {
type: "boolean",
default: true,
},
featured: {
type: "boolean",
default: false,
},
},
computedFields,
}))
export const Post = defineDocumentType(() => ({
name: "Post",
filePathPattern: `blog/**/*.mdx`,
contentType: "mdx",
fields: {
title: {
type: "string",
required: true,
},
description: {
type: "string",
},
date: {
type: "date",
required: true,
},
published: {
type: "boolean",
default: true,
},
image: {
type: "string",
required: true,
},
authors: {
// Reference types are not embedded.
// Until this is fixed, we can use a simple list.
// type: "reference",
// of: Author,
type: "list",
of: { type: "string" },
required: true,
},
},
computedFields,
}))
export const Author = defineDocumentType(() => ({
name: "Author",
filePathPattern: `authors/**/*.mdx`,
contentType: "mdx",
fields: {
title: {
type: "string",
required: true,
},
description: {
type: "string",
},
avatar: {
type: "string",
required: true,
},
twitter: {
type: "string",
required: true,
},
},
computedFields,
}))
export const Page = defineDocumentType(() => ({
name: "Page",
filePathPattern: `pages/**/*.mdx`,
contentType: "mdx",
fields: {
title: {
type: "string",
required: true,
},
description: {
type: "string",
},
},
computedFields,
}))
export default makeSource({
contentDirPath: "./content",
documentTypes: [Page, Doc, Guide, Post, Author],
mdx: {
remarkPlugins: [remarkGfm],
rehypePlugins: [
rehypeSlug,
[
rehypePrettyCode,
{
theme: "css-variables",
onVisitLine(node) {
// Prevent lines from collapsing in `display: grid` mode, and allow empty
// lines to be copy/pasted
if (node.children.length === 0) {
node.children = [{ type: "text", value: " " }]
}
},
onVisitHighlightedLine(node) {
node.properties.className.push("line--highlighted")
},
onVisitHighlightedWord(node) {
node.properties.className = ["word--highlighted"]
},
},
],
[
rehypeAutolinkHeadings,
{
properties: {
className: ["subheading-anchor"],
},
},
],
],
},
})

12
hooks/use-lock-body.ts Normal file
View file

@ -0,0 +1,12 @@
import * as React from "react"
// @see https://usehooks.com/useLockBodyScroll.
export function useLockBody() {
React.useLayoutEffect((): (() => void) => {
const originalStyle: string = window.getComputedStyle(
document.body
).overflow
document.body.style.overflow = "hidden"
return () => (document.body.style.overflow = originalStyle)
}, [])
}

11
hooks/use-mounted.ts Normal file
View file

@ -0,0 +1,11 @@
import * as React from "react"
export function useMounted() {
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => {
setMounted(true)
}, [])
return mounted
}

5
lib/auth.ts
View file

@ -4,7 +4,6 @@ import EmailProvider from "next-auth/providers/email"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { Client } from "postmark"
import { PrismaClient } from "@prisma/client"
import { db } from "@/lib/db"
const postmarkClient = new Client(process.env.POSTMARK_API_TOKEN)
@ -12,13 +11,11 @@ const postmarkClient = new Client(process.env.POSTMARK_API_TOKEN)
const POSTMARK_SIGN_IN_TEMPLATE = 29559329
const POSTMARK_ACTIVATION_TEMPLATE = 29559329
const prisma = new PrismaClient()
export const authOptions: NextAuthOptions = {
// huh any! I know.
// This is a temporary fix for prisma client.
// @see https://github.com/prisma/prisma/issues/16117
adapter: PrismaAdapter(prisma as any),
adapter: PrismaAdapter(db as any),
session: {
strategy: "jwt",
},

138
lib/mdx/index.ts
View file

@ -1,138 +0,0 @@
import { promises as fs } from "fs"
import hasha from "hasha"
import glob from "fast-glob"
import path from "path"
import NodeCache from "node-cache"
import { VFile } from "vfile"
import { matter } from "vfile-matter"
import * as z from "zod"
const mdxCache = new NodeCache()
export interface Source<T> {
contentPath: string
basePath: string
sortBy?: string
sortOrder?: "asc" | "desc"
frontMatter: T
}
interface MdxFile {
filepath: string
slug: string
url: string
}
interface MdxFileData<TFrontmatter> {
raw: string
hash: string
frontMatter: TFrontmatter
content: string
}
export function createSource<T extends z.ZodType>(source: Source<T>) {
const { contentPath, basePath, sortBy, sortOrder } = source
async function getMdxFiles() {
const files = await glob(`${contentPath}/**/*.{md,mdx}`)
if (!files.length) return []
return files.map((filepath) => {
let slug = filepath
.replace(contentPath, "")
.replace(/^\/+/, "")
.replace(new RegExp(path.extname(filepath) + "$"), "")
slug = slug.replace(/\/?index$/, "")
return {
filepath,
slug,
url: `${basePath?.replace(/\/$/, "")}/${slug}`,
}
})
}
async function getFileData(file: MdxFile): Promise<MdxFileData<z.infer<T>>> {
const raw = await fs.readFile(file.filepath, "utf-8")
const hash = hasha(raw.toString())
const cachedContent = mdxCache.get<MdxFileData<z.infer<T>>>(hash)
if (cachedContent?.hash === hash) {
return cachedContent
}
// serialize.parseFrontmatter not working in head.tsx.
// Error: Unsupported Server Component type: Module.
// For now, we parse the frontMatter separately.
// This is convenient since we sometimes want the frontMatter
// without serializing the mdx.
const vfile = new VFile({ value: raw })
matter(vfile, { strip: true })
const frontMatter = source.frontMatter.parse(
vfile.data.matter
) as z.infer<T>
const fileData = {
raw,
frontMatter,
hash,
content: String(vfile.value),
}
mdxCache.set(hash, fileData)
return fileData
}
async function getMdxNode(slug: string | string[]) {
const _slug = Array.isArray(slug) ? slug.join("/") : slug
const files = await getMdxFiles()
if (!files?.length) return null
const [file] = files.filter((file) => file.slug === _slug)
if (!file) return null
const data = await getFileData(file)
return {
...file,
...data,
}
}
async function getAllMdxNodes() {
const files = await getMdxFiles()
if (!files.length) return []
const nodes = await Promise.all(
files.map(async (file) => {
return await getMdxNode(file.slug)
})
)
const adjust = sortOrder === "desc" ? -1 : 1
return nodes.sort((a, b) => {
if (a.frontMatter[sortBy] < b.frontMatter[sortBy]) {
return -1 * adjust
}
if (a.frontMatter[sortBy] > b.frontMatter[sortBy]) {
return 1 * adjust
}
return 0
})
}
return {
getMdxFiles,
getFileData,
getMdxNode,
getAllMdxNodes,
}
}

23
lib/mdx/sources.ts
View file

@ -1,23 +0,0 @@
import * as z from "zod"
import { createSource } from "."
export const Blog = createSource({
contentPath: "content/blog",
basePath: "/blog",
sortBy: "date",
sortOrder: "desc",
frontMatter: z.object({
title: z.string(),
date: z.string(),
excerpt: z.string().optional(),
}),
})
export const Page = createSource({
contentPath: "content/pages",
basePath: "/",
frontMatter: z.object({
title: z.string(),
excerpt: z.string().optional(),
}),
})

76
lib/toc.ts Normal file
View file

@ -0,0 +1,76 @@
import { remark } from "remark"
import { toc } from "mdast-util-toc"
import { visit } from "unist-util-visit"
const textTypes = ["text", "emphasis", "strong", "inlineCode"]
function flattenNode(node) {
const p = []
visit(node, (node) => {
if (!textTypes.includes(node.type)) return
p.push(node.value)
})
return p.join(``)
}
interface Item {
title: string
url: string
items?: Item[]
}
interface Items {
items?: Item[]
}
function getItems(node, current): Items {
if (!node) {
return {}
}
if (node.type === "paragraph") {
visit(node, (item) => {
if (item.type === "link") {
current.url = item.url
current.title = flattenNode(node)
}
if (item.type === "text") {
current.title = flattenNode(node)
}
})
return current
}
if (node.type === "list") {
current.items = node.children.map((i) => getItems(i, {}))
return current
} else if (node.type === "listItem") {
const heading = getItems(node.children[0], {})
if (node.children.length > 1) {
getItems(node.children[1], heading)
}
return heading
}
return {}
}
const getToc = () => (node, file) => {
const table = toc(node)
file.data = getItems(table.map, {})
}
export type TableOfContents = Items
export async function getTableOfContents(
content: string
): Promise<TableOfContents> {
const result = await remark().use(getToc).process(content)
return result.data
}

4
next.config.js → next.config.mjs
View file

@ -1,3 +1,5 @@
import { withContentlayer } from "next-contentlayer"
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
@ -10,4 +12,4 @@ const nextConfig = {
},
}
module.exports = nextConfig
export default withContentlayer(nextConfig)

24
package.json
View file

@ -8,6 +8,7 @@
},
"scripts": {
"dev": "next dev",
"turbo": "next dev --turbo",
"build": "next build",
"start": "next start",
"lint": "next lint",
@ -26,6 +27,7 @@
"@editorjs/table": "^2.0.4",
"@hookform/resolvers": "^2.9.10",
"@next-auth/prisma-adapter": "^1.0.4",
"@next/font": "^13.0.3",
"@prisma/client": "^4.5.0",
"@radix-ui/react-alert-dialog": "^1.0.2",
"@radix-ui/react-avatar": "^1.0.1",
@ -34,13 +36,12 @@
"@radix-ui/react-toggle": "^1.0.0",
"@vercel/analytics": "^0.1.3",
"clsx": "^1.2.1",
"fast-glob": "^3.2.12",
"hasha": "^5.2.2",
"contentlayer": "^0.2.9",
"date-fns": "^2.29.3",
"lucide-react": "^0.92.0",
"next": "^13.0.3-canary.0",
"next": "^13.0.3",
"next-auth": "^4.16.4",
"next-mdx-remote": "^4.1.0",
"node-cache": "^5.1.2",
"next-contentlayer": "^0.2.9",
"nodemailer": "^6.8.0",
"postmark": "^3.0.14",
"prop-types": "^15.8.1",
@ -51,10 +52,9 @@
"react-hot-toast": "^2.4.0",
"react-textarea-autosize": "^8.3.4",
"sharp": "^0.31.1",
"shiki": "^0.11.1",
"tailwind-merge": "^1.6.2",
"tailwindcss-animate": "^1.0.5",
"vfile": "^5.3.5",
"vfile-matter": "^4.0.0",
"zod": "^3.19.1"
},
"devDependencies": {
@ -65,11 +65,19 @@
"autoprefixer": "^10.4.8",
"eslint": "8.21.0",
"eslint-config-next": "^13.0.0",
"mdast-util-toc": "^6.1.0",
"postcss": "^8.4.14",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"prisma": "^4.5.0",
"rehype": "^12.0.1",
"rehype-autolink-headings": "^6.1.1",
"rehype-pretty-code": "^0.5.0",
"rehype-slug": "^5.1.0",
"remark": "^14.0.2",
"remark-gfm": "^3.0.1",
"tailwindcss": "^3.1.7",
"typescript": "4.7.4"
"typescript": "4.7.4",
"unist-util-visit": "^4.1.1"
}
}

BIN
public/images/avatars/shadcn.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/images/blog/blog-post-1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
public/images/blog/blog-post-2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
public/images/blog/blog-post-3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
public/images/blog/blog-post-4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
public/images/hero.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/images/nextjs-icon-dark-background.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 36 KiB

48
styles/mdx.css Normal file
View file

@ -0,0 +1,48 @@
:root {
--shiki-color-text: #414141;
--shiki-color-background: transparent;
--shiki-token-constant: #1976d2;
--shiki-token-string: #22863a;
--shiki-token-comment: #aaa;
--shiki-token-keyword: #d32f2f;
--shiki-token-parameter: #ff9800;
--shiki-token-function: #6f42c1;
--shiki-token-string-expression: #22863a;
--shiki-token-punctuation: #212121;
--shiki-token-link: #22863a;
--nextra-shiki-deleted: #f00;
--nextra-shiki-inserted: #22863a;
}
[data-rehype-pretty-code-fragment] code {
@apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
counter-reset: line;
box-decoration-break: clone;
}
[data-rehype-pretty-code-fragment] .line {
@apply px-4 py-1;
}
[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
counter-increment: line;
content: counter(line);
display: inline-block;
width: 1rem;
margin-right: 1rem;
text-align: right;
color: gray;
}
[data-rehype-pretty-code-fragment] .line--highlighted {
@apply bg-slate-500 bg-opacity-10;
}
[data-rehype-pretty-code-fragment] .line-highlighted span {
@apply relative;
}
[data-rehype-pretty-code-fragment] .word--highlighted {
@apply rounded-md bg-slate-500 bg-opacity-10 p-1;
}
[data-rehype-pretty-code-title] {
@apply mt-4 py-2 px-4 text-sm font-medium;
}
[data-rehype-pretty-code-title] + pre {
@apply mt-0;
}

8
tailwind.config.js
View file

@ -1,4 +1,5 @@
const { colors } = require("tailwindcss/colors")
const { fontFamily } = require("tailwindcss/defaultTheme")
/** @type {import('tailwindcss').Config} */
module.exports = {
@ -6,13 +7,20 @@ module.exports = {
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./ui/**/*.{ts,tsx}",
"./content/**/*.{md,mdx}",
],
theme: {
container: {
center: true,
padding: "1.5rem",
screens: {
"2xl": "1440px",
},
},
extend: {
fontFamily: {
sans: ["var(--font-inter)", ...fontFamily.sans],
},
colors: {
...colors,
brand: {

14
tsconfig.json
View file

@ -18,9 +18,12 @@
"paths": {
"@/components/*": ["components/*"],
"@/ui/*": ["ui/*"],
"@/hooks/*": ["hooks/*"],
"@/lib/*": ["lib/*"],
"@/config/*": ["config/*"],
"@/styles/*": ["styles/*"],
"@/prisma/*": ["prisma/*"]
"@/prisma/*": ["prisma/*"],
"contentlayer/generated": ["./.contentlayer/generated"]
},
"plugins": [
{
@ -28,6 +31,13 @@
}
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".contentlayer/generated",
"content/pages/about.mdx"
],
"exclude": ["node_modules"]
}

18
types/config.d.ts vendored Normal file
View file

@ -0,0 +1,18 @@
import { MainNavItem, SidebarNavItem } from "types"
export type SiteConfig = {
name: string
links: {
twitter: string
github: string
}
}
export type DocsConfig = {
mainNav: MainNavItem[]
sidebarNav: SidebarNavItem[]
}
export type MarketingConfig = {
mainNav: MainNavItem[]
}

25
types/index.d.ts vendored Normal file
View file

@ -0,0 +1,25 @@
import type { Icon } from "lucide-react"
export type NavItem = {
title: string
href: string
disabled?: boolean
icon?: Icon
}
export type MainNavItem = Pick<NavItem, "title" | "href" | "disabled">
export type SidebarNavItem = {
title: string
disabled?: boolean
external?: boolean
} & (
| {
href: string
items?: never
}
| {
href?: string
items: NavLink[]
}
)

2
ui/dropdown.tsx
View file

@ -45,7 +45,7 @@ DropdownMenu.Item = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"flex cursor-default select-none items-center py-2 px-3 text-sm text-slate-500 outline-none focus:bg-slate-50 focus:text-black",
"flex cursor-default select-none items-center py-2 px-3 text-sm text-slate-600 outline-none focus:bg-slate-50 focus:text-black",
className
)}
{...props}

Some files were not shown because too many files have changed in this diff Show more