jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-04-17 10:28:46 -04:00
Code Issues Activity

refactor: eslint/prettier ➡️ biome

Browse Source
This commit is contained in:
Jake Jarvis
2026-02-19 14:02:03 -05:00
parent 4858c8928c
commit c30197ccc5
115 changed files with 2584 additions and 5683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.cursorignore
View File

@@ -1,4 +0,0 @@
# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
/notes/
/public/

81
.devcontainer/devcontainer.json
View File

@@ -1,45 +1,40 @@
{
"name": "Node.js",
"image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm",
"postCreateCommand": ". ${NVM_DIR}/nvm.sh && nvm install && corepack enable && CI=true pnpm install",
"customizations": {
"vscode": {
"settings": {
"editor.rulers": [
120
],
"extensions.ignoreRecommendations": true,
"git.allowForcePush": true,
"git.autofetch": true,
"git.autoStash": true,
"git.enableCommitSigning": true,
"git.fetchOnPull": true,
"git.rebaseWhenSync": true,
"telemetry.telemetryLevel": "off",
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.importModuleSpecifierEnding": "minimal",
"typescript.surveys.enabled": false,
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.tsserver.log": "off",
"typescript.updateImportsOnFileMove.enabled": "always"
},
"extensions": [
"bradlc.vscode-tailwindcss",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"unifiedjs.vscode-mdx"
]
}
},
"tasks": {
"build": "pnpm install --frozen-lockfile && pnpm build"
},
"forwardPorts": [
3000
],
"containerEnv": {
"CHECKPOINT_DISABLE": "1",
"COREPACK_ENABLE_DOWNLOAD_PROMPT": "0",
"NEXT_TELEMETRY_DISABLED": "1"
}
"name": "Node.js",
"image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm",
"postCreateCommand": ". ${NVM_DIR}/nvm.sh && nvm install && corepack enable && CI=true pnpm install",
"customizations": {
"vscode": {
"settings": {
"editor.rulers": [120],
"extensions.ignoreRecommendations": true,
"git.allowForcePush": true,
"git.autofetch": true,
"git.autoStash": true,
"git.enableCommitSigning": true,
"git.fetchOnPull": true,
"git.rebaseWhenSync": true,
"telemetry.telemetryLevel": "off",
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.importModuleSpecifierEnding": "minimal",
"typescript.surveys.enabled": false,
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.tsserver.log": "off",
"typescript.updateImportsOnFileMove.enabled": "always"
},
"extensions": [
"biomejs.biome",
"bradlc.vscode-tailwindcss",
"unifiedjs.vscode-mdx"
]
}
},
"tasks": {
"build": "pnpm install --frozen-lockfile && pnpm build"
},
"forwardPorts": [3000],
"containerEnv": {
"CHECKPOINT_DISABLE": "1",
"COREPACK_ENABLE_DOWNLOAD_PROMPT": "0",
"NEXT_TELEMETRY_DISABLED": "1"
}
}

13
.editorconfig
View File

@@ -1,13 +0,0 @@
# http://editorconfig.org
# this file is the top-most editorconfig file
root = true
# all files
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

1
.husky/pre-commit
View File

@@ -1 +0,0 @@
./node_modules/.bin/lint-staged

14
.prettierignore
View File

@@ -1,14 +0,0 @@
# pnpm
node_modules/
pnpm-lock.yaml
.pnpm-store/
# next.js
.next/
.vercel/
# other
lib/db/migrations/
public/
.devcontainer/devcontainer.json
.vscode/

14
.prettierrc.mjs
View File

@@ -1,14 +0,0 @@
/** @type {import("prettier").Config} */
const config = {
plugins: ["prettier-plugin-tailwindcss"],
tailwindFunctions: ["cn", "clsx", "cva", "twMerge"],
jsxSingleQuote: false,
printWidth: 120,
quoteProps: "as-needed",
singleQuote: false,
tabWidth: 2,
trailingComma: "es5",
useTabs: false,
};
export default config;

11
.vscode/extensions.json vendored
View File

@@ -1,8 +1,7 @@
{
"recommendations": [
"bradlc.vscode-tailwindcss",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"unifiedjs.vscode-mdx"
]
"recommendations": [
"biomejs.biome",
"bradlc.vscode-tailwindcss",
"unifiedjs.vscode-mdx"
]
}

48
.vscode/settings.json vendored
View File

