feat: improve i18n support as a whole (#1526)

* feat: improve i18n support as a whole

- Remove dayjs in favor of /helpers/datetime.ts, which uses
Intl.DateTimeFormat and Date. Dayjs is not exactly i18n friendly
and has several locale related opened issues.

- Move/refactor date/time code from /helpers/utils.ts to
/helpers/datetime.ts.

- Fix Daily Review weekday not changing according to selected date.

- Localize Daily review weekday and month.

- Load i18n listed strings from /locales/{locale}.json in a dynamic way.
This makes much easier to add new locales, by just adding a properly
named json file and listing it only in /web/src/i18n.ts and
/api/user_setting.go.

- Fallback languages are now set in /web/src/i18n.ts.

- Full language codes are now preffered, but they fallback to 2-letter
codes when not available.

- The locale dropdown is now populated dynamically from the available
locales. Locale names are populated by the browser via
Intl.DisplayNames(locale).

- /web/src/i18n.ts now exports a type TLocale from availableLocales
array. This is used only by findNearestLanguageMatch(). As I was unable
to use this type in ".d.ts" files, I switched the Locale type from
/web/src/types/i18n.d.ts to string.

- Move pretty much all hardcoded text strings to i18n strings.

- Add pt-BR translation.

- Remove site.ts and move its content to a i18n string.

- Rename zh.json to zh-Hans.json to get the correct language name on
selector dropdown.

- Remove pt_BR.json and replace with pt-BR.json.

- Some minor layout spacing fixes to accommodate larger texts.

- Improve some error messages.

* Delete .yarnrc.yml

* Delete package-lock.json

* fix: 158:28  error  Insert `⏎`  prettier/prettier
This commit is contained in:
Lincoln Nogueira 2023-04-14 21:56:03 -03:00 committed by GitHub
parent 5652bb76d4
commit 557278fac0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 6761 additions and 4133 deletions

View file

@ -32,7 +32,25 @@ func (key UserSettingKey) String() string {
}
var (
UserSettingLocaleValue = []string{"en", "zh", "vi", "fr", "nl", "sv", "de", "es", "uk", "ru", "it", "hant", "tr", "ko", "sl"}
UserSettingLocaleValue = []string{
"de",
"en",
"es",
"fr",
"it",
"ko",
"nl",
"pl",
"pt-BR",
"ru",
"sl",
"sv",
"tr",
"uk",
"vi",
"zh-Hans",
"zh-Hant",
}
UserSettingAppearanceValue = []string{"system", "light", "dark"}
UserSettingMemoVisibilityValue = []Visibility{Private, Protected, Public}
)

View file

@ -14,7 +14,6 @@
"@reduxjs/toolkit": "^1.8.1",
"axios": "^0.27.2",
"copy-to-clipboard": "^3.3.2",
"dayjs": "^1.11.3",
"highlight.js": "^11.6.0",
"i18next": "^21.9.2",
"i18next-browser-languagedetector": "^7.0.1",

View file

@ -1,4 +1,3 @@
import dayjs from "dayjs";
import { useColorScheme } from "@mui/joy";
import { useEffect, Suspense } from "react";
import { Toaster } from "react-hot-toast";
@ -59,7 +58,6 @@ const App = () => {
useEffect(() => {
document.documentElement.setAttribute("lang", locale);
i18n.changeLanguage(locale);
dayjs.locale(locale);
storage.set({
locale: locale,
});

View file

@ -27,10 +27,11 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
</button>
</div>
<div className="flex flex-col justify-start items-start max-w-full w-96">
<p className="text-sm">{customizedProfile.description || "No description"}</p>
<p className="text-xs">{t("about.memos-description")}</p>
<p className="text-sm mt-2 ">{customizedProfile.description || t("about.no-server-description")}</p>
<div className="mt-4 w-full flex flex-row text-sm justify-start items-center">
<div className="flex flex-row justify-start items-center mr-2">
Powered by
{t("about.powered-by")}
<a href="https://usememos.com" target="_blank" className="flex flex-row justify-start items-center mx-1 hover:underline">
<img className="w-6 h-auto rounded-full mr-1" src="/logo.webp" alt="" />
memos
@ -40,7 +41,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
<GitHubBadge />
</div>
<div className="border-t w-full mt-3 pt-2 text-sm flex flex-row justify-start items-center space-x-2">
<span className="text-gray-500">Other projects:</span>
<span className="text-gray-500">{t("about.other-projects")}:</span>
<a
href="https://github.com/boojack/sticky-notes"
target="_blank"

View file

@ -1,7 +1,7 @@
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useMemoStore } from "@/store/module";
import * as utils from "@/helpers/utils";
import { getDateTimeString } from "@/helpers/datetime";
import useToggle from "@/hooks/useToggle";
import MemoContent from "./MemoContent";
import MemoResources from "./MemoResources";
@ -54,7 +54,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
<div className={`memo-wrapper archived ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
<div className="memo-top-wrapper">
<span className="time-text">
{t("memo.archived-at")} {utils.getDateTimeString(memo.updatedTs)}
{t("memo.archived-at")} {getDateTimeString(memo.updatedTs)}
</span>
<div className="btns-container">
<span className="btn-text" onClick={handleRestoreMemoClick}>

View file

@ -1,15 +1,18 @@
import { useTranslation } from "react-i18next";
interface Props {
className?: string;
}
const BetaBadge: React.FC<Props> = (props: Props) => {
const { className } = props;
const { t } = useTranslation();
return (
<span
className={`mx-1 px-1 leading-5 text-xs border dark:border-zinc-600 rounded-full text-gray-500 dark:text-gray-400 ${className ?? ""}`}
>
Beta
{t("common.beta")}
</span>
);
};

View file

@ -74,7 +74,7 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
<input
type="password"
className="input-text"
placeholder={t("auth.repeat-new-password")}
placeholder={t("auth.new-password")}
value={newPassword}
onChange={handleNewPasswordChanged}
/>

View file

@ -1,4 +1,4 @@
import dayjs from "dayjs";
import { getNormalizedTimeString, getUnixTime } from "@/helpers/datetime";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
@ -15,12 +15,12 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
const { destroy, memoId } = props;
const memoStore = useMemoStore();
const [createdAt, setCreatedAt] = useState("");
const maxDatetimeValue = dayjs().format("YYYY-MM-DDTHH:mm");
const maxDatetimeValue = getNormalizedTimeString();
useEffect(() => {
memoStore.getMemoById(memoId).then((memo) => {
if (memo) {
const datetime = dayjs(memo.createdTs).format("YYYY-MM-DDTHH:mm");
const datetime = getNormalizedTimeString(memo.createdTs);
setCreatedAt(datetime);
} else {
toast.error(t("message.memo-not-found"));
@ -39,8 +39,8 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
};
const handleSaveBtnClick = async () => {
const nowTs = dayjs().unix();
const createdTs = dayjs(createdAt).unix();
const nowTs = getUnixTime();
const createdTs = getUnixTime(createdAt);
if (createdTs > nowTs) {
toast.error(t("message.invalid-created-datetime"));
@ -69,9 +69,10 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
</button>
</div>
<div className="flex flex-col justify-start items-start !w-72 max-w-full">
<p className="w-full bg-yellow-100 border border-yellow-400 rounded p-2 text-xs leading-4">
THIS IS NOT A NORMAL BEHAVIOR. PLEASE MAKE SURE YOU REALLY NEED IT.
</p>
<div className="w-full bg-yellow-100 border border-yellow-400 rounded p-2 text-black">
<p className="uppercase">{t("message.change-memo-created-time-warning-1")}</p>
<p>{t("message.change-memo-created-time-warning-2")}</p>
</div>
<input
className="input-text mt-2"
type="datetime-local"

View file

@ -71,7 +71,7 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
type="password"
autoComplete="new-password"
className="input-text"
placeholder={t("auth.repeat-new-password")}
placeholder={t("auth.new-password")}
value={newPassword}
onChange={handleNewPasswordChanged}
/>

View file

@ -6,100 +6,101 @@ import { UNKNOWN_ID } from "@/helpers/consts";
import { absolutifyLink } from "@/helpers/utils";
import { generateDialog } from "./Dialog";
import Icon from "./Icon";
import { useTranslation } from "react-i18next";
interface Props extends DialogProps {
identityProvider?: IdentityProvider;
confirmCallback?: () => void;
}
const templateList: IdentityProvider[] = [
{
id: UNKNOWN_ID,
name: "GitHub",
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "https://github.com/login/oauth/authorize",
tokenUrl: "https://github.com/login/oauth/access_token",
userInfoUrl: "https://api.github.com/user",
scopes: ["user"],
fieldMapping: {
identifier: "login",
displayName: "name",
email: "email",
},
},
},
},
{
id: UNKNOWN_ID,
name: "GitLab",
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "https://gitlab.com/oauth/authorize",
tokenUrl: "https://gitlab.com/oauth/token",
userInfoUrl: "https://gitlab.com/oauth/userinfo",
scopes: ["openid"],
fieldMapping: {
identifier: "name",
displayName: "name",
email: "email",
},
},
},
},
{
id: UNKNOWN_ID,
name: "Google",
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "https://accounts.google.com/o/oauth2/v2/auth",
tokenUrl: "https://oauth2.googleapis.com/token",
userInfoUrl: "https://www.googleapis.com/oauth2/v2/userinfo",
scopes: ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile"],
fieldMapping: {
identifier: "email",
displayName: "name",
email: "email",
},
},
},
},
{
id: UNKNOWN_ID,
name: "Custom",
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "",
tokenUrl: "",
userInfoUrl: "",
scopes: [],
fieldMapping: {
identifier: "",
displayName: "",
email: "",
},
},
},
},
];
const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
const { t } = useTranslation();
const templateList: IdentityProvider[] = [
{
id: UNKNOWN_ID,
name: "GitHub",
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "https://github.com/login/oauth/authorize",
tokenUrl: "https://github.com/login/oauth/access_token",
userInfoUrl: "https://api.github.com/user",
scopes: ["user"],
fieldMapping: {
identifier: t("setting.sso-section.identifier"),
displayName: "",
email: "",
},
},
},
},
{
id: UNKNOWN_ID,
name: "GitLab",
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "https://gitlab.com/oauth/authorize",
tokenUrl: "https://gitlab.com/oauth/token",
userInfoUrl: "https://gitlab.com/oauth/userinfo",
scopes: ["openid"],
fieldMapping: {
identifier: t("setting.sso-section.identifier"),
displayName: "",
email: "",
},
},
},
},
{
id: UNKNOWN_ID,
name: "Google",
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "https://accounts.google.com/o/oauth2/v2/auth",
tokenUrl: "https://oauth2.googleapis.com/token",
userInfoUrl: "https://www.googleapis.com/oauth2/v2/userinfo",
scopes: ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile"],
fieldMapping: {
identifier: t("setting.sso-section.identifier"),
displayName: "",
email: "",
},
},
},
},
{
id: UNKNOWN_ID,
name: t("setting.sso-section.custom"),
type: "OAUTH2",
identifierFilter: "",
config: {
oauth2Config: {
clientId: "",
clientSecret: "",
authUrl: "",
tokenUrl: "",
userInfoUrl: "",
scopes: [],
fieldMapping: {
identifier: "",
displayName: "",
email: "",
},
},
},
},
];
const { confirmCallback, destroy, identityProvider } = props;
const [basicInfo, setBasicInfo] = useState({
name: "",
@ -193,7 +194,7 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
},
},
});
toast.success(`SSO ${basicInfo.name} created`);
toast.success(t("setting.sso-section.sso-created", { name: basicInfo.name }));
} else {
await api.patchIdentityProvider({
id: identityProvider?.id,
@ -206,7 +207,7 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
},
},
});
toast.success(`SSO ${basicInfo.name} updated`);
toast.success(t("setting.sso-section.sso-updated", { name: basicInfo.name }));
}
} catch (error: any) {
console.error(error);
@ -228,16 +229,16 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
return (
<>
<div className="dialog-header-container">
<p className="title-text">{isCreating ? "Create SSO" : "Update SSO"}</p>
<p className="title-text">{t("setting.sso-section." + (isCreating ? "create" : "update") + "-sso")}</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
<Icon.X />
</button>
</div>
<div className="dialog-content-container w-full max-w-[24rem]">
<div className="dialog-content-container w-full max-w-[24rem] min-w-[25rem]">
{isCreating && (
<>
<Typography className="!mb-1" level="body2">
Type
{t("common.type")}
</Typography>
<RadioGroup className="mb-2" value={type}>
<div className="mt-2 w-full flex flex-row space-x-4">
@ -245,7 +246,7 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
</div>
</RadioGroup>
<Typography className="mb-2" level="body2">
Template
{t("setting.sso-section.template")}
</Typography>
<RadioGroup className="mb-2" value={seletedTemplate}>
<div className="mt-2 w-full flex flex-row space-x-4">
@ -263,11 +264,12 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
</>
)}
<Typography className="!mb-1" level="body2">
Name<span className="text-red-600">*</span>
{t("common.name")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder="Name"
placeholder={t("common.name")}
value={basicInfo.name}
onChange={(e) =>
setBasicInfo({
@ -278,11 +280,11 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
fullWidth
/>
<Typography className="!mb-1" level="body2">
Identifier filter
{t("setting.sso-section.identifier-filter")}
</Typography>
<Input
className="mb-2"
placeholder="Identifier filter"
placeholder={t("setting.sso-section.identifier-filter")}
value={basicInfo.identifierFilter}
onChange={(e) =>
setBasicInfo({
@ -296,89 +298,104 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
{type === "OAUTH2" && (
<>
{isCreating && (
<p className="border rounded-md p-2 text-sm w-full mb-2 break-all">Redirect URL: {absolutifyLink("/auth/callback")}</p>
<p className="border rounded-md p-2 text-sm w-full mb-2 break-all">
{t("setting.sso-section.redirect-url")}: {absolutifyLink("/auth/callback")}
</p>
)}
<Typography className="!mb-1" level="body2">
Client ID<span className="text-red-600">*</span>
{t("setting.sso-section.client-id")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder="Client ID"
placeholder={t("setting.sso-section.client-id")}
value={oauth2Config.clientId}
onChange={(e) => setPartialOAuth2Config({ clientId: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Client secret<span className="text-red-600">*</span>
{t("setting.sso-section.client-secret")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder="Client secret"
placeholder={t("setting.sso-section.client-secret")}
value={oauth2Config.clientSecret}
onChange={(e) => setPartialOAuth2Config({ clientSecret: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Authorization endpoint<span className="text-red-600">*</span>
{t("setting.sso-section.authorization-endpoint")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder="Authorization endpoint"
placeholder={t("setting.sso-section.authorization-endpoint")}
value={oauth2Config.authUrl}
onChange={(e) => setPartialOAuth2Config({ authUrl: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Token endpoint<span className="text-red-600">*</span>
{t("setting.sso-section.token-endpoint")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder="Token endpoint"
placeholder={t("setting.sso-section.token-endpoint")}
value={oauth2Config.tokenUrl}
onChange={(e) => setPartialOAuth2Config({ tokenUrl: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
User info endpoint<span className="text-red-600">*</span>
{t("setting.sso-section.user-endpoint")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder="User info endpoint"
placeholder={t("setting.sso-section.user-endpoint")}
value={oauth2Config.userInfoUrl}
onChange={(e) => setPartialOAuth2Config({ userInfoUrl: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Scopes<span className="text-red-600">*</span>
</Typography>
<Input className="mb-2" placeholder="Scopes" value={oauth2Scopes} onChange={(e) => setOAuth2Scopes(e.target.value)} fullWidth />
<Divider className="!my-2" />
<Typography className="!mb-1" level="body2">
Identifier<span className="text-red-600">*</span>
{t("setting.sso-section.scopes")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder="User ID key"
placeholder={t("setting.sso-section.scopes")}
value={oauth2Scopes}
onChange={(e) => setOAuth2Scopes(e.target.value)}
fullWidth
/>
<Divider className="!my-2" />
<Typography className="!mb-1" level="body2">
{t("setting.sso-section.identifier")}
<span className="text-red-600">*</span>
</Typography>
<Input
className="mb-2"
placeholder={t("setting.sso-section.identifier")}
value={oauth2Config.fieldMapping.identifier}
onChange={(e) => setPartialOAuth2Config({ fieldMapping: { ...oauth2Config.fieldMapping, identifier: e.target.value } })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Display name
{t("setting.sso-section.display-name")}
</Typography>
<Input
className="mb-2"
placeholder="User name key"
placeholder={t("setting.sso-section.display-name")}
value={oauth2Config.fieldMapping.displayName}
onChange={(e) => setPartialOAuth2Config({ fieldMapping: { ...oauth2Config.fieldMapping, displayName: e.target.value } })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Email
{t("common.email")}
</Typography>
<Input
className="mb-2"
placeholder="User email key"
placeholder={t("common.email")}
value={oauth2Config.fieldMapping.email}
onChange={(e) => setPartialOAuth2Config({ fieldMapping: { ...oauth2Config.fieldMapping, email: e.target.value } })}
fullWidth
@ -387,10 +404,10 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
)}
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
Cancel
{t("common.cancel")}
</Button>
<Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
{isCreating ? "Create" : "Update"}
{t("common." + (isCreating ? "create" : "update"))}
</Button>
</div>
</div>

View file

@ -200,7 +200,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
</Typography>
<Input
className="mb-2"
placeholder="https://the.link.to/your/resource"
placeholder={t("resource.create-dialog.external-link.link-placeholder")}
value={resourceCreate.externalLink}
onChange={handleExternalLinkChanged}
fullWidth

View file

@ -1,9 +1,9 @@
import dayjs from "dayjs";
import { useCallback, useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useShortcutStore, useTagStore } from "@/store/module";
import { filterConsts, getDefaultFilter, relationConsts } from "@/helpers/filter";
import { getNormalizedTimeString } from "@/helpers/datetime";
import useLoading from "@/hooks/useLoading";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
@ -166,6 +166,7 @@ const MemoFilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterIn
const typeDataSource = Object.values(filterConsts).map(({ text, value }) => ({ text: t(text), value }));
const operatorDataSource = Object.values(filterConsts[type as FilterType].operators).map(({ text, value }) => ({ text: t(text), value }));
const relationDataSource = Object.values(relationConsts).map(({ text, value }) => ({ text: t(text), value }));
const valueDataSource =
type === "TYPE"
@ -176,11 +177,11 @@ const MemoFilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterIn
return { text: t, value: t };
});
const maxDatetimeValue = dayjs().format("9999-12-31T23:59");
const maxDatetimeValue = getNormalizedTimeString("9999-12-31T23:59");
useEffect(() => {
if (type === "DISPLAY_TIME") {
const nowDatetimeValue = dayjs().format("YYYY-MM-DDTHH:mm");
const nowDatetimeValue = getNormalizedTimeString();
handleValueChange(nowDatetimeValue);
} else {
setValue(filter.value.value);
@ -240,7 +241,7 @@ const MemoFilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterIn
{index > 0 ? (
<Selector
className="relation-selector"
dataSource={relationConsts}
dataSource={relationDataSource}
value={filter.relation}
handleValueChanged={handleRelationChange}
/>

View file

@ -1,6 +1,7 @@
import { Button, Input, Typography } from "@mui/joy";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import * as api from "@/helpers/api";
import { generateDialog } from "./Dialog";
import Icon from "./Icon";
@ -13,6 +14,7 @@ interface Props extends DialogProps {
}
const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
const { t } = useTranslation();
const { destroy, storage, confirmCallback } = props;
const [basicInfo, setBasicInfo] = useState({
name: "",
@ -105,7 +107,7 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
<>
<div className="dialog-header-container">
<p className="title-text">
{isCreating ? "Create storage" : "Update storage"}
{t("setting.storage-section." + (isCreating ? "create" : "update") + "-storage")}
<LearnMore className="ml-2" url="https://usememos.com/docs/storage" />
</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
@ -114,12 +116,12 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
</div>
<div className="dialog-content-container">
<Typography className="!mb-1" level="body2">
Name
{t("common.name")}
<RequiredBadge />
</Typography>
<Input
className="mb-2"
placeholder="Name"
placeholder={t("common.name")}
value={basicInfo.name}
onChange={(e) =>
setBasicInfo({
@ -130,109 +132,100 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
fullWidth
/>
<Typography className="!mb-1" level="body2">
EndPoint
{t("setting.storage-section.endpoint")}
<RequiredBadge />
<span className="text-sm text-gray-400 ml-1">(S3-compatible server URL)</span>
</Typography>
<Input
className="mb-2"
placeholder="EndPoint"
placeholder={t("setting.storage-section.s3-compatible-url")}
value={s3Config.endPoint}
onChange={(e) => setPartialS3Config({ endPoint: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Region
{t("setting.storage-section.region")}
<RequiredBadge />
<span className="text-sm text-gray-400 ml-1">(Region name)</span>
</Typography>
<Input
className="mb-2"
placeholder="Region"
placeholder={t("setting.storage-section.region-placeholder")}
value={s3Config.region}
onChange={(e) => setPartialS3Config({ region: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
AccessKey
{t("setting.storage-section.accesskey")}
<RequiredBadge />
<span className="text-sm text-gray-400 ml-1">(Access Key / Access ID)</span>
</Typography>
<Input
className="mb-2"
placeholder="AccessKey"
placeholder={t("setting.storage-section.accesskey-placeholder")}
value={s3Config.accessKey}
onChange={(e) => setPartialS3Config({ accessKey: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
SecretKey
{t("setting.storage-section.secretkey")}
<RequiredBadge />
<span className="text-sm text-gray-400 ml-1">(Secret Key / Secret Access Key)</span>
</Typography>
<Input
className="mb-2"
placeholder="SecretKey"
placeholder={t("setting.storage-section.secretkey-placeholder")}
value={s3Config.secretKey}
onChange={(e) => setPartialS3Config({ secretKey: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Bucket
{t("setting.storage-section.bucket")}
<RequiredBadge />
<span className="text-sm text-gray-400 ml-1">(Bucket name)</span>
</Typography>
<Input
className="mb-2"
placeholder="Bucket"
placeholder={t("setting.storage-section.bucket-placeholder")}
value={s3Config.bucket}
onChange={(e) => setPartialS3Config({ bucket: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
Path
<span className="text-sm text-gray-400 ml-1">(Storage Path)</span>
{t("setting.storage-section.path")}
</Typography>
<Typography className="!mb-1" level="body2">
<p className="text-sm text-gray-400 ml-1">{"You can use {year}, {month}, {day}, {hour}, {minute}, {second},"}</p>
<p className="text-sm text-gray-400 ml-1">{"{filename}, {timestamp} and any other words."}</p>
<p className="text-sm text-gray-400 ml-1">{"e.g., {year}/{month}/{day}/your/path/{filename}"}</p>
<p className="text-sm text-gray-400 ml-1">{t("setting.storage-section.path-description")}</p>
<LearnMore className="ml-2" url="https://usememos.com/docs/local-storage" />
</Typography>
<Input
className="mb-2"
placeholder="Path"
placeholder={t("setting.storage-section.path-placeholder") + "/{year}/{month}/{filename}"}
value={s3Config.path}
onChange={(e) => setPartialS3Config({ path: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
URLPrefix
<span className="text-sm text-gray-400 ml-1">(Custom URL prefix; Optional)</span>
{t("setting.storage-section.url-prefix")}
</Typography>
<Input
className="mb-2"
placeholder="URLPrefix"
placeholder={t("setting.storage-section.url-prefix-placeholder")}
value={s3Config.urlPrefix}
onChange={(e) => setPartialS3Config({ urlPrefix: e.target.value })}
fullWidth
/>
<Typography className="!mb-1" level="body2">
URLSuffix
<span className="text-sm text-gray-400 ml-1">(Custom URL suffix; Optional)</span>
{t("setting.storage-section.url-suffix")}
</Typography>
<Input
className="mb-2"
placeholder="URLSuffix"
placeholder={t("setting.storage-section.url-suffix-placeholder")}
value={s3Config.urlSuffix}
onChange={(e) => setPartialS3Config({ urlSuffix: e.target.value })}
fullWidth
/>
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
Cancel
{t("common.cancel")}
</Button>
<Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
{isCreating ? "Create" : "Update"}
{t("common." + (isCreating ? "create" : "update"))}
</Button>
</div>
</div>

View file

@ -1,4 +1,4 @@
import * as utils from "@/helpers/utils";
import { getTimeString } from "@/helpers/datetime";
import MemoContent from "./MemoContent";
import MemoResources from "./MemoResources";
import "@/less/daily-memo.less";
@ -9,7 +9,7 @@ interface Props {
const DailyMemo: React.FC<Props> = (props: Props) => {
const { memo } = props;
const createdTimeStr = utils.getTimeString(memo.createdTs);
const createdTimeStr = getTimeString(memo.createdTs);
return (
<div className="daily-memo-wrapper">

View file

@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next";
import Icon from "./Icon";
interface Props {
@ -7,10 +8,11 @@ interface Props {
const LearnMore = (props: Props) => {
const { url, className } = props;
const { t } = useTranslation();
return (
<a className={`${className || ""} text-sm text-blue-600 hover:opacity-80 hover:underline`} href={url} target="_blank">
Learn more
{t("common.learn-more")}
<Icon.ExternalLink className="inline -mt-1 ml-1 w-4 h-auto opacity-80" />
</a>
);

View file

@ -1,4 +1,5 @@
import { Option, Select } from "@mui/joy";
import { availableLocales } from "@/i18n";
import { FC } from "react";
import Icon from "./Icon";
@ -17,26 +18,26 @@ const LocaleSelect: FC<Props> = (props: Props) => {
return (
<Select
className={`!min-w-[10rem] w-auto whitespace-nowrap ${className ?? ""}`}
className={`!min-w-[12rem] w-auto whitespace-nowrap ${className ?? ""}`}
startDecorator={<Icon.Globe className="w-4 h-auto" />}
value={value}
onChange={(_, value) => handleSelectChange(value as Locale)}
>
<Option value="en">English</Option>
<Option value="zh"></Option>
<Option value="vi">Tiếng Việt</Option>
<Option value="fr">French</Option>
<Option value="nl">Nederlands</Option>
<Option value="sv">Svenska</Option>
<Option value="de">German</Option>
<Option value="es">Español</Option>
<Option value="uk">Українська</Option>
<Option value="ru">Русский</Option>
<Option value="it">Italiano</Option>
<Option value="hant"></Option>
<Option value="tr">Turkish</Option>
<Option value="ko"></Option>
<Option value="sl">Slovenščina</Option>
{availableLocales.map((locale) => {
const languageName = new Intl.DisplayNames([locale], { type: "language" }).of(locale);
if (languageName === undefined) {
return (
<Option key={locale} value={locale}>
{locale}
</Option>
);
}
return (
<Option key={locale} value={locale}>
{languageName.charAt(0).toUpperCase() + languageName.slice(1)}
</Option>
);
})}
</Select>
);
};

View file

@ -1,4 +1,4 @@
import dayjs from "dayjs";
import { getRelativeTimeString } from "@/helpers/datetime";
import { memo, useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
@ -19,14 +19,6 @@ interface Props {
readonly?: boolean;
}
export const getFormatedMemoTimeStr = (time: number, locale = "en"): string => {
if (Date.now() - time < 1000 * 60 * 60 * 24) {
return dayjs(time).locale(locale).fromNow();
} else {
return dayjs(time).locale(locale).format("YYYY/MM/DD HH:mm:ss");
}
};
const Memo: React.FC<Props> = (props: Props) => {
const { memo, readonly } = props;
const { t, i18n } = useTranslation();
@ -35,7 +27,7 @@ const Memo: React.FC<Props> = (props: Props) => {
const filterStore = useFilterStore();
const userStore = useUserStore();
const memoStore = useMemoStore();
const [createdTimeStr, setCreatedTimeStr] = useState<string>(getFormatedMemoTimeStr(memo.createdTs, i18n.language));
const [createdTimeStr, setCreatedTimeStr] = useState<string>(getRelativeTimeString(memo.createdTs));
const memoContainerRef = useRef<HTMLDivElement>(null);
const isVisitorMode = userStore.isVisitorMode() || readonly;
@ -43,7 +35,7 @@ const Memo: React.FC<Props> = (props: Props) => {
let intervalFlag: any = -1;
if (Date.now() - memo.createdTs < 1000 * 60 * 60 * 24) {
intervalFlag = setInterval(() => {
setCreatedTimeStr(getFormatedMemoTimeStr(memo.createdTs, i18n.language));
setCreatedTimeStr(getRelativeTimeString(memo.createdTs));
}, 1000 * 1);
}
@ -90,8 +82,8 @@ const Memo: React.FC<Props> = (props: Props) => {
const handleDeleteMemoClick = async () => {
showCommonDialog({
title: "Delete memo",
content: "Are you sure to delete this memo?",
title: t("memo.delete-memo"),
content: t("memo.delete-confirm"),
style: "warning",
dialogName: "delete-memo-dialog",
onConfirm: async () => {

View file

@ -2,7 +2,7 @@ import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { useFilterStore, useShortcutStore } from "@/store/module";
import * as utils from "@/helpers/utils";
import { getDateString } from "@/helpers/datetime";
import { getTextWithMemoType } from "@/helpers/filter";
import Icon from "./Icon";
import "@/less/memo-filter.less";
@ -63,7 +63,12 @@ const MemoFilter = () => {
filterStore.setFromAndToFilter();
}}
>
<Icon.Calendar className="icon-text" /> {utils.getDateString(duration.from)} to {utils.getDateString(duration.to)}
<Icon.Calendar className="icon-text" />
{t("common.filter-period", {
from: getDateString(duration.from),
to: getDateString(duration.to),
interpolation: { escapeValue: false },
})}
</div>
) : null}
<div

View file

@ -3,7 +3,7 @@ import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "@/store/module";
import { TAG_REG, LINK_REG } from "@/labs/marked/parser";
import * as utils from "@/helpers/utils";
import { getTimeStampByDate } from "@/helpers/datetime";
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
import { checkShouldShowMemoWithFilters } from "@/helpers/filter";
import Memo from "./Memo";
@ -54,7 +54,7 @@ const MemoList = () => {
if (
duration &&
duration.from < duration.to &&
(utils.getTimeStampByDate(memo.createdTs) < duration.from || utils.getTimeStampByDate(memo.createdTs) > duration.to)
(getTimeStampByDate(memo.createdTs) < duration.from || getTimeStampByDate(memo.createdTs) > duration.to)
) {
shouldShow = false;
}

View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import * as utils from "@/helpers/utils";
import { getDateTimeString } from "@/helpers/datetime";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
import "@/less/preview-image-dialog.less";
@ -38,7 +38,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
const handleDownloadBtnClick = () => {
const a = document.createElement("a");
a.href = imgUrls[currentIndex];
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.download = `memos-${getDateTimeString(Date.now())}.png`;
a.click();
};

View file

@ -1,4 +1,4 @@
import dayjs from "dayjs";
import { getDateTimeString } from "@/helpers/datetime";
import { useState } from "react";
import Icon from "./Icon";
import ResourceCover from "./ResourceCover";
@ -32,7 +32,7 @@ const ResourceCard = ({ resource, handleCheckClick, handleUncheckClick }: Resour
</div>
<div className="w-full flex flex-col justify-start items-center px-1 select-none">
<div className="w-full text-base text-center text-ellipsis overflow-hidden line-clamp-3">{resource.filename}</div>
<div className="text-xs text-gray-400 text-center">{dayjs(resource.createdTs).locale("en").format("YYYY/MM/DD HH:mm:ss")}</div>
<div className="text-xs text-gray-400 text-center">{getDateTimeString(resource.createdTs)}</div>
</div>
</div>
);

View file

@ -39,8 +39,8 @@ const ResourceItemDropdown = ({ resource }: Props) => {
const handleResetResourceLinkBtnClick = (resource: Resource) => {
showCommonDialog({
title: "Reset resource link",
content: "Are you sure to reset the resource link?",
title: t("resource.reset-resource-link"),
content: t("resource.reset-link-prompt"),
style: "warning",
dialogName: "reset-resource-link-dialog",
onConfirm: async () => {
@ -75,7 +75,7 @@ const ResourceItemDropdown = ({ resource }: Props) => {
return (
<Dropdown
actionsClassName="!w-28"
actionsClassName="!w-auto min-w-[8rem]"
trigger={<Icon.MoreVertical className="w-4 h-auto hover:opacity-80 cursor-pointer" />}
actions={
<>
@ -95,7 +95,7 @@ const ResourceItemDropdown = ({ resource }: Props) => {
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleResetResourceLinkBtnClick(resource)}
>
Reset link
{t("resource.reset-link")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"

View file

@ -76,8 +76,8 @@ const PreferencesSection = () => {
const handleArchiveUserClick = (user: User) => {
showCommonDialog({
title: `Archive Member`,
content: `Are you sure to archive ${user.username}?`,
title: t("setting.member-section.archive-member"),
content: t("setting.member-section.archive-warning", { username: user.username }),
style: "warning",
dialogName: "archive-user-dialog",
onConfirm: async () => {
@ -100,8 +100,8 @@ const PreferencesSection = () => {
const handleDeleteUserClick = (user: User) => {
showCommonDialog({
title: `Delete Member`,
content: `Are you sure to delete ${user.username}? THIS ACTION IS IRREVERSIBLE.❗️`,
title: t("setting.member-section.delete-member"),
content: t("setting.member-section.delete-warning", { username: user.username }),
style: "warning",
dialogName: "delete-user-dialog",
onConfirm: async () => {

View file

@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
import { useUserStore } from "@/store/module";
import { showCommonDialog } from "../Dialog/CommonDialog";
import showChangePasswordDialog from "../ChangePasswordDialog";
import Icon from "../Icon";
import showUpdateAccountDialog from "../UpdateAccountDialog";
import UserAvatar from "../UserAvatar";
import "@/less/settings/my-account-section.less";
@ -14,8 +15,8 @@ const MyAccountSection = () => {
const handleResetOpenIdBtnClick = async () => {
showCommonDialog({
title: "Reset Open API",
content: "❗The existing API will be invalidated and a new one will be generated, are you sure you want to reset?",
title: t("setting.account-section.openapi-reset"),
content: t("setting.account-section.openapi-reset-warning"),
style: "warning",
dialogName: "reset-openid-dialog",
onConfirm: async () => {
@ -47,13 +48,16 @@ const MyAccountSection = () => {
</div>
</div>
<div className="section-container openapi-section-container">
<p className="title-text">Open API</p>
<p className="title-text">{t("setting.account-section.openapi-title")}</p>
<p className="value-text">{openAPIRoute}</p>
<span className="btn-danger mt-2" onClick={handleResetOpenIdBtnClick}>
{t("common.reset")} API
{t("setting.account-section.reset-api")} <Icon.RefreshCw className="ml-2 h-4 w-4" />
</span>
<div className="usage-guide-container">
<pre>{`POST ${openAPIRoute}\nContent-type: application/json\n{\n "content": "Hello #memos from ${window.location.origin}"\n}`}</pre>
<pre>{`POST ${openAPIRoute}\nContent-type: application/json\n{\n "content": "${t("setting.account-section.openapi-sample-post", {
url: window.location.origin,
interpolation: { escapeValue: false },
})}"\n}`}</pre>
</div>
</div>
</>

View file

@ -23,8 +23,8 @@ const SSOSection = () => {
const handleDeleteIdentityProvider = async (identityProvider: IdentityProvider) => {
showCommonDialog({
title: "Confirm delete",
content: "Are you sure to delete this SSO? THIS ACTION IS IRREVERSIBLE❗",
title: t("setting.sso-section.delete-sso"),
content: t("setting.sso-section.confirm-delete", { name: identityProvider.name }),
style: "warning",
dialogName: "delete-identity-provider-dialog",
onConfirm: async () => {
@ -42,7 +42,7 @@ const SSOSection = () => {
return (
<div className="section-container">
<div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
<span className="font-mono text-sm text-gray-400 mr-2">SSO List</span>
<span className="font-mono text-sm text-gray-400 mr-2">{t("setting.sso-section.sso-list")}</span>
<button
className="btn-normal px-2 py-0 leading-7"
onClick={() => showCreateIdentityProviderDialog(undefined, fetchIdentityProviderList)}
@ -68,7 +68,7 @@ const SSOSection = () => {
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => showCreateIdentityProviderDialog(identityProvider, fetchIdentityProviderList)}
>
Edit
{t("common.edit")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"

View file

@ -39,7 +39,7 @@ const StorageSection = () => {
const handleDeleteStorage = (storage: ObjectStorage) => {
showCommonDialog({
title: t("setting.storage-section.delete-storage"),
content: t("setting.storage-section.warning-text"),
content: t("setting.storage-section.warning-text", { name: storage.name }),
style: "warning",
dialogName: "delete-storage-dialog",
onConfirm: async () => {
@ -57,7 +57,7 @@ const StorageSection = () => {
return (
<div className="section-container">
<div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
<span className="font-mono text-sm text-gray-400 mr-2">Current storage</span>
<span className="font-mono text-sm text-gray-400 mr-2">{t("setting.storage-section.current-storage")}</span>
</div>
<Select
className="w-full mb-4"
@ -66,8 +66,8 @@ const StorageSection = () => {
handleActiveStorageServiceChanged(storageId ?? storageServiceId);
}}
>
<Option value={0}>Database</Option>
<Option value={-1}>Local</Option>
<Option value={0}>{t("setting.storage-section.type-database")}</Option>
<Option value={-1}>{t("setting.storage-section.type-local")}</Option>
{storageList.map((storage) => (
<Option key={storage.id} value={storage.id}>
{storage.name}
@ -84,7 +84,7 @@ const StorageSection = () => {
<div className="mt-2 w-full flex flex-col">
<div className="py-2 w-full border-t dark:border-zinc-700 flex flex-row items-center justify-between">
<div className="flex flex-row items-center">
<p className="ml-2">Local</p>
<p className="ml-2">{t("setting.storage-section.type-local")}</p>
</div>
<div className="flex flex-row items-center">
<Dropdown
@ -95,7 +95,7 @@ const StorageSection = () => {
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => showUpdateLocalStorageDialog(systemStatus.localStoragePath)}
>
Edit
{t("common.edit")}
</button>
</>
}
@ -119,7 +119,7 @@ const StorageSection = () => {
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => showCreateStorageServiceDialog(storage, fetchStorageList)}
>
Edit
{t("common.edit")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"

View file

@ -1,9 +1,11 @@
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { Button, Divider, Input, Switch, Textarea } from "@mui/joy";
import { Button, Divider, Input, Switch, Textarea, Typography } from "@mui/joy";
import { formatBytes } from "@/helpers/utils";
import { useGlobalStore } from "@/store/module";
import * as api from "@/helpers/api";
import Icon from "../Icon";
import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
import "@/less/settings/system-section.less";
@ -16,15 +18,6 @@ interface State {
additionalScript: string;
}
const formatBytes = (bytes: number) => {
if (bytes <= 0) return "0 Bytes";
const k = 1024,
dm = 2,
sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i];
};
const SystemSection = () => {
const { t } = useTranslation();
const globalStore = useGlobalStore();
@ -203,7 +196,7 @@ const SystemSection = () => {
<Switch checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
</div>
<div className="form-label">
<span className="normal-text">Ignore version upgrade</span>
<span className="normal-text">{t("setting.system-section.ignore-version-upgrade")}</span>
<Switch checked={state.ignoreUpgrade} onChange={(event) => handleIgnoreUpgradeChanged(event.target.checked)} />
</div>
<div className="form-label">
@ -212,7 +205,17 @@ const SystemSection = () => {
</div>
<Divider className="!mt-3 !my-4" />
<div className="form-label">
<span className="normal-text">OpenAI API Key</span>
<span className="normal-text">{t("setting.system-section.openai-api-key")}</span>
<Typography className="!mb-1" level="body2">
<a
className="ml-2 text-sm text-blue-600 hover:opacity-80 hover:underline"
href="https://platform.openai.com/account/api-keys"
target="_blank"
>
{t("setting.system-section.openai-api-key-description")}
<Icon.ExternalLink className="inline -mt-1 ml-1 w-4 h-auto opacity-80" />
</a>
</Typography>
<Button onClick={handleSaveOpenAIConfig}>{t("common.save")}</Button>
</div>
<Input
@ -221,12 +224,12 @@ const SystemSection = () => {
fontFamily: "monospace",
fontSize: "14px",
}}
placeholder="OpenAI API Key"
placeholder={t("setting.system-section.openai-api-key-placeholder")}
value={openAIConfig.key}
onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
/>
<div className="form-label mt-2">
<span className="normal-text">OpenAI API Host</span>
<span className="normal-text">{t("setting.system-section.openai-api-host")}</span>
</div>
<Input
className="w-full"
@ -234,7 +237,7 @@ const SystemSection = () => {
fontFamily: "monospace",
fontSize: "14px",
}}
placeholder="OpenAI API Host. Default: https://api.openai.com"
placeholder={t("setting.system-section.openai-api-host-placeholder")}
value={openAIConfig.host}
onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
/>

View file

@ -8,7 +8,7 @@ import { toLower } from "lodash-es";
import toImage from "@/labs/html2image";
import { useGlobalStore, useMemoStore, useUserStore } from "@/store/module";
import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
import * as utils from "@/helpers/utils";
import { getDateTimeString, getTimeStampByDate } from "@/helpers/datetime";
import { getMemoStats } from "@/helpers/api";
import useLoading from "@/hooks/useLoading";
import Icon from "./Icon";
@ -46,9 +46,9 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const memoElRef = useRef<HTMLDivElement>(null);
const memo = {
...propsMemo,
createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
createdAtStr: getDateTimeString(propsMemo.createdTs),
};
const createdDays = Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24);
const createdDays = Math.ceil((Date.now() - getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24);
useEffect(() => {
getMemoStats(user.id)
@ -87,7 +87,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
.then((url) => {
const a = document.createElement("a");
a.href = url;
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.download = `memos-${getDateTimeString(Date.now())}.png`;
a.click();
createLoadingState.setFinish();

View file

@ -2,7 +2,7 @@ import { useEffect } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useFilterStore, useShortcutStore } from "@/store/module";
import * as utils from "@/helpers/utils";
import { getTimeStampByDate } from "@/helpers/datetime";
import useToggle from "@/hooks/useToggle";
import useLoading from "@/hooks/useLoading";
import Icon from "./Icon";
@ -18,10 +18,10 @@ const ShortcutList = () => {
const pinnedShortcuts = shortcuts
.filter((s) => s.rowStatus === "ARCHIVED")
.sort((a, b) => utils.getTimeStampByDate(b.createdTs) - utils.getTimeStampByDate(a.createdTs));
.sort((a, b) => getTimeStampByDate(b.createdTs) - getTimeStampByDate(a.createdTs));
const unpinnedShortcuts = shortcuts
.filter((s) => s.rowStatus === "NORMAL")
.sort((a, b) => utils.getTimeStampByDate(b.createdTs) - utils.getTimeStampByDate(a.createdTs));
.sort((a, b) => getTimeStampByDate(b.createdTs) - getTimeStampByDate(a.createdTs));
const sortedShortcuts = pinnedShortcuts.concat(unpinnedShortcuts);
useEffect(() => {

View file

@ -146,17 +146,17 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
</div>
<p className="text-sm">
{t("common.username")}
<span className="text-sm text-gray-400 ml-1">(Using to sign in)</span>
<span className="text-sm text-gray-400 ml-1">{t("setting.account-section.username-note")}</span>
</p>
<input type="text" className="input-text" value={state.username} onChange={handleUsernameChanged} />
<p className="text-sm">
{t("common.nickname")}
<span className="text-sm text-gray-400 ml-1">(Display in the banner)</span>
<span className="text-sm text-gray-400 ml-1">{t("setting.account-section.nickname-note")}</span>
</p>
<input type="text" className="input-text" value={state.nickname} onChange={handleNicknameChanged} />
<p className="text-sm">
{t("common.email")}
<span className="text-sm text-gray-400 ml-1">(Optional)</span>
<span className="text-sm text-gray-400 ml-1">{t("setting.account-section.email-note")}</span>
</p>
<input type="text" className="input-text" value={state.email} onChange={handleEmailChanged} />
<div className="pt-2 w-full flex flex-row justify-end items-center space-x-2">

View file

@ -71,7 +71,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
const handleSaveButtonClick = async () => {
if (state.name === "") {
toast.error("Please fill server name");
toast.error(t("message.fill-server-name"));
return;
}
@ -105,11 +105,11 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
<input type="text" className="input-text" value={state.name} onChange={handleNameChanged} />
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.icon-url")}</p>
<input type="text" className="input-text" value={state.logoUrl} onChange={handleLogoUrlChanged} />
<p className="text-sm mb-1 mt-2">Description</p>
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.description")}</p>
<input type="text" className="input-text" value={state.description} onChange={handleDescriptionChanged} />
<p className="text-sm mb-1 mt-2">Server locale</p>
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.locale")}</p>
<LocaleSelect className="!w-full" value={state.locale} onChange={handleLocaleSelectChange} />
<p className="text-sm mb-1 mt-2">Server appearance</p>
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.appearance")}</p>
<AppearanceSelect className="!w-full" value={state.appearance} onChange={handleAppearanceSelectChange} />
<div className="mt-4 w-full flex flex-row justify-between items-center space-x-2">
<div className="flex flex-row justify-start items-center">

View file

@ -6,6 +6,7 @@ import * as api from "@/helpers/api";
import { generateDialog } from "./Dialog";
import Icon from "./Icon";
import LearnMore from "./LearnMore";
import { useTranslation } from "react-i18next";
interface Props extends DialogProps {
localStoragePath?: string;
@ -13,6 +14,7 @@ interface Props extends DialogProps {
}
const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
const { t } = useTranslation();
const { destroy, localStoragePath, confirmCallback } = props;
const globalStore = useGlobalStore();
const [path, setPath] = useState(localStoragePath || "");
@ -41,23 +43,31 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
return (
<>
<div className="dialog-header-container">
<p className="title-text">Update local storage path</p>
<p className="title-text">{t("setting.storage-section.update-local-path")}</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
<Icon.X />
</button>
</div>
<div className="dialog-content-container max-w-xs">
<p className="text-sm break-words mb-1">
{"Local storage path is a relative path to your database file."}
{t("setting.storage-section.update-local-path-description")}
<LearnMore className="ml-1" url="https://usememos.com/docs/local-storage" />
</p>
<p className="text-sm text-gray-400 mb-2 break-all">{"e.g. assets/{timestamp}_{filename}"}</p>
<Input className="mb-2" placeholder="Local storage path" fullWidth value={path} onChange={(e) => setPath(e.target.value)} />
<p className="text-sm text-gray-400 mb-2 break-all">
{t("common.e.g")} {"assets/{timestamp}_{filename}"}
</p>
<Input
className="mb-2"
placeholder={t("setting.storage-section.local-storage-path")}
fullWidth
value={path}
onChange={(e) => setPath(e.target.value)}
/>
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
Cancel
{t("common.cancel")}
</Button>
<Button onClick={handleConfirmBtnClick}>Update</Button>
<Button onClick={handleConfirmBtnClick}>{t("common.update")}</Button>
</div>
</div>
</>

View file

@ -3,6 +3,7 @@ import { useFilterStore, useMemoStore, useUserStore } from "../store/module";
import { useTranslation } from "react-i18next";
import { getMemoStats } from "@/helpers/api";
import { DAILY_TIMESTAMP } from "@/helpers/consts";
import { getDateStampByDate, getDateString, getTimeStampByDate } from "@/helpers/datetime";
import * as utils from "@/helpers/utils";
import "@/less/usage-heat-map.less";
@ -32,7 +33,7 @@ const UsageHeatMap = () => {
const filterStore = useFilterStore();
const userStore = useUserStore();
const memoStore = useMemoStore();
const todayTimeStamp = utils.getDateStampByDate(Date.now());
const todayTimeStamp = getDateStampByDate(Date.now());
const todayDay = new Date(todayTimeStamp).getDay() + 1;
const nullCell = new Array(7 - todayDay).fill(0);
const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
@ -48,7 +49,7 @@ const UsageHeatMap = () => {
if (!userStore.state.user) {
return;
}
setCreatedDays(Math.ceil((Date.now() - utils.getTimeStampByDate(userStore.state.user.createdTs)) / 1000 / 3600 / 24));
setCreatedDays(Math.ceil((Date.now() - getTimeStampByDate(userStore.state.user.createdTs)) / 1000 / 3600 / 24));
}, [userStore.state.user]);
useEffect(() => {
@ -57,7 +58,7 @@ const UsageHeatMap = () => {
setMemoAmount(data.length);
const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestamp);
for (const record of data) {
const index = (utils.getDateStampByDate(record * 1000) - beginDayTimestamp) / (1000 * 3600 * 24) - 1;
const index = (getDateStampByDate(record * 1000) - beginDayTimestamp) / (1000 * 3600 * 24) - 1;
if (index >= 0) {
// because of dailight savings, some days may be 23 hours long instead of 24 hours long
// this causes the calculations to yield weird indices such as 40.93333333333
@ -83,7 +84,8 @@ const UsageHeatMap = () => {
const bounding = utils.getElementBounding(event.target as HTMLElement);
tempDiv.style.left = bounding.left + "px";
tempDiv.style.top = bounding.top - 2 + "px";
tempDiv.innerHTML = `${item.count} memos on <span className="date-text">${new Date(item.timestamp as number).toDateString()}</span>`;
const tMemoOnOpts = { amount: item.count, date: getDateString(item.timestamp as number) };
tempDiv.innerHTML = item.count === 1 ? t("heatmap.memo-on", tMemoOnOpts) : t("heatmap.memos-on", tMemoOnOpts);
document.body.appendChild(tempDiv);
if (tempDiv.offsetLeft - tempDiv.clientWidth / 2 < 0) {
@ -106,6 +108,10 @@ const UsageHeatMap = () => {
}
}, []);
// This interpolation is not being used because of the current styling,
// but it can improve translation quality by giving it a more meaningful context
const tMemoInOpts = { amount: "", period: "", date: "" };
return (
<>
<div className="usage-heat-map-wrapper" ref={containerElRef}>
@ -156,8 +162,10 @@ const UsageHeatMap = () => {
</div>
</div>
<p className="w-full pl-4 text-xs -mt-2 mb-3 text-gray-400 dark:text-zinc-400">
<span className="font-medium text-gray-500 dark:text-zinc-300">{memoAmount}</span> memos in{" "}
<span className="font-medium text-gray-500 dark:text-zinc-300">{createdDays}</span> days
<span className="font-medium text-gray-500 dark:text-zinc-300 number">{memoAmount} </span>
{memoAmount === 1 ? t("heatmap.memo-in", tMemoInOpts) : t("heatmap.memos-in", tMemoInOpts)}{" "}
<span className="font-medium text-gray-500 dark:text-zinc-300">{createdDays} </span>
{createdDays === 1 ? t("heatmap.day", tMemoInOpts) : t("heatmap.days", tMemoInOpts)}
</p>
</>
);

207
web/src/helpers/datetime.ts Normal file
View file

@ -0,0 +1,207 @@
import i18n from "@/i18n";
export function convertToMillis(localSetting: LocalSetting) {
const hoursToMillis = localSetting.dailyReviewTimeOffset * 60 * 60 * 1000;
return hoursToMillis;
}
export function getNowTimeStamp(): number {
return Date.now();
}
export function getTimeStampByDate(t: Date | number | string): number {
if (typeof t === "string") {
t = t.replaceAll("-", "/");
}
return new Date(t).getTime();
}
export function getDateStampByDate(t?: Date | number | string): number {
const tsFromDate = getTimeStampByDate(t ? t : Date.now());
const d = new Date(tsFromDate);
return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
}
export function getNormalizedDateString(t?: Date | number | string): string {
const tsFromDate = getTimeStampByDate(t ? t : Date.now());
const d = new Date(tsFromDate);
const year = d.getFullYear();
const month = d.getMonth() + 1;
const date = d.getDate();
return `${year}/${month}/${date}`;
}
/**
* Get a time string to provided time.
*
* If no date is provided, the current date is used.
*
* Output is always ``HH:MM`` (24-hour format)
*/
export function getTimeString(t?: Date | number | string): string {
const tsFromDate = getTimeStampByDate(t ? t : Date.now());
const d = new Date(tsFromDate);
const hours = d.getHours();
const mins = d.getMinutes();
const hoursStr = hours < 10 ? "0" + hours : hours;
const minsStr = mins < 10 ? "0" + mins : mins;
return `${hoursStr}:${minsStr}`;
}
/**
* Get a localized date and time string to provided time.
*
* If no date is provided, the current date is used.
*
* Sample outputs:
* - "en" locale: "1/30/2023, 10:05:00 PM"
* - "pt-BR" locale: "30/01/2023 22:05:00"
* - "pl" locale: "30.01.2023, 22:05:00"
*/
export function getDateTimeString(t?: Date | number | string, locale = i18n.language): string {
const tsFromDate = getTimeStampByDate(t ? t : Date.now());
return new Date(tsFromDate).toLocaleDateString(locale, {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
});
}
/**
* Get a localized date string to provided time.
*
* If no date is provided, the current date is used.
*
* Note: This function does not include time information.
*
* Sample outputs:
* - "en" locale: "1/30/2023"
* - "pt-BR" locale: "30/01/2023"
* - "pl" locale: "30.01.2023"
*/
export function getDateString(t?: Date | number | string, locale = i18n.language): string {
const tsFromDate = getTimeStampByDate(t ? t : Date.now());
return new Date(tsFromDate).toLocaleDateString(locale, {
year: "numeric",
month: "numeric",
day: "numeric",
});
}
/**
* Get a localized relative time string to provided time.
*
* Possible outputs for "long" format and "en" locale:
* - "x seconds ago"
* - "x minutes ago"
* - "x hours ago"
* - "yesterday"
* - "x days ago"
* - "x weeks ago"
* - "x months ago"
* - "last year"
* - "x years ago"
*
*/
export const getRelativeTimeString = (time: number, locale = i18n.language, formatStyle: "long" | "short" | "narrow" = "long"): string => {
const pastTimeMillis = Date.now() - time;
const secMillis = 1000;
const minMillis = secMillis * 60;
const hourMillis = minMillis * 60;
const dayMillis = hourMillis * 24;
// numeric: "auto" provides "yesterday" for 1 day ago, "always" provides "1 day ago"
const formatOpts = { style: formatStyle, numeric: "auto" } as Intl.RelativeTimeFormatOptions;
const relTime = new Intl.RelativeTimeFormat(locale, formatOpts);
if (pastTimeMillis < minMillis) {
return relTime.format(-Math.round(pastTimeMillis / secMillis), "second");
}
if (pastTimeMillis < hourMillis) {
return relTime.format(-Math.round(pastTimeMillis / minMillis), "minute");
}
if (pastTimeMillis < dayMillis) {
return relTime.format(-Math.round(pastTimeMillis / hourMillis), "hour");
}
if (pastTimeMillis < dayMillis * 7) {
return relTime.format(-Math.round(pastTimeMillis / dayMillis), "day");
}
if (pastTimeMillis < dayMillis * 30) {
return relTime.format(-Math.round(pastTimeMillis / (dayMillis * 7)), "week");
}
if (pastTimeMillis < dayMillis * 365) {
return relTime.format(-Math.round(pastTimeMillis / (dayMillis * 30)), "month");
}
return relTime.format(-Math.round(pastTimeMillis / (dayMillis * 365)), "year");
};
/**
* This returns the normalized date string of the provided date.
* Format is always `YYYY-MM-DDT00:00`.
*
* If no date is provided, the current date is used.
*/
export function getNormalizedTimeString(t?: Date | number | string): string {
const date = new Date(t ? t : Date.now());
const yyyy = date.getFullYear();
const M = date.getMonth() + 1;
const d = date.getDate();
const h = date.getHours();
const m = date.getMinutes();
const MM = M < 10 ? "0" + M : M;
const dd = d < 10 ? "0" + d : d;
const hh = h < 10 ? "0" + h : h;
const mm = m < 10 ? "0" + m : m;
return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
}
/**
* This returns the number of **milliseconds** since the Unix Epoch of the provided date.
*
* If no date is provided, the current date is used.
*
* ```
* getUnixTimeMillis("2019-01-25 00:00") // 1548381600000
* ```
* To get a Unix timestamp (the number of seconds since the epoch), use `getUnixTime()`.
*/
export function getUnixTimeMillis(t?: Date | number | string): number {
const date = new Date(t ? t : Date.now());
return date.getTime();
}
/**
* This returns the Unix timestamp (the number of **seconds** since the Unix Epoch) of the provided date.
*
* If no date is provided, the current date is used.
* ```
* getUnixTime("2019-01-25 00:00") // 1548381600
* ```
* This value is floored to the nearest second, and does not include a milliseconds component.
*/
export function getUnixTime(t?: Date | number | string): number {
const date = new Date(t ? t : Date.now());
return Math.floor(date.getTime() / 1000);
}

View file

@ -1,9 +1,9 @@
import dayjs from "dayjs";
import { getUnixTimeMillis } from "./datetime";
import { TAG_REG, LINK_REG } from "@/labs/marked/parser";
export const relationConsts = [
{ text: "And", value: "AND" },
{ text: "Or", value: "OR" },
{ text: "filter.and", value: "AND" },
{ text: "filter.or", value: "OR" },
];
export const filterConsts = {
@ -203,9 +203,9 @@ export const checkShouldShowMemo = (memo: Memo, filter: Filter) => {
}
} else if (type === "DISPLAY_TIME") {
if (operator === "BEFORE") {
return memo.createdTs < dayjs(value).valueOf();
return memo.createdTs < getUnixTimeMillis(value);
} else {
return memo.createdTs >= dayjs(value).valueOf();
return memo.createdTs >= getUnixTimeMillis(value);
}
} else if (type === "VISIBILITY") {
let matched = memo.visibility === value;

View file

@ -1 +0,0 @@
export const slogan = "A lightweight, self-hosted memo hub. Open Source and Free forever.";

View file

@ -1,16 +1,7 @@
export function convertToMillis(localSetting: LocalSetting) {
const hoursToMillis = localSetting.dailyReviewTimeOffset * 60 * 60 * 1000;
return hoursToMillis;
}
export const isNullorUndefined = (value: any) => {
return value === null || value === undefined;
};
export function getNowTimeStamp(): number {
return Date.now();
}
export function getOSVersion(): "Windows" | "MacOS" | "Linux" | "Unknown" {
const appVersion = navigator.userAgent;
let detectedOS: "Windows" | "MacOS" | "Linux" | "Unknown" = "Unknown";
@ -26,63 +17,6 @@ export function getOSVersion(): "Windows" | "MacOS" | "Linux" | "Unknown" {
return detectedOS;
}
export function getTimeStampByDate(t: Date | number | string): number {
if (typeof t === "string") {
t = t.replaceAll("-", "/");
}
const d = new Date(t);
return d.getTime();
}
export function getDateStampByDate(t: Date | number | string): number {
const d = new Date(getTimeStampByDate(t));
return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
}
export function getDateString(t: Date | number | string): string {
const d = new Date(getTimeStampByDate(t));
const year = d.getFullYear();
const month = d.getMonth() + 1;
const date = d.getDate();
return `${year}/${month}/${date}`;
}
export function getTimeString(t: Date | number | string): string {
const d = new Date(getTimeStampByDate(t));
const hours = d.getHours();
const mins = d.getMinutes();
const hoursStr = hours < 10 ? "0" + hours : hours;
const minsStr = mins < 10 ? "0" + mins : mins;
return `${hoursStr}:${minsStr}`;
}
// For example: 2021-4-8 17:52:17
export function getDateTimeString(t: Date | number | string): string {
const d = new Date(getTimeStampByDate(t));
const year = d.getFullYear();
const month = d.getMonth() + 1;
const date = d.getDate();
const hours = d.getHours();
const mins = d.getMinutes();
const secs = d.getSeconds();
const monthStr = month < 10 ? "0" + month : month;
const dateStr = date < 10 ? "0" + date : date;
const hoursStr = hours < 10 ? "0" + hours : hours;
const minsStr = mins < 10 ? "0" + mins : mins;
const secsStr = secs < 10 ? "0" + secs : secs;
return `${year}/${monthStr}/${dateStr} ${hoursStr}:${minsStr}:${secsStr}`;
}
export const getElementBounding = (element: HTMLElement, relativeEl?: HTMLElement) => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
@ -162,3 +96,12 @@ export function convertFileToBase64(file: File): Promise<string> {
reader.onerror = (error) => reject(error);
});
}
export const formatBytes = (bytes: number) => {
if (bytes <= 0) return "0 Bytes";
const k = 1024,
dm = 2,
sizes = ["Bytes", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
};

View file

@ -1,79 +1,57 @@
import i18n from "i18next";
import i18n, { FallbackLng, FallbackLngObjList } from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import enLocale from "./locales/en.json";
import zhLocale from "./locales/zh.json";
import viLocale from "./locales/vi.json";
import frLocale from "./locales/fr.json";
import nlLocale from "./locales/nl.json";
import svLocale from "./locales/sv.json";
import deLocale from "./locales/de.json";
import esLocale from "./locales/es.json";
import ukLocale from "./locales/uk.json";
import ruLocale from "./locales/ru.json";
import itLocale from "./locales/it.json";
import hantLocale from "./locales/zh-Hant.json";
import trLocale from "./locales/tr.json";
import koLocale from "./locales/ko.json";
import slLocale from "./locales/sl.json";
import toast from "react-hot-toast";
const DETECTION_OPTIONS = {
order: ["navigator"],
};
// eslint-disable-next-line prettier/prettier
export const availableLocales = [
"de",
"en",
"es",
"fr",
"it",
"ko",
"nl",
"pl",
"pt-BR",
"ru",
"sl",
"sv",
"tr",
"uk",
"vi",
"zh-Hans",
"zh-Hant",
] as const;
const fallbacks = {
"zh-HK": ["zh-Hant", "en"],
"zh-TW": ["zh-Hant", "en"],
zh: ["zh-Hans", "en"],
} as FallbackLngObjList;
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
detection: DETECTION_OPTIONS,
resources: {
en: {
translation: enLocale,
},
zh: {
translation: zhLocale,
},
vi: {
translation: viLocale,
},
fr: {
translation: frLocale,
},
nl: {
translation: nlLocale,
},
sv: {
translation: svLocale,
},
de: {
translation: deLocale,
},
es: {
translation: esLocale,
},
uk: {
translation: ukLocale,
},
ru: {
translation: ruLocale,
},
it: {
translation: itLocale,
},
hant: {
translation: hantLocale,
},
tr: {
translation: trLocale,
},
ko: {
translation: koLocale,
},
sl: {
translation: slLocale,
},
detection: {
order: ["navigator"],
},
fallbackLng: "en",
fallbackLng: {
...fallbacks,
...{ default: ["en"] },
} as FallbackLng,
});
for (const locale of availableLocales) {
import(`./locales/${locale}.json`)
.then((translation) => {
i18n.addResourceBundle(locale, "translation", translation.default, true, true);
})
.catch((err) => {
toast.error(`Failed to load locale "${locale}".\n${err}`, { duration: 5000 });
});
}
export default i18n;
export type TLocale = typeof availableLocales[number];

View file

@ -2,7 +2,7 @@
@apply px-4;
> .dialog-container {
@apply w-128 max-w-full;
@apply w-180 max-w-full;
> .dialog-content-container {
@apply flex flex-col justify-start items-start;
@ -69,11 +69,11 @@
}
&.type-selector {
@apply w-24;
@apply w-1/4;
}
&.operator-selector {
@apply w-20;
@apply w-1/5;
}
&.value-selector {
@ -92,7 +92,7 @@
@media only screen and (min-width: 640px) {
max-width: calc(100% - 152px);
}
@apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50 sm:min-w-0 min-w-full;
@apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent sm:min-w-0 min-w-full;
}
> .remove-btn {

View file

@ -12,7 +12,7 @@
}
> .section-selector-container {
@apply hidden sm:flex flex-col justify-start items-start sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 bg-gray-100 dark:bg-zinc-700;
@apply hidden sm:flex flex-col justify-start items-start sm:w-52 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 bg-gray-100 dark:bg-zinc-700;
> .section-title {
@apply text-sm mt-2 sm:mt-4 first:mt-4 mb-1 font-mono text-gray-400;

View file

@ -1,5 +1,6 @@
{
"common": {
"memos-slogan": "A lightweight, self-hosted memo hub. Open Source and Free forever.",
"about": "About",
"home": "Home",
"resources": "Resources",
@ -14,6 +15,7 @@
"close": "Close",
"cancel": "Cancel",
"create": "Create",
"update": "Update",
"change": "Change",
"confirm": "Confirm",
"reset": "Reset",
@ -31,12 +33,15 @@
"admin": "Admin",
"explore": "Explore",
"sign-in": "Sign in",
"sign-in-with": "Sign in with {{provider}}",
"or": "or",
"sign-up": "Sign up",
"sign-out": "Sign out",
"type": "Type",
"shortcuts": "Shortcuts",
"title": "Title",
"filter": "Filter",
"filter-period": "{{from}} to {{to}}",
"tags": "Tags",
"yourself": "Yourself",
"changed": "changed",
@ -52,7 +57,10 @@
"rename": "Rename",
"clear": "Clear",
"name": "Name",
"visibility": "Visibility"
"visibility": "Visibility",
"learn-more": "Learn more",
"e.g": "e.g.",
"beta": "Beta"
},
"router": {
"back-to-home": "Back to Home"
@ -89,16 +97,21 @@
"protected": "Visible to members",
"public": "Public to everyone",
"disabled": "Public memos are disabled"
}
},
"delete-memo": "Delete Memo",
"delete-confirm": "Are you sure to delete this memo?\n\nTHIS ACTION IS IRREVERSIBLE❗"
},
"resource": {
"no-resources": "No resources.",
"fetching-data": "fetching data...",
"copy-link": "Copy Link",
"reset-link": "Reset Link",
"reset-resource-link": "Reset Resource Link",
"reset-link-prompt": "Are you sure to reset the link?\nThis will break all current link usages.\n\nTHIS ACTION IS IRREVERSIBLE❗",
"delete-resource": "Delete Resource",
"warning-text": "Are you sure to delete this resource? THIS ACTION IS IRREVERSIBLE❗",
"linked-amount": "Linked memo amount",
"warning-text-unused": "Are you sure to delete these unused resources? THIS ACTION IS IRREVERSIBLE❗",
"linked-amount": "Linked amount",
"warning-text": "Are you sure to delete this resource?\n\nTHIS ACTION IS IRREVERSIBLE❗",
"warning-text-unused": "Are you sure to delete these unused resources?\n\nTHIS ACTION IS IRREVERSIBLE❗",
"no-unused-resources": "No unused resources",
"delete-selected-resources": "Delete Selected Resources",
"no-files-selected": "No files selected❗",
@ -115,6 +128,7 @@
"external-link": {
"option": "External link",
"link": "Link",
"link-placeholder": "https://the.link.to/your/resource",
"file-name": "File name",
"file-name-placeholder": "File name",
"type": "Type",
@ -138,7 +152,8 @@
"tag-name": "TAG_NAME"
},
"daily-review": {
"title": "Daily Review"
"title": "Daily Review",
"no-memos": "Oops, there is nothing."
},
"setting": {
"my-account": "My Account",
@ -150,8 +165,16 @@
"sso": "SSO",
"account-section": {
"title": "Account Information",
"username-note": "Used to sign in",
"nickname-note": "Displayed in the banner",
"email-note": "Optional",
"update-information": "Update Information",
"change-password": "Change password"
"change-password": "Change password",
"reset-api": "Reset API",
"openapi-title": "OpenAPI",
"openapi-reset": "Reset OpenAPI Key",
"openapi-reset-warning": "❗ The existing API will be invalidated and a new one will be generated.\n\nAre you sure you want to reset?",
"openapi-sample-post": "Hello #memos from {{url}}"
},
"preference-section": {
"theme": "Theme",
@ -167,34 +190,93 @@
"daily-review-time-offset": "Daily Review Time Offset"
},
"storage-section": {
"current-storage": "Current storage",
"type-database": "Database",
"type-local": "Local",
"storage-services-list": "Storage service list",
"create-a-service": "Create a service",
"update-a-service": "Update a service",
"warning-text": "Are you sure to delete this storage service? THIS ACTION IS IRREVERSIBLE❗",
"delete-storage": "Delete Storage"
"warning-text": "Are you sure to delete storage service \"{{name}}\"?\n\nTHIS ACTION IS IRREVERSIBLE❗",
"delete-storage": "Delete Storage",
"local-storage-path": "Local storage path",
"update-local-path": "Update Local Storage Path",
"update-local-path-description": "Local storage path is a relative path to your database file",
"create-storage": "Create Storage",
"update-storage": "Update Storage",
"endpoint": "Endpoint",
"s3-compatible-url": "S3 Compatible URL",
"region": "Region",
"region-placeholder": "Region name",
"accesskey": "Access key",
"accesskey-placeholder": "Access key / Access ID",
"secretkey": "Secret key",
"secretkey-placeholder": "Secret key / Access Key",
"bucket": "Bucket",
"bucket-placeholder": "Bucket name",
"path": "Storage Path",
"path-description": "You can use the same dynamic variables from local storage, like {filename}",
"path-placeholder": "custom/path",
"url-prefix": "URL prefix",
"url-prefix-placeholder": "Custom URL prefix, optional",
"url-suffix": "URL suffix",
"url-suffix-placeholder": "Custom URL suffix, optional"
},
"member-section": {
"create-a-member": "Create a member"
"create-a-member": "Create a member",
"archive-member": "Archive member",
"archive-warning": "❗ Are you sure to archive {{username}}?",
"delete-member": "Delete Member",
"delete-warning": "❗ Are you sure to delete {{username}}?\n\nTHIS ACTION IS IRREVERSIBLE❗"
},
"system-section": {
"server-name": "Server Name",
"customize-server": {
"title": "Customize Server",
"default": "Default is memos",
"icon-url": "Icon URL"
"icon-url": "Icon URL",
"description": "Description",
"locale": "Server Locale",
"appearance": "Server Appearance"
},
"database-file-size": "Database File Size",
"allow-user-signup": "Allow user signup",
"ignore-version-upgrade": "Ignore version upgrade",
"disable-public-memos": "Disable public memos",
"additional-style": "Additional style",
"additional-script": "Additional script",
"additional-style-placeholder": "Additional CSS code",
"additional-script-placeholder": "Additional JavaScript code"
"additional-script-placeholder": "Additional JavaScript code",
"openai-api-key": "OpenAI: API Key",
"openai-api-key-description": "Get API key",
"openai-api-key-placeholder": "Your OpenAI API Key",
"openai-api-host": "OpenAI: API Host",
"openai-api-host-placeholder": "Default: https://api.openai.com/"
},
"appearance-option": {
"system": "Follow system",
"light": "Always light",
"dark": "Always dark"
},
"sso-section": {
"sso-list": "SSO List",
"delete-sso": "Confirm delete",
"confirm-delete": "Are you sure to delete \"{{name}}\" SSO configuration?\n\nTHIS ACTION IS IRREVERSIBLE❗",
"create-sso": "Create SSO",
"update-sso": "Update SSO",
"sso-created": "SSO {{name}} created",
"sso-updated": "SSO {{name}} updated",
"identifier": "Identifier",
"display-name": "Display Name",
"template": "Template",
"custom": "Custom",
"identifier-filter": "Identifier Filter",
"redirect-url": "Redirect URL",
"client-id": "Client ID",
"client-secret": "Client secret",
"authorization-endpoint": "Authorization endpoint",
"token-endpoint": "Token endpoint",
"user-endpoint": "User endpoint",
"scopes": "Scopes"
}
},
"filter": {
@ -219,7 +301,9 @@
"linked": "Has links",
"has-attachment": "Has attachments"
},
"text-placeholder": "Starts with ^ to use regex"
"text-placeholder": "Starts with ^ to use regex",
"and": "And",
"or": "Or"
},
"message": {
"no-memos": "no memos 🌃",
@ -230,12 +314,15 @@
"memo-updated-datetime": "Memo created datetime changed.",
"invalid-created-datetime": "Invalid created datetime.",
"change-memo-created-time": "Change memo created time",
"change-memo-created-time-warning-1": "THIS IS NOT A NORMAL BEHAVIOR.",
"change-memo-created-time-warning-2": "Please make sure you really need it.",
"memo-not-found": "Memo not found.",
"fill-all": "Please fill in all fields.",
"password-not-match": "Passwords do not match.",
"new-password-not-match": "New passwords do not match.",
"image-load-failed": "Image load failed",
"fill-form": "Please fill out this form",
"fill-server-name": "Please fill in the server name",
"login-failed": "Login failed",
"signup-failed": "Signup failed",
"user-not-found": "User not found",
@ -281,7 +368,22 @@
"embed-memo": {
"title": "Embed Memo",
"text": "Copy and paste the below codes into your blog or website.",
"only-public-supported": "* Only the public memo supports.",
"only-public-supported": "* Only public memos can be embedded.",
"copy": "Copy"
},
"heatmap": {
"memo-in": "{{amount}} memo in {{period}}",
"memos-in": "{{amount}} memos in {{period}}",
"memo-on": "{{amount}} memo on {{date}}",
"memos-on": "{{amount}} memos on {{date}}",
"day": "day",
"days": "days"
},
"about": {
"about-memos": "About Memos",
"memos-description": "Memos is a web-based note-taking application that you can use to write, organize, and share notes.",
"no-server-description": "No description configured for this server.",
"powered-by": "Powered by",
"other-projects": "Other Projects"
}
}
}

389
web/src/locales/pt-BR.json Normal file
View file

@ -0,0 +1,389 @@
{
"common": {
"memos-slogan": "Uma central de anotações leve e auto-hospedada. De código aberto e gratuito para sempre.",
"about": "Sobre",
"home": "Início",
"resources": "Recursos",
"settings": "Configurações",
"archived": "Arquivado",
"email": "Email",
"password": "Senha",
"avatar": "Avatar",
"username": "Nome de usuário",
"nickname": "Apelido",
"save": "Salvar",
"close": "Fechar",
"cancel": "Cancelar",
"create": "Criar",
"update": "Atualizar",
"change": "Alterar",
"confirm": "Confirmar",
"reset": "Redefinir",
"language": "Idioma",
"version": "Versão",
"pin": "Fixar",
"unpin": "Desafixar",
"edit": "Editar",
"restore": "Restaurar",
"delete": "Deletar",
"null": "Nulo",
"share": "Compartilhar",
"archive": "Arquivar",
"basic": "Básico",
"admin": "Admin",
"explore": "Explorar",
"sign-in": "Entrar",
"sign-in-with": "Entrar usando {{provider}}",
"or": "ou",
"sign-up": "Registrar",
"sign-out": "Sair",
"type": "Tipo",
"shortcuts": "Atalhos",
"title": "Título",
"filter": "Filtro",
"filter-period": "{{from}} até {{to}}",
"tags": "Tags",
"yourself": "Você mesmo",
"changed": "alterado",
"fold": "Recolher",
"expand": "Expandir",
"image": "Imagem",
"link": "Link",
"vacuum": "Compactar (vacuum)",
"select": "Selecionar",
"database": "Banco de dados",
"upload": "Carregar",
"preview": "Pré-visualizar",
"rename": "Renomear",
"clear": "Limpar",
"name": "Nome",
"visibility": "Visibilidade",
"learn-more": "Saiba mais",
"e.g": "ex.",
"beta": "Beta"
},
"router": {
"back-to-home": "Voltar ao início"
},
"auth": {
"signup-as-host": "Registrar como Host",
"host-tip": "Você está se registrando como Host do Site.",
"not-host-tip": "Se você não tem uma conta, por favor, entre em contato com o Host do site.",
"new-password": "Nova senha",
"repeat-new-password": "Repita a nova senha"
},
"editor": {
"editing": "Editando...",
"cancel-edit": "Cancelar edição",
"save": "Salvar",
"placeholder": "Alguma ideia...",
"only-image-supported": "Apenas imagens são suportadas",
"cant-empty": "O conteúdo não pode estar vazio",
"local": "Local",
"resources": "Recursos"
},
"memo": {
"view-detail": "Ver detalhes",
"copy-link": "Copiar link",
"embed": "Incorporar",
"archived-memos": "Memos arquivados",
"no-archived-memos": "Nenhum memo arquivado",
"fetching-data": "obtendo dados...",
"fetch-more": "Clique para carregar mais dados",
"archived-at": "Arquivado em",
"search-placeholder": "Pesquisar memos",
"visibility": {
"private": "Privado (eu)",
"protected": "Protegido (membros)",
"public": "Público (todos)",
"disabled": "Memos públicos estão desabilitados"
},
"delete-memo": "Deletar memo",
"delete-confirm": "Tem certeza de que deseja deletar este memo?\n\nESTA AÇÃO É IRREVERSÍVEL❗"
},
"resource": {
"no-resources": "Nenhum recurso",
"fetching-data": "obtendo dados...",
"copy-link": "Copiar link",
"reset-link": "Redefinir link",
"reset-resource-link": "Redefinir link do recurso",
"reset-link-prompt": "Tem certeza de que deseja redefinir o link?\nIsso quebrará todos os vínculos atuais.\n\nESTA AÇÃO É IRREVERSÍVEL❗",
"delete-resource": "Deletar recurso",
"linked-amount": "Quantidade de vínculos",
"warning-text": "Tem certeza de que deseja deletar este recurso?\n\nESTA AÇÃO É IRREVERSÍVEL❗",
"warning-text-unused": "Tem certeza de que deseja deletar este recurso não utilizado?\n\nESTA AÇÃO É IRREVERSÍVEL❗",
"no-unused-resources": "Nenhum recurso não utilizado",
"delete-selected-resources": "Deletar recursos selecionados",
"no-files-selected": "Nenhum arquivo selecionado❗",
"upload-successfully": "Carregado com êxito",
"file-drag-drop-prompt": "Arraste e solte o arquivo aqui para carregá-lo",
"search-bar-placeholder": "Pesquisar recurso",
"create-dialog": {
"title": "Criar recurso",
"upload-method": "Método de carregamento",
"local-file": {
"option": "Arquivo local",
"choose": "Escolher arquivo"
},
"external-link": {
"option": "Link externo",
"link": "Link",
"link-placeholder": "https://o.link.para/seu/recurso",
"file-name": "Nome",
"file-name-placeholder": "Nome do arquivo",
"type": "Tipo",
"type-placeholder": "Tipo do arquivo"
}
}
},
"shortcut-list": {
"shortcut-title": "título do atalho",
"create-shortcut": "Criar atalho",
"edit-shortcut": "Editar atalho",
"eligible-memo": "memo elegível",
"fill-previous": "Por favor, preencha o valor do filtro anterior",
"title-required": "O título do atalho é obrigatório",
"value-required": "O valor do filtro é obrigatório"
},
"tag-list": {
"tip-text": "Insira `#tag` para criar uma nova",
"create-tag": "Criar Tag",
"all-tags": "Todas as Tags",
"tag-name": "NOME_DA_TAG"
},
"daily-review": {
"title": "Resumo Diário",
"no-memos": "Não há memos"
},
"setting": {
"my-account": "Minha conta",
"preference": "Preferências",
"member": "Membro",
"member-list": "Lista de membros",
"system": "Sistema",
"storage": "Armazenamento",
"sso": "SSO",
"account-section": {
"title": "Informação da conta",
"username-note": "Usado para entrar",
"nickname-note": "Exibido no banner",
"email-note": "Opcional",
"update-information": "Atualizar informações",
"change-password": "Alterar senha",
"reset-api": "Redefinir API",
"openapi-title": "OpenAPI",
"openapi-reset": "Redefinir chave OpenAPI",
"openapi-reset-warning": "❗ A chave de API existente será invalidada e uma nova será gerada.\n\nTem certeza de que deseja redefinir?",
"openapi-sample-post": "Olá #memos em {{url}}"
},
"preference-section": {
"theme": "Tema",
"default-memo-visibility": "Visibilidade padrão do memo",
"default-resource-visibility": "Visibilidade padrão do recurso",
"enable-folding-memo": "Habilitar recolher memo",
"enable-double-click": "Habilitar duplo clique para editar",
"editor-font-style": "Estilo de fonte do editor",
"mobile-editor-style": "Estilo do editor para dispositivos móveis",
"default-memo-sort-option": "Memo display time",
"created_ts": "Hora de criação",
"updated_ts": "Hora de atualização",
"daily-review-time-offset": "Compensação de tempo do Resumo Diário"
},
"storage-section": {
"current-storage": "Armazenamento atual",
"type-database": "Banco de dados",
"type-local": "Local",
"storage-services-list": "Lista de serviços de armazenamento",
"create-a-service": "Criar um serviço",
"update-a-service": "Atualizar um serviço",
"warning-text": "Tem certeza de que deseja deletar o serviço de armazenamento \"{{name}}\"?\n\nESTA AÇÃO É IRREVERSÍVEL❗",
"delete-storage": "Deletar armazenamento",
"local-storage-path": "Caminho do armazenamento local",
"update-local-path": "Atualizar caminho do armazenamento local",
"update-local-path-description": "O caminho de armazenamento local é relativo ao seu banco de dados",
"create-storage": "Criar armazenamento",
"update-storage": "Atualizar armazenamento",
"endpoint": "Endpoint",
"s3-compatible-url": "URL compatível com S3",
"region": "Região",
"region-placeholder": "Nome da região",
"accesskey": "Chave de acesso",
"accesskey-placeholder": "Chave de acesso / ID de acesso",
"secretkey": "Chave secreta",
"secretkey-placeholder": "Chave secreta / Chave de acesso",
"bucket": "Bucket",
"bucket-placeholder": "Nome do bucket",
"path": "Caminho do armazenamento",
"path-description": "Você pode usar as mesmas variáveis dinâmicas do armazenamento local, como {filename}",
"path-placeholder": "caminho/personalizado",
"url-prefix": "Prefixo da URL",
"url-prefix-placeholder": "Prefixo personalizado da URL, opcional",
"url-suffix": "Sufixo da URL",
"url-suffix-placeholder": "Sufixo personalizado da URL, opcional"
},
"member-section": {
"create-a-member": "Criar um membro",
"archive-member": "Arquivar membro",
"archive-warning": "❗ Tem certeza de que deseja arquivar {{username}}?",
"delete-member": "Deletar membro",
"delete-warning": "❗ Tem certeza de que deseja deletar {{username}}?\n\nESTA AÇÃO É IRREVERSÍVEL❗"
},
"system-section": {
"server-name": "Nome do servidor",
"customize-server": {
"title": "Personalizar Servidor",
"default": "O padrão é memos",
"icon-url": "URL do ícone",
"description": "Descrição",
"locale": "Localização do servidor",
"appearance": "Aparência do servidor"
},
"database-file-size": "Tamanho do banco de dados",
"allow-user-signup": "Permitir registro de usuário",
"ignore-version-upgrade": "Ignorar atualização de versão",
"disable-public-memos": "Desabilitar memos públicos",
"additional-style": "Estilo adicional",
"additional-script": "Script adicional",
"additional-style-placeholder": "Código CSS adicional",
"additional-script-placeholder": "Código JavaScript adicional",
"openai-api-key": "OpenAI: Chave de API",
"openai-api-key-description": "Obter chave de API",
"openai-api-key-placeholder": "Sua chave de API da OpenAI",
"openai-api-host": "OpenAI: Host de API",
"openai-api-host-placeholder": "Padrão: https://api.openai.com/"
},
"appearance-option": {
"system": "Sistema",
"light": "Claro",
"dark": "Escuro"
},
"sso-section": {
"sso-list": "Lista de SSOs (Login Único)",
"delete-sso": "Confirmar exclusão",
"confirm-delete": "Tem certeza de que deseja excluir a configuração SSO \"{{name}}\"?\n\nESTA AÇÃO É IRREVERSÍVEL❗",
"create-sso": "Criar SSO",
"update-sso": "Atualizar SSO",
"sso-created": "SSO {{name}} criado",
"sso-updated": "SSO {{name}} atualizado",
"identifier": "Identificador",
"display-name": "Nome de exibição",
"template": "Modelo",
"custom": "Personalizado",
"identifier-filter": "Filtro identificador",
"redirect-url": "URL de redirecionamento",
"client-id": "ID do cliente",
"client-secret": "Segredo do cliente",
"authorization-endpoint": "Endpoint de autenticação",
"token-endpoint": "Endpoint de token",
"user-endpoint": "Endpoint do usuário",
"scopes": "Escopos"
}
},
"filter": {
"new-filter": "Novo filtro",
"type": {
"tag": "Tag",
"type": "Tipo",
"text": "Texto",
"display-time": "Hora de exibição",
"visibility": "Visibilidade"
},
"operator": {
"contains": "Contém",
"not-contains": "Não contém",
"is": "É",
"is-not": "Não É",
"before": "Antes",
"after": "Depois"
},
"value": {
"not-tagged": "Sem tags",
"linked": "Tem links",
"has-attachment": "Tem anexos"
},
"text-placeholder": "Inicie com ^ para usar regex",
"and": "E",
"or": "Ou"
},
"message": {
"no-memos": "nenhum memo 🌃",
"memos-ready": "todos os memos estão prontos 🎉",
"no-resource": "nenhum recurso 🌃",
"resource-ready": "todos os recursos estão prontos 🎉",
"restored-successfully": "Restaurado com êxito",
"memo-updated-datetime": "Data do memo atualizada",
"invalid-created-datetime": "Data de criação inválida",
"change-memo-created-time": "Alterar data de criação do memo",
"change-memo-created-time-warning-1": "ESTE NÃO É UM PROCEDIMENTO RECOMENDADO.",
"change-memo-created-time-warning-2": "Esteja certo de que realmente precisa disso.",
"memo-not-found": "Memo não encontrado",
"fill-all": "Por favor, preencha todos os campos",
"password-not-match": "As senhas não coincidem",
"new-password-not-match": "As novas senhas não coincidem",
"image-load-failed": "Falha ao carregar a imagem",
"fill-form": "Por favor, preencha o formulário",
"fill-server-name": "Por favor, preencha o nome do servidor",
"login-failed": "Falha no login",
"signup-failed": "Falha no registro",
"user-not-found": "Usuário não encontrado",
"password-changed": "Senha alterada",
"private-only": "Este memo é privado",
"copied": "Copiado",
"succeed-copy-content": "Conteúdo copiado com êxito.",
"succeed-copy-code": "Código copiado com êxito.",
"succeed-copy-link": "Link copiado com êxito.",
"change-resource-filename": "Alterar nome do arquivo do recurso",
"resource-filename-updated": "Nome do arquivo do recurso atualizado",
"invalid-resource-filename": "Nome de arquivo de recurso inválido",
"click-to-save-the-image": "Clique para salvar a imagem",
"generating-the-screenshot": "Gerando a captura de tela...",
"count-selected-resources": "Total selecionado",
"too-short": "Muito curto",
"too-long": "Muito longo",
"not-allow-space": "Espaços não são permitidos",
"not-allow-chinese": "Caracteres chineses não são permitidos",
"succeed-vacuum-database": "Banco de dados compactado com êxito.",
"succeed-update-additional-style": "Folha de estilos adicional atualizada com êxito.",
"succeed-copy-resource-link": "Link do recurso copiado com êxito.",
"succeed-update-customized-profile": "Perfil personalizado com êxito.",
"succeed-update-additional-script": "Script adicional atualizado com êxito.",
"update-succeed": "Atualizado com êxito",
"page-not-found": "404 - Página não encontrada 😥"
},
"days": {
"mon": "Seg",
"tue": "Ter",
"wed": "Qua",
"thu": "Qui",
"fri": "Sex",
"sat": "Sáb",
"sun": "Dom"
},
"ask-ai": {
"title": "Pergunte a IA",
"not-enabled": "Você não configurou a chave de API da OpenAI.",
"go-to-settings": "Ir para configurações",
"placeholder": "Pergunte qualquer coisa para a IA..."
},
"embed-memo": {
"title": "Incorporar memo",
"text": "Copie o código abaixo para incorporar este memo em seu site.",
"only-public-supported": "* Somente memos públicos podem ser incorporados.",
"copy": "Copiar"
},
"heatmap": {
"memo-in": "{{amount}} memo em {{period}}",
"memos-in": "{{amount}} memos em {{period}}",
"memo-on": "{{amount}} memo em {{date}}",
"memos-on": "{{amount}} memos em {{date}}",
"day": "dia",
"days": "dias"
},
"about": {
"about-memos": "Sobre o Memos",
"memos-description": "Memos é um aplicativo de bloco de notas baseado na web que você pode usar para escrever, organizar e compartilhar anotações.",
"no-server-description": "Nenhuma descrição configurada para este servidor.",
"powered-by": "Provido por",
"other-projects": "Outros projetos"
}
}

View file

@ -1,253 +0,0 @@
{
"common": {
"about": "Sobre",
"email": "E-mail",
"password": "Senha",
"repeat-password-short": "Repita",
"repeat-password": "Repita a senha",
"new-password": "Nova senha",
"repeat-new-password": "Repita a nova senha",
"avatar": "Avatar",
"username": "Nome de usuário",
"nickname": "Apelido",
"save": "Salvar",
"close": "Fechar",
"cancel": "Cancelar",
"create": "Criar",
"change": "Alterar",
"confirm": "Confirmar",
"reset": "Redefinir",
"language": "Idioma",
"version": "Versão",
"pin": "Fixar",
"unpin": "Desfixar",
"edit": "Editar",
"restore": "Restaurar",
"delete": "Apagar",
"null": "Nulo",
"share": "Compartilhar",
"archive": "Arquivar",
"basic": "Básico",
"admin": "Admin",
"explore": "Explorar",
"sign-in": "Entrar",
"sign-up": "Cadastrar-se",
"sign-out": "Deslogar",
"back-to-home": "Voltar para Início",
"type": "Type",
"shortcuts": "Atalhos",
"title": "Título",
"filter": "Filtro",
"tags": "Tags",
"yourself": "Você mesmo",
"archived-at": "Arquivado em",
"changed": "alterado",
"update-on": "Update on",
"fold": "Fold",
"expand": "Expandir",
"image": "Imagem",
"link": "Link",
"vacuum": "Vacuum",
"select": "Selecionar",
"database": "Banco de dados"
},
"auth": {
"signup-as-host": "Sign up as Host",
"host-tip": "You are registering as the Site Host.",
"not-host-tip": "If you don't have an account, please contact the site host."
},
"sidebar": {
"daily-review": "Revisão diária",
"resources": "Recursos",
"setting": "Configurações",
"archived": "Arquivado"
},
"resource": {
"description": "View your static resources in memos. e.g. images",
"no-resources": "No resources.",
"fetching-data": "fetching data...",
"upload": "Enviar",
"preview": "Pré-visualizar",
"warning-text": "Are you sure to delete this resource? THIS ACTION IS IRREVERSIBLE❗",
"copy-link": "Copiar Link",
"delete-resource": "Delete Resource",
"linked-amount": "Linked memo amount",
"rename": "Renomear",
"clear": "Limpar",
"warning-text-unused": "Are you sure to delete these unused resource? THIS ACTION IS IRREVERSIBLE❗",
"no-unused-resources": "No unused resources",
"name": "Nome"
},
"archived": {
"archived-memos": "Memos Arquivados",
"no-archived-memos": "No archived memos.",
"fetching-data": "fetching data..."
},
"editor": {
"editing": "Editando...",
"cancel-edit": "Cancelar edição",
"save": "Salvar",
"placeholder": "Any thoughts...",
"only-image-supported": "Only image file supported.",
"cant-empty": "Content can't be empty",
"local": "Local",
"resources": "Resources"
},
"memo": {
"view-detail": "View Detail",
"copy": "Copy",
"copy-link": "Copiar Link",
"visibility": {
"private": "Visível apenas para você",
"protected": "Visível para membros",
"public": "Todos podem ver",
"disabled": "Memos públicos estão desativados"
}
},
"memo-list": {
"fetching-data": "fetching data...",
"fetch-more": "Click here to fetch more"
},
"shortcut-list": {
"shortcut-title": "shortcut title",
"create-shortcut": "Criar Atalho",
"edit-shortcut": "Editar Atalho",
"eligible-memo": "eligible memo",
"fill-previous": "Please fill in previous filter value",
"title-required": "Title is required",
"value-required": "Filter value is required"
},
"filter": {
"new-filter": "New Filter",
"type": {
"tag": "Tag",
"type": "Type",
"text": "Texto",
"display-time": "Display Time",
"visibility": "Visibility"
},
"operator": {
"contains": "Contains",
"not-contains": "Does not contain",
"is": "Is",
"is-not": "Is Not",
"before": "Before",
"after": "After"
},
"value": {
"not-tagged": "No tags",
"linked": "Has links"
},
"text-placeholder": "Starts with ^ to use regex"
},
"tag-list": {
"tip-text": "Input `#tag` to create"
},
"search": {
"quickly-filter": "Quickly filter"
},
"setting": {
"my-account": "My Account",
"preference": "Preference",
"member": "Member",
"member-list": "Member list",
"system": "System",
"storage": "Storage",
"sso": "SSO",
"account-section": {
"title": "Account Information",
"update-information": "Update Information",
"change-password": "Change password"
},
"preference-section": {
"theme": "Theme",
"default-memo-visibility": "Default memo visibility",
"enable-folding-memo": "Enable folding memo",
"enable-double-click": "Enable double-click to edit",
"editor-font-style": "Editor font style",
"mobile-editor-style": "Mobile editor style",
"default-memo-sort-option": "Memo display time",
"created_ts": "Created Time",
"updated_ts": "Updated Time"
},
"storage-section": {
"storage-services-list": "Storage service list",
"create-a-service": "Create a service",
"update-a-service": "Update a service",
"warning-text": "Are you sure to delete this storage service? THIS ACTION IS IRREVERSIBLE❗",
"delete-storage": "Delete Storage"
},
"member-section": {
"create-a-member": "Create a member"
},
"system-section": {
"server-name": "Server Name",
"customize-server": {
"title": "Customize Server",
"default": "Default is memos",
"icon-url": "Icon URL"
},
"database-file-size": "Database File Size",
"allow-user-signup": "Allow user signup",
"disable-public-memos": "Disable public memos",
"additional-style": "Additional style",
"additional-script": "Additional script",
"additional-style-placeholder": "Additional CSS codes",
"additional-script-placeholder": "Additional JavaScript codes"
},
"appearance-option": {
"system": "Follow system",
"light": "Always light",
"dark": "Always dark"
}
},
"message": {
"no-memos": "no memos 🌃",
"memos-ready": "all memos are ready 🎉",
"restored-successfully": "Restored successfully",
"memo-updated-datetime": "Memo created datetime changed.",
"invalid-created-datetime": "Invalid created datetime.",
"change-memo-created-time": "Change memo created time",
"memo-not-found": "Memo not found.",
"fill-all": "Please fill in all fields.",
"password-not-match": "Passwords do not match.",
"new-password-not-match": "New passwords do not match.",
"image-load-failed": "Image load failed",
"fill-form": "Please fill out this form",
"login-failed": "Login failed",
"signup-failed": "Signup failed",
"user-not-found": "User not found",
"password-changed": "Password Changed",
"private-only": "This memo is private only.",
"copied": "Copied",
"succeed-copy-content": "Succeed to copy content to clipboard.",
"succeed-copy-code": "Succeed to copy code to clipboard.",
"succeed-copy-link": "Succeed to copy link to clipboard.",
"change-resource-filename": "Change resource filename",
"resource-filename-updated": "Resource filename changed.",
"invalid-resource-filename": "Invalid filename.",
"click-to-save-the-image": "Click to save the image",
"generating-the-screenshot": "Generating the screenshot...",
"count-selected-resources": "Total selected",
"too-short": "Too short",
"too-long": "Too long",
"not-allow-space": "Don't allow space",
"not-allow-chinese": "Don't allow chinese",
"succeed-vacuum-database": "Succeed to vacuum database",
"succeed-update-additional-style": "Succeed to update additional style",
"succeed-copy-resource-link": "Succeed to copy resource link to clipboard",
"succeed-update-customized-profile": "Succeed to update customized profile",
"succeed-update-additional-script": "Succeed to update additional script",
"update-succeed": "Update succeed",
"page-not-found": "404 - Page Not Found 😥"
},
"days": {
"mon": "Mon",
"tue": "Tue",
"wed": "Wed",
"thu": "Thu",
"fri": "Fri",
"sat": "Sat",
"sun": "Sun"
}
}

View file

@ -1,6 +1,4 @@
import { CssVarsProvider } from "@mui/joy";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
@ -12,13 +10,6 @@ import "./less/code-highlight.less";
import "./css/global.css";
import "./css/tailwind.css";
import "dayjs/locale/zh";
import "dayjs/locale/fr";
import "dayjs/locale/vi";
import "dayjs/locale/ru";
dayjs.extend(relativeTime);
const container = document.getElementById("root");
const root = createRoot(container as HTMLElement);
root.render(

View file

@ -4,7 +4,6 @@ import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useGlobalStore, useUserStore } from "@/store/module";
import * as api from "@/helpers/api";
import { slogan } from "@/helpers/site";
import { absolutifyLink } from "@/helpers/utils";
import useLoading from "@/hooks/useLoading";
import Icon from "@/components/Icon";
@ -80,7 +79,7 @@ const Auth = () => {
}
} catch (error: any) {
console.error(error);
toast.error(error.response.data.error);
toast.error(error.response.data.message || t("message.login-failed"));
}
actionBtnLoadingState.setFinish();
};
@ -101,11 +100,11 @@ const Auth = () => {
if (user) {
window.location.href = "/";
} else {
toast.error(t("common.singup-failed"));
toast.error(t("common.signup-failed"));
}
} catch (error: any) {
console.error(error);
toast.error(error.response.data.error);
toast.error(error.response.data.message || error.message || t("common.signup-failed"));
}
actionBtnLoadingState.setFinish();
};
@ -133,7 +132,9 @@ const Auth = () => {
<img className="h-12 w-auto rounded-lg mr-1" src={systemStatus.customizedProfile.logoUrl} alt="" />
<p className="text-6xl tracking-wide text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
</div>
<p className="text-sm text-gray-700 dark:text-gray-300">{systemStatus.customizedProfile.description || slogan}</p>
<p className="text-sm text-gray-700 dark:text-gray-300">
{systemStatus.customizedProfile.description || t("common.memos-slogan")}
</p>
</div>
<form className="w-full" onSubmit={handleFormSubmit}>
<div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading && "opacity-80"}`}>
@ -209,7 +210,7 @@ const Auth = () => {
</form>
{identityProviderList.length > 0 && (
<>
<Divider className="!my-4">or</Divider>
<Divider className="!my-4">{t("common.or")}</Divider>
<div className="w-full flex flex-col space-y-2">
{identityProviderList.map((identityProvider) => (
<Button
@ -220,7 +221,7 @@ const Auth = () => {
size="md"
onClick={() => handleSignInWithIdentityProvider(identityProvider)}
>
Sign in with {identityProvider.name}
{t("common.sign-in-with", { provider: identityProvider.name })}
</Button>
))}
</div>

View file

@ -4,7 +4,6 @@ import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useMemoStore, useUserStore } from "@/store/module";
import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
import * as utils from "@/helpers/utils";
import MobileHeader from "@/components/MobileHeader";
import useToggle from "@/hooks/useToggle";
import toImage from "@/labs/html2image";
@ -12,6 +11,9 @@ import showPreviewImageDialog from "@/components/PreviewImageDialog";
import Icon from "@/components/Icon";
import DatePicker from "@/components/kit/DatePicker";
import DailyMemo from "@/components/DailyMemo";
import i18n from "@/i18n";
import { findNearestLanguageMatch } from "@/utils/i18n";
import { convertToMillis, getDateStampByDate, getNormalizedDateString, getTimeStampByDate } from "@/helpers/datetime";
const DailyReview = () => {
const { t } = useTranslation();
@ -20,21 +22,21 @@ const DailyReview = () => {
const userStore = useUserStore();
const { localSetting } = userStore.state.user as User;
const [currentDateStamp, setCurrentDateStamp] = useState(utils.getDateStampByDate(utils.getDateString(Date.now())));
const [currentDateStamp, setCurrentDateStamp] = useState(getDateStampByDate(getNormalizedDateString()));
const [showDatePicker, toggleShowDatePicker] = useToggle(false);
const memosElRef = useRef<HTMLDivElement>(null);
const currentDate = new Date(currentDateStamp);
const dailyMemos = memos
.filter((m) => {
const createdTimestamp = utils.getTimeStampByDate(m.createdTs);
const currentDateStampWithOffset = currentDateStamp + utils.convertToMillis(localSetting);
const createdTimestamp = getTimeStampByDate(m.createdTs);
const currentDateStampWithOffset = currentDateStamp + convertToMillis(localSetting);
return (
m.rowStatus === "NORMAL" &&
createdTimestamp >= currentDateStampWithOffset &&
createdTimestamp < currentDateStampWithOffset + DAILY_TIMESTAMP
);
})
.sort((a, b) => utils.getTimeStampByDate(a.createdTs) - utils.getTimeStampByDate(b.createdTs));
.sort((a, b) => getTimeStampByDate(a.createdTs) - getTimeStampByDate(b.createdTs));
useEffect(() => {
const fetchMoreMemos = async () => {
@ -77,6 +79,10 @@ const DailyReview = () => {
toggleShowDatePicker(false);
};
const locale = findNearestLanguageMatch(i18n.language);
const currentMonth = currentDate.toLocaleDateString(locale, { month: "short" });
const currentDayOfWeek = currentDate.toLocaleDateString(locale, { weekday: "short" });
return (
<section className="w-full max-w-2xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
@ -124,17 +130,17 @@ const DailyReview = () => {
<div className="mx-auto font-bold text-gray-600 dark:text-gray-300 text-center leading-6 mb-2">{currentDate.getFullYear()}</div>
<div className="flex flex-col justify-center items-center m-auto w-24 h-24 shadow rounded-3xl dark:bg-zinc-800">
<div className="text-center w-full leading-6 text-sm text-white bg-blue-700 rounded-t-3xl">
{currentDate.toLocaleString("en-US", { month: "short" })}
{currentMonth[0].toUpperCase() + currentMonth.substring(1)}
</div>
<div className="text-black dark:text-white text-4xl font-medium leading-12">{currentDate.getDate()}</div>
<div className="dark:text-gray-300 text-center w-full leading-6 -mt-2 text-xs">
{currentDate.toLocaleString("en-US", { weekday: "short" })}
{currentDayOfWeek[0].toUpperCase() + currentDayOfWeek.substring(1)}
</div>
</div>
</div>
{dailyMemos.length === 0 ? (
<div className="mx-auto pt-4 pb-5 px-0">
<p className="italic text-gray-400">Oops, there is nothing.</p>
<p className="italic text-gray-400">{t("daily-review.no-memos")}</p>
</div>
) : (
<div className="flex flex-col justify-start items-start w-full mt-2">

View file

@ -1,20 +1,18 @@
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { UNKNOWN_ID } from "@/helpers/consts";
import { useMemoStore } from "@/store/module";
import useLoading from "@/hooks/useLoading";
import MemoContent from "@/components/MemoContent";
import MemoResources from "@/components/MemoResources";
import { getDateTimeString } from "@/helpers/datetime";
interface State {
memo: Memo;
}
const EmbedMemo = () => {
const { i18n } = useTranslation();
const params = useParams();
const memoStore = useMemoStore();
const [state, setState] = useState<State>({
@ -47,7 +45,7 @@ const EmbedMemo = () => {
<main className="w-full max-w-lg mx-auto my-auto shadow px-4 py-4 rounded-lg">
<div className="w-full flex flex-col justify-start items-start">
<div className="w-full mb-2 flex flex-row justify-start items-center text-sm text-gray-400 dark:text-gray-300">
<span>{dayjs(state.memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
<span>{getDateTimeString(state.memo.createdTs)}</span>
<a className="ml-2 hover:underline hover:text-green-600" href={`/u/${state.memo.creatorId}`}>
@{state.memo.creatorName}
</a>

View file

@ -1,4 +1,3 @@
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
@ -8,6 +7,7 @@ import { useGlobalStore, useMemoStore, useUserStore } from "@/store/module";
import useLoading from "@/hooks/useLoading";
import MemoContent from "@/components/MemoContent";
import MemoResources from "@/components/MemoResources";
import { getDateTimeString } from "@/helpers/datetime";
import "@/less/memo-detail.less";
interface State {
@ -15,7 +15,7 @@ interface State {
}
const MemoDetail = () => {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const params = useParams();
const location = useLocation();
const globalStore = useGlobalStore();
@ -77,7 +77,7 @@ const MemoDetail = () => {
<div className="memo-container">
<div className="memo-header">
<div className="status-container">
<span className="time-text">{dayjs(state.memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
<span className="time-text">{getDateTimeString(state.memo.createdTs)}</span>
<a className="name-text" href={`/u/${state.memo.creatorId}`}>
@{state.memo.creatorName}
</a>

View file

@ -1,7 +1,7 @@
import * as api from "@/helpers/api";
import * as storage from "@/helpers/storage";
import i18n from "@/i18n";
import { convertLanguageCodeToLocale } from "@/utils/i18n";
import { findNearestLanguageMatch } from "@/utils/i18n";
import store, { useAppSelector } from "../";
import { setAppearance, setGlobalState, setLocale } from "../reducer/global";
@ -48,7 +48,7 @@ export const initialGlobalState = async () => {
externalUrl: "",
},
};
defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language);
defaultGlobalState.locale = storageLocale || findNearestLanguageMatch(i18n.language);
defaultGlobalState.appearance = customizedProfile.appearance;
}
store.dispatch(setGlobalState(defaultGlobalState));

View file

@ -1 +1 @@
type Locale = "en" | "zh" | "vi" | "fr" | "nl" | "sv" | "de" | "es" | "uk" | "ru" | "it" | "hant" | "tr" | "ko" | "sl";
type Locale = string;

View file

@ -1,7 +1,35 @@
export const convertLanguageCodeToLocale = (codename: string): Locale => {
if (codename === "zh-TW" || codename === "zh-HK") {
return "hant";
import i18n, { TLocale, availableLocales } from "@/i18n";
import { FallbackLngObjList } from "i18next";
export const findNearestLanguageMatch = (codename: string): Locale => {
// Find existing translations for full codes (e.g. "en-US", "zh-Hant")
if (codename.length > 2 && availableLocales.includes(codename as TLocale)) {
return codename as Locale;
}
// Find fallback in src/i18n.ts
const i18nfallbacks = Object.entries(i18n.store.options.fallbackLng as FallbackLngObjList);
for (const [main, fallbacks] of i18nfallbacks) {
if (codename === main) {
return fallbacks[0] as Locale;
}
}
const shortCode = codename.substring(0, 2);
return shortCode as Locale;
// Match existing short code translation
if (availableLocales.includes(shortCode as TLocale)) {
return shortCode as Locale;
}
// Try to match "xx-YY" to existing translation for "xx-ZZ" as a last resort
// If some match is undesired, it can be overriden in src/i18n.ts `fallbacks` option
for (const existing of availableLocales) {
if (shortCode == existing.substring(0, 2)) {
return existing as Locale;
}
}
// should be "en", so the selector is not empty if there isn't a translation for current user's language
return (i18n.store.options.fallbackLng as FallbackLngObjList).default[0] as Locale;
};

File diff suppressed because it is too large Load diff