Merge branch 'fix-font-problem' into 'main'

Fix font problem - Arabic/Javanese

Closes #1646

See merge request soapbox-pub/soapbox!3266
merge-requests/3281/head
Alex Gleason 2024-11-26 16:31:26 +00:00
commit ce185669f5
9 zmienionych plików z 49 dodań i 136 usunięć

Wyświetl plik

@ -41,10 +41,13 @@
"@akryum/flexsearch-es": "^0.7.32", "@akryum/flexsearch-es": "^0.7.32",
"@emoji-mart/data": "^1.2.1", "@emoji-mart/data": "^1.2.1",
"@floating-ui/react": "^0.26.0", "@floating-ui/react": "^0.26.0",
"@fontsource/amiri": "^5.1.0",
"@fontsource/cairo": "^5.1.0",
"@fontsource/inter": "^5.0.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/roboto-mono": "^5.0.0",
"@fontsource/vazirmatn": "^5.0.20", "@fontsource/tajawal": "^5.1.0",
"@fontsource/vazirmatn": "^5.1.0",
"@gamestdio/websocket": "^0.3.2", "@gamestdio/websocket": "^0.3.2",
"@lexical/clipboard": "^0.18.0", "@lexical/clipboard": "^0.18.0",
"@lexical/hashtag": "^0.18.0", "@lexical/hashtag": "^0.18.0",

Wyświetl plik

@ -45,11 +45,6 @@ const transformProperties = {
uppercase: 'uppercase', uppercase: 'uppercase',
}; };
const families = {
sans: 'font-sans',
mono: 'font-mono',
};
export type Sizes = keyof typeof sizes export type Sizes = keyof typeof sizes
type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div' | 'blockquote' type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div' | 'blockquote'
type Directions = 'ltr' | 'rtl' type Directions = 'ltr' | 'rtl'
@ -63,8 +58,6 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
className?: string; className?: string;
/** Text direction. */ /** Text direction. */
direction?: Directions; direction?: Directions;
/** Typeface of the text. */
family?: keyof typeof families;
/** The "for" attribute specifies which form element a label is bound to. */ /** The "for" attribute specifies which form element a label is bound to. */
htmlFor?: string; htmlFor?: string;
/** Font size of the text. */ /** Font size of the text. */
@ -92,7 +85,6 @@ const Text = forwardRef<any, IText>(
align, align,
className, className,
direction, direction,
family = 'sans',
size = 'md', size = 'md',
tag = 'p', tag = 'p',
theme = 'default', theme = 'default',
@ -122,7 +114,6 @@ const Text = forwardRef<any, IText>(
[themes[theme]]: true, [themes[theme]]: true,
[weights[weight]]: true, [weights[weight]]: true,
[trackingSizes[tracking]]: true, [trackingSizes[tracking]]: true,
[families[family]]: true,
[alignmentClass]: typeof align !== 'undefined', [alignmentClass]: typeof align !== 'undefined',
[transformProperties[transform]]: typeof transform !== 'undefined', [transformProperties[transform]]: typeof transform !== 'undefined',
}, className)} }, className)}

Wyświetl plik

