Merge pull request #980 from vrc-get/font-problem

stop bundleing font files and use `system-ui`, and set lang attribute based on selected language.
vrc-get · May 16, 2024 · 56e7169 · 56e7169
2 parents 4bedc93 + fac4c7c
commit 56e7169
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/CHANGELOG-gui.md b/CHANGELOG-gui.md
@@ -18,6 +18,8 @@ The format is based on [Keep a Changelog].
 
 ### Fixed
 - Impossible to install for machine (for Windows) `#976`
+- Japanese variant of CJK Ideograph is used for Simplified Chinese `#980`
+  - Since this version, ALCOM will always use `system-ui` font for all languages.
 
 ### Security
 

diff --git a/vrc-get-gui/app/layout.tsx b/vrc-get-gui/app/layout.tsx
@@ -1,14 +1,9 @@
 import type {Metadata} from "next";
-import {Noto_Sans_JP} from "next/font/google";
 import "./globals.css";
 import 'react-toastify/dist/ReactToastify.css';
 import {SideBar} from "@/components/SideBar";
 import {Providers} from "@/components/providers";
 
-const notoSansJP = Noto_Sans_JP({
-	subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
 	title: "Create Next App",
 	description: "Generated by create next app",
@@ -20,8 +15,8 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en">
-		<body className={`${notoSansJP.className} w-screen h-screen flex flex-row overflow-hidden whitespace-nowrap`}>
+		<html>
+		<body className={`font-sans w-screen h-screen flex flex-row overflow-hidden whitespace-nowrap`}>
 		<Providers>
 			<SideBar className={"flex-grow-0 overflow-auto"}/>
 			<div className={"h-screen flex-grow overflow-auto flex"}>

diff --git a/vrc-get-gui/app/log/page.tsx b/vrc-get-gui/app/log/page.tsx
@@ -4,7 +4,6 @@ import {Card, Typography} from "@material-tailwind/react";
 import {HNavBar, VStack} from "@/components/layout";
 import React, {useEffect} from "react";
 import {LogEntry, utilGetLogEntries} from "@/lib/bindings";
-import {notoSansMono} from "@/app/fonts";
 import {listen} from '@tauri-apps/api/event';
 import {tc} from "@/lib/i18n";
 
@@ -46,7 +45,7 @@ export default function Page() {
 				</Typography>
 			</HNavBar>
 			<main className="flex-shrink overflow-hidden flex flex-grow">
-				<Card className={`w-full overflow-x-auto overflow-y-scroll p-2 whitespace-pre ${notoSansMono.className} shadow-none`}>
+				<Card className={`w-full overflow-x-auto overflow-y-scroll p-2 whitespace-pre font-mono shadow-none`}>
 					{logEntries.map((entry) => logEntryToText(entry)).join("\n")}
 				</Card>
 			</main>

diff --git a/vrc-get-gui/components/providers.tsx b/vrc-get-gui/components/providers.tsx
@@ -2,7 +2,7 @@
 
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {ToastContainer} from 'react-toastify';
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {listen} from "@tauri-apps/api/event";
 import {environmentLanguage, LogEntry} from "@/lib/bindings";
 import i18next from "@/lib/i18n";
@@ -40,6 +40,14 @@ export function Providers({children}: { children: React.ReactNode }) {
 		environmentLanguage().then((lang) => i18next.changeLanguage(lang))
 	}, []);
 
+	const [language, setLanguage] = useState(i18next.language);
+
+	useEffect(() => {
+		const changeLanguage = (newLang: string) => setLanguage(newLang);
+		i18next.on("languageChanged", changeLanguage);
+		return () => i18next.off("languageChanged", changeLanguage);
+	}, []);
+
 	return (
 		<>
 			<ToastContainer
@@ -64,7 +72,9 @@ export function Providers({children}: { children: React.ReactNode }) {
 							}
 						}
 					}}>
-						{children as any}
+						{<div lang={language} className="contents">
+							{children}
+						</div> as any}
 					</ThemeProvider>
 				</I18nextProvider>
 			</QueryClientProvider>

diff --git a/vrc-get-gui/tailwind.config.ts b/vrc-get-gui/tailwind.config.ts
@@ -14,6 +14,10 @@ const config: Config = {
 				"gradient-conic":
 					"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
 			},
+			fontFamily: {
+				sans: ["system-ui"],
+				mono: ["monospace"],
+			}
 		},
 	},
 	plugins: [],