chore: allow some hardcoded strings to be translated (#4076)

Allow some hardcoded strings to be translated Also add pt-PT translation for them
2025-06-05 22:09:59 +02:00 · 2024-11-02 02:36:11 +00:00
parent 9a4fc2e015
commit f44583e87d
9 changed files with 117 additions and 34 deletions
--- a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
+++ b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
@@ -1,6 +1,7 @@
 import { Dropdown, Menu, MenuButton, MenuItem, Link } from "@mui/joy";
 import { Button } from "@usememos/mui";
 import { CheckSquareIcon, Code2Icon, SquareSlashIcon } from "lucide-react";
+import { useTranslate } from "@/utils/i18n";
 import { EditorRefActions } from "../Editor";

 interface Props {
@@ -8,6 +9,8 @@ interface Props {
 }

 const MarkdownMenu = (props: Props) => {
+  const t = useTranslate();
+
  const { editorRef } = props;

  const handleCodeBlockClick = () => {
@@ -67,15 +70,15 @@ const MarkdownMenu = (props: Props) => {
      <Menu className="text-sm" size="sm" placement="bottom-start">
        <MenuItem onClick={handleCodeBlockClick}>
          <Code2Icon className="w-4 h-auto" />
-          <span>Code block</span>
+          <span>{t("markdown.code-block")}</span>
        </MenuItem>
        <MenuItem onClick={handleCheckboxClick}>
          <CheckSquareIcon className="w-4 h-auto" />
-          <span>Checkbox</span>
+          <span>{t("markdown.checkbox")}</span>
        </MenuItem>
        <div className="-mt-0.5 pl-2">
          <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
-            Content syntax
+            {t("markdown.content-syntax")}
          </Link>
        </div>
      </Menu>
--- a/web/src/components/Settings/AccessTokenSection.tsx
+++ b/web/src/components/Settings/AccessTokenSection.tsx
@@ -56,10 +56,10 @@ const AccessTokenSection = () => {
        <div className="sm:flex sm:items-center sm:justify-between">
          <div className="sm:flex-auto space-y-1">
            <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
-              Access Tokens
+              {t("setting.access-token-section.title")}
              <LearnMore className="ml-2" url="https://usememos.com/docs/security/access-tokens" />
            </p>
-            <p className="text-sm text-gray-700 dark:text-gray-500">A list of all access tokens for your account.</p>
+            <p className="text-sm text-gray-700 dark:text-gray-500">{t("setting.access-token-section.description")}</p>
          </div>
          <div className="mt-4 sm:mt-0">
            <Button
@@ -79,16 +79,16 @@ const AccessTokenSection = () => {
                <thead>
                  <tr>
                    <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Token
+                      {t("setting.access-token-section.token")}
                    </th>
                    <th scope="col" className="py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Description
+                      {t("common.description")}
                    </th>
                    <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Created At
+                      {t("setting.access-token-section.created-at")}
                    </th>
                    <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Expires At
+                      {t("setting.access-token-section.expires-at")}
                    </th>
                    <th scope="col" className="relative py-3.5 pl-3 pr-4">
                      <span className="sr-only">{t("common.delete")}</span>
--- a/web/src/components/Settings/MemoRelatedSettings.tsx
+++ b/web/src/components/Settings/MemoRelatedSettings.tsx
@@ -59,7 +59,7 @@ const MemoRelatedSettings = () => {

  return (
    <div className="w-full flex flex-col gap-2 pt-2 pb-4">
-      <p className="font-medium text-gray-700 dark:text-gray-500">Memo related settings</p>
+      <p className="font-medium text-gray-700 dark:text-gray-500">{t("setting.memo-related-settings.title")}</p>
      <div className="w-full flex flex-row justify-between items-center">
        <span>{t("setting.system-section.disable-public-memos")}</span>
        <Switch
@@ -82,21 +82,21 @@ const MemoRelatedSettings = () => {
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Enable link preview</span>
+        <span>{t("setting.memo-related-settings.enable-link-preview")}</span>
        <Switch
          checked={memoRelatedSetting.enableLinkPreview}
          onChange={(event) => updatePartialSetting({ enableLinkPreview: event.target.checked })}
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Enable memo comments</span>
+        <span>{t("setting.memo-related-settings.enable-memo-comments")}</span>
        <Switch
          checked={memoRelatedSetting.enableComment}
          onChange={(event) => updatePartialSetting({ enableComment: event.target.checked })}
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Enable memo location</span>
+        <span>{t("setting.memo-related-settings.enable-memo-location")}</span>
        <Switch
          checked={memoRelatedSetting.enableLocation}
          onChange={(event) => updatePartialSetting({ enableLocation: event.target.checked })}
@@ -117,7 +117,7 @@ const MemoRelatedSettings = () => {
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Content length limit(Byte)</span>
+        <span>{t("setting.memo-related-settings.content-lenght-limit")}</span>
        <Input
          className="w-24"
          type="number"
@@ -145,7 +145,7 @@ const MemoRelatedSettings = () => {
        </Select>
      </div>
      <div className="w-full">
-        <span className="truncate">Reactions</span>
+        <span className="truncate">{t("setting.memo-related-settings.reactions")}</span>
        <div className="mt-2 w-full flex flex-row flex-wrap gap-1">
          {memoRelatedSetting.reactions.map((reactionType) => {
            return (
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/web/src/components/Settings/SSOSection.tsx
@@ -76,7 +76,7 @@ const SSOSection = () => {
      ))}
      {identityProviderList.length === 0 && (
        <div className="w-full mt-2 text-sm dark:border-zinc-700 opacity-60 flex flex-row items-center justify-between">
-          <p className="">No SSO found.</p>
+          <p className="">{t("setting.sso-section.no-sso-found")}</p>
        </div>
      )}

@@ -89,7 +89,7 @@ const SSOSection = () => {
              to="https://www.usememos.com/docs/advanced-settings/keycloak"
              target="_blank"
            >
-              Configuring Keycloak for Authentication
+              {t("setting.sso-section.configuring-keycloak-for-authentication")}
            </Link>
          </ListItem>
        </List>
--- a/web/src/components/Settings/WebhookSection.tsx
+++ b/web/src/components/Settings/WebhookSection.tsx
@@ -43,7 +43,9 @@ const WebhookSection = () => {
    <div className="w-full flex flex-col justify-start items-start">
      <div className="w-full flex justify-between items-center">
        <div className="flex-auto space-y-1">
-          <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">Webhooks</p>
+          <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
+            {t("setting.webhook-section.title")}
+          </p>
        </div>
        <div>
          <Button
@@ -63,10 +65,10 @@ const WebhookSection = () => {
              <thead>
                <tr>
                  <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                    Name
+                    {t("common.name")}
                  </th>
                  <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                    Url
+                    {t("setting.webhook-section.url")}
                  </th>
                  <th scope="col" className="relative px-3 py-2 pr-4">
                    <span className="sr-only">{t("common.delete")}</span>
@@ -95,7 +97,7 @@ const WebhookSection = () => {
                {webhooks.length === 0 && (
                  <tr>
                    <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400" colSpan={3}>
-                      No webhooks found.
+                      {t("setting.webhook-section.no-webhooks-found")}
                    </td>
                  </tr>
                )}
--- a/web/src/components/Settings/WorkspaceSection.tsx
+++ b/web/src/components/Settings/WorkspaceSection.tsx
@@ -106,35 +106,35 @@ const WorkspaceSection = () => {
        </Link>
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow user registration</span>
+        <span>{t("setting.workspace-section.disallow-user-registration")}</span>
        <Switch
          checked={workspaceGeneralSetting.disallowUserRegistration}
          onChange={(event) => updatePartialSetting({ disallowUserRegistration: event.target.checked })}
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow password auth</span>
+        <span>{t("setting.workspace-section.disallow-password-auth")}</span>
        <Switch
          checked={workspaceGeneralSetting.disallowPasswordAuth}
          onChange={(event) => updatePartialSetting({ disallowPasswordAuth: event.target.checked })}
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow Change Username</span>
+        <span>{t("setting.workspace-section.disallow-change-username")}</span>
        <Switch
          checked={workspaceGeneralSetting.disallowChangeUsername}
          onChange={(event) => updatePartialSetting({ disallowChangeUsername: event.target.checked })}
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow Change Nickname</span>
+        <span>{t("setting.workspace-section.disallow-change-nickname")}</span>
        <Switch
          checked={workspaceGeneralSetting.disallowChangeNickname}
          onChange={(event) => updatePartialSetting({ disallowChangeNickname: event.target.checked })}
        />
      </div>
      <div className="w-full flex flex-row justify-between items-center">
-        <span className="truncate">Week start day</span>
+        <span className="truncate">{t("setting.workspace-section.week-start-day")}</span>
        <Select
          className="!min-w-fit"
          value={workspaceGeneralSetting.weekStartDayOffset}
@@ -142,9 +142,9 @@ const WorkspaceSection = () => {
            updatePartialSetting({ weekStartDayOffset: weekStartDayOffset || 0 });
          }}
        >
-          <Option value={-1}>Saturday</Option>
-          <Option value={0}>Sunday</Option>
-          <Option value={1}>Monday</Option>
+          <Option value={-1}>{t("setting.workspace-section.saturday")}</Option>
+          <Option value={0}>{t("setting.workspace-section.sunday")}</Option>
+          <Option value={1}>{t("setting.workspace-section.monday")}</Option>
        </Select>
      </div>
      <div className="mt-2 w-full flex justify-end">
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -235,7 +235,9 @@
      "template": "Template",
      "token-endpoint": "Token endpoint",
      "update-sso": "Update SSO",
-      "user-endpoint": "User endpoint"
+      "user-endpoint": "User endpoint",
+      "no-sso-found": "No SSO found.",
+      "configuring-keycloak-for-authentication": "Configuring Keycloak for Authentication"
    },
    "storage": "Storage",
    "storage-section": {
@@ -299,7 +301,38 @@
      "max-upload-size-hint": "Recommended value is 32 MiB.",
      "server-name": "Server Name"
    },
-    "memo-related": "Memo"
+    "memo-related": "Memo",
+    "access-token-section":{
+      "title": "Access Tokens",
+      "description": "A list of all access tokens for your account.",
+      "created-at": "Created At",
+      "expires-at": "Expires At",
+      "token": "Token"
+    },
+    "webhook-section": {
+      "title": "Webhooks",
+      "url": "Url",
+      "no-webhooks-found": "No webhooks found."
+    },
+    "workspace-section": {
+      "disallow-user-registration": "Disallow user registration",
+      "disallow-password-auth": "Disallow password auth",
+      "disallow-change-username": "Disallow Change Username",
+      "disallow-change-nickname": "Disallow Change Nickname",
+      "week-start-day": "Week start day",
+      "saturday": "Saturday",
+      "sunday": "Sunday",
+      "monday": "Monday"            
+    },
+    "memo-related-settings": {
+      "title": "Memo related settings",
+      "enable-link-preview": "Enable link preview",
+      "enable-memo-comments": "Enable memo comments",
+      "enable-memo-location": "Enable memo location",
+      "content-lenght-limit": "Content length limit(Byte)",
+      "reactions": "Reactions"
+    },
+    "version": "Version"
  },
  "tag": {
    "all-tags": "All Tags",
@@ -308,5 +341,10 @@
    "delete-confirm": "Are you sure to delete this tag? All related memos will be archived.",
    "delete-tag": "Delete Tag",
    "no-tag-found": "No tag found"
+  },
+  "markdown": {
+    "code-block": "Code block",
+    "checkbox": "Checkbox",
+    "content-syntax": "Content syntax"
  }
 }
--- a/web/src/locales/pt-PT.json
+++ b/web/src/locales/pt-PT.json
@@ -235,7 +235,9 @@
      "template": "Modelo",
      "token-endpoint": "Ponto de Token",
      "update-sso": "Atualizar SSO",
-      "user-endpoint": "Ponto do Utilizador"
+      "user-endpoint": "Ponto do Utilizador",
+      "no-sso-found": "Nenhum SSO encontrado.",
+      "configuring-keycloak-for-authentication": "A configurar o Keycloak para autenticação."
    },
    "storage": "Armazenamento",
    "storage-section": {
@@ -299,7 +301,38 @@
      "max-upload-size-hint": "32 MiB é recomendado.",
      "server-name": "Nome do Servidor"
    },
-    "memo-related": "Memo"
+    "memo-related": "Memo",
+    "access-token-section": {
+      "title": "Tokens de Acesso",
+      "description": "Uma lista de todos os tokens de acesso para a sua conta.",
+      "created-at": "Criado Em",
+      "expires-at": "Expira Em",
+      "token": "Token"
+    },
+    "webhook-section": {
+      "title": "Webhooks",
+      "url": "Url",
+      "no-webhooks-found": "Nenhum webhook encontrado."
+    },
+    "workspace-section": {
+      "disallow-user-registration": "Desativar registo de utilizadores",
+      "disallow-password-auth": "Desativar autenticação por palavra-passe",
+      "disallow-change-username": "Desativar alteração de nome de utilizador",
+      "disallow-change-nickname": "Desativar alteração de nome ou apelido",
+      "week-start-day": "Dia de início da semana",
+      "saturday": "Sábado",
+      "sunday": "Domingo",
+      "monday": "Segunda-feira"            
+    },
+    "memo-related-settings": {
+      "title": "Definições relacionadas com memos",
+      "enable-link-preview": "Ativar pré-visualização de links",
+      "enable-memo-comments": "Ativar comentários em memos",
+      "enable-memo-location": "Ativar localização em memos",
+      "content-lenght-limit": "Limite de comprimento do conteúdo (Bytes)",
+      "reactions": "Reações"
+    },
+    "version": "Versão"
  },
  "tag": {
    "all-tags": "Todas as Etiquetas",
@@ -308,5 +341,10 @@
    "delete-confirm": "Tem a certeza que quer eliminar esta etiqueta? Memos associados serão arquivados.",
    "delete-tag": "Eliminar Etiqueta",
    "no-tag-found": "Nenhuma etiqueta encontrada"
+  },
+  "markdown": {
+    "code-block": "Bloco de código",
+    "checkbox": "Caixa de seleção",
+    "content-syntax": "Sintaxe de conteúdo"
  }
 }
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -114,7 +114,9 @@ const Setting = () => {
                      onClick={() => handleSectionSelectorItemClick(item)}
                    />
                  ))}
-                  <span className="px-3 mt-2 opacity-70 text-sm">Version: v{commonContext.profile.version}</span>
+                  <span className="px-3 mt-2 opacity-70 text-sm">
+                    {t("setting.version")}: v{commonContext.profile.version}
+                  </span>
                </div>
              </>
            ) : null}