@ -56,7 +56,7 @@ const DevelopersChallenge = () => {
{/* eslint-enable formatjs/no-literal-string-in-jsx */} {/* eslint-enable formatjs/no-literal-string-in-jsx */}
</Text> </Text>
<Text tag='pre' family='mono' theme='muted'> <Text tag='pre' className='font-mono' theme='muted'>
{challenge} {challenge}
</Text> </Text>

Wyświetl plik

@ -29,9 +29,13 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
'no-reduce-motion': !reduceMotion, 'no-reduce-motion': !reduceMotion,
'underline-links': underlineLinks, 'underline-links': underlineLinks,
'demetricator': demetricator, 'demetricator': demetricator,
'font-sans': true,
'!font-arabic': ['ar', 'fa'].includes(locale),
'!font-javanese': locale === 'jv',
}); });
useEffect(() => { useEffect(() => {
if (dsn) { if (dsn) {
startSentry(dsn).catch(console.error); startSentry(dsn).catch(console.error);
} }

Wyświetl plik

@ -12,13 +12,13 @@ import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css'; import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css'; import '@fontsource/inter/700.css';
import '@fontsource/inter/900.css'; import '@fontsource/inter/900.css';
import '@fontsource/vazirmatn/arabic.css';
import '@fontsource/noto-sans-javanese/javanese.css';
import '@fontsource/roboto-mono/400.css'; import '@fontsource/roboto-mono/400.css';
import 'line-awesome/dist/font-awesome-line-awesome/css/all.css'; import 'line-awesome/dist/font-awesome-line-awesome/css/all.css';
import 'soapbox/features/nostr/keyring.ts'; import 'soapbox/features/nostr/keyring.ts';
import './iframe.ts'; import './iframe.ts';
import './styles/i18n/arabic.css';
import './styles/i18n/javanese.css';
import './styles/tailwind.css'; import './styles/tailwind.css';
import ready from './ready.ts'; import ready from './ready.ts';

Wyświetl plik

@ -1,71 +0,0 @@
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 200;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-200-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-200-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-300-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-300-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-400-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-400-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-500-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-500-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-600-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-600-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-700-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-700-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 800;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-800-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-800-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 900;
src: url('@fontsource/vazirmatn/files/vazirmatn-arabic-900-normal.woff2') format('woff2'), url('@fontsource/vazirmatn/files/vazirmatn-arabic-900-normal.woff') format('woff');
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+067E, U+0686, U+0698, U+06AF, U+06CC;
}

Wyświetl plik

@ -1,39 +0,0 @@
/* noto-sans-javanese-javanese-400-normal */
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-400-normal.woff2) format('woff2'), url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-400-normal.woff) format('woff');
unicode-range: U+A980-A9DF;
}
/* noto-sans-javanese-javanese-500-normal */
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-500-normal.woff2) format('woff2'), url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-500-normal.woff) format('woff');
unicode-range: U+A980-A9DF;
}
/* noto-sans-javanese-javanese-600-normal */
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-600-normal.woff2) format('woff2'), url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-600-normal.woff) format('woff');
unicode-range: U+A980-A9DF;
}
/* noto-sans-javanese-javanese-700-normal */
@font-face {
font-family: 'Soapbox i18n';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-700-normal.woff2) format('woff2'), url(@fontsource/noto-sans-javanese/files/noto-sans-javanese-javanese-700-normal.woff) format('woff');
unicode-range: U+A980-A9DF;
}

Wyświetl plik

