refactor: use named export for everything except pages

Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.

35 files changed, 114 insertions, 132 deletions

diff --git a/src/utils/helpers/author.ts b/src/utils/helpers/author.ts
index 2892524..a5e9bc6 100644
--- a/src/utils/helpers/author.ts
+++ b/src/utils/helpers/author.ts
@@ -1,5 +1,4 @@
-import { type Author, type ContentKind } from '../../types/app';
-import { type RawAuthor } from '../../types/raw-data';
+import { type Author, type ContentKind, type RawAuthor } from '../../types';
 
 /**
  * Convert author raw data to regular data.
diff --git a/src/utils/helpers/images.ts b/src/utils/helpers/images.ts
index bff50c3..6e0c2c5 100644
--- a/src/utils/helpers/images.ts
+++ b/src/utils/helpers/images.ts
@@ -1,5 +1,4 @@
-import { Image } from '../../types/app';
-import { RawCover } from '../../types/raw-data';
+import { type Image, type RawCover } from '../../types';
 
 /**
  * Retrieve an Image object from raw data.
diff --git a/src/utils/helpers/index.ts b/src/utils/helpers/index.ts
new file mode 100644
index 0000000..1a35583
--- /dev/null
+++ b/src/utils/helpers/index.ts
@@ -0,0 +1,7 @@
+export * from './author';
+export * from './dates';
+export * from './images';
+export * from './pages';
+export * from './rss';
+export * from './schema-org';
+export * from './strings';
diff --git a/src/utils/helpers/pages.ts b/src/utils/helpers/pages.ts
index d6d44d2..6b27b6d 100644
--- a/src/utils/helpers/pages.ts
+++ b/src/utils/helpers/pages.ts
@@ -1,13 +1,13 @@
-import { type Post } from '../../components/organisms/layout/posts-list';
-import { type LinksListItems } from '../../components/organisms/widgets/links-list-widget';
-import { getArticleFromRawData } from '../../services/graphql/articles';
-import { type Article, type PageLink } from '../../types/app';
-import { EdgesResponse } from '../../types/graphql/queries';
+import { type LinksListItems, type Post } from '../../components';
+import { getArticleFromRawData } from '../../services/graphql';
 import {
+  type Article,
+  type EdgesResponse,
+  type PageLink,
   type RawArticle,
   type RawThematicPreview,
   type RawTopicPreview,
-} from '../../types/raw-data';
+} from '../../types';
 import { getImageFromRawData } from './images';
 
 /**
diff --git a/src/utils/helpers/rss.ts b/src/utils/helpers/rss.ts
index 41a036c..28f3c7b 100644
--- a/src/utils/helpers/rss.ts
+++ b/src/utils/helpers/rss.ts
@@ -3,8 +3,8 @@ import {
   getArticleFromRawData,
   getArticles,
   getTotalArticles,
-} from '../../services/graphql/articles';
-import { Article } from '../../types/app';
+} from '../../services/graphql';
+import { type Article } from '../../types';
 import { settings } from '../../utils/config';
 
 /**
diff --git a/src/utils/helpers/schema-org.ts b/src/utils/helpers/schema-org.ts
index 5d400c8..82f99c2 100644
--- a/src/utils/helpers/schema-org.ts
+++ b/src/utils/helpers/schema-org.ts
@@ -7,7 +7,7 @@ import {
   Graph,
   WebPage,
 } from 'schema-dts';
-import { Dates } from '../../types/app';
+import { type Dates } from '../../types';
 import { settings } from '../../utils/config';
 
 export type GetBlogSchemaProps = {
diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/server/i18n.ts
index 35d495e..dbbc4e5 100644
--- a/src/utils/helpers/i18n.ts
+++ b/src/utils/helpers/server/i18n.ts
@@ -1,7 +1,6 @@
-import { createIntl, createIntlCache, IntlShape } from '@formatjs/intl';
 import { readFile } from 'fs/promises';
 import path from 'path';
-import { settings } from '../config';
+import { settings } from '../../config';
 
 export type Messages = { [key: string]: string };
 
@@ -16,7 +15,7 @@ export const defaultLocale = settings.locales.defaultLocale;
 export async function loadTranslation(
   currentLocale: string | undefined
 ): Promise<Messages> {
-  const locale: string = currentLocale || defaultLocale;
+  const locale: string = currentLocale ?? defaultLocale;
 
   const languagePath = path.join(process.cwd(), `lang/${locale}.json`);
 
@@ -30,20 +29,3 @@ export async function loadTranslation(
     throw error;
   }
 }
-
-/**
- * Create an Intl object to be used outside components.
- *
- * @returns {<Promise<IntlShape<string>>} The Intl object.
- */
-export async function getIntlInstance(): Promise<IntlShape<string>> {
-  try {
-    const cache = createIntlCache();
-    const messages = await loadTranslation(defaultLocale);
-
-    return createIntl({ locale: defaultLocale, messages }, cache);
-  } catch (error) {
-    console.error('Error: Could not create an Intl instance.');
-    throw error;
-  }
-}
diff --git a/src/utils/helpers/server/index.ts b/src/utils/helpers/server/index.ts
new file mode 100644
index 0000000..56ebad5
--- /dev/null
+++ b/src/utils/helpers/server/index.ts
@@ -0,0 +1,2 @@
+export * from './i18n';
+export * from './projects';
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/server/projects.ts
index 0e4de7d..ed73da8 100644
--- a/src/utils/helpers/projects.ts
+++ b/src/utils/helpers/server/projects.ts
@@ -1,7 +1,10 @@
-import { readdirSync } from 'node:fs';
-import path from 'node:path';
-import { ProjectCard, ProjectPreview } from '../../types/app';
-import { MDXProjectMeta } from '../../types/mdx';
+import { readdirSync } from 'fs';
+import path from 'path';
+import {
+  type MDXProjectMeta,
+  type ProjectCard,
+  type ProjectPreview,
+} from '../../../types';
 
 /**
  * Retrieve all the projects filename.
@@ -29,11 +32,11 @@ export const getProjectData = async (
       meta,
     }: {
       meta: MDXProjectMeta;
-    } = await import(`../../content/projects/${filename}.mdx`);
+    } = await import(`../../../content/projects/${filename}.mdx`);
 
     const { dates, intro, title, ...projectMeta } = meta;
     const { publication, update } = dates;
-    const cover = await import(`../../../public/projects/${filename}.jpg`);
+    const cover = await import(`../../../../public/projects/${filename}.jpg`);
 
     return {
       id: filename,
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
new file mode 100644
index 0000000..f4357f2
--- /dev/null
+++ b/src/utils/hooks/index.ts
@@ -0,0 +1,24 @@
+export * from './use-add-classname';
+export * from './use-article';
+export * from './use-attributes';
+export * from './use-breadcrumb';
+export * from './use-comments';
+export * from './use-data-from-api';
+export * from './use-github-api';
+export * from './use-headings-tree';
+export * from './use-input-autofocus';
+export * from './use-is-mounted';
+export * from './use-local-storage';
+export * from './use-mutation-observer';
+export * from './use-on-click-outside';
+export * from './use-pagination';
+export * from './use-prism';
+export * from './use-query-selector-all';
+export * from './use-reading-time';
+export * from './use-redirection';
+export * from './use-route-change';
+export * from './use-scroll-position';
+export * from './use-settings';
+export * from './use-state-change';
+export * from './use-styles';
+export * from './use-update-ackee-options';
diff --git a/src/utils/hooks/use-add-classname.tsx b/src/utils/hooks/use-add-classname.tsx
index 0584084..8b0f6d6 100644
--- a/src/utils/hooks/use-add-classname.tsx
+++ b/src/utils/hooks/use-add-classname.tsx
@@ -11,7 +11,7 @@ export type UseAddClassNameProps = {
  *
  * @param {UseAddClassNameProps} props - An object with classnames and one or more elements.
  */
