content, css: generatePageLayout: subtitle slot

3 files changed, 55 insertions, 10 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 460ae51a..cc8bc777 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -74,6 +74,11 @@ export default {
       default: true,
     },
 
+    subtitle: {
+      type: 'html',
+      mutable: false,
+    },
+
     showSearch: {
       type: 'boolean',
       default: true,
@@ -268,6 +273,14 @@ export default {
           })
         : html.tag('h1', titleContentsHTML));
 
+    // TODO: There could be neat interactions with the sticky heading here,
+    // but for now subtitle is totally separate.
+    const subtitleHTML =
+      (html.isBlank(slots.subtitle)
+        ? null
+        : html.tag('h2', {class: 'page-subtitle'},
+            language.sanitize(slots.subtitle)));
+
     let footerContent = slots.footerContent;
 
     if (html.isBlank(footerContent) && relations.defaultFooterContent) {
@@ -282,8 +295,12 @@ export default {
       html.tag('main', {id: 'content'},
         {class: slots.mainClasses},
 
+        !html.isBlank(subtitleHTML) &&
+          {class: 'has-subtitle'},
+
         [
           titleHTML,
+          subtitleHTML,
 
           html.tag('div', {id: 'cover-art-container'},
             {[html.onlyIfContent]: true},
@@ -604,14 +621,23 @@ export default {
 
           html.tag('head', [
             html.tag('title',
-              (slots.showWikiNameInTitle
-                ? language.formatString('misc.pageTitle.withWikiName', {
-                    title: slots.title,
-                    wikiName: data.wikiName,
-                  })
-                : language.formatString('misc.pageTitle', {
-                    title: slots.title,
-                  }))),
+              language.encapsulate('misc.pageTitle', workingCapsule => {
+                const workingOptions = {};
+
+                workingOptions.title = slots.title;
+
+                if (!html.isBlank(slots.subtitle)) {
+                  workingCapsule += '.withSubtitle';
+                  workingOptions.subtitle = slots.subtitle;
+                }
+
+                if (slots.showWikiNameInTitle) {
+                  workingCapsule += '.withWikiName';
+                  workingOptions.wikiName = data.wikiName;
+                }
+
+                return language.$(workingCapsule, workingOptions);
+              })),
 
             html.tag('meta', {charset: 'utf-8'}),
             html.tag('meta', {
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 32b25bd4..65f14e91 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1450,6 +1450,16 @@ html[data-url-key="localized.home"] #content h1 {
   margin-bottom: 0.25em;
 }
 
+#content.top-index.has-subtitle h1 {
+  margin-bottom: 0.35em;
+}
+
+#content.top-index h2.page-subtitle {
+  font-size: 1.8em;
+  margin-top: 0.35em;
+  margin-bottom: 0.5em;
+}
+
 .quick-info {
   text-align: center;
   padding-left: calc(var(--responsive-padding-ratio) * 100%);
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 5f82a1a1..5ccd05cc 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -739,8 +739,17 @@ misc:
   #   displayed in the browser tab bar, bookmarks list, etc.
 
   pageTitle:
-    _: "{TITLE}"
-    withWikiName: "{TITLE} | {WIKI_NAME}"
+    _: >-
+      {TITLE}
+
+    withSubtitle: >-
+      {TITLE} - {SUBTITLE}
+
+    withWikiName: >-
+      {TITLE} | {WIKI_NAME}
+
+    withSubtitle.withWikiName: >-
+      {TITLE} - {SUBTITLE} | {WIKI_NAME}
 
   # search:
   #   Strings to do with the search bar!