shakespeare.diy
4f6f6beff3
Replace the generic KindFeedPage-based music feed with a dedicated
music discovery page featuring:
- **Discover tab** (default): Hero card with featured track, horizontal
scroll of featured tracks from curated artists, genre chip filters,
recently added track rows, playlists section, artist showcase, and
"Share Your Music on Nostr" CTA card
- **Tracks tab**: Infinite-scroll list of all music tracks with genre
filtering, using useFeed for standard pagination
- **Playlists tab**: 2-column grid of kind 34139 playlist cards
- **Artists tab**: 3-column grid of artist profile cards, curated
artists shown first
Architecture decisions:
- Shared discovery components in src/components/discovery/ (SectionHeader,
TagChips, HorizontalScroll, ProfileCard, ContentCTACard) designed for
reuse by podcasts and other future content-type discovery pages
- Music-specific components in src/components/music/ (MusicHeroCard,
MusicTrackRow, MusicTrackCard, MusicPlaylistCard)
- Single base query (useMusicData) fetches kind 36787 tracks and derives
genres + artists client-side to avoid redundant relay requests
- Curated artist list via kind 30000 follow set (d:music-artists) from
curator pubkey, with hardcoded fallback of 9 verified Wavlake artists
- Global by default (no follows/global tab split for discovery)
- Full now-playing state indicators across all components via useAudioPlayer
- Complete loading skeletons and empty states for every section
New files:
- src/components/discovery/{SectionHeader,TagChips,HorizontalScroll,
ProfileCard,ContentCTACard}.tsx
- src/components/music/{MusicHeroCard,MusicTrackRow,MusicTrackCard,
MusicPlaylistCard,MusicDiscoverTab,MusicTracksTab,MusicPlaylistsTab,
MusicArtistsTab}.tsx
- src/hooks/{useCuratedMusicArtists,useMusicData,useMusicPlaylists}.ts
- src/pages/MusicPage.tsx
Modified: src/AppRouter.tsx (route update)
Orphaned: src/pages/MusicFeedPage.tsx (no longer imported)
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
130 lines
7.6 KiB
Plaintext
130 lines
7.6 KiB
Plaintext
<!DOCTYPE html>
|
|
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
|
|
<head>
|
|
|
|
<title>ditto.pub | 524: A timeout occurred</title>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/main.css" />
|
|
</head>
|
|
<body>
|
|
<div id="cf-wrapper">
|
|
<div id="cf-error-details" class="p-0">
|
|
<header class="mx-auto pt-10 lg:pt-6 lg:px-8 w-240 lg:w-full mb-8">
|
|
<h1 class="inline-block sm:block sm:mb-2 font-light text-60 lg:text-4xl text-black-dark leading-tight mr-2">
|
|
<span class="inline-block">A timeout occurred</span>
|
|
<span class="code-label">Error code 524</span>
|
|
</h1>
|
|
<div>
|
|
Visit <a href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_524&utm_campaign=relay.ditto.pub" target="_blank" rel="noopener noreferrer">cloudflare.com</a> for more information.
|
|
</div>
|
|
<div class="mt-3">2026-04-17 18:53:45 UTC</div>
|
|
</header>
|
|
<div class="my-8 bg-gradient-gray">
|
|
<div class="w-240 lg:w-full mx-auto">
|
|
<div class="clearfix md:px-8">
|
|
<div id="cf-browser-status" class=" relative w-1/3 md:w-full py-15 md:p-0 md:py-8 md:text-left md:border-solid md:border-0 md:border-b md:border-gray-400 overflow-hidden float-left md:float-none text-center">
|
|
<div class="relative mb-10 md:m-0">
|
|
|
|
<span class="cf-icon-browser block md:hidden h-20 bg-center bg-no-repeat"></span>
|
|
<span class="cf-icon-ok w-12 h-12 absolute left-1/2 md:left-auto md:right-0 md:top-0 -ml-6 -bottom-4"></span>
|
|
|
|
</div>
|
|
<span class="md:block w-full truncate">You</span>
|
|
<h3 class="md:inline-block mt-3 md:mt-0 text-2xl text-gray-600 font-light leading-1.3">
|
|
|
|
Browser
|
|
|
|
</h3>
|
|
|
|
<span class="leading-1.3 text-2xl text-green-success">Working</span>
|
|
|
|
</div>
|
|
<div id="cf-cloudflare-status" class=" relative w-1/3 md:w-full py-15 md:p-0 md:py-8 md:text-left md:border-solid md:border-0 md:border-b md:border-gray-400 overflow-hidden float-left md:float-none text-center">
|
|
<div class="relative mb-10 md:m-0">
|
|
<a href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_524&utm_campaign=relay.ditto.pub" target="_blank" rel="noopener noreferrer">
|
|
<span class="cf-icon-cloud block md:hidden h-20 bg-center bg-no-repeat"></span>
|
|
<span class="cf-icon-ok w-12 h-12 absolute left-1/2 md:left-auto md:right-0 md:top-0 -ml-6 -bottom-4"></span>
|
|
</a>
|
|
</div>
|
|
<span class="md:block w-full truncate">Dallas</span>
|
|
<h3 class="md:inline-block mt-3 md:mt-0 text-2xl text-gray-600 font-light leading-1.3">
|
|
<a href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_524&utm_campaign=relay.ditto.pub" target="_blank" rel="noopener noreferrer">
|
|
Cloudflare
|
|
</a>
|
|
</h3>
|
|
|
|
<span class="leading-1.3 text-2xl text-green-success">Working</span>
|
|
|
|
</div>
|
|
<div id="cf-host-status" class="cf-error-source relative w-1/3 md:w-full py-15 md:p-0 md:py-8 md:text-left md:border-solid md:border-0 md:border-b md:border-gray-400 overflow-hidden float-left md:float-none text-center">
|
|
<div class="relative mb-10 md:m-0">
|
|
|
|
<span class="cf-icon-server block md:hidden h-20 bg-center bg-no-repeat"></span>
|
|
<span class="cf-icon-error w-12 h-12 absolute left-1/2 md:left-auto md:right-0 md:top-0 -ml-6 -bottom-4"></span>
|
|
|
|
</div>
|
|
<span class="md:block w-full truncate">relay.ditto.pub</span>
|
|
<h3 class="md:inline-block mt-3 md:mt-0 text-2xl text-gray-600 font-light leading-1.3">
|
|
|
|
Host
|
|
|
|
</h3>
|
|
|
|
<span class="leading-1.3 text-2xl text-red-error">Error</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-240 lg:w-full mx-auto mb-8 lg:px-8">
|
|
<div class="clearfix">
|
|
<div class="w-1/2 md:w-full float-left pr-6 md:pb-10 md:pr-0 leading-relaxed">
|
|
<h2 class="text-3xl font-normal leading-1.3 mb-4">What happened?</h2>
|
|
<p class="mb-2">The origin web server timed out responding to this request.</p><p>The likely cause is an overloaded background task, database or application, stressing the resources on the host web server.</p>
|
|
</div>
|
|
<div class="w-1/2 md:w-full float-left leading-relaxed">
|
|
<h2 class="text-3xl font-normal leading-1.3 mb-4">What can I do?</h2>
|
|
|
|
<h3 class="text-15 font-semibold mb-2">If you're a visitor of this website:</h3>
|
|
<p class="mb-6">Please try again in a few minutes.</p>
|
|
|
|
<h3 class="text-15 font-semibold mb-2">If you're the owner of this website:</h3>
|
|
<p>Please refer to the <a rel="noopener noreferrer" href="https://developers.cloudflare.com/support/troubleshooting/http-status-codes/cloudflare-5xx-errors/error-524/">Error 524</a> article:</p>
|
|
<ul class="ml-4">
|
|
<li>Contact your hosting provider; check for long-running processes or an overloaded web server.</li>
|
|
<li>Use status polling of large HTTP processes to avoid this error.</li>
|
|
<li>Run the long-running scripts on a <a rel="noopener noreferrer" href="https://developers.cloudflare.com/dns/proxy-status/#dns-only-records">grey-clouded subdomain</a>.</li>
|
|
<li>Enterprise customers can <a rel="noopener noreferrer" href="https://developers.cloudflare.com/support/troubleshooting/http-status-codes/cloudflare-5xx-errors/error-524/#resolution-on-cloudflare">increase the timeout setting</a> globally or for specific requests using Cache Rules.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cf-error-footer cf-wrapper w-240 lg:w-full py-10 sm:py-4 sm:px-8 mx-auto text-center sm:text-left border-solid border-0 border-t border-gray-300">
|
|
<p class="text-13">
|
|
<span class="cf-footer-item sm:block sm:mb-1">Cloudflare Ray ID: <strong class="font-semibold">9edd9f5baaf6087e</strong></span>
|
|
<span class="cf-footer-separator sm:hidden">•</span>
|
|
<span id="cf-footer-item-ip" class="cf-footer-item hidden sm:block sm:mb-1">
|
|
Your IP:
|
|
<button type="button" id="cf-footer-ip-reveal" class="cf-footer-ip-reveal-btn">Click to reveal</button>
|
|
<span class="hidden" id="cf-footer-ip">2a06:98c0:3600::103</span>
|
|
<span class="cf-footer-separator sm:hidden">•</span>
|
|
</span>
|
|
<span class="cf-footer-item sm:block sm:mb-1"><span>Performance & security by</span> <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_524&utm_campaign=relay.ditto.pub" id="brand_link" target="_blank">Cloudflare</a></span>
|
|
|
|
</p>
|
|
<script>(function(){function d(){var b=a.getElementById("cf-footer-item-ip"),c=a.getElementById("cf-footer-ip-reveal");b&&"classList"in b&&(b.classList.remove("hidden"),c.addEventListener("click",function(){c.classList.add("hidden");a.getElementById("cf-footer-ip").classList.remove("hidden")}))}var a=document;document.addEventListener&&a.addEventListener("DOMContentLoaded",d)})();</script>
|
|
</div><!-- /.error-footer -->
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |