Language picker

.github/workflows/get-translation-progress.yml

@@ -0,0 +1,64 @@
+name: Update Crowdin translation progression
+
+on:
+  schedule:
+    - cron: "20 16 * * FRI"
+  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/getTranslationProgress.ts
+        env:
+          CROWDIN_API_KEY: ${{ secrets.CROWDIN_API_KEY }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+
+      - name: Commit and push
+        run: |
+          git add -A
+          git commit -m "Update Crowdin translation progress"
+          git push origin "automated-update-${{ env.TIMESTAMP }}"
+
+      - name: Create PR body
+        run: |
+          echo "This PR was automatically created to update Crowdin translation progress." > pr_body.txt
+          echo "This workflows runs every Friday at 16:20 (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 progress from Crowdin - ${{ env.READABLE_DATE }}" --body-file pr_body.txt

i18n.config.json

@@ -297,7 +297,7 @@
   },
   {
     "code": "ne-np",
-    "crowdinCode": "ne-np",
+    "crowdinCode": "ne-NP",
     "name": "Nepali",
     "localName": "नेपाली",
     "langDir": "ltr",
@@ -457,7 +457,7 @@
   },
   {
     "code": "ur",
-    "crowdinCode": "ur",
+    "crowdinCode": "ur-IN",
     "name": "Urdu",
     "localName": "اردو",
     "langDir": "rtl",

src/components/LanguagePicker/MenuItem.tsx

@@ -0,0 +1,127 @@
+import { useRouter } from "next/router"
+import { useTranslation } from "next-i18next"
+import { BsCheck } from "react-icons/bs"
+import {
+  Badge,
+  Box,
+  Flex,
+  forwardRef,
+  Icon,
+  MenuItem as ChakraMenuItem,
+  type MenuItemProps as ChakraMenuItemProps,
+  Text,
+} from "@chakra-ui/react"
+
+import type { LocaleDisplayInfo } from "@/lib/types"
+
+import { BaseLink } from "@/components/Link"
+
+import ProgressBar from "./ProgressBar"
+
+type ItemProps = ChakraMenuItemProps & {
+  displayInfo: LocaleDisplayInfo
+}
+
+const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
+  const {
+    localeOption,
+    sourceName,
+    targetName,
+    approvalProgress,
+    wordsApproved,
+    isBrowserDefault,
+  } = displayInfo
+  const { t } = useTranslation("page-languages")
+  const { asPath, locale } = useRouter()
+  const isCurrent = localeOption === locale
+
+  const getProgressInfo = (approvalProgress: number, wordsApproved: number) => {
+    const percentage = new Intl.NumberFormat(locale!, {
+      style: "percent",
+    }).format(approvalProgress / 100)
+    const progress =
+      approvalProgress === 0 ? "<" + percentage.replace("0", "1") : percentage
+    const words = new Intl.NumberFormat(locale!).format(wordsApproved)
+    return { progress, words }
+  }
+
+  const { progress, words } = getProgressInfo(approvalProgress, wordsApproved)
+
+  return (
+    <ChakraMenuItem
+      as={BaseLink}
+      ref={ref}
+      flexDir="column"
+      w="full"
+      mb="1"
+      display="block"
+      pt="2 !important"
+      alignItems="start"
+      borderRadius="base"
+      bg={isCurrent ? "background.base" : "transparent"}
+      color="body.base"
+      textDecoration="none"
+      data-group
+      onFocus={(e) => {
+        e.target.scrollIntoView({ block: "nearest" })
+      }}
+      scrollMarginY="8"
+      _hover={{ bg: "primary.lowContrast", textDecoration: "none" }}
+      _focus={{ bg: "primary.lowContrast" }}
+      sx={{
+        p: {
+          textDecoration: "none",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        },
+      }}
+      href={asPath}
+      locale={localeOption}
+      {...props}
+    >
+      <Flex alignItems="center" w="full">
+        <Box flex={1}>
+          <Flex alignItems="center" gap={2}>
+            <Text
+              fontSize="lg"
+              color={isCurrent ? "primary.highContrast" : "primary.base"}
+            >
+              {targetName}
+            </Text>
+            {isBrowserDefault && (
+              <Badge
+                border="1px"
+                borderColor="body.medium"
+                color="body.medium"
+                lineHeight="none"
+                fontSize="2xs"
+                p="1"
+                h="fit-content"
+                bg="none"
+              >
+                {t("page-languages-browser-default")}
+              </Badge>
+            )}
+          </Flex>
+          <Text textTransform="uppercase" fontSize="xs" color="body.base">
+            {sourceName}
+          </Text>
+        </Box>
+        {isCurrent && <Icon as={BsCheck} fontSize="2xl" color="primary.highContrast" />}
+      </Flex>
+      <Text
+        textTransform="lowercase"
+        fontSize="xs"
+        color="body.medium"
+        maxW="full"
+      >
+        {progress} {t("page-languages-translated")} • {words}{" "}
+        {t("page-languages-words")}
+      </Text>
+      <ProgressBar value={approvalProgress} />
+    </ChakraMenuItem>
+  )
+})
+
+export default MenuItem

src/components/LanguagePicker/NoResultsCallout.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from "next-i18next"
+import { FormHelperText, forwardRef, Text } from "@chakra-ui/react"
+
+import { BaseLink } from "@/components/Link"
+
+import MenuItem from "./MenuItem"
+
+type NoResultsCalloutProps = { onClose: () => void }
+
+const NoResultsCallout = forwardRef(
+  ({ onClose }: NoResultsCalloutProps, ref) => {
+    const { t } = useTranslation("page-languages")
+    return (
+      <FormHelperText color="body.medium" lineHeight="base" fontSize="md">
+        <Text fontWeight="bold" mb="2" color="body.base">
+          {t("page-languages-want-more-header")}
+        </Text>
+        {t("page-languages-want-more-paragraph")}{" "}
+        <BaseLink
+          ref={ref}
+          as={MenuItem}
+          key="item-no-results"
+          href="contributing/translation-program"
+          onClick={onClose}
+        >
+          {t("page-languages-want-more-link")}
+        </BaseLink>
+      </FormHelperText>
+    )
+  }
+)
+
+export default NoResultsCallout

src/components/LanguagePicker/ProgressBar.tsx

@@ -0,0 +1,19 @@
+import { Progress, ProgressProps } from "@chakra-ui/react"
+
+type ProgressBarProps = Pick<ProgressProps, "value">
+
+const ProgressBar = ({ value }: ProgressBarProps) => (
+  <Progress
+    value={value}
+    h="0.5"
+    w="full"
+    bg="body.light"
+    sx={{
+      "[role=progressbar]": {
+        backgroundColor: "disabled",
+      },
+    }}
+  />
+)
+
+export default ProgressBar