refactor: rewrite Prism hooks and providers

It avoid some hydratation errors on project pages (not in article
however) and the hooks are now reusable.

14 files changed, 346 insertions, 291 deletions

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>
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 54b8d6e..8ff44d5 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -20,7 +20,6 @@ import CommentsList, {
 import TableOfContents from '@components/organisms/widgets/table-of-contents';
 import { type SendCommentVars } from '@services/graphql/api';
 import { sendComment } from '@services/graphql/comments';
-import useCodeBlocksTheme from '@utils/hooks/use-code-blocks-theme';
 import useIsMounted from '@utils/hooks/use-is-mounted';
 import Script from 'next/script';
 import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
@@ -181,11 +180,9 @@ const PageLayout: FC<PageLayoutProps> = ({
    * @param {MetaData} meta - The metadata.
    */
   const hasMeta = (meta: MetaData) => {
-    return Object.values(meta).every((value) => value === null);
+    return Object.values(meta).every((value) => value);
   };
 
-  useCodeBlocksTheme(bodyRef);
-
   return (
     <>
       <Script
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index a3df43b..7abbabc 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,11 +18,11 @@ import {
   type NextPageWithLayout,
 } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
-import useAddPrismClassAttr from '@utils/hooks/use-add-prism-class-attr';
+import useAddClassName from '@utils/hooks/use-add-classname';
+import useAttributes from '@utils/hooks/use-attributes';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
-import usePrismPlugins, {
-  type PrismPlugin,
-} from '@utils/hooks/use-prism-plugins';
+import usePrism, { type OptionalPrismPlugin } from '@utils/hooks/use-prism';
+import useQuerySelectorAll from '@utils/hooks/use-query-selector-all';
 import useReadingTime from '@utils/hooks/use-reading-time';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticPaths, GetStaticProps } from 'next';
@@ -199,14 +199,40 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
     });
   };
 
-  const prismPlugins: PrismPlugin[] = ['command-line', 'line-numbers'];
-  const { pluginsAttribute, pluginsClassName } = usePrismPlugins(prismPlugins);
-  useAddPrismClassAttr({
-    attributes: {
-      'data-filter-output': '#output#"',
-    },
-    classNames: pluginsClassName,
-  });
+  const prismPlugins: OptionalPrismPlugin[] = ['command-line', 'line-numbers'];
+  const { attributes, className } = usePrism({ plugins: prismPlugins });
+  const lineNumbersClassName = className
+    .replace('command-line', '')
+    .replace(/\s\s+/g, ' ');
+  const commandLineClassName = className
+    .replace('line-numbers', '')
+    .replace(/\s\s+/g, ' ');
+
+  /**
+   * Replace a string with Prism classnames and attributes.
+   *
+   * @param {string} str - The found string.
+   * @returns {string} The classes and attributes.
+   */
+  const prismClassNameReplacer = (str: string): string => {
+    const wpBlockClassName = 'wp-block-code';
+    const languageArray = str.match(/language-[^\s|"]+/);
+    const languageClassName = languageArray ? `${languageArray[0]}` : '';
+
+    if (
+      str.includes('command-line') ||
+      (!str.includes('command-line') && str.includes('language-bash'))
+    ) {
+      return `class="${wpBlockClassName} ${commandLineClassName}${languageClassName}" tabindex="0" data-filter-output="#output#`;
+    }
+
+    return `class="${wpBlockClassName} ${lineNumbersClassName}${languageClassName}" tabindex="0`;
+  };
+
+  const contentWithPrismClasses = content.replaceAll(
+    /class="wp-block-code[^"]+/gm,
+    prismClassNameReplacer
+  );
 
   return (
     <>
@@ -226,7 +252,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
       <PageLayout
         allowComments={true}
         bodyAttributes={{
-          ...(pluginsAttribute as HTMLAttributes<HTMLDivElement>),
+          ...(attributes as HTMLAttributes<HTMLDivElement>),
         }}
         bodyClassName={styles.body}
         breadcrumb={breadcrumbItems}
@@ -254,7 +280,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
           />,
         ]}
       >
