557278fac0
* 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
75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { useGlobalStore } from "@/store/module";
|
|
import Icon from "./Icon";
|
|
import { generateDialog } from "./Dialog";
|
|
import GitHubBadge from "./GitHubBadge";
|
|
|
|
type Props = DialogProps;
|
|
|
|
const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
|
|
const { t } = useTranslation();
|
|
const globalStore = useGlobalStore();
|
|
const profile = globalStore.state.systemStatus.profile;
|
|
const customizedProfile = globalStore.state.systemStatus.customizedProfile;
|
|
|
|
const handleCloseBtnClick = () => {
|
|
destroy();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="dialog-header-container">
|
|
<p className="title-text flex items-center">
|
|
{t("common.about")} {customizedProfile.name}
|
|
</p>
|
|
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
|
<Icon.X />
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col justify-start items-start max-w-full w-96">
|
|
<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">
|
|
{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
|
|
</a>
|
|
<span>v{profile.version}</span>
|
|
</div>
|
|
<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">{t("about.other-projects")}:</span>
|
|
<a
|
|
href="https://github.com/boojack/sticky-notes"
|
|
target="_blank"
|
|
className="flex items-center underline text-blue-600 hover:opacity-80"
|
|
>
|
|
<img
|
|
className="w-4 h-auto mr-1"
|
|
src="https://raw.githubusercontent.com/boojack/sticky-notes/main/public/sticky-notes.ico"
|
|
alt=""
|
|
/>
|
|
<span>Sticky notes</span>
|
|
</a>
|
|
<a href="https://star-history.com" target="_blank" className="flex items-center underline text-blue-600 hover:opacity-80">
|
|
<img className="w-4 h-auto mr-1" src="https://star-history.com/icon.png" alt="" />
|
|
<span>Star history</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default function showAboutSiteDialog(): void {
|
|
generateDialog(
|
|
{
|
|
className: "about-site-dialog",
|
|
dialogName: "about-site-dialog",
|
|
},
|
|
AboutSiteDialog
|
|
);
|
|
}
|