feat: read user default language from browser

Signed-off-by: yqrashawn <namy.19@gmail.com>

Author: yqrashawn

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",

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<any>()((theme, { dark }) => ({
   button: {
@@ -51,7 +50,7 @@ const LanguageSelect = props => {
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(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

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())
+}

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 | string>(null)
   const [moreBlog, setMoreBlog] = useState<any>([])
   const [currentBlog, setCurrentBlog] = useState<any>({

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])