build: unpin and upgrade packages

package.json

@@ -196,7 +196,7 @@
     "http-errors": "^2.0.0",
     "logrocket": "^1.0.14",
     "lqip-modern": "^2.0.0",
-    "next": "12.1.5",
+    "next": "^12.3.4",
     "next-redux-cookie-wrapper": "^2.0.1",
     "next-redux-wrapper": "^7.0.2",
     "node-fetch": "^3.2.0",

src/components/breadcrumb.tsx

@@ -28,7 +28,7 @@ const Breadcrumb = ({ title, enableToc = false }) => {
         }
       )}
     >
-      <div className="relative my-0 mx-auto box-border flex max-w-1100 flex-row flex-nowrap overflow-hidden bg-gray-200 py-2 px-5">
+      <div className="relative mx-auto my-0 box-border flex max-w-1100 flex-row flex-nowrap overflow-hidden bg-gray-200 px-5 py-2">
         {/* hamburger lines */}
         <div
           className={classnames('relative mr-3 h-8 w-5', {

src/components/footer.tsx

@@ -65,7 +65,7 @@ const Footer = () => {
         className="relative shrink bg-lavender-purple-900 py-8 text-base font-normal leading-6 text-current antialiased lg:shrink-0"
         id="footer"
       >
-        <section className="mx-auto mt-0 mb-5 flex justify-center">
+        <section className="mx-auto mb-5 mt-0 flex justify-center">
           {communityFeatures.siteFooterIcon.map(({ name: brand, enable }) => {
             if (!enable) return
             let link

src/components/header.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import classnames from 'classnames'
 import ExtLink from './ext-link'
 import { meta, navigation as navItems, searchSettings } from '../../site.config'
@@ -26,7 +27,8 @@ const themeClassMap = {
 }
 
 const Header = () => {
-  const currentTheme = isActivePage('/') ? 'modern' : 'classic'
+  const router = useRouter()
+  const currentTheme = isActivePage('/', router) ? 'modern' : 'classic'
   const linkClass =
     'box-border items-center border-0 border-white text-base m-0 p-2.5 justify-center flex flex-row flex-nowrap h-12 z-1000 transition duration-300 lg:h-8 font-normal lg:py-1.5 lg:px-2.5'
   const liniInActiveClass = themeClassMap[currentTheme]?.linkInActive || ''
@@ -35,12 +37,12 @@ const Header = () => {
   return (
     <div
       className={classnames(
-        'fixed z-9999 min-h-12 w-full py-2 px-0 lg:shrink-0',
+        'fixed z-9999 min-h-12 w-full px-0 py-2 lg:shrink-0',
         themeClassMap[currentTheme]?.header
       )}
       style={{ transform: 'translateZ(0)' }}
     >
-      <div className="my-0 mx-auto max-w-1400 py-0 px-5">
+      <div className="mx-auto my-0 max-w-1400 px-5 py-0">
         <header className="relative flex flex-row flex-nowrap text-left">
           <Link href="/">
             <a className="z-1000 flex h-9 flex-row flex-nowrap items-center border-0 border-white">
@@ -58,7 +60,7 @@ const Header = () => {
             </a>
           </Link>
           <div className="flex lg:relative lg:ml-auto lg:flex lg:h-9">
-            <nav className="fixed left-0 right-0 top-0 bottom-auto box-border lg:relative lg:right-auto lg:top-auto lg:h-auto lg:w-auto lg:bg-none">
+            <nav className="fixed bottom-auto left-0 right-0 top-0 box-border lg:relative lg:right-auto lg:top-auto lg:h-auto lg:w-auto lg:bg-none">
               <ul
                 className={classnames(
                   'mt-13 box-border flex w-full list-none flex-nowrap p-0 lg:m-0 lg:flex lg:w-auto lg:flex-row lg:flex-nowrap lg:bg-none lg:p-0',
@@ -69,7 +71,7 @@ const Header = () => {
                   if (!enabled) {
                     return null
                   }
-                  const isActive = isActivePage(page)
+                  const isActive = isActivePage(page, router)
                   return (
                     <li
                       key={label}

src/components/nav-menu.tsx

@@ -21,7 +21,7 @@ const NavigationMenu = ({ title, menuItems }) => {
         {
           block: isNavMenuViewable,
           hidden: !isNavMenuViewable,
-          'fixed left-0 right-0 top-0 z-970 m-0 h-full w-full bg-white px-5 pt-40 pb-5':
+          'fixed left-0 right-0 top-0 z-970 m-0 h-full w-full bg-white px-5 pb-5 pt-40':
             isMobile,
         }
       )}

src/components/toc.tsx

@@ -22,11 +22,11 @@ const TableOfContent = ({ toc }) => {
   return (
     <section
       className={classnames(
-        'overflow-y-scroll lg:ml-12 lg:mb-10 lg:mt-12 lg:mr-0 lg:h-full lg:max-h-full-viewport lg:w-60 lg:shrink-0 lg:grow-0 lg:border-l lg:border-solid lg:px-4',
+        'overflow-y-scroll lg:mb-10 lg:ml-12 lg:mr-0 lg:mt-12 lg:h-full lg:max-h-full-viewport lg:w-60 lg:shrink-0 lg:grow-0 lg:border-l lg:border-solid lg:px-4',
         {
           block: isTableOfContentViewable,
           hidden: !isTableOfContentViewable,
-          'fixed left-0 right-0 top-0 z-970 m-0 h-full w-full bg-white px-5 pt-40 pb-5':
+          'fixed left-0 right-0 top-0 z-970 m-0 h-full w-full bg-white px-5 pb-5 pt-40':
             isMobile,
         }
       )}

src/libs/client/hooks.ts

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react'
 import prism from 'prismjs'
+import get from 'lodash/get'
 import throttle from 'lodash/throttle'
 import debounce from 'lodash/debounce'
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import { useRouter } from 'next/router'
 import LogRocket from 'logrocket'
 import { AppState, AppDispatch } from './store'
 import {
@@ -11,7 +13,14 @@
   updateTableOfContentViewability,
   updateViewport,
 } from './slices/layout'
-import { currentEnv, trackingSettings } from '../../../site.config'
+import {
+  currentEnv,
+  trackingSettings,
+  notion,
+  meta as commonMeta,
+  pages as staticPages,
+} from '../../../site.config'
+import { PageMeta } from '../../../types'
 
 /**
  * Pre-typed useSelector & useAppDispatch for react-redux.
@@ -192,3 +201,51 @@
     prism.highlightAll()
   })
 }
+
+/**
+ * Custom hook to detect current next.js page is active or not
+ * @param {string} page next.js page pathname
+ * @returns {boolean} current next.js page is active or not
+ */
+export const useCheckActivePage = (page) => {
+  const { asPath } = useRouter()
+  if (!page) {
+    return false
+  }
+  const pathname = asPath.replace(/\?.*/gi, '') // remove query params
+  const regex = new RegExp(`${page}(\/.+)+`, 'i')
+  return page === pathname || regex.test(pathname)
+}
+
+/**
+ * Custom hook to get title of current page from navigation config
+ * @returns {string} title of current page
+ */
+export const useGetPageMeta = (pageMeta: PageMeta = {}): PageMeta => {
+  const { asPath } = useRouter()
+  const meta = {
+    title: commonMeta.title,
+    description: commonMeta.description,
+    image: commonMeta.image,
+  }
+
+  // pageMeta is for SSR pages override
+  // add fallback logic for static pages & SSR pages without meta override
+  const pathname = asPath.replace(/\?.*/gi, '') // remove query params
+  const page =
+    pathname === '/' ? 'index' : pathname.split('/').filter(Boolean)[0]
+  const pageTitle =
+    pageMeta.title ||
+    get(staticPages, [page, 'title']) ||
+    get(notion, ['pages', page, 'navMenuTitle'])
+  if (pageTitle) {
+    meta.title = `${pageTitle} · ${commonMeta.title}`
+  }
+  if (pageMeta.description) {
+    meta.description = pageMeta.description
+  }
+  if (pageMeta.image) {
+    meta.image = pageMeta.image
+  }
+  return meta
+}

src/libs/util.ts

@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router'
 import get from 'lodash/get'
 import {
   notion,
@@ -26,11 +25,11 @@ export const getDateStr = (date) => {
  * @param {string} page next.js page pathname
  * @returns {boolean} current next.js page is active or not
  */
-export const isActivePage = (page) => {
-  const { asPath } = useRouter()
-  if (!page) {
+export const isActivePage = (page, router) => {
+  if (!page || !router) {
     return false
   }
+  const { asPath } = router || {}
   const pathname = asPath.replace(/\?.*/gi, '') // remove query params
   const regex = new RegExp(`${page}(\/.+)+`, 'i')
   return page === pathname || regex.test(pathname)
@@ -40,8 +39,11 @@ export const isActivePage = (page) => {
  * get title of current page from navigation config
  * @returns {string} title of current page
  */
-export const getPageMeta = (pageMeta: PageMeta = {}): PageMeta => {
-  const { asPath } = useRouter()
+export const getPageMeta = (pageMeta: PageMeta = {}, router): PageMeta => {
+  if (!router) {
+    return {}
+  }
+  const { asPath } = router || {}
   const meta = {
     title: commonMeta.title,
     description: commonMeta.description,

src/pages/[pageName]/[pageSlug].tsx

@@ -224,7 +224,7 @@ const ArticleSinglePage = ({
     <div
       id="notion-single-page"
       data-namespace={pageName}
-      className="my-0 mx-auto flex max-w-1400 flex-grow flex-row flex-nowrap justify-center py-0 px-5 pt-24 lg:pt-12"
+      className="mx-auto my-0 flex max-w-1400 flex-grow flex-row flex-nowrap justify-center px-5 py-0 pt-24 lg:pt-12"
     >
       <Breadcrumb
         title={get(notion, ['pages', pageName, 'navMenuTitle'])}

src/pages/[pageName]/index.tsx

@@ -194,7 +194,7 @@ const ArticleListPage = ({ hasError, menuItems, pageName }) => {
     <div
       id="notion-list-page"
       data-namespace={pageName}
-      className="my-0 mx-auto flex max-w-1100 flex-grow flex-row flex-nowrap py-0 px-5 pt-24 lg:pt-12"
+      className="mx-auto my-0 flex max-w-1100 flex-grow flex-row flex-nowrap px-5 py-0 pt-24 lg:pt-12"
     >
       <Breadcrumb title={get(notion, ['pages', pageName, 'navMenuTitle'])} />
       <NavMenu

src/pages/_app.tsx

@@ -15,7 +15,7 @@ import {
 } from '../libs/client/hooks'
 import wrapper from '../libs/client/store'
 import { getPageMeta } from '../libs/util'
-import Router from 'next/router'
+import Router, { useRouter } from 'next/router'
 import Head from 'next/head'
 import NProgress from 'nprogress'
 
@@ -29,7 +29,8 @@ const App = ({ Component, pageProps }) => {
   useInitLogRocket()
   useResizeHandler()
   useCodeSyntaxHighlight()
-  const { title, description, image } = getPageMeta(pageProps.meta)
+  const router = useRouter()
+  const { title, description, image } = getPageMeta(pageProps.meta, router)
   return (
     <div id="app">
       <Head>

src/pages/_document.tsx

@@ -80,7 +80,7 @@ class MyDocument extends Document {
           <link
             rel="preconnect"
             href={`https://${searchSettings?.appId}-dsn.algolia.net`}
-            crossOrigin="true"
+            crossOrigin="anonymous"
           />
         </Head>
         <body>

src/pages/about.tsx

@@ -145,7 +145,7 @@ const AboutPage = ({ hasError, pageName }) => {
     <div
       id="notion-about-page"
       data-namespace={pageName}
-      className="my-0 mx-auto flex max-w-1100 flex-grow flex-row flex-nowrap py-0 px-5 pt-24 lg:pt-12"
+      className="mx-auto my-0 flex max-w-1100 flex-grow flex-row flex-nowrap px-5 py-0 pt-24 lg:pt-12"
     >
       <NotionRenderer
         blockId={blockId}

src/pages/index.tsx

@@ -3,12 +3,12 @@ import { meta } from '../../site.config'
 const Homepage = () => (
   <div className="homeContainer text-center">
     <div className="homeSplashFade flex min-h-screen items-center justify-center bg-cover-music bg-cover bg-50% pt-24 lg:pt-12">
-      <div className="wrapper homeWrapper m-0 w-full bg-black/20 py-14 px-0">
+      <div className="wrapper homeWrapper m-0 w-full bg-black/20 px-0 py-14">
         <h2 className="projectTitle mx-auto mb-2 inline-block bg-texture-colorful bg-contain bg-clip-text font-serif text-5.5xl font-semibold text-transparent md:text-8xl">
           {meta.title}
         </h2>
         <div className="mx-auto my-0 h-1 w-2/5 bg-gradient-yellow-purple"></div>
-        <small className="mx-0 mt-3 mb-5 block font-serif text-xl font-normal text-white md:text-2xl">
+        <small className="mx-0 mb-5 mt-3 block font-serif text-xl font-normal text-white md:text-2xl">
           {meta.description}
         </small>
       </div>

src/pages/maintain.tsx

@@ -3,10 +3,10 @@ import ExtLink from '../components/ext-link'
 const MaintainPage = () => (
   <div className="homeContainer text-center">
     <div className="homeSplashFade flex min-h-screen items-center justify-center bg-opacity-50 bg-cover-maintain bg-cover bg-50% pt-24 lg:pt-12">
-      <div className="wrapper homeWrapper my-0 mx-auto max-w-1100 py-8 px-8">
+      <div className="wrapper homeWrapper mx-auto my-0 max-w-1100 px-8 py-8">
         <div>
-          <div className="feature-topic paddingBottom paddingTop container my-0 mx-auto rounded-xl bg-white/75 pb-10 pt-10 md:pb-20 md:pt-20">
-            <div className="wrapper my-0 mx-auto max-w-900 py-0 px-5 font-semibold text-gray-600">
+          <div className="feature-topic paddingBottom paddingTop container mx-auto my-0 rounded-xl bg-white/75 pb-10 pt-10 md:pb-20 md:pt-20">
+            <div className="wrapper mx-auto my-0 max-w-900 px-5 py-0 font-semibold text-gray-600">
               <div className="flex p-0">
                 目前本頁面正在進行維修作業中，非常抱歉造成您的不便！
                 <br />
@@ -15,17 +15,17 @@ const MaintainPage = () => (
               </div>
             </div>
           </div>
-          <p className="unsplash-hint my-4 mx-0 text-center text-sm text-gray-300">
+          <p className="unsplash-hint mx-0 my-4 text-center text-sm text-gray-300">
             Photo by
             <ExtLink
-              className="my-0 mx-1 inline-block font-bold text-amber-300"
+              className="mx-1 my-0 inline-block font-bold text-amber-300"
               href="https://unsplash.com/@cookiethepom?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
             >
               Cookie the Pom
             </ExtLink>
             on
             <ExtLink
-              className="my-0 mx-1 inline-block font-bold text-amber-300"
+              className="mx-1 my-0 inline-block font-bold text-amber-300"
               href="https://unsplash.com/"
             >
               Unsplash

src/styles/notion.css

@@ -17,7 +17,7 @@
  * for global notion style override: #app ...
  */
 #app .notion-page {
-  @apply my-0 mb-0 mt-14 px-0 pt-0 pb-5 lg:mt-12 lg:pb-10;
+  @apply my-0 mb-0 mt-14 px-0 pb-5 pt-0 lg:mt-12 lg:pb-10;
 }
 
 #app .notion-viewport {
@@ -159,7 +159,7 @@
  * for about page: #app #notion-about-page ...
  */
 #app #notion-about-page .notion-page {
-  @apply m-0 px-0 pt-6 pb-5 lg:pt-12 lg:pb-10;
+  @apply m-0 px-0 pb-5 pt-6 lg:pb-10 lg:pt-12;
 }
 
 #app #notion-about-page .notion-page h2:first-of-type {