kevinkace/lyrite

A tool tool to format lyrics

Lyrite - a tool to format lyrics

What is Lyrite?

A simple web-app to style song lyrics so they are easier to read when jamming. 🎸 🎤

Adding custom lyrics

1. paste lyrics into the text field.
2. click "load song"

Editing & styling lyrics

1. tools are accessible by clicking the quill icon in the top right
2. directly adjust the font size or number of columns
3. click the edit button edit lyrics
4. color the lyrics by clicking one of the colors, then clicking a section of lyrics

Why?

The need for this app came from a real-world scenario; jamming with friends and needing an easy to read lyric sheet. Most sites display lyrics in a single column often taking up more than a full page.

With Lyrite you can easily have all lyrics on a single page with columns and font size adjustment. You can also color sections of lyrics making them easier to track visually.

Technology

A single page application built with Mithril & Modular-CSS, bundled with vite, and hosted on Netlify.
It uses localstorage for saving custom songs.

How to pronounce?

It's a portmanteau of "lyrics" and "write"; Lyrite.

Contributors & Thanks

Kevin Cameron - Most things (dev, design, features)
Neil Hagar - jamming buddy, and sounding board
Eli Scheer - logo, and fonts

Video of styling a song

Video of adding a custom song

lyrite's Issues

Test in FF

Fix version number

Travis not getting the git tag?

Change edit button text to "close" when open

Edit tools/login/fork rework

Bigger issue. Editing should only be allowed if owner, so:

if logged in and owner -> edit as usual
if logged in and not owner -> fork
if not logged in -> login prompt

capitalize "Username" in username added modal

Username first

Set up Firestore security tests

https://www.npmjs.com/package/firestore-security-tests

Update babel-preset-es2015

This package has been deprecated
Author message:
🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Add user name creation to signup

After registration, user will need to choose a user name.

Set up CI to gen gh-pages

LocalStorage

Custom column breaks

...instead of just content length.

Product tour

those annoying step-by-step things.

Convert to ESM

Update user songs references

Right now when a user adds a new song a reference is added to the user entry in Firestore. When the song is deleted, that reference also needs to be deleted.

Add virtual pageviews

Update webpack to move favicon

Redraw when logging in before add username

handle 404

login/create account copy

do whatever is in the docs

Backend and accounts

So you can access songs from other computers.

Add Markdown support

Create user song listing

Something like /users/username

Test Firestore rules, security

• create user
• update user with photo
• update user with username
• create username
• create song
• update song
• try regex for: username, photoURL, ...

Add artist name to lyrics page title

Test Login flows

New user

• clear cache, not logged into provider
• clear cache
• clear cache, deny auth
• cached auth
• close username
• click login ??
• clear cache, dupe user name

Existing user, no username

• clear cache
• cached auth
• dupe name

Existing user, username

• clear cache
• cached auth

Random

• no photo
• log out

Fix title/artist modal

Forking lyrics

Right now there's just a placeholder.

Change delete timeout to Firestore function

Remove provider info from firestore

No reason to store this that I can think of.

Provider icon shown in login modal, can be stored on state and not shown if missing.

Set lyric section class by hash

Failed then successful login cleanup

song slugs unique per user

Sort songs in song list

Fix errors on songForm

Split routes

{
    "/"      : "home",
    "/:song" : "song"
}

Update user created songs' slugs

Something like /users/user-name/songs/song-slug

Nuke songForm validation and use HTML5 form validation

Add sample song on signin

so they can test without adding

username modal copy

choose a username to continue
or logout

test GH and FB logins

Responsive

Header/col

song slug should be by user

Add user icon to to header