master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add proper title and favicon for Rekordbox Reader

Browse Source 
- Update page title to 'Rekordbox Reader - Music Library Manager'
- Create custom music-themed favicon with blue color scheme
- Add comprehensive meta tags for SEO and social sharing
- Include Open Graph and Twitter Card meta tags
- Create web app manifest for PWA support
- Add theme color and app branding
- Improve browser tab and bookmark appearance
- Add keywords and author meta tags for better discoverability

The web app now has professional branding with a custom favicon
and proper meta tags for better user experience and SEO.
This commit is contained in:
Geert Rademakes 2025-08-06 16:02:00 +02:00
parent 9eb4587537
commit ba78aabd53
3 changed files with 59 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend/index.html
View File

@ -2,9 +2,29 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Rekordbox Reader - Music Library Manager</title>
<meta name="description" content="Manage your Rekordbox music library with S3 storage integration and web-based playback" />
<meta name="keywords" content="rekordbox, music, library, manager, s3, storage, dj, playlist" />
<meta name="author" content="Rekordbox Reader" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Rekordbox Reader - Music Library Manager" />
<meta property="og:description" content="Manage your Rekordbox music library with S3 storage integration and web-based playback" />
<meta property="og:image" content="/favicon.svg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Rekordbox Reader - Music Library Manager" />
<meta property="twitter:description" content="Manage your Rekordbox music library with S3 storage integration and web-based playback" />
<meta property="twitter:image" content="/favicon.svg" />
<!-- App manifest -->
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#1a202c" />
<script> <script>
// Insert this script in your index.html right after the <body> tag. // Insert this script in your index.html right after the <body> tag.
// This will help to prevent a flash if dark mode is the default. // This will help to prevent a flash if dark mode is the default.

11
packages/frontend/public/favicon.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background circle -->
<circle cx="16" cy="16" r="15" fill="#1a202c" stroke="#3182ce" stroke-width="2"/>
<!-- Music note -->
<path d="M12 8L12 20C12 21.1046 11.1046 22 10 22C8.89543 22 8 21.1046 8 20C8 18.8954 8.89543 18 10 18C10.3506 18 10.6872 18.0602 11 18.1708L11 10L18 12L18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C16.3506 22 16.6872 22.0602 17 22.1708L17 10L12 8Z" fill="#3182ce"/>
<!-- Small accent dots -->
<circle cx="10" cy="20" r="1.5" fill="#63b3ed"/>
<circle cx="16" cy="24" r="1.5" fill="#63b3ed"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 687 B

26
packages/frontend/public/manifest.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "Rekordbox Reader",
"short_name": "Rekordbox Reader",
"description": "Music Library Manager with S3 storage integration",
"start_url": "/",
"display": "standalone",
"background_color": "#1a202c",
"theme_color": "#1a202c",
"icons": [
{
"src": "/favicon.svg",
"sizes": "32x32",
"type": "image/svg+xml"
},
{
"src": "/favicon.svg",
"sizes": "192x192",
"type": "image/svg+xml"
},
{
"src": "/favicon.svg",
"sizes": "512x512",
"type": "image/svg+xml"
}
]
}