pagination next prev on articles

chaskiq · Dec 7, 2022 · 97d092d · 97d092d
1 parent 8229555
commit 97d092d
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git a/client/queries.js b/client/queries.js
@@ -128,6 +128,16 @@ export const ARTICLE = `
         state
         updatedAt
         description
+        nextArticleUrl {
+          id
+          slug
+          title
+        }
+        prevArticleUrl {
+          id
+          slug
+          title
+        }
         collection{
           slug
           title

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "dev": "next dev -p 8080",
     "lint": "next lint",
     "build": "next build",
-    "start": "next start"
+    "start": "next start -p 8080"
   },
   "dependencies": {
     "@emotion/react": "^11.4.0",
@@ -33,4 +33,4 @@
     "eslint": "^7.28.0",
     "eslint-config-next": "^11.0.0"
   }
-}
+}
diff --git a/pages/[collection]/[article]/index.js b/pages/[collection]/[article]/index.js
@@ -6,6 +6,7 @@ import Layout from "../../../components/themes/base/Layout";
 import Moment from "react-moment";
 import DraftRenderer from "../../../components/themes/base/textEditor/draftRenderer";
 import theme from "../../../components/themes/base/textEditor/theme";
+import Link from 'next/link'
 
 import styled from "@emotion/styled";
 import { ThemeProvider } from "@emotion/react";
@@ -107,6 +108,48 @@ export default function Article({ article, lang, site }) {
                 </ThemeProvider>
               </div>
 
+              <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
+                {article.prevArticleUrl && (
+                  <div>
+                    <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
+                      Previous
+                    </dt>
+                    <dd className="mt-1">
+                      <a
+                        passHref
+                        className="text-md dark:text-gray-100 dark:hover:text-gray-400 text-gray-600 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out"
+                        href={article.prevArticleUrl.slug}
+                      >
+                        <span>
+                          <span aria-hidden="true">←</span>{' '}
+                          {article.prevArticleUrl.title}
+                        </span>
+                      </a>
+                    </dd>
+                  </div>
+                )}
+
+                {article.nextArticleUrl && (
+                  <div className="ml-auto text-right">
+                    <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
+                      Next
+                    </dt>
+                    <dd className="mt-1">
+                      <a
+                        passHref
+                        className="text-md dark:text-gray-100 dark:hover:text-gray-400 text-gray-600 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out"
+                        href={article.nextArticleUrl.slug}
+                      >
+                        <span>
+                          {article.nextArticleUrl.title}{' '}
+                          <span aria-hidden="true">→</span>
+                        </span>
+                      </a>
+                    </dd>
+                  </div>
+                )}
+              </dl>
+
               {/*<div dangerouslySetInnerHTML={
 								{__html: article.content.html_content}
 							}/>*/}