From 129df7cfe3cec412fea2022577d61e583124fed1 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 18 Nov 2024 22:22:14 -0300
Subject: [PATCH] Fix ios-font-problem - Arabic/Javanese

---
 package.json              |  2 +-
 src/init/soapbox-head.tsx | 15 ++++++++++++++-
 src/main.tsx              |  2 --
 yarn.lock                 |  8 ++++----
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 3fd88e2c6..855f1bb5d 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/react": "^0.26.0",
     "@fontsource/inter": "^5.0.0",
-    "@fontsource/noto-sans-javanese": "^5.0.16",
+    "@fontsource/noto-sans-javanese": "^5.1.0",
     "@fontsource/roboto-mono": "^5.0.0",
     "@fontsource/vazirmatn": "^5.0.20",
     "@gamestdio/websocket": "^0.3.2",
diff --git a/src/init/soapbox-head.tsx b/src/init/soapbox-head.tsx
index a9ead879b..9c25d0f78 100644
--- a/src/init/soapbox-head.tsx
+++ b/src/init/soapbox-head.tsx
@@ -25,6 +25,14 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
   const dsn = soapboxConfig.sentryDsn;
 
+  const loadLocaleCss = async (locale: string) => {
+    if (locale === 'ar') {
+      await import('soapbox/styles/i18n/arabic.css');
+    } else if (locale === 'jv') {
+      await import('soapbox/styles/i18n/javanese.css');
+    }
+  };
+
   const bodyClass = clsx('h-full bg-white text-base black:bg-black dark:bg-gray-800', {
     'no-reduce-motion': !reduceMotion,
     'underline-links': underlineLinks,
@@ -32,10 +40,12 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   });
 
   useEffect(() => {
+    loadLocaleCss(locale);
+
     if (dsn) {
       startSentry(dsn).catch(console.error);
     }
-  }, [dsn]);
+  }, [dsn, locale]);
 
   return (
     <>
@@ -46,6 +56,9 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
         {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
         {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         {['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
+        {/* eslint-disable formatjs/no-literal-string-in-jsx */}
+        {(locale === 'ar' || locale === 'jv') ? <style type='text/css'>{':root { font-family: \'Soapbox i18n\'; }'}</style> : <style type='text/css'>{':root { font-family: \'Inter\'; }'}</style>}
+        {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
       </Helmet>
 
diff --git a/src/main.tsx b/src/main.tsx
index ba0510b10..7a9f1150b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -17,8 +17,6 @@ import 'line-awesome/dist/font-awesome-line-awesome/css/all.css';
 import 'soapbox/features/nostr/keyring.ts';
 
 import './iframe.ts';
-import './styles/i18n/arabic.css';
-import './styles/i18n/javanese.css';
 import './styles/tailwind.css';
 
 import ready from './ready.ts';
diff --git a/yarn.lock b/yarn.lock
index 4c66b8110..839dbae25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1312,10 +1312,10 @@
   resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.0.8.tgz#61b50cb0eb72b14ae1938d47c4a9a91546d2a50c"
   integrity sha512-28knWH1BfOiRalfLs90U4sge5mpQ8ZH6FS0PTT+IZMKrZ7wNHDHRuKa1kQJg+uHcc6axBppnxll+HXM4c7zo/Q==
 
-"@fontsource/noto-sans-javanese@^5.0.16":
-  version "5.0.16"
-  resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-javanese/-/noto-sans-javanese-5.0.16.tgz#e6a2acad3b520e379a5f760196246951d6d7eb3e"
-  integrity sha512-foh5yX/kbY28QMx6jU8aezMLAnBTKscNAVeuDIt8myScEDqXDm+1v2pIxVCh0zZUyxt/Yj/qkDTOM/Vegq9hzA==
+"@fontsource/noto-sans-javanese@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-javanese/-/noto-sans-javanese-5.1.0.tgz#bfae45a2324d40e2bc1e5b14479a7d47ae59c7a7"
+  integrity sha512-N3yvfUucmc5hC5ksxdd8DYHTGgx1rMqfgZm4qZ5T1TNMe+773exqGAKVYgdgzCyLCxdOVHQui9ATEeO8hr1Nqg==
 
 "@fontsource/roboto-mono@^5.0.0":
   version "5.0.8"