bbe7f9a22d
This commit implements 7 requested improvements: 1. Add footer component to all pages - Created reusable AppFooter component - Added to layout.tsx with flex-1 main container - Includes links to Legal, Disclaimer, Imprint, GitHub 2. Change search highlight from yellow to more discreet color - Updated mark styling with purple theme colors - Uses color-mix for theme-aware transparency - Added subtle border-bottom for better visibility 3. Strip markdown from search results - Created stripMarkdown function - Removes HTML tags, markdown links, images, formatting - Shows clean text descriptions only 4. Add page number links to pagination - Created getPageNumbers function with smart ellipsis - Shows current page ±2 pages with first/last always visible - Example: 1 ... 5 6 [7] 8 9 ... 20 5. Adjust README badge display to be inline - Custom marked renderer detects badges (shields.io, badgen, etc.) - Applies inline-block with !my-0 !mx-1 align-middle classes - Badges now display inline in paragraph flow 6. Fix relative image URLs in READMEs - Custom image renderer converts relative to absolute GitHub URLs - Handles ./path and path patterns - Converts to raw.githubusercontent.com URLs - Also handles /blob/ URLs conversion 7. Fix command menu highlight contrast - Reuses mark styling from search highlights - Consistent purple theme colors across app 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import { Suspense } from 'react'
|
|
import { notFound } from 'next/navigation'
|
|
import { Metadata } from 'next'
|
|
import { ReadmeViewer } from '@/components/readme/readme-viewer'
|
|
import { ReadmeHeader } from '@/components/readme/readme-header'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { getDb } from '@/lib/db'
|
|
|
|
interface PageProps {
|
|
params: Promise<{
|
|
owner: string
|
|
repo: string
|
|
}>
|
|
}
|
|
|
|
async function getReadmeContent(owner: string, repo: string) {
|
|
try {
|
|
const db = getDb()
|
|
|
|
// Find repository by URL pattern
|
|
const repoUrl = `https://github.com/${owner}/${repo}`
|
|
const repository = db.prepare(`
|
|
SELECT r.*, rm.content, rm.raw_content
|
|
FROM repositories r
|
|
LEFT JOIN readmes rm ON r.id = rm.repository_id
|
|
WHERE r.url = ? OR r.url LIKE ?
|
|
LIMIT 1
|
|
`).get(repoUrl, `%${owner}/${repo}%`) as any
|
|
|
|
if (!repository || !repository.content) {
|
|
return null // Not found in database
|
|
}
|
|
|
|
// Return actual README content from database
|
|
return {
|
|
content: repository.content || repository.raw_content || '',
|
|
metadata: {
|
|
title: repository.name,
|
|
description: repository.description || `Repository: ${repository.name}`,
|
|
stars: repository.stars || 0,
|
|
lastUpdated: repository.last_commit || new Date().toISOString(),
|
|
url: repository.url,
|
|
},
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch README:', error)
|
|
return null
|
|
}
|
|
}
|
|
|
|
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
|
const { owner, repo } = await params
|
|
const data = await getReadmeContent(owner, repo)
|
|
|
|
if (!data) {
|
|
return {
|
|
title: 'Not Found',
|
|
}
|
|
}
|
|
|
|
return {
|
|
title: `${data.metadata.title} | Awesome`,
|
|
description: data.metadata.description,
|
|
openGraph: {
|
|
title: data.metadata.title,
|
|
description: data.metadata.description,
|
|
type: 'article',
|
|
},
|
|
}
|
|
}
|
|
|
|
export default async function ReadmePage({ params }: PageProps) {
|
|
const { owner, repo } = await params
|
|
const data = await getReadmeContent(owner, repo)
|
|
|
|
if (!data) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<ReadmeHeader metadata={data.metadata} />
|
|
|
|
<div className="mx-auto max-w-5xl px-6 py-12">
|
|
<Suspense
|
|
fallback={
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-8 w-3/4" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-5/6" />
|
|
<Skeleton className="h-4 w-4/6" />
|
|
</div>
|
|
}
|
|
>
|
|
<ReadmeViewer content={data.content} repositoryUrl={data.metadata.url} />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|