aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/atoms/buttons/button-link.stories.tsx3
-rw-r--r--src/components/atoms/buttons/button-link.tsx13
-rw-r--r--src/components/atoms/links/link.tsx13
-rw-r--r--src/components/atoms/links/nav-link.tsx8
-rw-r--r--src/components/molecules/buttons/back-to-top.test.tsx2
-rw-r--r--src/components/molecules/images/flipping-logo.tsx5
-rw-r--r--src/components/molecules/images/responsive-image.module.scss5
-rw-r--r--src/components/molecules/images/responsive-image.tsx22
-rw-r--r--src/components/molecules/layout/branding.tsx4
-rw-r--r--src/components/molecules/layout/card.module.scss1
-rw-r--r--src/components/molecules/layout/card.tsx19
-rw-r--r--src/components/organisms/layout/cards-list.tsx9
-rw-r--r--src/components/organisms/layout/comment.test.tsx2
-rw-r--r--src/components/organisms/layout/comment.tsx17
-rw-r--r--src/components/organisms/layout/overview.module.scss6
-rw-r--r--src/components/organisms/layout/overview.tsx8
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"
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:54:49 +0000