From bbd63400f94b43fde04449e0c71d14763d893e6a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 19 May 2022 19:46:24 +0200
Subject: refactor: rewrite Prism hooks and providers

It avoid some hydratation errors on project pages (not in article
however) and the hooks are now reusable.
---
 src/components/molecules/forms/motion-toggle.tsx |  3 ++-
 src/components/molecules/layout/code.tsx         | 25 ++++++++----------------
 2 files changed, 10 insertions(+), 18 deletions(-)

(limited to 'src/components/molecules')

diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index e3bb11a..cbe38fe 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -33,7 +33,8 @@ const MotionToggle: FC<MotionToggleProps> = ({
     value
   );
   useAttributes({
-    attribute: 'reducedMotion',
+    element: document.documentElement || undefined,
+    attribute: 'reduced-motion',
     value: `${isReduced}`,
   });
 
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 2959ae5..f5b60b9 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,7 +1,5 @@
-import usePrismPlugins, {
-  type PrismPlugin,
-} from '@utils/hooks/use-prism-plugins';
-import { FC } from 'react';
+import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism';
+import { FC, useRef } from 'react';
 import styles from './code.module.scss';
 
 export type PrismLanguage =
@@ -35,15 +33,6 @@ export type PrismLanguage =
   | 'twig'
   | 'yaml';
 
-export type OptionalPrismPlugin = Extract<
-  PrismPlugin,
-  | 'command-line'
-  | 'diff-highlight'
-  | 'inline-color'
-  | 'line-highlight'
-  | 'line-numbers'
->;
-
 export type CodeProps = {
   /**
    * The code to highlight.
@@ -79,17 +68,19 @@ const Code: FC<CodeProps> = ({
   plugins = [],
   outputPattern = '#output#',
 }) => {
-  const { pluginsAttribute, pluginsClassName } = usePrismPlugins(plugins);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { attributes, className } = usePrism({ language, plugins });
 
   const outputAttribute = filterOutput
     ? { 'data-filter-output': outputPattern }
     : {};
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} ref={wrapperRef}>
       <pre
-        className={`language-${language} ${pluginsClassName}`}
-        {...pluginsAttribute}
+        className={className}
+        tabIndex={0}
+        {...attributes}
         {...outputAttribute}
       >
         <code className={`language-${language}`}>{children}</code>
-- 
cgit v1.2.3