a new start
This commit is contained in:
valknarness
251
app/repository/[id]/page.tsx
Normal file
251
app/repository/[id]/page.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { ArrowLeft, ExternalLink, GitFork, Star, Code, AlertCircle } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { PushToListButton } from '@/components/personal-list/push-to-list-button'
|
||||
import { marked } from 'marked'
|
||||
import { markedHighlight } from 'marked-highlight'
|
||||
import hljs from 'highlight.js'
|
||||
|
||||
interface Repository {
|
||||
id: number
|
||||
name: string
|
||||
url: string
|
||||
description: string | null
|
||||
stars: number | null
|
||||
forks: number | null
|
||||
language: string | null
|
||||
topics: string | null
|
||||
}
|
||||
|
||||
interface Readme {
|
||||
content: string
|
||||
}
|
||||
|
||||
interface RepositoryDetailResponse {
|
||||
id: number
|
||||
name: string
|
||||
url: string
|
||||
description: string | null
|
||||
stars: number | null
|
||||
forks: number | null
|
||||
language: string | null
|
||||
topics: string | null
|
||||
readme: Readme | null
|
||||
}
|
||||
|
||||
// Configure marked with syntax highlighting and options
|
||||
marked.use({
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
headerIds: true,
|
||||
mangle: false,
|
||||
})
|
||||
|
||||
marked.use(
|
||||
markedHighlight({
|
||||
langPrefix: 'hljs language-',
|
||||
highlight(code, lang) {
|
||||
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
||||
return hljs.highlight(code, { language }).value
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
export default function RepositoryDetailPage() {
|
||||
const params = useParams()
|
||||
const repositoryId = params.id as string
|
||||
|
||||
const [data, setData] = React.useState<RepositoryDetailResponse | null>(null)
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
const [error, setError] = React.useState<string | null>(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
fetch(`/api/repositories/${repositoryId}`)
|
||||
.then(async (res) => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch repository')
|
||||
}
|
||||
return res.json()
|
||||
})
|
||||
.then((data) => {
|
||||
setData(data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Failed to fetch repository:', err)
|
||||
setError(err.message)
|
||||
setLoading(false)
|
||||
})
|
||||
}, [repositoryId])
|
||||
|
||||
// Determine if content is already HTML or needs markdown parsing
|
||||
// Must be called before any conditional returns
|
||||
const readmeHtml = React.useMemo(() => {
|
||||
if (!data?.readme?.content) return null
|
||||
|
||||
const content = data.readme.content
|
||||
// Ensure content is a string before processing
|
||||
if (typeof content !== 'string' || !content.trim()) return null
|
||||
|
||||
// Check if content is already HTML (starts with < tag)
|
||||
const isHtml = content.trim().startsWith('<')
|
||||
|
||||
if (isHtml) {
|
||||
// Content is already HTML, use as-is
|
||||
return content
|
||||
} else {
|
||||
// Content is markdown, parse it
|
||||
return marked.parse(content) as string
|
||||
}
|
||||
}, [data?.readme?.content])
|
||||
|
||||
const topics = data?.topics ? data.topics.split(',') : []
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-br from-background via-background to-primary/5 px-6 py-12">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<Skeleton className="mb-8 h-10 w-32" />
|
||||
<Skeleton className="mb-4 h-12 w-2/3" />
|
||||
<Skeleton className="mb-8 h-6 w-full" />
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !data) {
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-br from-background via-background to-primary/5 px-6 py-12">
|
||||
<div className="mx-auto max-w-5xl text-center">
|
||||
<AlertCircle className="mx-auto mb-4 h-12 w-12 text-destructive" />
|
||||
<h1 className="mb-4 text-3xl font-bold">Repository Not Found</h1>
|
||||
<p className="mb-8 text-muted-foreground">
|
||||
The repository you're looking for doesn't exist or couldn't be loaded.
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href="/browse">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Browse
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-br from-background via-background to-primary/5">
|
||||
{/* Header */}
|
||||
<div className="border-b bg-background/80 backdrop-blur-sm">
|
||||
<div className="mx-auto max-w-5xl px-6 py-6">
|
||||
<div className="mb-4">
|
||||
<Button asChild variant="ghost">
|
||||
<Link href="/browse">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Browse
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<h1 className="gradient-text mb-3 text-4xl font-bold">{data.name}</h1>
|
||||
|
||||
{data.description && (
|
||||
<p className="mb-4 text-lg text-muted-foreground">{data.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{data.language && (
|
||||
<Badge variant="secondary" className="text-sm">
|
||||
<Code className="mr-1 h-3 w-3" />
|
||||
{data.language}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
{data.stars !== null && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="h-4 w-4 fill-current text-accent" />
|
||||
<span>{data.stars.toLocaleString()} stars</span>
|
||||
</div>
|
||||
)}
|
||||
{data.forks !== null && (
|
||||
<div className="flex items-center gap-1">
|
||||
<GitFork className="h-4 w-4" />
|
||||
<span>{data.forks.toLocaleString()} forks</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{topics.length > 0 && (
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{topics.slice(0, 10).map((topic) => (
|
||||
<Badge key={topic} variant="outline">
|
||||
{topic.trim()}
|
||||
</Badge>
|
||||
))}
|
||||
{topics.length > 10 && (
|
||||
<Badge variant="outline">
|
||||
+{topics.length - 10} more
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<a href={data.url} target="_blank" rel="noopener noreferrer">
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
View on GitHub
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
<PushToListButton
|
||||
title={data.name}
|
||||
description={data.description || 'No description available'}
|
||||
url={data.url}
|
||||
repository={data.name}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
showLabel={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* README Content */}
|
||||
<div className="mx-auto max-w-5xl px-6 py-8">
|
||||
{readmeHtml ? (
|
||||
<article
|
||||
className="prose prose-lg prose-slate dark:prose-invert max-w-none rounded-xl border border-border bg-card p-8 shadow-sm"
|
||||
dangerouslySetInnerHTML={{ __html: readmeHtml }}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-xl border border-dashed border-border bg-muted/30 p-12 text-center">
|
||||
<AlertCircle className="mx-auto mb-4 h-8 w-8 text-muted-foreground" />
|
||||
<h3 className="mb-2 text-lg font-semibold">No README Available</h3>
|
||||
<p className="text-muted-foreground">
|
||||
This repository doesn't have a README file or it couldn't be loaded.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user