content, css: generateLyricsEntry: source & wiki contributors

3 files changed, 67 insertions, 8 deletions

diff --git a/src/content/dependencies/generateLyricsEntry.js b/src/content/dependencies/generateLyricsEntry.js
index 4f9c22f1..fb8e71cc 100644
--- a/src/content/dependencies/generateLyricsEntry.js
+++ b/src/content/dependencies/generateLyricsEntry.js
@@ -1,13 +1,27 @@
 export default {
-  contentDependencies: [
-    'transformContent',
-  ],
-
+  contentDependencies: ['linkArtist', 'linkExternal', 'transformContent'],
   extraDependencies: ['html', 'language'],
 
   relations: (relation, entry) => ({
     content:
       relation('transformContent', entry.body),
+
+    artistText:
+      relation('transformContent', entry.artistText),
+
+    artistLinks:
+      entry.artists
+        .filter(artist => artist.name !== 'HSMusic Wiki') // smh
+        .map(artist => relation('linkArtist', artist)),
+
+    sourceLinks:
+      entry.sourceURLs
+        .map(url => relation('linkExternal', url)),
+  }),
+
+  data: (entry) => ({
+    isWikiLyrics:
+      entry.isWikiLyrics,
   }),
 
   slots: {
@@ -17,9 +31,40 @@ export default {
     },
   },
 
-  generate: (relations, slots, {html}) =>
-    html.tag('div', {class: 'lyrics-entry'},
-      slots.attributes,
+  generate: (data, relations, slots, {html, language}) =>
+    language.encapsulate('misc.lyrics', capsule =>
+      html.tag('div', {class: 'lyrics-entry'},
+        slots.attributes,
+
+        [
+          html.tag('p', {class: 'lyrics-details'},
+            {[html.onlyIfContent]: true},
+            {[html.joinChildren]: html.tag('br')},
+
+            [
+              language.$(capsule, 'source', {
+                [language.onlyIfOptions]: ['source'],
+
+                source:
+                  language.formatUnitList(
+                    relations.sourceLinks.map(link =>
+                      link.slots({
+                        indicateExternal: true,
+                        tab: 'separate',
+                      }))),
+              }),
+
+              data.isWikiLyrics &&
+                language.$(capsule, 'contributors', {
+                  [language.onlyIfOptions]: ['contributors'],
+
+                  contributors:
+                    (html.isBlank(relations.artistText)
+                      ? language.formatUnitList(relations.artistLinks)
+                      : relations.artistText.slot('mode', 'inline')),
+                }),
+            ]),
 
-      relations.content.slot('mode', 'lyrics')),
+          relations.content.slot('mode', 'lyrics'),
+        ])),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 60e93708..c5799ae7 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1770,6 +1770,11 @@ p.image-details.origin-details {
   padding-left: 40px;
 }
 
+.lyrics-entry .lyrics-details {
+  font-size: 0.9em;
+  font-style: oblique;
+}
+
 .js-hide,
 .js-show-once-data,
 .js-hide-once-data {
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index ef885e00..486871ac 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -711,6 +711,15 @@ misc:
       playlist: "YouTube (playlist)"
       fullAlbum: "YouTube (full album)"
 
+  # lyrics:
+
+  lyrics:
+    source: >-
+      Via {SOURCE}
+
+    contributors: >-
+      Contributions from {CONTRIBUTORS}
+
   # missingImage:
   #   Fallback text displayed in an image when it's sourced to a file
   #   that isn't available under the wiki's media directory. While it