From cdf4ad59b6bc634a2268fb84e72181e59262aaf2 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 3 Dec 2023 18:23:41 -0400 Subject: content, css: generateNewsEntryPageReadAnotherLinks, datetimestamps --- src/content/dependencies/generateNewsEntryPage.js | 52 ++---------- .../generateNewsEntryReadAnotherLinks.js | 94 ++++++++++++++++++++++ src/static/site6.css | 4 +- src/strings-default.yaml | 11 ++- 4 files changed, 112 insertions(+), 49 deletions(-) create mode 100644 src/content/dependencies/generateNewsEntryReadAnotherLinks.js diff --git a/src/content/dependencies/generateNewsEntryPage.js b/src/content/dependencies/generateNewsEntryPage.js index c8db9f35..fbd4f609 100644 --- a/src/content/dependencies/generateNewsEntryPage.js +++ b/src/content/dependencies/generateNewsEntryPage.js @@ -2,6 +2,7 @@ import {sortChronologically} from '#wiki-data'; export default { contentDependencies: [ + 'generateNewsEntryReadAnotherLinks', 'generatePageLayout', 'generatePreviousNextLinks', 'linkNewsEntry', @@ -52,20 +53,20 @@ export default { relations.previousNextLinks = relation('generatePreviousNextLinks'); + relations.readAnotherLinks = + relation('generateNewsEntryReadAnotherLinks', + newsEntry, + query.previousEntry, + query.nextEntry); + if (query.previousEntry) { relations.previousEntryNavLink = relation('linkNewsEntry', query.previousEntry); - - relations.previousEntryContentLink = - relation('linkNewsEntry', query.previousEntry); } if (query.nextEntry) { relations.nextEntryNavLink = relation('linkNewsEntry', query.nextEntry); - - relations.nextEntryContentLink = - relation('linkNewsEntry', query.nextEntry); } } @@ -110,44 +111,7 @@ export default { })), relations.content, - - html.tag('p', { - [html.onlyIfContent]: true, - [html.joinChildren]: html.tag('br'), - class: 'read-another-links', - }, [ - relations.previousEntryContentLink && - language.$('newsEntryPage.readAnother.previous', { - entry: relations.previousEntryContentLink, - - date: - html.tag('span', - { - title: - language.$('newsEntryPage.readAnother.earlier', { - time: - language.countDays(data.daysSincePreviousEntry, {unit: true}), - }).toString(), - }, - language.formatDate(data.previousEntryDate)), - }), - - relations.nextEntryContentLink && - language.$('newsEntryPage.readAnother.next', { - entry: relations.nextEntryContentLink, - - date: - html.tag('span', - { - title: - language.$('newsEntryPage.readAnother.later', { - time: - language.countDays(data.daysUntilNextEntry, {unit: true}), - }).toString(), - }, - language.formatDate(data.nextEntryDate)), - }), - ]), + relations.readAnotherLinks, ], navLinkStyle: 'hierarchical', diff --git a/src/content/dependencies/generateNewsEntryReadAnotherLinks.js b/src/content/dependencies/generateNewsEntryReadAnotherLinks.js new file mode 100644 index 00000000..c97d8150 --- /dev/null +++ b/src/content/dependencies/generateNewsEntryReadAnotherLinks.js @@ -0,0 +1,94 @@ +export default { + contentDependencies: [ + 'generateAbsoluteDatetimestamp', + 'generateRelativeDatetimestamp', + 'linkNewsEntry', + ], + + extraDependencies: ['html', 'language'], + + relations(relation, currentEntry, previousEntry, nextEntry) { + const relations = {}; + + if (previousEntry) { + relations.previousEntryLink = + relation('linkNewsEntry', previousEntry); + + if (previousEntry.date) { + relations.previousEntryDatetimestamp = + (currentEntry.date + ? relation('generateRelativeDatetimestamp', + previousEntry.date, + currentEntry.date) + : relation('generateAbsoluteDatetimestamp', + previousEntry.date)); + } + } + + if (nextEntry) { + relations.nextEntryLink = + relation('linkNewsEntry', nextEntry); + + if (nextEntry.date) { + relations.nextEntryDatetimestamp = + (currentEntry.date + ? relation('generateRelativeDatetimestamp', + nextEntry.date, + currentEntry.date) + : relation('generateAbsoluteDatetimestamp', + nextEntry.date)); + } + } + + return relations; + }, + + generate(relations, {html, language}) { + const prefix = `newsEntryPage.readAnother`; + + const entryLines = []; + + if (relations.previousEntryLink) { + const parts = [prefix, `previous`]; + const options = {}; + + options.entry = relations.previousEntryLink; + + if (relations.previousEntryDatetimestamp) { + parts.push('withDate'); + options.date = + relations.previousEntryDatetimestamp.slots({ + style: 'full', + tooltip: true, + }); + } + + entryLines.push(language.$(...parts, options)); + } + + if (relations.nextEntryLink) { + const parts = [prefix, `next`]; + const options = {}; + + options.entry = relations.nextEntryLink; + + if (relations.nextEntryDatetimestamp) { + parts.push('withDate'); + options.date = + relations.nextEntryDatetimestamp.slots({ + style: 'full', + tooltip: true, + }); + } + + entryLines.push(language.$(...parts, options)); + } + + return ( + html.tag('p', { + [html.onlyIfContent]: true, + [html.joinChildren]: html.tag('br'), + class: ['read-another-links', 'offset-tooltips'], + }, entryLines)); + }, +}; diff --git a/src/static/site6.css b/src/static/site6.css index 3534e50d..56a0533c 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -514,7 +514,8 @@ a:not([href]):hover { left: -10px; } -li:not(:first-child:last-child) .datetimestamp-tooltip { +li:not(:first-child:last-child) > .datetimestamp-tooltip, +.offset-tooltips :not(:first-child:last-child) > .datetimestamp-tooltip { left: 14px; } @@ -937,6 +938,7 @@ html[data-url-key="localized.listing"][data-url-value0="random"] #content a:not( html[data-url-key="localized.newsEntry"] .read-another-links { font-style: oblique; + font-size: 0.9em; } /* Additional names (heading and box) */ diff --git a/src/strings-default.yaml b/src/strings-default.yaml index c812b330..d13ce89d 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -1727,10 +1727,13 @@ newsEntryPage: published: "(Published {DATE}.)" readAnother: - previous: "(← {DATE} {ENTRY})" - next: "(→ {DATE} {ENTRY})" - earlier: "{TIME} earlier" - later: "{TIME} later" + previous: + _: "(← {ENTRY})" + withDate: "(← {DATE} {ENTRY})" + + next: + _: "(→ {ENTRY})" + withDate: "(→ {DATE} {ENTRY})" # # redirectPage: -- cgit 1.3.0-6-gf8a5