3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-28 09:47:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor review

Browse source
This commit is contained in:
ozakione 2024-08-26 15:13:41 +02:00
parent 1686134d1c
commit ee4a5f8c09
3 changed files with 33 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx
View file

@ -7,44 +7,12 @@
import React from 'react';
import clsx from 'clsx';
import Link, {type Props as LinkProps} from '@docusaurus/Link';
import type {Props} from '@theme/Blog/Components/Author/GeneratedImage';
function MaybeLink(props: LinkProps): JSX.Element {
if (props.href) {
return <Link {...props} />;
}
return <>{props.children}</>;
}
export default function GeneratedImage({
name,
link,
className,
}: Props): JSX.Element {
export default function GeneratedImage({name, className}: Props): JSX.Element {
return (
<MaybeLink href={link} className="avatar__photo-link">
<svg
className={clsx('avatar__photo', className)}
viewBox="0 0 72 72"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="greyGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" style={{stopColor: '#ccc', stopOpacity: 1}} />
<stop offset="100%" style={{stopColor: '#777', stopOpacity: 1}} />
</linearGradient>
</defs>
<circle cx="36" cy="36" r="36" fill="url(#greyGradient)" />
<text
x="50%"
y="50%"
textAnchor="middle"
alignmentBaseline="central"
fontSize="2rem"
fill="#fff">
{name[0]?.toLocaleUpperCase()}
</text>
</svg>
</MaybeLink>
<div className={clsx('avatar__photo', className)}>
{name[0]?.toLocaleUpperCase()}
</div>
);
}

12
packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx
View file

@ -75,11 +75,13 @@ export default function BlogAuthor({
/>
</MaybeLink>
) : (
<GeneratedImage
name={name!}
link={link}
className={clsx(styles.authorImage)}
/>
<MaybeLink href={link} className="avatar__photo-link">
<GeneratedImage
name={name!}
link={link}
className={clsx(styles.authorImage, styles.authorGeneratedImage)}
/>
</MaybeLink>
)}
{(name || title) && (

23
packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css
View file

@ -7,13 +7,34 @@
.authorImage {
--ifm-avatar-photo-size: 3.6rem;
background: grey;
background: var(--ifm-color-emphasis-200);
}
.author-as-h1 .authorImage {
--ifm-avatar-photo-size: 7rem;
}
.authorGeneratedImage {
display: flex;
justify-content: center;
align-items: center;
color: var(--ifm-color-emphasis-0);
font-size: 2rem;
background: linear-gradient(
135deg,
var(--ifm-color-emphasis-700) 0%,
var(--ifm-color-emphasis-1000) 100%
);
}
[data-theme='dark'] .authorGeneratedImage {
background: linear-gradient(
135deg,
var(--ifm-color-emphasis-800) 0%,
var(--ifm-color-emphasis-200) 100%
);
}
.author-as-h2 .authorImage {
--ifm-avatar-photo-size: 5.4rem;
}