Add next and previous article links to article detail view

WakuwakuP · Nov 6, 2024 · 78a9428 · 78a9428
1 parent 6460590
commit 78a9428
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 16 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}
diff --git a/src/app/content/detail/[id]/page.tsx b/src/app/content/detail/[id]/page.tsx
@@ -29,7 +29,55 @@ const cachedGetContentDetail = (id: string) =>
     async () => {
       return await getContentDetail(id)
     },
-    [`content-detail-${id}`],
+    ['content-detail', id],
+    {
+      tags: [`content-detail-${id}`],
+    },
+  )
+
+const getNextContent = async (publishedAt: string) => {
+  return await client
+    .get({
+      endpoint: 'contents',
+      queries: {
+        filters: `publishedAt[less_than]${publishedAt}`,
+        orders: '-publishedAt',
+        limit: 1,
+      },
+    })
+    .catch(() => undefined)
+}
+
+const cachedGetNextContent = (publishedAt: string, id: string) =>
+  unstable_cache(
+    async () => {
+      return await getNextContent(publishedAt)
+    },
+    ['content-detail-next', id],
+    {
+      tags: [`content-detail-${id}`],
+    },
+  )
+
+const getPrevContent = async (publishedAt: string) => {
+  return await client
+    .get({
+      endpoint: 'contents',
+      queries: {
+        filters: `publishedAt[greater_than]${publishedAt}`,
+        orders: 'publishedAt',
+        limit: 1,
+      },
+    })
+    .catch(() => undefined)
+}
+
+const cachedGetPreviousContent = (publishedAt: string, id: string) =>
+  unstable_cache(
+    async () => {
+      return await getPrevContent(publishedAt)
+    },
+    ['content-detail-prev', id],
     {
       tags: [`content-detail-${id}`],
     },
@@ -75,6 +123,11 @@ export default async function ContentDetailPage({ params }: { params: Params })
     notFound()
   }
 
+  const getNextContent = cachedGetNextContent(content.publishedAt, id)
+  const getPreviousContent = cachedGetPreviousContent(content.publishedAt, id)
+  const nextContent = (await getNextContent()).contents[0] ?? null
+  const previousContent = (await getPreviousContent()).contents[0] ?? null
+
   const body = content.content.reduce((acc: string, cur: { fieldId: string; html: string }) => acc + cur.html, '')
 
   const $ = cheerio.load(body)
@@ -116,6 +169,8 @@ export default async function ContentDetailPage({ params }: { params: Params })
         }),
       }}
       toc={createTableOfContents(body, tocOption)}
+      nextContent={nextContent ?? null}
+      previousContent={previousContent ?? null}
     />
   )
 }
diff --git a/src/components/templates/ContentDetail/ContentDetail.tsx b/src/components/templates/ContentDetail/ContentDetail.tsx
@@ -20,10 +20,12 @@ export interface ContentDetailProps {
     text: string
     name: string
   }[]
+  nextContent?: ContentModify | null
+  previousContent?: ContentModify | null
 }
 
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-export const ContentDetail = ({ content, toc }: ContentDetailProps) => {
+export const ContentDetail = ({ content, toc, nextContent, previousContent }: ContentDetailProps) => {
   const ref = useRef<HTMLDivElement>(null)
   const elemMainarea = useRef<HTMLDivElement>(null)
   const elemToc = useRef<HTMLDivElement>(null)
@@ -61,13 +63,33 @@ export const ContentDetail = ({ content, toc }: ContentDetailProps) => {
         ))}
       </ul>
       <div className={styles.mainarea} ref={elemMainarea}>
-        <div
-          className={styles.content}
-          dangerouslySetInnerHTML={{
-            __html: `${content.content}`,
-          }}
-          ref={ref}
-        />
+        <div className={styles.content}>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: `${content.content}`,
+            }}
+            ref={ref}
+          />
+          <div className={styles.contentsLink}>
+            {previousContent ? (
+              <Link href={`/content/detail/${previousContent.id}`} style={{ width: '50%' }}>
+                <div>Previous</div>
+                <div>{previousContent.title}</div>
+              </Link>
+            ) : (
+              <div style={{ width: '50%' }} />
+            )}
+            {nextContent ? (
+              <Link href={`/content/detail/${nextContent.id}`} style={{ width: '50%' }}>
+                <div>Next</div>
+                <div>{nextContent.title}</div>
+              </Link>
+            ) : (
+              <div style={{ width: '50%' }} />
+            )}
+          </div>
+        </div>
+
         <div className={styles.toc} ref={elemToc}>
           <div className={styles.tocWrapper} ref={elemTocWrapper}>
             <div className={styles.tocArea} ref={elemTocArea}>

diff --git a/src/styles/components/containers/ContentCard.module.css b/src/styles/components/containers/ContentCard.module.css
@@ -1,5 +1,5 @@
 .card {
-  width: clamp(50%,calc((640px - 100%) * 640),100%);
+  width: clamp(50%, calc((640px - 100%) * 640), 100%);
   height: auto;
   margin-bottom: 6px;
 }
@@ -37,4 +37,3 @@
   object-fit: cover;
   aspect-ratio: 16 / 9;
 }
-
diff --git a/src/styles/components/templates/ContentDetail.module.css b/src/styles/components/templates/ContentDetail.module.css
@@ -5,15 +5,14 @@
   --toc-wrap-width: 800;
 }
 
-
-
 .content {
   padding: 0 0.5rem;
-  width: clamp(calc(100% - var(--toc-width)), calc((800px - 100%) * 800),100%);
+  width: clamp(calc(100% - var(--toc-width)), calc((800px - 100%) * 800), 100%);
+  overflow-wrap: break-word;
 }
 
 .toc {
-  width: clamp(var(--toc-width), calc((800px - 100%) * 800),100%);
+  width: clamp(var(--toc-width), calc((800px - 100%) * 800), 100%);
 }
 
 .tocWrapper {
@@ -26,7 +25,7 @@
 }
 
 .content img {
-  width:100%;
+  width: 100%;
   height: auto;
 }
 
@@ -58,3 +57,10 @@
   border: solid 1px var(--table-border-color);
 }
 
+.contentsLink {
+  display: flex;
+  gap: 20px;
+  margin: 2rem 0;
+  padding: 1rem 1rem;
+  border-top: solid 1px white;
+}