content: generateQuickDescription: extraReadingLinks slot

3 files changed, 69 insertions, 6 deletions

diff --git a/src/content/dependencies/generateQuickDescription.js b/src/content/dependencies/generateQuickDescription.js
index f555af28..4c7c944a 100644
--- a/src/content/dependencies/generateQuickDescription.js
+++ b/src/content/dependencies/generateQuickDescription.js
@@ -34,16 +34,40 @@ export default {
     hasLongerDescription: query.hasLongerDescription,
   }),
 
-  generate(data, relations, {html, language}) {
+  slots: {
+    extraReadingLinks: {
+      validate: v => v.sparseArrayOf(v.isHTML),
+    },
+  },
+
+  generate(data, relations, slots, {html, language}) {
     const prefix = 'misc.quickDescription';
 
+    const actionsWithoutLongerDescription =
+      (data.hasLongerDescription
+        ? null
+     : slots.extraReadingLinks
+        ? language.$(prefix, 'readMore', {
+            links:
+              language.formatDisjunctionList(slots.extraReadingLinks),
+          })
+        : null);
+
     const wrapExpandCollapseLink = (expandCollapse, content) =>
       html.tag('a', {class: `${expandCollapse}-link`},
         {href: '#'},
         content);
 
     const actionsWhenCollapsed =
-      (data.hasLongerDescription
+      (data.hasLongerDescription && slots.extraReadingLinks
+        ? language.$(prefix, 'expandDescription.orReadMore', {
+            links:
+              language.formatDisjunctionList(slots.extraReadingLinks),
+            expand:
+              wrapExpandCollapseLink('expand',
+                language.$(prefix, 'expandDescription.orReadMore.expand')),
+          })
+     : data.hasLongerDescription
         ? language.$(prefix, 'expandDescription', {
             expand:
               wrapExpandCollapseLink('expand',
@@ -52,7 +76,15 @@ export default {
         : null);
 
     const actionsWhenExpanded =
-      (data.hasLongerDescription
+      (data.hasLongerDescription && slots.extraReadingLinks
+        ? language.$(prefix, 'collapseDescription.orReadMore', {
+            links:
+              language.formatDisjunctionList(slots.extraReadingLinks),
+            collapse:
+              wrapExpandCollapseLink('collapse',
+                language.$(prefix, 'collapseDescription.orReadMore.collapse')),
+          })
+     : data.hasLongerDescription
         ? language.$(prefix, 'collapseDescription', {
             collapse:
               wrapExpandCollapseLink('collapse',
@@ -81,13 +113,22 @@ export default {
         data.hasLongerDescription &&
           {class: 'collapsed'},
 
+        !data.hasLongerDescription &&
+        !slots.extraReadingLinks &&
+          {class: 'has-content-only'},
+
+        !data.hasDescription &&
+        slots.extraReadingLinks &&
+          {class: 'has-external-links-only'},
+
         [
           wrapContent(null, relations.description),
           wrapContent({class: 'short'}, relations.descriptionShort),
           wrapContent({class: 'long'}, relations.descriptionLong),
 
+          wrapActions(null, actionsWithoutLongerDescription),
           wrapActions({class: 'when-collapsed'}, actionsWhenCollapsed),
           wrapActions({class: 'when-expanded'}, actionsWhenExpanded),
         ]));
-  }
+  },
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 173c7910..1d0b8917 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1263,18 +1263,27 @@ ul.quick-info li:not(:last-child)::after {
   margin-top: 25px;
 }
 
-.quick-description {
+.quick-description:not(.has-external-links-only) {
   margin-left: 8%;
   margin-right: 8%;
   padding-left: 4%;
   padding-right: 4%;
   padding-top: 0.25em;
-  padding-bottom: 0.5em;
+  padding-bottom: 0.75em;
   border-left: 1px solid var(--dim-color);
   border-right: 1px solid var(--dim-color);
   line-height: 1.25em;
 }
 
+.quick-description.has-external-links-only {
+  padding-left: 12%;
+  padding-right: 12%;
+}
+
+.quick-description.has-content-only {
+  padding-bottom: 0.5em;
+}
+
 .quick-description p {
   text-align: center;
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 96ec36ad..8429c4cd 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -625,6 +625,11 @@ misc:
 
   missingLinkContent: "(Missing link content)"
 
+  # quickDescription:
+  #   Toggleable display where a shorter blurb from a description is
+  #   initially visible, and a button can be clicked to display the
+  #   rest. May also display "read more" links (to external sites).
+
   quickDescription:
     moreInfo:
       _: "({LINK})"
@@ -634,10 +639,18 @@ misc:
       _: "({EXPAND})"
       expand: "Expand description..."
 
+    expandDescription.orReadMore:
+      _: "({EXPAND}, or read more on {LINKS})"
+      expand: "Expand description"
+
     collapseDescription:
       _: "({COLLAPSE})"
       collapse: "Collapse description"
 
+    collapseDescription.orReadMore:
+      _: "({COLLAPSE}, or read more on {LINKS})"
+      collapse: "Collapse description"
+
   # nav:
   #   Generic navigational elements. These usually only appear in the
   #   wiki's nav bar, at the top of the page.