feat(metabar): Add avatarGroup on learn section (nodejs#6467)

* feat(metabar): allow Avatar

* fix(styles): overflow

* story: add more avatar on MetaBar

* fix: scrollbar on avatar

* update/clean logic

* update style

* feat(metabar): use breakpoint for limit of avatar

---------

Co-authored-by: Claudio W <[email protected]>

Author: AugustinMauroy

components/Common/AvatarGroup/Avatar/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 
 import styles from './index.module.css';
 
-type AvatarProps = {
+export type AvatarProps = {
   src: string;
   alt: string;
 };

components/Common/AvatarGroup/index.module.css

@@ -1,5 +1,7 @@
 .avatarGroup {
-  @apply flex
-    h-8
-    items-center;
+  @apply -mb-4
+    flex
+    items-center
+    overflow-x-auto
+    pb-4;
 }

components/Containers/MetaBar/index.module.css

@@ -19,6 +19,10 @@
     xs:border-t-neutral-200
     xs:dark:border-t-neutral-900;
 
+  dl {
+    @apply w-full;
+  }
+
   dt {
     @apply mb-2
       text-sm

components/Containers/MetaBar/index.stories.tsx

@@ -5,10 +5,28 @@ import AvatarGroup from '@/components/Common/AvatarGroup';
 import MetaBar from '@/components/Containers/MetaBar';
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
+import { getGitHubAvatarUrl } from '@/util/gitHubUtils';
 
 type Story = StoryObj<typeof MetaBar>;
 type Meta = MetaObj<typeof MetaBar>;
 
+const names = [
+  'ovflowd',
+  'bmuenzenmeyer',
+  'AugustinMauroy',
+  'HinataKah0',
+  'Harkunwar',
+  'rodion-arr',
+  'mikeesto',
+  'bnb',
+  'benhalverson',
+  'aymen94',
+  'shanpriyan',
+  'Wai-Dung',
+  'manishprivet',
+  'araujogui',
+];
+
 export const Default: Story = {
   args: {
     items: {
@@ -20,20 +38,11 @@ export const Default: Story = {
       'components.metabar.author': 'The Node.js Project',
       'components.metabar.authors': (
         <AvatarGroup
-          avatars={[
-            {
-              src: 'https://avatars.githubusercontent.com/canerakdas',
-              alt: 'Caner Akdas',
-            },
-            {
-              src: 'https://avatars.githubusercontent.com/bmuenzenmeyer',
-              alt: 'Brian Muenzenmeyer',
-            },
-            {
-              src: 'https://avatars.githubusercontent.com/ovflowd',
-              alt: 'Claudio W',
-            },
-          ]}
+          avatars={names.map(name => ({
+            src: getGitHubAvatarUrl(name),
+            alt: name,
+          }))}
+          limit={8}
         />
       ),
       'components.metabar.contribute': (

components/withMetaBar.tsx

@@ -1,26 +1,46 @@
+'use client';
 import { useFormatter } from 'next-intl';
 import type { FC } from 'react';
 
+import AvatarGroup from '@/components/Common/AvatarGroup';
 import MetaBar from '@/components/Containers/MetaBar';
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
-import { useClientContext } from '@/hooks/server';
+import { useClientContext } from '@/hooks/react-client';
+import useMediaQuery from '@/hooks/react-client/useMediaQuery';
 import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
-import { getGitHubBlobUrl } from '@/util/gitHubUtils';
+import { getGitHubBlobUrl, getGitHubAvatarUrl } from '@/util/gitHubUtils';
+import { getAcronymFromString } from '@/util/stringUtils';
 
 const WithMetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
-
   const lastUpdated = frontmatter.date
     ? formatter.dateTime(new Date(frontmatter.date), DEFAULT_DATE_FORMAT)
     : undefined;
 
+  const usernames =
+    frontmatter.authors?.split(',').map(author => author.trim()) ?? [];
+  const avatars = usernames.map(username => ({
+    src: getGitHubAvatarUrl(username),
+    alt: getAcronymFromString(username),
+  }));
+
+  // Doing that because on mobile list on top of page and on desktop list on the right side
+  const shortAvatarList = useMediaQuery(
+    '(min-width: 670px) and (max-width: 1280px)'
+  );
+
   return (
     <MetaBar
       items={{
         'components.metabar.lastUpdated': lastUpdated,
         'components.metabar.readingTime': readingTime.text,
+        ...(avatars.length && {
+          [`components.metabar.${avatars.length > 1 ? 'authors' : 'author'}`]: (
+            <AvatarGroup avatars={avatars} limit={shortAvatarList ? 4 : 8} />
+          ),
+        }),
         'components.metabar.contribute': (
           <>
             <GitHub className="fill-neutral-700 dark:fill-neutral-100" />

types/frontmatter.ts

@@ -6,6 +6,7 @@ export interface LegacyFrontMatter extends Record<string, any> {
   layout?: Layouts;
   title?: string;
   labels?: Record<string, string>;
+  authors?: string;
 }
 
 // @TODO: Extra data from Frontmatter should not be a thing in the future