evadecker / genderswap.fm Goto Github PK

Sometimes you wanna hear a little sample of a song when submitting to check it's the right track

https://vercel.com/docs/edge-network/caching

It would be nice to play songs on the site if that's possible with the Spotify API, for people who don't have Spotify

• Write an edge function to take the album art URL and return a hex code for the dominant color
• Save the color to a new database column
• Fetch and display the dominant color as the placeholder background for albums, while images load
• Explore background effects and tinting using the dominant color

Increase search ranking for "gender swapped covers" "genderbent music" "trans music covers" etc.

Share site on RateMyMusic and other high-ranked results if not spammy

• https://www.reddit.com/r/LetsTalkMusic/comments/7m6pty/lets_talk_genderswapped_covers/
• https://www.buzzfeed.com/skarlan/girls-want-to-steal-jessies-girl-too
• https://listverse.com/2022/07/22/ten-gender-swapped-cover-songs-that-altered-the-meaning/
• https://www.reddit.com/r/Music/comments/4sn2un/cover_songs_by_the_opposite_gender_that_take_on_a/
• https://theafterword.co.uk/reverse-gender-covers/

Make sure subpages are canonical and link back to home, and are present in site map

If someone navigates into the detail view and back out, they should be able to resume where they were in the grid instead of having all albums reload

Do not wait for database response to display page

Skeleton loaders, etc.

Row-level security would be smart, let's see how we can authenticate

Users should have an affordance to understand how many other covers are hidden behind "load more", and have a cue that all covers have been loaded when the button no longer appears

Requirements:

• Debounced query
• Display results inline on the page
• Highlight matched text
• Properly update pagination and results count
• Add dynamic routes for search queries, e.g. https://genderswap.fm/search?q=abba&tag=sadder

Options:

• Postgres Full Text Search
• Meilisearch
• Typesense
• Algolia (tutorial) (example)

Sparkly little celebratory moment

You should be able to click these and filter on them!

Enhancement! Less typing, just fill in the artist name and it will search, or delete if the name is different

It's making a lot of calls!

Since #111, the site now shows a flash of the light theme on first load

Prevent theme script from blocking render

• https://github.com/aFarkas/lazysizes

Images from Spotify API are improperly sized and could be better compressed as webp

No control over the image the API returns

To fix, would need to

• Download full-res image from Spotify API
• Save to storage (Cloudflare?)
• Fetch from storage with optimizations applied (.webp, properly sized)

Currently in development mode, when site is ready should apply

Go to a random cover

https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat

If the original song already exists in the database we can just skip adding it and shouldn't throw an error

Make text bold instead

Automatically push updates to:

• originals + covers: https://open.spotify.com/playlist/5YQ4AyxQ6DeDxKJgSryAU2?si=21b0ccaea6c648c3
• covers only: https://open.spotify.com/playlist/50iUGmY3cSUETCHGfUgf6a?si=f2a7ae6584ad4c39

and sort alphabetically by name.

Run once a week?

The pagination count is correct; the footer count remains the same as when the site was built and does not increment.

Include album arts, title, description

Query spotify for artist / song combo and sort by oldest release

"Pick this earlier release?"

Also sort search dropdown by release date

This is literally due to the curly quote

• CI
• Integration

Song titles, etc. should use curly quotes

https://genderswap.fm/cover/gloria-in-excelsis-deo-patti-smith/og.png

https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project

Facilitate exploration!

Why make this site? What's it for?

What makes a gender-swapped cover?

Quotes from Paul takes the form of a mortal girl

Let users know what tags will be added to the cover before the cover has been added

• "This cover already exists on Genderswap.fm! [link to cover]"
• An existing cover should also prevent submission via a client-side form error
• Maybe better to ask for the cover before the original? To prevent unnecessary keystrokes for the user

https://genderswap.fm/cover/leaving-on-a-jet-planetake-me-home-country-roads-judy-collins

should be

https://genderswap.fm/cover/leaving-on-a-jet-plane-take-me-home-country-roads-judy-collins

https://genderswap.fm/tagged/more-danceable