Complete HTML template

patacrep/songs/chordpro/data/html/content_comment

@@ -1 +1 @@
-{comment: (( content.argument ))}
+<div class="comment">(( content.argument ))</div>

patacrep/songs/chordpro/data/html/content_define

@@ -1,25 +1,31 @@
-{define: (( render(content.key) ))
-(*- if content.basefret *)
- base-fret ((content.basefret))
+<div(( " " -))
+    class="chord-diagram"(( " " -))
+    data-shift="
+      (*- if content.basefret -*)
+        ((content.basefret))
+      (*- else -*)
+        0
       (*- endif *)
- frets
-(*- for string in content.frets -*)
-  (( " " -))
-  (*- if string is none -*)
+    ((- '" ' -))
+    data-frets="
+      (*- for fret in content.frets -*)
+       (* if fret is none -*)
          x
        (*- else -*)
-      (( string -))
-  (*- endif -*)
-(*- endfor -*)
-(* if content.fingers *)
- fingers
+         (( fret -))
+       (* endif -*)
+      (* endfor -*)
+    ((- '" ' -))
+    (* if content.fingers -*)
+      data-fingers="
       (*- for finger in content.fingers -*)
-   (( " " -))
        (* if finger is none -*)
          -
        (*- else -*)
          (( finger -))
        (* endif -*)
       (* endfor -*)
+      ((- '" ' -))
     (* endif -*)
-}
+    data-name="(( content.pretty_key ))"(( " " -))
+></div>

patacrep/songs/chordpro/data/html/content_define_list

@@ -0,0 +1,3 @@
+(*- for chord in metadata['define'] *)
+  ((- render(chord) ))
+(* endfor *)

patacrep/songs/chordpro/data/html/content_guitar_comment

@@ -1 +1 @@
-{guitar_comment: (( content.argument ))}
+<div class="guitar_comment">(( content.argument ))</div>

patacrep/songs/chordpro/data/html/content_image

@@ -1 +1 @@
-{image: (( content.argument ))}
+<img src="(( content.argument ))">

patacrep/songs/chordpro/data/html/content_metadata_cover

@@ -0,0 +1,3 @@
+(* if 'cov' in metadata -*)
+  <img src="(( metadata['cov'].argument|search_image ))"><br>
+(* endif *)

patacrep/songs/chordpro/data/html/content_partition

@@ -1 +1 @@
-{partition: ((content.argument))}
+<a class="song-partition" href="((content.argument))">((content.argument))</a>

patacrep/songs/chordpro/data/html/content_verse

@@ -1,5 +1,6 @@
 <p class="(( content.type ))">
   (*- for line in content.lines -*)
+    (* if not loop.first *)<br>(* endif -*)
     (( render(line) ))
   (* endfor -*)
 </p>

patacrep/songs/chordpro/data/html/song

@@ -1,3 +1,5 @@
 (* include 'song_header' *)
 
+<div class="song_content">
 (* include 'song_body' *)
+</div>

patacrep/songs/chordpro/data/html/song_header

@@ -1,31 +1,30 @@
-(* if language is defined -*)
-  {language: (( language ))}
-(* endif *)
-(* if metadata.columns is defined -*)
-  {columns: (( metadata.columns ))}
-(* endif *)
-(* if metadata.capo is defined -*)
-  {capo: (( metadata.capo ))}
-(* endif *)
-
 (*- for title in titles -*)
-  {title: (( title ))}
+  (* if loop.first *)
+    <h1 class="song-title">(( title ))</h1>
+  (* else *)
+    <h2 class="song-title">(( title ))</h2>
+  (* endif *)
 (* endfor -*)
 
 (*- for author in authors -*)
-  {artist: (( author[1] ))(( author[0] ))}
+  <h2 class="song-artist">(( author[1] ))(( author[0] ))</h2>
 (* endfor *)
 
-(*- for key in ['album', 'copyright', 'cov', 'tag'] *)
+
+(*- for key in ['album', 'copyright', 'tag', 'columns', 'capo'] *)
   (* if key in metadata -*)
-    {(( key )): (( metadata[key] ))}
+    <span class="song-(( key ))">(( key|capitalize )): (( metadata[key] ))</span><br/>
   (* endif *)
 (* endfor *)
 
+(* if language is defined -*)
+  <span class="song-language">Language: (( language ))</span><br>
+(* endif *)
+
+(* include 'content_metadata_cover' *)
+
 (*- for key in metadata.keys -*)
   {key: (( key.keyword )): (( key.argument ))}
 (* endfor *)
 
-(*- for chord in metadata['define'] *)
-  ((- render(chord) ))
-(* endfor *)
+(* include 'content_define_list' *)