chore: make Links and Images compliant with Next.js 13

22 files changed, 303 insertions, 283 deletions

diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index 22d13f6..ff0a67f 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -8,6 +8,7 @@ export default {
   title: 'Atoms/Buttons/ButtonLink',
   component: ButtonLink,
   args: {
+    external: false,
     shape: 'rectangle',
   },
   argTypes: {
@@ -79,7 +80,7 @@ export default {
         type: 'select',
       },
       description: 'The link kind.',
-      options: ['primary', 'secondary'],
+      options: ['primary', 'secondary', 'tertiary'],
       table: {
         category: 'Options',
         defaultValue: { summary: 'secondary' },
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 989f737..7182d94 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -63,13 +63,12 @@ const ButtonLink: FC<ButtonLinkProps> = ({
       {children}
     </a>
   ) : (
-    <Link href={target}>
-      <a
-        className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
-        {...props}
-      >
-        {children}
-      </a>
+    <Link
+      {...props}
+      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
+      href={target}
+    >
+      {children}
     </Link>
   );
 };
diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx
index c8ba273..8991f38 100644
--- a/src/components/atoms/links/link.tsx
+++ b/src/components/atoms/links/link.tsx
@@ -53,13 +53,12 @@ const Link: FC<LinkProps> = ({
       {children}
     </a>
   ) : (
-    <NextLink href={href}>
-      <a
-        hrefLang={lang}
-        className={`${styles.link} ${downloadClass} ${className}`}
-      >
-        {children}
-      </a>
+    <NextLink
+      className={`${styles.link} ${downloadClass} ${className}`}
+      href={href}
+      hrefLang={lang}
+    >
+      {children}
     </NextLink>
   );
 };
diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx
index 7c6fede..66ee570 100644
--- a/src/components/atoms/links/nav-link.tsx
+++ b/src/components/atoms/links/nav-link.tsx
@@ -24,11 +24,9 @@ export type NavLinkProps = {
  */
 const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
   return (
-    <Link href={href}>
-      <a className={styles.link}>
-        {logo}
-        {label}
-      </a>
+    <Link className={styles.link} href={href}>
+      {logo}
+      {label}
     </Link>
   );
 };
diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx
index 6eb1e21..827c2a8 100644
--- a/src/components/molecules/buttons/back-to-top.test.tsx
+++ b/src/components/molecules/buttons/back-to-top.test.tsx
@@ -5,6 +5,6 @@ describe('BackToTop', () => {
   it('renders a BackToTop link', () => {
     render(<BackToTop target="top" />);
     expect(screen.getByRole('link')).toHaveAccessibleName('Back to top');
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/#top');
+    expect(screen.getByRole('link')).toHaveAttribute('href', '#top');
   });
 });
diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx
index 1099d53..0d59a55 100644
--- a/src/components/molecules/images/flipping-logo.tsx
+++ b/src/components/molecules/images/flipping-logo.tsx
@@ -40,8 +40,9 @@ const FlippingLogo: ForwardRefRenderFunction<
         <Image
           src={photo}
           alt={altText}
-          layout="fill"
-          objectFit="cover"
+          style={{ objectFit: 'cover' }}
+          height="100"
+          width="100"
           {...props}
         />
       </div>
diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss
index 8a1d51f..7f5fafd 100644
--- a/src/components/molecules/images/responsive-image.module.scss
+++ b/src/components/molecules/images/responsive-image.module.scss
@@ -37,6 +37,11 @@
   }
 }
 
+.img {
+  max-height: 100%;
+  object-fit: cover;
+}
+
 .link {
   display: flex;
   flex-flow: column;
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 5373561..79e7db4 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -22,7 +22,7 @@ export type ResponsiveImageProps = Omit<
   /**
    * The image height.
    */
-  height: number | string;
+  height: number | `${number}`;
   /**
    * A link target.
    */
@@ -30,7 +30,7 @@ export type ResponsiveImageProps = Omit<
   /**
    * The image width.
    */
-  width: number | string;
+  width: number | `${number}`;
   /**
    * Wrap the image with borders.
    */
@@ -46,30 +46,27 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
   alt,
   caption,
   className = '',
-  layout,
-  objectFit,
   target,
   title,
   withBorders,
   ...props
 }) => {
-  const bordersModifier = withBorders
-    ? 'wrapper--has-borders'
-    : 'wrapper--no-borders';
-  const linkModifier = target ? 'wrapper--has-link' : 'wrapper--no-link';
+  const bordersModifier = withBorders ? styles['wrapper--has-borders'] : '';
+  const linkModifier = target
+    ? styles['wrapper--has-link']
+    : styles['wrapper--no-link'];
 
   return (
     <figure
       aria-label={caption ? undefined : title}
-      className={`${styles.wrapper} ${styles[bordersModifier]} ${styles[linkModifier]} ${className}`}
+      className={`${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`}
     >
       {target ? (
         <Link href={target} className={styles.link}>
           <Image
             alt={alt}
             className={styles.img}
-            layout={layout || 'intrinsic'}
-            objectFit={objectFit || 'contain'}
+            sizes="100vw"
             title={title}
             {...props}
           />
@@ -82,8 +79,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
           <Image
             alt={alt}
             className={styles.img}
-            layout={layout || 'intrinsic'}
-            objectFit={objectFit || 'contain'}
+            sizes="100vw"
             title={title}
             {...props}
           />
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 9a82a74..b351f12 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -94,8 +94,8 @@ const Branding: FC<BrandingProps> = ({
         ref={titleRef}
       >
         {withLink ? (
-          <Link href="/">
-            <a className={styles.link}>{title}</a>
+          <Link className={styles.link} href="/">
+            {title}
           </Link>
         ) : (
           title
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 6065642..42e9192 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -18,7 +18,6 @@
   }
 
   .cover {
-    align-self: flex-start;
     place-content: center;
     height: fun.convert-px(150);
     margin: auto;
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index c48bc18..d03b8b7 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -2,9 +2,7 @@ import ButtonLink from '@components/atoms/buttons/button-link';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import { type Image } from '@ts/types/app';
 import { FC } from 'react';
-import ResponsiveImage, {
-  type ResponsiveImageProps,
-} from '../images/responsive-image';
+import ResponsiveImage from '../images/responsive-image';
 import styles from './card.module.scss';
 import Meta, { type MetaData } from './meta';
 
@@ -18,10 +16,6 @@ export type CardProps = {
    */
   cover?: Image;
   /**
-   * The cover fit. Default: cover.
-   */
-  coverFit?: ResponsiveImageProps['objectFit'];
-  /**
    * The card id.
    */
   id: string;
@@ -55,7 +49,6 @@ export type CardProps = {
 const Card: FC<CardProps> = ({
   className = '',
   cover,
-  coverFit = 'cover',
   id,
   meta,
   tagline,
@@ -71,13 +64,7 @@ const Card: FC<CardProps> = ({
     >
       <article className={styles.article}>
         <header className={styles.header}>
-          {cover && (
-            <ResponsiveImage
-              {...cover}
-              objectFit={coverFit}
-              className={styles.cover}
-            />
-          )}
+          {cover && <ResponsiveImage {...cover} className={styles.cover} />}
           <Heading
             alignment="center"
             className={styles.title}
@@ -87,7 +74,7 @@ const Card: FC<CardProps> = ({
             {title}
           </Heading>
         </header>
-        <div className={styles.tagline}>{tagline}</div>
+        {tagline && <div className={styles.tagline}>{tagline}</div>}
         {meta && (
           <footer className={styles.footer}>
             <Meta
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index dd05e59..f6cb6ed 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -6,17 +6,14 @@ import Card, { type CardProps } from '@components/molecules/layout/card';
 import { FC } from 'react';
 import styles from './cards-list.module.scss';
 
-export type CardsListItem = Omit<
-  CardProps,
-  'className' | 'coverFit' | 'titleLevel'
-> & {
+export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & {
   /**
    * The card id.
    */
   id: string;
 };
 
-export type CardsListProps = Pick<CardProps, 'coverFit' | 'titleLevel'> &
+export type CardsListProps = Pick<CardProps, 'titleLevel'> &
   Pick<ListProps, 'kind'> & {
     /**
      * Set additional classnames to the list wrapper.
@@ -35,7 +32,6 @@ export type CardsListProps = Pick<CardProps, 'coverFit' | 'titleLevel'> &
  */
 const CardsList: FC<CardsListProps> = ({
   className = '',
-  coverFit,
   items,
   kind = 'unordered',
   titleLevel,
@@ -56,7 +52,6 @@ const CardsList: FC<CardsListProps> = ({
           <Card
             key={id}
             className={styles.card}
-            coverFit={coverFit}
             id={id}
             titleLevel={titleLevel}
             {...card}
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index dc6d18d..7290c6c 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -30,7 +30,7 @@ describe('Comment', () => {
       screen.getByRole('link', {
         name: `${formattedDate} at ${formattedTime}`,
       })
-    ).toHaveAttribute('href', `/#comment-${id}`);
+    ).toHaveAttribute('href', `#comment-${id}`);
   });
 
   it('renders a reply button', () => {
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index 497a04c..3b58a79 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -5,7 +5,7 @@ import { type SingleComment } from '@ts/types/app';
 import useSettings from '@utils/hooks/use-settings';
 import Image from 'next/image';
 import Script from 'next/script';
-import { FC, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { type Comment as CommentSchema, type WithContext } from 'schema-dts';
 import CommentForm, { type CommentFormProps } from '../forms/comment-form';
@@ -42,6 +42,11 @@ const Comment: FC<CommentProps> = ({
   const { website } = useSettings();
   const [isReplying, setIsReplying] = useState<boolean>(false);
 
+  const handleReply = useCallback(
+    () => setIsReplying((prevState) => !prevState),
+    []
+  );
+
   if (!approved) {
     return (
       <div className={styles.wrapper}>
@@ -114,11 +119,11 @@ const Comment: FC<CommentProps> = ({
           {author.avatar && (
             <div className={styles.avatar}>
               <Image
-                src={author.avatar.src}
-                alt={author.avatar.alt}
-                layout="fill"
-                objectFit="cover"
                 {...props}
+                alt={author.avatar.alt}
+                fill
+                src={author.avatar.src}
+                style={{ objectFit: 'cover' }}
               />
             </div>
           )}
@@ -149,7 +154,7 @@ const Comment: FC<CommentProps> = ({
         />
         <footer className={styles.footer}>
           {canReply && (
-            <Button kind="tertiary" onClick={() => setIsReplying(!isReplying)}>
+            <Button kind="tertiary" onClick={handleReply}>
               {buttonLabel}
             </Button>
           )}
diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss
index 895bae5..5620513 100644
--- a/src/components/organisms/layout/overview.module.scss
+++ b/src/components/organisms/layout/overview.module.scss
@@ -36,9 +36,13 @@
 
   .cover {
     width: fit-content;
-    max-height: fun.convert-px(175);
+    height: fun.convert-px(175);
     margin-bottom: var(--spacing-sm);
     padding: var(--spacing-2xs);
     border: fun.convert-px(1) solid var(--color-border);
+
+    img {
+      object-fit: contain;
+    }
   }
 }
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index b110e68..04ec79a 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -41,13 +41,7 @@ const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => {
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
-      {cover && (
-        <ResponsiveImage
-          className={styles.cover}
-          objectFit="contain"
-          {...cover}
-        />
-      )}
+      {cover && <ResponsiveImage className={styles.cover} {...cover} />}
       <Meta
         data={{ ...remainingMeta, technologies }}
         layout="inline"
diff --git a/src/content b/src/content
-Subproject 1935cce5090022a54c6cf931f157efd2d1e59bd
+Subproject 7514fc1c114f0a4036c38ab49d602ec4ccb219e
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 8b17da0..d938d98 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,5 +1,5 @@
-import Heading from '@components/atoms/headings/heading';
-import Link from '@components/atoms/links/link';
+import Heading, { HeadingProps } from '@components/atoms/headings/heading';
+import Link, { LinkProps } from '@components/atoms/links/link';
 import List from '@components/atoms/lists/list';
 import ImageWidget from '@components/organisms/widgets/image-widget';
 import SocialMedia from '@components/organisms/widgets/social-media';
@@ -26,6 +26,32 @@ import Script from 'next/script';
 import React, { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 
+const ExternalLink = (props: LinkProps) => <Link external={true} {...props} />;
+
+const H1 = (props: Omit<HeadingProps, 'level'>) => {
+  return <Heading level={1} {...props} />;
+};
+
+const H2 = (props: Omit<HeadingProps, 'level'>) => {
+  return <Heading level={2} {...props} />;
+};
+
+const H3 = (props: Omit<HeadingProps, 'level'>) => {
+  return <Heading level={3} {...props} />;
+};
+
+const H4 = (props: Omit<HeadingProps, 'level'>) => {
+  return <Heading level={4} {...props} />;
+};
+
+const H5 = (props: Omit<HeadingProps, 'level'>) => {
+  return <Heading level={5} {...props} />;
+};
+
+const H6 = (props: Omit<HeadingProps, 'level'>) => {
+  return <Heading level={6} {...props} />;
+};
+
 /**
  * CV page.
  */
@@ -122,15 +148,15 @@ const CVPage: NextPageWithLayout = () => {
   const schemaJsonLd = getSchemaJson([webpageSchema, cvSchema]);
 
   const components: NestedMDXComponents = {
-    a: (props) => <Link external={true} {...props} />,
-    h1: (props) => <Heading level={1} {...props} />,
-    h2: (props) => <Heading level={2} {...props} />,
-    h3: (props) => <Heading level={3} {...props} />,
-    h4: (props) => <Heading level={4} {...props} />,
-    h5: (props) => <Heading level={5} {...props} />,
-    h6: (props) => <Heading level={6} {...props} />,
-    Link: (props) => <Link {...props} />,
-    List: (props) => <List {...props} />,
+    a: ExternalLink,
+    h1: H1,
+    h2: H2,
+    h3: H3,
+    h4: H4,
+    h5: H5,
+    h6: H6,
+    Link: Link,
+    List: List,
   };
 
   return (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 025bf6d..1e0bf40 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,12 +1,10 @@
 import FeedIcon from '@assets/images/icon-feed.svg';
 import ButtonLink from '@components/atoms/buttons/button-link';
 import Envelop from '@components/atoms/icons/envelop';
-import Column, { type ColumnProps } from '@components/atoms/layout/column';
+import Column from '@components/atoms/layout/column';
 import Section, { type SectionProps } from '@components/atoms/layout/section';
 import List, { type ListItem } from '@components/atoms/lists/list';
-import ResponsiveImage, {
-  type ResponsiveImageProps,
-} from '@components/molecules/images/responsive-image';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
 import Columns, {
   type ColumnsProps,
 } from '@components/molecules/layout/columns';
@@ -29,199 +27,208 @@ import Script from 'next/script';
 import { ReactElement } from 'react';
 import { useIntl } from 'react-intl';
 
-type HomeProps = {
-  recentPosts: ArticleCard[];
-  translation?: Messages;
+/**
+ * Retrieve a list of coding links.
+ *
+ * @returns {JSX.Element} - A list of links.
+ */
+const CodingLinks = (): JSX.Element => {
+  const intl = useIntl();
+  const links: ListItem[] = [
+    {
+      id: 'web-development',
+      value: (
+        <ButtonLink target="/thematique/developpement-web">
+          {intl.formatMessage({
+            defaultMessage: 'Web development',
+            description: 'HomePage: link to web development thematic',
+            id: 'vkF/RP',
+          })}
+        </ButtonLink>
+      ),
+    },
+    {
+      id: 'projects',
+      value: (
+        <ButtonLink target="/projets">
+          {intl.formatMessage({
+            defaultMessage: 'Projects',
+            description: 'HomePage: link to projects',
+            id: 'N44SOc',
+          })}
+        </ButtonLink>
+      ),
+    },
+  ];
+
+  return <List kind="flex" items={links} className={styles.list} />;
 };
 
 /**
- * Home page.
+ * Retrieve a list of Coldark repositories.
+ *
+ * @returns {JSX.Element} - A list of links.
  */
-const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
+const ColdarkRepos = (): JSX.Element => {
   const intl = useIntl();
-  const { schema: breadcrumbSchema } = useBreadcrumb({
-    title: '',
-    url: `/`,
-  });
+  const links: ListItem[] = [
+    {
+      id: 'coldark-github',
+      value: (
+        <ButtonLink
+          target="https://github.com/ArmandPhilippot/coldark"
+          external={true}
+        >
+          {intl.formatMessage({
+            defaultMessage: 'Github',
+            description: 'HomePage: Github link',
+            id: '3f3PzH',
+          })}
+        </ButtonLink>
+      ),
+    },
+    {
+      id: 'coldark-gitlab',
+      value: (
+        <ButtonLink
+          target="https://gitlab.com/ArmandPhilippot/coldark"
+          external={true}
+        >
+          {intl.formatMessage({
+            defaultMessage: 'Gitlab',
+            description: 'HomePage: Gitlab link',
+            id: '7AnwZ7',
+          })}
+        </ButtonLink>
+      ),
+    },
+  ];
 
-  /**
-   * Retrieve a list of coding links.
-   *
-   * @returns {JSX.Element} - A list of links.
-   */
-  const CodingLinks = (): JSX.Element => {
-    const links: ListItem[] = [
-      {
-        id: 'web-development',
-        value: (
-          <ButtonLink target="/thematique/developpement-web">
-            {intl.formatMessage({
-              defaultMessage: 'Web development',
-              description: 'HomePage: link to web development thematic',
-              id: 'vkF/RP',
-            })}
-          </ButtonLink>
-        ),
-      },
-      {
-        id: 'projects',
-        value: (
-          <ButtonLink target="/projets">
-            {intl.formatMessage({
-              defaultMessage: 'Projects',
-              description: 'HomePage: link to projects',
-              id: 'N44SOc',
-            })}
-          </ButtonLink>
-        ),
-      },
-    ];
+  return <List kind="flex" items={links} className={styles.list} />;
+};
 
-    return <List kind="flex" items={links} className={styles.list} />;
-  };
+/**
+ * Retrieve a list of links related to Free thematic.
+ *
+ * @returns {JSX.Element} - A list of links.
+ */
+const LibreLinks = (): JSX.Element => {
+  const intl = useIntl();
+  const links: ListItem[] = [
+    {
+      id: 'free',
+      value: (
+        <ButtonLink target="/thematique/libre">
+          {intl.formatMessage({
+            defaultMessage: 'Free',
+            description: 'HomePage: link to free thematic',
+            id: 'w8GrOf',
+          })}
+        </ButtonLink>
+      ),
+    },
+    {
+      id: 'linux',
+      value: (
+        <ButtonLink target="/thematique/linux">
+          {intl.formatMessage({
+            defaultMessage: 'Linux',
+            description: 'HomePage: link to Linux thematic',
+            id: 'jASD7k',
+          })}
+        </ButtonLink>
+      ),
+    },
+  ];
 
-  /**
-   * Retrieve a list of Coldark repositories.
-   *
-   * @returns {JSX.Element} - A list of links.
-   */
-  const ColdarkRepos = (): JSX.Element => {
-    const links: ListItem[] = [
-      {
-        id: 'coldark-github',
-        value: (
-          <ButtonLink
-            target="https://github.com/ArmandPhilippot/coldark"
-            external={true}
-          >
-            {intl.formatMessage({
-              defaultMessage: 'Github',
-              description: 'HomePage: Github link',
-              id: '3f3PzH',
-            })}
-          </ButtonLink>
-        ),
-      },
-      {
-        id: 'coldark-gitlab',
-        value: (
-          <ButtonLink
-            target="https://gitlab.com/ArmandPhilippot/coldark"
-            external={true}
-          >
-            {intl.formatMessage({
-              defaultMessage: 'Gitlab',
-              description: 'HomePage: Gitlab link',
-              id: '7AnwZ7',
-            })}
-          </ButtonLink>
-        ),
-      },
-    ];
+  return <List kind="flex" items={links} className={styles.list} />;
+};
 
-    return <List kind="flex" items={links} className={styles.list} />;
-  };
+/**
+ * Retrieve the Shaarli link.
+ *
+ * @returns {JSX.Element} - A list of links
+ */
+const ShaarliLink = (): JSX.Element => {
+  const intl = useIntl();
+  const links: ListItem[] = [
+    {
+      id: 'shaarli',
+      value: (
+        <ButtonLink target="https://shaarli.armandphilippot.com/">
+          {intl.formatMessage({
+            defaultMessage: 'Shaarli',
+            description: 'HomePage: link to Shaarli',
+            id: 'i5L19t',
+          })}
+        </ButtonLink>
+      ),
+    },
+  ];
 
-  /**
-   * Retrieve a list of links related to Free thematic.
-   *
-   * @returns {JSX.Element} - A list of links.
-   */
-  const LibreLinks = (): JSX.Element => {
-    const links: ListItem[] = [
-      {
-        id: 'free',
-        value: (
-          <ButtonLink target="/thematique/libre">
-            {intl.formatMessage({
-              defaultMessage: 'Free',
-              description: 'HomePage: link to free thematic',
-              id: 'w8GrOf',
-            })}
-          </ButtonLink>
-        ),
-      },
-      {
-        id: 'linux',
-        value: (
-          <ButtonLink target="/thematique/linux">
-            {intl.formatMessage({
-              defaultMessage: 'Linux',
-              description: 'HomePage: link to Linux thematic',
-              id: 'jASD7k',
-            })}
-          </ButtonLink>
-        ),
-      },
-    ];
+  return <List kind="flex" items={links} className={styles.list} />;
+};
 
-    return <List kind="flex" items={links} className={styles.list} />;
-  };
+/**
+ * Retrieve the additional links.
+ *
+ * @returns {JSX.Element} - A list of links.
+ */
+const MoreLinks = (): JSX.Element => {
+  const intl = useIntl();
+  const links: ListItem[] = [
+    {
+      id: 'contact-me',
+      value: (
+        <ButtonLink target="/contact">
+          <Envelop aria-hidden={true} className={styles.icon} />
+          {intl.formatMessage({
+            defaultMessage: 'Contact me',
+            description: 'HomePage: contact button text',
+            id: 'sO/Iwj',
+          })}
+        </ButtonLink>
+      ),
+    },
+    {
+      id: 'rss-feed',
+      value: (
+        <ButtonLink target="/feed">
+          <FeedIcon
+            aria-hidden={true}
+            className={`${styles.icon} ${styles['icon--feed']}`}
+          />
+          {intl.formatMessage({
+            defaultMessage: 'Subscribe',
+            description: 'HomePage: RSS feed subscription text',
+            id: 'T4YA64',
+          })}
+        </ButtonLink>
+      ),
+    },
+  ];
 
-  /**
-   * Retrieve the Shaarli link.
-   *
-   * @returns {JSX.Element} - A list of links
-   */
-  const ShaarliLink = (): JSX.Element => {
-    const links: ListItem[] = [
-      {
-        id: 'shaarli',
-        value: (
-          <ButtonLink target="https://shaarli.armandphilippot.com/">
-            {intl.formatMessage({
-              defaultMessage: 'Shaarli',
-              description: 'HomePage: link to Shaarli',
-              id: 'i5L19t',
-            })}
-          </ButtonLink>
-        ),
-      },
-    ];
+  return <List kind="flex" items={links} className={styles.list} />;
+};
 
-    return <List kind="flex" items={links} className={styles.list} />;
-  };
+const StyledColumns = (props: ColumnsProps) => {
+  return <Columns className={styles.columns} {...props} />;
+};
 
-  /**
-   * Retrieve the additional links.
-   *
-   * @returns {JSX.Element} - A list of links.
-   */
-  const MoreLinks = (): JSX.Element => {
-    const links: ListItem[] = [
-      {
-        id: 'contact-me',
-        value: (
-          <ButtonLink target="/contact">
-            <Envelop aria-hidden={true} className={styles.icon} />
-            {intl.formatMessage({
-              defaultMessage: 'Contact me',
-              description: 'HomePage: contact button text',
-              id: 'sO/Iwj',
-            })}
-          </ButtonLink>
-        ),
-      },
-      {
-        id: 'rss-feed',
-        value: (
-          <ButtonLink target="/feed">
-            <FeedIcon
-              aria-hidden={true}
-              className={`${styles.icon} ${styles['icon--feed']}`}
-            />
-            {intl.formatMessage({
-              defaultMessage: 'Subscribe',
-              description: 'HomePage: RSS feed subscription text',
-              id: 'T4YA64',
-            })}
-          </ButtonLink>
-        ),
-      },
-    ];
+type HomeProps = {
+  recentPosts: ArticleCard[];
+  translation?: Messages;
+};
 
-    return <List kind="flex" items={links} className={styles.list} />;
-  };
+/**
+ * Home page.
+ */
+const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
+  const intl = useIntl();
+  const { schema: breadcrumbSchema } = useBreadcrumb({
+    title: '',
+    url: `/`,
+  });
 
   /**
    * Get a cards list of recent posts.
@@ -278,11 +285,9 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
   const components: NestedMDXComponents = {
     CodingLinks: CodingLinks,
     ColdarkRepos: ColdarkRepos,
-    Column: (props: ColumnProps) => <Column {...props} />,
-    Columns: (props: ColumnsProps) => (
-      <Columns className={styles.columns} {...props} />
-    ),
-    Image: (props: ResponsiveImageProps) => <ResponsiveImage {...props} />,
+    Column: Column,
+    Columns: StyledColumns,
+    Image: ResponsiveImage,
     LibreLinks: LibreLinks,
     MoreLinks: MoreLinks,
     RecentPosts: getRecentPosts,
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index a58a850..413f409 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -42,8 +42,8 @@ const LegalNoticePage: NextPageWithLayout = () => {
   };
 
   const components: NestedMDXComponents = {
-    Image: (props) => <ResponsiveImage {...props} />,
-    Link: (props) => <Link {...props} />,
+    Image: ResponsiveImage,
+    Link: Link,
   };
 
   const { website } = useSettings();
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 7539b55..79c3760 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -3,7 +3,9 @@ import SocialLink, {
   type SocialWebsite,
 } from '@components/atoms/links/social-link';
 import Spinner from '@components/atoms/loaders/spinner';
-import ResponsiveImage from '@components/molecules/images/responsive-image';
+import ResponsiveImage, {
+  ResponsiveImageProps,
+} from '@components/molecules/images/responsive-image';
 import Code from '@components/molecules/layout/code';
 import Gallery from '@components/organisms/images/gallery';
 import Overview, {
@@ -40,6 +42,10 @@ import Script from 'next/script';
 import { ComponentType } from 'react';
 import { useIntl } from 'react-intl';
 
+const BorderedImage = (props: ResponsiveImageProps) => {
+  return <ResponsiveImage withBorders={true} {...props} />;
+};
+
 type ProjectPageProps = {
   project: ProjectPreview;
   translation: Messages;
@@ -65,10 +71,10 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
   );
 
   const components: NestedMDXComponents = {
-    Code: (props) => <Code {...props} />,
-    Gallery: (props) => <Gallery {...props} />,
-    Image: (props) => <ResponsiveImage withBorders={true} {...props} />,
-    Link: (props) => <Link {...props} />,
+    Code: Code,
+    Gallery: Gallery,
+    Image: BorderedImage,
+    Link: Link,
   };
 
   const { website } = useSettings();
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index dbca019..aaf37e9 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -53,7 +53,7 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
   );
 
   const components: NestedMDXComponents = {
-    Links: (props) => <Link {...props} />,
+    Links: Link,
   };
 
   const { website } = useSettings();