fix

WakuwakuP · Apr 1, 2024 · dc1a0d1 · dc1a0d1
1 parent b860205
commit dc1a0d1
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 70 deletions.
diff --git a/src/app/content/detail/[id]/page.tsx b/src/app/content/detail/[id]/page.tsx
@@ -1,3 +1,5 @@
+import { notFound } from 'next/navigation'
+
 import * as cheerio from 'cheerio'
 import hljs from 'highlight.js'
 import { createTableOfContents, processer } from 'microcms-richedit-processer'
@@ -21,11 +23,8 @@ export async function generateMetadata({ params: { id } }: { params: { id: strin
     })
     .catch(() => undefined)
 
-  if (!content) {
-    return {
-      notFound: true,
-      revalidate: 60,
-    }
+  if (content === undefined) {
+    return {}
   }
 
   return {
@@ -54,10 +53,7 @@ export default async function ContentDetailPage({ params: { id } }: { params: {
     .catch(() => undefined)
 
   if (!content) {
-    return {
-      notFound: true,
-      revalidate: 60,
-    }
+    notFound()
   }
 
   const body = content.content.reduce((acc: string, cur: { fieldId: string; html: string }) => acc + cur.html, '')

diff --git a/src/app/content/latest/[page]/page.tsx b/src/app/content/latest/[page]/page.tsx
@@ -31,5 +31,5 @@ export default async function ContentLatestPage({ params: { page } }: { params:
   const totalCount = data.totalCount
   const totalPage = Math.ceil(totalCount / PAGE_LIMIT)
 
-  return <ContentLatest contents={contents} totalPage={totalPage} />
+  return <ContentLatest contents={contents} page={Number(page)} totalPage={totalPage} />
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,8 +3,9 @@ import type { Metadata } from 'next'
 import { M_PLUS_1p } from 'next/font/google'
 import type { ReactNode } from 'react'
 
-import { Footer, Header, SiteTop } from 'components/containers'
+import { Footer, Header } from 'components/containers'
 import { GoogleAnalytics } from 'libs/gtag'
+import SurfaceDuoProvider from 'providers/SurfaceDuoProvider'
 
 const BASE_URL = process.env.BASE_URL
 const SITE_TITLE = process.env.SITE_TITLE
@@ -20,7 +21,7 @@ const globalFont = M_PLUS_1p({
 })
 
 export const metadata: Metadata = {
-  title: { default: 'Home', template: `%s | ${SITE_NAME}` },
+  title: { default: `Home | ${SITE_NAME}`, template: `%s | ${SITE_NAME}` },
   description: SITE_DESCRIPTION,
   openGraph: {
     type: 'website',
@@ -35,6 +36,7 @@ export const metadata: Metadata = {
     site: TWITTER_SITE,
     card: 'summary_large_image',
   },
+  viewport: 'width=device-width, initial-scale=1.0',
 }
 
 export default function RootLayout({ children }: { children: ReactNode }) {
@@ -52,14 +54,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <GoogleAnalytics />
       </head>
       <body className={globalFont.className}>
-        <div className='surface-duo-left'>
-          <Header />
-          <main className='container'>{children}</main>
-          <Footer />
-        </div>
-        <div className='surface-duo-right'>
-          <SiteTop />
-        </div>
+        <SurfaceDuoProvider header={<Header />} footer={<Footer />}>
+          {children}
+        </SurfaceDuoProvider>
       </body>
     </html>
   )

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,5 +1,9 @@
 import styles from 'styles/pages/404.module.css'
 
+export const metadata = {
+  title: '404 Not Found',
+}
+
 export default function NotFound() {
   return (
     <div className={styles.box}>

diff --git a/src/components/containers/Pagination/Pagination.tsx b/src/components/containers/Pagination/Pagination.tsx
@@ -19,58 +19,64 @@ export const Pagination = ({ totalPage, page }: PaginationProps) => {
     return (
       <div>
         <ul className={styles.pagination}>
-          {2 <= currentPage && (
-            <li>
-              <Link href={`${path}/1`} passHref>
-                <div className={styles.btn}>
-                  <span>1</span>
+          <>
+            {2 <= currentPage && (
+              <li>
+                <Link href={`${path}/1`}>
+                  <div className={styles.btn}>
+                    <span>1</span>
+                  </div>
+                </Link>
+              </li>
+            )}
+            {3 <= currentPage && (
+              <li>
+                <div className={styles.dots}>
+                  <span>…</span>
                 </div>
-              </Link>
-            </li>
-          )}
-          {3 <= currentPage && (
-            <li>
-              <div className={styles.dots}>
-                <span>…</span>
-              </div>
-            </li>
-          )}
-          {range(1, Math.ceil(totalPage)).map((number, index) => {
-            if (currentPage - 1 <= index && index <= currentPage + 1) {
-              return (
-                <li key={index}>
-                  {index === currentPage ? (
-                    <div className={styles.current}>
-                      <span>{number}</span>
-                    </div>
-                  ) : (
-                    <Link href={`${path}/${number}`} passHref>
-                      <div className={styles.btn}>
+              </li>
+            )}
+          </>
+          <>
+            {range(1, Math.ceil(totalPage)).map((number, index) => {
+              if (currentPage - 1 <= index && index <= currentPage + 1) {
+                return (
+                  <li key={index}>
+                    {index === currentPage ? (
+                      <div className={styles.current}>
                         <span>{number}</span>
                       </div>
-                    </Link>
-                  )}
-                </li>
-              )
-            }
-            return <></>
-          })}
-          {totalPage - 4 >= currentPage && (
-            <li>
-              <div className={styles.dots}>
-                <span>…</span>
-              </div>
-            </li>
-          )}
-          {totalPage - 3 >= currentPage && (
-            <li>
-              <Link href={`${path}//${totalPage}`} passHref>
-                <div className={styles.btn}>
-                  <span>{totalPage}</span>
+                    ) : (
+                      <Link href={`${path}/${number}`}>
+                        <div className={styles.btn}>
+                          <span>{number}</span>
+                        </div>
+                      </Link>
+                    )}
+                  </li>
+                )
+              }
+              return <></>
+            })}
+          </>
+          <>
+            {totalPage - 4 >= currentPage && (
+              <li>
+                <div className={styles.dots}>
+                  <span>…</span>
                 </div>
-              </Link>
-            </li>
-          )}
+              </li>
+            )}
+            {totalPage - 3 >= currentPage && (
+              <li>
+                <Link href={`${path}//${totalPage}`}>
+                  <div className={styles.btn}>
+                    <span>{totalPage}</span>
+                  </div>
+                </Link>
+              </li>
+            )}
+          </>
         </ul>
       </div>
     )

diff --git a/src/components/templates/ContentDetail/ContentDetail.tsx b/src/components/templates/ContentDetail/ContentDetail.tsx
@@ -73,7 +73,7 @@ export const ContentDetail = ({ content, toc }: ContentDetailProps) => {
           <div className={styles.tocWrapper} ref={elemTocWrapper}>
             <div className={styles.tocArea} ref={elemTocArea}>
               {toc && toc.length > 0 && <Toc toc={toc} />}
-              {process.env.NODE_ENV !== 'development' && <AdSense adSlot='3817713745' />}
+              {process.env.NODE_ENV == 'development' && <AdSense adSlot='3817713745' />}
             </div>
           </div>
         </div>

diff --git a/src/hooks/useMutationObserver.ts b/src/hooks/useMutationObserver.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import type { RefObject } from 'react'
 import { useEffect } from 'react'
 

diff --git a/src/providers/SurfaceDuoProvider.tsx b/src/providers/SurfaceDuoProvider.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { useRef, type ReactNode } from 'react'
+
+import { SiteTop } from 'components/containers'
+import { useMutationObserver } from 'hooks/useMutationObserver'
+
+import type { MutationCallback } from 'hooks/useMutationObserver'
+
+export default function SurfaceDuoProvider({
+  children,
+  header,
+  footer,
+}: {
+  children: ReactNode
+  header: ReactNode
+  footer: ReactNode
+}) {
+  const elemSurfaceDuoLeft = useRef<HTMLDivElement>(null)
+  const elemContainer = useRef<HTMLDivElement>(null)
+
+  const handleUnsetStyling: MutationCallback = (mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.target instanceof HTMLElement) {
+        mutation.target.setAttribute('style', '')
+      }
+    })
+  }
+
+  useMutationObserver([elemSurfaceDuoLeft, elemContainer], handleUnsetStyling, {
+    attributes: true,
+    attributeFilter: ['style'],
+  })
+
+  return (
+    <>
+      <div className='surface-duo-left' ref={elemSurfaceDuoLeft}>
+        <div>
+          {header}
+          <main className='container'>{children}</main>
+          {footer}
+        </div>
+      </div>
+      <div className='surface-duo-right'>
+        <SiteTop />
+      </div>
+    </>
+  )
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -103,7 +103,7 @@ a.btn:hover {
   }
 }
 @media (horizontal-viewport-segments: 2) {
-  body > div {
+  body {
     height: 100vh;
     display: flex;
   }
@@ -112,6 +112,11 @@ a.btn:hover {
     margin-inline-end: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
     overflow-y: scroll;
   }
+
+  .surface-duo-left main {
+    margin-top: 4rem;
+  }
+
   .surface-duo-right {
     position: relative;
     display: block;