valknar/awesome-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement comprehensive UI/UX improvements

Browse Source 
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:
valknarness
2025-10-29 09:27:01 +01:00
parent 109d82ed23
commit bbe7f9a22d
8 changed files with 179 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/globals.css
View File

@@ -237,6 +237,21 @@ kbd {
color: inherit;
}
/* Search Highlight - Discreet styling */
mark {
background: color-mix(in oklab, var(--primary) 15%, transparent);
color: var(--primary);
font-weight: 600;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
border-bottom: 2px solid color-mix(in oklab, var(--primary) 40%, transparent);
}
.dark mark {
background: color-mix(in oklab, var(--primary) 20%, transparent);
color: var(--primary-foreground);
}
/* Loading Spinner */
@keyframes spin-awesome {
from {