From 614beaf5231c2c2f77699cb77b67491e45048696 Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Thu, 24 Oct 2024 20:01:22 +0800 Subject: [PATCH] feat: read user default language from browser Signed-off-by: yqrashawn --- package.json | 19 ++++--------------- src/components/LanguageSelect/index.tsx | 5 ++--- src/hooks/useUserLanguage.ts | 19 +++++++++++++++++++ src/pages/blog/detail.tsx | 5 ++--- src/pages/blog/index.tsx | 5 ++--- 5 files changed, 29 insertions(+), 24 deletions(-) create mode 100644 src/hooks/useUserLanguage.ts diff --git a/package.json b/package.json index 292528c8..2992606c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "scroll.io", - "version": "5.2.0", + "version": "5.3.0", "private": false, "license": "MIT", "scripts": { @@ -14,22 +14,11 @@ "test": "npx lint-staged" }, "lint-staged": { - "**/*.{ts,tsx}": [ - "npm run lint", - "prettier --write" - ] + "**/*.{ts,tsx}": ["npm run lint", "prettier --write"] }, "browserslist": { - "production": [ - ">0.5%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "production": [">0.5%", "not dead", "not op_mini all"], + "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"] }, "resolutions": { "@sentry/webpack-plugin/**/node-fetch": "^2.6.11", diff --git a/src/components/LanguageSelect/index.tsx b/src/components/LanguageSelect/index.tsx index da0a0df5..b2460ed4 100644 --- a/src/components/LanguageSelect/index.tsx +++ b/src/components/LanguageSelect/index.tsx @@ -1,5 +1,4 @@ import { useMemo, useState } from "react" -import useStorage from "squirrel-gill" import { makeStyles } from "tss-react/mui" import { ButtonBase, Fade, ListItemIcon, ListItemText, Menu, MenuItem, SvgIcon, Typography } from "@mui/material" @@ -8,7 +7,7 @@ import { ReactComponent as GlobalSvg } from "@/assets/svgs/common/global.svg" import { ReactComponent as LanguageCheckedSvg } from "@/assets/svgs/common/language-checked.svg" import { ReactComponent as LanguageUncheckSvg } from "@/assets/svgs/common/language-uncheck.svg" import { BLOG_LANGUAGE_LIST } from "@/constants" -import { BLOG_LANGUAGE } from "@/constants/storageKey" +import useUserLanguage from "@/hooks/useUserLanguage" const useStyles = makeStyles()((theme, { dark }) => ({ button: { @@ -51,7 +50,7 @@ const LanguageSelect = props => { const [anchorEl, setAnchorEl] = useState(null) - const [language, setLanguage] = useStorage(localStorage, BLOG_LANGUAGE, "en") + const [language, setLanguage] = useUserLanguage() const currentLanguage = useMemo(() => { return BLOG_LANGUAGE_LIST.find(item => item.key === language)?.label diff --git a/src/hooks/useUserLanguage.ts b/src/hooks/useUserLanguage.ts new file mode 100644 index 00000000..8d83f476 --- /dev/null +++ b/src/hooks/useUserLanguage.ts @@ -0,0 +1,19 @@ +import useStorage from "squirrel-gill" + +import { BLOG_LANGUAGE } from "@/constants/storageKey" + +function getUserLanguage() { + // Get the user's primary language preference + const userLanguage = navigator.language || "en" + + // Check if the language is Turkish + if (userLanguage.startsWith("tr")) { + return "tr" // Return 'tr' for Turkish + } else { + return "en" // Return 'en' for any other language + } +} + +export default function useUserLanguage() { + return useStorage(localStorage, BLOG_LANGUAGE, getUserLanguage()) +} diff --git a/src/pages/blog/detail.tsx b/src/pages/blog/detail.tsx index 3cd644a6..70a74aab 100644 --- a/src/pages/blog/detail.tsx +++ b/src/pages/blog/detail.tsx @@ -7,15 +7,14 @@ import rehypeKatex from "rehype-katex" import rehypeRaw from "rehype-raw" import remarkGfm from "remark-gfm" import remarkMath from "remark-math" -import useStorage from "squirrel-gill" import { Box, Typography } from "@mui/material" import { styled } from "@mui/system" import LoadingPage from "@/components/LoadingPage" import { LANGUAGE_MAP } from "@/constants" -import { BLOG_LANGUAGE } from "@/constants/storageKey" import useCheckViewport from "@/hooks/useCheckViewport" +import useUserLanguage from "@/hooks/useUserLanguage" import { filterBlogsByLanguage } from "@/utils" import Articles from "./articles" @@ -47,7 +46,7 @@ const BlogNavbar = styled(Box)(({ theme }) => ({ const BlogDetail = () => { const navigate = useNavigate() - const [language] = useStorage(localStorage, BLOG_LANGUAGE, "en") + const [language] = useUserLanguage() const [blogContent, setBlogContent] = useState(null) const [moreBlog, setMoreBlog] = useState([]) const [currentBlog, setCurrentBlog] = useState({ diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index fb85b52d..8a1ca96d 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -1,7 +1,6 @@ import { orderBy } from "lodash" import { useEffect, useMemo, useState } from "react" import { useLocation } from "react-router-dom" -import useStorage from "squirrel-gill" import { Tune as TuneIcon } from "@mui/icons-material" import { Box, Modal, Typography } from "@mui/material" @@ -10,8 +9,8 @@ import { styled } from "@mui/system" import ArticleCard from "@/components/ArticleCard" import SectionWrapper from "@/components/SectionWrapper" import { LANGUAGE_MAP, getBlogCategoryList, getBlogSortList } from "@/constants" -import { BLOG_LANGUAGE } from "@/constants/storageKey" import useCheckViewport from "@/hooks/useCheckViewport" +import useUserLanguage from "@/hooks/useUserLanguage" import { filterBlogsByLanguage } from "@/utils" import blogSource from "./data.json" @@ -165,7 +164,7 @@ const BlogList = styled("ul")(({ theme }) => ({ const Blog = () => { const location = useLocation() const { isDesktop } = useCheckViewport() - const [language] = useStorage(localStorage, BLOG_LANGUAGE, "en") + const [language] = useUserLanguage() const BLOG_CATEGORY_LIST = useMemo(() => getBlogCategoryList(language), [language]) const BLOG_SORT_LIST = useMemo(() => getBlogSortList(language), [language]) const BLOG_COPY = useMemo(() => LANGUAGE_MAP[language], [language])