content, data: LyricsEntry.originDetailS preview

3 files changed, 31 insertions, 1 deletions

diff --git a/src/content/dependencies/generateLyricsEntry.js b/src/content/dependencies/generateLyricsEntry.js
index 02fd3634..0c91ce0c 100644
--- a/src/content/dependencies/generateLyricsEntry.js
+++ b/src/content/dependencies/generateLyricsEntry.js
@@ -17,6 +17,9 @@ export default {
     sourceLinks:
       entry.sourceURLs
         .map(url => relation('linkExternal', url)),
+
+    originDetails:
+      relation('transformContent', entry.originDetails),
   }),
 
   data: (entry) => ({
@@ -75,6 +78,14 @@ export default {
                 language.$(capsule, 'squareBracketAnnotations'),
             ]),
 
+          html.tag('p', {class: 'origin-details'},
+            {[html.onlyIfContent]: true},
+
+            relations.originDetails.slots({
+              mode: 'inline',
+              absorbPunctuationFollowingExternalLinks: false,
+            })),
+
           relations.content.slot('mode', 'lyrics'),
         ])),
 };
diff --git a/src/data/things/content.js b/src/data/things/content.js
index 60995c4a..e380780c 100644
--- a/src/data/things/content.js
+++ b/src/data/things/content.js
@@ -155,6 +155,10 @@ export class CommentaryEntry extends ContentEntry {
 
 export class LyricsEntry extends ContentEntry {
   static [Thing.getPropertyDescriptors] = () => ({
+    // Update & expose
+
+    originDetails: contentString(),
+
     // Expose only
 
     isWikiLyrics: hasAnnotationPart({
@@ -184,6 +188,12 @@ export class LyricsEntry extends ContentEntry {
       },
     ],
   });
+
+  static [Thing.yamlDocumentSpec] = Thing.extendDocumentSpec(ContentEntry, {
+    fields: {
+      'Origin Details': {property: 'originDetails'},
+    },
+  });
 }
 
 export class CreditingSourcesEntry extends ContentEntry {}
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 5934e206..8ec39f95 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1777,11 +1777,20 @@ p.image-details.origin-details {
   padding-left: 40px;
 }
 
-.lyrics-entry .lyrics-details {
+.lyrics-entry .lyrics-details,
+.lyrics-entry .origin-details {
   font-size: 0.9em;
   font-style: oblique;
 }
 
+.lyrics-entry .lyrics-details {
+  margin-bottom: 0;
+}
+
+.lyrics-entry .origin-details {
+  margin-top: 0.25em;
+}
+
 .js-hide,
 .js-show-once-data,
 .js-hide-once-data {