From ee229458b3f69735f4529dd5dd24268e33399c93 Mon Sep 17 00:00:00 2001
From: Pradyun Gedam <pradyunsg@users.noreply.github.com>
Date: Sun, 11 Apr 2021 14:24:22 +0100
Subject: [PATCH] Add component: related-pages

---
 docs/usage/components/index.md                |  1 +
 docs/usage/components/related-pages.md        | 36 +++++++++++++++++++
 .../basic-ng/components/related-pages.html    | 28 +++++++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 docs/usage/components/related-pages.md
 create mode 100644 src/sphinx_basic_ng/theme/basic-ng/components/related-pages.html

diff --git a/docs/usage/components/index.md b/docs/usage/components/index.md
index c84041f..62b9d16 100644
--- a/docs/usage/components/index.md
+++ b/docs/usage/components/index.md
@@ -9,4 +9,5 @@ breadcrumbs
 edit-this-page
 ethical-ads
 logo
+related-pages
 ```
diff --git a/docs/usage/components/related-pages.md b/docs/usage/components/related-pages.md
new file mode 100644
index 0000000..f7c76f5
--- /dev/null
+++ b/docs/usage/components/related-pages.md
@@ -0,0 +1,36 @@
+# Related pages
+
+Sphinx provides "next page" and "previous page" information, when
+rendering a page. This information is useful for documentation which
+has some sort of flow, as well as providing more navigational
+capabilities to the reader.
+
+## Usage
+
+```jinja
+{% include "components/related-pages.html" with context %}
+```
+
+This will add a single `div.related-pages`, which may be empty.
+
+The structure of this component is:
+
+- `div.related-pages`
+  - `a[href].next-page` (omitted if there's no next page)
+    - `div.page-info`
+      - `div.context`
+        - `span`
+          - "Next" with translation
+      - `div.title`
+        - Title of the page
+  - `a[href].prev-page` (omitted if there's no previous page)
+    - `div.page-info`
+      - `div.context`
+        - `span`
+          - "Previous" with translation
+      - `div.title`
+        - Title of the page
+
+## Configurability
+
+None.
diff --git a/src/sphinx_basic_ng/theme/basic-ng/components/related-pages.html b/src/sphinx_basic_ng/theme/basic-ng/components/related-pages.html
new file mode 100644
index 0000000..ceb396d
--- /dev/null
+++ b/src/sphinx_basic_ng/theme/basic-ng/components/related-pages.html
@@ -0,0 +1,28 @@
+<div class="related-pages">
+  {% if next -%}
+    <a class="next-page" href="{{ next.link }}">
+      <div class="page-info">
+        <div class="context">
+          <span>{{ _("Next") }}</span>
+        </div>
+        <div class="title">{{ next.title }}</div>
+      </div>
+      <svg><use href="#svg-arrow-right"></use></svg>
+    </a>
+  {%- endif %}
+  {% if prev -%}
+    <a class="prev-page" href="{{ prev.link }}">
+      <svg><use href="#svg-arrow-right"></use></svg>
+      <div class="page-info">
+        <div class="context">
+          <span>{{ _("Previous") }}</span>
+        </div>
+        {% if prev.link == pathto(master_doc) %}
+        <div class="title">{{ _("Home") }}</div>
+        {% else %}
+        <div class="title">{{ prev.title }}</div>
+        {% endif %}
+      </div>
+    </a>
+  {%- endif %}
+</div>