From 849a1848e4758d0dd8a168fd04d5aec7035151cb Mon Sep 17 00:00:00 2001 From: Sabertaz Date: Wed, 17 Apr 2024 04:31:28 +0800 Subject: [PATCH] feat(app-router): switch to app router (#1252) * feat(app-router): switch to app router - Refactor ant design, sandpack, and nprogress usage. - Remove `next-seo`, use Next.js built-in Metadata API instead. - Remove `` component. - Rename metadata files. - Add 'use client' directive to components that use client-side code. * build(ts-paths): change resolve paths to `@/*` * fix(app): migrate 404.tsx to not-found.tsx * fix(app): refactor all pages components * fix(app-tag): normalize tag name before using it as a filter * fix(lib-posts): remove global postsData variable * style: format code --- app/about/page.tsx | 20 ++++ app/books/page.tsx | 19 ++++ {public => app}/favicon.ico | Bin app/layout.tsx | 42 ++++++++ {public => app}/manifest.json | 0 app/not-found.tsx | 21 ++++ app/page.tsx | 11 ++ app/post/[slug]/page.tsx | 40 +++++++ app/posts/page.tsx | 19 ++++ app/tag/[tag]/page.tsx | 39 +++++++ app/tags/page.tsx | 21 ++++ components/Article/Article.test.tsx | 4 +- components/Article/Article.tsx | 12 +-- components/Article/ArticleComments.test.tsx | 2 +- components/Article/ArticleComments.tsx | 8 +- components/Article/ArticleContent.tsx | 6 +- components/Article/ArticleHeader.tsx | 12 +-- components/Article/ArticleNav.tsx | 10 +- components/Article/ArticleToc.test.tsx | 2 +- components/Article/ArticleToc.tsx | 4 +- components/Aside/Aside.test.tsx | 2 +- components/Aside/Aside.tsx | 4 +- components/BackTop/BackTop.tsx | 2 + components/Blockquote/Blockquote.test.tsx | 2 +- components/Blockquote/Blockquote.tsx | 2 +- components/BooksGrid/BookCard.tsx | 14 +-- components/BooksGrid/BooksGrid.test.tsx | 2 +- components/BooksGrid/BooksGrid.tsx | 8 +- components/Button/Button.css | 11 +- components/Card/Card.tsx | 2 +- components/CodeBlocks/BlockCode.tsx | 2 +- components/CodeBlocks/InlineCode.test.tsx | 2 +- components/CodeBlocks/InlineCode.tsx | 2 +- components/CodeBlocks/LiveCode.test.tsx | 2 +- components/CodeBlocks/Pre.test.tsx | 2 +- components/CodeBlocks/Pre.tsx | 5 +- components/Container/Container.test.tsx | 2 +- components/Container/Container.tsx | 2 +- components/CopyButton/CopyButton.tsx | 11 +- components/Divider/Divider.tsx | 2 +- components/Editor/Editor.test.tsx | 2 +- .../ErrorBoundary/ErrorBoundary.test.tsx | 2 +- components/ErrorBoundary/ErrorBoundary.tsx | 8 +- .../FlexContainer/FlexContainer.test.tsx | 2 +- components/FlexContainer/FlexContainer.tsx | 2 +- components/Footer/Footer.test.tsx | 4 +- components/Footer/Footer.tsx | 14 +-- components/Footnote/Footnote.test.tsx | 2 +- components/Footnote/Footnote.tsx | 2 +- components/GithubCard/GithubCard.test.tsx | 4 +- components/GithubCard/GithubCard.tsx | 12 ++- components/GithubCard/GithubCardContent.tsx | 8 +- components/GithubCard/GithubCardHeader.tsx | 6 +- components/GithubCard/GithubRepoCard.tsx | 14 +-- components/Header/DesktopNav.tsx | 18 ++-- components/Header/Header.test.tsx | 4 +- components/Header/Header.tsx | 6 +- components/Header/MobileNav.tsx | 20 ++-- components/Headings/H1.tsx | 2 +- components/Headings/H2.tsx | 2 +- components/Headings/H3.tsx | 2 +- components/Headings/H4.tsx | 2 +- components/Headings/H5.tsx | 2 +- components/Headings/H6.tsx | 2 +- components/Headings/Heading.tsx | 4 +- components/Headings/Headings.test.tsx | 2 +- components/Icons/Comment.tsx | 4 +- components/Icons/Hamburger.tsx | 6 +- components/Icons/Icons.test.tsx | 2 +- components/Icons/Moon.tsx | 4 +- components/Icons/SocialIcon.tsx | 4 +- components/Icons/Sun.tsx | 4 +- components/ImageCard/ImageCard.test.tsx | 2 +- components/ImageCard/ImageCard.tsx | 6 +- components/LandingNav/LandingNav.test.tsx | 2 +- components/LandingNav/LandingNav.tsx | 12 ++- components/LandingNav/LandingNavLink.tsx | 6 +- components/Lists/Item.tsx | 6 +- components/Lists/Lists.test.tsx | 2 +- components/Lists/Ol.tsx | 2 +- components/Lists/Ul.tsx | 2 +- components/MDX/MDX.test.tsx | 2 +- components/MDX/MDX.tsx | 24 ++--- components/MDX/MDXCode.tsx | 2 +- components/MDX/MDXDivider.tsx | 2 +- components/MDX/MDXInput.tsx | 4 +- components/MDX/MDXPre.tsx | 2 +- components/MetaHeader/MetaHeader.test.tsx | 19 ---- components/MetaHeader/MetaHeader.tsx | 100 ------------------ .../__snapshots__/MetaHeader.test.tsx.snap | 3 - components/MetaHeader/index.ts | 1 - components/Motion/Bounce.tsx | 7 +- components/Motion/Ease.test.tsx | 2 +- components/Motion/Ease.tsx | 6 +- components/Motion/Slide.tsx | 6 +- components/Motion/Switch.test.tsx | 2 +- components/Motion/Switch.tsx | 6 +- components/Motion/Toggle.test.tsx | 2 +- components/Motion/Toggle.tsx | 7 +- .../NotFoundResult/NotFoundResult.test.tsx | 2 +- components/NotFoundResult/NotFoundResult.tsx | 4 +- components/Paragraph/Paragraph.tsx | 2 +- components/PostsGrid/DesktopPostsGrid.tsx | 4 +- components/PostsGrid/MobilePostsGrid.tsx | 4 +- components/PostsGrid/PostCard.test.tsx | 4 +- components/PostsGrid/PostCard.tsx | 18 ++-- components/PostsGrid/PostsGrid.test.tsx | 4 +- components/PostsGrid/PostsGrid.tsx | 2 +- components/PostsList/PostsList.test.tsx | 4 +- components/PostsList/PostsList.tsx | 8 +- .../PostsSearchBar/PostsSearchBar.test.tsx | 4 +- components/PostsSearchBar/PostsSearchBar.tsx | 10 +- components/ProgressBarProvider.tsx | 13 +++ components/SandpackProvider.tsx | 20 ++++ components/SocialButton/SocialButton.test.tsx | 6 +- components/SocialButton/SocialButton.tsx | 10 +- components/SocialGroup/SocialGroup.test.tsx | 4 +- components/SocialGroup/SocialGroup.tsx | 8 +- components/Table/Table.test.tsx | 2 +- components/Table/Table.tsx | 2 +- components/Tags/IconTag.tsx | 2 +- components/Tags/LinkTag.tsx | 8 +- components/TagsCloud/TagsCloud.test.tsx | 2 +- components/TagsCloud/TagsCloud.tsx | 6 +- components/Texts/Anchor.tsx | 2 +- components/Texts/Span.tsx | 2 +- components/Texts/Text.tsx | 2 +- components/Texts/Texts.test.tsx | 2 +- components/ThemeSwitch/ThemeSwitch.test.tsx | 2 +- components/ThemeSwitch/ThemeSwitch.tsx | 11 +- components/TypingTitle/TypingTitle.test.tsx | 2 +- components/TypingTitle/TypingTitle.tsx | 8 +- components/index.ts | 1 - components/utils/index.ts | 4 - config/colors.ts | 2 +- config/index.ts | 1 + config/routes.ts | 2 +- config/seo.ts | 68 ++++++++++++ config/site.ts | 4 +- config/social.ts | 2 +- cypress/e2e/header.cy.ts | 4 +- cypress/e2e/home.cy.ts | 2 +- hooks/useCopyToClipboard.test.ts | 4 +- hooks/useTypingEffect.test.ts | 2 +- hooks/useVisibility.test.tsx | 2 +- layouts/LandingLayout.test.tsx | 2 +- layouts/LandingLayout.tsx | 28 +++-- layouts/Layout.test.tsx | 4 +- layouts/Layout.tsx | 7 +- layouts/PostLayout.test.tsx | 6 +- layouts/PostLayout.tsx | 7 +- .../__snapshots__/LandingLayout.test.tsx.snap | 14 ++- lib/getBuildTime.ts | 2 +- lib/getGitHubData.ts | 4 +- lib/getPostsData.ts | 12 +-- lib/getSitemap.ts | 4 +- lib/index.ts | 7 +- {__mocks__ => mocks}/data.ts | 0 {__mocks__ => mocks}/utils.ts | 0 next.config.js => next.config.mjs | 13 ++- package.json | 5 +- pages/404.tsx | 34 ------ pages/_app.tsx | 21 ---- pages/_document.tsx | 53 ---------- pages/about.tsx | 39 ------- pages/books.tsx | 32 ------ pages/index.tsx | 13 --- pages/post/[slug].tsx | 62 ----------- pages/posts.tsx | 32 ------ pages/tag/[tag].tsx | 69 ------------ pages/tags.tsx | 36 ------- pnpm-lock.yaml | 56 +++++----- postcss.config.js => postcss.config.mjs | 5 +- sitemap.config.js | 1 + tailwind.config.js => tailwind.config.ts | 26 ++--- tsconfig.json | 26 ++--- types/index.d.ts | 2 +- 177 files changed, 765 insertions(+), 921 deletions(-) create mode 100644 app/about/page.tsx create mode 100644 app/books/page.tsx rename {public => app}/favicon.ico (100%) create mode 100644 app/layout.tsx rename {public => app}/manifest.json (100%) create mode 100644 app/not-found.tsx create mode 100644 app/page.tsx create mode 100644 app/post/[slug]/page.tsx create mode 100644 app/posts/page.tsx create mode 100644 app/tag/[tag]/page.tsx create mode 100644 app/tags/page.tsx delete mode 100644 components/MetaHeader/MetaHeader.test.tsx delete mode 100644 components/MetaHeader/MetaHeader.tsx delete mode 100644 components/MetaHeader/__snapshots__/MetaHeader.test.tsx.snap delete mode 100644 components/MetaHeader/index.ts create mode 100644 components/ProgressBarProvider.tsx create mode 100644 components/SandpackProvider.tsx delete mode 100644 components/utils/index.ts create mode 100644 config/seo.ts rename {__mocks__ => mocks}/data.ts (100%) rename {__mocks__ => mocks}/utils.ts (100%) rename next.config.js => next.config.mjs (85%) delete mode 100644 pages/404.tsx delete mode 100644 pages/_app.tsx delete mode 100644 pages/_document.tsx delete mode 100644 pages/about.tsx delete mode 100644 pages/books.tsx delete mode 100644 pages/index.tsx delete mode 100644 pages/post/[slug].tsx delete mode 100644 pages/posts.tsx delete mode 100644 pages/tag/[tag].tsx delete mode 100644 pages/tags.tsx rename postcss.config.js => postcss.config.mjs (69%) rename tailwind.config.js => tailwind.config.ts (88%) diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 000000000..d59867f08 --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,20 @@ +import type { Metadata } from 'next' +import { GithubCard } from '@/components' +import { Layout } from '@/layouts' +import { getBuildTime, getGitHubData, getPostsMeta } from '@/lib' + +export const metadata: Metadata = { + title: 'About Me', +} + +export default async function About() { + const buildTime = getBuildTime() + const { profile, repos } = await getGitHubData() + const postsMeta = await getPostsMeta() + + return ( + + + + ) +} diff --git a/app/books/page.tsx b/app/books/page.tsx new file mode 100644 index 000000000..e19974451 --- /dev/null +++ b/app/books/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata } from 'next' +import { BooksGrid } from '@/components' +import { Layout } from '@/layouts' +import { getBuildTime, getPostsMeta } from '@/lib' + +export const metadata: Metadata = { + title: 'Books', +} + +export default async function Books() { + const buildTime = getBuildTime() + const postsMeta = await getPostsMeta() + + return ( + + + + ) +} diff --git a/public/favicon.ico b/app/favicon.ico similarity index 100% rename from public/favicon.ico rename to app/favicon.ico diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 000000000..0c9aedf90 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,42 @@ +import { AntdRegistry } from '@ant-design/nextjs-registry' +import type { Metadata, Viewport } from 'next' +import type { ReactNode } from 'react' +import ProgressBarProvider from '@/components/ProgressBarProvider' +import SandpackProvider from '@/components/SandpackProvider' +import { getMetadata, getViewport } from '@/config' + +// Keep stylesheets importing order +import '@/styles/globals.css' +import '@/components/Article/Article.css' +import '@/components/Button/Button.css' +import '@/components/Card/Card.css' +import '@/components/Skeleton/Skeleton.css' + +export function generateMetadata(): Metadata { + return getMetadata() +} + +export function generateViewport(): Viewport { + return getViewport() +} + +export default function RootLayout({ + children, +}: { + children: ReactNode +}) { + return ( + + + + + + + + {children} + + + + + ) +} diff --git a/public/manifest.json b/app/manifest.json similarity index 100% rename from public/manifest.json rename to app/manifest.json diff --git a/app/not-found.tsx b/app/not-found.tsx new file mode 100644 index 000000000..1ec5a5fd9 --- /dev/null +++ b/app/not-found.tsx @@ -0,0 +1,21 @@ +import type { Metadata } from 'next' +import { NotFoundResult } from '@/components' +import { Layout } from '@/layouts' +import { getBuildTime, getPostsMeta } from '@/lib' + +export const metadata: Metadata = { + title: 'Exploring', +} + +export default async function NotFound() { + const buildTime = getBuildTime() + const postsMeta = await getPostsMeta() + + return ( +
+ + + +
+ ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 000000000..05b2574f3 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,11 @@ +import { LandingNav, TypingTitle } from '@/components' +import { LandingLayout } from '@/layouts' + +export default function Home() { + return ( + + + + + ) +} diff --git a/app/post/[slug]/page.tsx b/app/post/[slug]/page.tsx new file mode 100644 index 000000000..9ac249446 --- /dev/null +++ b/app/post/[slug]/page.tsx @@ -0,0 +1,40 @@ +import type { ParsedUrlQuery } from 'node:querystring' +import type { Metadata } from 'next' +import { Article } from '@/components' +import { getMetadata } from '@/config' +import { PostLayout } from '@/layouts' +import { getBuildTime, getPostData, getPostsMeta } from '@/lib' +import 'katex/dist/katex.css' + +interface QueryParams extends ParsedUrlQuery { + slug: string +} + +export async function generateStaticParams() { + const postsMeta = await getPostsMeta() + return postsMeta.map(({ slug }) => ({ + slug, + })) +} + +export async function generateMetadata({ params }: { params: QueryParams }): Promise { + const postData = await getPostData(params.slug) + return postData ? getMetadata({ title: postData.title }) : getMetadata() +} + +export default async function Post({ params }: { params: QueryParams }) { + const buildTime = getBuildTime() + const postsMeta = await getPostsMeta() + const postData = await getPostData(params.slug) + + return ( + postData && ( + +
+ + ) + ) +} diff --git a/app/posts/page.tsx b/app/posts/page.tsx new file mode 100644 index 000000000..a3c5bdb63 --- /dev/null +++ b/app/posts/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata } from 'next' +import { PostsGrid } from '@/components' +import { Layout } from '@/layouts' +import { getBuildTime, getPostsMeta } from '@/lib' + +export const metadata: Metadata = { + title: 'Posts', +} + +export default async function Posts() { + const buildTime = getBuildTime() + const postsMeta = await getPostsMeta() + + return ( + + + + ) +} diff --git a/app/tag/[tag]/page.tsx b/app/tag/[tag]/page.tsx new file mode 100644 index 000000000..ba6440e74 --- /dev/null +++ b/app/tag/[tag]/page.tsx @@ -0,0 +1,39 @@ +import type { ParsedUrlQuery } from 'node:querystring' +import type { Metadata } from 'next' +import { PostsList, TagsCloud } from '@/components' +import { getMetadata } from '@/config' +import { Layout } from '@/layouts' +import { getBuildTime, getPostsMeta, getTagsData } from '@/lib' + +interface QueryParams extends ParsedUrlQuery { + tag: string +} + +export async function generateStaticParams() { + const tagsData = await getTagsData() + return Object.keys(tagsData).map(tag => ({ + tag, + })) +} + +export async function generateMetadata({ params }: { params: QueryParams }): Promise { + return getMetadata({ title: params.tag }) +} + +export default async function Tags({ params }: { params: QueryParams }) { + const buildTime = getBuildTime() + const postsMeta = await getPostsMeta() + const tagsData = await getTagsData() + const activeTag = decodeURI(params.tag) + + const postsMetaByTag = postsMeta.filter( + ({ tags }) => tags && tags.includes(activeTag), + ) + + return ( + + + + + ) +} diff --git a/app/tags/page.tsx b/app/tags/page.tsx new file mode 100644 index 000000000..a8d5c481f --- /dev/null +++ b/app/tags/page.tsx @@ -0,0 +1,21 @@ +import type { Metadata } from 'next' +import { PostsList, TagsCloud } from '@/components' +import { Layout } from '@/layouts' +import { getBuildTime, getPostsMeta, getTagsData } from '@/lib' + +export const metadata: Metadata = { + title: 'Tags', +} + +export default async function Tags() { + const buildTime = getBuildTime() + const postsMeta = await getPostsMeta() + const tagsData = await getTagsData() + + return ( + + + + + ) +} diff --git a/components/Article/Article.test.tsx b/components/Article/Article.test.tsx index 6a43d1818..0910f2144 100644 --- a/components/Article/Article.test.tsx +++ b/components/Article/Article.test.tsx @@ -1,6 +1,6 @@ -import mockData from '@mocks/data' -import { render } from '@utils' import Article from './Article' +import mockData from '@/mocks/data' +import { render } from '@/utils' describe('Article', () => { const mockBasePost = mockData.basePosts[0] diff --git a/components/Article/Article.tsx b/components/Article/Article.tsx index 04a191556..e02395411 100644 --- a/components/Article/Article.tsx +++ b/components/Article/Article.tsx @@ -1,14 +1,14 @@ -import Container from '@components/Container' -import Divider from '@components/Divider' -import { Comment } from '@components/Icons' -import SocialGroup from '@components/SocialGroup' -import { siteConfig } from '@config' -import type { PostType, SiteConfig } from '@types' import ArticleComments from './ArticleComments' import ArticleContent from './ArticleContent' import ArticleHeader from './ArticleHeader' import ArticleNav from './ArticleNav' import ArticleToc from './ArticleToc' +import Container from '@/components/Container' +import Divider from '@/components/Divider' +import { Comment } from '@/components/Icons' +import SocialGroup from '@/components/SocialGroup' +import { siteConfig } from '@/config' +import type { PostType, SiteConfig } from '@/types' interface Props { post: PostType diff --git a/components/Article/ArticleComments.test.tsx b/components/Article/ArticleComments.test.tsx index 580f14bad..4e4c690da 100644 --- a/components/Article/ArticleComments.test.tsx +++ b/components/Article/ArticleComments.test.tsx @@ -1,6 +1,6 @@ -import { render } from '@utils' import { axe } from 'jest-axe' import ArticleComments from './ArticleComments' +import { render } from '@/utils' describe('ArticleComments', () => { it('should render correctly (snapshot)', () => { diff --git a/components/Article/ArticleComments.tsx b/components/Article/ArticleComments.tsx index 7a2da7882..03affe613 100644 --- a/components/Article/ArticleComments.tsx +++ b/components/Article/ArticleComments.tsx @@ -1,7 +1,9 @@ -import { cx } from '@components/utils' -import { siteConfig } from '@config' -import { useDisqus } from '@hooks' +'use client' + +import cx from 'classnames' import styles from './ArticleComments.module.css' +import { siteConfig } from '@/config' +import { useDisqus } from '@/hooks' interface Props { url?: string diff --git a/components/Article/ArticleContent.tsx b/components/Article/ArticleContent.tsx index f5076cd7a..856b98536 100644 --- a/components/Article/ArticleContent.tsx +++ b/components/Article/ArticleContent.tsx @@ -1,6 +1,8 @@ +'use client' + import { MDXRemote } from '@alisowski/next-mdx-remote' -import MDX from '@components/MDX' -import type { PostType } from '@types' +import MDX from '@/components/MDX' +import type { PostType } from '@/types' interface Props { source: PostType['source'] diff --git a/components/Article/ArticleHeader.tsx b/components/Article/ArticleHeader.tsx index 03aedc978..14f75dd12 100644 --- a/components/Article/ArticleHeader.tsx +++ b/components/Article/ArticleHeader.tsx @@ -1,10 +1,10 @@ -import { H1 } from '@components/Headings' -import { Calendar, ClockCircle, Edit } from '@components/Icons' -import { Slide } from '@components/Motion' -import { IconTag, LinkTag } from '@components/Tags' -import { siteConfig } from '@config' -import type { PostMeta } from '@types' import styles from './ArticleHeader.module.css' +import { H1 } from '@/components/Headings' +import { Calendar, ClockCircle, Edit } from '@/components/Icons' +import { Slide } from '@/components/Motion' +import { IconTag, LinkTag } from '@/components/Tags' +import { siteConfig } from '@/config' +import type { PostMeta } from '@/types' interface Props { post: PostMeta diff --git a/components/Article/ArticleNav.tsx b/components/Article/ArticleNav.tsx index 791c07ffb..caefa3a9a 100644 --- a/components/Article/ArticleNav.tsx +++ b/components/Article/ArticleNav.tsx @@ -1,8 +1,8 @@ -import FlexContainer from '@components/FlexContainer' -import { ArrowLeft, ArrowRight, Home } from '@components/Icons' -import Link from '@components/Link' -import { Bounce } from '@components/Motion' -import type { PostMeta } from '@types' +import FlexContainer from '@/components/FlexContainer' +import { ArrowLeft, ArrowRight, Home } from '@/components/Icons' +import Link from '@/components/Link' +import { Bounce } from '@/components/Motion' +import type { PostMeta } from '@/types' interface Props { prevPost: PostMeta['prevPost'] diff --git a/components/Article/ArticleToc.test.tsx b/components/Article/ArticleToc.test.tsx index 5172ab695..61f01136d 100644 --- a/components/Article/ArticleToc.test.tsx +++ b/components/Article/ArticleToc.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import ArticleToc from './ArticleToc' +import { render } from '@/utils' describe('ArticleToc', () => { it('should render correctly (snapshot)', () => { diff --git a/components/Article/ArticleToc.tsx b/components/Article/ArticleToc.tsx index 42a40dc94..4250ec560 100644 --- a/components/Article/ArticleToc.tsx +++ b/components/Article/ArticleToc.tsx @@ -1,6 +1,8 @@ -import Anchor from '@components/Anchor' +'use client' + import { useEffect, useState } from 'react' import styles from './ArticleToc.module.css' +import Anchor from '@/components/Anchor' interface Props { slug: string diff --git a/components/Aside/Aside.test.tsx b/components/Aside/Aside.test.tsx index caf99929d..b4fc47a96 100644 --- a/components/Aside/Aside.test.tsx +++ b/components/Aside/Aside.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import Aside from './Aside' +import { render } from '@/utils' describe('Aside', () => { const types = [ diff --git a/components/Aside/Aside.tsx b/components/Aside/Aside.tsx index f6196885d..7409caada 100644 --- a/components/Aside/Aside.tsx +++ b/components/Aside/Aside.tsx @@ -1,7 +1,7 @@ -import Alert from '@components/Alert' -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import styles from './Aside.module.css' +import Alert from '@/components/Alert' interface Props { type?: string diff --git a/components/BackTop/BackTop.tsx b/components/BackTop/BackTop.tsx index 7dba3d242..f24afff05 100644 --- a/components/BackTop/BackTop.tsx +++ b/components/BackTop/BackTop.tsx @@ -1,3 +1,5 @@ +'use client' + import type { BackTopProps } from 'antd' import { FloatButton } from 'antd' diff --git a/components/Blockquote/Blockquote.test.tsx b/components/Blockquote/Blockquote.test.tsx index 145c680d7..f6c6c5b85 100644 --- a/components/Blockquote/Blockquote.test.tsx +++ b/components/Blockquote/Blockquote.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import Blockquote from './Blockquote' +import { render } from '@/utils' describe('Blockquote', () => { it('should render correctly (snapshot)', () => { diff --git a/components/Blockquote/Blockquote.tsx b/components/Blockquote/Blockquote.tsx index 67403fff1..a061b61c8 100644 --- a/components/Blockquote/Blockquote.tsx +++ b/components/Blockquote/Blockquote.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { BlockquoteHTMLAttributes } from 'react' import styles from './Blockquote.module.css' diff --git a/components/BooksGrid/BookCard.tsx b/components/BooksGrid/BookCard.tsx index 19fdf39cb..f41e1feaa 100644 --- a/components/BooksGrid/BookCard.tsx +++ b/components/BooksGrid/BookCard.tsx @@ -1,9 +1,11 @@ -import Badge from '@components/Badge' -import { Card, Meta } from '@components/Card' -import { Book as BookIcon } from '@components/Icons' -import { Span } from '@components/Texts' -import { getColorByName } from '@config' -import type { Book } from '@types' +'use client' + +import Badge from '@/components/Badge' +import { Card, Meta } from '@/components/Card' +import { Book as BookIcon } from '@/components/Icons' +import { Span } from '@/components/Texts' +import { getColorByName } from '@/config' +import type { Book } from '@/types' interface Props { book: Book diff --git a/components/BooksGrid/BooksGrid.test.tsx b/components/BooksGrid/BooksGrid.test.tsx index b3f616810..db843aaaf 100644 --- a/components/BooksGrid/BooksGrid.test.tsx +++ b/components/BooksGrid/BooksGrid.test.tsx @@ -1,6 +1,6 @@ -import { render } from '@utils' import { axe } from 'jest-axe' import BooksGrid from './BooksGrid' +import { render } from '@/utils' describe('BooksGrid', () => { it('should render correctly (snapshot)', () => { diff --git a/components/BooksGrid/BooksGrid.tsx b/components/BooksGrid/BooksGrid.tsx index 5366b78ed..52c43f43e 100644 --- a/components/BooksGrid/BooksGrid.tsx +++ b/components/BooksGrid/BooksGrid.tsx @@ -1,8 +1,8 @@ -import Col from '@components/Col' -import Row from '@components/Row' -import { siteConfig } from '@config' -import type { Book } from '@types' import BookCard from './BookCard' +import Col from '@/components/Col' +import Row from '@/components/Row' +import { siteConfig } from '@/config' +import type { Book } from '@/types' interface Props { books?: Book[] diff --git a/components/Button/Button.css b/components/Button/Button.css index 7f7de5be8..84a04d5f7 100644 --- a/components/Button/Button.css +++ b/components/Button/Button.css @@ -1,14 +1,9 @@ /* Add dark mode support for antd Button component */ -button.ant-btn-text { +button.ant-btn.ant-btn-text { @apply dark:text-light dark:hover:text-gray-400; } -button.ant-btn-default, -button.ant-btn-dashed { +button.ant-btn.ant-btn-default, +button.ant-btn.ant-btn-dashed { @apply bg-transparent hover:bg-transparent focus:bg-transparent dark:text-light dark:hover:text-secondary dark:focus:text-secondary; } - -/* Remove tailwind button reset styles */ -button.ant-btn-primary { - @apply bg-primary; -} diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx index 0f7f45d39..5e419264d 100644 --- a/components/Card/Card.tsx +++ b/components/Card/Card.tsx @@ -1,6 +1,6 @@ -import { cx } from '@components/utils' import { Card as AntCard } from 'antd' import type { CardMetaProps, CardProps } from 'antd/lib/card' +import cx from 'classnames' interface Props extends CardProps {} diff --git a/components/CodeBlocks/BlockCode.tsx b/components/CodeBlocks/BlockCode.tsx index cf84e4c70..b0aa538c6 100644 --- a/components/CodeBlocks/BlockCode.tsx +++ b/components/CodeBlocks/BlockCode.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { Language } from 'prism-react-renderer' import Highlight, { defaultProps } from 'prism-react-renderer' import styles from './BlockCode.module.css' diff --git a/components/CodeBlocks/InlineCode.test.tsx b/components/CodeBlocks/InlineCode.test.tsx index c66149461..5cc7e950b 100644 --- a/components/CodeBlocks/InlineCode.test.tsx +++ b/components/CodeBlocks/InlineCode.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import InlineCode from './InlineCode' +import { render } from '@/utils' describe('InlineCode', () => { it('should render correctly (snapshot)', () => { diff --git a/components/CodeBlocks/InlineCode.tsx b/components/CodeBlocks/InlineCode.tsx index e50a00450..29f10c370 100644 --- a/components/CodeBlocks/InlineCode.tsx +++ b/components/CodeBlocks/InlineCode.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import styles from './InlineCode.module.css' interface Props { diff --git a/components/CodeBlocks/LiveCode.test.tsx b/components/CodeBlocks/LiveCode.test.tsx index 33dcf3d4b..f6ef19dbe 100644 --- a/components/CodeBlocks/LiveCode.test.tsx +++ b/components/CodeBlocks/LiveCode.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import LiveCode from './LiveCode' +import { render } from '@/utils' describe('LiveCode', () => { it('should render live code correctly (snapshot)', () => { diff --git a/components/CodeBlocks/Pre.test.tsx b/components/CodeBlocks/Pre.test.tsx index 9ab739786..261a1e33b 100644 --- a/components/CodeBlocks/Pre.test.tsx +++ b/components/CodeBlocks/Pre.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import Pre from './Pre' +import { render } from '@/utils' describe('Pre', () => { const languages = [ diff --git a/components/CodeBlocks/Pre.tsx b/components/CodeBlocks/Pre.tsx index b91a4117c..cc282fc76 100644 --- a/components/CodeBlocks/Pre.tsx +++ b/components/CodeBlocks/Pre.tsx @@ -1,5 +1,5 @@ -import CopyButton from '@components/CopyButton' -import { cx, dynamic } from '@components/utils' +import cx from 'classnames' +import dynamic from 'next/dynamic' import type { HTMLProps, ReactElement } from 'react' import BlockCode from './BlockCode' import styles from './Pre.module.css' @@ -9,6 +9,7 @@ import { normalizeLanguageName, normalizeLines, } from './utils' +import CopyButton from '@/components/CopyButton' const LiveCode = dynamic(() => import('./LiveCode')) diff --git a/components/Container/Container.test.tsx b/components/Container/Container.test.tsx index bcbe3db41..c6aa950ed 100644 --- a/components/Container/Container.test.tsx +++ b/components/Container/Container.test.tsx @@ -1,6 +1,6 @@ -import { render, screen } from '@utils' import { axe } from 'jest-axe' import Container from './Container' +import { render, screen } from '@/utils' describe('Container', () => { it('should render correctly (snapshot)', () => { diff --git a/components/Container/Container.tsx b/components/Container/Container.tsx index 50b6642bf..ac115e4ec 100644 --- a/components/Container/Container.tsx +++ b/components/Container/Container.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { CSSProperties, HTMLProps, ReactNode } from 'react' interface Props extends HTMLProps { diff --git a/components/CopyButton/CopyButton.tsx b/components/CopyButton/CopyButton.tsx index 2c11f6989..a15ccd08d 100644 --- a/components/CopyButton/CopyButton.tsx +++ b/components/CopyButton/CopyButton.tsx @@ -1,8 +1,11 @@ -import { Check, Copy } from '@components/Icons' -import { Toggle } from '@components/Motion' -import { cx, useReducedMotion } from '@components/utils' -import { useCopyToClipboard } from '@hooks' +'use client' + +import cx from 'classnames' +import { useReducedMotion } from 'framer-motion' import styles from './CopyButton.module.css' +import { Check, Copy } from '@/components/Icons' +import { Toggle } from '@/components/Motion' +import { useCopyToClipboard } from '@/hooks' interface Props { code: string diff --git a/components/Divider/Divider.tsx b/components/Divider/Divider.tsx index f6bfea03d..abe596529 100644 --- a/components/Divider/Divider.tsx +++ b/components/Divider/Divider.tsx @@ -1,6 +1,6 @@ -import { cx } from '@components/utils' import type { DividerProps } from 'antd' import { Divider as AntDivider } from 'antd' +import cx from 'classnames' import styles from './Divider.module.css' interface Props extends DividerProps {} diff --git a/components/Editor/Editor.test.tsx b/components/Editor/Editor.test.tsx index eb56a3376..ac00a77ca 100644 --- a/components/Editor/Editor.test.tsx +++ b/components/Editor/Editor.test.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unknown-property -- Custom code metadata */ -import { render, screen } from '@utils' import Editor from './Editor' +import { render, screen } from '@/utils' describe('Editor', () => { it('should render sandpack correctly', () => { diff --git a/components/ErrorBoundary/ErrorBoundary.test.tsx b/components/ErrorBoundary/ErrorBoundary.test.tsx index 6707af958..31a7cd853 100644 --- a/components/ErrorBoundary/ErrorBoundary.test.tsx +++ b/components/ErrorBoundary/ErrorBoundary.test.tsx @@ -1,7 +1,7 @@ -import { render, screen } from '@utils' import { axe } from 'jest-axe' import type { JSXElementConstructor, ReactNode } from 'react' import ErrorBoundary from './ErrorBoundary' +import { render, screen } from '@/utils' describe('ErrorBoundary', () => { const ComponentWithError = ({ shouldThrow }: { shouldThrow?: boolean }) => { diff --git a/components/ErrorBoundary/ErrorBoundary.tsx b/components/ErrorBoundary/ErrorBoundary.tsx index fe7c49693..60959a988 100644 --- a/components/ErrorBoundary/ErrorBoundary.tsx +++ b/components/ErrorBoundary/ErrorBoundary.tsx @@ -1,8 +1,10 @@ -import Paragraph from '@components/Paragraph' -import Result from '@components/Result' -import { Text } from '@components/Texts' +'use client' + import type { ErrorInfo } from 'react' import { Component } from 'react' +import Paragraph from '@/components/Paragraph' +import Result from '@/components/Result' +import { Text } from '@/components/Texts' interface Props { children: JSX.Element diff --git a/components/FlexContainer/FlexContainer.test.tsx b/components/FlexContainer/FlexContainer.test.tsx index 73af5ab9f..64167be92 100644 --- a/components/FlexContainer/FlexContainer.test.tsx +++ b/components/FlexContainer/FlexContainer.test.tsx @@ -1,6 +1,6 @@ -import { render, screen } from '@utils' import { axe } from 'jest-axe' import FlexContainer from './FlexContainer' +import { render, screen } from '@/utils' describe('FlexContainer', () => { it('should render correctly (snapshot)', () => { diff --git a/components/FlexContainer/FlexContainer.tsx b/components/FlexContainer/FlexContainer.tsx index 0fa57518a..eed93c0b5 100644 --- a/components/FlexContainer/FlexContainer.tsx +++ b/components/FlexContainer/FlexContainer.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { CSSProperties, HTMLProps, ReactNode } from 'react' interface Props extends HTMLProps { diff --git a/components/Footer/Footer.test.tsx b/components/Footer/Footer.test.tsx index cc0520fa7..f5374467d 100644 --- a/components/Footer/Footer.test.tsx +++ b/components/Footer/Footer.test.tsx @@ -1,7 +1,7 @@ -import mockData from '@mocks/data' -import { render } from '@utils' import { axe } from 'jest-axe' import Footer from './Footer' +import mockData from '@/mocks/data' +import { render } from '@/utils' describe('Footer', () => { const mockTime = mockData.time diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index 859e13f6c..c623c22ae 100644 --- a/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -1,10 +1,10 @@ -import Col from '@components/Col' -import Container from '@components/Container' -import Divider from '@components/Divider' -import Row from '@components/Row' -import SocialButton from '@components/SocialButton' -import { siteConfig, socialList } from '@config' -import type { BuildTime, SiteConfig, SocialType } from '@types' +import Col from '@/components/Col' +import Container from '@/components/Container' +import Divider from '@/components/Divider' +import Row from '@/components/Row' +import SocialButton from '@/components/SocialButton' +import { siteConfig, socialList } from '@/config' +import type { BuildTime, SiteConfig, SocialType } from '@/types' interface Props { buildTime: BuildTime diff --git a/components/Footnote/Footnote.test.tsx b/components/Footnote/Footnote.test.tsx index 0d614251b..c544878dd 100644 --- a/components/Footnote/Footnote.test.tsx +++ b/components/Footnote/Footnote.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import Footnote from './Footnote' +import { render } from '@/utils' describe('Footnote', () => { it('should render correctly (snapshot)', () => { diff --git a/components/Footnote/Footnote.tsx b/components/Footnote/Footnote.tsx index 58e9cd735..e81b3ffcf 100644 --- a/components/Footnote/Footnote.tsx +++ b/components/Footnote/Footnote.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import styles from './Footnote.module.css' diff --git a/components/GithubCard/GithubCard.test.tsx b/components/GithubCard/GithubCard.test.tsx index 5c207a143..800fd3471 100644 --- a/components/GithubCard/GithubCard.test.tsx +++ b/components/GithubCard/GithubCard.test.tsx @@ -1,7 +1,7 @@ -import mockData from '@mocks/data' -import { render } from '@utils' import { axe } from 'jest-axe' import GithubCard from './GithubCard' +import mockData from '@/mocks/data' +import { render } from '@/utils' describe('GithubCard', () => { const mockBaseProfile = mockData.baseProfile diff --git a/components/GithubCard/GithubCard.tsx b/components/GithubCard/GithubCard.tsx index bae3ff0ba..5fee8d1a1 100644 --- a/components/GithubCard/GithubCard.tsx +++ b/components/GithubCard/GithubCard.tsx @@ -1,11 +1,13 @@ -import Avatar from '@components/Avatar' -import Badge from '@components/Badge' -import { Card, Meta } from '@components/Card' -import { getColorByName } from '@config' -import type { Profile, Repo } from '@types' +'use client' + import GithubCardContent from './GithubCardContent' import GithubCardHeader from './GithubCardHeader' import GithubRepoCard from './GithubRepoCard' +import Avatar from '@/components/Avatar' +import Badge from '@/components/Badge' +import { Card, Meta } from '@/components/Card' +import { getColorByName } from '@/config' +import type { Profile, Repo } from '@/types' interface Props { profile: Profile diff --git a/components/GithubCard/GithubCardContent.tsx b/components/GithubCard/GithubCardContent.tsx index aefaf479a..5c1950a55 100644 --- a/components/GithubCard/GithubCardContent.tsx +++ b/components/GithubCard/GithubCardContent.tsx @@ -1,7 +1,7 @@ -import { Environment, InfoCircle, User } from '@components/Icons' -import Space from '@components/Space' -import { Span } from '@components/Texts' -import type { Profile } from '@types' +import { Environment, InfoCircle, User } from '@/components/Icons' +import Space from '@/components/Space' +import { Span } from '@/components/Texts' +import type { Profile } from '@/types' interface Props { profile: Profile diff --git a/components/GithubCard/GithubCardHeader.tsx b/components/GithubCard/GithubCardHeader.tsx index 050a4f4eb..5e90c1197 100644 --- a/components/GithubCard/GithubCardHeader.tsx +++ b/components/GithubCard/GithubCardHeader.tsx @@ -1,6 +1,6 @@ -import { Github } from '@components/Icons' -import { Span } from '@components/Texts' -import type { Profile } from '@types' +import { Github } from '@/components/Icons' +import { Span } from '@/components/Texts' +import type { Profile } from '@/types' interface Props { profile: Profile diff --git a/components/GithubCard/GithubRepoCard.tsx b/components/GithubCard/GithubRepoCard.tsx index 7804a2a0d..fd4a7586b 100644 --- a/components/GithubCard/GithubRepoCard.tsx +++ b/components/GithubCard/GithubRepoCard.tsx @@ -1,10 +1,10 @@ -import Badge from '@components/Badge' -import { Card, Meta } from '@components/Card' -import { Branches, Star } from '@components/Icons' -import { Tag } from '@components/Tags' -import { Span } from '@components/Texts' -import { getColorByName } from '@config' -import type { Repo } from '@types' +import Badge from '@/components/Badge' +import { Card, Meta } from '@/components/Card' +import { Branches, Star } from '@/components/Icons' +import { Tag } from '@/components/Tags' +import { Span } from '@/components/Texts' +import { getColorByName } from '@/config' +import type { Repo } from '@/types' interface Props { repo: Repo diff --git a/components/Header/DesktopNav.tsx b/components/Header/DesktopNav.tsx index 94c774941..b5442e173 100644 --- a/components/Header/DesktopNav.tsx +++ b/components/Header/DesktopNav.tsx @@ -1,13 +1,13 @@ -import Link from '@components/Link' -import LocalImage from '@components/LocalImage' -import Menu from '@components/Menu' -import PostsSearchBar from '@components/PostsSearchBar' -import ThemeSwitch from '@components/ThemeSwitch' -import { cx } from '@components/utils' -import { routes } from '@config' -import logo from '@images/logo-full.png' -import type { PostMeta } from '@types' +import cx from 'classnames' import styles from './DesktopNav.module.css' +import Link from '@/components/Link' +import LocalImage from '@/components/LocalImage' +import Menu from '@/components/Menu' +import PostsSearchBar from '@/components/PostsSearchBar' +import ThemeSwitch from '@/components/ThemeSwitch' +import { routes } from '@/config' +import logo from '@/images/logo-full.png' +import type { PostMeta } from '@/types' interface Props { fixed: boolean diff --git a/components/Header/Header.test.tsx b/components/Header/Header.test.tsx index cf1715cdf..78b9d63f2 100644 --- a/components/Header/Header.test.tsx +++ b/components/Header/Header.test.tsx @@ -1,6 +1,6 @@ -import mockData from '@mocks/data' -import { render, waitFor } from '@utils' import Header from './Header' +import mockData from '@/mocks/data' +import { render, waitFor } from '@/utils' describe('Header', () => { const mockPosts = mockData.posts diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 9fb46a5a3..12a694bdc 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -1,8 +1,10 @@ -import { useVisibility } from '@hooks' -import type { PostMeta } from '@types' +'use client' + import { useCallback, useRef, useState } from 'react' import DesktopNav from './DesktopNav' import MobileNav from './MobileNav' +import type { PostMeta } from '@/types' +import { useVisibility } from '@/hooks' interface Props { posts: PostMeta[] diff --git a/components/Header/MobileNav.tsx b/components/Header/MobileNav.tsx index f9f2f9fd0..1bacca4e2 100644 --- a/components/Header/MobileNav.tsx +++ b/components/Header/MobileNav.tsx @@ -1,13 +1,13 @@ -import Col from '@components/Col' -import { Bars } from '@components/Icons' -import Link from '@components/Link' -import LocalImage from '@components/LocalImage' -import Menu from '@components/Menu' -import Popover from '@components/Popover' -import Row from '@components/Row' -import ThemeSwitch from '@components/ThemeSwitch' -import { routes } from '@config' -import logo from '@images/logo-full.png' +import Col from '@/components/Col' +import { Bars } from '@/components/Icons' +import Link from '@/components/Link' +import LocalImage from '@/components/LocalImage' +import Menu from '@/components/Menu' +import Popover from '@/components/Popover' +import Row from '@/components/Row' +import ThemeSwitch from '@/components/ThemeSwitch' +import { routes } from '@/config' +import logo from '@/images/logo-full.png' function MobileNav(): JSX.Element { return ( diff --git a/components/Headings/H1.tsx b/components/Headings/H1.tsx index 47f966a3c..6df93ddcd 100644 --- a/components/Headings/H1.tsx +++ b/components/Headings/H1.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import Heading from './Heading' import styles from './Headings.module.css' diff --git a/components/Headings/H2.tsx b/components/Headings/H2.tsx index d4a6455cf..d0d2ed8c3 100644 --- a/components/Headings/H2.tsx +++ b/components/Headings/H2.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import Heading from './Heading' import styles from './Headings.module.css' diff --git a/components/Headings/H3.tsx b/components/Headings/H3.tsx index 507113d5f..34504423c 100644 --- a/components/Headings/H3.tsx +++ b/components/Headings/H3.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import Heading from './Heading' import styles from './Headings.module.css' diff --git a/components/Headings/H4.tsx b/components/Headings/H4.tsx index 17eeeb3e8..6677ab00f 100644 --- a/components/Headings/H4.tsx +++ b/components/Headings/H4.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import Heading from './Heading' import styles from './Headings.module.css' diff --git a/components/Headings/H5.tsx b/components/Headings/H5.tsx index 966f609c1..d6a0ff75b 100644 --- a/components/Headings/H5.tsx +++ b/components/Headings/H5.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import Heading from './Heading' import styles from './Headings.module.css' diff --git a/components/Headings/H6.tsx b/components/Headings/H6.tsx index ca8c08c1d..2862dd278 100644 --- a/components/Headings/H6.tsx +++ b/components/Headings/H6.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { ReactNode } from 'react' import Heading from './Heading' import styles from './Headings.module.css' diff --git a/components/Headings/Heading.tsx b/components/Headings/Heading.tsx index f7cffad60..6b2a19e85 100644 --- a/components/Headings/Heading.tsx +++ b/components/Headings/Heading.tsx @@ -1,6 +1,8 @@ -import { cx } from '@components/utils' +'use client' + import { Typography } from 'antd' import type { TitleProps } from 'antd/lib/typography/Title' +import cx from 'classnames' import styles from './Headings.module.css' // Keep `H3` `margin-top`. diff --git a/components/Headings/Headings.test.tsx b/components/Headings/Headings.test.tsx index 6c7403196..8e7746e9b 100644 --- a/components/Headings/Headings.test.tsx +++ b/components/Headings/Headings.test.tsx @@ -1,10 +1,10 @@ -import { render } from '@utils' import H1 from './H1' import H2 from './H2' import H3 from './H3' import H4 from './H4' import H5 from './H5' import H6 from './H6' +import { render } from '@/utils' describe('Headings', () => { const Headings = { diff --git a/components/Icons/Comment.tsx b/components/Icons/Comment.tsx index c6935f441..fa519b1f6 100644 --- a/components/Icons/Comment.tsx +++ b/components/Icons/Comment.tsx @@ -1,4 +1,6 @@ -import { motion } from '@components/utils' +'use client' + +import { motion } from 'framer-motion' import IconFactory from './IconFactory' function Svg(): JSX.Element { diff --git a/components/Icons/Hamburger.tsx b/components/Icons/Hamburger.tsx index 72d3415e8..cea321ce7 100644 --- a/components/Icons/Hamburger.tsx +++ b/components/Icons/Hamburger.tsx @@ -1,5 +1,7 @@ -import type { MotionProps } from '@components/utils' -import { motion } from '@components/utils' +'use client' + +import type { MotionProps } from 'framer-motion' +import { motion } from 'framer-motion' import type { KeyboardEvent } from 'react' import { useCallback, useState } from 'react' import IconFactory from './IconFactory' diff --git a/components/Icons/Icons.test.tsx b/components/Icons/Icons.test.tsx index 718f60626..1a62fcaf3 100644 --- a/components/Icons/Icons.test.tsx +++ b/components/Icons/Icons.test.tsx @@ -1,7 +1,7 @@ -import { render } from '@utils' import { axe } from 'jest-axe' import Comment from './Comment' import Hamburger from './Hamburger' +import { render } from '@/utils' describe('Icons', () => { const Icons = [Comment, Hamburger] diff --git a/components/Icons/Moon.tsx b/components/Icons/Moon.tsx index 9e05023aa..baf660bb4 100644 --- a/components/Icons/Moon.tsx +++ b/components/Icons/Moon.tsx @@ -1,4 +1,6 @@ -import { motion } from '@components/utils' +'use client' + +import { motion } from 'framer-motion' import IconFactory from './IconFactory' function Svg(): JSX.Element { diff --git a/components/Icons/SocialIcon.tsx b/components/Icons/SocialIcon.tsx index 07b8e457f..cd0df8549 100644 --- a/components/Icons/SocialIcon.tsx +++ b/components/Icons/SocialIcon.tsx @@ -6,9 +6,9 @@ import { WeiboOutlined, XOutlined, } from '@ant-design/icons' -import { socialList } from '@config' -import type { SocialType } from '@types' import styles from './SocialIcon.module.css' +import { socialList } from '@/config' +import type { SocialType } from '@/types' function SocialIcon(type: SocialType): JSX.Element { switch (type) { diff --git a/components/Icons/Sun.tsx b/components/Icons/Sun.tsx index 53c915148..11578f394 100644 --- a/components/Icons/Sun.tsx +++ b/components/Icons/Sun.tsx @@ -1,4 +1,6 @@ -import { motion } from '@components/utils' +'use client' + +import { motion } from 'framer-motion' import IconFactory from './IconFactory' function Svg(): JSX.Element { diff --git a/components/ImageCard/ImageCard.test.tsx b/components/ImageCard/ImageCard.test.tsx index f6a6ff681..714bead57 100644 --- a/components/ImageCard/ImageCard.test.tsx +++ b/components/ImageCard/ImageCard.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import ImageCard from './ImageCard' +import { render } from '@/utils' describe('ImageCard', () => { it('should render placeholder image correctly (snapshot)', () => { diff --git a/components/ImageCard/ImageCard.tsx b/components/ImageCard/ImageCard.tsx index 571e4a810..72bc5ec89 100644 --- a/components/ImageCard/ImageCard.tsx +++ b/components/ImageCard/ImageCard.tsx @@ -1,6 +1,6 @@ -import { Card, Meta } from '@components/Card' -import Image from '@components/Image' -import { cx } from '@components/utils' +import cx from 'classnames' +import { Card, Meta } from '@/components/Card' +import Image from '@/components/Image' interface Props { src?: string diff --git a/components/LandingNav/LandingNav.test.tsx b/components/LandingNav/LandingNav.test.tsx index fd9366423..406e36c1e 100644 --- a/components/LandingNav/LandingNav.test.tsx +++ b/components/LandingNav/LandingNav.test.tsx @@ -1,5 +1,5 @@ -import { act, render, screen } from '@utils' import LandingNav from './LandingNav' +import { act, render, screen } from '@/utils' describe('LandingNav', () => { beforeAll(() => { diff --git a/components/LandingNav/LandingNav.tsx b/components/LandingNav/LandingNav.tsx index 039b4b850..08c45b93f 100644 --- a/components/LandingNav/LandingNav.tsx +++ b/components/LandingNav/LandingNav.tsx @@ -1,12 +1,14 @@ -import { Hamburger } from '@components/Icons' -import { Switch } from '@components/Motion' -import type { MotionProps } from '@components/utils' -import { routes as defaultRoutes } from '@config' -import type { Route } from '@types' +'use client' + +import type { MotionProps } from 'framer-motion' import type { KeyboardEvent } from 'react' import { useCallback, useState } from 'react' import styles from './LandingNav.module.css' import LandingNavLink from './LandingNavLink' +import type { Route } from '@/types' +import { routes as defaultRoutes } from '@/config' +import { Switch } from '@/components/Motion' +import { Hamburger } from '@/components/Icons' interface Props { routes?: Route[] diff --git a/components/LandingNav/LandingNavLink.tsx b/components/LandingNav/LandingNavLink.tsx index 70ea1fb71..a77288393 100644 --- a/components/LandingNav/LandingNavLink.tsx +++ b/components/LandingNav/LandingNavLink.tsx @@ -1,8 +1,8 @@ -import Link from '@components/Link' -import { Bounce } from '@components/Motion' -import Tooltip from '@components/Tooltip' import type { ReactNode } from 'react' import styles from './LandingNavLink.module.css' +import Link from '@/components/Link' +import { Bounce } from '@/components/Motion' +import Tooltip from '@/components/Tooltip' interface Props { title: string diff --git a/components/Lists/Item.tsx b/components/Lists/Item.tsx index 5ae84ce94..34d8515d9 100644 --- a/components/Lists/Item.tsx +++ b/components/Lists/Item.tsx @@ -1,8 +1,8 @@ -import { ArrowRight } from '@components/Icons' -import { cx } from '@components/utils' -import { siteConfig } from '@config' +import cx from 'classnames' import type { HTMLProps } from 'react' import styles from './Item.module.css' +import { siteConfig } from '@/config' +import { ArrowRight } from '@/components/Icons' interface Props extends HTMLProps {} diff --git a/components/Lists/Lists.test.tsx b/components/Lists/Lists.test.tsx index cb3993ce2..3777a2f65 100644 --- a/components/Lists/Lists.test.tsx +++ b/components/Lists/Lists.test.tsx @@ -1,7 +1,7 @@ -import { render } from '@utils' import Item from './Item' import Ol from './Ol' import Ul from './Ul' +import { render } from '@/utils' describe('Lists', () => { const Lists = { diff --git a/components/Lists/Ol.tsx b/components/Lists/Ol.tsx index 17fa493ef..36df3cabc 100644 --- a/components/Lists/Ol.tsx +++ b/components/Lists/Ol.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { DetailedHTMLProps, OlHTMLAttributes } from 'react' import styles from './Ol.module.css' diff --git a/components/Lists/Ul.tsx b/components/Lists/Ul.tsx index 585db69fa..fbf5ce547 100644 --- a/components/Lists/Ul.tsx +++ b/components/Lists/Ul.tsx @@ -1,4 +1,4 @@ -import { cx } from '@components/utils' +import cx from 'classnames' import type { DetailedHTMLProps, OlHTMLAttributes } from 'react' import styles from './Ul.module.css' diff --git a/components/MDX/MDX.test.tsx b/components/MDX/MDX.test.tsx index bab9a9641..da96046d5 100644 --- a/components/MDX/MDX.test.tsx +++ b/components/MDX/MDX.test.tsx @@ -1,8 +1,8 @@ -import { render } from '@utils' import MDXCode from './MDXCode' import MDXDivider from './MDXDivider' import MDXInput from './MDXInput' import MDXPre from './MDXPre' +import { render } from '@/utils' describe('MDXDivider', () => { it('should render correctly (snapshot)', () => { diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx index 23fdb3526..654f56c1e 100644 --- a/components/MDX/MDX.tsx +++ b/components/MDX/MDX.tsx @@ -1,21 +1,21 @@ -import Aside from '@components/Aside' -import Blockquote from '@components/Blockquote' -import Button from '@components/Button' -import Footnote from '@components/Footnote' -import { H1, H2, H3, H4, H5, H6 } from '@components/Headings' -import ImageCard from '@components/ImageCard' -import { Item, Ol, Ul } from '@components/Lists' -import Paragraph from '@components/Paragraph' -import Table from '@components/Table' -import { Anchor, Delete, Emphasis, Strong } from '@components/Texts' -import { dynamic } from '@components/utils' +import dynamic from 'next/dynamic' import Code from './MDXCode' import Divider from './MDXDivider' import Input from './MDXInput' import Pre from './MDXPre' +import Aside from '@/components/Aside' +import Blockquote from '@/components/Blockquote' +import Button from '@/components/Button' +import Footnote from '@/components/Footnote' +import { H1, H2, H3, H4, H5, H6 } from '@/components/Headings' +import ImageCard from '@/components/ImageCard' +import { Item, Ol, Ul } from '@/components/Lists' +import Paragraph from '@/components/Paragraph' +import Table from '@/components/Table' +import { Anchor, Delete, Emphasis, Strong } from '@/components/Texts' // eslint-disable-next-line ts/no-unsafe-assignment -- dynamic import. -const Editor = dynamic(() => import('@components/Editor')) as any +const Editor = dynamic(() => import('@/components/Editor')) as any const Headings = { h1: H1, diff --git a/components/MDX/MDXCode.tsx b/components/MDX/MDXCode.tsx index 9b73d0a82..f705ee837 100644 --- a/components/MDX/MDXCode.tsx +++ b/components/MDX/MDXCode.tsx @@ -1,4 +1,4 @@ -import { InlineCode } from '@components/CodeBlocks' +import { InlineCode } from '@/components/CodeBlocks' interface Props {} diff --git a/components/MDX/MDXDivider.tsx b/components/MDX/MDXDivider.tsx index b4a6c15f1..d5ce4e1c9 100644 --- a/components/MDX/MDXDivider.tsx +++ b/components/MDX/MDXDivider.tsx @@ -1,4 +1,4 @@ -import Divider from '@components/Divider' +import Divider from '@/components/Divider' function MDXDivider(): JSX.Element { return diff --git a/components/MDX/MDXInput.tsx b/components/MDX/MDXInput.tsx index 69786bbde..ae92e3061 100644 --- a/components/MDX/MDXInput.tsx +++ b/components/MDX/MDXInput.tsx @@ -1,5 +1,5 @@ -import Checkbox from '@components/Checkbox' -import Input from '@components/Input' +import Checkbox from '@/components/Checkbox' +import Input from '@/components/Input' interface Props { type?: string diff --git a/components/MDX/MDXPre.tsx b/components/MDX/MDXPre.tsx index 17d0eeb37..9af773203 100644 --- a/components/MDX/MDXPre.tsx +++ b/components/MDX/MDXPre.tsx @@ -1,4 +1,4 @@ -import { Pre } from '@components/CodeBlocks' +import { Pre } from '@/components/CodeBlocks' interface Props {} diff --git a/components/MetaHeader/MetaHeader.test.tsx b/components/MetaHeader/MetaHeader.test.tsx deleted file mode 100644 index 2cf1b1db1..000000000 --- a/components/MetaHeader/MetaHeader.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { render } from '@utils' -import { axe } from 'jest-axe' -import MetaHeader from './MetaHeader' - -describe('MetaHeader', () => { - it('should render correctly (snapshot)', () => { - const { container } = render() - - expect(container).toMatchSnapshot() - }) - - it('should render accessibility guidelines (AXE)', async () => { - const { container } = render() - - const a11y = await axe(container) - - expect(a11y).toHaveNoViolations() - }) -}) diff --git a/components/MetaHeader/MetaHeader.tsx b/components/MetaHeader/MetaHeader.tsx deleted file mode 100644 index 7ec4fcb9d..000000000 --- a/components/MetaHeader/MetaHeader.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import ErrorBoundary from '@components/ErrorBoundary' -import { siteConfig } from '@config' -import landingImage from '@images/landing.jpg' -import { NextSeo } from 'next-seo' -import Head from 'next/head' - -interface Props { - title?: string - description?: string - siteUrl?: string - themeColor?: string -} - -function MetaHeader({ - title = siteConfig.title, - description = siteConfig.description, - siteUrl = siteConfig.siteUrl, - themeColor = siteConfig.themeColor, -}: Props): JSX.Element { - return ( - - <> - - {title} - - - - - - ) -} - -export default MetaHeader diff --git a/components/MetaHeader/__snapshots__/MetaHeader.test.tsx.snap b/components/MetaHeader/__snapshots__/MetaHeader.test.tsx.snap deleted file mode 100644 index f017e0aa1..000000000 --- a/components/MetaHeader/__snapshots__/MetaHeader.test.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MetaHeader should render correctly (snapshot) 1`] = `
`; diff --git a/components/MetaHeader/index.ts b/components/MetaHeader/index.ts deleted file mode 100644 index 78baf5874..000000000 --- a/components/MetaHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './MetaHeader' diff --git a/components/Motion/Bounce.tsx b/components/Motion/Bounce.tsx index da7eb15da..9df8bd243 100644 --- a/components/Motion/Bounce.tsx +++ b/components/Motion/Bounce.tsx @@ -1,5 +1,8 @@ -import type { MotionProps } from '@components/utils' -import { cx, motion } from '@components/utils' +'use client' + +import cx from 'classnames' +import type { MotionProps } from 'framer-motion' +import { motion } from 'framer-motion' import type { ReactNode } from 'react' interface Props { diff --git a/components/Motion/Ease.test.tsx b/components/Motion/Ease.test.tsx index 604c8eb00..a600eac3f 100644 --- a/components/Motion/Ease.test.tsx +++ b/components/Motion/Ease.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import Ease from './Ease' +import { render } from '@/utils' describe('Ease', () => { it('should render correctly (snapshot)', () => { diff --git a/components/Motion/Ease.tsx b/components/Motion/Ease.tsx index 63ec166c8..b64f4bcdf 100644 --- a/components/Motion/Ease.tsx +++ b/components/Motion/Ease.tsx @@ -1,5 +1,7 @@ -import type { MotionProps } from '@components/utils' -import { motion } from '@components/utils' +'use client' + +import type { MotionProps } from 'framer-motion' +import { motion } from 'framer-motion' import type { ReactNode } from 'react' interface Props { diff --git a/components/Motion/Slide.tsx b/components/Motion/Slide.tsx index 18d7e9249..1e53fdc63 100644 --- a/components/Motion/Slide.tsx +++ b/components/Motion/Slide.tsx @@ -1,5 +1,7 @@ -import type { MotionProps } from '@components/utils' -import { motion } from '@components/utils' +'use client' + +import type { MotionProps } from 'framer-motion' +import { motion } from 'framer-motion' import type { ReactNode } from 'react' interface Props { diff --git a/components/Motion/Switch.test.tsx b/components/Motion/Switch.test.tsx index 88f7029a2..427b7f8ff 100644 --- a/components/Motion/Switch.test.tsx +++ b/components/Motion/Switch.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import Switch from './Switch' +import { render } from '@/utils' describe('Switch', () => { it('should render correctly (snapshot)', () => { diff --git a/components/Motion/Switch.tsx b/components/Motion/Switch.tsx index 3159357ea..317e3a5d7 100644 --- a/components/Motion/Switch.tsx +++ b/components/Motion/Switch.tsx @@ -1,5 +1,7 @@ -import type { MotionProps } from '@components/utils' -import { motion } from '@components/utils' +'use client' + +import type { MotionProps } from 'framer-motion' +import { motion } from 'framer-motion' import type { AriaRole } from 'react' interface Props { diff --git a/components/Motion/Toggle.test.tsx b/components/Motion/Toggle.test.tsx index a46c55dbb..2854bc000 100644 --- a/components/Motion/Toggle.test.tsx +++ b/components/Motion/Toggle.test.tsx @@ -1,5 +1,5 @@ -import { fireEvent, render, screen } from '@utils' import Toggle from './Toggle' +import { fireEvent, render, screen } from '@/utils' describe('Toggle', () => { const cases = [ diff --git a/components/Motion/Toggle.tsx b/components/Motion/Toggle.tsx index ced8b4907..6069cdf82 100644 --- a/components/Motion/Toggle.tsx +++ b/components/Motion/Toggle.tsx @@ -1,5 +1,8 @@ -import type { MotionProps } from '@components/utils' -import { AnimatePresence, cx, motion } from '@components/utils' +'use client' + +import cx from 'classnames' +import type { MotionProps } from 'framer-motion' +import { AnimatePresence, motion } from 'framer-motion' import type { KeyboardEvent, ReactNode } from 'react' import { useCallback } from 'react' import styles from './Toggle.module.css' diff --git a/components/NotFoundResult/NotFoundResult.test.tsx b/components/NotFoundResult/NotFoundResult.test.tsx index 1427c2ab3..ac3780b73 100644 --- a/components/NotFoundResult/NotFoundResult.test.tsx +++ b/components/NotFoundResult/NotFoundResult.test.tsx @@ -1,5 +1,5 @@ -import { render } from '@utils' import NotFoundResult from './NotFoundResult' +import { render } from '@/utils' describe('NotFoundResult', () => { it('should render correctly (snapshot)', () => { diff --git a/components/NotFoundResult/NotFoundResult.tsx b/components/NotFoundResult/NotFoundResult.tsx index afad3f1b7..731dbd399 100644 --- a/components/NotFoundResult/NotFoundResult.tsx +++ b/components/NotFoundResult/NotFoundResult.tsx @@ -1,5 +1,5 @@ -import Link from '@components/Link' -import Result from '@components/Result' +import Link from '@/components/Link' +import Result from '@/components/Result' interface Props { title?: string diff --git a/components/Paragraph/Paragraph.tsx b/components/Paragraph/Paragraph.tsx index a3c176052..b454c73e9 100644 --- a/components/Paragraph/Paragraph.tsx +++ b/components/Paragraph/Paragraph.tsx @@ -1,5 +1,5 @@ -import { cx } from '@components/utils' import { Typography } from 'antd' +import cx from 'classnames' import type { ReactNode } from 'react' import styles from './Paragraph.module.css' diff --git a/components/PostsGrid/DesktopPostsGrid.tsx b/components/PostsGrid/DesktopPostsGrid.tsx index d7f1f948a..594883d01 100644 --- a/components/PostsGrid/DesktopPostsGrid.tsx +++ b/components/PostsGrid/DesktopPostsGrid.tsx @@ -1,6 +1,6 @@ -import FlexContainer from '@components/FlexContainer' -import type { PostMeta } from '@types' import PostCard from './PostCard' +import FlexContainer from '@/components/FlexContainer' +import type { PostMeta } from '@/types' interface Props { posts: PostMeta[] diff --git a/components/PostsGrid/MobilePostsGrid.tsx b/components/PostsGrid/MobilePostsGrid.tsx index 408ba50e6..ce7c1c36f 100644 --- a/components/PostsGrid/MobilePostsGrid.tsx +++ b/components/PostsGrid/MobilePostsGrid.tsx @@ -1,6 +1,6 @@ -import FlexContainer from '@components/FlexContainer' -import type { PostMeta } from '@types' import PostCard from './PostCard' +import FlexContainer from '@/components/FlexContainer' +import type { PostMeta } from '@/types' interface Props { posts: PostMeta[] diff --git a/components/PostsGrid/PostCard.test.tsx b/components/PostsGrid/PostCard.test.tsx index 340f92d12..aecdc3567 100644 --- a/components/PostsGrid/PostCard.test.tsx +++ b/components/PostsGrid/PostCard.test.tsx @@ -1,7 +1,7 @@ -import mockData from '@mocks/data' -import { render } from '@utils' import { axe } from 'jest-axe' import PostCard from './PostCard' +import mockData from '@/mocks/data' +import { render } from '@/utils' describe('PostCard', () => { const mockBasePost = mockData.basePosts[0] diff --git a/components/PostsGrid/PostCard.tsx b/components/PostsGrid/PostCard.tsx index a9debaf77..c4cbe2600 100644 --- a/components/PostsGrid/PostCard.tsx +++ b/components/PostsGrid/PostCard.tsx @@ -1,13 +1,13 @@ -import Container from '@components/Container' -import { H2 } from '@components/Headings' -import { Calendar, Read } from '@components/Icons' -import Link from '@components/Link' -import { Slide } from '@components/Motion' -import Skeleton from '@components/Skeleton' -import { IconTag, LinkTag } from '@components/Tags' -import { cx } from '@components/utils' -import type { PostMeta } from '@types' +import cx from 'classnames' import styles from './PostCard.module.css' +import Container from '@/components/Container' +import { H2 } from '@/components/Headings' +import { Calendar, Read } from '@/components/Icons' +import Link from '@/components/Link' +import { Slide } from '@/components/Motion' +import Skeleton from '@/components/Skeleton' +import { IconTag, LinkTag } from '@/components/Tags' +import type { PostMeta } from '@/types' interface Props { post: PostMeta diff --git a/components/PostsGrid/PostsGrid.test.tsx b/components/PostsGrid/PostsGrid.test.tsx index f302a6ef2..663f8465c 100644 --- a/components/PostsGrid/PostsGrid.test.tsx +++ b/components/PostsGrid/PostsGrid.test.tsx @@ -1,6 +1,6 @@ -import mockData from '@mocks/data' -import { render } from '@utils' import PostsGrid from './PostsGrid' +import mockData from '@/mocks/data' +import { render } from '@/utils' describe('PostsGrid', () => { const mockPosts = mockData.posts diff --git a/components/PostsGrid/PostsGrid.tsx b/components/PostsGrid/PostsGrid.tsx index f71a997f1..20260632a 100644 --- a/components/PostsGrid/PostsGrid.tsx +++ b/components/PostsGrid/PostsGrid.tsx @@ -1,6 +1,6 @@ -import type { PostMeta } from '@types' import DesktopPostsGrid from './DesktopPostsGrid' import MobilePostsGrid from './MobilePostsGrid' +import type { PostMeta } from '@/types' interface Props { posts: PostMeta[] diff --git a/components/PostsList/PostsList.test.tsx b/components/PostsList/PostsList.test.tsx index 30f103028..bfb8ff4e0 100644 --- a/components/PostsList/PostsList.test.tsx +++ b/components/PostsList/PostsList.test.tsx @@ -1,7 +1,7 @@ -import mockData from '@mocks/data' -import { render } from '@utils' import { axe } from 'jest-axe' import PostsList from './PostsList' +import mockData from '@/mocks/data' +import { render } from '@/utils' describe('PostsList', () => { const mockPosts = mockData.posts diff --git a/components/PostsList/PostsList.tsx b/components/PostsList/PostsList.tsx index d85731255..185d41bec 100644 --- a/components/PostsList/PostsList.tsx +++ b/components/PostsList/PostsList.tsx @@ -1,7 +1,9 @@ -import Link from '@components/Link' -import { List } from '@components/Lists' -import type { PostMeta } from '@types' +'use client' + import styles from './PostsList.module.css' +import Link from '@/components/Link' +import { List } from '@/components/Lists' +import type { PostMeta } from '@/types' interface Props { posts: PostMeta[] diff --git a/components/PostsSearchBar/PostsSearchBar.test.tsx b/components/PostsSearchBar/PostsSearchBar.test.tsx index d3095576c..143365ff4 100644 --- a/components/PostsSearchBar/PostsSearchBar.test.tsx +++ b/components/PostsSearchBar/PostsSearchBar.test.tsx @@ -1,6 +1,6 @@ -import mockData from '@mocks/data' -import { fireEvent, render, screen } from '@utils' import PostsSearchBar from './PostsSearchBar' +import mockData from '@/mocks/data' +import { fireEvent, render, screen } from '@/utils' describe('PostsSearchBar', () => { const mockPosts = mockData.posts diff --git a/components/PostsSearchBar/PostsSearchBar.tsx b/components/PostsSearchBar/PostsSearchBar.tsx index 3ae09bb22..f29e88478 100644 --- a/components/PostsSearchBar/PostsSearchBar.tsx +++ b/components/PostsSearchBar/PostsSearchBar.tsx @@ -1,9 +1,11 @@ -import AutoComplete from '@components/AutoComplete' -import Input from '@components/Input' -import Link from '@components/Link' -import type { PostMeta } from '@types' +'use client' + import type { ReactNode } from 'react' import { useCallback, useState } from 'react' +import AutoComplete from '@/components/AutoComplete' +import Input from '@/components/Input' +import Link from '@/components/Link' +import type { PostMeta } from '@/types' interface Props { posts: PostMeta[] diff --git a/components/ProgressBarProvider.tsx b/components/ProgressBarProvider.tsx new file mode 100644 index 000000000..b6021b8f6 --- /dev/null +++ b/components/ProgressBarProvider.tsx @@ -0,0 +1,13 @@ +'use client' + +import { AppProgressBar as ProgressBar } from 'next-nprogress-bar' +import { siteConfig } from '@/config' + +export default function ProgressBarProvider({ children }: { children: React.ReactNode }) { + return ( + <> + {children} + + + ) +}; diff --git a/components/SandpackProvider.tsx b/components/SandpackProvider.tsx new file mode 100644 index 000000000..c493f1a41 --- /dev/null +++ b/components/SandpackProvider.tsx @@ -0,0 +1,20 @@ +'use client' + +import { getSandpackCssText } from '@codesandbox/sandpack-react' +import { useServerInsertedHTML } from 'next/navigation' + +/** + * Ensures CSSinJS styles are loaded server side. + */ +export default function SandPackCSS() { + useServerInsertedHTML(() => { + return ( +