-        {content}
+        {contentWithPrismClasses}
       </PageLayout>
     </>
   );
diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss
index 025e0c0..5412bbd 100644
--- a/src/styles/pages/partials/_article-prism.scss
+++ b/src/styles/pages/partials/_article-prism.scss
@@ -238,7 +238,7 @@
       > span {
         &::before {
           display: block;
-          content: "";
+          content: " ";
         }
 
         &[data-user]::before {
diff --git a/src/utils/helpers/strings.ts b/src/utils/helpers/strings.ts
index 5d90161..1af0ca2 100644
--- a/src/utils/helpers/strings.ts
+++ b/src/utils/helpers/strings.ts
@@ -27,3 +27,13 @@ export const slugify = (text: string): string => {
 export const capitalize = (text: string): string => {
   return text.replace(/^\w/, (firstLetter) => firstLetter.toUpperCase());
 };
+
+/**
+ * Convert a text from kebab case (foo-bar) to camel case (fooBar).
+ *
+ * @param {string} text - A text to transform.
+ * @returns {string} The text in camel case.
+ */
+export const fromKebabCaseToCamelCase = (text: string): string => {
+  return text.replace(/-./g, (x) => x[1].toUpperCase());
+};
diff --git a/src/utils/hooks/use-add-classname.tsx b/src/utils/hooks/use-add-classname.tsx
new file mode 100644
index 0000000..0584084
--- /dev/null
+++ b/src/utils/hooks/use-add-classname.tsx
@@ -0,0 +1,34 @@
+import { useCallback, useEffect } from 'react';
+
+export type UseAddClassNameProps = {
+  className: string;
+  element?: HTMLElement;
+  elements?: NodeListOf<HTMLElement> | HTMLElement[];
+};
+
+/**
+ * Add className to the given element(s).
+ *
+ * @param {UseAddClassNameProps} props - An object with classnames and one or more elements.
+ */
+const useAddClassName = ({
+  className,
+  element,
+  elements,
+}: UseAddClassNameProps) => {
+  const classNames = className.split(' ').filter((string) => string !== '');
+
+  const setClassName = useCallback(
+    (el: HTMLElement) => {
+      el.classList.add(...classNames);
+    },
+    [classNames]
+  );
+
+  useEffect(() => {
+    if (element) setClassName(element);
+    if (elements && elements.length > 0) elements.forEach(setClassName);
+  }, [element, elements, setClassName]);
+};
+
+export default useAddClassName;
diff --git a/src/utils/hooks/use-add-prism-class-attr.tsx b/src/utils/hooks/use-add-prism-class-attr.tsx
deleted file mode 100644
index 7d33cc2..0000000
--- a/src/utils/hooks/use-add-prism-class-attr.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-export type AttributesMap = {
-  [key: string]: string;
-};
-
-export type useAddPrismClassAttrProps = {
-  attributes?: AttributesMap;
-  classNames?: string;
-};
-
-/**
- * Add classnames and/or attributes to pre elements.
- *
- * @param props - An object of attributes and classnames.
- */
-const useAddPrismClassAttr = ({
-  attributes,
-  classNames,
-}: useAddPrismClassAttrProps) => {
-  const [elements, setElements] = useState<HTMLPreElement[]>([]);
-
-  useEffect(() => {
-    const targetElements = document.querySelectorAll('pre');
-    setElements(Array.from(targetElements));
-  }, []);
-
-  const setClassNameAndAttributes = useCallback(
-    (array: HTMLElement[]) => {
-      array.forEach((el) => {
-        if (classNames) {
-          const classNamesArray = classNames.split(' ');
-          const isCommandLine = el.classList.contains('command-line');
-          const removedClassName = isCommandLine
-            ? 'line-numbers'
-            : 'command-line';
-          const filteredClassNames = classNamesArray.filter(
-            (className) => className !== removedClassName
-          );
-          filteredClassNames.forEach((className) =>
-            el.classList.add(className)
-          );
-        }
-
-        if (attributes) {
-          for (const [key, value] of Object.entries(attributes)) {
-            el.setAttribute(key, value);
-          }
-        }
-      });
-    },
-    [attributes, classNames]
-  );
-
-  useEffect(() => {
-    if (elements.length > 0) setClassNameAndAttributes(elements);
-  }, [elements, setClassNameAndAttributes]);
-};
-
-export default useAddPrismClassAttr;
diff --git a/src/utils/hooks/use-attributes.tsx b/src/utils/hooks/use-attributes.tsx
index 97a7b43..6d18048 100644
--- a/src/utils/hooks/use-attributes.tsx
+++ b/src/utils/hooks/use-attributes.tsx
@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+import { fromKebabCaseToCamelCase } from '@utils/helpers/strings';
+import { useCallback, useEffect } from 'react';
 
 export type useAttributesProps = {
   /**
@@ -6,6 +7,10 @@ export type useAttributesProps = {
    */
   element?: HTMLElement;
   /**
+   * A node list of HTML Element.
+   */
+  elements?: NodeListOf<HTMLElement> | HTMLElement[];
+  /**
    * The attribute name.
    */
   attribute: string;
@@ -20,14 +25,28 @@ export type useAttributesProps = {
  *
  * @param props - An object with element, attribute name and value.
  */
-const useAttributes = ({ element, attribute, value }: useAttributesProps) => {
+const useAttributes = ({
+  element,
+  elements,
+  attribute,
+  value,
+}: useAttributesProps) => {
+  const setAttribute = useCallback(
+    (el: HTMLElement) => {
+      if (attribute.startsWith('data')) {
+        el.setAttribute(attribute, value);
+      } else {
+        const camelCaseAttribute = fromKebabCaseToCamelCase(attribute);
+        el.dataset[camelCaseAttribute] = value;
+      }
+    },
+    [attribute, value]
+  );
+
   useEffect(() => {
-    if (element) {
-      element.dataset[attribute] = value;
-    } else {
-      document.documentElement.dataset[attribute] = value;
-    }
-  }, [attribute, element, value]);
+    if (element) setAttribute(element);
+    if (elements && elements.length > 0) elements.forEach(setAttribute);
+  }, [element, elements, setAttribute]);
 };
 
 export default useAttributes;
diff --git a/src/utils/hooks/use-code-blocks-theme.tsx b/src/utils/hooks/use-code-blocks-theme.tsx
deleted file mode 100644
index beb7b29..0000000
--- a/src/utils/hooks/use-code-blocks-theme.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { usePrismTheme } from '@utils/providers/prism-theme';
-import { useRouter } from 'next/router';
-import { RefObject, useEffect, useState } from 'react';
-import useIsMounted from './use-is-mounted';
-
-const useCodeBlocksTheme = (el: RefObject<HTMLDivElement>) => {
-  const [preElements, setPreElements] = useState<NodeListOf<HTMLPreElement>>();
-  const isMounted = useIsMounted(el);
-  const { setCodeBlocks } = usePrismTheme();
-  const { asPath } = useRouter();
-
-  useEffect(() => {
-    const result = document.querySelectorAll<HTMLPreElement>('pre');
-    setPreElements(result);
-  }, [asPath]);
-
-  useEffect(() => {
-    isMounted && preElements && setCodeBlocks(preElements);
-  }, [isMounted, preElements, setCodeBlocks]);
-};
-
-export default useCodeBlocksTheme;
diff --git a/src/utils/hooks/use-prism-plugins.tsx b/src/utils/hooks/use-prism-plugins.tsx
deleted file mode 100644
index c4959ac..0000000
--- a/src/utils/hooks/use-prism-plugins.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Prism from 'prismjs';
-import { useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-
-export type PrismPlugin =
-  | 'autoloader'
-  | 'color-scheme'
-  | 'command-line'
-  | 'copy-to-clipboard'
-  | 'diff-highlight'
-  | 'inline-color'
-  | 'line-highlight'
-  | 'line-numbers'
-  | 'match-braces'
-  | 'normalize-whitespace'
-  | 'show-language'
-  | 'toolbar';
-
-/**
- * Import and configure all given Prism plugins.
- *
- * @param {PrismPlugin[]} prismPlugins - The Prism plugins to activate.
- */
-const loadPrismPlugins = async (prismPlugins: PrismPlugin[]) => {
-  for (const plugin of prismPlugins) {
-    try {
-      if (plugin === 'color-scheme') {
-        await import(`@utils/plugins/prism-${plugin}`);
-      } else {
-        await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
-      }
-
-      if (plugin === 'autoloader') {
-        Prism.plugins.autoloader.languages_path = '/prism/';
-      }
-    } catch (error) {
-      console.error(
-        'usePrismPlugins: an error occurred while loading Prism plugins.'
-      );
-      console.error(error);
-    }
-  }
-};
-
-/**
- * Load both the given Prism plugins and the default plugins.
- *
- * @param {PrismPlugin[]} plugins - The Prism plugins to activate.
- */
-const usePrismPlugins = (plugins: PrismPlugin[]) => {
-  const intl = useIntl();
-
-  const copyText = intl.formatMessage({
-    defaultMessage: 'Copy',
-    description: 'usePrismPlugins: copy button text (not clicked)',
-    id: 'FIE/eC',
-  });
-  const copiedText = intl.formatMessage({
-    defaultMessage: 'Copied!',
-    description: 'usePrismPlugins: copy button text (clicked)',
-    id: 'MzLdEl',
-  });
-  const errorText = intl.formatMessage({
-    defaultMessage: 'Use Ctrl+c to copy',
-    description: 'usePrismPlugins: copy button error text',
-    id: '0XePFn',
-  });
-  const darkTheme = intl.formatMessage({
-    defaultMessage: 'Dark Theme 🌙',
-    description: 'usePrismPlugins: toggle dark theme button text',
-    id: 'jo9vr5',
-  });
-  const lightTheme = intl.formatMessage({
-    defaultMessage: 'Light Theme 🌞',
-    description: 'usePrismPlugins: toggle light theme button text',
-    id: '6EUEtH',
-  });
-
-  const attributes = {
-    'data-prismjs-copy': copyText,
-    'data-prismjs-copy-success': copiedText,
-    'data-prismjs-copy-error': errorText,
-    'data-prismjs-color-scheme-dark': darkTheme,
-    'data-prismjs-color-scheme-light': lightTheme,
-  };
-
-  const defaultPlugins: PrismPlugin[] = useMemo(
-    () => [
-      'toolbar',
-      'autoloader',
-      'show-language',
-      'copy-to-clipboard',
-      'color-scheme',
-      'match-braces',
-      'normalize-whitespace',
-    ],
-    []
-  );
-
-  useEffect(() => {
-    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
-      Prism.highlightAll();
-    });
-  }, [defaultPlugins, plugins]);
-
-  const defaultPluginsClasses = 'match-braces';
-  const pluginsClasses = plugins.join(' ');
-
-  return {
-    pluginsAttribute: attributes,
-    pluginsClassName: `${defaultPluginsClasses} ${pluginsClasses}`,
-  };
-};
-
-export default usePrismPlugins;
diff --git a/src/utils/hooks/use-prism.tsx b/src/utils/hooks/use-prism.tsx
new file mode 100644
index 0000000..ef1a4c8
--- /dev/null
+++ b/src/utils/hooks/use-prism.tsx
@@ -0,0 +1,182 @@
+import Prism from 'prismjs';
+import { useEffect, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+const PRISM_PLUGINS = [
+  'autoloader',
+  'color-scheme',
+  'command-line',
+  'copy-to-clipboard',
+  'diff-highlight',
+  'inline-color',
+  'line-highlight',
+  'line-numbers',
+  'match-braces',
+  'normalize-whitespace',
+  'show-language',
+  'toolbar',
+] as const;
+
+export type PrismPlugin = typeof PRISM_PLUGINS[number];
+
+export type DefaultPrismPlugin = Extract<
+  PrismPlugin,
+  | 'autoloader'
+  | 'color-scheme'
+  | 'copy-to-clipboard'
+  | 'match-braces'
+  | 'normalize-whitespace'
+  | 'show-language'
+  | 'toolbar'
+>;
+
+export type OptionalPrismPlugin = Exclude<PrismPlugin, DefaultPrismPlugin>;
+
+export type PrismLanguage =
+  | 'apacheconf'
+  | 'bash'
+  | 'css'
+  | 'diff'
+  | 'docker'
+  | 'editorconfig'
+  | 'ejs'
+  | 'git'
+  | 'graphql'
+  | 'html'
+  | 'ignore'
+  | 'ini'
+  | 'javascript'
+  | 'jsdoc'
+  | 'json'
+  | 'jsx'
+  | 'makefile'
+  | 'markup'
+  | 'php'
+  | 'phpdoc'
+  | 'regex'
+  | 'scss'
+  | 'shell-session'
+  | 'smarty'
+  | 'tcl'
+  | 'toml'
+  | 'tsx'
+  | 'twig'
+  | 'yaml';
+
+export type PrismAttributes = {
+  'data-prismjs-copy': string;
+  'data-prismjs-copy-success': string;
+  'data-prismjs-copy-error': string;
+  'data-prismjs-color-scheme-dark': string;
+  'data-prismjs-color-scheme-light': string;
+};
+
+export type UsePrismProps = {
+  language?: PrismLanguage;
+  plugins: OptionalPrismPlugin[];
+};
+
+export type UsePrismReturn = {
+  attributes: PrismAttributes;
+  className: string;
+};
+
+/**
+ * Import and configure all given Prism plugins.
+ *
+ * @param {PrismPlugin[]} plugins - The Prism plugins to activate.
+ */
+const loadPrismPlugins = async (plugins: PrismPlugin[]) => {
+  for (const plugin of plugins) {
+    try {
+      if (plugin === 'color-scheme') {
+        await import(`@utils/plugins/prism-${plugin}`);
+      } else {
+        await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
+      }
+
+      if (plugin === 'autoloader') {
+        Prism.plugins.autoloader.languages_path = '/prism/';
+      }
+    } catch (error) {
+      console.error('usePrism: an error occurred while loading Prism plugins.');
+      console.error(error);
+    }
+  }
+};
+
+/**
+ * Use Prism and its plugins.
+ *
+ * @param {UsePrismProps} props - An object of options.
+ * @returns {UsePrismReturn} An object of data.
+ */
+const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => {
+  /**
+   * The order matter. Toolbar must be loaded before some other plugins.
+   */
+  const defaultPlugins: DefaultPrismPlugin[] = useMemo(
+    () => [
+      'toolbar',
+      'autoloader',
+      'show-language',
+      'copy-to-clipboard',
+      'color-scheme',
+      'match-braces',
+      'normalize-whitespace',
+    ],
+    []
+  );
+
+  useEffect(() => {
+    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
+      Prism.highlightAll();
+    });
+  }, [defaultPlugins, plugins]);
+
+  const defaultClassName = 'match-braces';
+  const languageClassName = language ? `language-${language}` : '';
+  const pluginsClassName = plugins.join(' ');
+  const className = `${defaultClassName} ${pluginsClassName} ${languageClassName}`;
+
+  const intl = useIntl();
+  const copyText = intl.formatMessage({
+    defaultMessage: 'Copy',
+    description: 'usePrism: copy button text (not clicked)',
+    id: '6GySNl',
+  });
+  const copiedText = intl.formatMessage({
+    defaultMessage: 'Copied!',
+    description: 'usePrism: copy button text (clicked)',
+    id: 'nsw6Th',
+  });
+  const errorText = intl.formatMessage({
+    defaultMessage: 'Use Ctrl+c to copy',
+    description: 'usePrism: copy button error text',
+    id: 'lKhTGM',
+  });
+  const darkTheme = intl.formatMessage({
+    defaultMessage: 'Dark Theme 🌙',
+    description: 'usePrism: toggle dark theme button text',
+    id: 'QLisK6',
+  });
+  const lightTheme = intl.formatMessage({
+    defaultMessage: 'Light Theme 🌞',
+    description: 'usePrism: toggle light theme button text',
+    id: 'hHVgW3',
+  });
+  const attributes = {
+    'data-prismjs-copy': copyText,
+    'data-prismjs-copy-success': copiedText,
+    'data-prismjs-copy-error': errorText,
+    'data-prismjs-color-scheme-dark': darkTheme,
+    'data-prismjs-color-scheme-light': lightTheme,
+  };
+
+  return {
+    attributes,
+    className,
+  };
+};
+
+export default usePrism;
diff --git a/src/utils/hooks/use-query-selector-all.tsx b/src/utils/hooks/use-query-selector-all.tsx
index dbeec90..6ac8a08 100644
--- a/src/utils/hooks/use-query-selector-all.tsx
+++ b/src/utils/hooks/use-query-selector-all.tsx
@@ -1,14 +1,22 @@
+import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
+/**
+ * Use `document.querySelectorAll`.
+ *
+ * @param {string} query - A query.
+ * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list.
+ */
 const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
   query: string
-) => {
+): NodeListOf<HTMLElementTagNameMap[T]> | undefined => {
   const [elements, setElements] =
     useState<NodeListOf<HTMLElementTagNameMap[T]>>();
+  const { asPath } = useRouter();
 
   useEffect(() => {
     setElements(document.querySelectorAll(query));
-  }, [query]);
+  }, [asPath, query]);
 
   return elements;
 };
