From 1e370817560c905a0a3520e245c317f308b6a5e7 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 1 Feb 2022 15:15:55 +0100
Subject: chore: add a new settings to handle prism theme from toolbar

---
 src/pages/_app.tsx           |  5 ++++-
 src/pages/article/[slug].tsx | 10 ++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'src/pages')

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 913861e..6df1a1d 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import { MatomoProvider } from '@datapunt/matomo-tracker-react';
 import { AppPropsWithLayout } from '@ts/types/app';
 import { settings } from '@utils/config';
 import { instance } from '@utils/helpers/matomo';
+import { PrismThemeProvider } from '@utils/providers/prism';
 import { ThemeProvider } from 'next-themes';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';
@@ -24,7 +25,9 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
           enableColorScheme={true}
           enableSystem={true}
         >
-          {getLayout(<Component {...pageProps} />)}
+          <PrismThemeProvider>
+            {getLayout(<Component {...pageProps} />)}
+          </PrismThemeProvider>
         </ThemeProvider>
       </IntlProvider>
     </MatomoProvider>
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 1799fb0..d0ea68a 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -21,6 +21,7 @@ import { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts';
 import '@utils/plugins/prism-color-scheme';
+import { usePrismTheme } from '@utils/providers/prism';
 
 const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
   const {
@@ -61,6 +62,15 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
     translateCopyButton(locale, intl);
   }, [intl, locale]);
 
+  const { setCodeBlocks } = usePrismTheme();
+
+  useEffect(() => {
+    const allPre: NodeListOf<HTMLPreElement> = document.querySelectorAll(
+      'pre[data-prismjs-color-scheme'
+    );
+    setCodeBlocks(allPre);
+  }, [setCodeBlocks, router.asPath]);
+
   const webpageSchema: WebPage = {
     '@id': `${articleUrl}`,
     '@type': 'WebPage',
-- 
cgit v1.2.3