feat: external page i18n

Signed-off-by: Innei <i@innei.in>

locales/external/en.json

@@ -1,4 +1,38 @@
 {
+  "feed": {
+    "follow_one": "follow",
+    "follow_other": "follows",
+    "followsAndReads": "{{subscriptionCount}} {{subscriptionNoun}} with {{readCount}} {{readNoun}} on {{appName}}",
+    "read_one": "read",
+    "read_other": "reads"
+  },
+  "header": {
+    "app": "App",
+    "download": "Download"
+  },
+  "invitation": {
+    "activate": "Activate",
+    "codeOptions": {
+      "1": "Looking for any alpha test user to invite you.",
+      "2": "Join our Discord server for occasional giveaways.",
+      "3": "Follow our X account for occasional giveaways."
+    },
+    "earlyAccess": "Follow is currently in early access and requires an invitation code to use.",
+    "earlyAccessMessage": "😰 Sorry, Follow is currently in early access and requires an invitation code to use.",
+    "generateButton": "Generate new code",
+    "generateCost": "You can spend {{INVITATION_PRICE}} Power to generate an invitation code for your friends.",
+    "getCodeMessage": "You can get an invitation code in the following ways:",
+    "title": "Invitation Code"
+  },
+  "login": {
+    "backToWebApp": "Back To Web App",
+    "continueWithGitHub": "Continue with GitHub",
+    "continueWithGoogle": "Continue with Google",
+    "logInTo": "Log in to ",
+    "openApp": "Open App",
+    "redirecting": "Redirecting",
+    "welcomeTo": "Welcome to "
+  },
   "redirect": {
     "continueInBrowser": "Continue in Browser",
     "instruction": "Now is the time to open {{APP_NAME}} and safely close this page.",

src/renderer/src/components/header.tsx

@@ -5,6 +5,7 @@ import type { MotionValue } from "framer-motion"
 import { useMotionValueEvent, useScroll } from "framer-motion"
 import type { FC } from "react"
 import { cloneElement, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 
 import { FollowIcon } from "./icons/follow"
@@ -19,6 +20,7 @@ const useMotionValueToState = (value: MotionValue<number>) => {
 
 export function Header() {
   const present = usePresentUserProfileModal()
+  const { t } = useTranslation("external")
 
   const { scrollY } = useScroll()
   const scrollYState = useMotionValueToState(scrollY)
@@ -40,12 +42,12 @@ export function Header() {
             </div>
 
             <div className="mx-6 hidden gap-12 text-sm font-medium lg:flex [&>div]:hover:cursor-pointer">
-              <HoverableLink href="/" icon={<FollowIcon />} label="App" />
+              <HoverableLink href="/" icon={<FollowIcon />} label={t("header.app")} />
 
               <HoverableLink
                 href="https://github.com/RSSNext/follow/releases"
                 icon={<i className="i-mgc-download-2-cute-fi" />}
-                label="Download"
+                label={t("header.download")}
               />
             </div>
           </div>

src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx

@@ -6,7 +6,7 @@ import { LoadingCircle } from "@renderer/components/ui/loading"
 import { views } from "@renderer/constants"
 import { useTitle } from "@renderer/hooks/common"
 import { FeedViewType } from "@renderer/lib/enum"
-import { cn, pluralize } from "@renderer/lib/utils"
+import { cn } from "@renderer/lib/utils"
 import { ArticleItem } from "@renderer/modules/entry-column/Items/article-item"
 import { NotificationItem } from "@renderer/modules/entry-column/Items/notification-item"
 import { PictureItem } from "@renderer/modules/entry-column/Items/picture-item"
@@ -17,6 +17,7 @@ import { useEntriesPreview } from "@renderer/queries/entries"
 import { useFeed } from "@renderer/queries/feed"
 import { DEEPLINK_SCHEME } from "@shared/constants"
 import type { FC } from "react"
+import { useTranslation } from "react-i18next"
 import { useParams, useSearchParams } from "react-router-dom"
 
 export function Component() {
@@ -57,6 +58,7 @@ export function Component() {
       Item = ArticleItem
     }
   }
+  const { t } = useTranslation("external")
   useTitle(feed.data?.feed.title)
   return (
     <>
@@ -78,10 +80,13 @@ export function Component() {
               <div className="mb-8 text-sm text-zinc-500">{feed.data.feed.description}</div>
             </div>
             <div className="mb-4 text-sm">
-              <strong>{feed.data.subscriptionCount}</strong>{" "}
-              {pluralize("follow", feed.data.subscriptionCount)} with{" "}
-              <strong>{feed.data.readCount}</strong> {pluralize("read", feed.data.readCount)} on{" "}
-              {APP_NAME}
+              {t("feed.followsAndReads", {
+                subscriptionCount: feed.data.subscriptionCount,
+                subscriptionNoun: t("feed.follow", { count: feed.data.subscriptionCount }),
+                readCount: feed.data.readCount,
+                readNoun: t("feed.read", { count: feed.data.readCount }),
+                appName: APP_NAME,
+              })}
             </div>
             <a className="mb-8 cursor-default" href={`${DEEPLINK_SCHEME}add?id=${id}`}>
               <Button>

src/renderer/src/pages/(external)/invitation.tsx

@@ -25,7 +25,7 @@ const formSchema = z.object({
 })
 
 export function Component() {
-  const { t } = useTranslation("settings")
+  const { t } = useTranslation("external")
   const navigate = useNavigate()
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -82,14 +82,9 @@ export function Component() {
         <p>{t("invitation.earlyAccessMessage")}</p>
         <p>{t("invitation.getCodeMessage")}</p>
         <p>
-          😰 Sorry, Follow is currently in <strong>early access</strong> and requires an invitation
-          code to use.
-        </p>
-        <p>You can get an invitation code in the following ways:</p>
-        <p>
-          <p>1. Looking for any alpha test user to invite you.</p>
-          <p>2. Join our Discord server for occasional giveaways.</p>
-          <p>3. Follow our X account for occasional giveaways.</p>
+          <p>1. {t("invitation.codeOptions.1")}</p>
+          <p>2. {t("invitation.codeOptions.2")}</p>
+          <p>3. {t("invitation.codeOptions.3")}</p>
         </p>
       </div>
       <div className="mt-2 flex flex-wrap gap-2">

src/renderer/src/pages/(external)/login.tsx

@@ -5,6 +5,7 @@ import { UserAvatar } from "@renderer/components/user-button"
 import { useSignOut } from "@renderer/hooks/biz/useSignOut"
 import { LOGIN_CALLBACK_URL, loginHandler } from "@renderer/lib/auth"
 import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { useLocation, useNavigate } from "react-router-dom"
 
 export function Component() {
@@ -30,6 +31,8 @@ function Login() {
     }
   }
 
+  const { t } = useTranslation("external")
+
   useEffect(() => {
     if (!window.electron && provider) {
       if (status === "authenticated") {
@@ -49,17 +52,17 @@ function Login() {
       <Logo className="size-20" />
       {!isAuthenticated ? (
         <h1 className="text-3xl font-bold">
-          Log in to
+          {t("login.logInTo")}
           {` ${APP_NAME}`}
         </h1>
       ) : (
         <h1 className="-mb-6 text-3xl font-bold">
-          Welcome to
+          {t("login.welcomeTo")}
           {` ${APP_NAME}`}
         </h1>
       )}
       {redirecting ? (
-        <div>Redirecting</div>
+        <div>{t("login.redirecting")}</div>
       ) : (
         <div className="flex flex-col gap-3">
           {isAuthenticated ? (
@@ -72,15 +75,15 @@ function Login() {
               </div>
               <div className="flex items-center justify-center gap-4">
                 <Button variant="outline" onClick={onOpenInWebApp}>
-                  Back To Web App
+                  {t("login.backToWebApp")}
                 </Button>
                 <Button
                   variant="primary"
                   onClick={() => {
                     navigate("/redirect?app=follow")
                   }}
                 >
-                  Open App
+                  {t("login.openApp")}
                 </Button>
               </div>
             </>
@@ -92,15 +95,15 @@ function Login() {
                   loginHandler("github")
                 }}
               >
-                <i className="i-mgc-github-cute-fi mr-2 text-xl" /> Continue with GitHub
+                <i className="i-mgc-github-cute-fi mr-2 text-xl" /> {t("login.continueWithGitHub")}
               </Button>
               <Button
                 className="h-[48px] w-[320px] rounded-[8px] bg-blue-500 font-sans text-base text-white hover:bg-blue-500/90 focus:!border-blue-500/80 focus:!ring-blue-500/80"
                 onClick={() => {
                   loginHandler("google")
                 }}
               >
-                <i className="i-mgc-google-cute-fi mr-2 text-xl" /> Continue with Google
+                <i className="i-mgc-google-cute-fi mr-2 text-xl" /> {t("login.continueWithGoogle")}
               </Button>
             </>
           )}