diff --git a/src/utils/providers/prism-theme.tsx b/src/utils/providers/prism-theme.tsx
index 23a2a36..dd8feb7 100644
--- a/src/utils/providers/prism-theme.tsx
+++ b/src/utils/providers/prism-theme.tsx
@@ -1,4 +1,6 @@
-import { LocalStorage } from '@services/local-storage';
+import useAttributes from '@utils/hooks/use-attributes';
+import useLocalStorage from '@utils/hooks/use-local-storage';
+import useQuerySelectorAll from '@utils/hooks/use-query-selector-all';
 import {
   createContext,
   FC,
@@ -10,7 +12,7 @@ import {
 } from 'react';
 
 export type PrismTheme = 'dark' | 'light' | 'system';
-export type ResolvedPrismTheme = 'dark' | 'light';
+export type ResolvedPrismTheme = Exclude<PrismTheme, 'system'>;
 
 export type UsePrismThemeProps = {
   themes: PrismTheme[];
@@ -18,7 +20,6 @@ export type UsePrismThemeProps = {
   setTheme: (theme: PrismTheme) => void;
   resolvedTheme?: ResolvedPrismTheme;
   codeBlocks?: NodeListOf<HTMLPreElement>;
-  setCodeBlocks: (codeBlocks: NodeListOf<HTMLPreElement>) => void;
 };
 
 export type PrismThemeProviderProps = {
@@ -33,14 +34,16 @@ export const PrismThemeContext = createContext<UsePrismThemeProps>({
   setTheme: (_) => {
     // This is intentional.
   },
-  setCodeBlocks: (_) => {
-    // This is intentional.
-  },
 });
 
 export const usePrismTheme = () => useContext(PrismThemeContext);
 
-const prefersDarkScheme = () => {
+/**
+ * Check if user prefers dark color scheme.
+ *
+ * @returns {boolean|undefined} True if `prefers-color-scheme` is set to `dark`.
+ */
+const prefersDarkScheme = (): boolean | undefined => {
   if (typeof window === 'undefined') return;
 
   return (
@@ -49,40 +52,35 @@ const prefersDarkScheme = () => {
   );
 };
 
+/**
+ * Check if a given string is a Prism theme name.
+ *
+ * @param {string} theme - A string.
+ * @returns {boolean} True if the given string match a Prism theme name.
+ */
 const isValidTheme = (theme: string): boolean => {
   return theme === 'dark' || theme === 'light' || theme === 'system';
 };
 
-const getTheme = (key: string): PrismTheme | undefined => {
-  if (typeof window === 'undefined') return undefined;
-  const storageValue = LocalStorage.get<string>(key);
-
-  return storageValue && isValidTheme(storageValue)
-    ? (storageValue as PrismTheme)
-    : undefined;
-};
-
 export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
   attribute = 'data-prismjs-color-scheme-current',
   storageKey = 'prismjs-color-scheme',
   themes = ['dark', 'light', 'system'],
   children,
 }) => {
+  /**
+   * Retrieve the theme to use depending on `prefers-color-scheme`.
+   */
   const getThemeFromSystem = useCallback(() => {
     return prefersDarkScheme() ? 'dark' : 'light';
   }, []);
 
-  const [prismTheme, setPrismTheme] = useState<PrismTheme>(
-    getTheme(storageKey) || 'system'
-  );
-
-  const updateTheme = (theme: PrismTheme) => {
-    setPrismTheme(theme);
-  };
+  const { value: prismTheme, setValue: setPrismTheme } =
+    useLocalStorage<PrismTheme>(storageKey, 'system');
 
   useEffect(() => {
-    LocalStorage.set(storageKey, prismTheme);
-  }, [prismTheme, storageKey]);
+    if (!isValidTheme(prismTheme)) setPrismTheme('system');
+  }, [prismTheme, setPrismTheme]);
 
   const [resolvedTheme, setResolvedTheme] = useState<ResolvedPrismTheme>();
 
@@ -109,22 +107,12 @@ export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
         .removeEventListener('change', updateResolvedTheme);
   }, [updateResolvedTheme]);
 
