From a63aa935b9a2e9b5f1d3677e15cbd48a2a9ccea6 Mon Sep 17 00:00:00 2001
From: Martin Pitt <martin@piware.de>
Date: Wed, 23 Sep 2026 23:28:17 +0200
Subject: [PATCH] Render chorus sections

---
 chordpro-web.js | 31 ++++++++++++++++++++++++-------
 chordpro.css    |  5 +++++
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/chordpro-web.js b/chordpro-web.js
index 93a859a..a7914c1 100644
--- a/chordpro-web.js
+++ b/chordpro-web.js
@@ -86,17 +86,25 @@ directive_handlers.c = directive_handlers.comment;
 function renderChordpro(text) {
     const song = [];
     const chords = [];
+    let chorus = null; // content of the chorus being parsed, if any
     let verseLines = [];
     let verseHasChords = false;
 
     const flushVerse = () => {
         if (verseLines.length === 0)
             return;
-        song.push(html`<p class="verse${verseHasChords ? ' chords' : ''}">${verseLines}</p>`);
+        (chorus ?? song).push(html`<p class="verse${verseHasChords ? ' chords' : ''}">${verseLines}</p>`);
         verseLines = [];
         verseHasChords = false;
     };
 
+    const endChorus = () => {
+        if (chorus === null)
+            return;
+        song.push(html`<div class="chorus">${chorus}</div>`);
+        chorus = null;
+    };
+
     for (let line of text.split('\n')) {
         line = line.trim();
         if (line.startsWith('#'))
@@ -105,12 +113,20 @@ function renderChordpro(text) {
         const m = re_directive.exec(line);
         if (m) {
             flushVerse();
-            const [, directive, value] = m;
-            const handler = directive_handlers[directive];
-            if (handler)
-                song.push(handler(value ?? '', chords));
-            else
-                console.warn('unknown directive:', line);
+            const [, directive, value = ''] = m;
+            const target = chorus ?? song;
+            if (['start_of_chorus', 'soc'].includes(directive)) {
+                endChorus();
+                chorus = [];
+            } else if (['end_of_chorus', 'eoc'].includes(directive)) {
+                endChorus();
+            } else {
+                const handler = directive_handlers[directive];
+                if (handler)
+                    target.push(handler(value, chords));
+                else
+                    console.warn('unknown directive:', line);
+            }
         } else if (line === '') {
             flushVerse();
         } else {
@@ -134,6 +150,7 @@ function renderChordpro(text) {
         }
     }
     flushVerse();
+    endChorus();
     if (chords.length > 0)
         song.push(html`<div class="diagrams">${chords.map(chordDiagram)}</div>`);
 
diff --git a/chordpro.css b/chordpro.css
index 628b0fd..09e370f 100644
--- a/chordpro.css
+++ b/chordpro.css
@@ -70,6 +70,11 @@ h2, .comment {
   white-space: pre-line;
 }
 
+.chorus {
+  border-left: 3px solid #39F;
+  padding-left: 0.7em;
+}
+
 /* A segment is one chord and the lyrics up to the next chord, stacked as two
    rows. Its width is the wider of the two, so chords can never overlap each
    other or the next segment. Line wrapping only happens between segments;
-- 
2.47.3