diff options
-rw-r--r-- | src/content/dependencies/generatePageLayout.js | 42 | ||||
-rw-r--r-- | src/static/css/site.css | 10 | ||||
-rw-r--r-- | src/strings-default.yaml | 13 |
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! |