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>
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { Marked } from 'marked'
|
|
import { markedHighlight } from 'marked-highlight'
|
|
import hljs from 'highlight.js'
|
|
import 'highlight.js/styles/github-dark.css'
|
|
|
|
interface ReadmeViewerProps {
|
|
content: string
|
|
repositoryUrl?: string
|
|
}
|
|
|
|
export function ReadmeViewer({ content, repositoryUrl }: ReadmeViewerProps) {
|
|
const [html, setHtml] = React.useState('')
|
|
|
|
React.useEffect(() => {
|
|
const marked = new Marked(
|
|
markedHighlight({
|
|
langPrefix: 'hljs language-',
|
|
highlight(code, lang) {
|
|
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
|
return hljs.highlight(code, { language }).value
|
|
},
|
|
})
|
|
)
|
|
|
|
// Configure marked options
|
|
marked.setOptions({
|
|
gfm: true,
|
|
breaks: true,
|
|
})
|
|
|
|
// Custom renderer to fix relative image URLs
|
|
if (repositoryUrl) {
|
|
const renderer = {
|
|
image(href: string, title: string | null, text: string) {
|
|
let imgSrc = href
|
|
|
|
// Convert GitHub URLs to raw content URLs
|
|
if (repositoryUrl.includes('github.com')) {
|
|
const match = repositoryUrl.match(/github\.com\/([^\/]+)\/([^\/]+)/)
|
|
if (match) {
|
|
const [, owner, repo] = match
|
|
const cleanRepo = repo.replace(/\.git$/, '')
|
|
|
|
// Handle relative URLs
|
|
if (!imgSrc.startsWith('http://') && !imgSrc.startsWith('https://') && !imgSrc.startsWith('//')) {
|
|
// Remove leading ./
|
|
imgSrc = imgSrc.replace(/^\.\//, '')
|
|
// Build raw GitHub URL (main/master branch assumed)
|
|
imgSrc = `https://raw.githubusercontent.com/${owner}/${cleanRepo}/master/${imgSrc}`
|
|
}
|
|
// Handle GitHub blob URLs - convert to raw
|
|
else if (imgSrc.includes('github.com') && imgSrc.includes('/blob/')) {
|
|
imgSrc = imgSrc.replace('github.com', 'raw.githubusercontent.com').replace('/blob/', '/')
|
|
}
|
|
}
|
|
}
|
|
|
|
const titleAttr = title ? ` title="${title}"` : ''
|
|
|
|
// Check if it's a badge (shields.io, badgen, etc.)
|
|
const isBadge = imgSrc.includes('shields.io') ||
|
|
imgSrc.includes('badgen.net') ||
|
|
imgSrc.includes('badge') ||
|
|
imgSrc.includes('img.shields') ||
|
|
imgSrc.match(/\/badges?\//)
|
|
|
|
if (isBadge) {
|
|
return `<img src="${imgSrc}" alt="${text}" ${titleAttr} class="inline-block !my-0 !mx-1 align-middle" />`
|
|
}
|
|
|
|
return `<img src="${imgSrc}" alt="${text}" ${titleAttr} />`
|
|
}
|
|
}
|
|
marked.use({ renderer })
|
|
}
|
|
|
|
// Parse markdown
|
|
const parseMarkdown = async () => {
|
|
const result = await marked.parse(content)
|
|
setHtml(result)
|
|
}
|
|
parseMarkdown()
|
|
}, [content, repositoryUrl])
|
|
|
|
return (
|
|
<article
|
|
className="prose prose-lg dark:prose-invert max-w-none prose-headings:gradient-text prose-headings:font-bold prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-code:rounded prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:text-sm prose-pre:rounded-lg prose-pre:border prose-pre:border-primary/20 prose-pre:bg-muted/50 prose-img:rounded-lg prose-hr:border-primary/20"
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
)
|
|
}
|