feat: implement comprehensive UI/UX improvements
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>
This commit is contained in:
@@ -6,6 +6,7 @@ import { Toaster } from '@/components/ui/sonner'
|
||||
import { WorkerProvider } from '@/components/providers/worker-provider'
|
||||
import { CommandProvider } from '@/components/providers/command-provider'
|
||||
import { AppHeader } from '@/components/layout/app-header'
|
||||
import { AppFooter } from '@/components/layout/app-footer'
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
@@ -203,8 +204,11 @@ export default function RootLayout({
|
||||
>
|
||||
<WorkerProvider>
|
||||
<CommandProvider>
|
||||
<AppHeader />
|
||||
{children}
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<AppHeader />
|
||||
<main className="flex-1">{children}</main>
|
||||
<AppFooter />
|
||||
</div>
|
||||
</CommandProvider>
|
||||
</WorkerProvider>
|
||||
<Toaster />
|
||||
|
||||
Reference in New Issue
Block a user