content, css: generateNewsEntryPageReadAnotherLinks, datetimestamps

4 files changed, 112 insertions, 49 deletions

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: