Redesign the interactive songbook home page (#46, #27)#62
Open
chrisglein wants to merge 3 commits into
Open
Conversation
Redesign the home page for a songbook+ audience: a tight top toolbar now leads with a song picker (labeled with the current title), compact icon toggles for lyrics/trumpet/tab, and a transpose control that's a key dropdown showing the current key with each destination key's semitone offset. The ABC textarea, "No errors" indicator, ABC-notation link, GitHub "add a song" link, PDF/QR block, and commit-hash link move into a hidden #advanced panel, revealed by a gear toggle or ?advanced=true. Also fix a latent bug where trumpet fingering never displayed (filter checked #show-trumpt instead of #show-trumpet).
…rewingcode#46, brewingcode#27) Refine the lean home UI: - New Staff toggle: hides the whole notation image (abcjs couples staff/notes/lyrics/tab and can't reflow), surfacing the song's extended W: verses as text. Pure-CSS via body.no-staff, overriding abcjs's inline padding-bottom so width is kept and the staff re-renders crisply when shown again. Color/Labels auto-disable when the staff is hidden. - Note color & note labels are now UI toggles (issue brewingcode#27): removed the hardcoded %%notecolors/%%notelabels from all 26 songs/*.txt and the default snippet; they're injected before rendering based on the Color/Labels toggles (default on, so the look is unchanged). - Icons switched to emoji (song 🎶, staff 🎼, color 🎨, labels 🔤, lyrics 🗣️, trumpet 🎺, guitar 🎸, songbook 📄, edit 🖊️). - Rename "Tab" -> "Guitar"; Key control now reads "Key: E♭ (+2)". - Edit button is a pen (was a gear); the advanced panel is now ABC-only (links, textarea, warnings). - Songbook PDF + QR moved into a modal launched by 📄, with the commit hash relocated to its footer as the version, separating it from the ABC-editing controls.
Rework the home-page graphic design based on a treatment sampler: - Two selectable color themes — "Soft" (off-white/blue, default) and "Nautical" (navy/brass-gold) — driven by CSS variables and a body class. A theme switcher (contrast icon) persists the choice in localStorage and applies it pre-render to avoid a flash. - Replace emoji with a monochrome line-art SVG icon sprite (+ an `icon` mixin); keep the GitHub logo as the only bitmapped glyph. - Docked bars instead of floating: a sticky full-width top bar, and a docked, collapsible bottom "Edit ABC" bar (its header toggles the editor) — removing the floating action button and the iPad disable-textarea dance. - Segmented toggle groups: a soft-grey track with pill segments — active pops (blue / gold), off segments take the standard button background, disabled ones fade. The edit bar shares the top bar's background. - Inject `%%vocalfont times 10` into every render (like the note color/label directives, but unconditional) and remove the hardcoded copies from the 19 songs that had it, so all songs share the serif lyric font. - Move the version/commit link out of the Songbook dialog into the ABC edit bar, and ignore the local `.temp/` scratch folder.
chrisglein
force-pushed
the
updateHomePage
branch
from
July 17, 2026 00:49
08cf9ba to
1fc960c
Compare
chrisglein
marked this pull request as ready for review
July 17, 2026 00:50
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#46
Fixes #27
Reworks the home page (
src/index.pug) from a developer-facing ABC editor into a clean, themeable "songbook+" experience — pick a song and read lyrics, chords, and melody — while keeping every power-user feature one click away. Addresses #46 (lean UX for a new audience) and #27 (common ABC props exposed in the UI instead of hardcoded per song).Highlights
W:) verses as text.Key: E♭ → G (+4)).%%notecolors/%%notelabelsare now UI toggles and%%vocalfont times 10is applied to every song — all injected at render time and removed from the song sources, so the ABC files stay clean and rendering is consistent across all songs.#show-trumpttypo; corrected. Also dropped the redundant "Guitar (EADGBE)" tab label (abcjs still shows the TAB clef; non-standard tuning isn't supported).Screenshots
Soft theme (default)
Nautical theme
Docked "Edit ABC" bar
Staff off → extended verses as text
Guitar tab
Songbook dialog (PDF + QR)
Mobile / responsive
Implementation notes
src/index.pug(CoffeeScript in a:coffeescriptfilter); themes are driven entirely by CSS custom properties toggled via abody.theme-*class.setSong(prepended before render), mirroring how the site already handles ABC. Song sources had%%notecolors/%%notelabels(26 files) and%%vocalfont times 10(19 files) removed accordingly.title=/file=select a song;advanced=trueopens the edit bar.Testing
Validated in-browser across both themes: song selection, all six toggles, key transpose, staff-off verses and clean re-show, the songbook dialog, the edit bar, and mobile wrapping.
npm run buildis clean.