Merge pull request #15 from pradyunsg/component/related-pages

Add component: related-pages

docs/usage/components/index.md

@@ -9,4 +9,5 @@ breadcrumbs
 edit-this-page
 ethical-ads
 logo
+related-pages
 ```

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.

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>