15308555518/ docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-12-26 01:33:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

grey generated image

This commit is contained in:
ozakione 2024-08-21 15:00:41 +02:00
parent 1a3042697a
commit 0066de5e08
1 changed files with 2 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx
View File

@ -11,14 +11,6 @@ import Link, {type Props as LinkProps} from '@docusaurus/Link';
import type {Props} from '@theme/Blog/Components/Author/GeneratedImage';
import styles from './styles.module.css';
const hashString = (str: string) => {
let hash = 0;
for (let i = 0; i < str.length; i += 1) {
hash = (hash + str.charCodeAt(i) * (i + 1)) % 1000;
}
return hash;
};
function MaybeLink(props: LinkProps): JSX.Element {
if (props.href) {
return <Link {...props} />;
@ -31,25 +23,13 @@ export default function GeneratedImage({
link,
className,
}: Props): JSX.Element {
const gradientId = `grad-${link}`;
const hashName = hashString(name);
const primaryColor = `hsl(${hashName % 360}, 95%, 50%)`;
const secondaryColor = `hsl(${(hashName + 120) % 360}, 95%, 50%)`;
return (
<MaybeLink href={link} className="avatar__photo-link">
<svg
className={clsx('avatar__photo-link', styles.authorSvg, className)}
viewBox="0 0 72 72"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stopColor={primaryColor} />
<stop offset="100%" stopColor={secondaryColor} />
</linearGradient>
</defs>
<circle cx="36" cy="36" r="36" fill={`url(#${gradientId})`} />
<circle cx="36" cy="36" r="36" fill="grey" />
<text
x="50%"
y="50%"
@ -57,7 +37,7 @@ export default function GeneratedImage({
alignmentBaseline="central"
fontSize="2rem"
fill="#fff">
{name![0]?.toLocaleUpperCase()}
{name[0]?.toLocaleUpperCase()}
</text>
</svg>
</MaybeLink>