4 files changed, 83 insertions, 15 deletions
diff --git a/src/content/dependencies/generateNextLink.js b/src/content/dependencies/generateNextLink.js
new file mode 100644
index 00000000..2e48cd2b
--- /dev/null
+++ b/src/content/dependencies/generateNextLink.js
@@ -0,0 +1,13 @@
+export default {
+  contentDependencies: ['generatePreviousNextLink'],
+
+  relations: (relation) => ({
+    link:
+      relation('generatePreviousNextLink'),
+  }),
+
+  generate: (relations) =>
+    relations.link.slots({
+      direction: 'next',
+    }),
+};
diff --git a/src/content/dependencies/generatePreviousLink.js b/src/content/dependencies/generatePreviousLink.js
new file mode 100644
index 00000000..775367f9
--- /dev/null
+++ b/src/content/dependencies/generatePreviousLink.js
@@ -0,0 +1,13 @@
+export default {
+  contentDependencies: ['generatePreviousNextLink'],
+
+  relations: (relation) => ({
+    link:
+      relation('generatePreviousNextLink'),
+  }),
+
+  generate: (relations) =>
+    relations.link.slots({
+      direction: 'previous',
+    }),
+};
diff --git a/src/content/dependencies/generatePreviousNextLink.js b/src/content/dependencies/generatePreviousNextLink.js
new file mode 100644
index 00000000..9fe04aed
--- /dev/null
+++ b/src/content/dependencies/generatePreviousNextLink.js
@@ -0,0 +1,35 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  slots: {
+    link: {
+      type: 'html',
+      mutable: true,
+    },
+
+    direction: {
+      validate: v => v.is('previous', 'next'),
+    },
+
+    id: {
+      type: 'boolean',
+      default: true,
+    },
+  },
+
+  generate: (slots, {html, language}) =>
+    (html.isBlank(slots.link) || !slots.direction
+      ? html.blank()
+      : slots.link.slots({
+          tooltipStyle: 'browser',
+          color: false,
+
+          attributes:
+            (slots.id
+              ? {id: `${slots.direction}-button`}
+              : null),
+
+          content:
+            language.$('misc.nav', slots.direction),
+        })),
+};
diff --git a/src/content/dependencies/generatePreviousNextLinks.js b/src/content/dependencies/generatePreviousNextLinks.js
index 9771de39..d9f80849 100644
--- a/src/content/dependencies/generatePreviousNextLinks.js
+++ b/src/content/dependencies/generatePreviousNextLinks.js
@@ -3,8 +3,17 @@ export default {
   // for inclusion in a page's navigation bar. Include with other links
   // in the nav bar and then join them all as a unit list, for example.
 
+  contentDependencies: ['generateNextLink', 'generatePreviousLink'],
   extraDependencies: ['html', 'language'],
 
+  relations: (relation) => ({
+    previousLink:
+      relation('generatePreviousLink'),
+
+    nextLink:
+      relation('generateNextLink'),
+  }),
+
   slots: {
     previousLink: {
       type: 'html',
@@ -22,27 +31,25 @@ export default {
     },
   },
 
-  generate(slots, {html, language}) {
+  generate(relations, slots, {html, language}) {
     const previousNext = [];
 
+    relations.previousLink.setSlots({
+      link: slots.previousLink,
+      id: slots.id,
+    });
+
+    relations.nextLink.setSlots({
+      link: slots.nextLink,
+      id: slots.id,
+    });
+
     if (!html.isBlank(slots.previousLink)) {
-      previousNext.push(
-        slots.previousLink.slots({
-          tooltipStyle: 'browser',
-          color: false,
-          attributes: {id: slots.id && 'previous-button'},
-          content: language.$('misc.nav.previous'),
-        }));
+      previousNext.push(relations.previousLink);
     }
 
     if (!html.isBlank(slots.nextLink)) {
-      previousNext.push(
-        slots.nextLink.slots({
-          tooltipStyle: 'browser',
-          color: false,
-          attributes: {id: slots.id && 'next-button'},
-          content: language.$('misc.nav.next'),
-        }));
+      previousNext.push(relations.nextLink);
     }
 
     return previousNext;