content, css: generateNewsEntryPageReadAnotherLinks, datetimestamps

2 files changed, 102 insertions, 44 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));
+  },
+};