-  const [preTags, setPreTags] = useState<NodeListOf<HTMLPreElement>>();
-
-  const updatePreTags = useCallback((tags: NodeListOf<HTMLPreElement>) => {
-    setPreTags(tags);
-  }, []);
-
-  const updatePreTagsAttribute = useCallback(() => {
-    preTags?.forEach((pre) => {
-      pre.setAttribute(attribute, prismTheme);
-    });
-  }, [attribute, preTags, prismTheme]);
-
-  useEffect(() => {
-    updatePreTagsAttribute();
-  }, [updatePreTagsAttribute, prismTheme]);
+  const preTags = useQuerySelectorAll<'pre'>('pre');
+  useAttributes({ elements: preTags, attribute, value: prismTheme });
 
+  /**
+   * Listen for changes on pre attributes and update theme.
+   */
   const listenAttributeChange = useCallback(
     (pre: HTMLPreElement) => {
       var observer = new MutationObserver(function (mutations) {
@@ -139,15 +127,12 @@ export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
         attributeFilter: [attribute],
       });
     },
-    [attribute]
+    [attribute, setPrismTheme]
   );
 
   useEffect(() => {
     if (!preTags) return;
-
-    preTags.forEach((pre) => {
-      listenAttributeChange(pre);
-    });
+    preTags.forEach(listenAttributeChange);
   }, [preTags, listenAttributeChange]);
 
   return (
@@ -155,9 +140,8 @@ export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
       value={{
         themes,
         theme: prismTheme,
-        setTheme: updateTheme,
+        setTheme: setPrismTheme,
         codeBlocks: preTags,
-        setCodeBlocks: updatePreTags,
         resolvedTheme,
       }}
     >