feature：剥离主题目录

2026-05-28 15:10:04 +00:00 · 2022-01-15 20:14:53 +08:00
parent 7aa1ba7e5b
commit a6903b1d52
82 changed files with 670 additions and 471 deletions
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,38 +1,11 @@
+import { Custom404Layout } from '@/themes'
+
 /**
 * 自定义404界面
 * @returns {JSX.Element}
 * @constructor
 */
-import { useEffect } from 'react'
-import BaseLayout from '@/layouts/BaseLayout'
-import BLOG from '@/blog.config'
-import { useRouter } from 'next/router'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'

 export default function Custom404 () {
-  const router = useRouter()
-  useEffect(() => {
-    // 延时3秒如果加载失败就返回首页
-    setTimeout(() => {
-      if (window) {
-        const article = document.getElementById('container')
-        if (!article) {
-          router.push('/')
-        }
-      }
-    }, 30000000)
-  })
-
-  return <BaseLayout meta={{ title: `${BLOG.title} | 页面找不到啦` }}>
-    <div
-      className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
-      <div className='dark:text-gray-200'>
-        <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><FontAwesomeIcon icon={faSpinner} spin={true} className='mr-2'/>404</h2>
-        <div className='inline-block text-left h-32 leading-10 items-center'>
-          <h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
-        </div>
-      </div>
-    </div>
-  </BaseLayout>
+  return <Custom404Layout />
 }
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import BLOG from '@/blog.config'
-import ThirdPartyScript from '@/components/ThirdPartyScript'
+import CommonScript from '@/components/CommonScript'

 class MyDocument extends Document {
  static async getInitialProps (ctx) {
@@ -15,7 +15,7 @@ class MyDocument extends Document {
        <Head>
          <link rel='icon' href='/favicon.ico' />
          <link rel='icon' href='/favicon.svg' type='image/svg+xml' />
-          <ThirdPartyScript />
+          <CommonScript />
        </Head>

        <body className={`${BLOG.font} bg-day dark:bg-night duration-200`}>
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,58 +1,40 @@
-import BLOG from '@/blog.config'
-import ArticleDetail from '@/components/ArticleDetail'
-import BaseLayout from '@/layouts/BaseLayout'
-import { useGlobal } from '@/lib/global'
-import {
-  getPostBlocks
-} from '@/lib/notion'
+import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import Custom404 from '@/pages/404'
-import 'prismjs'
-import 'prismjs/components/prism-bash'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-markup'
-import 'prismjs/components/prism-python'
-import 'prismjs/components/prism-typescript'
 import React from 'react'
+import { ArticleLayout } from '@/themes'

 /**
 * 关于页面，默认取notion中slug为about的文章
 * @param {*} param0
 * @returns
 */
-const About = ({ post, tags, prev, next, postCount, categories }) => {
-  if (!post) {
+const About = (props) => {
+  if (!props.post) {
    return <Custom404 />
  }
-  const { locale } = useGlobal()
-  post.title = locale.NAV.ABOUT
-  const meta = {
-    title: `${locale.NAV.ABOUT} | ${BLOG.title} `,
-    description: post.summary,
-    type: 'post',
-    tags: []
-  }
-
-  return (
-    <BaseLayout
-      meta={meta}
-      tags={tags}
-      post={post}
-      postCount={postCount}
-      categories={categories}
-    >
-      <ArticleDetail post={post} prev={prev} next={next} />
-    </BaseLayout>
-  )
+  return <ArticleLayout {...props} />
 }

 export async function getStaticProps () {
  const from = 'about-props'
-  const { allPosts, categories, tags, postCount, latestPosts } = await getGlobalNotionData({ from, includePage: true })
+  const {
+    allPosts,
+    categories,
+    tags,
+    postCount,
+    latestPosts
+  } = await getGlobalNotionData({
+    from,
+    includePage: true
+  })
  const post = allPosts.find(p => p.slug === 'about')

  if (!post) {
-    return { props: {}, revalidate: 1 }
+    return {
+      props: {},
+      revalidate: 1
+    }
  }

  post.blockMap = await getPostBlocks(post.id, 'slug')
@@ -62,7 +44,15 @@ export async function getStaticProps () {
  const next = allPosts.slice(index + 1, index + 2)[0] ?? allPosts[0]

  return {
-    props: { post, tags, prev, next, categories, postCount, latestPosts },
+    props: {
+      post,
+      tags,
+      prev,
+      next,
+      categories,
+      postCount,
+      latestPosts
+    },
    revalidate: 1
  }
 }
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -1,15 +1,10 @@
-import BLOG from '@/blog.config'
-import BlogPostArchive from '@/components/BlogPostArchive'
-import Live2D from '@/components/Live2D'
-import BaseLayout from '@/layouts/BaseLayout'
-import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import React, { useEffect } from 'react'
+import React from 'react'
+import { ArchiveLayout } from '@/themes'

 export async function getStaticProps () {
-  const from = 'index'
  const { allPosts, categories, tags, postCount } =
-    await getGlobalNotionData({ from })
+    await getGlobalNotionData({ from: 'archive-index' })

  return {
    props: {
@@ -22,63 +17,8 @@ export async function getStaticProps () {
  }
 }

-const Index = ({ posts, tags, categories, postCount }) => {
-  const { locale } = useGlobal()
-  // 深拷贝
-  const postsSortByDate = Object.create(posts)
-
-  // 时间排序
-  postsSortByDate.sort((a, b) => {
-    const dateA = new Date(a?.date.start_date || a.createdTime)
-    const dateB = new Date(b?.date.start_date || b.createdTime)
-    return dateB - dateA
-  })
-
-  const meta = {
-    title: `${locale.NAV.ARCHIVE} | ${BLOG.title}`,
-    description: BLOG.description,
-    type: 'website'
-  }
-
-  const archivePosts = {}
-
-  postsSortByDate.forEach(post => {
-    const date = post.date.start_date.slice(0, 7)
-    if (archivePosts[date]) {
-      archivePosts[date].push(post)
-    } else {
-      archivePosts[date] = [post]
-    }
-  })
-
-  useEffect(() => {
-    if (window) {
-      const anchor = window.location.hash
-      if (anchor) {
-        setTimeout(() => {
-          const anchorElement = document.getElementById(anchor.substring(1))
-          if (anchorElement) {
-            anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
-          }
-        }, 300)
-      }
-    }
-  }, [])
-
-  return (
-    <BaseLayout meta={meta} tags={tags} categories={categories} postCount={postCount}>
-      <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full">
-        {Object.keys(archivePosts).map(archiveTitle => (
-          <BlogPostArchive
-            key={archiveTitle}
-            posts={archivePosts[archiveTitle]}
-            archiveTitle={archiveTitle}
-          />
-        ))}
-      </div>
-      <Live2D />
-    </BaseLayout>
-  )
+const ArchiveIndex = (props) => {
+  return <ArchiveLayout {...props}/>
 }

-export default Index
+export default ArchiveIndex
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -1,78 +1,19 @@
 import BLOG from '@/blog.config'
-import ArticleDetail from '@/components/ArticleDetail'
-import Card from '@/components/Card'
-import LatestPostsGroup from '@/components/LatestPostsGroup'
-import Live2D from '@/components/Live2D'
-import TocDrawer from '@/components/TocDrawer'
-import TocDrawerButton from '@/components/TocDrawerButton'
-import BaseLayout from '@/layouts/BaseLayout'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
+import { ArticleLayout } from '@/themes'
 import Custom404 from '@/pages/404'
-import { getPageTableOfContents } from 'notion-utils'
-import { useRef } from 'react'

 /**
 * 根据notion的slug访问页面
 * @param {*} param0
 * @returns
 */
-const Slug = ({
-  post,
-  tags,
-  prev,
-  next,
-  recommendPosts,
-  categories,
-  postCount,
-  latestPosts
-}) => {
-  if (!post) {
+const Slug = (props) => {
+  if (!props.post) {
    return <Custom404 />
  }
-  const meta = {
-    title: `${post.title} | ${BLOG.title}`,
-    description: post.summary,
-    type: 'article',
-    tags: post.tags
-  }
-
-  const drawerRight = useRef(null)
-  const targetRef = typeof window !== 'undefined' ? document.getElementById('container') : null
-  post.content = Object.keys(post?.blockMap?.block)
-  post.toc = getPageTableOfContents(post, post.blockMap)
-  const floatSlot = post?.toc?.length > 1 ? <div className="block lg:hidden"><TocDrawerButton onClick={() => { drawerRight?.current?.handleSwitchVisible() }} /></div> : null
-
-  return (
-    <BaseLayout
-      meta={meta}
-      tags={tags}
-      post={post}
-      postCount={postCount}
-      latestPosts={latestPosts}
-      categories={categories}
-      floatSlot={floatSlot}
-      rightAreaSlot={
-        BLOG.widget?.showLatestPost && <Card><LatestPostsGroup posts={latestPosts} /></Card>
-      }
-    >
-      <ArticleDetail
-        post={post}
-        recommendPosts={recommendPosts}
-        prev={prev}
-        next={next}
-      />
-
-      {/* 悬浮目录按钮 */}
-      <div className="block lg:hidden">
-        <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
-      </div>
-
-      {/* 宠物 */}
-      <Live2D/>
-
-    </BaseLayout>
-  )
+  return <ArticleLayout {...props}/>
 }

 export async function getStaticPaths () {
--- a/pages/category/[category].js
+++ b/pages/category/[category].js
@@ -1,33 +1,21 @@
-import BLOG from '@/blog.config'
-import BlogPostListScroll from '@/components/BlogPostListScroll'
-import CategoryList from '@/components/CategoryList'
-import StickyBar from '@/components/StickyBar'
-import BaseLayout from '@/layouts/BaseLayout'
-import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import React from 'react'
+import { CategoryLayout } from '@/themes'

-export default function Category ({ tags, posts, category, categories, latestPosts, postCount }) {
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${category} | ${locale.COMMON.CATEGORY} | ${BLOG.title}`,
-    description: BLOG.description,
-    type: 'website'
-  }
-  return <BaseLayout meta={meta} tags={tags} currentCategory={category} postCount={postCount} latestPosts={latestPosts} categories={categories}>
-      <StickyBar>
-        <CategoryList currentCategory={category} categories={categories} />
-      </StickyBar>
-      <div className='md:mt-8'>
-         <BlogPostListScroll posts={posts} tags={tags} currentCategory={category}/>
-      </div>
-  </BaseLayout>
+export default function Category (props) {
+  return <CategoryLayout {...props} />
 }

 export async function getStaticProps ({ params }) {
  const from = 'category-props'
  const category = params.category
-  const { allPosts, categories, tags, postCount, latestPosts } = await getGlobalNotionData({ from })
+  const {
+    allPosts,
+    categories,
+    tags,
+    postCount,
+    latestPosts
+  } = await getGlobalNotionData({ from })
  const filteredPosts = allPosts.filter(
    post => post && post.category && post.category.includes(category)
  )
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -1,32 +1,9 @@
-import BLOG from '@/blog.config'
-import BaseLayout from '@/layouts/BaseLayout'
-import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { faFolder, faThList } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
 import React from 'react'
+import { CategoryIndexLayout } from '@/themes'

-export default function Category ({ tags, allPosts, categories, postCount, latestPosts }) {
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${locale.COMMON.CATEGORY} | ${BLOG.title}`,
-    description: BLOG.description,
-    type: 'website'
-  }
-  return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags} postCount={postCount} latestPosts={latestPosts}>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
-        <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
-        <div id='category-list' className='duration-200 flex flex-wrap'>
-          {Object.keys(categories).map(category => {
-            return <Link key={category} href={`/category/${category}`} passHref>
-              <div className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                <FontAwesomeIcon icon={faFolder} className='mr-4' />{category}({categories[category]})</div>
-            </Link>
-          })}
-        </div>
-      </div>
-  </BaseLayout>
+export default function Category (props) {
+  return <CategoryIndexLayout {...props}/>
 }

 export async function getStaticProps () {
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,12 +1,11 @@
 import BLOG from '@/blog.config'
-import BlogPostListPage from '@/components/BlogPostListPage'
-import BlogPostListScroll from '@/components/BlogPostListScroll'
-import Card from '@/components/Card'
-import Header from '@/components/Header'
-import LatestPostsGroup from '@/components/LatestPostsGroup'
-import BaseLayout from '@/layouts/BaseLayout'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
+import { IndexLayout } from '@/themes'
+
+const Index = (props) => {
+  return <IndexLayout {...props}/>
+}

 export async function getStaticProps () {
  const from = 'index'
@@ -49,28 +48,4 @@ export async function getStaticProps () {
  }
 }

-const Index = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
-  return (
-    <BaseLayout
-      headerSlot={BLOG.home.showHomeBanner && <Header />}
-      meta={meta}
-      tags={tags}
-      sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
-      rightAreaSlot={
-        BLOG.widget?.showLatestPost && <Card><LatestPostsGroup posts={latestPosts} /></Card>
-      }
-      postCount={postCount}
-      categories={categories}
-    >
-      {BLOG.postListStyle !== 'page'
-        ? (
-        <BlogPostListScroll posts={posts} tags={tags} showSummary={true} />
-          )
-        : (
-        <BlogPostListPage posts={posts} tags={tags} postCount={postCount} />
-          )}
-    </BaseLayout>
-  )
-}
-
 export default Index
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -1,30 +1,10 @@
 import BLOG from '@/blog.config'
-import BlogPostListPage from '@/components/BlogPostListPage'
-import Header from '@/components/Header'
-import LatestPostsGroup from '@/components/LatestPostsGroup'
-import BaseLayout from '@/layouts/BaseLayout'
 import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import Custom404 from '../404'
+import { PageLayout } from '@/themes'

-const Page = ({ page, posts, tags, meta, categories, postCount, latestPosts }) => {
-  if (!meta || BLOG.postListStyle !== 'page') {
-    return <Custom404/>
-  }
-
-  return (
-    <BaseLayout
-    headerSlot={BLOG.home.showHomeBanner && <Header />}
-    meta={meta}
-    tags={tags}
-    sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
-    rightAreaSlot={BLOG.widget?.showLatestPost && <LatestPostsGroup posts={latestPosts} />}
-    postCount={postCount}
-    categories={categories}
-  >
-    <BlogPostListPage page={page} posts={posts} postCount={postCount} />
-  </BaseLayout>
-  )
+const Page = (props) => {
+  return <PageLayout {...props} />
 }

 export async function getStaticPaths () {
@@ -40,7 +20,13 @@ export async function getStaticPaths () {

 export async function getStaticProps ({ params: { page } }) {
  const from = `page-${page}`
-  const { allPosts, latestPosts, categories, tags, postCount } = await getGlobalNotionData({ from })
+  const {
+    allPosts,
+    latestPosts,
+    categories,
+    tags,
+    postCount
+  } = await getGlobalNotionData({ from })
  const meta = {
    title: `${page} | Page | ${BLOG.title}`,
    description: BLOG.description,
--- a/pages/search.js
+++ b/pages/search.js
@@ -1,18 +1,14 @@
-import BLOG from '@/blog.config'
-import BlogPostListScroll from '@/components/BlogPostListScroll'
-import StickyBar from '@/components/StickyBar'
-import BaseLayout from '@/layouts/BaseLayout'
-import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useRouter } from 'next/router'
+import { SearchLayout } from '@/themes'

 export async function getStaticProps () {
-  const from = 'search-props'
-  const { allPosts, categories, tags, postCount, latestPosts } =
-    await getGlobalNotionData({ from })
-
+  const {
+    allPosts,
+    categories,
+    tags,
+    postCount,
+    latestPosts
+  } = await getGlobalNotionData({ from: 'search-props' })
  return {
    props: {
      posts: allPosts,
@@ -25,51 +21,8 @@ export async function getStaticProps () {
  }
 }

-const Search = ({ posts, tags, categories, postCount }) => {
-  let filteredPosts = []
-  const searchKey = getSearchKey()
-  if (searchKey) {
-    filteredPosts = posts.filter(post => {
-      const tagContent = post.tags ? post.tags.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent
-      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
-    })
-  } else {
-    filteredPosts = posts
-  }
-
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${searchKey || ''} | ${locale.NAV.SEARCH} | ${BLOG.title}  `,
-    description: BLOG.description,
-    type: 'website'
-  }
-  return (
-    <BaseLayout
-      meta={meta}
-      tags={tags}
-      postCount={postCount}
-      currentSearch={searchKey}
-      categories={categories}
-    >
-      <StickyBar>
-        <div className="p-4 dark:text-gray-200">
-          <FontAwesomeIcon icon={faSearch} className="mr-1" />{' '}
-           {filteredPosts.length} {locale.COMMON.RESULT_OF_SEARCH}
-        </div>
-      </StickyBar>
-      <div className="md:mt-5">
-        <BlogPostListScroll posts={filteredPosts} tags={tags} showSummary={true}/>
-      </div>
-    </BaseLayout>
-  )
+const Search = (props) => {
+  return <SearchLayout {...props} />
 }

-export function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}
 export default Search
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -1,39 +1,24 @@
-import BLOG from '@/blog.config'
-import BlogPostListScroll from '@/components/BlogPostListScroll'
-import StickyBar from '@/components/StickyBar'
-import TagList from '@/components/TagList'
-import BaseLayout from '@/layouts/BaseLayout'
-import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
+import { TagLayout } from '@/themes'

-export default function Tag ({ tags, posts, tag, categories, postCount, latestPosts }) {
-  const { locale } = useGlobal()
-
-  const meta = {
-    title: `${tag} | ${locale.COMMON.TAGS} | ${BLOG.title}`,
-    description: BLOG.description,
-    type: 'website'
-  }
-
-  // 将当前选中的标签置顶🔝
-  if (!tags) tags = []
-  const currentTag = tags?.find(r => r?.name === tag)
-  const newTags = currentTag ? [currentTag].concat(tags.filter(r => r?.name !== tag)) : tags.filter(r => r?.name !== tag)
-
-  return <BaseLayout meta={meta} tags={tags} currentTag={tag} categories={categories} postCount={postCount} latestPosts={latestPosts}>
-      <StickyBar>
-          <TagList tags={newTags} currentTag={tag}/>
-      </StickyBar>
-      <div className='md:mt-8'>
-        <BlogPostListScroll posts={posts} tags={tags} currentTag={tag}/>
-      </div>
-  </BaseLayout>
+const Tag = (props) => {
+  return <TagLayout {...props} />
 }

 export async function getStaticProps ({ params }) {
  const tag = params.tag
  const from = 'tag-props'
-  const { allPosts, categories, tags, postCount, latestPosts } = await getGlobalNotionData({ from, includePage: true, tagsCount: 0 })
+  const {
+    allPosts,
+    categories,
+    tags,
+    postCount,
+    latestPosts
+  } = await getGlobalNotionData({
+    from,
+    includePage: true,
+    tagsCount: 0
+  })
  const filteredPosts = allPosts.filter(
    post => post && post.tags && post.tags.includes(tag)
  )
@@ -65,7 +50,10 @@ function getTagNames (tags) {

 export async function getStaticPaths () {
  const from = 'tag-static-path'
-  const { tags } = await getGlobalNotionData({ from, tagsCount: 0 })
+  const { tags } = await getGlobalNotionData({
+    from,
+    tagsCount: 0
+  })
  const tagNames = getTagNames(tags)

  return {
@@ -73,3 +61,5 @@ export async function getStaticPaths () {
    fallback: true
  }
 }
+
+export default Tag
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -1,34 +1,23 @@
-import BLOG from '@/blog.config'
-import TagItem from '@/components/TagItem'
-import BaseLayout from '@/layouts/BaseLayout'
-import { useGlobal } from '@/lib/global'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
-import { faTags } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
+import { TagIndexLayout } from '@/themes'

-export default function Tag ({ tags, categories, postCount, latestPosts }) {
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${locale.COMMON.TAGS} | ${BLOG.title}`,
-    description: BLOG.description,
-    type: 'website'
-  }
-  return <BaseLayout meta={meta} categories={categories} postCount={postCount} latestPosts={latestPosts}>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
-        <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTags} className='mr-4'/>{locale.COMMON.TAGS}:</div>
-        <div id='tags-list' className='duration-200 flex flex-wrap'>
-          { tags.map(tag => {
-            return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
-          }) }
-        </div>
-      </div>
-  </BaseLayout>
+const TagIndex = (props) => {
+  return <TagIndexLayout {...props} />
 }

 export async function getStaticProps () {
  const from = 'tag-index-props'
-  const { categories, tags, postCount, latestPosts } = await getGlobalNotionData({ from, includePage: true, tagsCount: 0 })
+  const {
+    categories,
+    tags,
+    postCount,
+    latestPosts
+  } = await getGlobalNotionData({
+    from,
+    includePage: true,
+    tagsCount: 0
+  })

  return {
    props: {
@@ -40,3 +29,5 @@ export async function getStaticProps () {
    revalidate: 1
  }
 }
+
+export default TagIndex