jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:26:37 -04:00
Code Issues Activity

dynamic opengraph images

Browse Source
This commit is contained in:
Jake Jarvis
2025-03-14 08:22:32 -04:00
parent 4d2febd262
commit e162d6a46c
35 changed files with 310 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/Header/Header.tsx
View File

@ -24,7 +24,6 @@ const Header = ({ className, ...rest }: HeaderProps) => {
height={70}
quality={60}
placeholder="empty"
inline
priority
/>
<span className={styles.name}>{config.authorName}</span>

9
components/Image/Image.module.css
View File

@ -3,12 +3,3 @@
max-width: 100%;
border-radius: var(--radii-corner);
}
.block {
display: block;
line-height: 0;
/* default to centering all images */
margin: 1em auto;
text-align: center;
}

10
components/Image/Image.tsx
View File

@ -7,11 +7,9 @@ import styles from "./Image.module.css";
const MAX_WIDTH = 865;
export type ImageProps = ComponentPropsWithoutRef<typeof NextImage> & {
inline?: boolean; // don't wrap everything in a `<div>` block
};
export type ImageProps = ComponentPropsWithoutRef<typeof NextImage>;
const Image = ({ src, height, width, quality, placeholder, inline, className, ...rest }: ImageProps) => {
const Image = ({ src, height, width, quality, placeholder, className, ...rest }: ImageProps) => {
const constrainWidth = (width?: number | `${number}`) => {
if (!width) return MAX_WIDTH;
@ -27,9 +25,7 @@ const Image = ({ src, height, width, quality, placeholder, inline, className, ..
...rest,
};
const StyledImageWithProps = <NextImage className={clsx(styles.image, className)} {...imageProps} />;
return inline ? StyledImageWithProps : <div className={styles.block}>{StyledImageWithProps}</div>;
return <NextImage className={clsx(styles.image, className)} {...imageProps} />;
};
export default Image;