From 71d133bb1c73031abbf4869bdd938e583b397773 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 4 Jan 2022 17:13:37 +0100 Subject: refactor: move Prism hook from layout to article page I will not use Prism elsewhere, so it makes more sense to call Prism only inside articles. --- src/components/Layouts/Layout.tsx | 18 +----------------- src/pages/article/[slug].tsx | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx index ac4a043..35e7d27 100644 --- a/src/components/Layouts/Layout.tsx +++ b/src/components/Layouts/Layout.tsx @@ -1,13 +1,9 @@ -import { ReactElement, ReactNode, useEffect } from 'react'; -import Prism from 'prismjs'; +import { ReactElement, ReactNode } from 'react'; import Footer from '@components/Footer/Footer'; import Header from '@components/Header/Header'; import Main from '@components/Main/Main'; import Breadcrumb from '@components/Breadcrumb/Breadcrumb'; import { t } from '@lingui/macro'; -import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism'; -import { useRouter } from 'next/router'; -import { config } from '@config/website'; const Layout = ({ children, @@ -16,18 +12,6 @@ const Layout = ({ children: ReactNode; isHome?: boolean; }) => { - const router = useRouter(); - const locale = router.locale ? router.locale : config.defaultLocale; - - useEffect(() => { - addPrismClasses(); - Prism.highlightAll(); - }); - - useEffect(() => { - translateCopyButton(locale); - }, [locale]); - return ( <> {t`Skip to content`} diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index 54391fc..493f061 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -5,14 +5,19 @@ import PostFooter from '@components/PostFooter/PostFooter'; import PostHeader from '@components/PostHeader/PostHeader'; import Sharing from '@components/Sharing/Sharing'; import ToC from '@components/ToC/ToC'; +import { config } from '@config/website'; import { t } from '@lingui/macro'; import { getAllPostsSlug, getPostBySlug } from '@services/graphql/queries'; import { NextPageWithLayout } from '@ts/types/app'; import { ArticleProps } from '@ts/types/articles'; import { loadTranslation } from '@utils/helpers/i18n'; +import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; +import { useRouter } from 'next/router'; +import Prism from 'prismjs'; import { ParsedUrlQuery } from 'querystring'; +import { useEffect } from 'react'; const SingleArticle: NextPageWithLayout = ({ post }) => { const { @@ -27,6 +32,18 @@ const SingleArticle: NextPageWithLayout = ({ post }) => { title, } = post; + const router = useRouter(); + const locale = router.locale ? router.locale : config.defaultLocale; + + useEffect(() => { + addPrismClasses(); + Prism.highlightAll(); + }); + + useEffect(() => { + translateCopyButton(locale); + }, [locale]); + return ( <> -- cgit v1.2.3