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

16 files changed, 60 insertions, 77 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"