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 d19fac2f427487fba48ebe4884e7bd9d2848b797..63f981d7488ceff8e7359075c7f4b39fc96b2582 100644 (file)
--- 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 f24ca37ca6566eb9932a9aca960f829eada730c1..cb5ea81761aa35007f94d5ad5ea321be59c07728 100644 (file)
--- 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 020cbe56ce5cc3df992304372c93c63bd4c80250..75ddada5a28d6c94cf55ea6aacbe77f372ef35bf 100644 (file)
--- 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;
 }