From: Martin Pitt <martin@piware.de>
Date: Wed, 23 Sep 2026 21:04:37 +0000 (+0200)
Subject: Render the key directive
X-Git-Url: https://piware.de/gitweb/?a=commitdiff_plain;h=56bba5fcc4b02ba63df03d7229af860512feaa8a;p=chordpro-web.git

Render the key directive

{key: G} is shown below the artist, marked with a treble clef.
---

diff --git a/chordpro-web.html b/chordpro-web.html
index d19fac2..63f981d 100644
--- a/chordpro-web.html
+++ b/chordpro-web.html
@@ -10,6 +10,7 @@
 <body>
   <h1 id="title">No file loaded</h1>
   <h2 id="artist"></h2>
+  <p id="key"></p>
 
   <div id="song"></div>
 
diff --git a/chordpro-web.js b/chordpro-web.js
index f24ca37..cb5ea81 100644
--- a/chordpro-web.js
+++ b/chordpro-web.js
@@ -18,6 +18,9 @@ const directive_handlers = {
     subtitle: value => {
         document.getElementById('artist').textContent = value;
     },
+    key: value => {
+        document.getElementById('key').textContent = value;
+    },
     comment: value => html`<p class="comment">${value}</p>`,
 };
 
diff --git a/chordpro.css b/chordpro.css
index 020cbe5..75ddada 100644
--- a/chordpro.css
+++ b/chordpro.css
@@ -10,6 +10,10 @@ h2, .comment {
   font-style: italic;
 }
 
+#key:not(:empty)::before {
+  content: '𝄞 ';
+}
+
 .verse {
   white-space: pre-line;
 }