From 56bba5fcc4b02ba63df03d7229af860512feaa8a Mon Sep 17 00:00:00 2001
From: Martin Pitt <martin@piware.de>
Date: Wed, 23 Sep 2026 23:04:37 +0200
Subject: [PATCH] Render the key directive

{key: G} is shown below the artist, marked with a treble clef.
---
 chordpro-web.html | 1 +
 chordpro-web.js   | 3 +++
 chordpro.css      | 4 ++++
 3 files changed, 8 insertions(+)

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;
 }
-- 
2.47.3