feat: update empty avatar img (#928)

eleven-labs · Apr 24, 2023 · 0f4a2bb · 0f4a2bb
1 parent e6a4987
commit 0f4a2bb
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 15 deletions.
diff --git a/public/imgs/astronaut.png b/public/imgs/astronaut.png
diff --git a/src/containers/AuthorPageContainer/useAuthorPageContainer.tsx b/src/containers/AuthorPageContainer/useAuthorPageContainer.tsx
@@ -4,6 +4,7 @@ import { useLoaderData } from 'react-router-dom';
 
 import { BackLinkContainer } from '@/containers/BackLinkContainer/BackLinkContainer';
 import { PostPreviewListContainer } from '@/containers/PostPreviewListContainer';
+import { getPathFile } from '@/helpers/assetHelper';
 import { type getDataFromAuthorPage } from '@/helpers/contentHelper';
 import { useNewsletterBlock } from '@/hooks/useNewsletterBlock';
 import { AuthorPageProps } from '@/pages/AuthorPage';
@@ -20,6 +21,7 @@ export const useAuthorPageContainer = (): AuthorPageProps | undefined => {
   return {
     backLink: <BackLinkContainer />,
     author: resultAuthorPage.author,
+    emptyAvatarImageUrl: getPathFile('/imgs/astronaut.png'),
     title: t('pages.author.post_preview_list_title'),
     postPreviewList: <PostPreviewListContainer allPosts={resultAuthorPage.posts} />,
     newsletterBlock,

diff --git a/src/containers/PostPageContainer/usePostPageContainer.tsx b/src/containers/PostPageContainer/usePostPageContainer.tsx
@@ -6,6 +6,7 @@ import { useLoaderData } from 'react-router-dom';
 import { PATHS } from '@/constants';
 import { BackLinkContainer } from '@/containers/BackLinkContainer/BackLinkContainer';
 import { LinkContainer } from '@/containers/LinkContainer';
+import { getPathFile } from '@/helpers/assetHelper';
 import { type getDataFromPostPage } from '@/helpers/contentHelper';
 import { useDateToString } from '@/hooks/useDateToString';
 import { useNewsletterBlock } from '@/hooks/useNewsletterBlock';
@@ -59,6 +60,7 @@ export const usePostPageContainer = (): PostPageProps | undefined => {
     footer: {
       title: t('pages.post.post_footer_title'),
       authors,
+      emptyAvatarImageUrl: getPathFile('/imgs/astronaut.png'),
     },
     newsletterBlock,
     relatedPostList: {

diff --git a/src/helpers/contentHelper.ts b/src/helpers/contentHelper.ts
@@ -47,16 +47,14 @@ const transformPost = (options: { data: PostData; rawContent: string; content: s
 });
 
 const transformAuthor = ({ data, content }: { data: AuthorData; content: string }): TransformedAuthor => {
-  const avatarImagePath = path.resolve(IMGS_DIR, 'authors', `${data}.jpg`);
-  const avatarImageUrl = existsSync(avatarImagePath)
-    ? getPathFile(`/imgs/authors/${data.login}.jpg`)
-    : getPathFile('/imgs/astronaut.png');
   return {
     username: data.login,
     name: data.title,
     github: data?.github,
     twitter: data?.twitter,
-    avatarImageUrl,
+    avatarImageUrl: existsSync(path.resolve(IMGS_DIR, 'authors', `${data}.jpg`))
+      ? getPathFile(`/imgs/authors/${data.login}.jpg`)
+      : undefined,
     content,
   };
 };

diff --git a/src/pages/AuthorPage/AuthorPage.scss b/src/pages/AuthorPage/AuthorPage.scss
@@ -3,11 +3,14 @@
 .author-page {
   --avatar-img-author-page: 120px;
 
-  &__avatar_img {
-    background-color: var(--color-light-grey);
+  &__empty-avatar-img, &__avatar-img {
     height: var(--avatar-img-author-page);
     width: var(--avatar-img-author-page);
+  }
+
+  &__avatar-img {
     border-radius: 100%;
+    background-color: var(--color-light-grey);
   }
 
   &__divider {

diff --git a/src/pages/AuthorPage/AuthorPage.stories.tsx b/src/pages/AuthorPage/AuthorPage.stories.tsx
@@ -16,9 +16,9 @@ export default {
     author: {
       username: 'jdoe',
       name: 'John Doe',
-      avatarImageUrl: 'https://api.dicebear.com/5.x/avataaars/svg?seed=Felix',
       content: 'Astronaute John Doe @ ElevenLabs_\uD83D\uDE80',
     },
+    emptyAvatarImageUrl: '/imgs/astronaut.png',
     title: `Article de l'auteur`,
     postPreviewList: React.createElement<PostPreviewListProps>(PostPreviewList, {
       ...PostPreviewListStories.default.args,

diff --git a/src/pages/AuthorPage/AuthorPage.tsx b/src/pages/AuthorPage/AuthorPage.tsx
@@ -13,6 +13,7 @@ export type AuthorPageProps = {
     avatarImageUrl?: string;
     content: string;
   };
+  emptyAvatarImageUrl: string;
   title: React.ReactNode;
   postPreviewList: React.ReactNode;
   newsletterBlock: NewsletterBlockProps;
@@ -21,6 +22,7 @@ export type AuthorPageProps = {
 export const AuthorPage: React.FC<AuthorPageProps> = ({
   backLink,
   author,
+  emptyAvatarImageUrl,
   title,
   postPreviewList,
   newsletterBlock,
@@ -34,7 +36,11 @@ export const AuthorPage: React.FC<AuthorPageProps> = ({
       textAlign={{ xs: 'center', md: 'left' }}
       mt={{ xs: 'm' }}
     >
-      <img src={author.avatarImageUrl} alt={author.name} className="author-page__avatar_img" />
+      <img
+        src={author.avatarImageUrl ?? emptyAvatarImageUrl}
+        alt={author.name}
+        className={author.avatarImageUrl ? 'author-page__avatar-img' : 'author-page__empty-avatar-img'}
+      />
       <Box mt={{ xs: 's' }} ml={{ xs: 'm' }}>
         <Text size="m" fontWeight="medium" color="amaranth">
           {author.name}

diff --git a/src/pages/PostPage/PostFooter/PostFooter.scss b/src/pages/PostPage/PostFooter/PostFooter.scss
@@ -9,10 +9,13 @@
     }
   }
 
-  &__avatar_img {
-    background-color: var(--color-light-grey);
+  &__empty-avatar-img, &__avatar-img {
     height: var(--avatar-img-post-footer);
     width: var(--avatar-img-post-footer);
+  }
+
+  &__avatar-img {
     border-radius: 100%;
+    background-color: var(--color-light-grey);
   }
 }
diff --git a/src/pages/PostPage/PostFooter/PostFooter.tsx b/src/pages/PostPage/PostFooter/PostFooter.tsx
@@ -11,17 +11,22 @@ export interface PostFooterProps {
     link: AsProps<'a'>;
     avatarImageUrl?: string;
   }[];
+  emptyAvatarImageUrl: string;
 }
 
-export const PostFooter: React.FC<PostFooterProps> = ({ title, authors }) => (
+export const PostFooter: React.FC<PostFooterProps> = ({ title, authors, emptyAvatarImageUrl }) => (
   <Box className="post-footer" color="dark-grey" mt="m">
     <Text mb="xxs" size="xs" fontWeight="bold" textTransform="uppercase">
       {title}
     </Text>
     <Flex flexDirection={{ xs: 'column', md: 'row' }} gapY={{ md: 'xxl' }} gap="s">
       {authors.map((author, authorIndex) => (
         <Flex key={authorIndex} mb="s" className="post-footer__author">
-          <img src={author.avatarImageUrl} alt={author.name} className="post-footer__avatar_img" />
+          <img
+            src={author.avatarImageUrl ?? emptyAvatarImageUrl}
+            alt={author.name}
+            className={author.avatarImageUrl ? 'post-footer__avatar-img' : 'post-footer__empty-avatar-img'}
+          />
           <Box ml="xxs">
             <Link weight="medium" {...author.link}>
               {author.name}

diff --git a/src/pages/PostPage/PostPage.stories.tsx b/src/pages/PostPage/PostPage.stories.tsx
@@ -75,21 +75,20 @@ export default {
       authors: [
         {
           name: 'John Doe',
-          avatarImageUrl: 'https://api.dicebear.com/5.x/avataaars/svg?seed=Felix',
           content: 'Astronaute John Doe @ ElevenLabs_\uD83D\uDE80',
           link: {
             href: '/fr/authors/jdoe',
           },
         },
         {
           name: 'Jeane Dupont',
-          avatarImageUrl: 'https://api.dicebear.com/5.x/avataaars/svg?seed=Lola',
           content: 'Astronaute Jeane Dupont @ ElevenLabs_\uD83D\uDE80',
           link: {
             href: '/fr/authors/jdupont',
           },
         },
       ],
+      emptyAvatarImageUrl: '/imgs/astronaut.png',
     },
     newsletterBlock: NewsletterBlockStories.args,
     relatedPostList: {