From 1a3042697a1793ef0c61ff1d3cb5b3ebe7b4ccf0 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Tue, 20 Aug 2024 21:22:49 +0200 Subject: [PATCH 1/4] feat: poc generated image --- .../src/theme-classic.d.ts | 10 +++ .../Author/GeneratedImage/index.tsx | 65 +++++++++++++++++++ .../Author/GeneratedImage/styles.module.css | 11 ++++ .../theme/Blog/Components/Author/index.tsx | 9 ++- 4 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index e0d5f47a8e13..0799f01369a8 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -209,6 +209,16 @@ declare module '@theme/Blog/Components/Author/Socials' { export default function BlogAuthorSocials(props: Props): JSX.Element; } +declare module '@theme/Blog/Components/Author/GeneratedImage' { + export interface Props { + readonly name: string; + readonly link?: string; + readonly className?: string; + } + + export default function GeneratedImage(props: Props): JSX.Element; +} + declare module '@theme/BlogListPaginator' { import type {BlogPaginatedMetadata} from '@docusaurus/plugin-content-blog'; diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx new file mode 100644 index 000000000000..ce6d8a0893c5 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx @@ -0,0 +1,65 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +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'; +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 ; + } + return <>{props.children}; +} + +export default function GeneratedImage({ + name, + 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 ( + + + + + + + + + + + {name![0]?.toLocaleUpperCase()} + + + + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css new file mode 100644 index 000000000000..f7910281aa10 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css @@ -0,0 +1,11 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.authorSvg { + width: var(--ifm-avatar-photo-size); + height: var(--ifm-avatar-photo-size); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx index 5861b3da8091..1a1153d00963 100644 --- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx @@ -11,6 +11,7 @@ import Link, {type Props as LinkProps} from '@docusaurus/Link'; import AuthorSocials from '@theme/Blog/Components/Author/Socials'; import type {Props} from '@theme/Blog/Components/Author'; import Heading from '@theme/Heading'; +import GeneratedImage from '@theme/Blog/Components/Author/GeneratedImage'; import styles from './styles.module.css'; function MaybeLink(props: LinkProps): JSX.Element { @@ -65,7 +66,7 @@ export default function BlogAuthor({ className, styles[`author-as-${as}`], )}> - {imageURL && ( + {imageURL ? ( {name} + ) : ( + )} {(name || title) && ( From 0066de5e0875d4741a27edb9a8f800fb2d06a7bb Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Wed, 21 Aug 2024 15:00:41 +0200 Subject: [PATCH 2/4] grey generated image --- .../Author/GeneratedImage/index.tsx | 24 ++----------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx index ce6d8a0893c5..35f56b679c48 100644 --- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx @@ -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 ; @@ -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 ( - - - - - - - + - {name![0]?.toLocaleUpperCase()} + {name[0]?.toLocaleUpperCase()} From 391f42946367333c3971c719833852a0248662ff Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Thu, 22 Aug 2024 16:46:03 +0200 Subject: [PATCH 3/4] refactor --- .../Blog/Components/Author/GeneratedImage/index.tsx | 11 ++++++++--- .../Author/GeneratedImage/styles.module.css | 11 ----------- .../theme/Blog/Components/Author/styles.module.css | 1 + website/_dogfooding/_blog tests/authors.yml | 8 ++++++++ 4 files changed, 17 insertions(+), 14 deletions(-) delete mode 100644 packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx index 35f56b679c48..fea99c75ad8c 100644 --- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx @@ -9,7 +9,6 @@ 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'; -import styles from './styles.module.css'; function MaybeLink(props: LinkProps): JSX.Element { if (props.href) { @@ -26,10 +25,16 @@ export default function GeneratedImage({ return ( - + + + + + + + Date: Mon, 26 Aug 2024 15:13:41 +0200 Subject: [PATCH 4/4] refactor review --- .../Author/GeneratedImage/index.tsx | 40 ++----------------- .../theme/Blog/Components/Author/index.tsx | 12 +++--- .../Blog/Components/Author/styles.module.css | 23 ++++++++++- 3 files changed, 33 insertions(+), 42 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx index fea99c75ad8c..9c2076840ab2 100644 --- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx @@ -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 ; - } - return <>{props.children}; -} - -export default function GeneratedImage({ - name, - link, - className, -}: Props): JSX.Element { +export default function GeneratedImage({name, className}: Props): JSX.Element { return ( - - - - - - - - - - - {name[0]?.toLocaleUpperCase()} - - - +
+ {name[0]?.toLocaleUpperCase()} +
); } diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx index 93665396a7e7..a56217920203 100644 --- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx @@ -75,11 +75,13 @@ export default function BlogAuthor({ /> ) : ( - + + + )} {(name || title) && ( diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css index 3d0fc01ec619..a2f928b1e066 100644 --- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css @@ -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; }