mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-06-05 19:15:30 -04:00
homebrew comments system
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { ActivityCalendar } from "react-activity-calendar";
|
||||
import { format } from "date-fns";
|
||||
import { formatDate } from "@/lib/date";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
import type { Activity } from "react-activity-calendar";
|
||||
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
|
||||
@@ -48,7 +48,7 @@ const Calendar = ({
|
||||
<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 ${format(activity.date, "MMMM do")}`}</span>
|
||||
<span className="text-[0.825rem] font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${formatDate(activity.date, "MMMM do")}`}</span>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { env } from "@/lib/env";
|
||||
import Giscus from "@giscus/react";
|
||||
import type { GiscusProps } from "@giscus/react";
|
||||
|
||||
const Comments = ({ title }: { title: string }) => {
|
||||
// fail silently if giscus isn't configured
|
||||
if (!env.NEXT_PUBLIC_GISCUS_REPO_ID || !env.NEXT_PUBLIC_GISCUS_CATEGORY_ID) {
|
||||
console.warn(
|
||||
"[giscus] not configured, ensure 'NEXT_PUBLIC_GISCUS_REPO_ID' and 'NEXT_PUBLIC_GISCUS_CATEGORY_ID' environment variables are set."
|
||||
);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Giscus
|
||||
repo={env.NEXT_PUBLIC_GITHUB_REPO as GiscusProps["repo"]}
|
||||
repoId={env.NEXT_PUBLIC_GISCUS_REPO_ID}
|
||||
term={title}
|
||||
category="Comments"
|
||||
categoryId={env.NEXT_PUBLIC_GISCUS_CATEGORY_ID}
|
||||
mapping="specific"
|
||||
reactionsEnabled="1"
|
||||
emitMetadata="0"
|
||||
inputPosition="top"
|
||||
theme="preferred_color_scheme"
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Comments;
|
||||
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ReplyIcon, EditIcon, Trash2Icon, EllipsisIcon, Loader2Icon } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import Button from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import Form from "./comment-form";
|
||||
import { useSession } from "@/lib/auth-client";
|
||||
import { deleteComment, type CommentWithUser } from "@/lib/server/comments";
|
||||
|
||||
const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
|
||||
const [isReplying, setIsReplying] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const { data: session } = useSession();
|
||||
|
||||
if (!session) return null;
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("Are you sure you want to delete this comment?")) return;
|
||||
|
||||
setIsDeleting(true);
|
||||
|
||||
try {
|
||||
await deleteComment(comment.id);
|
||||
toast.success("Your comment has been deleted successfully.");
|
||||
} catch (error) {
|
||||
console.error("Error deleting comment:", error);
|
||||
toast.error("Failed to delete comment. Please try again.");
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4">
|
||||
{isEditing ? (
|
||||
<Form
|
||||
slug={comment.pageSlug}
|
||||
initialContent={comment.content}
|
||||
commentId={comment.id}
|
||||
onCancel={() => setIsEditing(false)}
|
||||
onSuccess={() => setIsEditing(false)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setIsReplying(!isReplying)} className="h-8 px-2">
|
||||
<ReplyIcon className="mr-1 h-3.5 w-3.5" />
|
||||
Reply
|
||||
</Button>
|
||||
|
||||
{session.user.id === comment.user.id && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-8 px-2 text-xs">
|
||||
<EllipsisIcon />
|
||||
<span className="sr-only">Actions Menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={() => setIsEditing(!isEditing)}>
|
||||
<EditIcon />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleDelete} disabled={isDeleting} variant="destructive">
|
||||
{isDeleting ? <Loader2Icon className="animate-spin" /> : <Trash2Icon />}
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isReplying && (
|
||||
<div className="mt-4">
|
||||
<Form
|
||||
slug={comment.pageSlug}
|
||||
parentId={comment.id}
|
||||
onCancel={() => setIsReplying(false)}
|
||||
onSuccess={() => setIsReplying(false)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentActions;
|
||||
@@ -0,0 +1,194 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { getImageProps } from "next/image";
|
||||
import { InfoIcon, Loader2Icon } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import Button from "@/components/ui/button";
|
||||
import Textarea from "@/components/ui/textarea";
|
||||
import Link from "@/components/link";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { MarkdownIcon } from "@/components/icons";
|
||||
import { useSession } from "@/lib/auth-client";
|
||||
import { createComment, updateComment } from "@/lib/server/comments";
|
||||
import type { FormEvent } from "react";
|
||||
|
||||
const CommentForm = ({
|
||||
slug,
|
||||
parentId,
|
||||
commentId,
|
||||
initialContent = "",
|
||||
onCancel,
|
||||
onSuccess,
|
||||
}: {
|
||||
slug: string;
|
||||
parentId?: string;
|
||||
commentId?: string;
|
||||
initialContent?: string;
|
||||
onCancel?: () => void;
|
||||
onSuccess?: () => void;
|
||||
}) => {
|
||||
const [content, setContent] = useState(initialContent);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const isEditing = !!commentId;
|
||||
const isReplying = !!parentId;
|
||||
|
||||
const { data: session } = useSession();
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!content.trim()) {
|
||||
toast.error("Comment cannot be empty.");
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
if (isEditing) {
|
||||
await updateComment(commentId, content);
|
||||
toast.success("Comment updated!");
|
||||
} else {
|
||||
await createComment({
|
||||
content,
|
||||
parentId,
|
||||
pageSlug: slug,
|
||||
});
|
||||
toast.success("Comment posted!");
|
||||
}
|
||||
|
||||
// Reset form if not editing
|
||||
if (!isEditing) {
|
||||
setContent("");
|
||||
}
|
||||
|
||||
// Call success callback if provided
|
||||
onSuccess?.();
|
||||
} catch (error) {
|
||||
console.error("Error submitting comment:", error);
|
||||
toast.error("Failed to submit comment. Please try again.");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4" data-intent={isEditing ? "edit" : "create"}>
|
||||
<div className="flex gap-4">
|
||||
{!isEditing && (
|
||||
<div className="shrink-0">
|
||||
<Avatar className="size-10">
|
||||
{session?.user.image && (
|
||||
<AvatarImage
|
||||
{...getImageProps({
|
||||
src: session.user.image,
|
||||
alt: `@${session.user.name}'s avatar`,
|
||||
width: 40,
|
||||
height: 40,
|
||||
}).props}
|
||||
width={undefined}
|
||||
height={undefined}
|
||||
/>
|
||||
)}
|
||||
<AvatarFallback>{session?.user.name.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="min-w-0 flex-1 space-y-4">
|
||||
<Textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder={isReplying ? "Reply to this comment..." : "Write your thoughts..."}
|
||||
className="min-h-[4lh] w-full"
|
||||
disabled={isPending}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between gap-4">
|
||||
<div>
|
||||
{/* Only show the markdown help text if the comment is new */}
|
||||
{!isEditing && !isReplying && (
|
||||
<p className="text-muted-foreground text-[0.8rem] leading-relaxed">
|
||||
<MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" />
|
||||
<span className="max-md:hidden">Basic </span>
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<span className="text-primary decoration-primary/40 cursor-pointer font-semibold no-underline decoration-2 underline-offset-4 hover:underline">
|
||||
<span>Markdown</span>
|
||||
<span className="max-md:hidden"> syntax</span>
|
||||
</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start">
|
||||
<p className="text-sm leading-loose">
|
||||
<InfoIcon className="mr-1.5 inline size-4.5 align-text-top" />
|
||||
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">
|
||||
<li>
|
||||
<span className="font-bold">**bold**</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="italic">_italics_</span>
|
||||
</li>
|
||||
<li>
|
||||
[
|
||||
<Link href="https://jarv.is" className="hover:no-underline">
|
||||
links
|
||||
</Link>
|
||||
](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>
|
||||
</li>
|
||||
<li>
|
||||
~~<span className="line-through">strikethrough</span>~~
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className="text-sm leading-loose">
|
||||
<Link href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">
|
||||
Learn more.
|
||||
</Link>
|
||||
</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<span> is supported</span>
|
||||
<span className="max-md:hidden"> here</span>
|
||||
<span>.</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
{(onCancel || isEditing) && (
|
||||
<Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={isPending || !content.trim()}>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
|
||||
{isEditing ? "Updating..." : "Posting..."}
|
||||
</>
|
||||
) : isEditing ? (
|
||||
"Edit"
|
||||
) : isReplying ? (
|
||||
"Reply"
|
||||
) : (
|
||||
"Comment"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentForm;
|
||||
@@ -0,0 +1,71 @@
|
||||
import { getImageProps } from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import Link from "@/components/link";
|
||||
import RelativeTime from "@/components/relative-time";
|
||||
import Actions from "./comment-actions";
|
||||
import { remarkGfm, remarkSmartypants } from "@/lib/remark";
|
||||
import { rehypeExternalLinks } from "@/lib/rehype";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { CommentWithUser } from "@/lib/server/comments";
|
||||
|
||||
const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
|
||||
const divId = `comment-${comment.id.substring(0, 8)}`;
|
||||
|
||||
return (
|
||||
<div className="group scroll-mt-4" id={divId}>
|
||||
<div className="flex gap-4">
|
||||
<div className="shrink-0">
|
||||
<Avatar className="size-8 md:size-10">
|
||||
{comment.user.image && (
|
||||
<AvatarImage
|
||||
{...getImageProps({
|
||||
src: comment.user.image,
|
||||
alt: `@${comment.user.name}'s avatar`,
|
||||
width: 40,
|
||||
height: 40,
|
||||
}).props}
|
||||
width={undefined}
|
||||
height={undefined}
|
||||
/>
|
||||
)}
|
||||
<AvatarFallback>{comment.user.name.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<Link href={`https://github.com/${comment.user.name}`} className="font-medium hover:no-underline">
|
||||
@{comment.user.name}
|
||||
</Link>
|
||||
<Link href={`#${divId}`} className="text-muted-foreground text-xs leading-none hover:no-underline">
|
||||
<RelativeTime date={comment.createdAt} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div
|
||||
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
|
||||
)}
|
||||
>
|
||||
<Markdown
|
||||
remarkPlugins={[remarkGfm, remarkSmartypants]}
|
||||
rehypePlugins={[[rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer nofollow" }]]}
|
||||
allowedElements={["p", "a", "em", "strong", "code", "pre", "blockquote", "del"]}
|
||||
>
|
||||
{comment.content}
|
||||
</Markdown>
|
||||
</div>
|
||||
|
||||
<Actions comment={comment} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentSingle;
|
||||
@@ -0,0 +1,40 @@
|
||||
import Single from "./comment-single";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { CommentWithUser } from "@/lib/server/comments";
|
||||
|
||||
const CommentThread = ({
|
||||
comment,
|
||||
replies,
|
||||
allComments,
|
||||
level = 0,
|
||||
}: {
|
||||
comment: CommentWithUser;
|
||||
replies: CommentWithUser[];
|
||||
allComments: Record<string, CommentWithUser[]>;
|
||||
level?: number;
|
||||
}) => {
|
||||
// Limit nesting to 3 levels
|
||||
const maxLevel = 2;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Single comment={comment} />
|
||||
|
||||
{replies.length > 0 && (
|
||||
<div className={cn("mt-6 space-y-6", level < maxLevel && "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 default CommentThread;
|
||||
@@ -0,0 +1,26 @@
|
||||
import Skeleton from "@/components/ui/skeleton";
|
||||
|
||||
const CommentsSkeleton = () => {
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentsSkeleton;
|
||||
@@ -0,0 +1,64 @@
|
||||
import { headers } from "next/headers";
|
||||
import Form from "./comment-form";
|
||||
import Thread 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, closed = false }: { slug: string; closed?: boolean }) => {
|
||||
const session = await auth.api.getSession({
|
||||
headers: await headers(),
|
||||
});
|
||||
|
||||
const comments = await getComments(slug);
|
||||
|
||||
const commentsByParentId = comments.reduce(
|
||||
(acc, comment) => {
|
||||
const parentId = comment.parentId || "root";
|
||||
if (!acc[parentId]) {
|
||||
acc[parentId] = [];
|
||||
}
|
||||
acc[parentId].push(comment);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, CommentWithUser[]>
|
||||
);
|
||||
|
||||
const rootComments = commentsByParentId["root"] || [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{closed ? (
|
||||
<div className="bg-muted/40 flex min-h-32 items-center justify-center rounded-lg p-6">
|
||||
<p className="text-center font-medium">Comments are closed for this post.</p>
|
||||
</div>
|
||||
) : !session ? (
|
||||
<div className="bg-muted/40 flex flex-col items-center justify-center rounded-lg p-6">
|
||||
<p className="mb-4 text-center font-medium">Join the discussion by signing in:</p>
|
||||
<SignIn callbackPath={`/${slug}#comments`} />
|
||||
</div>
|
||||
) : (
|
||||
<Form slug={slug} />
|
||||
)}
|
||||
|
||||
{!closed && rootComments.length === 0 ? (
|
||||
<div className="text-foreground/80 py-8 text-center text-lg font-medium tracking-tight">
|
||||
Be the first to comment!
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{rootComments.map((comment: CommentWithUser) => (
|
||||
<Thread
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
replies={commentsByParentId[comment.id] || []}
|
||||
allComments={commentsByParentId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Comments;
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { env } from "@/lib/env";
|
||||
import { useState } from "react";
|
||||
import { Loader2Icon } from "lucide-react";
|
||||
import Button from "@/components/ui/button";
|
||||
import { GitHubIcon } from "@/components/icons";
|
||||
import { signIn } from "@/lib/auth-client";
|
||||
|
||||
const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSignIn = async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await signIn.social({
|
||||
provider: "github",
|
||||
callbackURL: `${env.NEXT_PUBLIC_BASE_URL}${callbackPath ? callbackPath : "/"}`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error signing in:", error);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Button onClick={handleSignIn} disabled={isLoading} size="lg" variant="outline">
|
||||
{isLoading ? <Loader2Icon className="animate-spin" /> : <GitHubIcon />}
|
||||
Sign in with GitHub
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignIn;
|
||||
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { env } from "@/lib/env";
|
||||
import { useActionState, useState } from "react";
|
||||
import { Turnstile } from "@marsidev/react-turnstile";
|
||||
import { SendIcon, Loader2Icon, CheckIcon, XIcon } from "lucide-react";
|
||||
import Link from "@/components/link";
|
||||
import Input from "@/components/ui/input";
|
||||
import Textarea from "@/components/ui/textarea";
|
||||
import Button from "@/components/ui/button";
|
||||
import { MarkdownIcon } from "@/components/icons";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { send, type ContactState, type ContactInput } from "@/lib/server/resend";
|
||||
|
||||
const ContactForm = () => {
|
||||
const [formState, formAction, pending] = useActionState<ContactState, FormData>(send, {
|
||||
success: false,
|
||||
message: "",
|
||||
});
|
||||
|
||||
// keep track of input so we can repopulate the fields if the form fails
|
||||
const [formFields, setFormFields] = useState<Partial<ContactInput>>({
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
return (
|
||||
<form action={formAction} className="my-6 space-y-4">
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
value={formFields.name}
|
||||
onChange={(e) => {
|
||||
setFormFields({ ...formFields, name: e.target.value });
|
||||
}}
|
||||
disabled={pending || formState.success}
|
||||
aria-invalid={formState.errors?.name ? "true" : undefined}
|
||||
/>
|
||||
{formState.errors?.name && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">{formState.errors.name[0]}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
inputMode="email"
|
||||
value={formFields.email}
|
||||
onChange={(e) => {
|
||||
setFormFields({ ...formFields, email: e.target.value });
|
||||
}}
|
||||
disabled={pending || formState.success}
|
||||
aria-invalid={formState.errors?.email ? "true" : undefined}
|
||||
/>
|
||||
{formState.errors?.email && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">{formState.errors.email[0]}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Textarea
|
||||
name="message"
|
||||
placeholder="Write something..."
|
||||
value={formFields.message}
|
||||
onChange={(e) => {
|
||||
setFormFields({ ...formFields, message: e.target.value });
|
||||
}}
|
||||
disabled={pending || formState.success}
|
||||
aria-invalid={formState.errors?.message ? "true" : undefined}
|
||||
className="min-h-[6lh] resize-y"
|
||||
/>
|
||||
{formState.errors?.message && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">{formState.errors.message[0]}</span>
|
||||
)}
|
||||
|
||||
<div className="text-foreground/85 my-2 text-[0.8rem] leading-relaxed">
|
||||
<MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" /> Basic{" "}
|
||||
<Link href="https://commonmark.org/help/" title="Markdown reference sheet" className="font-semibold">
|
||||
Markdown syntax
|
||||
</Link>{" "}
|
||||
is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
|
||||
<Link href="https://jarv.is" className="hover:no-underline">
|
||||
links
|
||||
</Link>
|
||||
](https://jarv.is), and <code>`code`</code>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Turnstile siteKey={env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
|
||||
{formState.errors?.["cf-turnstile-response"] && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">
|
||||
{formState.errors["cf-turnstile-response"][0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-16 items-center space-x-4">
|
||||
{!formState.success && (
|
||||
<Button type="submit" size="lg" disabled={pending}>
|
||||
{pending ? (
|
||||
<>
|
||||
<Loader2Icon className="animate-spin" /> Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendIcon /> Send
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!pending && formState.message && (
|
||||
<div
|
||||
className={cn(
|
||||
"space-x-0.5 text-[0.9rem] font-semibold",
|
||||
formState.success ? "text-success" : "text-destructive"
|
||||
)}
|
||||
>
|
||||
{formState.success ? <CheckIcon className="inline size-4" /> : <XIcon className="inline size-4" />}{" "}
|
||||
<span>{formState.message}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
@@ -0,0 +1,53 @@
|
||||
// miscellaneous icons that are not part of lucide-react
|
||||
|
||||
export const Win95Icon = ({ className }: { className?: string }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
>
|
||||
<path d="M5.712 1.596l-.756.068-.238.55.734-.017zm1.39.927l-.978.137-.326.807.96-.12.345-.824zM4.89 3.535l-.72.05-.24.567.721-.017zm3.724.309l-1.287.068-.394.96 1.27-.052zm1.87.566l-1.579.069-.566 1.357 1.596-.088.548-1.338zm-4.188.037l-.977.153-.343.806.976-.12zm6.144.668l-1.87.135-.637 1.527 1.87-.154zm2.925.219c-.11 0-.222 0-.334.002l-.767 1.85c1.394-.03 2.52.089 3.373.38l-1.748 4.201c-.955-.304-2.082-.444-3.36-.394l-.54 1.305a8.762 8.762 0 0 1 3.365.396l-1.663 4.014c-1.257-.27-2.382-.395-3.387-.344l-.782 1.887c3.363-.446 6.348.822 9.009 3.773L24 9.23c-2.325-2.575-5.2-3.88-8.637-3.896zm-.644.002l-2.024.12-.687 1.68 2.025-.19zm-10.603.05l-.719.036-.224.566h.703l.24-.601zm3.69.397l-1.287.069-.395.959 1.27-.05zM5.54 6.3l-.994.154-.344.807.98-.121zm4.137.066l-1.58.069L7.53 7.77l1.596-.085.55-1.32zm1.955.688l-1.87.135-.636 1.527 1.887-.154zm2.282.19l-2.01.136-.7 1.682 2.04-.19.67-1.63zm-10.57.066l-.739.035-.238.564h.72l.257-.6zm3.705.293l-1.303.085-.394.96 1.287-.034zm11.839.255a6.718 6.718 0 0 1 2.777 1.717l-1.75 4.237c-.617-.584-1.15-.961-1.611-1.149l-1.201-.498zM4.733 8.22l-.976.154-.344.807.961-.12.36-.841zm4.186 0l-1.594.052-.549 1.354L8.37 9.54zm1.957.668L8.99 9.04l-.619 1.508 1.87-.135.636-1.527zm2.247.275l-2.007.12-.703 1.665 2.042-.156zM2.52 9.267l-.718.033-.24.549.718-.016zm3.725.273l-1.289.07-.41.96 1.287-.03.412-1zm1.87.6l-1.596.05-.55 1.356 1.598-.084.547-1.322zm-4.186.037l-.979.136-.324.805.96-.119zm6.14.633l-1.87.154-.653 1.527 1.906-.154zm2.267.275l-2.026.12-.686 1.663 2.025-.172zm-10.569.031l-.739.037-.238.565.72-.016zm3.673.362l-1.289.068-.41.978 1.305-.05zm-2.285.533l-.976.154-.326.805.96-.12.342-.84zm4.153.07l-1.596.066-.565 1.356 1.612-.084zm1.957.666l-1.889.154-.617 1.526 1.886-.15zm2.28.223l-2.025.12-.685 1.665 2.041-.172.67-1.613zm-10.584.05l-.738.053L0 13.64l.72-.02.24-.6zm3.705.31l-1.285.07-.395.976 1.287-.05.393-.997zm11.923.07c1.08.29 2.024.821 2.814 1.613l-1.715 4.183c-.892-.754-1.82-1.32-2.814-1.664l1.715-4.133zm-10.036.515L4.956 14l-.549 1.32 1.578-.066.567-1.338zm-4.184.014l-.996.156-.309.79.961-.106zm6.14.67l-1.904.154-.617 1.527 1.89-.154.632-1.527zm2.231.324l-2.025.123-.686 1.682 2.026-.174zm-6.863.328l-1.3.068-.397.98 1.285-.054zm1.871.584l-1.578.068-.566 1.334 1.595-.064zm1.953.701l-1.867.137-.635 1.51 1.87-.137zm2.23.31l-2.005.122-.703 1.68 2.04-.19.67-1.61z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const MarkdownIcon = ({ className }: { className?: string }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
>
|
||||
<path d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const GitHubIcon = ({ className }: { className?: string }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const NextjsIcon = ({ className }: { className?: string }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
>
|
||||
<path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
|
||||
</svg>
|
||||
);
|
||||
@@ -1,6 +1,7 @@
|
||||
import { env } from "@/lib/env";
|
||||
import { HeartIcon } from "lucide-react";
|
||||
import Link from "@/components/link";
|
||||
import { NextjsIcon } from "@/components/icons";
|
||||
import { cn } from "@/lib/utils";
|
||||
import siteConfig from "@/lib/config/site";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
@@ -33,16 +34,7 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
|
||||
aria-label="Next.js"
|
||||
className="text-foreground/85 hover:text-foreground/60 hover:no-underline"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
className="mx-[1px] inline size-4 align-text-top"
|
||||
>
|
||||
<path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
|
||||
</svg>
|
||||
<NextjsIcon className="mx-[1px] inline size-4 align-text-top" />
|
||||
</Link>
|
||||
.{" "}
|
||||
<Link
|
||||
|
||||
@@ -15,7 +15,7 @@ const Header = ({ className, ...rest }: ComponentPropsWithoutRef<"header">) => {
|
||||
href="/"
|
||||
rel="author"
|
||||
aria-label={siteConfig.name}
|
||||
className="hover:text-primary text-foreground/85 flex flex-shrink-0 items-center hover:no-underline"
|
||||
className="hover:text-primary text-foreground/85 flex shrink-0 items-center hover:no-underline"
|
||||
>
|
||||
<Image
|
||||
src={avatarImg}
|
||||
|
||||
@@ -1,25 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useMountedState } from "react-use";
|
||||
import TimeAgo from "react-timeago";
|
||||
import Time from "@/components/time";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
import { type ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const RelativeTime = ({
|
||||
date,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<"time"> & {
|
||||
date: string;
|
||||
}) => {
|
||||
// play nice with SSR -- only use relative time on the client, since it'll quickly become outdated on the server and
|
||||
// cause a react hydration mismatch error.
|
||||
const isMounted = useMountedState();
|
||||
|
||||
if (!isMounted) {
|
||||
return <Time date={date} format="MMM d, y" {...rest} />;
|
||||
}
|
||||
|
||||
return <TimeAgo date={date} {...rest} />;
|
||||
const RelativeTime = ({ ...rest }: ComponentPropsWithoutRef<typeof TimeAgo>) => {
|
||||
return (
|
||||
<span suppressHydrationWarning>
|
||||
<TimeAgo {...rest} />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default RelativeTime;
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
import { env } from "@/lib/env";
|
||||
import { format, formatISO } from "date-fns";
|
||||
import { enUS } from "date-fns/locale";
|
||||
import { tz } from "@date-fns/tz";
|
||||
import { utc } from "@date-fns/utc";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const Time = ({
|
||||
date,
|
||||
format: formatStr = "PPpp",
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<"time"> & {
|
||||
date: string;
|
||||
format?: string;
|
||||
}) => {
|
||||
return (
|
||||
<time
|
||||
dateTime={formatISO(date, { in: utc })}
|
||||
title={format(date, "MMM d, y, h:mm a O", { in: tz(env.NEXT_PUBLIC_SITE_TZ), locale: enUS })}
|
||||
{...rest}
|
||||
>
|
||||
{format(date, formatStr, { in: tz(env.NEXT_PUBLIC_SITE_TZ), locale: enUS })}
|
||||
</time>
|
||||
);
|
||||
};
|
||||
|
||||
export default Time;
|
||||
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const AlertDialog = ({ ...rest }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>) => {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...rest} />;
|
||||
};
|
||||
|
||||
const AlertDialogTrigger = ({ ...rest }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>) => {
|
||||
return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...rest} />;
|
||||
};
|
||||
|
||||
const AlertDialogPortal = ({ ...rest }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>) => {
|
||||
return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...rest} />;
|
||||
};
|
||||
|
||||
const AlertDialogOverlay = ({ className, ...rest }: ComponentPropsWithoutRef<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
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AlertDialogContent = ({ className, ...rest }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>) => {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-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 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
);
|
||||
};
|
||||
|
||||
const AlertDialogHeader = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AlertDialogFooter = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AlertDialogTitle = ({ className, ...rest }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>) => {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AlertDialogDescription = ({
|
||||
className,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>) => {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AlertDialogAction = ({ className, ...rest }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>) => {
|
||||
return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...rest} />;
|
||||
};
|
||||
|
||||
const AlertDialogCancel = ({ className, ...rest }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>) => {
|
||||
return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: "outline" }), className)} {...rest} />;
|
||||
};
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const Avatar = ({ className, ...rest }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>) => {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AvatarImage = ({ className, ...rest }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>) => {
|
||||
return (
|
||||
<AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full", className)} {...rest} />
|
||||
);
|
||||
};
|
||||
|
||||
const AvatarFallback = ({ className, ...rest }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>) => {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback };
|
||||
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const buttonVariants = cva(
|
||||
export const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
|
||||
{
|
||||
variants: {
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
"use client";
|
||||
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const DropdownMenu = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>) => {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...rest} />;
|
||||
};
|
||||
|
||||
const DropdownMenuPortal = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>) => {
|
||||
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...rest} />;
|
||||
};
|
||||
|
||||
const DropdownMenuTrigger = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>) => {
|
||||
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...rest} />;
|
||||
};
|
||||
|
||||
const DropdownMenuContent = ({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
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
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuGroup = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>) => {
|
||||
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...rest} />;
|
||||
};
|
||||
|
||||
const DropdownMenuItem = ({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
}) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
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
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuCheckboxItem = ({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>) => {
|
||||
return (
|
||||
<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
|
||||
)}
|
||||
checked={checked}
|
||||
{...rest}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuRadioGroup = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>) => {
|
||||
return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...rest} />;
|
||||
};
|
||||
|
||||
const DropdownMenuRadioItem = ({
|
||||
className,
|
||||
children,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>) => {
|
||||
return (
|
||||
<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
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuLabel = ({
|
||||
className,
|
||||
inset,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<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)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuSeparator = ({
|
||||
className,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuShortcut = ({ className, ...rest }: ComponentPropsWithoutRef<"span">) => {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuSub = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>) => {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...rest} />;
|
||||
};
|
||||
|
||||
const DropdownMenuSubTrigger = ({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
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 flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownMenuSubContent = ({
|
||||
className,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>) => {
|
||||
return (
|
||||
<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
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const Popover = ({ ...rest }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...rest} />;
|
||||
};
|
||||
|
||||
const PopoverTrigger = ({ ...rest }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>) => {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...rest} />;
|
||||
};
|
||||
|
||||
const PopoverContent = ({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>) => {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
);
|
||||
};
|
||||
|
||||
const PopoverAnchor = ({ ...rest }: ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>) => {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...rest} />;
|
||||
};
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const Separator = ({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...rest
|
||||
}: ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>) => {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator-root"
|
||||
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
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Separator;
|
||||
@@ -0,0 +1,8 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const Skeleton = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
|
||||
return <div data-slot="skeleton" className={cn("bg-accent animate-pulse rounded-md", className)} {...rest} />;
|
||||
};
|
||||
|
||||
export default Skeleton;
|
||||
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
||||
|
||||
const Toaster = ({ ...rest }: ToasterProps) => {
|
||||
return (
|
||||
<Sonner
|
||||
className="toaster group"
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Toaster;
|
||||
@@ -1,19 +1,14 @@
|
||||
import { env } from "@/lib/env";
|
||||
import { connection } from "next/server";
|
||||
import { kv } from "@vercel/kv";
|
||||
import CountUp from "@/components/count-up";
|
||||
import { incrementViews } from "@/lib/server/views";
|
||||
|
||||
const ViewCounter = async ({ slug }: { slug: string }) => {
|
||||
// ensure this component isn't triggered by prerenders and/or preloads
|
||||
await connection();
|
||||
|
||||
try {
|
||||
// if this is a new slug, redis will automatically create a new key and set its value to 0 (and then 1, obviously)
|
||||
// https://upstash.com/docs/redis/sdks/ts/commands/string/incr
|
||||
// TODO: maybe don't allow this? or maybe it's fine? kinda unclear how secure this is:
|
||||
// https://nextjs.org/blog/security-nextjs-server-components-actions
|
||||
// https://nextjs.org/docs/app/building-your-application/rendering/server-components
|
||||
const hits = await kv.incr(`hits:${slug}`);
|
||||
const hits = await incrementViews(slug);
|
||||
|
||||
// we have data!
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user