-const useAddClassName = ({
+export const useAddClassName = ({
   className,
   element,
   elements,
@@ -30,5 +30,3 @@ const useAddClassName = ({
     if (elements && elements.length > 0) elements.forEach(setClassName);
   }, [element, elements, setClassName]);
 };
-
-export default useAddClassName;
diff --git a/src/utils/hooks/use-article.tsx b/src/utils/hooks/use-article.tsx
index f6512b2..86d8e38 100644
--- a/src/utils/hooks/use-article.tsx
+++ b/src/utils/hooks/use-article.tsx
@@ -1,23 +1,29 @@
 import useSWR from 'swr';
-import { fetchAPI } from '../../services/graphql/api';
-import { getArticleFromRawData } from '../../services/graphql/articles';
-import { articleBySlugQuery } from '../../services/graphql/articles.query';
-import { Article } from '../../types/app';
-import { RawArticle } from '../../types/raw-data';
+import {
+  articleBySlugQuery,
+  fetchAPI,
+  getArticleFromRawData,
+} from '../../services/graphql';
+import { type Article, type RawArticle } from '../../types';
 
 export type UseArticleConfig = {
+  /**
+   * A fallback article
+   */
   fallback?: Article;
+  /**
+   * The article slug
+   */
   slug?: string;
 };
 
 /**
  * Retrieve an article by slug.
  *
- * @param {string} slug - The article slug.
- * @param {Article} fallback - A fallback article.
+ * @param {UseArticleConfig} config - The config.
  * @returns {Article|undefined} The matching article if it exists.
  */
-const useArticle = ({
+export const useArticle = ({
   slug,
   fallback,
 }: UseArticleConfig): Article | undefined => {
@@ -28,5 +34,3 @@ const useArticle = ({
 
   return data ? getArticleFromRawData(data.post) : fallback;
 };
-
-export default useArticle;
diff --git a/src/utils/hooks/use-attributes.tsx b/src/utils/hooks/use-attributes.tsx
index 35161ed..20e9947 100644
--- a/src/utils/hooks/use-attributes.tsx
+++ b/src/utils/hooks/use-attributes.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { fromKebabCaseToCamelCase } from '../helpers/strings';
+import { fromKebabCaseToCamelCase } from '../helpers';
 
 export type useAttributesProps = {
   /**
@@ -25,7 +25,7 @@ export type useAttributesProps = {
  *
  * @param props - An object with element, attribute name and value.
  */
-const useAttributes = ({
+export const useAttributes = ({
   element,
   elements,
   attribute,
@@ -48,5 +48,3 @@ const useAttributes = ({
     if (elements && elements.length > 0) elements.forEach(setAttribute);
   }, [element, elements, setAttribute]);
 };
-
-export default useAttributes;
diff --git a/src/utils/hooks/use-breadcrumb.tsx b/src/utils/hooks/use-breadcrumb.tsx
index dcdf87f..f4506d7 100644
--- a/src/utils/hooks/use-breadcrumb.tsx
+++ b/src/utils/hooks/use-breadcrumb.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 import { BreadcrumbList } from 'schema-dts';
-import { BreadcrumbItem } from '../../components/molecules/nav/breadcrumb';
-import { slugify } from '../helpers/strings';
-import useSettings from './use-settings';
+import { BreadcrumbItem } from '../../components';
+import { slugify } from '../helpers';
+import { useSettings } from './use-settings';
 
 export type useBreadcrumbProps = {
   /**
@@ -32,7 +32,7 @@ export type useBreadcrumbReturn = {
  * @param {useBreadcrumbProps} props - An object (the current page title & url).
  * @returns {useBreadcrumbReturn} The breadcrumb items and its JSON schema.
  */
-const useBreadcrumb = ({
+export const useBreadcrumb = ({
   title,
   url,
 }: useBreadcrumbProps): useBreadcrumbReturn => {
@@ -103,5 +103,3 @@ const useBreadcrumb = ({
 
   return { items, schema };
 };
-
-export default useBreadcrumb;
diff --git a/src/utils/hooks/use-comments.tsx b/src/utils/hooks/use-comments.tsx
index 8281a86..6ac3d42 100644
--- a/src/utils/hooks/use-comments.tsx
+++ b/src/utils/hooks/use-comments.tsx
@@ -1,6 +1,6 @@
 import useSWR from 'swr';
-import { getAllComments } from '../../services/graphql/comments';
-import { SingleComment } from '../../types/app';
+import { getAllComments } from '../../services/graphql';
+import { SingleComment } from '../../types';
 
 export type UseCommentsConfig = {
   contentId?: string | number;
@@ -13,13 +13,11 @@ export type UseCommentsConfig = {
  * @param {string | number} contentId - A page/article id.
  * @returns {SingleComment[]|undefined}
  */
-const useComments = ({
+export const useComments = ({
   contentId,
   fallback,
 }: UseCommentsConfig): SingleComment[] | undefined => {
   const { data } = useSWR(contentId ? { contentId } : null, getAllComments);
 
-  return data || fallback;
+  return data ?? fallback;
 };
-
-export default useComments;
diff --git a/src/utils/hooks/use-data-from-api.tsx b/src/utils/hooks/use-data-from-api.tsx
index 7082941..5abcf09 100644
--- a/src/utils/hooks/use-data-from-api.tsx
+++ b/src/utils/hooks/use-data-from-api.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
  * @param fetcher - A function to fetch data from API.
  * @returns {T | undefined} The requested data.
  */
-const useDataFromAPI = <T extends unknown>(
+export const useDataFromAPI = <T,>(
   fetcher: () => Promise<T>
 ): T | undefined => {
   const [data, setData] = useState<T>();
@@ -19,5 +19,3 @@ const useDataFromAPI = <T extends unknown>(
 
   return data;
 };
-
-export default useDataFromAPI;
diff --git a/src/utils/hooks/use-github-api.tsx b/src/utils/hooks/use-github-api.tsx
index 56df01f..aa9e3f7 100644
--- a/src/utils/hooks/use-github-api.tsx
+++ b/src/utils/hooks/use-github-api.tsx
@@ -1,5 +1,5 @@
 import useSWR, { Fetcher } from 'swr';
-import { SWRResult } from '../../types/swr';
+import { SWRResult } from '../../types';
 
 export type RepoData = {
   created_at: string;
@@ -16,7 +16,7 @@ const fetcher: Fetcher<RepoData, string> = (...args) =>
  * @param repo - The Github repo (`owner/repo-name`).
  * @returns The repository data.
  */
-const useGithubApi = (repo: string): SWRResult<RepoData> => {
+export const useGithubApi = (repo: string): SWRResult<RepoData> => {
   const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
   const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
 
@@ -26,5 +26,3 @@ const useGithubApi = (repo: string): SWRResult<RepoData> => {
     isError: error,
   };
 };
-
-export default useGithubApi;
diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx
index 0dc077e..049ab29 100644
--- a/src/utils/hooks/use-headings-tree.tsx
+++ b/src/utils/hooks/use-headings-tree.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { slugify } from '../helpers/strings';
+import { slugify } from '../helpers';
 import { useMutationObserver } from './use-mutation-observer';
 
 export type Heading = {
@@ -27,7 +27,7 @@ export type Heading = {
  * @param {HTMLElement} wrapper - An HTML element that contains the headings.
  * @returns {Heading[]} The headings tree.
  */
-const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
+export const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
   const depths = useMemo(() => ['h2', 'h3', 'h4', 'h5', 'h6'], []);
   const [allHeadings, setAllHeadings] =
     useState<NodeListOf<HTMLHeadingElement>>();
@@ -160,5 +160,3 @@ const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
 
   return headingsTree;
 };
-
-export default useHeadingsTree;
diff --git a/src/utils/hooks/use-input-autofocus.tsx b/src/utils/hooks/use-input-autofocus.tsx
index c7700e9..d0fcd06 100644
--- a/src/utils/hooks/use-input-autofocus.tsx
+++ b/src/utils/hooks/use-input-autofocus.tsx
@@ -18,7 +18,7 @@ export type UseInputAutofocusProps = {
 /**
  * Set focus on an input with an optional delay.
  */
-const useInputAutofocus = ({
+export const useInputAutofocus = ({
   condition,
   delay = 0,
   ref,
@@ -35,5 +35,3 @@ const useInputAutofocus = ({
     };
   }, [condition, delay, ref]);
 };
-
-export default useInputAutofocus;
diff --git a/src/utils/hooks/use-is-mounted.tsx b/src/utils/hooks/use-is-mounted.tsx
index ca79afb..4d85d45 100644
--- a/src/utils/hooks/use-is-mounted.tsx
+++ b/src/utils/hooks/use-is-mounted.tsx
@@ -6,7 +6,7 @@ import { RefObject, useEffect, useState } from 'react';
  * @param {RefObject<HTMLElement>} ref - A React reference to an HTML element.
  * @returns {boolean} True if the HTML element is mounted.
  */
-const useIsMounted = (ref: RefObject<HTMLElement>) => {
+export const useIsMounted = (ref: RefObject<HTMLElement>): boolean => {
   const [isMounted, setIsMounted] = useState<boolean>(false);
 
   useEffect(() => {
@@ -15,5 +15,3 @@ const useIsMounted = (ref: RefObject<HTMLElement>) => {
 
   return isMounted;
 };
-
-export default useIsMounted;
diff --git a/src/utils/hooks/use-local-storage.tsx b/src/utils/hooks/use-local-storage.tsx
index 1809e07..0f9fbb6 100644
--- a/src/utils/hooks/use-local-storage.tsx
+++ b/src/utils/hooks/use-local-storage.tsx
@@ -13,14 +13,14 @@ export type UseLocalStorageReturn<T> = {
  * @param {T} [fallbackValue] - A fallback value if local storage is empty.
  * @returns {UseLocalStorageReturn<T>} An object with value and setValue.
  */
-const useLocalStorage = <T extends unknown>(
+export const useLocalStorage = <T,>(
   key: string,
   fallbackValue: T
 ): UseLocalStorageReturn<T> => {
   const getInitialValue = () => {
     if (typeof window === 'undefined') return fallbackValue;
     const storedValue = LocalStorage.get<T>(key);
-    return storedValue || fallbackValue;
+    return storedValue ?? fallbackValue;
   };
 
   const [value, setValue] = useState<T>(getInitialValue);
@@ -31,5 +31,3 @@ const useLocalStorage = <T extends unknown>(
 
   return { value, setValue };
 };
-
-export default useLocalStorage;
diff --git a/src/utils/hooks/use-on-click-outside.tsx b/src/utils/hooks/use-on-click-outside.tsx
index 04827b8..b810ddc 100644
--- a/src/utils/hooks/use-on-click-outside.tsx
+++ b/src/utils/hooks/use-on-click-outside.tsx
@@ -9,7 +9,7 @@ export type UseOnClickOutsideCallback = (target: Node) => void;
  * @param {boolean} useCapture - Define event propagation method. Default: true.
  * @returns {RefObject} A React reference object.
  */
-const useOnClickOutside = <T extends HTMLElement>(
+export const useOnClickOutside = <T extends HTMLElement>(
   callback: UseOnClickOutsideCallback,
   useCapture: boolean = true
 ): RefObject<T> => {
@@ -48,5 +48,3 @@ const useOnClickOutside = <T extends HTMLElement>(
 
   return ref;
 };
-
-export default useOnClickOutside;
diff --git a/src/utils/hooks/use-pagination.tsx b/src/utils/hooks/use-pagination.tsx
index f47a674..706e656 100644
--- a/src/utils/hooks/use-pagination.tsx
+++ b/src/utils/hooks/use-pagination.tsx
@@ -1,6 +1,9 @@
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
-import { GraphQLEdgesInput } from '../../types/graphql/generics';
-import { EdgesResponse, Search } from '../../types/graphql/queries';
+import {
+  type EdgesResponse,
+  type GraphQLEdgesInput,
+  type Search,
+} from '../../types';
 
 export type UsePaginationProps<T> = {
   /**
@@ -66,7 +69,7 @@ export type UsePaginationReturn<T> = {
  * @param {UsePaginationProps} props - The pagination configuration.
  * @returns {UsePaginationReturn} An object with pagination data and helpers.
  */
-const usePagination = <T extends object>({
+export const usePagination = <T extends object>({
   fallbackData,
   fetcher,
   perPage,
@@ -114,5 +117,3 @@ const usePagination = <T extends object>({
     setSize,
   };
 };
-
-export default usePagination;
diff --git a/src/utils/hooks/use-prism.tsx b/src/utils/hooks/use-prism.tsx
index 05790a3..429808f 100644
--- a/src/utils/hooks/use-prism.tsx
+++ b/src/utils/hooks/use-prism.tsx
@@ -111,7 +111,10 @@ const loadPrismPlugins = async (plugins: PrismPlugin[]) => {
  * @param {UsePrismProps} props - An object of options.
  * @returns {UsePrismReturn} An object of data.
  */
-const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => {
+export const usePrism = ({
+  language,
+  plugins,
+}: UsePrismProps): UsePrismReturn => {
   /**
    * The order matter. Toolbar must be loaded before some other plugins.
    */
@@ -178,5 +181,3 @@ const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => {
     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 6ac8a08..a3650ea 100644
--- a/src/utils/hooks/use-query-selector-all.tsx
+++ b/src/utils/hooks/use-query-selector-all.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
  * @param {string} query - A query.
  * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list.
  */
-const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
+export const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
   query: string
 ): NodeListOf<HTMLElementTagNameMap[T]> | undefined => {
   const [elements, setElements] =
@@ -20,5 +20,3 @@ const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
 
   return elements;
 };
-
-export default useQuerySelectorAll;
diff --git a/src/utils/hooks/use-reading-time.tsx b/src/utils/hooks/use-reading-time.tsx
index fb54135..3a812f6 100644
--- a/src/utils/hooks/use-reading-time.tsx
+++ b/src/utils/hooks/use-reading-time.tsx
@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl';
  * @param {number} wordsCount - The number of words.
  * @returns {string} The estimated reading time.
  */
-const useReadingTime = (
+export const useReadingTime = (
   wordsCount: number,
   onlyMinutes: boolean = false
 ): string => {
@@ -54,5 +54,3 @@ const useReadingTime = (
     );
   }
 };
-
-export default useReadingTime;
diff --git a/src/utils/hooks/use-redirection.tsx b/src/utils/hooks/use-redirection.tsx
index 9eb26c2..5a677e2 100644
--- a/src/utils/hooks/use-redirection.tsx
+++ b/src/utils/hooks/use-redirection.tsx
@@ -22,12 +22,10 @@ export type UseRedirectionProps = {
  *
  * @param {UseRedirectionProps} props - The redirection parameters.
  */
-const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => {
+export const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => {
   const router = useRouter();
 
   useEffect(() => {
     if (router.query[query.param] === query.value) router.push(redirectTo);
   }, [query, redirectTo, router]);
 };
-
-export default useRedirection;
diff --git a/src/utils/hooks/use-route-change.tsx b/src/utils/hooks/use-route-change.tsx
index 82e01a1..2eff6e9 100644
--- a/src/utils/hooks/use-route-change.tsx
+++ b/src/utils/hooks/use-route-change.tsx
@@ -1,12 +1,10 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-const useRouteChange = (callback: () => void) => {
+export const useRouteChange = (callback: () => void) => {
   const { events } = useRouter();
 
   useEffect(() => {
     events.on('routeChangeStart', callback);
   }, [events, callback]);
 };
-
-export default useRouteChange;
diff --git a/src/utils/hooks/use-scroll-position.tsx b/src/utils/hooks/use-scroll-position.tsx
index 47cfdd0..c6ae9fd 100644
--- a/src/utils/hooks/use-scroll-position.tsx
+++ b/src/utils/hooks/use-scroll-position.tsx
@@ -5,11 +5,9 @@ import { useEffect } from 'react';
  *
  * @param scrollHandler - A callback function.
  */
-const useScrollPosition = (scrollHandler: () => void) => {
+export const useScrollPosition = (scrollHandler: () => void) => {
   useEffect(() => {
     window.addEventListener('scroll', scrollHandler);
     return () => window.removeEventListener('scroll', scrollHandler);
   }, [scrollHandler]);
 };
-
-export default useScrollPosition;
diff --git a/src/utils/hooks/use-settings.tsx b/src/utils/hooks/use-settings.tsx
index edb5b5e..968930d 100644
--- a/src/utils/hooks/use-settings.tsx
+++ b/src/utils/hooks/use-settings.tsx
@@ -67,11 +67,11 @@ export type UseSettingsReturn = {
  *
  * @returns {UseSettingsReturn} - An object describing settings.
  */
-const useSettings = (): UseSettingsReturn => {
+export const useSettings = (): UseSettingsReturn => {
   const { baseline, copyright, email, locales, name, postsPerPage, url } =
     settings;
   const router = useRouter();
-  const locale = router.locale || locales.defaultLocale;
+  const locale = router.locale ?? locales.defaultLocale;
 
   return {
     blog: {
@@ -93,5 +93,3 @@ const useSettings = (): UseSettingsReturn => {
     },
   };
 };
-
-export default useSettings;
diff --git a/src/utils/hooks/use-state-change.tsx b/src/utils/hooks/use-state-change.tsx
index 063fb8e..59ae0df 100644
--- a/src/utils/hooks/use-state-change.tsx
+++ b/src/utils/hooks/use-state-change.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
  * @param initial - The initial value.
  * @returns The state and a setter.
  */
-const useStateChange = <T,>(initial: T) => {
+export const useStateChange = <T,>(initial: T) => {
   const [state, setState] = useState<T>(initial);
 
   useEffect(() => {
@@ -15,5 +15,3 @@ const useStateChange = <T,>(initial: T) => {
 
   return [state, setState] as const;
 };
-
-export default useStateChange;
diff --git a/src/utils/hooks/use-styles.tsx b/src/utils/hooks/use-styles.tsx
index d47e9fb..a70087b 100644
--- a/src/utils/hooks/use-styles.tsx
+++ b/src/utils/hooks/use-styles.tsx
@@ -20,10 +20,8 @@ export type UseStylesProps = {
  *
  * @param {UseStylesProps} props - An object with property, styles and target.
  */
-const useStyles = ({ property, styles, target }: UseStylesProps) => {
+export const useStyles = ({ property, styles, target }: UseStylesProps) => {
   useEffect(() => {
     if (target.current) target.current.style.setProperty(property, styles);
   }, [property, styles, target]);
 };
-
-export default useStyles;
diff --git a/src/utils/hooks/use-update-ackee-options.tsx b/src/utils/hooks/use-update-ackee-options.tsx
index 1901588..f6e5c86 100644
--- a/src/utils/hooks/use-update-ackee-options.tsx
+++ b/src/utils/hooks/use-update-ackee-options.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useAckeeTracker } from '../providers/ackee';
+import { useAckeeTracker } from '../providers';
 
 export type AckeeOptions = 'full' | 'partial';
 
@@ -8,12 +8,10 @@ export type AckeeOptions = 'full' | 'partial';
  *
  * @param {AckeeOptions} value - Either `full` or `partial`.
  */
-const useUpdateAckeeOptions = (value: AckeeOptions) => {
+export const useUpdateAckeeOptions = (value: AckeeOptions) => {
   const { setDetailed } = useAckeeTracker();
 
   useEffect(() => {
     setDetailed(value === 'full');
   }, [value, setDetailed]);
 };
-
-export default useUpdateAckeeOptions;
diff --git a/src/utils/providers/index.ts b/src/utils/providers/index.ts
new file mode 100644
index 0000000..43641a1
--- /dev/null
+++ b/src/utils/providers/index.ts
@@ -0,0 +1,2 @@
+export * from './ackee';
+export * from './prism-theme';
diff --git a/src/utils/providers/prism-theme.tsx b/src/utils/providers/prism-theme.tsx
index 6ecbb1d..c063bd5 100644
--- a/src/utils/providers/prism-theme.tsx
+++ b/src/utils/providers/prism-theme.tsx
@@ -7,9 +7,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import useAttributes from '../hooks/use-attributes';
-import useLocalStorage from '../hooks/use-local-storage';
-import useQuerySelectorAll from '../hooks/use-query-selector-all';
+import { useAttributes, useLocalStorage, useQuerySelectorAll } from '../hooks';
 
 export type PrismTheme = 'dark' | 'light' | 'system';
 export type ResolvedPrismTheme = Exclude<PrismTheme, 'system'>;