twostraws / Ignite

A static site generator for Swift developers.
MIT License
986 stars 34 forks source link

Adds Spotify to Embed #29

Closed jessielinden closed 2 weeks ago

jessielinden commented 3 weeks ago

Proposal

Screenshot 2024-04-24 at 10 31 42 AM

Progress

For my own website, I customized what they provided by taking the following steps:

func embed(spotifyID: String, title: String, height: String = "520", type: SpotifyContentType = .track) -> String { if let test = URL(string: "https://open.spotify.com/embed/\(type.rawValue)/\(spotifyID)?utm_source=generator&theme=0") { let url = test.absoluteString let allowPermissions = "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" return #""# } else { fatalError("Failed to create Spotify URL from ID: (spotifyID).") } }


- I edited out parts of their code that didn't match what was in `Embed` with the hope I could at some point propose adding this in without having to touch its render code, because it seems that we're getting things through the 'embed' part of the Spotify URL (ex. `border-radius: 12px`), so now the only parameters that don't match are **width and height**
- I called my `embed` function inside a `Text` and voila

## Issues 
- Why do I need to specify the width and height? 
In a browser, [the URL by itself renders a player that takes up the whole screen](https://open.spotify.com/embed/album/6BzxX6zkDsYKFJ04ziU5xQ?utm_source=generator&theme=0). But on my page, the default size is a small box.
I preferred my version to be as tall as my track count (found through trial and error) and as wide as possible, and I could see others wanting other customizations.
- I tried forking the repo and hoped I could incorporate this into `Embed`. I got as far as the code in this PR, which does not have customized dimensions. I had hoped that the desired dimensions could be achieved via the `style` and `frame` modifiers, but that did not work. I am aware that an aspect ratio must be set for `Embed` instances, so I'm interested to know if this incorporation is even possible.

Making this website is my first encounter with html or css, so I may just be missing something simple.
In any case, if this is interesting to add to Ignite, I'd love some help in making it work! And if not, I totally understand
twostraws commented 3 weeks ago

This is a great improvement – thank you! It's marked draft, but I'm happy to merge it in now and we can figure it out over time. I'm sure we can find a way to make Spotify embeds look as good as YouTube/Vimeo embeds without too much extra work!

jessielinden commented 3 weeks ago

Awesome!