refactor: consolidate FileContributors logic

deprecate redundant CrowdinContributors and GitHubContributors components; consolidate logic to gather file contributors list into `utils/contributors.ts` and use to fetch/organize all data in getStaticProps before passing to layout/components.

Author: wackerow

src/components/CrowdinContributors.tsx

@@ -21,12 +21,11 @@ import { ButtonLink } from "@/components/Buttons"
 import CallToContribute from "@/components/CallToContribute"
 import Card from "@/components/Card"
 import Codeblock from "@/components/Codeblock"
-import CrowdinContributors from "@/components/CrowdinContributors"
 import DeveloperDocsLinks from "@/components/DeveloperDocsLinks"
 import DocsNav from "@/components/DocsNav"
 import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
-import GitHubContributors from "@/components/GitHubContributors"
+import FileContributors from "@/components/FileContributors"
 import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import InfoBanner from "@/components/InfoBanner"
 import Link from "@/components/Link"
@@ -48,9 +47,6 @@ import YouTube from "@/components/YouTube"
 
 import { getEditPath } from "@/lib/utils/editPath"
 
-// Utils
-import { DEFAULT_LOCALE } from "@/lib/constants"
-
 const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
   <Flex
     direction="column"
@@ -202,9 +198,8 @@ type DocsLayoutProps = Pick<
   | "slug"
   | "tocItems"
   | "lastUpdatedDate"
-  | "crowdinContributors"
+  | "contributors"
   | "contentNotTranslated"
