Add playlist export and SEO meta tags
Add text/CSV export endpoints for playlists and saved recommendations. Add export buttons to PlaylistDetail and Recommendations pages. Add Open Graph and Twitter meta tags to index.html for better SEO.
This commit is contained in:
root
@@ -7,6 +7,21 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<meta name="description" content="Discover music you'll love with AI. Import your playlists, get personalized recommendations, and explore new artists." />
|
||||
<meta name="keywords" content="music discovery, AI music, playlist analyzer, find new music, music recommendations" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Vynl - AI Music Discovery" />
|
||||
<meta property="og:description" content="Dig deeper. Discover more. AI-powered music recommendations that actually understand your taste." />
|
||||
<meta property="og:url" content="https://deepcutsai.com" />
|
||||
<meta property="og:site_name" content="Vynl" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Vynl - AI Music Discovery" />
|
||||
<meta name="twitter:description" content="Dig deeper. Discover more. AI-powered music recommendations that actually understand your taste." />
|
||||
|
||||
<title>Vynl - AI Music Discovery</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -144,6 +144,16 @@ export const login = (email: string, password: string) =>
|
||||
export const getMe = () =>
|
||||
api.get<UserResponse>('/auth/me').then((r) => r.data)
|
||||
|
||||
// Profile & Settings
|
||||
export const updateProfile = (data: { name?: string; email?: string }) =>
|
||||
api.put<UserResponse>('/auth/me', data).then((r) => r.data)
|
||||
|
||||
export const changePassword = (currentPassword: string, newPassword: string) =>
|
||||
api.post('/auth/change-password', { current_password: currentPassword, new_password: newPassword })
|
||||
|
||||
export const deleteAccount = () =>
|
||||
api.delete('/auth/me')
|
||||
|
||||
// Spotify OAuth
|
||||
export const getSpotifyAuthUrl = () =>
|
||||
api.get<{ url: string; state: string }>('/auth/spotify/authorize').then((r) => r.data)
|
||||
@@ -370,6 +380,26 @@ export interface PlaylistFixResponse {
|
||||
export const fixPlaylist = (playlistId: string) =>
|
||||
api.post<PlaylistFixResponse>(`/playlists/${playlistId}/fix`).then((r) => r.data)
|
||||
|
||||
export const exportPlaylist = (id: string, format: string = 'text') =>
|
||||
api.get(`/playlists/${id}/export`, { params: { format }, responseType: 'blob' }).then((r) => {
|
||||
const url = URL.createObjectURL(r.data)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = format === 'csv' ? 'playlist.csv' : 'playlist.txt'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
})
|
||||
|
||||
export const exportSaved = () =>
|
||||
api.get('/recommendations/saved/export', { responseType: 'blob' }).then((r) => {
|
||||
const url = URL.createObjectURL(r.data)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'vynl-discoveries.txt'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
})
|
||||
|
||||
// Taste Profile
|
||||
export const getTasteProfile = () =>
|
||||
api.get<TasteProfileResponse>('/profile/taste').then((r) => r.data)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom'
|
||||
import { ArrowLeft, Loader2, Music, Clock, Sparkles, Trash2, Wand2, AlertTriangle, CheckCircle2, X } from 'lucide-react'
|
||||
import { getPlaylist, deletePlaylist, fixPlaylist, type PlaylistDetailResponse, type PlaylistFixResponse } from '../lib/api'
|
||||
import { ArrowLeft, Loader2, Music, Clock, Sparkles, Trash2, Wand2, AlertTriangle, CheckCircle2, X, Download } from 'lucide-react'
|
||||
import { getPlaylist, deletePlaylist, fixPlaylist, exportPlaylist, type PlaylistDetailResponse, type PlaylistFixResponse } from '../lib/api'
|
||||
import TasteProfile from '../components/TasteProfile'
|
||||
|
||||
function formatDuration(ms: number): string {
|
||||
@@ -138,6 +138,20 @@ export default function PlaylistDetail() {
|
||||
{showProfile ? 'Hide' : 'Show'} Taste Profile
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => id && exportPlaylist(id, 'text')}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-purple-50 text-purple text-sm font-medium rounded-xl hover:bg-purple-100 transition-colors cursor-pointer border-none"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Export TXT
|
||||
</button>
|
||||
<button
|
||||
onClick={() => id && exportPlaylist(id, 'csv')}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-purple-50 text-purple text-sm font-medium rounded-xl hover:bg-purple-100 transition-colors cursor-pointer border-none"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Export CSV
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Loader2, Clock, Heart, Sparkles } from 'lucide-react'
|
||||
import { Loader2, Clock, Heart, Sparkles, Download } from 'lucide-react'
|
||||
import { useAuth } from '../lib/auth'
|
||||
import { getRecommendationHistory, getSavedRecommendations, toggleSaveRecommendation, type RecommendationItem } from '../lib/api'
|
||||
import { getRecommendationHistory, getSavedRecommendations, toggleSaveRecommendation, exportSaved, type RecommendationItem } from '../lib/api'
|
||||
import RecommendationCard from '../components/RecommendationCard'
|
||||
|
||||
type Tab = 'saved' | 'history'
|
||||
@@ -92,7 +92,18 @@ export default function Recommendations() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
{/* Export + Tabs */}
|
||||
<div className="flex items-center gap-4">
|
||||
{tab === 'saved' && saved.length > 0 && (
|
||||
<button
|
||||
onClick={() => exportSaved()}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-purple-50 text-purple text-sm font-medium rounded-xl hover:bg-purple-100 transition-colors cursor-pointer border-none"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Export Saved
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1 bg-purple-50 p-1 rounded-xl w-fit">
|
||||
<button
|
||||
onClick={() => setTab('saved')}
|
||||
|
||||
Reference in New Issue
Block a user