From c140af64f9896eb38b1127bcda2366a0f6bb6d26 Mon Sep 17 00:00:00 2001 From: KinfeMichael Tariku <65047246+Kinfe123@users.noreply.github.com> Date: Sun, 20 Apr 2025 00:53:50 +0300 Subject: [PATCH] docs: resource reference page (#2357) --- docs/components/resource-card.tsx | 56 +++++++++++++ docs/components/resource-grid.tsx | 22 +++++ docs/components/resource-section.tsx | 65 +++++++++++++++ docs/components/sidebar-content.tsx | 6 ++ docs/content/docs/reference/resources.mdx | 98 +++++++++++++++++++++++ 5 files changed, 247 insertions(+) create mode 100644 docs/components/resource-card.tsx create mode 100644 docs/components/resource-grid.tsx create mode 100644 docs/components/resource-section.tsx create mode 100644 docs/content/docs/reference/resources.mdx diff --git a/docs/components/resource-card.tsx b/docs/components/resource-card.tsx new file mode 100644 index 0000000000..ea88f637a4 --- /dev/null +++ b/docs/components/resource-card.tsx @@ -0,0 +1,56 @@ +import { ArrowUpRight } from "lucide-react"; +import { cn } from "@/lib/utils"; + +interface ResourceCardProps { + title: string; + description: string; + href: string; + tags?: string[]; + className?: string; +} + +export function ResourceCard({ + title, + description, + href, + tags, + className, +}: ResourceCardProps) { + return ( +
+
+ +
+ +

+ {title} +

+ +
+

+
+
+ {tags && tags.length > 0 && ( +
+ {tags.map((tag) => ( + + {tag} + + ))} +
+ )} +
+
+ ); +} diff --git a/docs/components/resource-grid.tsx b/docs/components/resource-grid.tsx new file mode 100644 index 0000000000..c379ce03a9 --- /dev/null +++ b/docs/components/resource-grid.tsx @@ -0,0 +1,22 @@ +import { cn } from "@/lib/utils"; +import { ResourceCard } from "./resource-card"; + +interface ResourceGridProps { + resources: { + title: string; + description: string; + href: string; + tags?: string[]; + }[]; + className?: string; +} + +export function ResourceGrid({ resources, className }: ResourceGridProps) { + return ( +
+ {resources.map((resource) => ( + + ))} +
+ ); +} diff --git a/docs/components/resource-section.tsx b/docs/components/resource-section.tsx new file mode 100644 index 0000000000..c6b7d08c28 --- /dev/null +++ b/docs/components/resource-section.tsx @@ -0,0 +1,65 @@ +"use client"; +import { cn } from "@/lib/utils"; +import { useState } from "react"; +import { ResourceCard } from "./resource-card"; + +interface Resource { + title: string; + description: string; + href: string; + tags: string[]; +} + +interface ResourceProps { + resources: Resource[]; + className?: string; +} + +export function Resource({ className, resources }: ResourceProps) { + const [activeTag, setActiveTag] = useState(null); + const tags = Array.from( + new Set(resources.flatMap((resource) => resource.tags)), + ); + const filterResources = (activeTag: string | null): Resource[] => { + if (!activeTag) return resources; + return resources.filter((resource) => resource.tags.includes(activeTag)); + }; + return ( +
+
+
+ + {tags.map((tag) => ( + + ))} +
+
+
+ {filterResources(activeTag).map((resource) => ( + + ))} +
+
+ ); +} diff --git a/docs/components/sidebar-content.tsx b/docs/components/sidebar-content.tsx index 29dace292d..1d8ebdba3e 100644 --- a/docs/components/sidebar-content.tsx +++ b/docs/components/sidebar-content.tsx @@ -14,6 +14,7 @@ import { UserSquare2, Database, KeyRound, + Book, } from "lucide-react"; import { ReactNode, SVGProps } from "react"; import { Icons } from "./icons"; @@ -1719,6 +1720,11 @@ C0.7,239.6,62.1,0.5,62.2,0.4c0,0,54,13.8,119.9,30.8S302.1,62,302.2,62c0.2,0,0.2, ), }, + { + title: "Resources", + href: "/docs/reference/resources", + icon: () => , + }, { title: "Security", href: "/docs/reference/security", diff --git a/docs/content/docs/reference/resources.mdx b/docs/content/docs/reference/resources.mdx new file mode 100644 index 0000000000..e30413e18f --- /dev/null +++ b/docs/content/docs/reference/resources.mdx @@ -0,0 +1,98 @@ +--- +title: Resources +description: A curated collection of resources to help you learn and master Better Auth. +--- + +import { Resource } from "@/components/resource-section"; + +A curated collection of resources to help you learn and master Better Auth. From blog posts to video tutorials, find everything you need to get started. + +## Video tutorials + +Theo(t3.gg) explores the current landscape of authentication, discussing trends, challenges, and where the industry is heading.", + href: "https://www.youtube.com/watch?v=lxslnp-ZEMw", + tags: ["trends", "showcase", "review"], + }, + { + title: "Last Authentication You Will Ever Need", + description: + "A comprehensive tutorial demonstrating why Better Auth could be the final authentication solution you'll need for your projects.", + href: "https://www.youtube.com/watch?v=hFtufpaMcLM", + tags: ["implementation", "showcase"], + }, + { + title: "This Might Be My New Favourite Auth Library", + description: + "developedbyed explores the features and capabilities of Better Auth, explaining why it stands out among authentication libraries.", + href: "https://www.youtube.com/watch?v=Hjs3zM7o7NE", + tags: ["review", "showcase"], + }, + { + title: "Nextjs 15 Authentication Made EASY with Better Auth", + description: + "A practical guide showing how to seamlessly integrate Better Auth with Next.js 15 for robust authentication.", + href: "https://www.youtube.com/watch?v=lxslnp-ZEMw", + tags: ["nextjs", "implementation", "tutorial"], + }, + { + title: "Best authentication framework for next.js", + description: + "A detailed comparison of authentication frameworks for Next.js, highlighting why Better Auth might be your best choice.", + href: "https://www.youtube.com/watch?v=V--T0q9FrEw", + tags: ["nextjs", "comparison"], + }, + { + title: "Better-Auth: A First Look", + description: + "An introductory overview and demonstration of Better Auth's core features and capabilities.", + href: "https://www.youtube.com/watch?v=2cQTV6NYxis", + tags: ["implementation", "showcase"], + }, + { + title: "Stripe was never so easy (with better auth)", + description: "A tutorial on how to integrate Stripe with Better Auth.", + href: "https://www.youtube.com/watch?v=g-RIrzBEX6M", + tags: [ "implementation"], + }, + ] +} /> + +## Blog posts + + \ No newline at end of file