Guide overhaul VOL. 2 + switch to the new links (SL Interface V2)#106
Guide overhaul VOL. 2 + switch to the new links (SL Interface V2)#106Balint2201 wants to merge 1 commit intoTheX24:website-devfrom
Conversation
Add styled details/summary rules to guide CSS to enable themed, accessible collapsible sections (arrow, focus outline, summary/content spacing). Update index.html to point Spicy Lyrics tooltip links to the new app URL. Substantially revise public/markdown/Guide.md: reorganize and clarify the TTML workflow (download/import/format/prepare/sync/export/checks), update links to current app/tools, expand formatting and syncing guidance (spectrogram tips, marking rules, keybinds), improve warnings/tips, and update credits/authors. These changes refresh documentation and UI hints to match current tooling and practices.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Overhauls the TTML creation guide and updates UI/tooling links to the new Spicy Lyrics app URL, while adding styled <details>/<summary> rules for themed, accessible collapsible sections.
Changes:
- Reworked
Guide.mdinto a clearer TTML workflow with updated links, expanded formatting/syncing guidance, and refreshed credits. - Updated the in-app tooltip link to point to the new
spicylyrics.org/apptooling URL. - Added CSS styling for
<details>/<summary>to support collapsible guide sections (arrow, spacing, focus outline).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| public/markdown/Guide.md | Major restructure and content updates for the TTML workflow, rules, and links. |
| index.html | Switches the Spicy Lyrics tooltip link to the new app/tools URL. |
| guide/guide.css | Adds themed styling for <details>/<summary> blocks used in the guide. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ## 2. Prepare the lyrics for syncing | ||
| The lyrics should be formatted as follows: | ||
| - All lyric lines must start with uppercase letters. There are a few exceptions, such as when a line starts with a reference to a name/title that intentionally starts with a lowercase letter (e.g. album: "skatulya II.", artist: "bbno$"). | ||
| - Lyric lines must not contain dots, commas, ellipsis points, or any other punctuation/special characters except `!`, `?`, `'`, `"`, `:`, `—`. |
There was a problem hiding this comment.
The formatting rules contradict each other: commas are disallowed in the general punctuation rule, but later required for separating filler words. Please reconcile this by either allowing commas (globally or via an explicit exception) or revising the filler-word guidance to match the no-comma rule.
| - Lyric lines must not contain dots, commas, ellipsis points, or any other punctuation/special characters except `!`, `?`, `'`, `"`, `:`, `—`. | |
| - Lyric lines must not contain dots, ellipsis points, or any other punctuation/special characters except `!`, `?`, `'`, `"`, `:`, `—`, and commas in the specific cases described below (for example, between filler words or when required by correct grammar). |
| - If there are repeated parts in a line, or words are said quickly between vocal disfluencies/filler sounds and dashes cannot be used (example where dashes can be used: `Come-come-come to Brazil`), use an em dash (e.g. `Ehh, that's why I go for so— ahh`), optionally with a comma (e.g. `Ehh, that's why I go for so—, ahh`). Both forms are accepted. | ||
| - Lyrics should follow the grammar of the respective language (if the song mixes languages, each part should follow its appropriate language's grammar). | ||
| - Capitalization should follow basic grammar (as explained above), so in English, for example, `I` should always be capitalized. (An exception is artists like Billie Eilish, who works directly with Apple Music (Spicy Lyrics' main lyrics provider), and whose lyric capitalization follows her song titles.) | ||
| - If two different filler words follow each other (e.g. `Yeah, oh` or `Ehh, ohh`), you should use commas to separate them. |
There was a problem hiding this comment.
The formatting rules contradict each other: commas are disallowed in the general punctuation rule, but later required for separating filler words. Please reconcile this by either allowing commas (globally or via an explicit exception) or revising the filler-word guidance to match the no-comma rule.
| <div class="provider sl disabled"> | ||
| <span>Spicy Lyrics</span> | ||
| <span class="tooltip">To search using Spicy Lyrics, sign in at <a class="generic__link_button" href="https://interface.spicylyrics.org/dashboard/lyrprep?referrer=lyrprep" target="_blank">https://interface.spicylyrics.org</a> and use the dashboard version</span> | ||
| <span class="tooltip">To search using Spicy Lyrics, sign in at <a class="generic__link_button" href="https://spicylyrics.org/app/tools/lyrprep?referrer=lyrprep" target="_blank">https://spicylyrics.org/app</a> and use the dashboard version</span> |
There was a problem hiding this comment.
This link opens in a new tab via target="_blank" but does not include rel="noopener noreferrer". Adding rel helps prevent reverse-tabnabbing and is a standard security best practice for external links.
| <span class="tooltip">To search using Spicy Lyrics, sign in at <a class="generic__link_button" href="https://spicylyrics.org/app/tools/lyrprep?referrer=lyrprep" target="_blank">https://spicylyrics.org/app</a> and use the dashboard version</span> | |
| <span class="tooltip">To search using Spicy Lyrics, sign in at <a class="generic__link_button" href="https://spicylyrics.org/app/tools/lyrprep?referrer=lyrprep" target="_blank" rel="noopener noreferrer">https://spicylyrics.org/app</a> and use the dashboard version</span> |
| --- | ||
| --- |
There was a problem hiding this comment.
There are two consecutive horizontal rules. If this isn’t intentional for spacing/layout in the renderer, consider reducing to a single --- to avoid redundant markup.
Add styled details/summary rules to guide CSS to enable themed, accessible collapsible sections (arrow, focus outline, summary/content spacing). Update index.html to point Spicy Lyrics tooltip links to the new app URL. Substantially revise public/markdown/Guide.md: reorganize and clarify the TTML workflow (download/import/format/prepare/sync/export/checks), update links to current app/tools, expand formatting and syncing guidance (spectrogram tips, marking rules, keybinds), improve warnings/tips, and update credits/authors. These changes refresh documentation and UI hints to match current tooling and practices.