-  | "gitContributors"
 > &
   Required<Pick<MdPageContent, "lastUpdatedDate">> &
   ChildOnlyProp & {
@@ -217,20 +212,13 @@ export const DocsLayout = ({
   slug,
   tocItems,
   lastUpdatedDate,
-  crowdinContributors,
+  contributors,
   contentNotTranslated,
-  gitContributors,
 }: DocsLayoutProps) => {
   const isPageIncomplete = !!frontmatter.incomplete
   const { asPath: relativePath } = useRouter()
   const absoluteEditPath = getEditPath(relativePath)
 
-  const gitHubLastEdit = gitContributors[0]?.date
-  const intlLastEdit = gitHubLastEdit || lastUpdatedDate
-
-  const useGitHubContributors =
-    frontmatter.lang === DEFAULT_LOCALE || crowdinContributors.length === 0
-
   return (
     <Page>
       <SideNavMobile path={relativePath} />
@@ -243,18 +231,10 @@ export const DocsLayout = ({
         <SideNav path={relativePath} />
         <Content>
           <H1 id="top">{frontmatter.title}</H1>
-          {useGitHubContributors ? (
-            <GitHubContributors
-              lastUpdatedDate={lastUpdatedDate}
-              contributors={gitContributors}
-            />
-          ) : (
-            <CrowdinContributors
-              relativePath={relativePath}
-              lastUpdatedDate={intlLastEdit}
-              contributors={crowdinContributors}
-            />
-          )}
+          <FileContributors
+            contributors={contributors}
+            lastEdit={lastUpdatedDate}
+          />
           <TableOfContents
             slug={slug}
             editPath={absoluteEditPath}

src/components/GitHubContributors.tsx

@@ -12,18 +12,17 @@ import {
   useToken,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
+import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, TutorialFrontmatter } from "@/lib/interfaces"
 
 import { ButtonLink } from "@/components/Buttons"
 import CallToContribute from "@/components/CallToContribute"
 import Card from "@/components/Card"
 import Codeblock from "@/components/Codeblock"
-import CrowdinContributors from "@/components/CrowdinContributors"
 import Emoji from "@/components/Emoji"
 import EnvWarningBanner from "@/components/EnvWarningBanner"
 import FeedbackCard from "@/components/FeedbackCard"
-import GitHubContributors from "@/components/GitHubContributors"
+import FileContributors from "@/components/FileContributors"
 import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import InfoBanner from "@/components/InfoBanner"
 import MainArticle from "@/components/MainArticle"
@@ -41,8 +40,6 @@ import YouTube from "@/components/YouTube"
 
 import { getEditPath } from "@/lib/utils/editPath"
 
-import { DEFAULT_LOCALE } from "@/lib/constants"
-
 type ContentContainerProps = Pick<BoxProps, "children" | "dir">
 
 const ContentContainer = (props: ContentContainerProps) => {
@@ -157,13 +154,7 @@ export const tutorialsComponents = {
   YouTube,
 }
 type TutorialLayoutProps = ChildOnlyProp &
-  Pick<
-    MdPageContent,
-    | "tocItems"
-    | "crowdinContributors"
-    | "contentNotTranslated"
-    | "gitContributors"
-  > &
+  Pick<MdPageContent, "tocItems" | "contributors" | "contentNotTranslated"> &
   Required<Pick<MdPageContent, "lastUpdatedDate">> & {
     frontmatter: TutorialFrontmatter
     timeToRead: number
@@ -175,19 +166,13 @@ export const TutorialLayout = ({
   tocItems,
   timeToRead,
   lastUpdatedDate,
-  crowdinContributors,
+  contributors,
   contentNotTranslated,
-  gitContributors,
 }: TutorialLayoutProps) => {
   const { asPath: relativePath } = useRouter()
   const absoluteEditPath = getEditPath(relativePath)
 
   const borderColor = useToken("colors", "border")
-  const gitHubLastEdit = gitContributors[0]?.date
-  const intlLastEdit = gitHubLastEdit || lastUpdatedDate
-
-  const useGitHubContributors =
-    frontmatter.lang === DEFAULT_LOCALE || crowdinContributors.length === 0
 
   return (
     <>
@@ -209,18 +194,10 @@ export const TutorialLayout = ({
             pt={8}
           />
           {children}
-          {useGitHubContributors ? (
-            <GitHubContributors
-              contributors={gitContributors}
-              lastUpdatedDate={lastUpdatedDate}
-            />
-          ) : (
-            <CrowdinContributors
-              relativePath={relativePath}
-              lastUpdatedDate={intlLastEdit}
-              contributors={crowdinContributors}
-            />
-          )}
+          <FileContributors
+            contributors={contributors}
+            lastEdit={lastUpdatedDate}
+          />
           <FeedbackCard />
         </ContentContainer>
         {tocItems && (

src/layouts/Docs.tsx

@@ -49,7 +49,9 @@ async function fetchWithRateLimit(
 }
 
 // Fetch commit history and save it to a JSON file
-export const fetchAndCacheGitContributors = async (mdDir: string) => {
+export const fetchAndCacheGitContributors = async (
+  mdDir: string
+): Promise<FileContributor[]> => {
   const filepath = join("/", mdDir, "index.md")
 
   // Load cache

src/layouts/Tutorial.tsx

@@ -107,8 +107,7 @@ export interface MdPageContent {
   tocItems: ToCItem[]
   lastUpdatedDate?: string
   contentNotTranslated: boolean
-  crowdinContributors: CrowdinContributor[]
-  gitContributors: FileContributor[]
+  contributors: FileContributor[]
 }
 
 // Local environment framework

src/lib/api/fetchGitHistory.ts

@@ -374,7 +374,7 @@ export type FileContributor = {
   login: string
   avatar_url: string
   html_url: string
-  date: string
+  date?: string
 }
 
 /**

src/lib/interfaces.ts

@@ -0,0 +1,41 @@
+import type { FileContributor, Lang, Layout } from "@/lib/types"
+
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
+import {
+  convertToFileContributorFromCrowdin,
+  getCrowdinContributors,
+} from "./crowdin"
+import { getLastModifiedDate } from "./gh"
+
+import { fetchAndCacheGitContributors } from "@/lib/api/fetchGitHistory"
+
+export const getFileContributorInfo = async (
+  mdDir: string,
+  mdPath: string,
+  slug: string,
+  locale: string,
+  fileLang: string,
+  layout: Layout
+) => {
+  const gitContributors = await fetchAndCacheGitContributors(mdDir)
+
+  const latestCommitDate = getLastModifiedDate(slug, locale!)
+  const gitHubLastEdit = gitContributors[0]?.date
+  const lastUpdatedDate = gitHubLastEdit || latestCommitDate
+
+  const crowdinContributors = ["docs", "tutorial"].includes(layout)
+    ? convertToFileContributorFromCrowdin(
+        getCrowdinContributors(mdPath, locale as Lang)
+      )
+    : []
+
+  const useGitHubContributors: boolean =
+    fileLang === DEFAULT_LOCALE || crowdinContributors.length === 0
+
+  const contributors: FileContributor[] = useGitHubContributors
+    ? gitContributors
+    : crowdinContributors
+
+  return { contributors, lastUpdatedDate }
+}

src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { CrowdinContributor, Lang } from "@/lib/types"
+import type { CrowdinContributor, FileContributor, Lang } from "@/lib/types"
 
 import translators from "@/data/crowdin/combined-translators.json"
 import fileIds from "@/data/crowdin/file-ids.json"
@@ -22,3 +22,12 @@ export const getCrowdinContributors = (
   const data = translators.filter(({ lang }) => lang === locale)[0]?.data ?? []
   return data.filter(({ fileId }) => +fileId === _fileId)[0]?.contributors ?? []
 }
+
+export const convertToFileContributorFromCrowdin = (
+  contributors: CrowdinContributor[]
+): FileContributor[] =>
+  contributors.map(({ username, avatarUrl }) => ({
+    login: username,
+    avatar_url: avatarUrl,
+    html_url: `https://crowdin.com/profile/${username}`,
+  }))

src/lib/utils/contributors.ts

@@ -332,10 +332,7 @@ export const getContentBySlug = (slug: string) => {
   const fileContents = fs.readFileSync(fullPath, "utf8")
   const { data, content } = matter(fileContents)
   const frontmatter = data as Frontmatter
-  const items: Omit<
-    MdPageContent,
-    "tocItems" | "crowdinContributors" | "gitContributors"
-  > = {
+  const items: Omit<MdPageContent, "tocItems" | "contributors"> = {
     slug,
     content,
     frontmatter,