@@ -1,16 +1,36 @@
{
"editor.tabSize": 2,
"editor.rulers": [
120
],
"files.associations": {
"*.css": "tailwindcss",
"*.mdx": "markdown"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.importModuleSpecifierEnding": "minimal",
"typescript.surveys.enabled": false,
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.tsserver.log": "off",
"typescript.updateImportsOnFileMove.enabled": "always"
"typescript.tsdk": "node_modules/typescript/lib",
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"emmet.showExpandedAbbreviation": "never",
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[javascriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[json]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[jsonc]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[css]": {
"editor.defaultFormatter": "biomejs.biome"
},
"files.associations": {
"*.css": "tailwindcss",
"*.mdx": "markdown"
}
}

15
AGENTS.md
View File

@@ -18,14 +18,14 @@ No test suite exists. Validate changes via `pnpm typecheck` and `pnpm lint`.
## Code Style
### Formatting (Prettier)
### Formatting (Biome)
- **Line width:** 120 characters
- **Line width:** 80 characters
- **Indentation:** 2 spaces (no tabs)
- **Quotes:** Double quotes, no JSX single quotes
- **Trailing commas:** ES5 style
- **Semicolons:** Required
- **Tailwind:** Classes auto-sorted via `prettier-plugin-tailwindcss`
- **Tailwind:** Classes auto-sorted via `biome --write --unsafe`
### Import Organization
@@ -126,15 +126,6 @@ export const getData = async (slug: string) => {
};
```
### Environment Variables
Type-checked in `lib/env.ts` using `@t3-oss/env-nextjs`. Never access `process.env` directly:
```typescript
import { env } from "@/lib/env";
const apiKey = env.RESEND_API_KEY;
```
## Project Structure
```

15
README.md
View File

@@ -6,27 +6,24 @@
[![GitHub repo size](https://img.shields.io/github/repo-size/jakejarvis/jarv.is?color=009cdf&label=repo%20size&logo=git&logoColor=white)](https://github.com/jakejarvis/jarv.is)
[![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fjarv.is%2Fapi%2Fhits&query=%24.total.hits&logo=googleanalytics&logoColor=white&label=hits&color=salmon&cacheSeconds=1800)](https://jarv.is/api/hits)
My humble abode on the World Wide Web, created and deployed using [Next.js](https://nextjs.org/), [Tailwind CSS](https://github.com/user-attachments/assets/dfe99976-c73d-46f1-8a50-f26338463ad8), [Planetscale Postgres](https://planetscale.com/), [Drizzle](https://orm.drizzle.team/), [Better Auth](https://www.better-auth.com/), [and more](https://jarv.is/humans.txt).
My humble abode on the World Wide Web, created with [Next.js](https://nextjs.org/), [Tailwind CSS](https://github.com/user-attachments/assets/dfe99976-c73d-46f1-8a50-f26338463ad8), [Planetscale Postgres](https://planetscale.com/), [Drizzle](https://orm.drizzle.team/), [Better Auth](https://www.better-auth.com/), [and more](https://jarv.is/humans.txt).
## 🕹️ Getting Started
## Development
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/jakejarvis/jarv.is)
I highly recommend spinning up a [Codespace](https://github.com/features/codespaces) with the button above to start inside of a preconfigured and tested environment. But you can also clone this repository locally, run `pnpm install` to pull down the necessary dependencies and `pnpm dev` to start the local server, and then open [localhost:3000](http://localhost:3000/) in a browser. Pages will live-refresh when source files are changed.
I highly recommend spinning up a [Codespace](https://github.com/features/codespaces) with the button above to start inside of a preconfigured and tested environment.
**Be sure to populate the required environment variables!** Refer to [`lib/env.ts`](lib/env.ts), which documents (and strictly [type-checks](https://env.t3.gg/docs/introduction)) these variables. The included [`.env.example`](.env.example) file should be copied and used as a template for a new local `.env` file, which the local `next dev` server will then ingest.
**Be sure to populate the required environment variables!**
> ⚠️ **Currently, there are a few assumptions sprinkled throughout the code that this repo will be deployed to [Vercel](https://nextjs.org/docs/app/building-your-application/deploying#managed-nextjs-with-vercel) and _only_ Vercel.** I'll correct this soon™ now that some escape hatches (namely [OpenNext](https://opennext.js.org/)) actually exist...
## 🌎 Related
## Related
- [💻 /uses](https://jarv.is/uses) – Things and stuff I use.
- [🕰️ /previously](https://jarv.is/previously) – An embarrassing trip down this site's memory lane.
- Visit [/y2k](https://jarv.is/y2k) if you want to experience the _fully_ immersive time machine, but don't say I didn't warn you...
- [🧅 Tor (.onion) mirror](http://jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion/) – For an excessive level of privacy and security.
- [🧮 jakejarvis/website-stats](https://github.com/jakejarvis/website-stats) – Daily raw snapshots of the [hit counter](app/api/hits/route.ts) database.
## 📜 License
## License
Site content is licensed under the [CC-BY-4.0 license](LICENSE), which means that you can copy, redistribute, remix, transform, and build upon the content for any purpose as long as you give appropriate credit.

14
app/analytics.tsx
View File

@@ -1,13 +1,11 @@
import { Analytics as VercelAnalytics } from "@vercel/analytics/next";
import { SpeedInsights as VercelSpeedInsights } from "@vercel/speed-insights/next";
const Analytics = () => {
return (
<>
<VercelAnalytics />
<VercelSpeedInsights />
</>
);
};
const Analytics = () => (
<>
<VercelAnalytics />
<VercelSpeedInsights />
</>
);
export { Analytics };

2
app/api/auth/[...all]/route.ts
View File

@@ -1,4 +1,4 @@
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";
import { auth } from "@/lib/auth";
export const { POST, GET } = toNextJsHandler(auth);

60
app/birthday/page.tsx
View File

@@ -1,9 +1,9 @@
import { env } from "@/lib/env";
import { JsonLd } from "react-schemaorg";
import type { VideoObject } from "schema-dts";
import { PageTitle } from "@/components/layout/page-title";
import { Video } from "@/components/video";
import { env } from "@/lib/env";
import { createMetadata } from "@/lib/metadata";
import type { VideoObject } from "schema-dts";
import thumbnail from "./thumbnail.png";
@@ -21,35 +21,33 @@ export const metadata = createMetadata({
},
});
const Page = () => {
return (
<>
<JsonLd<VideoObject>
item={{
"@context": "https://schema.org",
"@type": "VideoObject",
name: metadata.title as string,
description: metadata.description as string,
contentUrl:
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-pavk1LBK4H6xF8ZWeR0oTcaabGuQ8T.webm",
thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/birthday`,
uploadDate: "1996-02-06T00:00:00Z",
duration: "PT6M10S",
}}
/>
<PageTitle canonical="/birthday">1996.mov</PageTitle>
<Video
src={[
const Page = () => (
<>
<JsonLd<VideoObject>
item={{
"@context": "https://schema.org",
"@type": "VideoObject",
name: metadata.title as string,
description: metadata.description as string,
contentUrl:
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-pavk1LBK4H6xF8ZWeR0oTcaabGuQ8T.webm",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-EkbYbrKY8reheQ4UPcP22ipzpMZ2MC.mp4",
]}
poster={thumbnail.src}
/>
</>
);
};
thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/birthday`,
uploadDate: "1996-02-06T00:00:00Z",
duration: "PT6M10S",
}}
/>
<PageTitle canonical="/birthday">1996.mov</PageTitle>
<Video
src={[
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-pavk1LBK4H6xF8ZWeR0oTcaabGuQ8T.webm",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-EkbYbrKY8reheQ4UPcP22ipzpMZ2MC.mp4",
]}
poster={thumbnail.src}
/>
</>
);
export default Page;

86
app/contact/page.tsx
View File

@@ -1,51 +1,59 @@
import { PageTitle } from "@/components/layout/page-title";
import { ContactForm } from "@/components/contact-form";
import { PageTitle } from "@/components/layout/page-title";
import { createMetadata } from "@/lib/metadata";
export const metadata = createMetadata({
title: "Contact Me",
description: "Fill out this quick form and I'll get back to you as soon as I can.",
description:
"Fill out this quick form and I'll get back to you as soon as I can.",
canonical: "/contact",
});
const Page = () => {
return (
<>
<PageTitle canonical="/contact">Contact</PageTitle>
const Page = () => (
<>
<PageTitle canonical="/contact">Contact</PageTitle>
<div className="mx-auto w-full max-w-2xl">
<div className="prose prose-sm prose-neutral dark:prose-invert max-w-none">
<p>
Fill out this quick form and I&rsquo;ll get back to you as soon as I can! You can also{" "}
<a href="mailto:jake@jarv.is">email me directly</a> or send me a direct message on{" "}
<a href="https://bsky.app/profile/jarv.is" target="_blank" rel="noopener noreferrer">
Bluesky
</a>{" "}
or{" "}
<a href="https://fediverse.jarv.is/@jake" target="_blank" rel="noopener noreferrer">
Mastodon
</a>
.
</p>
<p>
You can grab my public key here:{" "}
<a
href="https://keyoxide.org/hkp/3bc6e5776bf379d36f6714802b0c9cf251e69a39"
target="_blank"
rel="noopener"
title="3BC6 E577 6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39"
className="bg-muted relative rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium tracking-wider [word-spacing:-0.25em]"
>
2B0C 9CF2 51E6 9A39
</a>
.
</p>
</div>
<ContactForm />
<div className="mx-auto w-full max-w-2xl">
<div className="prose prose-sm prose-neutral dark:prose-invert max-w-none">
<p>
Fill out this quick form and I&rsquo;ll get back to you as soon as I
can! You can also <a href="mailto:jake@jarv.is">email me directly</a>{" "}
or send me a direct message on{" "}
<a
href="https://bsky.app/profile/jarv.is"
target="_blank"
rel="noopener noreferrer"
>
Bluesky
</a>{" "}
or{" "}
<a
href="https://fediverse.jarv.is/@jake"
target="_blank"
rel="noopener noreferrer"
>
Mastodon
</a>
.
</p>
<p>
You can grab my public key here:{" "}
<a
href="https://keyoxide.org/hkp/3bc6e5776bf379d36f6714802b0c9cf251e69a39"
target="_blank"
rel="noopener"
title="3BC6 E577 6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39"
className="relative rounded-sm bg-muted px-[0.3rem] py-[0.2rem] font-medium font-mono text-sm tracking-wider [word-spacing:-0.25em]"
>
2B0C 9CF2 51E6 9A39
</a>
.
</p>
</div>
</>
);
};
<ContactForm />
</div>
</>
);
export default Page;

110
app/hillary/page.tsx
View File

@@ -1,15 +1,16 @@
import { env } from "@/lib/env";
import { JsonLd } from "react-schemaorg";
import type { VideoObject } from "schema-dts";
import { PageTitle } from "@/components/layout/page-title";
import { Video } from "@/components/video";
import { env } from "@/lib/env";
import { createMetadata } from "@/lib/metadata";
import type { VideoObject } from "schema-dts";
import thumbnail from "./thumbnail.png";
export const metadata = createMetadata({
title: "My Brief Apperance in Hillary Clinton's DNC Video",
description: "My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse.",
description:
"My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse.",
canonical: "/hillary",
openGraph: {
videos: [
@@ -21,52 +22,65 @@ export const metadata = createMetadata({
},
});
const Page = () => {
return (
<>
<JsonLd<VideoObject>
item={{
"@context": "https://schema.org",
"@type": "VideoObject",
name: metadata.title as string,
description: metadata.description as string,
contentUrl:
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-ZTUBLwMcmOE8EJ4tNAhpCli4NAHKcG.webm",
thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/hillary`,
uploadDate: "2016-07-25T00:00:00Z",
duration: "PT1M51S",
}}
/>
<PageTitle canonical="/hillary">HRC.mov</PageTitle>
<Video
src={[
const Page = () => (
<>
<JsonLd<VideoObject>
item={{
"@context": "https://schema.org",
"@type": "VideoObject",
name: metadata.title as string,
description: metadata.description as string,
contentUrl:
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-ZTUBLwMcmOE8EJ4tNAhpCli4NAHKcG.webm",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-T6klrrArGL0IO4QPaloIiIH164UqUC.mp4",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention.en-uHnecgVCrT9xA8EkzdEaeIwB0rHFC9.vtt",
]}
poster={thumbnail.src}
/>
thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/hillary`,
uploadDate: "2016-07-25T00:00:00Z",
duration: "PT1M51S",
}}
/>
<p className="text-muted-foreground mx-4 mt-5 mb-0 text-center text-sm leading-relaxed">
Video is property of{" "}
<a href="https://www.hillaryclinton.com/" target="_blank" rel="noopener noreferrer" className="font-bold">
Hillary for America
</a>
, the{" "}
<a href="https://democrats.org/" target="_blank" rel="noopener noreferrer" className="font-bold">
Democratic National Committee
</a>
, and{" "}
<a href="https://cnnpressroom.blogs.cnn.com/" target="_blank" rel="noopener noreferrer" className="font-bold">
CNN / WarnerMedia
</a>
. &copy; 2016.
</p>
</>
);
};
<PageTitle canonical="/hillary">HRC.mov</PageTitle>
<Video
src={[
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-ZTUBLwMcmOE8EJ4tNAhpCli4NAHKcG.webm",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-T6klrrArGL0IO4QPaloIiIH164UqUC.mp4",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention.en-uHnecgVCrT9xA8EkzdEaeIwB0rHFC9.vtt",
]}
poster={thumbnail.src}
/>
<p className="mx-4 mt-5 mb-0 text-center text-muted-foreground text-sm leading-relaxed">
Video is property of{" "}
<a
href="https://www.hillaryclinton.com/"
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
Hillary for America
</a>
, the{" "}
<a
href="https://democrats.org/"
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
Democratic National Committee
</a>
, and{" "}
<a
href="https://cnnpressroom.blogs.cnn.com/"
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
CNN / WarnerMedia
</a>
. &copy; 2016.
</p>
</>
);
export default Page;

136
app/layout.tsx
View File

@@ -1,82 +1,80 @@
import { ViewTransition } from "react";
import { env } from "@/lib/env";
import { JsonLd } from "react-schemaorg";
import { Providers } from "@/components/providers";
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import { Toaster } from "@/components/ui/sonner";
import { Analytics } from "@/app/analytics";
import { defaultMetadata } from "@/lib/metadata";
import { Inter, JetBrainsMono } from "@/lib/fonts";
import siteConfig from "@/lib/config/site";
import authorConfig from "@/lib/config/author";
import type { Person, WebSite } from "schema-dts";
import { Analytics } from "@/app/analytics";
import { Footer } from "@/components/layout/footer";
import { Header } from "@/components/layout/header";
import { Providers } from "@/components/providers";
import { Toaster } from "@/components/ui/sonner";
import authorConfig from "@/lib/config/author";
import siteConfig from "@/lib/config/site";
import { env } from "@/lib/env";
import { Inter, JetBrainsMono } from "@/lib/fonts";
import { defaultMetadata } from "@/lib/metadata";
import "./globals.css";
export const metadata = defaultMetadata;
const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
<html
lang={env.NEXT_PUBLIC_SITE_LOCALE}
className={`${Inter.variable} ${JetBrainsMono.variable}`}
suppressHydrationWarning
>
<head>
<JsonLd<Person>
item={{
"@context": "https://schema.org",
"@type": "Person",
"@id": `${env.NEXT_PUBLIC_BASE_URL}/#person`,
name: authorConfig.name,
url: env.NEXT_PUBLIC_BASE_URL,
image: [`${env.NEXT_PUBLIC_BASE_URL}/opengraph-image.jpg`],
sameAs: [
env.NEXT_PUBLIC_BASE_URL,
`https://${authorConfig.social?.mastodon}`,
`https://github.com/${authorConfig.social?.github}`,
`https://bsky.app/profile/${authorConfig.social?.bluesky}`,
`https://twitter.com/${authorConfig.social?.twitter}`,
`https://medium.com/@${authorConfig.social?.medium}`,
`https://www.linkedin.com/in/${authorConfig.social?.linkedin}/`,
`https://www.facebook.com/${authorConfig.social?.facebook}`,
`https://www.instagram.com/${authorConfig.social?.instagram}/`,
],
}}
/>
const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => (
<html
lang={env.NEXT_PUBLIC_SITE_LOCALE}
className={`${Inter.variable} ${JetBrainsMono.variable}`}
suppressHydrationWarning
>
<head>
<JsonLd<Person>
item={{
"@context": "https://schema.org",
"@type": "Person",
"@id": `${env.NEXT_PUBLIC_BASE_URL}/#person`,
name: authorConfig.name,
url: env.NEXT_PUBLIC_BASE_URL,
image: [`${env.NEXT_PUBLIC_BASE_URL}/opengraph-image.jpg`],
sameAs: [
env.NEXT_PUBLIC_BASE_URL,
`https://${authorConfig.social?.mastodon}`,
`https://github.com/${authorConfig.social?.github}`,
`https://bsky.app/profile/${authorConfig.social?.bluesky}`,
`https://twitter.com/${authorConfig.social?.twitter}`,
`https://medium.com/@${authorConfig.social?.medium}`,
`https://www.linkedin.com/in/${authorConfig.social?.linkedin}/`,
`https://www.facebook.com/${authorConfig.social?.facebook}`,
`https://www.instagram.com/${authorConfig.social?.instagram}/`,
],
}}
/>
<JsonLd<WebSite>
item={{
"@context": "https://schema.org",
"@type": "WebSite",
"@id": `${env.NEXT_PUBLIC_BASE_URL}/#website`,
name: siteConfig.name,
url: env.NEXT_PUBLIC_BASE_URL,
author: authorConfig.name,
description: siteConfig.description,
inLanguage: env.NEXT_PUBLIC_SITE_LOCALE,
license: `https://spdx.org/licenses/${siteConfig.license}.html`,
}}
/>
</head>
<JsonLd<WebSite>
item={{
"@context": "https://schema.org",
"@type": "WebSite",
"@id": `${env.NEXT_PUBLIC_BASE_URL}/#website`,
name: siteConfig.name,
url: env.NEXT_PUBLIC_BASE_URL,
author: authorConfig.name,
description: siteConfig.description,
inLanguage: env.NEXT_PUBLIC_SITE_LOCALE,
license: `https://spdx.org/licenses/${siteConfig.license}.html`,
}}
/>
</head>
<body className="bg-background text-foreground font-sans antialiased">
<Providers>
<Header />
<div className="mx-auto mt-4 w-full max-w-4xl px-5">
<main>
<ViewTransition>{children}</ViewTransition>
</main>
</div>
<Footer />
<body className="bg-background font-sans text-foreground antialiased">
<Providers>
<Header />
<div className="mx-auto mt-4 w-full max-w-4xl px-5">
<main>
<ViewTransition>{children}</ViewTransition>
</main>
</div>
<Footer />
<Toaster position="bottom-center" hotkey={[]} />
<Analytics />
</Providers>
</body>
</html>
);
};
<Toaster position="bottom-center" hotkey={[]} />
<Analytics />
</Providers>
</body>
</html>
);
export default RootLayout;

98
app/leo/page.tsx
View File

@@ -1,9 +1,9 @@
import { env } from "@/lib/env";
import { JsonLd } from "react-schemaorg";
import type { VideoObject } from "schema-dts";
import { PageTitle } from "@/components/layout/page-title";
import { Video } from "@/components/video";
import { env } from "@/lib/env";
import { createMetadata } from "@/lib/metadata";
import type { VideoObject } from "schema-dts";
import thumbnail from "./thumbnail.png";
@@ -21,52 +21,56 @@ export const metadata = createMetadata({
},
});
const Page = () => {
return (
<>
<JsonLd<VideoObject>
item={{
"@context": "https://schema.org",
"@type": "VideoObject",
name: metadata.title as string,
description: metadata.description as string,
contentUrl: "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-uoCXHS9gViyRnQhr8CEGXFvj4VGh5Y.webm",
thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/leo`,
uploadDate: "2007-05-10T00:00:00Z",
duration: "PT1M48S",
}}
/>
<PageTitle canonical="/leo">TheLab.mov</PageTitle>
<Video
src={[
const Page = () => (
<>
<JsonLd<VideoObject>
item={{
"@context": "https://schema.org",
"@type": "VideoObject",
name: metadata.title as string,
description: metadata.description as string,
contentUrl:
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-uoCXHS9gViyRnQhr8CEGXFvj4VGh5Y.webm",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-Blp1bsf872vuY05LuSw7fjZBHURWT1.mp4",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo.en-TsoyI7XMA10Uaj8EFZV1bQ65At35gz.vtt",
]}
poster={thumbnail.src}
/>
thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/leo`,
uploadDate: "2007-05-10T00:00:00Z",
duration: "PT1M48S",
}}
/>
<p className="text-muted-foreground mx-4 mt-5 mb-0 text-center text-sm leading-relaxed">
Video is property of{" "}
<a
href="https://web.archive.org/web/20070511004304/www.g4techtv.ca"
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
G4techTV Canada
</a>{" "}
&amp;{" "}
<a href="https://leo.fm/" target="_blank" rel="noopener noreferrer" className="font-bold">
Leo Laporte
</a>
. &copy; 2007 G4 Media, Inc.
</p>
</>
);
};
<PageTitle canonical="/leo">TheLab.mov</PageTitle>
<Video
src={[
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-uoCXHS9gViyRnQhr8CEGXFvj4VGh5Y.webm",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-Blp1bsf872vuY05LuSw7fjZBHURWT1.mp4",
"https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo.en-TsoyI7XMA10Uaj8EFZV1bQ65At35gz.vtt",
]}
poster={thumbnail.src}
/>
<p className="mx-4 mt-5 mb-0 text-center text-muted-foreground text-sm leading-relaxed">
Video is property of{" "}
<a
href="https://web.archive.org/web/20070511004304/www.g4techtv.ca"
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
G4techTV Canada
</a>{" "}
&amp;{" "}
<a
href="https://leo.fm/"
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
Leo Laporte
</a>
. &copy; 2007 G4 Media, Inc.
</p>
</>
);
export default Page;

4
app/manifest.ts
View File

@@ -1,6 +1,6 @@
import { env } from "@/lib/env";
import siteConfig from "@/lib/config/site";
import type { MetadataRoute } from "next";
import siteConfig from "@/lib/config/site";
import { env } from "@/lib/env";
const manifest = (): MetadataRoute.Manifest => {
return {

38
app/not-found.tsx
View File

@@ -1,7 +1,7 @@
import type { Metadata } from "next";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Video } from "@/components/video";
import Link from "next/link";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Page Not Found",
@@ -12,24 +12,24 @@ export const metadata: Metadata = {
},
};
const Page = () => {
return (
<>
<Video
src="https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/not-found-SAtLyNyc7gVhveYxr6o1ITd9CSXo5X.mp4"
autoPlay
className="mt-6 aspect-[16/11] max-w-[480px] rounded-lg"
/>
const Page = () => (
<>
<Video
src="https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/not-found-SAtLyNyc7gVhveYxr6o1ITd9CSXo5X.mp4"
autoPlay
className="mt-6 aspect-[16/11] max-w-[480px] rounded-lg"
/>
<div className="mt-6 text-center">
<h1 className="my-2 text-2xl font-semibold md:text-3xl">Page Not Found</h1>
<div className="mt-6 text-center">
<h1 className="my-2 font-semibold text-2xl md:text-3xl">
Page Not Found
</h1>
<Button className="mt-4 mb-0 text-[15px] leading-none" size="lg" asChild>
<Link href="/">Go home?</Link>
</Button>
</div>
</>
);
};
<Button className="mt-4 mb-0 text-[15px] leading-none" size="lg" asChild>
<Link href="/">Go home?</Link>
</Button>
</div>
</>
);
export default Page;

62
app/notes/[slug]/opengraph-image.tsx
View File

@@ -1,11 +1,11 @@
import { env } from "@/lib/env";
import path from "path";
import fs from "fs";
import { ImageResponse } from "next/og";
import fs from "node:fs";
import path from "node:path";
import { notFound } from "next/navigation";
import { getSlugs, getFrontMatter, POSTS_DIR } from "@/lib/posts";
import { ImageResponse } from "next/og";
import siteConfig from "@/lib/config/site";
import { env } from "@/lib/env";
import { loadGoogleFont } from "@/lib/og-utils";
import { getFrontMatter, getSlugs, POSTS_DIR } from "@/lib/posts";
export const contentType = "image/png";
export const size = {
@@ -31,7 +31,9 @@ const getLocalImage = async (src: string): Promise<ArrayBuffer | string> => {
try {
if (!fs.existsSync(imagePath)) {
console.error(`[/notes/[slug]/opengraph-image] couldn't find an image file located at "${imagePath}"`);
console.error(
`[/notes/[slug]/opengraph-image] couldn't find an image file located at "${imagePath}"`,
);
// return a 1x1 transparent gif if the image doesn't exist instead of crashing
return NO_IMAGE;
@@ -40,27 +42,40 @@ const getLocalImage = async (src: string): Promise<ArrayBuffer | string> => {
// return the raw image data as a buffer
return Uint8Array.from(await fs.promises.readFile(imagePath)).buffer;
} catch (error) {
console.error(`[/notes/[slug]/opengraph-image] found "${imagePath}" but couldn't read it:`, error);
console.error(
`[/notes/[slug]/opengraph-image] found "${imagePath}" but couldn't read it:`,
error,
);
// fail silently and return a 1x1 transparent gif instead of crashing
return NO_IMAGE;
}
};
const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> }) => {
const OpenGraphImage = async ({
params,
}: {
params: Promise<{ slug: string }>;
}) => {
try {
const { slug } = await params;
// get the post's title and image filename from its frontmatter
const frontmatter = await getFrontMatter(slug);
if (!frontmatter) notFound();
// IMPORTANT: include these exact paths in next.config.ts under "outputFileTracingIncludes"
const [postImg, avatarImg] = await Promise.all([
frontmatter!.image ? getLocalImage(`${POSTS_DIR}/${slug}/${frontmatter!.image}`) : null,
frontmatter.image
? getLocalImage(`${POSTS_DIR}/${slug}/${frontmatter.image}`)
: null,
getLocalImage("app/avatar.jpg"),
]);
const [fontRegular, fontSemibold] = await Promise.all([loadGoogleFont("Inter", 400), loadGoogleFont("Inter", 600)]);
const [fontRegular, fontSemibold] = await Promise.all([
loadGoogleFont("Inter", 400),
loadGoogleFont("Inter", 600),
]);
// template is HEAVILY inspired by https://og-new.clerkstage.dev/
return new ImageResponse(
@@ -69,7 +84,8 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
...size,
display: "flex",
flexDirection: "column",
background: "linear-gradient(to top right, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234))",
background:
"linear-gradient(to top right, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234))",
}}
>
<div
@@ -123,6 +139,7 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
}}
>
{avatarImg && (
// biome-ignore lint/performance/noImgElement: Satori/ImageResponse requires raw <img> tags
<img
// @ts-expect-error
src={avatarImg}
@@ -158,7 +175,7 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
lineHeight: "1.2",
}}
>
{frontmatter!.title}
{frontmatter.title}
</div>
<div
@@ -196,11 +213,14 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
lineHeight: "1.2",
}}
>
{new Date(frontmatter!.date).toLocaleDateString(env.NEXT_PUBLIC_SITE_LOCALE, {
year: "numeric",
month: "long",
day: "numeric",
})}
{new Date(frontmatter.date).toLocaleDateString(
env.NEXT_PUBLIC_SITE_LOCALE,
{
year: "numeric",
month: "long",
day: "numeric",
},
)}
</div>
</div>
@@ -212,6 +232,7 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
flexGrow: 0,
}}
>
{/* biome-ignore lint/performance/noImgElement: Satori/ImageResponse requires raw <img> tags */}
<img
// @ts-expect-error
src={postImg}
@@ -242,10 +263,13 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
weight: 600,
},
],
}
},
);
} catch (error) {
console.error("[/notes/[slug]/opengraph-image] error generating open graph image:", error);
console.error(
"[/notes/[slug]/opengraph-image] error generating open graph image:",
error,
);
notFound();
}
};

141
app/notes/[slug]/page.tsx
View File

@@ -1,19 +1,26 @@
import { env } from "@/lib/env";
import { Suspense } from "react";
import {
CalendarDaysIcon,
EyeIcon,
MessagesSquareIcon,
SquarePenIcon,
TagIcon,
} from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Suspense } from "react";
import { JsonLd } from "react-schemaorg";
import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon, MessagesSquareIcon } from "lucide-react";
import { ViewCounter } from "@/components/view-counter";
import type { BlogPosting } from "schema-dts";
import { CommentCount } from "@/components/comment-count";
import { Comments } from "@/components/comments/comments";
import { CommentsSkeleton } from "@/components/comments/comments-skeleton";
import { getSlugs, getFrontMatter, POSTS_DIR } from "@/lib/posts";
import { createMetadata } from "@/lib/metadata";
import siteConfig from "@/lib/config/site";
import { ViewCounter } from "@/components/view-counter";
import authorConfig from "@/lib/config/author";
import siteConfig from "@/lib/config/site";
import { env } from "@/lib/env";
import { createMetadata } from "@/lib/metadata";
import { getFrontMatter, getSlugs, POSTS_DIR } from "@/lib/posts";
import { size as ogImageSize } from "./opengraph-image";
import type { Metadata } from "next";
import type { BlogPosting } from "schema-dts";
export const generateStaticParams = async () => {
const slugs = await getSlugs();
@@ -24,20 +31,24 @@ export const generateStaticParams = async () => {
}));
};
export const generateMetadata = async ({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> => {
export const generateMetadata = async ({
params,
}: {
params: Promise<{ slug: string }>;
}): Promise<Metadata> => {
const { slug } = await params;
const frontmatter = await getFrontMatter(slug);
return createMetadata({
title: frontmatter!.title,
description: frontmatter!.description,
title: frontmatter?.title,
description: frontmatter?.description,
canonical: `/${POSTS_DIR}/${slug}`,
openGraph: {
type: "article",
authors: [authorConfig.name],
tags: frontmatter!.tags,
publishedTime: frontmatter!.date,
modifiedTime: frontmatter!.date,
tags: frontmatter?.tags,
publishedTime: frontmatter?.date,
modifiedTime: frontmatter?.date,
},
twitter: {
card: "summary_large_image",
@@ -48,7 +59,8 @@ export const generateMetadata = async ({ params }: { params: Promise<{ slug: str
const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
const { slug } = await params;
const frontmatter = await getFrontMatter(slug);
const d = new Date(frontmatter!.date);
if (!frontmatter) notFound();
const d = new Date(frontmatter.date);
const formattedDates = {
dateISO: d.toISOString(),
@@ -60,10 +72,16 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
minute: "2-digit",
timeZoneName: "short",
}),
dateDisplay: d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }),
dateDisplay: d.toLocaleDateString("en-US", {
month: "long",
day: "numeric",
year: "numeric",
}),
};
const { default: MDXContent } = await import(`../../../${POSTS_DIR}/${slug}/index.mdx`);
const { default: MDXContent } = await import(
`../../../${POSTS_DIR}/${slug}/index.mdx`
);
return (
<>
@@ -71,18 +89,18 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
item={{
"@context": "https://schema.org",
"@type": "BlogPosting",
headline: frontmatter!.title,
description: frontmatter!.description,
url: frontmatter!.permalink,
headline: frontmatter?.title,
description: frontmatter?.description,
url: frontmatter?.permalink,
image: {
"@type": "ImageObject",
contentUrl: `${env.NEXT_PUBLIC_BASE_URL}/${POSTS_DIR}/${frontmatter!.slug}/opengraph-image`,
contentUrl: `${env.NEXT_PUBLIC_BASE_URL}/${POSTS_DIR}/${frontmatter?.slug}/opengraph-image`,
width: `${ogImageSize.width}`,
height: `${ogImageSize.height}`,
},
keywords: frontmatter!.tags?.join(", "),
datePublished: frontmatter!.date,
dateModified: frontmatter!.date,
keywords: frontmatter?.tags?.join(", "),
datePublished: frontmatter?.date,
dateModified: frontmatter?.date,
inLanguage: env.NEXT_PUBLIC_SITE_LOCALE,
license: `https://spdx.org/licenses/${siteConfig.license}.html`,
author: {
@@ -92,26 +110,34 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
}}
/>
<div className="text-foreground/70 flex flex-wrap justify-items-start gap-4 text-[13px] tracking-wide">
<div className="flex flex-wrap justify-items-start gap-4 text-[13px] text-foreground/70 tracking-wide">
<Link
href={`/${POSTS_DIR}/${frontmatter!.slug}`}
className={"text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"}
href={`/${POSTS_DIR}/${frontmatter?.slug}`}
className={
"flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-foreground/70 hover:no-underline"
}
>
<CalendarDaysIcon className="inline size-3 shrink-0" aria-hidden="true" />
<time dateTime={formattedDates.dateISO} title={formattedDates.dateTitle} suppressHydrationWarning>
<CalendarDaysIcon
className="inline size-3 shrink-0"
aria-hidden="true"
/>
<time
dateTime={formattedDates.dateISO}
title={formattedDates.dateTitle}
suppressHydrationWarning
>
{formattedDates.dateDisplay}
</time>
</Link>
{frontmatter!.tags && (
{frontmatter?.tags && (
<div className="flex flex-wrap items-center gap-1.5">
<TagIcon className="inline size-3 shrink-0" aria-hidden="true" />
{frontmatter!.tags.map((tag) => (
{frontmatter?.tags.map((tag) => (
<span
key={tag}
title={tag}
className="before:text-foreground/40 mx-px lowercase before:pr-0.5 before:content-['\0023'] first-of-type:ml-0 last-of-type:mr-0"
aria-label={`Tagged with ${tag}`}
className="mx-px lowercase before:pr-0.5 before:text-foreground/40 before:content-['\0023'] first-of-type:ml-0 last-of-type:mr-0"
>
{tag}
</span>
@@ -120,35 +146,46 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
)}
<Link
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
title={`Edit "${frontmatter!.title}" on GitHub`}
className={"text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"}
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter?.slug}/index.mdx`}
title={`Edit "${frontmatter?.title}" on GitHub`}
className={
"flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-foreground/70 hover:no-underline"
}
>
<SquarePenIcon className="inline size-3 shrink-0" aria-hidden="true" />
<SquarePenIcon
className="inline size-3 shrink-0"
aria-hidden="true"
/>
<span>Improve This Post</span>
</Link>
<Link
href={`/${POSTS_DIR}/${frontmatter!.slug}#comments`}
className="text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"
href={`/${POSTS_DIR}/${frontmatter?.slug}#comments`}
className="flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-foreground/70 hover:no-underline"
>
<MessagesSquareIcon className="inline size-3 shrink-0" aria-hidden="true" />
<CommentCount slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
<MessagesSquareIcon
className="inline size-3 shrink-0"
aria-hidden="true"
/>
<CommentCount slug={`${POSTS_DIR}/${frontmatter?.slug}`} />
</Link>
<div className="flex min-w-14 flex-nowrap items-center gap-1.5 whitespace-nowrap">
<EyeIcon className="inline size-3 shrink-0" aria-hidden="true" />
<ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
<ViewCounter slug={`${POSTS_DIR}/${frontmatter?.slug}`} />
</div>
</div>
<h1
className="my-5 text-3xl font-medium tracking-tight"
style={{ viewTransitionName: `note-title-${frontmatter!.slug}` }}
className="my-5 font-medium text-3xl tracking-tight"
style={{ viewTransitionName: `note-title-${frontmatter?.slug}` }}
>
<Link
href={`/${POSTS_DIR}/${frontmatter!.slug}`}
dangerouslySetInnerHTML={{ __html: frontmatter!.htmlTitle || frontmatter!.title }}
href={`/${POSTS_DIR}/${frontmatter?.slug}`}
// biome-ignore lint/security/noDangerouslySetInnerHtml: htmlTitle is sanitized by rehypeSanitize in lib/posts.ts
dangerouslySetInnerHTML={{
__html: frontmatter.htmlTitle || frontmatter.title,
}}
className="text-foreground hover:no-underline"
/>
</h1>
@@ -157,13 +194,15 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
<section id="comments" className="isolate my-8 w-full border-t-2 pt-8">
<div className="mx-auto w-full max-w-3xl space-y-6">
{frontmatter!.noComments ? (
<div className="bg-muted/40 flex justify-center rounded-lg px-6 py-12">
<p className="text-center text-lg font-medium">Comments are closed.</p>
{frontmatter?.noComments ? (
<div className="flex justify-center rounded-lg bg-muted/40 px-6 py-12">
<p className="text-center font-medium text-lg">
Comments are closed.
</p>
</div>
) : (
<Suspense fallback={<CommentsSkeleton />}>
<Comments slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
<Comments slug={`${POSTS_DIR}/${frontmatter?.slug}`} />
</Suspense>
)}
</div>

87
app/notes/page.tsx
View File

@@ -1,9 +1,9 @@
import Link from "next/link";
import { PageTitle } from "@/components/layout/page-title";
import { PostStats, PostStatsProvider } from "@/components/post-stats";
import { getFrontMatter, POSTS_DIR, type FrontMatter } from "@/lib/posts";
import { createMetadata } from "@/lib/metadata";
import authorConfig from "@/lib/config/author";
import { createMetadata } from "@/lib/metadata";
import { type FrontMatter, getFrontMatter, POSTS_DIR } from "@/lib/posts";
export const metadata = createMetadata({
title: "Notes",
@@ -28,7 +28,10 @@ const PostsList = async () => {
minute: "2-digit",
timeZoneName: "short",
}),
dateDisplay: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
dateDisplay: d.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
}),
};
});
@@ -41,41 +44,53 @@ const PostsList = async () => {
})[];
} = {};
formattedPosts.forEach((post) => {
(postsByYear[post.year] || (postsByYear[post.year] = [])).push(post);
});
for (const post of formattedPosts) {
if (!postsByYear[post.year]) {
postsByYear[post.year] = [];
}
postsByYear[post.year].push(post);
}
const sections: React.ReactNode[] = [];
Object.entries(postsByYear).forEach(([year, posts]) => {
sections.push(
<section className="my-8 first-of-type:mt-0 last-of-type:mb-0" key={year}>
<h2 id={year} className="mt-0 mb-4 text-2xl font-semibold tracking-tight">
<h2
id={year}
className="mt-0 mb-4 font-semibold text-2xl tracking-tight"
>
{year}
</h2>
<ul className="space-y-4">
{posts.map(({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle }) => (
<li className="flex text-base leading-relaxed" key={slug}>
<span className="text-muted-foreground w-18 shrink-0 md:w-22">
<time dateTime={dateISO} title={dateTitle} suppressHydrationWarning>
{dateDisplay}
</time>
</span>
<div className="space-x-2">
{/* htmlTitle is sanitized by rehypeSanitize in lib/posts.ts with strict allowlist: only code, em, strong tags */}
<Link
href={`/${POSTS_DIR}/${slug}`}
dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
className="mr-2.5 underline-offset-4 hover:underline"
style={{ viewTransitionName: `note-title-${slug}` }}
/>
{posts.map(
({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle }) => (
<li className="flex text-base leading-relaxed" key={slug}>
<span className="w-18 shrink-0 text-muted-foreground md:w-22">
<time
dateTime={dateISO}
title={dateTitle}
suppressHydrationWarning
>
{dateDisplay}
</time>
</span>
<div className="space-x-2">
<Link
href={`/${POSTS_DIR}/${slug}`}
// biome-ignore lint/security/noDangerouslySetInnerHtml: htmlTitle is sanitized by rehypeSanitize in lib/posts.ts
dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
className="mr-2.5 underline-offset-4 hover:underline"
style={{ viewTransitionName: `note-title-${slug}` }}
/>
<PostStats slug={`${POSTS_DIR}/${slug}`} />
</div>
</li>
))}
<PostStats slug={`${POSTS_DIR}/${slug}`} />
</div>
</li>
),
)}
</ul>
</section>
</section>,
);
});
@@ -83,15 +98,13 @@ const PostsList = async () => {
return <>{sections.reverse()}</>;
};
const Page = async () => {
return (
<>
<PageTitle canonical="/notes">Notes</PageTitle>
<PostStatsProvider>
<PostsList />
</PostStatsProvider>
</>
);
};
const Page = async () => (
<>
<PageTitle canonical="/notes">Notes</PageTitle>
<PostStatsProvider>
<PostsList />
</PostStatsProvider>
</>
);
export default Page;

273
app/page.tsx
View File

@@ -1,140 +1,157 @@
import Link from "next/link";
import { LockIcon } from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
const Page = () => {
return (
<div
className={cn(
"prose prose-neutral dark:prose-invert prose-sm max-w-none",
"prose-headings:font-semibold prose-headings:text-primary prose-headings:tracking-tight prose-headings:mt-0 prose-headings:mb-3",
"prose-p:text-foreground/90 prose-p:my-3 prose-p:leading-[1.75] md:prose-p:leading-relaxed prose-strong:text-primary prose-li:text-foreground/80",
"prose-a:text-primary prose-a:font-medium prose-a:underline prose-a:underline-offset-4",
"prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-[0.9em] prose-code:before:content-none prose-code:after:content-none",
"[&_table]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)]"
)}
>
<h1 className="text-2xl font-medium">
Hi there! I&rsquo;m Jake.{" "}
<span className="motion-safe:animate-wave ml-0.5 inline-block origin-[65%_80%] text-2xl">👋</span>
</h1>
const Page = () => (
<div
className={cn(
"prose prose-neutral dark:prose-invert prose-sm max-w-none",
"prose-headings:mt-0 prose-headings:mb-3 prose-headings:font-semibold prose-headings:text-primary prose-headings:tracking-tight",
"prose-p:my-3 prose-li:text-foreground/80 prose-p:text-foreground/90 prose-strong:text-primary prose-p:leading-[1.75] md:prose-p:leading-relaxed",
"prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4",
"prose-code:rounded-sm prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:text-[0.9em] prose-code:text-foreground prose-code:before:content-none prose-code:after:content-none",
"[&_table]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)]",
)}
>
<h1 className="font-medium text-2xl">
Hi there! I&rsquo;m Jake.{" "}
<span className="ml-0.5 inline-block origin-[65%_80%] text-2xl motion-safe:animate-wave">
👋
</span>
</h1>
<h2 className="font-normal">
I&rsquo;m a frontend web developer based in the{" "}
<Link
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
>
Boston
</Link>{" "}
area.
</h2>
<h2 className="font-normal">
I&rsquo;m a frontend web developer based in the{" "}
<Link
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
>
Boston
</Link>{" "}
area.
</h2>
<p>
I specialize in using TypeScript, React, and Next.js to make lightweight frontends with dynamic and powerful
backends.
</p>
<p>
I specialize in using TypeScript, React, and Next.js to make lightweight
frontends with dynamic and powerful backends.
</p>
<p>
Whenever possible, I also apply my experience in{" "}
<p>
Whenever possible, I also apply my experience in{" "}
<a
href="https://bugcrowd.com/jakejarvis"
title="Jake Jarvis on Bugcrowd"
target="_blank"
rel="noopener noreferrer"
>
information security
</a>{" "}
and{" "}
<a
href="https://github.com/jakejarvis?tab=repositories&q=github-actions&type=&language=&sort=stargazers"
title='My repositories tagged with "github-actions" on GitHub'
target="_blank"
rel="noopener noreferrer"
>
devops
</a>
.
</p>
<p>
I fell in love with{" "}
<Link
href="/previously"
title="My Terrible, Horrible, No Good, Very Bad First Websites"
>
frontend web design
</Link>{" "}
and{" "}
<Link
href="/notes/my-first-code"
title="Jake's Bulletin Board, circa 2003"
>
backend coding
</Link>{" "}
when my only source of income was{" "}
<Link
href="/birthday"
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
style={{
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
}}
className="font-normal no-underline"
>
the Tooth Fairy
</Link>
.{" "}
<span className="text-muted-foreground">
(I&rsquo;ve improved a bit since then, I think?)
</span>
</p>
<p>
I&rsquo;m currently building{" "}
<a
href="https://domainstack.io"
title="Domainstack: Domain intelligence made easy"
className="font-medium"
target="_blank"
rel="noopener noreferrer"
>
Domainstack
</a>
, a beautiful all-in-one domain name intelligence tool, and{" "}
<a
href="https://snoozle.ai"
title="Snoozle: AI-powered bedtime stories for children"
className="font-medium"
target="_blank"
rel="noopener noreferrer"
>
Snoozle
</a>
, an AI-powered bedtime story generator.
</p>
<p className="mt-2 mb-0 text-sm leading-normal">
You can find my work on{" "}
<a
href="https://github.com/jakejarvis"
target="_blank"
rel="noopener noreferrer me"
>
GitHub
</a>{" "}
and{" "}
<a
href="https://www.linkedin.com/in/jakejarvis/"
target="_blank"
rel="noopener noreferrer me"
>
LinkedIn
</a>
. I&rsquo;m always available to connect over{" "}
<Link href="/contact" title="Send an email">
email
</Link>{" "}
<sup className="">
<a
href="https://bugcrowd.com/jakejarvis"
title="Jake Jarvis on Bugcrowd"
href="https://keyoxide.org/hkp/3bc6e5776bf379d36f6714802b0c9cf251e69a39"
target="_blank"
rel="noopener noreferrer"
rel="noopener pgpkey"
title="Download my PGP key"
className="not-prose space-x-1 text-nowrap px-0.5 text-muted-foreground no-underline hover:text-primary hover:no-underline"
>
information security
</a>{" "}
and{" "}
<a
href="https://github.com/jakejarvis?tab=repositories&q=github-actions&type=&language=&sort=stargazers"
title='My repositories tagged with "github-actions" on GitHub'
target="_blank"
rel="noopener noreferrer"
>
devops
<LockIcon className="inline size-2.5" aria-hidden="true" />
<code className="text-wrap text-[9px] leading-none tracking-wider [word-spacing:-3px]">
2B0C 9CF2 51E6 9A39
</code>
</a>
.
</p>
<p>
I fell in love with{" "}
<Link href="/previously" title="My Terrible, Horrible, No Good, Very Bad First Websites">
frontend web design
</Link>{" "}
and{" "}
<Link href="/notes/my-first-code" title="Jake's Bulletin Board, circa 2003">
backend coding
</Link>{" "}
when my only source of income was{" "}
<Link
href="/birthday"
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
style={{
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
}}
className="font-normal no-underline"
>
the Tooth Fairy
</Link>
. <span className="text-muted-foreground">(I&rsquo;ve improved a bit since then, I think?)</span>
</p>
<p>
I&rsquo;m currently building{" "}
<a
href="https://domainstack.io"
title="Domainstack: Domain intelligence made easy"
className="font-medium"
target="_blank"
rel="noopener noreferrer"
>
Domainstack
</a>
, a beautiful all-in-one domain name intelligence tool, and{" "}
<a
href="https://snoozle.ai"
title="Snoozle: AI-powered bedtime stories for children"
className="font-medium"
target="_blank"
rel="noopener noreferrer"
>
Snoozle
</a>
, an AI-powered bedtime story generator.
</p>
<p className="mt-2 mb-0 text-sm leading-normal">
You can find my work on{" "}
<a href="https://github.com/jakejarvis" target="_blank" rel="noopener noreferrer me">
GitHub
</a>{" "}
and{" "}
<a href="https://www.linkedin.com/in/jakejarvis/" target="_blank" rel="noopener noreferrer me">
LinkedIn
</a>
. I&rsquo;m always available to connect over{" "}
<Link href="/contact" title="Send an email">
email
</Link>{" "}
<sup className="">
<a
href="https://keyoxide.org/hkp/3bc6e5776bf379d36f6714802b0c9cf251e69a39"
target="_blank"
rel="noopener pgpkey"
title="Download my PGP key"
className="not-prose text-muted-foreground hover:text-primary space-x-1 px-0.5 text-nowrap no-underline hover:no-underline"
>
<LockIcon className="inline size-2.5" aria-hidden="true" />
<code className="text-[9px] leading-none tracking-wider text-wrap [word-spacing:-3px]">
2B0C 9CF2 51E6 9A39
</code>
</a>
</sup>{" "}
as well.
</p>
</div>
);
};
</sup>{" "}
as well.
</p>
</div>
);
export default Page;

33
app/projects/github.ts
View File

@@ -1,10 +1,10 @@
import "server-only";
import { env } from "@/lib/env";
import { cacheLife } from "next/cache";
import * as cheerio from "cheerio";
import { graphql } from "@octokit/graphql";
import type { Repository, User } from "@octokit/graphql-schema";
import * as cheerio from "cheerio";
import { cacheLife } from "next/cache";
import { env } from "@/lib/env";
export const getContributions = async (): Promise<
Array<{
@@ -18,12 +18,15 @@ export const getContributions = async (): Promise<
// thanks @grubersjoe! :) https://github.com/grubersjoe/github-contributions-api/blob/main/src/scrape.ts
try {
const response = await fetch(`https://github.com/users/${env.NEXT_PUBLIC_GITHUB_USERNAME}/contributions`, {
headers: {
referer: `https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`,
"x-requested-with": "XMLHttpRequest",
const response = await fetch(
`https://github.com/users/${env.NEXT_PUBLIC_GITHUB_USERNAME}/contributions`,
{
headers: {
referer: `https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`,
"x-requested-with": "XMLHttpRequest",
},
},
});
);
const $ = cheerio.load(await response.text());
@@ -38,15 +41,15 @@ export const getContributions = async (): Promise<
const dayTooltips = $(".js-calendar-graph tool-tip")
.toArray()
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// biome-ignore lint/suspicious/noExplicitAny: cheerio DOM element map
.reduce<Record<string, any>>((map, elem) => {
map[elem.attribs["for"]] = elem;
map[elem.attribs.for] = elem;
return map;
}, {});
return days.map((day) => {
const attr = {
id: day.attribs["id"],
id: day.attribs.id,
date: day.attribs["data-date"],
level: day.attribs["data-level"],
};
@@ -57,12 +60,12 @@ export const getContributions = async (): Promise<
if (text) {
const countMatch = text.data.trim().match(/^\d+/);
if (countMatch) {
count = parseInt(countMatch[0]);
count = parseInt(countMatch[0], 10);
}
}
}
const level = parseInt(attr.level);
const level = parseInt(attr.level, 10);
return {
date: attr.date,
@@ -120,10 +123,10 @@ export const getRepos = async (): Promise<Repository[] | undefined> => {
accept: "application/vnd.github.v3+json",
authorization: `token ${env.GITHUB_TOKEN}`,
},
}
},
);
return user.repositories.edges?.map((edge) => edge!.node as Repository);
return user.repositories.edges?.map((edge) => edge?.node as Repository);
} catch (error) {
console.error("[server/github] Failed to fetch repositories:", error);
return [];

115
app/projects/page.tsx
View File

@@ -1,16 +1,16 @@
import { env } from "@/lib/env";
import { Suspense } from "react";
import { notFound } from "next/navigation";
import { GitForkIcon, StarIcon } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { PageTitle } from "@/components/layout/page-title";
import { RelativeTime } from "@/components/relative-time";
import { notFound } from "next/navigation";
import { Suspense } from "react";
import { ActivityCalendar } from "@/components/activity-calendar";
import { GitHubIcon } from "@/components/icons";
import { cn } from "@/lib/utils";
import { createMetadata } from "@/lib/metadata";
import { getContributions, getRepos } from "./github";
import { PageTitle } from "@/components/layout/page-title";
import { RelativeTime } from "@/components/relative-time";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { env } from "@/lib/env";
import { createMetadata } from "@/lib/metadata";
import { cn } from "@/lib/utils";
import { getContributions, getRepos } from "./github";
export const metadata = createMetadata({
title: "Projects",
@@ -22,18 +22,23 @@ const Page = async () => {
// don't fail the entire site build if the required config for this page is missing, just return a 404 since this page
// would be mostly blank anyways.
if (!env.GITHUB_TOKEN) {
console.error("[/projects] I can't fetch anything from GitHub without 'GITHUB_TOKEN' set!");
console.error(
"[/projects] I can't fetch anything from GitHub without 'GITHUB_TOKEN' set!",
);
notFound();
}
// fetch the repos and contributions in parallel
const [contributions, repos] = await Promise.all([getContributions(), getRepos()]);
const [contributions, repos] = await Promise.all([
getContributions(),
getRepos(),
]);
return (
<>
<PageTitle canonical="/projects">Projects</PageTitle>
<h2 className="my-3.5 text-xl font-medium">
<h2 className="my-3.5 font-medium text-xl">
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`}
target="_blank"
@@ -50,11 +55,13 @@ const Page = async () => {
<ActivityCalendar data={contributions} noun="contribution" />
</div>
) : (
<p className="text-muted-foreground my-4 text-center">Unable to load contribution data at this time.</p>
<p className="my-4 text-center text-muted-foreground">
Unable to load contribution data at this time.
</p>
)}
</Suspense>
<h2 className="my-3.5 text-xl font-medium">
<h2 className="my-3.5 font-medium text-xl">
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}?tab=repositories&sort=stargazers`}
target="_blank"
@@ -68,61 +75,85 @@ const Page = async () => {
{repos && repos.length > 0 ? (
<div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
{repos.map((repo) => (
<div key={repo!.name} className="border-ring/30 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3 shadow-xs">
<div
key={repo?.name}
className="h-fit space-y-1.5 rounded-2xl border-1 border-ring/30 px-4 py-3 shadow-xs"
>
<a
href={repo!.url}
href={repo?.url}
target="_blank"
rel="noopener noreferrer"
className="inline-block text-base leading-relaxed font-semibold text-[#0969da] hover:underline dark:text-[#4493f8]"
className="inline-block font-semibold text-[#0969da] text-base leading-relaxed hover:underline dark:text-[#4493f8]"
>
{repo!.name}
{repo?.name}
</a>
{repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
{repo?.description && (
<p className="text-foreground/85 text-sm leading-relaxed">
{repo?.description}
</p>
)}
<div className="flex flex-wrap gap-x-4 text-[0.825rem] leading-loose whitespace-nowrap">
{repo!.primaryLanguage && (
<div className="text-muted-foreground inline-flex flex-nowrap items-center gap-2">
{repo!.primaryLanguage.color && (
<div className="flex flex-wrap gap-x-4 whitespace-nowrap text-[0.825rem] leading-loose">
{repo?.primaryLanguage && (
<div className="inline-flex flex-nowrap items-center gap-2 text-muted-foreground">
{repo?.primaryLanguage.color && (
<span
className="inline-block size-4 rounded-full bg-[var(--language-color)]"
style={{ ["--language-color" as string]: repo!.primaryLanguage.color }}
style={{
["--language-color" as string]:
repo?.primaryLanguage.color,
}}
/>
)}
<span>{repo!.primaryLanguage.name}</span>
<span>{repo?.primaryLanguage.name}</span>
</div>
)}
{repo!.stargazerCount > 0 && (
{repo?.stargazerCount > 0 && (
<a
href={`${repo!.url}/stargazers`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
href={`${repo?.url}/stargazers`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo?.stargazerCount)} ${repo?.stargazerCount === 1 ? "star" : "stars"}`}
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
className="inline-flex flex-nowrap items-center gap-2 text-muted-foreground hover:text-primary hover:no-underline"
>
<StarIcon className="inline-block size-4 shrink-0" aria-hidden="true" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
<StarIcon
className="inline-block size-4 shrink-0"
aria-hidden="true"
/>
<span>
{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(
repo?.stargazerCount,
)}
</span>
</a>
)}
{repo!.forkCount > 0 && (
{repo?.forkCount > 0 && (
<a
href={`${repo!.url}/network/members`}
href={`${repo?.url}/network/members`}
target="_blank"
rel="noopener noreferrer"
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo?.forkCount)} ${repo?.forkCount === 1 ? "fork" : "forks"}`}
className="inline-flex flex-nowrap items-center gap-2 text-muted-foreground hover:text-primary hover:no-underline"
>
<GitForkIcon className="inline-block size-4" aria-hidden="true" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
<GitForkIcon
className="inline-block size-4"
aria-hidden="true"
/>
<span>
{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(
repo?.forkCount,
)}
</span>
</a>
)}
<div className="text-muted-foreground whitespace-nowrap">
<div className="whitespace-nowrap text-muted-foreground">
<Suspense fallback={null}>
<span>
Updated <RelativeTime date={repo!.pushedAt} />
Updated <RelativeTime date={repo?.pushedAt} />
</span>
</Suspense>
</div>
@@ -131,10 +162,12 @@ const Page = async () => {
))}
</div>
) : (
<p className="text-muted-foreground my-4 text-center">Unable to load repository data at this time.</p>
<p className="my-4 text-center text-muted-foreground">
Unable to load repository data at this time.
</p>
)}
<p className="mt-6 mb-0 text-center text-base font-medium">
<p className="mt-6 mb-0 text-center font-medium text-base">
<Button variant="secondary" asChild>
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}?tab=repositories&type=source&sort=stargazers`}

2
app/robots.ts
View File

@@ -1,5 +1,5 @@
import { env } from "@/lib/env";
import type { MetadataRoute } from "next";
import { env } from "@/lib/env";
const robots = (): MetadataRoute.Robots => ({
rules: [

6
app/sitemap.ts
View File

@@ -1,8 +1,8 @@
import { env } from "@/lib/env";
import path from "path";
import path from "node:path";
import glob from "fast-glob";
import { getFrontMatter } from "@/lib/posts";
import type { MetadataRoute } from "next";
import { env } from "@/lib/env";
import { getFrontMatter } from "@/lib/posts";
// routes in /app (in other words, directories containing a page.tsx/mdx file) are automatically included; add a route
// here to exclude it.

81
biome.json Normal file
View File

@@ -0,0 +1,81 @@
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": false
},
"files": {
"ignoreUnknown": true,
"includes": [
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx",
"**/*.mts",
"**/*.mjs",
"**/*.json",
"!**/node_modules",
"!**/.next",
"!**/.swc",
"!**/.vercel",
"!**/drizzle",
"!**/public"
]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80
},
"linter": {
"enabled": true,
"domains": {
"next": "recommended",
"react": "recommended"
},
"rules": {
"recommended": true,
"correctness": {
"useExhaustiveDependencies": "warn"
},
"suspicious": {
"noUnknownAtRules": "off"
},
"a11y": {
"noSvgWithoutTitle": "off",
"useAnchorContent": "off",
"useSemanticElements": "off"
},
"style": {
"useConsistentArrowReturn": "error"
},
"nursery": {
"useSortedClasses": {
"level": "error",
"options": {
"attributes": ["classList"],
"functions": ["cn", "clsx", "cva"]
}
},
"noFloatingPromises": "error",
"noMisusedPromises": "error",
"useDestructuring": "error"
}
}
},
"assist": {
"actions": {
"source": {
"organizeImports": "on"
}
}
},
"css": {
"parser": {
"tailwindDirectives": true
}
}
}

15
components/activity-calendar.tsx
View File

@@ -1,7 +1,14 @@
"use client";
import { ActivityCalendar as ActivityCalendarPrimitive, type Activity } from "react-activity-calendar";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
import {
type Activity,
ActivityCalendar as ActivityCalendarPrimitive,
} from "react-activity-calendar";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
const ActivityCalendar = ({
@@ -20,7 +27,7 @@ const ActivityCalendar = ({
String.raw`**:[.react-activity-calendar\_\_count,.react-activity-calendar\_\_legend-month,.react-activity-calendar\_\_legend-colors]:text-muted-foreground`,
"[--activity-0:#ebedf0] [--activity-1:#9be9a8] [--activity-2:#40c463] [--activity-3:#30a14e] [--activity-4:#216e39]",
"dark:[--activity-0:#252525] dark:[--activity-1:#033a16] dark:[--activity-2:#196c2e] dark:[--activity-3:#2ea043] dark:[--activity-4:#56d364]",
className
className,
)}
{...rest}
>
@@ -45,7 +52,7 @@ const ActivityCalendar = ({
<Tooltip>
<TooltipTrigger asChild>{block}</TooltipTrigger>
<TooltipContent>
<span className="text-[0.825rem] font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${new Date(activity.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`}</span>
<span className="font-medium text-[0.825rem]">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${new Date(activity.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`}</span>
</TooltipContent>
</Tooltip>
)}

25
components/code-block.tsx
View File

@@ -1,5 +1,5 @@
import { codeToHtml } from "shiki";
import { cacheLife } from "next/cache";
import { codeToHtml } from "shiki";
import { CopyButton } from "@/components/copy-button";
import { cn } from "@/lib/utils";
@@ -12,7 +12,10 @@ const getTextContent = (node: React.ReactNode): string => {
if (typeof node === "string" || typeof node === "number") return String(node);
if (Array.isArray(node)) return node.map(getTextContent).join("");
if (typeof node === "object" && "props" in node) {
return getTextContent((node as React.ReactElement<{ children?: React.ReactNode }>).props.children);
return getTextContent(
(node as React.ReactElement<{ children?: React.ReactNode }>).props
.children,
);
}
return "";
};
@@ -31,7 +34,12 @@ const renderCode = async (code: string, lang: string): Promise<string> => {
});
};
const CodeBlock = async ({ children, className, showLineNumbers = true, ...props }: CodeBlockProps) => {
const CodeBlock = async ({
children,
className,
showLineNumbers = true,
...props
}: CodeBlockProps) => {
// Escape hatch for non-code pre blocks
if (!children || typeof children !== "object" || !("props" in children)) {
return (
@@ -58,14 +66,15 @@ const CodeBlock = async ({ children, className, showLineNumbers = true, ...props
data-lang={lang}
data-line-numbers={showLineNumbers || undefined}
className={cn(
"bg-code text-code-foreground overflow-x-auto overflow-y-hidden rounded-xl text-[13px] leading-normal outline-none",
"overflow-x-auto overflow-y-hidden rounded-xl bg-code text-[13px] text-code-foreground leading-normal outline-none",
"[&_span]:!bg-transparent [&_span[style*='color']]:dark:!text-(--shiki-dark)",
"[&_pre]:m-0 [&_pre]:rounded-xl [&_pre]:!bg-transparent",
"[&_pre]:!bg-transparent [&_pre]:m-0 [&_pre]:rounded-xl",
"[&_code]:white-space-pre [&_code]:grid [&_code]:min-w-full [&_code]:px-4 [&_code]:py-3.5 [&_code]:[counter-reset:line]",
"[&_.line]:min-h-1lh [&_.line]:inline-block [&_.line]:w-full [&_.line]:py-0.5",
"data-[line-numbers]:[&_.line]:before:text-code-number data-[line-numbers]:[&_.line]:before:mr-6 data-[line-numbers]:[&_.line]:before:inline-block data-[line-numbers]:[&_.line]:before:w-5 data-[line-numbers]:[&_.line]:before:text-right data-[line-numbers]:[&_.line]:before:content-[counter(line)] data-[line-numbers]:[&_.line]:before:[counter-increment:line]",
className
"[&_.line]:inline-block [&_.line]:min-h-1lh [&_.line]:w-full [&_.line]:py-0.5",
"data-[line-numbers]:[&_.line]:before:mr-6 data-[line-numbers]:[&_.line]:before:inline-block data-[line-numbers]:[&_.line]:before:w-5 data-[line-numbers]:[&_.line]:before:text-right data-[line-numbers]:[&_.line]:before:text-code-number data-[line-numbers]:[&_.line]:before:content-[counter(line)] data-[line-numbers]:[&_.line]:before:[counter-increment:line]",
className,
)}
// biome-ignore lint/security/noDangerouslySetInnerHtml: trusted Shiki-generated syntax-highlighted HTML
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>

37
components/comments/comment-actions.tsx
View File

@@ -1,8 +1,14 @@
"use client";
import {
EditIcon,
EllipsisIcon,
Loader2Icon,
ReplyIcon,
Trash2Icon,
} from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { ReplyIcon, EditIcon, Trash2Icon, EllipsisIcon, Loader2Icon } from "lucide-react";
import {
AlertDialog,
AlertDialogAction,
@@ -17,12 +23,12 @@ import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { EditCommentForm, ReplyForm } from "./comment-form";
import { useSession } from "@/lib/auth-client";
import { deleteComment, type CommentWithUser } from "@/lib/server/comments";
import { type CommentWithUser, deleteComment } from "@/lib/server/comments";
import { EditCommentForm, ReplyForm } from "./comment-form";
type ActionMode =
| { type: "idle" }
@@ -69,7 +75,13 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
<Button
variant="outline"
size="sm"
onClick={() => setMode(mode.type === "replying" ? { type: "idle" } : { type: "replying" })}
onClick={() =>
setMode(
mode.type === "replying"
? { type: "idle" }
: { type: "replying" },
)
}
>
<ReplyIcon />
Reply
@@ -93,7 +105,11 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
disabled={isDeleting}
variant="destructive"
>
{isDeleting ? <Loader2Icon className="animate-spin" /> : <Trash2Icon />}
{isDeleting ? (
<Loader2Icon className="animate-spin" />
) : (
<Trash2Icon />
)}
Delete
</DropdownMenuItem>
</DropdownMenuContent>
@@ -113,11 +129,16 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
</div>
)}
<AlertDialog open={mode.type === "confirming-delete"} onOpenChange={(open) => !open && setMode({ type: "idle" })}>
<AlertDialog
open={mode.type === "confirming-delete"}
onOpenChange={(open) => !open && setMode({ type: "idle" })}
>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogTitle>Delete comment?</AlertDialogTitle>
<AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>

36
components/comments/comment-avatar.tsx
View File

@@ -8,24 +8,22 @@ type CommentAvatarProps = {
className?: string;
};
const CommentAvatar = ({ name, image, className }: CommentAvatarProps) => {
return (
<Avatar className={cn("size-10", className)}>
{image && (
<AvatarImage
{...getImageProps({
src: image,
alt: `@${name}'s avatar`,
width: 40,
height: 40,
}).props}
width={undefined}
height={undefined}
/>
)}
<AvatarFallback>{name.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar>
);
};
const CommentAvatar = ({ name, image, className }: CommentAvatarProps) => (
<Avatar className={cn("size-10", className)}>
{image && (
<AvatarImage
{...getImageProps({
src: image,
alt: `@${name}'s avatar`,
width: 40,
height: 40,
}).props}
width={undefined}
height={undefined}
/>
)}
<AvatarFallback>{name.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar>
);
export { CommentAvatar };

91
components/comments/comment-form.tsx
View File

@@ -1,15 +1,19 @@
"use client";
import { InfoIcon, Loader2Icon } from "lucide-react";
import { createContext, useContext, useState, useTransition } from "react";
import { toast } from "sonner";
import { InfoIcon, Loader2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { MarkdownIcon } from "@/components/icons";
import { CommentAvatar } from "./comment-avatar";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Textarea } from "@/components/ui/textarea";
import { useSession } from "@/lib/auth-client";
import { createComment, updateComment } from "@/lib/server/comments";
import { CommentAvatar } from "./comment-avatar";
// Context for lifting form state to parent components
type CommentFormContextValue = {
@@ -33,7 +37,9 @@ const CommentFormProvider = ({
const [isPending, startTransition] = useTransition();
return (
<CommentFormContext.Provider value={{ content, setContent, isPending, startTransition }}>
<CommentFormContext.Provider
value={{ content, setContent, isPending, startTransition }}
>
{children}
</CommentFormContext.Provider>
);
@@ -130,14 +136,14 @@ const SubmitButton = ({
// Markdown help popover (only shown for new comments)
const MarkdownHelp = () => (
<p className="text-muted-foreground text-[0.8rem] leading-relaxed">
<p className="text-[0.8rem] text-muted-foreground leading-relaxed">
<MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" />
<span className="max-md:hidden">Basic&nbsp;</span>
<Popover>
<PopoverTrigger asChild>
<button
type="button"
className="text-primary decoration-primary/40 cursor-pointer font-semibold no-underline decoration-2 underline-offset-4 hover:underline"
className="cursor-pointer font-semibold text-primary no-underline decoration-2 decoration-primary/40 underline-offset-4 hover:underline"
>
<span>Markdown</span>
<span className="max-md:hidden">&nbsp;syntax</span>
@@ -149,7 +155,7 @@ const MarkdownHelp = () => (
Examples:
</p>
<ul className="[&>li::marker]:text-muted-foreground my-2 list-inside list-disc pl-1 text-sm [&>li]:my-1.5 [&>li]:pl-1 [&>li]:text-nowrap [&>li::marker]:font-normal">
<ul className="my-2 list-inside list-disc pl-1 text-sm [&>li::marker]:font-normal [&>li::marker]:text-muted-foreground [&>li]:my-1.5 [&>li]:text-nowrap [&>li]:pl-1">
<li>
<span className="font-bold">**bold**</span>
</li>
@@ -158,13 +164,20 @@ const MarkdownHelp = () => (
</li>
<li>
[
<a href="https://jarv.is" target="_blank" rel="noopener" className="hover:no-underline">
<a
href="https://jarv.is"
target="_blank"
rel="noopener"
className="hover:no-underline"
>
links
</a>
](https://jarv.is)
</li>
<li>
<span className="bg-muted rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium">`code`</span>
<span className="rounded-sm bg-muted px-[0.3rem] py-[0.2rem] font-medium font-mono text-sm">
`code`
</span>
</li>
<li>
~~<span className="line-through">strikethrough</span>~~
@@ -190,7 +203,8 @@ const MarkdownHelp = () => (
// New comment form - for creating top-level comments
const NewCommentForm = ({ slug }: { slug: string }) => {
const { content, setContent, isPending, startTransition } = useCommentFormState();
const { content, setContent, isPending, startTransition } =
useCommentFormState();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -229,7 +243,11 @@ const NewCommentForm = ({ slug }: { slug: string }) => {
<div className="flex justify-between gap-4">
<MarkdownHelp />
<SubmitButton isPending={isPending} disabled={!content.trim()} pendingLabel="Posting...">
<SubmitButton
isPending={isPending}
disabled={!content.trim()}
pendingLabel="Posting..."
>
Comment
</SubmitButton>
</div>
@@ -251,7 +269,8 @@ const ReplyForm = ({
onCancel: () => void;
onSuccess?: () => void;
}) => {
const { content, setContent, isPending, startTransition } = useCommentFormState();
const { content, setContent, isPending, startTransition } =
useCommentFormState();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -289,11 +308,20 @@ const ReplyForm = ({
/>
<div className="flex justify-end gap-2">
<Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={isPending}
>
Cancel
</Button>
<SubmitButton isPending={isPending} disabled={!content.trim()} pendingLabel="Posting...">
<SubmitButton
isPending={isPending}
disabled={!content.trim()}
pendingLabel="Posting..."
>
Reply
</SubmitButton>
</div>
@@ -317,7 +345,8 @@ const EditCommentForm = ({
onCancel: () => void;
onSuccess?: () => void;
}) => {
const { content, setContent, isPending, startTransition } = useCommentFormState(initialContent);
const { content, setContent, isPending, startTransition } =
useCommentFormState(initialContent);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -340,7 +369,12 @@ const EditCommentForm = ({
};
return (
<form onSubmit={handleSubmit} className="space-y-4" data-intent="edit" data-slug={slug}>
<form
onSubmit={handleSubmit}
className="space-y-4"
data-intent="edit"
data-slug={slug}
>
<div className="min-w-0 flex-1 space-y-4">
<CommentTextarea
content={content}
@@ -351,11 +385,20 @@ const EditCommentForm = ({
/>
<div className="flex justify-end gap-2">
<Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={isPending}
>
Cancel
</Button>
<SubmitButton isPending={isPending} disabled={!content.trim()} pendingLabel="Updating...">
<SubmitButton
isPending={isPending}
disabled={!content.trim()}
pendingLabel="Updating..."
>
Edit
</SubmitButton>
</div>
@@ -364,4 +407,10 @@ const EditCommentForm = ({
);
};
export { NewCommentForm, ReplyForm, EditCommentForm, CommentFormProvider, useCommentForm };
export {
NewCommentForm,
ReplyForm,
EditCommentForm,
CommentFormProvider,
useCommentForm,
};

43
components/comments/comment-single.tsx
View File

@@ -1,12 +1,12 @@
import Link from "next/link";
import Markdown from "react-markdown";
import { RelativeTime } from "@/components/relative-time";
import { CommentAvatar } from "./comment-avatar";
import { CommentActions } from "./comment-actions";
import { remarkGfm, remarkSmartypants } from "@/lib/remark";
import { rehypeExternalLinks } from "@/lib/rehype";
import { cn } from "@/lib/utils";
import { remarkGfm, remarkSmartypants } from "@/lib/remark";
import type { CommentWithUser } from "@/lib/server/comments";
import { cn } from "@/lib/utils";
import { CommentActions } from "./comment-actions";
import { CommentAvatar } from "./comment-avatar";
const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
const divId = `comment-${comment.id.substring(0, 8)}`;
@@ -15,7 +15,11 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
<div className="group scroll-mt-4" id={divId}>
<div className="flex gap-4">
<div className="shrink-0">
<CommentAvatar name={comment.user.name} image={comment.user.image} className="size-8 md:size-10" />
<CommentAvatar
name={comment.user.name}
image={comment.user.image}
className="size-8 md:size-10"
/>
</div>
<div className="min-w-0 flex-1">
@@ -28,7 +32,10 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
>
@{comment.user.name}
</a>
<Link href={`#${divId}`} className="text-muted-foreground text-xs leading-none hover:no-underline">
<Link
href={`#${divId}`}
className="text-muted-foreground text-xs leading-none hover:no-underline"
>
<RelativeTime date={comment.createdAt} />
</Link>
</div>
@@ -37,15 +44,29 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
className={cn(
"isolate max-w-none text-[0.875rem] leading-relaxed",
"[&_p]:my-5 [&_p]:first:mt-0 [&_p]:last:mb-0",
"[&_a]:text-primary [&_a]:decoration-primary/40 [&_a]:no-underline [&_a]:decoration-2 [&_a]:underline-offset-4 [&_a]:hover:underline",
"[&_code]:bg-muted [&_code]:rounded-sm [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-medium",
"group-has-data-[intent=edit]:hidden" // hides the rendered comment when its own edit form is active
"[&_a]:text-primary [&_a]:no-underline [&_a]:decoration-2 [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a]:hover:underline",
"[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-medium",
"group-has-data-[intent=edit]:hidden", // hides the rendered comment when its own edit form is active
)}
>
<Markdown
remarkPlugins={[remarkGfm, remarkSmartypants]}
rehypePlugins={[[rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer nofollow" }]]}
allowedElements={["p", "a", "em", "strong", "code", "pre", "blockquote", "del"]}
rehypePlugins={[
[
rehypeExternalLinks,
{ target: "_blank", rel: "noopener noreferrer nofollow" },
],
]}
allowedElements={[
"p",
"a",
"em",
"strong",
"code",
"pre",
"blockquote",
"del",
]}
>
{comment.content}
</Markdown>

47
components/comments/comment-thread.tsx
View File

@@ -1,6 +1,6 @@
import { CommentSingle } from "./comment-single";
import { cn } from "@/lib/utils";
import type { CommentWithUser } from "@/lib/server/comments";
import { cn } from "@/lib/utils";
import { CommentSingle } from "./comment-single";
/** Maximum nesting depth for comment threads (0-indexed, so 2 = 3 levels deep) */
const MAX_NESTING_LEVEL = 2;
@@ -15,26 +15,29 @@ const CommentThread = ({
replies: CommentWithUser[];
allComments: Record<string, CommentWithUser[]>;
level?: number;
}) => {
return (
<>
<CommentSingle comment={comment} />
}) => (
<>
<CommentSingle comment={comment} />
{replies.length > 0 && (
<div className={cn("mt-6 space-y-6", level < MAX_NESTING_LEVEL && "ml-6 border-l-2 pl-6")}>
{replies.map((reply) => (
<CommentThread
key={reply.id}
comment={reply}
replies={allComments[reply.id] || []}
allComments={allComments}
level={level + 1}
/>
))}
</div>
)}
</>
);
};
{replies.length > 0 && (
<div
className={cn(
"mt-6 space-y-6",
level < MAX_NESTING_LEVEL && "ml-6 border-l-2 pl-6",
)}
>
{replies.map((reply) => (
<CommentThread
key={reply.id}
comment={reply}
replies={allComments[reply.id] || []}
allComments={allComments}
level={level + 1}
/>
))}
</div>
)}
</>
);
export { CommentThread };

36
components/comments/comments-skeleton.tsx
View File

@@ -1,26 +1,24 @@
import { Skeleton } from "@/components/ui/skeleton";
const CommentsSkeleton = () => {
return (
<>
<Skeleton className="h-32 w-full" />
const CommentsSkeleton = () => (
<>
<Skeleton className="h-32 w-full" />
<div className="flex gap-4">
<Skeleton className="size-8 rounded-full md:size-10" />
<div className="flex-1 space-y-2">
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-16" />
</div>
<Skeleton className="h-20 w-full" />
<div className="flex gap-2">
<Skeleton className="h-8 w-16" />
<Skeleton className="h-8 w-8" />
</div>
<div className="flex gap-4">
<Skeleton className="size-8 rounded-full md:size-10" />
<div className="flex-1 space-y-2">
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-16" />
</div>
<Skeleton className="h-20 w-full" />
<div className="flex gap-2">
<Skeleton className="h-8 w-16" />
<Skeleton className="h-8 w-8" />
</div>
</div>
</>
);
};
</div>
</>
);
export { CommentsSkeleton };

16
components/comments/comments.tsx
View File

@@ -1,9 +1,9 @@
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { type CommentWithUser, getComments } from "@/lib/server/comments";
import { NewCommentForm } from "./comment-form";
import { CommentThread } from "./comment-thread";
import { SignIn } from "./sign-in";
import { auth } from "@/lib/auth";
import { getComments, type CommentWithUser } from "@/lib/server/comments";
const Comments = async ({ slug }: { slug: string }) => {
const session = await auth.api.getSession({
@@ -21,18 +21,20 @@ const Comments = async ({ slug }: { slug: string }) => {
acc[parentId].push(comment);
return acc;
},
{} as Record<string, CommentWithUser[]>
{} as Record<string, CommentWithUser[]>,
);
const rootComments = commentsByParentId["root"] || [];
const rootComments = commentsByParentId.root || [];
return (
<>
{session ? (
<NewCommentForm slug={slug} />
) : (
<div className="bg-muted/40 flex flex-col items-center justify-center gap-y-4 rounded-lg p-6">
<p className="text-center font-medium">Join the discussion by signing in:</p>
<div className="flex flex-col items-center justify-center gap-y-4 rounded-lg bg-muted/40 p-6">
<p className="text-center font-medium">
Join the discussion by signing in:
</p>
<SignIn callbackPath={`/${slug}#comments`} />
</div>
)}
@@ -49,7 +51,7 @@ const Comments = async ({ slug }: { slug: string }) => {
))}
</div>
) : (
<div className="text-foreground/80 py-8 text-center text-lg font-medium tracking-tight">
<div className="py-8 text-center font-medium text-foreground/80 text-lg tracking-tight">
Be the first to comment!
</div>
)}

13
components/comments/sign-in.tsx
View File

@@ -1,12 +1,12 @@
"use client";
import { env } from "@/lib/env";
import { Loader2Icon } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Loader2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { GitHubIcon } from "@/components/icons";
import { Button } from "@/components/ui/button";
import { signIn } from "@/lib/auth-client";
import { env } from "@/lib/env";
const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
const [isLoading, setIsLoading] = useState(false);
@@ -27,7 +27,12 @@ const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
};
return (
<Button onClick={handleSignIn} disabled={isLoading} size="lg" variant="outline">
<Button
onClick={handleSignIn}
disabled={isLoading}
size="lg"
variant="outline"
>
{isLoading ? <Loader2Icon className="animate-spin" /> : <GitHubIcon />}
Sign in with GitHub
</Button>

82
components/contact-form.tsx
View File

@@ -1,16 +1,16 @@
"use client";
import { useState } from "react";
import { useForm } from "@tanstack/react-form";
import { SendIcon, Loader2Icon, CheckIcon, XIcon } from "lucide-react";
import { CheckIcon, Loader2Icon, SendIcon, XIcon } from "lucide-react";
import { useState } from "react";
import { MarkdownIcon } from "@/components/icons";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel, FieldError } from "@/components/ui/field";
import { MarkdownIcon } from "@/components/icons";
import { cn } from "@/lib/utils";
import { sendContactForm, type ContactResult } from "@/lib/server/contact";
import { ContactSchema } from "@/lib/schemas/contact";
import { type ContactResult, sendContactForm } from "@/lib/server/contact";
import { cn } from "@/lib/utils";
const ContactForm = () => {
const [result, setResult] = useState<ContactResult | null>(null);
@@ -55,14 +55,21 @@ const ContactForm = () => {
}}
className="my-5 space-y-4"
>
<form.Subscribe selector={(state) => state.isSubmitting || result?.success}>
<form.Subscribe
selector={(state) => state.isSubmitting || result?.success}
>
{(isDisabled) => (
<>
<form.Field name="name">
{(field) => {
const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
const isInvalid =
field.state.meta.isTouched &&
field.state.meta.errors.length > 0;
return (
<Field data-invalid={isInvalid || undefined} className="gap-1.5">
<Field
data-invalid={isInvalid || undefined}
className="gap-1.5"
>
<FieldLabel htmlFor="name">Name</FieldLabel>
<Input
id="name"
@@ -76,7 +83,9 @@ const ContactForm = () => {
disabled={!!isDisabled}
aria-invalid={isInvalid || undefined}
/>
{isInvalid && <FieldError errors={field.state.meta.errors} />}
{isInvalid && (
<FieldError errors={field.state.meta.errors} />
)}
</Field>
);
}}
@@ -84,9 +93,14 @@ const ContactForm = () => {
<form.Field name="email">
{(field) => {
const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
const isInvalid =
field.state.meta.isTouched &&
field.state.meta.errors.length > 0;
return (
<Field data-invalid={isInvalid || undefined} className="gap-1.5">
<Field
data-invalid={isInvalid || undefined}
className="gap-1.5"
>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input
id="email"
@@ -102,7 +116,9 @@ const ContactForm = () => {
disabled={!!isDisabled}
aria-invalid={isInvalid || undefined}
/>
{isInvalid && <FieldError errors={field.state.meta.errors} />}
{isInvalid && (
<FieldError errors={field.state.meta.errors} />
)}
</Field>
);
}}
@@ -110,9 +126,14 @@ const ContactForm = () => {
<form.Field name="message">
{(field) => {
const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
const isInvalid =
field.state.meta.isTouched &&
field.state.meta.errors.length > 0;
return (
<Field data-invalid={isInvalid || undefined} className="gap-1.5">
<Field
data-invalid={isInvalid || undefined}
className="gap-1.5"
>
<FieldLabel htmlFor="message">Message</FieldLabel>
<Textarea
id="message"
@@ -125,9 +146,11 @@ const ContactForm = () => {
aria-invalid={isInvalid || undefined}
className="min-h-[6lh] resize-y"
/>
{isInvalid && <FieldError errors={field.state.meta.errors} />}
{isInvalid && (
<FieldError errors={field.state.meta.errors} />
)}
<p className="text-foreground/85 mt-1.5 text-[0.8rem] leading-relaxed">
<p className="mt-1.5 text-[0.8rem] text-foreground/85 leading-relaxed">
<MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" />
Basic{" "}
<a
@@ -139,8 +162,14 @@ const ContactForm = () => {
>
Markdown syntax
</a>{" "}
is allowed, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
<a href="https://jarv.is" target="_blank" rel="noopener" className="hover:no-underline">
is allowed, e.g.: <strong>**bold**</strong>,{" "}
<em>_italics_</em>, [
<a
href="https://jarv.is"
target="_blank"
rel="noopener"
className="hover:no-underline"
>
links
</a>
](https://jarv.is), and <code>`code`</code>.
@@ -154,14 +183,17 @@ const ContactForm = () => {
</form.Subscribe>
<div className="flex min-h-16 items-center space-x-4">
<form.Subscribe selector={(state) => [, state.isSubmitting]}>
<form.Subscribe selector={(state) => [undefined, state.isSubmitting]}>
{([isSubmitting]) => (
<>
{!result?.success && (
<Button type="submit" size="lg" disabled={isSubmitting}>
{isSubmitting ? (
<>
<Loader2Icon className="animate-spin" aria-hidden="true" />
<Loader2Icon
className="animate-spin"
aria-hidden="true"
/>
Sending…
</>
) : (
@@ -178,8 +210,10 @@ const ContactForm = () => {
role="status"
aria-live="polite"
className={cn(
"space-x-0.5 text-[0.9rem] font-semibold",
result.success ? "text-green-600 dark:text-green-400" : "text-destructive"
"space-x-0.5 font-semibold text-[0.9rem]",
result.success
? "text-green-600 dark:text-green-400"
: "text-destructive",
)}
>
{result.success ? (

29
components/copy-button.tsx
View File

@@ -1,11 +1,11 @@
"use client";
import * as React from "react";
import copy from "copy-to-clipboard";
import { CheckIcon, ClipboardCheckIcon, CopyIcon } from "lucide-react";
import * as React from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
function CopyButton({
value,
@@ -18,13 +18,14 @@ function CopyButton({
const [hasCopied, setHasCopied] = React.useState(false);
const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
React.useEffect(() => {
return () => {
React.useEffect(
() => () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
},
[],
);
const handleCopy = () => {
if (hasCopied) return;
@@ -32,7 +33,12 @@ function CopyButton({
copy(value);
setHasCopied(true);
toast.success("Copied!", {
icon: <ClipboardCheckIcon className="text-foreground/85 size-4" aria-hidden="true" />,
icon: (
<ClipboardCheckIcon
className="size-4 text-foreground/85"
aria-hidden="true"
/>
),
duration: 2000,
id: "copy-button-toast-success",
});
@@ -50,16 +56,19 @@ function CopyButton({
size="icon"
variant={variant}
className={cn(
"bg-code hover:bg-accent dark:hover:bg-accent absolute top-3 right-2 z-10 size-7.5 hover:opacity-100 focus-visible:opacity-100",
"absolute top-3 right-2 z-10 size-7.5 bg-code hover:bg-accent hover:opacity-100 focus-visible:opacity-100 dark:hover:bg-accent",
hasCopied ? "cursor-default" : "cursor-pointer",
className
className,
)}
onClick={handleCopy}
aria-label={hasCopied ? "Copied" : "Copy to clipboard"}
{...props}
>
{hasCopied ? (
<CheckIcon className="text-green-600 dark:text-green-400" aria-hidden="true" />
<CheckIcon
className="text-green-600 dark:text-green-400"
aria-hidden="true"
/>
) : (
<CopyIcon aria-hidden="true" />
)}

38
components/heading-anchor.tsx
View File

@@ -1,21 +1,27 @@
import { LinkIcon } from "lucide-react";
import { cn } from "@/lib/utils";
const HeadingAnchor = ({ id, title, className }: { id: string; title: string; className?: string }) => {
return (
<a
href={`#${id}`}
className={cn(
"text-muted-foreground hover:text-primary ml-2 inline-block px-2 align-baseline hover:no-underline",
className
)}
aria-hidden="true"
tabIndex={-1}
>
<LinkIcon className="inline-block size-[0.75em] align-baseline" />
<span className="sr-only">Permalink to &ldquo;{title}&rdquo;</span>
</a>
);
};
const HeadingAnchor = ({
id,
title,
className,
}: {
id: string;
title: string;
className?: string;
}) => (
<a
href={`#${id}`}
className={cn(
"ml-2 inline-block px-2 align-baseline text-muted-foreground hover:text-primary hover:no-underline",
className,
)}
aria-hidden="true"
tabIndex={-1}
>
<LinkIcon className="inline-block size-[0.75em] align-baseline" />
<span className="sr-only">Permalink to &ldquo;{title}&rdquo;</span>
</a>
);
export { HeadingAnchor };

48
components/image-diff.tsx
View File

@@ -1,21 +1,33 @@
"use client";
import { Children } from "react";
import { getImageProps } from "next/image";
import { ReactCompareSlider, ReactCompareSliderImage } from "react-compare-slider";
import { Children } from "react";
import {
ReactCompareSlider,
ReactCompareSliderImage,
} from "react-compare-slider";
import { cn } from "@/lib/utils";
const ImageDiff = ({ children, className }: { children: React.ReactElement[]; className?: string }) => {
const ImageDiff = ({
children,
className,
}: {
children: React.ReactElement[];
className?: string;
}) => {
// Extract the two image children
const childrenArray = Children.toArray(children);
if (childrenArray.length !== 2) {
console.error("ImageDiff must have exactly two children (before and after images)");
console.error(
"ImageDiff must have exactly two children (before and after images)",
);
return null;
}
// Get the original image source to extract dimensions for aspect ratio
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const firstChildProps = children[0].props as any;
const firstChildProps = children[0].props as Parameters<
typeof getImageProps
>[0];
const imageSrc = firstChildProps.src;
const aspectRatio =
typeof imageSrc === "object" && "width" in imageSrc && "height" in imageSrc
@@ -24,15 +36,29 @@ const ImageDiff = ({ children, className }: { children: React.ReactElement[]; cl
// Extract image props, stripping out MDX className (margins, etc.) that would break slider layout
const beforeImageProps = getImageProps(firstChildProps).props;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const afterImageProps = getImageProps(children[1].props as any).props;
const afterImageProps = getImageProps(
children[1].props as Parameters<typeof getImageProps>[0],
).props;
return (
<ReactCompareSlider
className={cn("my-8 w-full max-w-full overflow-hidden rounded-sm", className)}
className={cn(
"my-8 w-full max-w-full overflow-hidden rounded-sm",
className,
)}
style={{ aspectRatio }}
itemOne={<ReactCompareSliderImage {...beforeImageProps} className="size-full object-cover" />}
itemTwo={<ReactCompareSliderImage {...afterImageProps} className="size-full object-cover" />}
itemOne={
<ReactCompareSliderImage
{...beforeImageProps}
className="size-full object-cover"
/>
}
itemTwo={
<ReactCompareSliderImage
{...afterImageProps}
className="size-full object-cover"
/>
}
/>
);
};

40
components/layout/footer.tsx
View File

@@ -1,26 +1,24 @@
import { env } from "@/lib/env";
import Link from "next/link";
import siteConfig from "@/lib/config/site";
import { env } from "@/lib/env";
const Footer = () => {
return (
<footer className="text-muted-foreground mt-8 w-full py-6 text-center text-[13px] leading-loose">
All content is licensed under{" "}
<Link href="/license" className="underline underline-offset-4">
{siteConfig.license}
</Link>
. View source on{" "}
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-4"
>
GitHub
</a>
.
</footer>
);
};
const Footer = () => (
<footer className="mt-8 w-full py-6 text-center text-[13px] text-muted-foreground leading-loose">
All content is licensed under{" "}
<Link href="/license" className="underline underline-offset-4">
{siteConfig.license}
</Link>
. View source on{" "}
<a
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-4"
>
GitHub
</a>
.
</footer>
);
export { Footer };

46
components/layout/header.tsx
View File

@@ -1,19 +1,18 @@
"use client";
import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import { MoonIcon, SunIcon } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import avatarImg from "@/app/avatar.jpg";
import { GitHubIcon } from "@/components/icons";
import { Menu } from "@/components/layout/menu";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Menu } from "@/components/layout/menu";
import { GitHubIcon } from "@/components/icons";
import { cn } from "@/lib/utils";
import authorConfig from "@/lib/config/author";
import siteConfig from "@/lib/config/site";
import { MoonIcon, SunIcon } from "lucide-react";
import avatarImg from "@/app/avatar.jpg";
import { cn } from "@/lib/utils";
const Header = ({ className }: { className?: string }) => {
const [isScrolled, setIsScrolled] = useState(false);
@@ -40,7 +39,7 @@ const Header = ({ className }: { className?: string }) => {
"bg-background/0 backdrop-blur-none",
"data-[scrolled=true]:bg-background/80 data-[scrolled=true]:backdrop-blur-md",
"data-[scrolled=true]:border-border/50 data-[scrolled=true]:border-b",
className
className,
)}
>
<header className="mx-auto flex w-full max-w-4xl items-center justify-between px-5 py-4">
@@ -49,18 +48,18 @@ const Header = ({ className }: { className?: string }) => {
href="/"
rel="author"
aria-label={siteConfig.name}
className="hover:text-foreground/85 flex shrink-0 items-center gap-2.5 pr-2 hover:no-underline"
className="flex shrink-0 items-center gap-2.5 pr-2 hover:text-foreground/85 hover:no-underline"
>
<Image
src={avatarImg}
alt={`Photo of ${siteConfig.name}`}
className="border-ring/30 size-[40px] rounded-full border md:size-[32px]"
className="size-[40px] rounded-full border border-ring/30 md:size-[32px]"
width={40}
height={40}
quality={75}
priority
/>
<span className="text-[17.5px] font-medium tracking-tight whitespace-nowrap max-md:sr-only">
<span className="whitespace-nowrap font-medium text-[17.5px] tracking-tight max-md:sr-only">
{siteConfig.name}
</span>
</Link>
@@ -69,8 +68,17 @@ const Header = ({ className }: { className?: string }) => {
</div>
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" aria-label="Open GitHub profile" asChild>
<a href={`https://github.com/${authorConfig.social.github}`} target="_blank" rel="noopener noreferrer">
<Button
variant="ghost"
size="sm"
aria-label="Open GitHub profile"
asChild
>
<a
href={`https://github.com/${authorConfig.social.github}`}
target="_blank"
rel="noopener noreferrer"
>
<GitHubIcon />
</a>
</Button>
@@ -81,8 +89,14 @@ const Header = ({ className }: { className?: string }) => {
aria-label="Toggle theme"
className="group"
>
<SunIcon className="group-hover:stroke-orange-600 dark:hidden" aria-hidden="true" />
<MoonIcon className="not-dark:hidden group-hover:stroke-yellow-400" aria-hidden="true" />
<SunIcon
className="group-hover:stroke-orange-600 dark:hidden"
aria-hidden="true"
/>
<MoonIcon
className="not-dark:hidden group-hover:stroke-yellow-400"
aria-hidden="true"
/>
</Button>
</div>
</header>

26
components/layout/menu.tsx
View File

@@ -1,14 +1,14 @@
"use client";
import { useSelectedLayoutSegment } from "next/navigation";
import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { useSelectedLayoutSegment } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
const menuItems = [
@@ -29,25 +29,27 @@ const menuItems = [
const Menu = () => {
const segment = useSelectedLayoutSegment() || "";
const currentItem = menuItems.find((item) => item.href?.split("/")[1] === segment);
const currentItem = menuItems.find(
(item) => item.href?.split("/")[1] === segment,
);
const currentLabel = segment === "" ? "Home" : currentItem?.text || "Menu";
return (
<nav data-slot="navigation-menu">
{/* Desktop: Show all buttons */}
<div className="hidden items-center gap-1.5 sm:flex">
{menuItems.map((item, index) => {
{menuItems.map((item) => {
const isCurrent = item.href?.split("/")[1] === segment;
return (
<Button
asChild
key={index}
key={item.href}
variant="ghost"
size="sm"
aria-label={item.text}
data-current={isCurrent || undefined}
className="data-current:bg-accent/60 data-current:text-accent-foreground text-[15px] leading-none"
className="text-[15px] leading-none data-current:bg-accent/60 data-current:text-accent-foreground"
>
<Link href={item.href}>{item.text}</Link>
</Button>
@@ -68,16 +70,20 @@ const Menu = () => {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="min-w-[140px]">
<DropdownMenuItem asChild data-current={segment === ""} aria-current={segment === "" ? "page" : undefined}>
<DropdownMenuItem
asChild
data-current={segment === ""}
aria-current={segment === "" ? "page" : undefined}
>
<Link href="/">Home</Link>
</DropdownMenuItem>
{menuItems.map((item, index) => {
{menuItems.map((item) => {
const isCurrent = item.href?.split("/")[1] === segment;
return (
<DropdownMenuItem
asChild
key={index}
key={item.href}
data-current={isCurrent || undefined}
aria-current={isCurrent ? "page" : undefined}
>

29
components/layout/page-title.tsx
View File

@@ -8,20 +8,21 @@ const PageTitle = ({
...rest
}: React.ComponentProps<"h1"> & {
canonical: string;
}) => {
return (
<h1
className={cn("not-prose mt-0 mb-6 text-left text-3xl font-medium tracking-tight lowercase", className)}
{...rest}
}) => (
<h1
className={cn(
"not-prose mt-0 mb-6 text-left font-medium text-3xl lowercase tracking-tight",
className,
)}
{...rest}
>
<Link
href={canonical}
className="text-foreground no-underline before:mr-[-3px] before:text-muted-foreground before:tracking-wider before:content-['\002E\002F']"
>
<Link
href={canonical}
className="before:text-muted-foreground text-foreground no-underline before:mr-[-3px] before:tracking-wider before:content-['\002E\002F']"
>
{children}
</Link>
</h1>
);
};
{children}
</Link>
</h1>
);
export { PageTitle };

34
components/marquee.tsx
View File

@@ -10,18 +10,26 @@ const Marquee = ({
reverse?: boolean;
pauseOnHover?: boolean;
repeat?: number;
}) => {
return (
<div className={cn("group flex flex-row [gap:var(--gap)] overflow-hidden [--gap:2rem]", className)} {...rest}>
{Array(repeat)
.fill(0)
.map((_, i) => (
<div key={i} className="motion-safe:animate-marquee flex shrink-0 flex-row justify-around [gap:var(--gap)]">
{children}
</div>
))}
</div>
);
};
}) => (
<div
className={cn(
"group flex flex-row overflow-hidden [--gap:2rem] [gap:var(--gap)]",
className,
)}
{...rest}
>
{Array(repeat)
.fill(0)
.map((_, i) => (
<div
// biome-ignore lint/suspicious/noArrayIndexKey: identical clones for animation; no natural unique key exists
key={i}
className="flex shrink-0 flex-row justify-around [gap:var(--gap)] motion-safe:animate-marquee"
>
{children}
</div>
))}
</div>
);
export { Marquee };

44
components/post-stats.tsx
View File

@@ -1,13 +1,19 @@
"use client";
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
import Link from "next/link";
import { EyeIcon, MessagesSquareIcon } from "lucide-react";
import Link from "next/link";
import {
createContext,
type ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { env } from "@/lib/env";
import { getAllViewCounts } from "@/lib/server/views";
import { getAllCommentCounts } from "@/lib/server/comments";
import { getAllViewCounts } from "@/lib/server/views";
const numberFormatter = new Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE);
@@ -17,14 +23,22 @@ type Stats = {
loaded: boolean;
};
const StatsContext = createContext<Stats>({ views: {}, comments: {}, loaded: false });
const StatsContext = createContext<Stats>({
views: {},
comments: {},
loaded: false,
});
/**
* Provider that fetches ALL post stats in a single batch (2 requests total).
* Wrap this around any component tree that contains PostStats components.
*/
export const PostStatsProvider = ({ children }: { children: ReactNode }) => {
const [stats, setStats] = useState<Stats>({ views: {}, comments: {}, loaded: false });
const [stats, setStats] = useState<Stats>({
views: {},
comments: {},
loaded: false,
});
useEffect(() => {
Promise.all([getAllViewCounts(), getAllCommentCounts()])
@@ -37,7 +51,9 @@ export const PostStatsProvider = ({ children }: { children: ReactNode }) => {
});
}, []);
return <StatsContext.Provider value={stats}>{children}</StatsContext.Provider>;
return (
<StatsContext.Provider value={stats}>{children}</StatsContext.Provider>
);
};
/**
@@ -62,19 +78,29 @@ const PostStats = ({ slug }: { slug: string }) => {
return (
<>
{viewCount > 0 && (
<Badge variant="secondary" className="text-foreground/80 gap-[5px] tabular-nums">
<Badge
variant="secondary"
className="gap-[5px] text-foreground/80 tabular-nums"
>
<EyeIcon className="text-foreground/65" aria-hidden="true" />
{numberFormatter.format(viewCount)}
</Badge>
)}
{commentCount > 0 && (
<Badge variant="secondary" className="text-foreground/80 gap-[5px] tabular-nums" asChild>
<Badge
variant="secondary"
className="gap-[5px] text-foreground/80 tabular-nums"
asChild
>
<Link
href={`/${slug}#comments`}
title={`${numberFormatter.format(commentCount)} ${commentCount === 1 ? "comment" : "comments"}`}
>
<MessagesSquareIcon className="text-foreground/65" aria-hidden="true" />
<MessagesSquareIcon
className="text-foreground/65"
aria-hidden="true"
/>
{numberFormatter.format(commentCount)}
</Link>
</Badge>

17
components/providers.tsx
View File

@@ -2,12 +2,15 @@
import { ThemeProvider } from "next-themes";
const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
{children}
</ThemeProvider>
);
};
const Providers = ({ children }: { children: React.ReactNode }) => (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
);
export { Providers };

12
components/relative-time.tsx
View File

@@ -9,12 +9,10 @@ const intlFormatter = makeIntlFormatter({
numeric: "auto",
});
const RelativeTime = ({ ...rest }: React.ComponentProps<typeof TimeAgo>) => {
return (
<span suppressHydrationWarning>
<TimeAgo formatter={intlFormatter} {...rest} />
</span>
);
};
const RelativeTime = ({ ...rest }: React.ComponentProps<typeof TimeAgo>) => (
<span suppressHydrationWarning>
<TimeAgo formatter={intlFormatter} {...rest} />
</span>
);
export { RelativeTime };

26
components/third-party/codepen.tsx vendored
View File

@@ -16,19 +16,17 @@ const CodePen = ({
preview?: boolean;
editable?: boolean;
title?: string;
} & React.ComponentProps<"iframe">) => {
return (
<iframe
src={`https://codepen.io/${username}/embed/${id}/?${new URLSearchParams({
"default-tab": `${defaultTab},result`,
preview: `${!!preview}`,
editable: `${!!editable}`,
})}`}
title={title}
className={cn("h-[500px] w-full overflow-hidden border-none", className)}
{...rest}
/>
);
};
} & React.ComponentProps<"iframe">) => (
<iframe
src={`https://codepen.io/${username}/embed/${id}/?${new URLSearchParams({
"default-tab": `${defaultTab},result`,
preview: `${!!preview}`,
editable: `${!!editable}`,
})}`}
title={title}
className={cn("h-[500px] w-full overflow-hidden border-none", className)}
{...rest}
/>
);
export { CodePen };

6
components/third-party/gist.tsx vendored
View File

@@ -7,7 +7,11 @@ const Gist = async ({
title,
className,
...rest
}: { id: string; file?: string; title?: string } & React.ComponentProps<"iframe">) => {
}: {
id: string;
file?: string;
title?: string;
} & React.ComponentProps<"iframe">) => {
"use cache";
cacheLife("max");
cacheTag("gist", `gist-${id}${file ? `-${file}` : ""}`);

4
components/third-party/tweet.tsx vendored
View File

@@ -1,7 +1,7 @@
import { cacheLife, cacheTag } from "next/cache";
import Image from "next/image";
import type { Tweet as TweetType } from "react-tweet/api";
import { EmbeddedTweet, TweetNotFound } from "react-tweet";
import type { Tweet as TweetType } from "react-tweet/api";
import { fetchTweet } from "react-tweet/api";
import { cn } from "@/lib/utils";
@@ -32,7 +32,7 @@ const Tweet = async ({ id, className }: { id: string; className?: string }) => {
className={cn(
"my-6 min-h-30",
"*:[--tweet-body-font-size:var(--text-base)]! *:[--tweet-body-line-height:var(--leading-normal)]! *:[--tweet-container-margin:0_auto]! *:[--tweet-font-family:var(--font-sans)]! *:[--tweet-info-font-size:var(--text-sm)]! *:[--tweet-info-line-height:var(--leading-normal)]!",
className
className,
)}
>
<EmbeddedTweet

9
components/third-party/youtube.tsx vendored
View File

@@ -4,8 +4,11 @@ import YouTubeEmbed from "react-lite-youtube-embed";
// lite-youtube-embed CSS is imported in app/global.css to save a request
const YouTube = ({ title = "YouTube video", ...rest }: React.ComponentProps<typeof YouTubeEmbed>) => {
return <YouTubeEmbed cookie={false} containerElement="div" title={title} {...rest} />;
};
const YouTube = ({
title = "YouTube video",
...rest
}: React.ComponentProps<typeof YouTubeEmbed>) => (
<YouTubeEmbed cookie={false} containerElement="div" title={title} {...rest} />
);
export { YouTube };

31
components/ui/accordion.tsx
View File

@@ -1,16 +1,21 @@
"use client";
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";
function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
function Accordion({
...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
}
function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
function AccordionItem({
className,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
@@ -20,29 +25,37 @@ function AccordionItem({ className, ...props }: React.ComponentProps<typeof Acco
);
}
function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
function AccordionTrigger({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
className
"flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
className,
)}
{...props}
>
{children}
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
<ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
);
}
function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
function AccordionContent({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
return (
<AccordionPrimitive.Content
data-slot="accordion-content"
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pt-0 pb-4", className)}>{children}</div>

82
components/ui/alert-dialog.tsx
View File

@@ -1,30 +1,42 @@
"use client";
import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { cn } from "@/lib/utils";
import type * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
function AlertDialog({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
}
function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
function AlertDialogTrigger({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
return (
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
);
}
function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
function AlertDialogPortal({
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
return (
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
);
}
function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
function AlertDialogOverlay({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
return (
<AlertDialogPrimitive.Overlay
data-slot="alert-dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
/>
@@ -45,8 +57,8 @@ function AlertDialogContent({
data-slot="alert-dialog-content"
data-size={size}
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
className
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=open]:animate-in data-[size=default]:sm:max-w-lg",
className,
)}
{...props}
/>
@@ -54,39 +66,48 @@ function AlertDialogContent({
);
}
function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
function AlertDialogHeader({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-dialog-header"
className={cn(
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
className
className,
)}
{...props}
/>
);
}
function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
function AlertDialogFooter({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
className
className,
)}
{...props}
/>
);
}
function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
function AlertDialogTitle({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
return (
<AlertDialogPrimitive.Title
data-slot="alert-dialog-title"
className={cn(
"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
className
"font-semibold text-lg sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
className,
)}
{...props}
/>
@@ -106,13 +127,16 @@ function AlertDialogDescription({
);
}
function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
function AlertDialogMedia({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-dialog-media"
className={cn(
"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
className
"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
className,
)}
{...props}
/>
@@ -128,7 +152,11 @@ function AlertDialogAction({
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
return (
<Button variant={variant} size={size} asChild>
<AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(className)} {...props} />
<AlertDialogPrimitive.Action
data-slot="alert-dialog-action"
className={cn(className)}
{...props}
/>
</Button>
);
}
@@ -142,7 +170,11 @@ function AlertDialogCancel({
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
return (
<Button variant={variant} size={size} asChild>
<AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(className)} {...props} />
<AlertDialogPrimitive.Cancel
data-slot="alert-dialog-cancel"
className={cn(className)}
{...props}
/>
</Button>
);
}

35
components/ui/alert.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
@@ -10,36 +10,53 @@ const alertVariants = cva(
variant: {
default: "bg-card text-card-foreground",
destructive:
"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
},
},
defaultVariants: {
variant: "default",
},
}
},
);
function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
function Alert({
className,
variant,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
);
}
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-title"
className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
className={cn(
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
className,
)}
{...props}
/>
);
}
function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
function AlertDescription({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-description"
className={cn(
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
className
"col-start-2 grid justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
className,
)}
{...props}
/>

4
components/ui/aspect-ratio.tsx
View File

@@ -2,7 +2,9 @@
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
function AspectRatio({
...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
}

52
components/ui/avatar.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import type * as React from "react";
import { cn } from "@/lib/utils";
@@ -17,27 +17,37 @@ function Avatar({
data-slot="avatar"
data-size={size}
className={cn(
"group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
className
"group/avatar relative flex size-8 shrink-0 select-none overflow-hidden rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6",
className,
)}
{...props}
/>
);
}
function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
function AvatarImage({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
return (
<AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full", className)} {...props} />
<AvatarPrimitive.Image
data-slot="avatar-image"
className={cn("aspect-square size-full", className)}
{...props}
/>
);
}
function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
function AvatarFallback({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
className
"flex size-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
className,
)}
{...props}
/>
@@ -49,11 +59,11 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
<span
data-slot="avatar-badge"
className={cn(
"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
"absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background",
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
className
className,
)}
{...props}
/>
@@ -65,25 +75,35 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="avatar-group"
className={cn(
"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
className
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
className,
)}
{...props}
/>
);
}
function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
function AvatarGroupCount({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="avatar-group-count"
className={cn(
"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
className
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
className,
)}
{...props}
/>
);
}
export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };
export {
Avatar,
AvatarImage,
AvatarFallback,
AvatarBadge,
AvatarGroup,
AvatarGroupCount,
};

24
components/ui/badge.tsx
View File

@@ -1,19 +1,21 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border border-transparent px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
secondary:
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
outline:
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
link: "text-primary underline-offset-4 [a&]:hover:underline",
},
@@ -21,7 +23,7 @@ const badgeVariants = cva(
defaultVariants: {
variant: "default",
},
}
},
);
function Badge({
@@ -29,11 +31,17 @@ function Badge({
variant = "default",
asChild = false,
...props
}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span";
return (
<Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
<Comp
data-slot="badge"
data-variant={variant}
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
);
}

21
components/ui/button-group.tsx
View File

@@ -1,8 +1,7 @@
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
const buttonGroupVariants = cva(
"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
@@ -18,7 +17,7 @@ const buttonGroupVariants = cva(
defaultVariants: {
orientation: "horizontal",
},
}
},
);
function ButtonGroup({
@@ -49,8 +48,8 @@ function ButtonGroupText({
return (
<Comp
className={cn(
"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className
"flex items-center gap-2 rounded-md border bg-muted px-4 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
className,
)}
{...props}
/>
@@ -66,10 +65,18 @@ function ButtonGroupSeparator({
<Separator
data-slot="button-group-separator"
orientation={orientation}
className={cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className)}
className={cn(
"!m-0 relative self-stretch bg-input data-[orientation=vertical]:h-auto",
className,
)}
{...props}
/>
);
}
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
export {
ButtonGroup,
ButtonGroupSeparator,
ButtonGroupText,
buttonGroupVariants,
};

16
components/ui/button.tsx
View File

@@ -1,21 +1,23 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
outline:
"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
@@ -33,7 +35,7 @@ const buttonVariants = cva(
variant: "default",
size: "default",
},
}
},
);
function Button({

54
components/ui/card.tsx
View File

@@ -1,4 +1,4 @@
import * as React from "react";
import type * as React from "react";
import { cn } from "@/lib/utils";
@@ -6,7 +6,10 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}
className={cn(
"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
className,
)}
{...props}
/>
);
@@ -18,7 +21,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
className,
)}
{...props}
/>
@@ -26,31 +29,64 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
return (
<div
data-slot="card-title"
className={cn("font-semibold leading-none", className)}
{...props}
/>
);
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className,
)}
{...props}
/>
);
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
{...props}
/>
);
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
{...props}
/>
);
}
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
};

11
components/ui/checkbox.tsx
View File

@@ -1,18 +1,21 @@
"use client";
import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { CheckIcon } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";
function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
function Checkbox({
className,
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
className,
)}
{...props}
>

26
components/ui/collapsible.tsx
View File

@@ -2,16 +2,32 @@
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}
function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
function CollapsibleTrigger({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
);
}
function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
function CollapsibleContent({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
{...props}
/>
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

53
components/ui/dialog.tsx
View File

@@ -1,35 +1,45 @@
"use client";
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import type * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
}
function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
}
function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
}
function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
}
function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
/>
@@ -50,8 +60,8 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
className
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg outline-none duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
className,
)}
{...props}
>
@@ -59,7 +69,7 @@ function DialogContent({
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
>
<XIcon />
<span className="sr-only">Close</span>
@@ -91,7 +101,10 @@ function DialogFooter({
return (
<div
data-slot="dialog-footer"
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className,
)}
{...props}
>
{children}
@@ -104,17 +117,23 @@ function DialogFooter({
);
}
function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
className={cn("font-semibold text-lg leading-none", className)}
{...props}
/>
);
}
function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"

94
components/ui/dropdown-menu.tsx
View File

@@ -1,21 +1,34 @@
"use client";
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";
function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
);
}
function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
);
}
function DropdownMenuContent({
@@ -29,8 +42,8 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
/>
@@ -38,8 +51,12 @@ function DropdownMenuContent({
);
}
function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
);
}
function DropdownMenuItem({
@@ -57,8 +74,8 @@ function DropdownMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
"data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
/>
@@ -75,8 +92,8 @@ function DropdownMenuCheckboxItem({
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
checked={checked}
{...props}
@@ -91,8 +108,15 @@ function DropdownMenuCheckboxItem({
);
}
function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
);
}
function DropdownMenuRadioItem({
@@ -104,8 +128,8 @@ function DropdownMenuRadioItem({
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
>
@@ -130,33 +154,47 @@ function DropdownMenuLabel({
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
className={cn(
"px-2 py-1.5 font-medium text-sm data-[inset]:pl-8",
className,
)}
{...props}
/>
);
}
function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props}
/>
);
}
function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
className={cn(
"ml-auto text-muted-foreground text-xs tracking-widest",
className,
)}
{...props}
/>
);
}
function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
}
@@ -173,8 +211,8 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[inset]:pl-8 data-[state=open]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
>
@@ -192,8 +230,8 @@ function DropdownMenuSubContent({
<DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
/>

39
components/ui/empty.tsx
View File

@@ -7,8 +7,8 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="empty"
className={cn(
"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
className
"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
className,
)}
{...props}
/>
@@ -19,7 +19,10 @@ function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-header"
className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
className={cn(
"flex max-w-sm flex-col items-center gap-2 text-center",
className,
)}
{...props}
/>
);
@@ -31,13 +34,13 @@ const emptyMediaVariants = cva(
variants: {
variant: {
default: "bg-transparent",
icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
},
},
defaultVariants: {
variant: "default",
},
}
},
);
function EmptyMedia({
@@ -56,7 +59,13 @@ function EmptyMedia({
}
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="empty-title" className={cn("text-lg font-medium tracking-tight", className)} {...props} />;
return (
<div
data-slot="empty-title"
className={cn("font-medium text-lg tracking-tight", className)}
{...props}
/>
);
}
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -64,8 +73,8 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
<div
data-slot="empty-description"
className={cn(
"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
className
"text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className,
)}
{...props}
/>
@@ -76,10 +85,20 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-content"
className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className)}
className={cn(
"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
className,
)}
{...props}
/>
);
}
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };
export {
Empty,
EmptyHeader,
EmptyTitle,
EmptyDescription,
EmptyContent,
EmptyMedia,
};

99
components/ui/field.tsx
View File

@@ -1,11 +1,10 @@
"use client";
import { useMemo } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
return (
@@ -14,7 +13,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
className={cn(
"flex flex-col gap-6",
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
className
className,
)}
{...props}
/>
@@ -30,7 +29,12 @@ function FieldLegend({
<legend
data-slot="field-legend"
data-variant={variant}
className={cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className)}
className={cn(
"mb-3 font-medium",
"data-[variant=legend]:text-base",
"data-[variant=label]:text-sm",
className,
)}
{...props}
/>
);
@@ -42,33 +46,36 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
data-slot="field-group"
className={cn(
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
className
className,
)}
{...props}
/>
);
}
const fieldVariants = cva("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
variants: {
orientation: {
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
responsive: [
"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
const fieldVariants = cva(
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
{
variants: {
orientation: {
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
responsive: [
"@md/field-group:flex-row flex-col @md/field-group:items-center @md/field-group:[&>*]:w-auto [&>*]:w-full [&>.sr-only]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
},
},
defaultVariants: {
orientation: "vertical",
},
},
defaultVariants: {
orientation: "vertical",
},
});
);
function Field({
className,
@@ -90,21 +97,27 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-content"
className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
className={cn(
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
className,
)}
{...props}
/>
);
}
function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
function FieldLabel({
className,
...props
}: React.ComponentProps<typeof Label>) {
return (
<Label
data-slot="field-label"
className={cn(
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
className
"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
className,
)}
{...props}
/>
@@ -116,8 +129,8 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="field-label"
className={cn(
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
className
"flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50",
className,
)}
{...props}
/>
@@ -129,10 +142,10 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
<p
data-slot="field-description"
className={cn(
"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
"font-normal text-muted-foreground text-sm leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
className,
)}
{...props}
/>
@@ -150,13 +163,16 @@ function FieldSeparator({
<div
data-slot="field-separator"
data-content={!!children}
className={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
className={cn(
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
className,
)}
{...props}
>
<Separator className="absolute inset-0 top-1/2" />
{children && (
<span
className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
data-slot="field-separator-content"
>
{children}
@@ -183,15 +199,20 @@ function FieldError({
return null;
}
const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(),
];
if (uniqueErrors?.length == 1) {
if (uniqueErrors?.length === 1) {
return uniqueErrors[0]?.message;
}
return (
<ul className="ml-4 flex list-disc flex-col gap-1">
{uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
{uniqueErrors.map(
(error) =>
error?.message && <li key={error.message}>{error.message}</li>,
)}
</ul>
);
}, [children, errors]);
@@ -204,7 +225,7 @@ function FieldError({
<div
role="alert"
data-slot="field-error"
className={cn("text-destructive text-sm font-normal", className)}
className={cn("font-normal text-destructive text-sm", className)}
{...props}
>
{content}

88
components/ui/input-group.tsx
View File

@@ -1,12 +1,11 @@
"use client";
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import type * as React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
@@ -14,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
data-slot="input-group"
role="group"
className={cn(
"group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30",
"h-9 min-w-0 has-[>textarea]:h-auto",
// Variants based on alignment.
@@ -24,12 +23,12 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
// Focus state.
"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
// Error state.
"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
className
className,
)}
{...props}
/>
@@ -37,21 +36,24 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
}
const inputGroupAddonVariants = cva(
"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
"flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
{
variants: {
align: {
"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
"inline-start":
"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
"inline-end":
"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
"block-start":
"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
"block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
"block-end":
"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
},
},
defaultVariants: {
align: "inline-start",
},
}
},
);
function InputGroupAddon({
@@ -71,24 +73,34 @@ function InputGroupAddon({
}
e.currentTarget.parentElement?.querySelector("input")?.focus();
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
e.currentTarget.parentElement?.querySelector("input")?.focus();
}
}}
{...props}
/>
);
}
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
variants: {
size: {
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
const inputGroupButtonVariants = cva(
"flex items-center gap-2 text-sm shadow-none",
{
variants: {
size: {
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
"icon-xs":
"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
},
},
defaultVariants: {
size: "xs",
},
},
defaultVariants: {
size: "xs",
},
});
);
function InputGroupButton({
className,
@@ -96,7 +108,8 @@ function InputGroupButton({
variant = "ghost",
size = "xs",
...props
}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) {
}: Omit<React.ComponentProps<typeof Button>, "size"> &
VariantProps<typeof inputGroupButtonVariants>) {
return (
<Button
type={type}
@@ -112,38 +125,51 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
className={cn(
"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className
"flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
className,
)}
{...props}
/>
);
}
function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
function InputGroupInput({
className,
...props
}: React.ComponentProps<"input">) {
return (
<Input
data-slot="input-group-control"
className={cn(
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
className
className,
)}
{...props}
/>
);
}
function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
function InputGroupTextarea({
className,
...props
}: React.ComponentProps<"textarea">) {
return (
<Textarea
data-slot="input-group-control"
className={cn(
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
className
className,
)}
{...props}
/>
);
}
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };
export {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupText,
InputGroupInput,
InputGroupTextarea,
};

10
components/ui/input.tsx
View File

@@ -1,4 +1,4 @@
import * as React from "react";
import type * as React from "react";
import { cn } from "@/lib/utils";
@@ -8,10 +8,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
className,
)}
{...props}
/>

72
components/ui/item.tsx
View File

@@ -1,22 +1,36 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import type * as React from "react";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div role="list" data-slot="item-group" className={cn("group/item-group flex flex-col", className)} {...props} />
<div
role="list"
data-slot="item-group"
className={cn("group/item-group flex flex-col", className)}
{...props}
/>
);
}
function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
return <Separator data-slot="item-separator" orientation="horizontal" className={cn("my-0", className)} {...props} />;
function ItemSeparator({
className,
...props
}: React.ComponentProps<typeof Separator>) {
return (
<Separator
data-slot="item-separator"
orientation="horizontal"
className={cn("my-0", className)}
{...props}
/>
);
}
const itemVariants = cva(
"group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
{
variants: {
variant: {
@@ -33,7 +47,7 @@ const itemVariants = cva(
variant: "default",
size: "default",
},
}
},
);
function Item({
@@ -42,7 +56,8 @@ function Item({
size = "default",
asChild = false,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
}: React.ComponentProps<"div"> &
VariantProps<typeof itemVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "div";
return (
<Comp
@@ -61,14 +76,15 @@ const itemMediaVariants = cva(
variants: {
variant: {
default: "bg-transparent",
icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
image:
"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
},
},
defaultVariants: {
variant: "default",
},
}
},
);
function ItemMedia({
@@ -90,7 +106,10 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="item-content"
className={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
className={cn(
"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
className,
)}
{...props}
/>
);
@@ -100,7 +119,10 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="item-title"
className={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
className={cn(
"flex w-fit items-center gap-2 font-medium text-sm leading-snug",
className,
)}
{...props}
/>
);
@@ -111,9 +133,9 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
<p
data-slot="item-description"
className={cn(
"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
"line-clamp-2 text-balance font-normal text-muted-foreground text-sm leading-normal",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
className,
)}
{...props}
/>
@@ -121,14 +143,23 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
}
function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="item-actions" className={cn("flex items-center gap-2", className)} {...props} />;
return (
<div
data-slot="item-actions"
className={cn("flex items-center gap-2", className)}
{...props}
/>
);
}
function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="item-header"
className={cn("flex basis-full items-center justify-between gap-2", className)}
className={cn(
"flex basis-full items-center justify-between gap-2",
className,
)}
{...props}
/>
);
@@ -138,7 +169,10 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="item-footer"
className={cn("flex basis-full items-center justify-between gap-2", className)}
className={cn(
"flex basis-full items-center justify-between gap-2",
className,
)}
{...props}
/>
);

11
components/ui/label.tsx
View File

@@ -1,17 +1,20 @@
"use client";
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import type * as React from "react";
import { cn } from "@/lib/utils";
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
"flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
className,
)}
{...props}
/>

57
components/ui/popover.tsx
View File

@@ -1,15 +1,19 @@
"use client";
import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import type * as React from "react";
import { cn } from "@/lib/utils";
function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
function Popover({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
}
function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
function PopoverTrigger({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
}
@@ -26,8 +30,8 @@ function PopoverContent({
align={align}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
/>
@@ -35,20 +39,51 @@ function PopoverContent({
);
}
function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
function PopoverAnchor({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
}
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="popover-header" className={cn("flex flex-col gap-1 text-sm", className)} {...props} />;
return (
<div
data-slot="popover-header"
className={cn("flex flex-col gap-1 text-sm", className)}
{...props}
/>
);
}
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
return <div data-slot="popover-title" className={cn("font-medium", className)} {...props} />;
return (
<div
data-slot="popover-title"
className={cn("font-medium", className)}
{...props}
/>
);
}
function PopoverDescription({ className, ...props }: React.ComponentProps<"p">) {
return <p data-slot="popover-description" className={cn("text-muted-foreground", className)} {...props} />;
function PopoverDescription({
className,
...props
}: React.ComponentProps<"p">) {
return (
<p
data-slot="popover-description"
className={cn("text-muted-foreground", className)}
{...props}
/>
);
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription };
export {
Popover,
PopoverTrigger,
PopoverContent,
PopoverAnchor,
PopoverHeader,
PopoverTitle,
PopoverDescription,
};

26
components/ui/radio-group.tsx
View File

@@ -1,22 +1,34 @@
"use client";
import * as React from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { CircleIcon } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";
function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid gap-3", className)} {...props} />;
function RadioGroup({
className,
...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
return (
<RadioGroupPrimitive.Root
data-slot="radio-group"
className={cn("grid gap-3", className)}
{...props}
/>
);
}
function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
function RadioGroupItem({
className,
...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
return (
<RadioGroupPrimitive.Item
data-slot="radio-group-item"
className={cn(
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
"aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
className,
)}
{...props}
>
@@ -24,7 +36,7 @@ function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof Rad
data-slot="radio-group-indicator"
className="relative flex items-center justify-center"
>
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
<CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
);

28
components/ui/scroll-area.tsx
View File

@@ -1,16 +1,24 @@
"use client";
import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import type * as React from "react";
import { cn } from "@/lib/utils";
function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
function ScrollArea({
className,
children,
...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
return (
<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
<ScrollAreaPrimitive.Root
data-slot="scroll-area"
className={cn("relative", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
>
{children}
</ScrollAreaPrimitive.Viewport>
@@ -30,16 +38,18 @@ function ScrollBar({
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
"flex touch-none p-px transition-colors select-none",
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
className
"flex touch-none select-none p-px transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent",
className,
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb"
className="bg-border relative flex-1 rounded-full"
className="relative flex-1 rounded-full bg-border"
/>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
);

70
components/ui/select.tsx
View File

@@ -1,20 +1,26 @@
"use client";
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";
function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
function Select({
...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />;
}
function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
function SelectGroup({
...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}
function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
function SelectValue({
...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}
@@ -31,8 +37,8 @@ function SelectTrigger({
data-slot="select-trigger"
data-size={size}
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
"flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
>
@@ -56,10 +62,10 @@ function SelectContent({
<SelectPrimitive.Content
data-slot="select-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
"data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
className,
)}
position={position}
align={align}
@@ -70,7 +76,7 @@ function SelectContent({
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
)}
>
{children}
@@ -81,27 +87,37 @@ function SelectContent({
);
}
function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
function SelectLabel({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
return (
<SelectPrimitive.Label
data-slot="select-label"
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
className={cn("px-2 py-1.5 text-muted-foreground text-xs", className)}
{...props}
/>
);
}
function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
function SelectItem({
className,
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
return (
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
"relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className,
)}
{...props}
>
<span data-slot="select-item-indicator" className="absolute right-2 flex size-3.5 items-center justify-center">
<span
data-slot="select-item-indicator"
className="absolute right-2 flex size-3.5 items-center justify-center"
>
<SelectPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</SelectPrimitive.ItemIndicator>
@@ -111,21 +127,30 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
);
}
function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
function SelectSeparator({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
{...props}
/>
);
}
function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn("flex cursor-default items-center justify-center py-1", className)}
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
{...props}
>
<ChevronUpIcon className="size-4" />
@@ -140,7 +165,10 @@ function SelectScrollDownButton({
return (
<SelectPrimitive.ScrollDownButton
data-slot="select-scroll-down-button"
className={cn("flex cursor-default items-center justify-center py-1", className)}
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
{...props}
>
<ChevronDownIcon className="size-4" />

6
components/ui/separator.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import type * as React from "react";
import { cn } from "@/lib/utils";
@@ -17,8 +17,8 @@ function Separator({
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
className,
)}
{...props}
/>

8
components/ui/skeleton.tsx
View File

@@ -1,7 +1,13 @@
import { cn } from "@/lib/utils";
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="skeleton" className={cn("bg-accent animate-pulse rounded-md", className)} {...props} />;
return (
<div
data-slot="skeleton"
className={cn("animate-pulse rounded-md bg-accent", className)}
{...props}
/>
);
}
export { Skeleton };

8
components/ui/sonner.tsx
View File

@@ -1,6 +1,12 @@
"use client";
import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
} from "lucide-react";
import { useTheme } from "next-themes";
import { Toaster as Sonner, type ToasterProps } from "sonner";

9
components/ui/spinner.tsx
View File

@@ -3,7 +3,14 @@ import { Loader2Icon } from "lucide-react";
import { cn } from "@/lib/utils";
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />;
return (
<Loader2Icon
role="status"
aria-label="Loading"
className={cn("size-4 animate-spin", className)}
{...props}
/>
);
}
export { Spinner };

8
components/ui/switch.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
import * as SwitchPrimitive from "@radix-ui/react-switch";
import type * as React from "react";
import { cn } from "@/lib/utils";
@@ -17,15 +17,15 @@ function Switch({
data-slot="switch"
data-size={size}
className={cn(
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
className
"peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=sm]:h-3.5 data-[size=default]:w-8 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
className,
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
"pointer-events-none block rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
)}
/>
</SwitchPrimitive.Root>

46
components/ui/tabs.tsx
View File

@@ -1,25 +1,32 @@
"use client";
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
function Tabs({
className,
orientation = "horizontal",
...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
return (
<TabsPrimitive.Root
data-slot="tabs"
data-orientation={orientation}
orientation={orientation}
className={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
className={cn(
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
className,
)}
{...props}
/>
);
}
const tabsListVariants = cva(
"group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground data-[variant=line]:rounded-none group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
{
variants: {
variant: {
@@ -30,14 +37,15 @@ const tabsListVariants = cva(
defaultVariants: {
variant: "default",
},
}
},
);
function TabsList({
className,
variant = "default",
...props
}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
}: React.ComponentProps<typeof TabsPrimitive.List> &
VariantProps<typeof tabsListVariants>) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
@@ -48,24 +56,36 @@ function TabsList({
);
}
function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
function TabsTrigger({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
return (
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
className={cn(
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
className
"data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
className,
)}
{...props}
/>
);
}
function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />;
function TabsContent({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
return (
<TabsPrimitive.Content
data-slot="tabs-content"
className={cn("flex-1 outline-none", className)}
{...props}
/>
);
}
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

6
components/ui/textarea.tsx
View File

@@ -1,4 +1,4 @@
import * as React from "react";
import type * as React from "react";
import { cn } from "@/lib/utils";
@@ -7,8 +7,8 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
<textarea
data-slot="textarea"
className={cn(
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
"field-sizing-content flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
className,
)}
{...props}
/>

20
components/ui/toggle-group.tsx
View File

@@ -1,11 +1,10 @@
"use client";
import * as React from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import { type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import { toggleVariants } from "@/components/ui/toggle";
import { cn } from "@/lib/utils";
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants> & {
@@ -37,11 +36,13 @@ function ToggleGroup({
style={{ "--gap": spacing } as React.CSSProperties}
className={cn(
"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
className
className,
)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size, spacing }}>{children}</ToggleGroupContext.Provider>
<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
);
}
@@ -52,7 +53,8 @@ function ToggleGroupItem({
variant,
size,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>) {
const context = React.useContext(ToggleGroupContext);
return (
@@ -67,8 +69,8 @@ function ToggleGroupItem({
size: context.size || size,
}),
"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
className
"data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:first:border-l data-[spacing=0]:first:rounded-l-md",
className,
)}
{...props}
>

18
components/ui/toggle.tsx
View File

@@ -1,18 +1,19 @@
"use client";
import * as React from "react";
import * as TogglePrimitive from "@radix-ui/react-toggle";
import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { cn } from "@/lib/utils";
const toggleVariants = cva(
"hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-transparent",
outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
outline:
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-9 min-w-9 px-2",
@@ -24,7 +25,7 @@ const toggleVariants = cva(
variant: "default",
size: "default",
},
}
},
);
function Toggle({
@@ -32,9 +33,14 @@ function Toggle({
variant,
size,
...props
}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
}: React.ComponentProps<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>) {
return (
<TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
<TogglePrimitive.Root
data-slot="toggle"
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
);
}

29
components/ui/tooltip.tsx
View File

@@ -1,15 +1,26 @@
"use client";
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import type * as React from "react";
import { cn } from "@/lib/utils";
function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
function TooltipProvider({
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
);
}
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -17,7 +28,9 @@ function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root
);
}
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}
@@ -33,13 +46,13 @@ function TooltipContent({
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
className
"fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=closed]:animate-out",
className,
)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
);

11
components/video.tsx
View File

@@ -36,7 +36,16 @@ const Video = ({
const extension = file.split(".").pop();
if (extension === "vtt") {
return <track key={file} kind="subtitles" src={file} srcLang="en" label="English" default />;
return (
<track
key={file}
kind="subtitles"
src={file}
srcLang="en"
label="English"
default
/>
);
} else {
return <source key={file} src={file} type={`video/${extension}`} />;
}

6
components/view-counter.tsx
View File

@@ -1,8 +1,8 @@
"use client";
import { useEffect, useState } from "react";
import { env } from "@/lib/env";
import { CountUp } from "@/components/count-up";
import { env } from "@/lib/env";
import { incrementViews } from "@/lib/server/views";
const ViewCounter = ({ slug }: { slug: string }) => {
@@ -30,7 +30,9 @@ const ViewCounter = ({ slug }: { slug: string }) => {
}
return (
<span title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(views)} ${views === 1 ? "view" : "views"}`}>
<span
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(views)} ${views === 1 ? "view" : "views"}`}
>
<CountUp start={0} end={views} delay={0} duration={1.5} />
</span>
);

3
drizzle.config.ts
View File

@@ -3,9 +3,10 @@ import { defineConfig } from "drizzle-kit";
export default defineConfig({
schema: "./lib/db/schema.ts",
out: "./lib/db/migrations",
out: "./drizzle",
dialect: "postgresql",
dbCredentials: {
// biome-ignore lint/style/noNonNullAssertion: runs outside Next.js; can't use env helper from @t3-oss/env-nextjs
url: process.env.DATABASE_URL!,
},
});

0
lib/db/migrations/0000_puzzling_sphinx.sql → drizzle/0000_puzzling_sphinx.sql
View File

0
lib/db/migrations/meta/0000_snapshot.json → drizzle/meta/0000_snapshot.json
View File

0
lib/db/migrations/meta/_journal.json → drizzle/meta/_journal.json
View File

81
eslint.config.mjs
View File

@@ -1,81 +0,0 @@
import { defineConfig, globalIgnores } from "eslint/config";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
import * as eslintPluginMdx from "eslint-plugin-mdx";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import eslintCustomConfig from "@jakejarvis/eslint-config";
/** @type {import("@eslint/eslintrc").FlatCompat} */
const compat = new FlatCompat({
baseDirectory: import.meta.dirname,
recommendedConfig: js.configs.recommended,
});
const eslintConfig = defineConfig([
// Next.js core-web-vitals and TypeScript configs
...nextVitals,
...nextTs,
// Other plugins via compat
...compat.config({
plugins: ["react-compiler", "css-modules"],
extends: ["plugin:css-modules/recommended", "plugin:drizzle/recommended"],
}),
// Custom configs
...eslintCustomConfig,
eslintPluginPrettierRecommended,
// Custom rules
{
rules: {
camelcase: [
"error",
{
allow: ["^experimental_", "^unstable_"],
},
],
"prettier/prettier": [
"error",
{},
{
usePrettierrc: true,
},
],
},
},
{
files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
rules: {
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "warn",
"react-compiler/react-compiler": "error",
},
},
// MDX support
{
...eslintPluginMdx.flat,
processor: eslintPluginMdx.createRemarkProcessor({
lintCodeBlocks: false,
}),
rules: {
...eslintPluginMdx.flat.rules,
"mdx/remark": "warn", // keep as warn (matches default)
"mdx/code-blocks": "off",
"react/jsx-no-undef": "off", // components are injected automatically from mdx-components.ts
"react/no-unescaped-entities": "off",
"@typescript-eslint/no-unused-vars": "off", // MDX files often import components that are used implicitly
},
},
// Ignores (override Next.js defaults)
globalIgnores([
".next/**",
"out/**",
"build/**",
".vercel/**",
"next-env.d.ts",
"node_modules/**",
"lib/db/migrations/**",
]),
]);
export default eslintConfig;

2
lib/auth-client.ts
View File

@@ -1,5 +1,5 @@
import { env } from "@/lib/env";
import { createAuthClient } from "better-auth/react";
import { env } from "@/lib/env";
export const authClient = createAuthClient({
baseURL: env.NEXT_PUBLIC_BASE_URL,

6
lib/auth.ts
View File

@@ -1,9 +1,9 @@
import { env } from "@/lib/env";
import { betterAuth, type BetterAuthOptions } from "better-auth";
import { nextCookies } from "better-auth/next-js";
import { type BetterAuthOptions, betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { nextCookies } from "better-auth/next-js";
import { db } from "@/lib/db";
import * as schema from "@/lib/db/schema";
import { env } from "@/lib/env";
export const auth = betterAuth({
baseURL: env.NEXT_PUBLIC_BASE_URL,

16
lib/build-feed.ts
View File

@@ -1,10 +1,9 @@
import { env } from "@/lib/env";
import { Feed, type Item as FeedItem } from "feed";
import { getFrontMatter, getContent } from "@/lib/posts";
import siteConfig from "@/lib/config/site";
import authorConfig from "@/lib/config/author";
import ogImage from "@/app/opengraph-image.jpg";
import authorConfig from "@/lib/config/author";
import siteConfig from "@/lib/config/site";
import { env } from "@/lib/env";
import { getContent, getFrontMatter } from "@/lib/posts";
/**
* Returns a `Feed` object, which can then be processed with `feed.rss2()`, `feed.atom1()`, or `feed.json1()`.
@@ -49,11 +48,14 @@ export const buildFeed = async (): Promise<Feed> => {
${await getContent(post.slug)}
<p><a href="${post.permalink}"><strong>Continue reading...</strong></a></p>
`.trim(),
}))
})),
);
// sort posts reverse chronologically in case the promises resolved out of order
posts.sort((post1, post2) => new Date(post2.date).getTime() - new Date(post1.date).getTime());
posts.sort(
(post1, post2) =>
new Date(post2.date).getTime() - new Date(post1.date).getTime(),
);
// officially add each post to the feed
posts.forEach((post) => {

4
lib/db/index.ts
View File

@@ -1,8 +1,8 @@
import { env } from "@/lib/env";
import * as schema from "@/lib/db/schema";
import { attachDatabasePool } from "@vercel/functions";
import { drizzle } from "drizzle-orm/node-postgres";
import { Pool } from "pg";
import * as schema from "@/lib/db/schema";
import { env } from "@/lib/env";
// Create explicit pool instance for better connection management
const pool = new Pool({

14
lib/db/schema.ts
View File

@@ -1,4 +1,12 @@
import { pgTable, text, timestamp, boolean, integer, uuid, type AnyPgColumn } from "drizzle-orm/pg-core";
import {
type AnyPgColumn,
boolean,
integer,
pgTable,
text,
timestamp,
uuid,
} from "drizzle-orm/pg-core";
export const user = pgTable("user", {
id: text("id").primaryKey(),
@@ -61,7 +69,9 @@ export const comment = pgTable("comment", {
pageSlug: text("page_slug")
.notNull()
.references(() => page.slug),
parentId: uuid("parent_id").references((): AnyPgColumn => comment.id, { onDelete: "cascade" }),
parentId: uuid("parent_id").references((): AnyPgColumn => comment.id, {
onDelete: "cascade",
}),
userId: text("user_id")
.notNull()
.references(() => user.id, { onDelete: "cascade" }),

4
lib/env.ts
View File

@@ -89,7 +89,7 @@ export const env = createEnv({
? `${process.env.DEPLOY_URL}`
: undefined
: undefined) ||
`http://localhost:${process.env.PORT || 3000}`)()
`http://localhost:${process.env.PORT || 3000}`)(),
),
/**
@@ -102,7 +102,7 @@ export const env = createEnv({
(process.env.VERCEL && process.env.VERCEL_ENV === "production") ||
(process.env.NETLIFY && process.env.CONTEXT === "production")
? "production"
: "development")()
: "development")(),
),
/** Required. GitHub repository for the site in the format of `{username}/{repo}`. */

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