@ -27,8 +27,18 @@ const config: Config = {
base: '0.9375rem', base: '0.9375rem',
}, },
fontFamily: { fontFamily: {
arabic: [
'Vazirmatn',
'Cairo',
'Amiri',
'Tajawal',
'sans-serif',
],
javanese: [
'Noto Sans Javanese',
'serif',
],
sans: [ sans: [
'Soapbox i18n',
'Inter', 'Inter',
'ui-sans-serif', 'ui-sans-serif',
'system-ui', 'system-ui',
@ -95,11 +105,11 @@ const config: Config = {
width: '0px', width: '0px',
height: '0px', height: '0px',
}, },
'29%': { '29%': {
backgroundColor: 'rgb(229, 231, 235)', backgroundColor: 'rgb(229, 231, 235)',
}, },
'30%': { '30%': {
width: '3rem', width: '3rem',
height: '3rem', height: '3rem',
@ -107,7 +117,7 @@ const config: Config = {
opacity: '1', opacity: '1',
borderWidth: '6px', borderWidth: '6px',
}, },
'100%': { '100%': {
width: '3rem', width: '3rem',
height: '3rem', height: '3rem',

Wyświetl plik

@ -1307,25 +1307,40 @@
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.5.tgz#f0bada210a75fdf41101c48ddcc291e1b33b3f47" resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.5.tgz#f0bada210a75fdf41101c48ddcc291e1b33b3f47"
integrity sha512-3lClsx2F3ei6hup0LYFbbm+NH87qVTX/6T63IllEFCLjT7XCxmbgBM42sXf8LTZx0CE5VpRRUnISUbqSlsxGSA== integrity sha512-3lClsx2F3ei6hup0LYFbbm+NH87qVTX/6T63IllEFCLjT7XCxmbgBM42sXf8LTZx0CE5VpRRUnISUbqSlsxGSA==
"@fontsource/amiri@^5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@fontsource/amiri/-/amiri-5.1.0.tgz#86da9f17fbab9ecdb6b23e49d083cc9501abc0dd"
integrity sha512-epfiqkAaDIHyIW7Mz2HVEcSTjpJZLdnvd1AkpnpKnngYWxo+GDl5TrXsQjZp6/CnL/UYZsQZoiugajiL9HGQUA==
"@fontsource/cairo@^5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@fontsource/cairo/-/cairo-5.1.0.tgz#89dc3babe15ac02ba02c5a1f32f08ea5d3457ec4"
integrity sha512-gjiQa8YP4ORv20WhWHHymEBgeHEZ2GP6H0VZACWylG5VoqsHXawRn3V+9YVg3nOZWIknUexCqncIrlXbKDXnqQ==
"@fontsource/inter@^5.0.0": "@fontsource/inter@^5.0.0":
version "5.0.8" version "5.0.8"
resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.0.8.tgz#61b50cb0eb72b14ae1938d47c4a9a91546d2a50c" resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.0.8.tgz#61b50cb0eb72b14ae1938d47c4a9a91546d2a50c"
integrity sha512-28knWH1BfOiRalfLs90U4sge5mpQ8ZH6FS0PTT+IZMKrZ7wNHDHRuKa1kQJg+uHcc6axBppnxll+HXM4c7zo/Q== integrity sha512-28knWH1BfOiRalfLs90U4sge5mpQ8ZH6FS0PTT+IZMKrZ7wNHDHRuKa1kQJg+uHcc6axBppnxll+HXM4c7zo/Q==
"@fontsource/noto-sans-javanese@^5.0.16": "@fontsource/noto-sans-javanese@^5.1.0":
version "5.0.16" version "5.1.0"
resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-javanese/-/noto-sans-javanese-5.0.16.tgz#e6a2acad3b520e379a5f760196246951d6d7eb3e" resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-javanese/-/noto-sans-javanese-5.1.0.tgz#bfae45a2324d40e2bc1e5b14479a7d47ae59c7a7"
integrity sha512-foh5yX/kbY28QMx6jU8aezMLAnBTKscNAVeuDIt8myScEDqXDm+1v2pIxVCh0zZUyxt/Yj/qkDTOM/Vegq9hzA== integrity sha512-N3yvfUucmc5hC5ksxdd8DYHTGgx1rMqfgZm4qZ5T1TNMe+773exqGAKVYgdgzCyLCxdOVHQui9ATEeO8hr1Nqg==
"@fontsource/roboto-mono@^5.0.0": "@fontsource/roboto-mono@^5.0.0":
version "5.0.8" version "5.0.8"
resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-5.0.8.tgz#9b3df61f884f46e12d3eca46e75517fde58da68e" resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-5.0.8.tgz#9b3df61f884f46e12d3eca46e75517fde58da68e"
integrity sha512-vjnNX8zQCSp4HadUJ3gpZiizCsK/ROjgGMpd4bcRxuyiTNGGMaznmKbhqdyVeFVap1sX8h2Qu380awaotey/mQ== integrity sha512-vjnNX8zQCSp4HadUJ3gpZiizCsK/ROjgGMpd4bcRxuyiTNGGMaznmKbhqdyVeFVap1sX8h2Qu380awaotey/mQ==
"@fontsource/vazirmatn@^5.0.20": "@fontsource/tajawal@^5.1.0":
version "5.0.20" version "5.1.0"
resolved "https://registry.yarnpkg.com/@fontsource/vazirmatn/-/vazirmatn-5.0.20.tgz#9e8d56b712f6c397e7a6c63498a2fecca9fde9a3" resolved "https://registry.yarnpkg.com/@fontsource/tajawal/-/tajawal-5.1.0.tgz#9508e6da41fa6eae59e025c98c791603bd73ad0a"
integrity sha512-5h9bKrZjJ3U7C5tj2OtGdDBWGzS+acOOFhlonYlNekS4vNzcwMU7qkKADHTZYGQrMqhpUNKqGwHEHlxXqZpXmQ== integrity sha512-CYYxryDbFK4r4ev4xis+SyklUtnGy5O8nlJoDES/zEUdEz/qc7eYn1nVlQnUqWYLPzN5DgyTqHOx/5gWwHS7BA==
"@fontsource/vazirmatn@^5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@fontsource/vazirmatn/-/vazirmatn-5.1.0.tgz#bf758d2fcff91a15dd6db8e01d043e5d4707d8dc"
integrity sha512-qoHGF9VDKRX7m92QzznU+Et4cF02HOafuaBmu1igAqYOzJdHVNAsRsWUs86revIIpZcMO0ens4pz3Xzq8KZnNw==
"@formatjs/cli@^6.3.11": "@formatjs/cli@^6.3.11":
version "6.3.11" version "6.3.11"