Merge pull request #10616 from ethereum/addTranslatorsToContributors

Add Translators as contributors on non-English docs/tutorials

Author: corwintines

.github/workflows/get-crowdin-contributors.yml

@@ -0,0 +1,63 @@
+name: Update Crowdin Contributors
+
+on:
+  schedule:
+    - cron: "0 0 * * SUN" # Runs every Sunday at midnight
+  workflow_dispatch:
+
+jobs:
+  create_pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Install ts-node
+        run: yarn global add ts-node
+         
+      - name: Set up git
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "GitHub Action"
+
+      - name: Generate timestamp and readable date
+        id: date
+        run: |
+          echo "TIMESTAMP=$(date +'%Y%m%d%H%M%S')" >> $GITHUB_ENV
+          echo "READABLE_DATE=$(date +'%B %-d')" >> $GITHUB_ENV
+
+      - name: Fetch latest dev and create new branch
+        run: |
+          git fetch origin dev
+          git checkout -b "automated-update-${{ env.TIMESTAMP }}" origin/dev
+
+      - name: Run script
+        run: npx ts-node -O '{"module":"commonjs"}' ./src/scripts/crowdin/getCrowdinContributors.ts
+        env:
+          CROWDIN_API_KEY: ${{ secrets.CROWDIN_API_KEY }}
+
+      - name: Commit and push
+        run: |
+          git add -A
+          git commit -m "Update Crowdin contributors"
+          git push origin "automated-update-${{ env.TIMESTAMP }}"
+
+      - name: Create PR body
+        run: |
+          echo "This PR was automatically created to update Crowdin contributors." > pr_body.txt
+          echo "This workflows runs every Sunday at 00:00 (UTC)." >> pr_body.txt
+          echo "" >> pr_body.txt
+          echo "Thank you to everyone contributing to translate ethereum.org ❤️" >> pr_body.txt
+
+      - name: Create Pull Request
+        run: |
+          gh auth login --with-token <<< ${{ secrets.GITHUB_TOKEN }}
+          gh pr create --base dev --head "automated-update-${{ env.TIMESTAMP }}" --title "Update translation contributors from Crowdin - ${{ env.READABLE_DATE }}" --body-file pr_body.txt

package.json

@@ -11,6 +11,7 @@
     "@apollo/client": "^3.3.13",
     "@chakra-ui/gatsby-plugin": "^3.1.3",
     "@chakra-ui/react": "2.6.1",
+    "@crowdin/crowdin-api-client": "^1.23.2",
     "@docsearch/react": "^3.3.3",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
@@ -131,6 +132,7 @@
     "generate-heading-ids": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/generateHeadingIds.ts",
     "unused-translations": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/unusedTranslations.ts",
     "reorg-intl": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/reorgIntlFiles.ts",
+    "crowdin-contributors": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/getCrowdinContributors.ts",
     "start": "gatsby develop",
     "start:lambda": "netlify-lambda serve src/lambda",
     "start:static": "gatsby build && gatsby serve",

src/components/FileContributors.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 
 import { useI18next } from "gatsby-plugin-react-i18next"
-import { useQuery, gql } from "@apollo/client"
+import { gql } from "@apollo/client"
 
 import {
   Avatar,
@@ -12,7 +12,6 @@ import {
   ListItem,
   ModalBody,
   ModalHeader,
-  Show,
   Skeleton as ChakraSkeleton,
   SkeletonCircle as ChakraSkeletonCircle,
   Text,
@@ -31,7 +30,7 @@ import Modal from "./Modal"
 import Translation from "./Translation"
 import Button from "./Button"
 
-interface Author {
+export interface Author {
   name: string
   email: string
   avatarUrl: string
@@ -41,7 +40,7 @@ interface Author {
   }
 }
 
-interface Commit {
+export interface Commit {
   author: Author
   committedDate: string
 }
@@ -121,48 +120,28 @@ const Contributor = ({ contributor }: { contributor: Author }) => {
 export interface IProps extends FlexProps {
   relativePath: string
   editPath?: string
+  contributors: Array<Author>
+  lastContributor: any
+  loading: Boolean
+  error: any
+  lastEdit: string
 }
 
 const FileContributors: React.FC<IProps> = ({
   relativePath,
   editPath,
+  contributors,
+  lastContributor,
+  loading,
+  error,
+  lastEdit,
   ...props
 }) => {
   const [isModalOpen, setModalOpen] = useState(false)
   const { language } = useI18next()
 
-  const { loading, error, data } = useQuery(COMMIT_HISTORY, {
-    variables: { relativePath },
-  })
-
   if (error) return null
 
-  const commits: Array<Commit> =
-    data?.repository?.ref?.target?.history?.edges?.map((commit) => commit.node)
-
-  const lastCommit = commits?.[0] || {}
-  const lastContributor = lastCommit?.author || {}
-  const uniqueContributors =
-    commits?.reduce(
-      (res: Array<Author>, cur: Commit) => {
-        if (cur.author.user === null) {
-          return res
-        }
-        for (const contributor of res) {
-          const hasAuthorInfo = !!contributor.user && !!cur.author.user
-          if (
-            hasAuthorInfo &&
-            contributor.user.login === cur.author.user.login
-          ) {
-            return res
-          }
-        }
-        res.push(cur.author)
-        return res
-      },
-      [lastContributor]
-    ) || []
-
   return (
     <>
       <Modal isOpen={isModalOpen} setIsOpen={setModalOpen}>
@@ -174,12 +153,16 @@ const FileContributors: React.FC<IProps> = ({
 
         <ModalBody>
           <Translation id="contributors-thanks" />
-
-          <ContributorList>
-            {uniqueContributors.map((contributor) => (
-              <Contributor contributor={contributor} key={contributor.email} />
-            ))}
-          </ContributorList>
+          {contributors ? (
+            <ContributorList>
+              {contributors.map((contributor) => (
+                <Contributor
+                  contributor={contributor}
+                  key={contributor.email}
+                />
+              ))}
+            </ContributorList>
+          ) : null}
         </ModalBody>
       </Modal>
 
@@ -211,7 +194,7 @@ const FileContributors: React.FC<IProps> = ({
                 </Link>
               )}
               {!lastContributor.user && <span>{lastContributor.name}</span>},{" "}
-              {getLocaleTimestamp(language as Lang, lastCommit.committedDate)}
+              {getLocaleTimestamp(language as Lang, lastEdit)}
             </Text>
           </Skeleton>
         </Flex>
@@ -235,24 +218,25 @@ const FileContributors: React.FC<IProps> = ({
               <Translation id="see-contributors" />
             </Button>
           </Skeleton>
-
           {editPath && (
-            <Show below="l">
-              {/* TODO: switch `l` to `lg` after UI migration and use `hideBelow` prop */}
-              <ButtonLink to={editPath} hideArrow variant="outline">
-                <Flex
-                  h="100%"
-                  alignItems="center"
-                  justifyContent="center"
-                  gap={2}
-                >
-                  <Icon as={FaGithub} fontSize="2xl" />
-                  <span>
-                    <Translation id="edit-page" />
-                  </span>
-                </Flex>
-              </ButtonLink>
-            </Show>
+            <ButtonLink
+              to={editPath}
+              hideArrow
+              variant="outline"
+              hideBelow="lg"
+            >
+              <Flex
+                h="100%"
+                alignItems="center"
+                justifyContent="center"
+                gap={2}
+              >
+                <Icon as={FaGithub} fontSize="2xl" />
+                <span>
+                  <Translation id="edit-page" />
+                </span>
+              </Flex>
+            </ButtonLink>
           )}
         </VStack>
       </Flex>