Janady13/llms-txt-hub / apps/web/app/projects/page.tsx

1import { Badge } from '@thedaviddias/design-system/badge' 2import { Breadcrumb } from '@thedaviddias/design-system/breadcrumb' 3import { Button } from '@thedaviddias/design-system/button' 4import { getBaseUrl } from '@thedaviddias/utils/get-base-url' 5import { ArrowRight, ExternalLink, Github, Plus, Star } from 'lucide-react' 6import type { Metadata } from 'next' 7import Link from 'next/link' 8import { GitHubProjectCard } from '@/components/github/github-project-card' 9import { Card, CardContent } from '@/components/ui/card' 10import { fetchGitHubProjects, type GitHubProject } from '@/lib/github' 11import { getRoute } from '@/lib/routes' 12import { generateBaseMetadata } from '@/lib/seo/seo-config' 13 14export const metadata: Metadata = generateBaseMetadata({ 15 title: 'Open Source Projects', 16 description: 17 'Explore open-source projects, tools, and libraries implementing the llms.txt standard.', 18 path: '/projects', 19 keywords: ['open source', 'GitHub projects', 'llms.txt tools', 'libraries', 'implementations'] 20}) 21 22// Revalidate Projects page hourly to reduce API load 23export const revalidate = 3600 24 25export default async function ProjectsPage() { 26 // Fetch projects with both topics concurrently 27 const [projects1, projects2] = await Promise.all([ 28 fetchGitHubProjects('llms-txt'), 29 fetchGitHubProjects('llmstxt') 30 ]) 31 32 // Create a Map to deduplicate projects by full name 33 const projectsMap = new Map<string, GitHubProject>() 34 35 // Add all projects to the map, with full name as key 36 const allProjects = [...projects1, ...projects2] 37 allProjects.forEach(project => { 38 projectsMap.set(project.fullName, project) 39 }) 40 41 // Convert map back to array and sort by stars 42 const sortedProjects = Array.from(projectsMap.values()).sort((a, b) => b.stars - a.stars) 43 44 // Featured project is the one with most stars 45 const featuredProject = sortedProjects[0] 46 const remainingProjects = sortedProjects.slice(1) 47 48 return ( 49 <div className="container mx-auto py-8"> 50 <div className="space-y-12"> 51 <Breadcrumb items={[{ name: 'Projects', href: '/projects' }]} baseUrl={getBaseUrl()} /> 52 53 {/* Header */} 54 <div className="space-y-2"> 55 <h1 className="text-4xl font-bold tracking-tight flex items-center gap-3"> 56 <span className="size-2 bg-primary rounded-full" /> 57 Open Source Projects 58 </h1> 59 <p className="text-lg text-muted-foreground max-w-3xl"> 60 Discover open-source projects, tools, and libraries implementing the llms.txt standard. 61 Add the{' '} 62 <Link 63 href="https://github.com/topics/llms-txt" 64 className="font-medium text-foreground underline underline-offset-4 hover:text-primary transition-colors" 65 target="_blank" 66 rel="noopener noreferrer" 67 > 68 llms-txt 69 </Link>{' '} 70 or{' '} 71 <Link 72 href="https://github.com/topics/llmstxt" 73 className="font-medium text-foreground underline underline-offset-4 hover:text-primary transition-colors" 74 target="_blank" 75 rel="noopener noreferrer" 76 > 77 llmstxt 78 </Link>{' '} 79 topic to your GitHub repository to be listed. 80 </p> 81 </div> 82 83 {/* Featured Project */} 84 {featuredProject && ( 85 <Card className="transition-all hover:border-primary hover:bg-muted/50 relative overflow-hidden animate-fade-in-up"> 86 <CardContent className="p-6 sm:p-8"> 87 <div className="flex flex-col gap-4"> 88 <div className="flex items-center justify-between"> 89 <Badge variant="secondary" className="bg-primary/10 text-primary"> 90 Most Starred 91 </Badge> 92 <div className="flex items-center gap-1.5 text-sm font-medium"> 93 <Star className="size-4 fill-yellow-500 text-yellow-500" /> 94 <span className="tabular-nums">{featuredProject.stars.toLocaleString()}</span> 95 </div> 96 </div> 97 98 <div className="space-y-3"> 99 <div className="flex items-center gap-3"> 100 <Github className="size-6" /> 101 <h2 className="text-xl sm:text-2xl font-bold tracking-tight"> 102 <Link 103 href={featuredProject.url} 104 className="hover:text-primary transition-colors block after:absolute after:inset-0 after:content-[''] z-10" 105 target="_blank" 106 rel="noopener noreferrer" 107 > 108 {featuredProject.fullName} 109 </Link> 110 </h2> 111 </div> 112 <p className="text-muted-foreground">{featuredProject.description}</p> 113 </div> 114 115 <div className="flex items-center gap-3 pt-2"> 116 <span className="text-sm font-medium text-primary flex items-center gap-1"> 117 View project 118 <ArrowRight className="size-4" /> 119 </span> 120 </div> 121 </div> 122 </CardContent> 123 </Card> 124 )} 125 126 {/* All Projects Grid */} 127 {remainingProjects.length > 0 && ( 128 <section className="space-y-6"> 129 <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground"> 130 All Projects ({remainingProjects.length}) 131 </h2> 132 <div className="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3"> 133 {remainingProjects.map((project, index) => ( 134 <GitHubProjectCard key={project.fullName} project={project} index={index} /> 135 ))} 136 </div> 137 </section> 138 )} 139 140 {/* Submit Project CTA */} 141 <Card className="border-dashed"> 142 <CardContent className="p-8 text-center"> 143 <div className="mx-auto max-w-2xl space-y-4"> 144 <div className="size-12 rounded-full bg-muted flex items-center justify-center mx-auto"> 145 <Plus className="size-6 text-muted-foreground" /> 146 </div> 147 <h2 className="text-2xl font-bold tracking-tight">Have a Project to Share?</h2> 148 <p className="text-muted-foreground"> 149 Add the{' '} 150 <code className="px-1.5 py-0.5 bg-muted rounded text-sm font-mono">llms-txt</code>{' '} 151 topic to your GitHub repository to have it listed here automatically. 152 </p> 153 <div className="flex justify-center gap-3 pt-2"> 154 <Button asChild className="rounded-none h-9 font-bold"> 155 <Link 156 href="https://github.com/topics/llms-txt" 157 target="_blank" 158 rel="noopener noreferrer" 159 > 160 Browse GitHub Topic 161 <ExternalLink className="ml-2 size-4" /> 162 </Link> 163 </Button> 164 <Button variant="outline" asChild className="rounded-none h-9 font-bold"> 165 <Link href={getRoute('submit')}>Submit Website</Link> 166 </Button> 167 </div> 168 </div> 169 </CardContent> 170 </Card> 171 </div> 172 </div> 173 ) 174} 175