lyrics / lyrics.github.io

Open Lyrics Database website

lyrics.github.io

Web front end for the lyrics database.

Generated out of lyrics using lyrics-website-generator.

lyrics.github.io's Issues

Search needs improvements and an API

1. Search is lacking

At the moment I can't even search by title or album, much less both via some API.

There's Oleander
https://lyrics.github.io/db/o/oleander/

with album Joyride
https://lyrics.github.io/db/o/oleander/joyride/

with a song Runaway train
https://lyrics.github.io/db/o/oleander/joyride/runaway-train/

Yet the only working search from these is the last one.
https://lyrics.github.io/search.html?q=oleander
https://lyrics.github.io/search.html?q=joyride
https://lyrics.github.io/search.html?q=runaway%20train

2. Search API

For the API part, I'd for example like to have the lyrics show up in Deadbeef. For that there'd need to be a plugin that'd work via an API. There are plugins for sites like lyrics.wikia.com, and I can see they use an API that searches for both artist and the song.

https://github.com/loskutov/deadbeef-lyricbar/blob/master/src/utils.cpp#L25

No API is a show stopper IMO, this project would be infinitely more useful if things like music players could rely on it.

3. Translations

Looks like the /Lyrics repo has a translations folder but it doesn't seem to be supported at all by the site?

Hiding metadata on the website

Since it's a very simplistic website, would it be a good idea to hide metadata completely when generating pages with lyrics, keeping only the text?

Navigation bar on mobiles is too thin

The navigation bar perhaps should be 1.5x-2x thicker, in order to make it easier to scroll it horizontally using a thumb.

Resolution is too wide for mobiles, need responsive media-queries

http://codepen.io/SitePoint/pen/uIemr/

Indicating line separators for readability

Long lyrics (or if viewed on mobile) sometimes get wrapped between 2+ lines, this makes it harder to understand where the line began and ended (especially for lyrics in German). Perhaps wrapping each line into a tag (or using some CSS trick to put a line after every newline character) would aid readability.

E.g.

Got a bad tattoo with your name on it.

may get displayed as

Got a bad tattoo with
your name on it.

on devices with limited horizontal screen space available, and not indicating that it's supposed to be one line is detrimental to readability.

manifest.json

The website could use a manifest.json file to provide high-res icons for mobile devices, since the website itself is very fast and is capable of serving as a web app if network connection is available.

Lyrics.github.io needs to be split into two separate repos

It's a bit of a mess to keep both the source code to the website and the GitHub Pages website in one repo, especially when it's as ginormous as this one. Using branches would add complexity to the process, therefore I'd like to split the code that's needed to generate website out of lyrics.git into a separate repo, and keep only static website files in this one.

Responsive Navigation

What do you think about adding "reponsive navigation" using the W3.CSS Framework?

I added something like that to one of my websites and should be able to take on this issue.

iPad 1G gets an unknown JS error

prevents it from being used on old iOS devices

Breadcrumbs need more vertical margin on mobile

Too close to the text right now, needs to be spaced out a little