moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Fix font problem - Arabic/Javanese

Closes #1646

See merge request soapbox-pub/soapbox!3266
This commit is contained in:
Alex Gleason 2024-11-26 16:31:26 +00:00
parent 3965d81ad4 809153936f
commit ce185669f5
9 changed files with 49 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

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

9
src/components/ui/text.tsx
View File

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

2
src/features/developers/developers-challenge.tsx
View File

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

4
src/init/soapbox-head.tsx
View File

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

4
src/main.tsx
View File

@ -12,13 +12,13 @@ import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.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 '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';

71
src/styles/i18n/arabic.css
View File

@ -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;
}

39
src/styles/i18n/javanese.css
View File

@ -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;
}

18
tailwind.config.ts
View File

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

31
yarn.lock
View File

@ -1307,25 +1307,40 @@
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.5.tgz#f0bada210a75fdf41101c48ddcc291e1b33b3f47"
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":
version "5.0.8"
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"
resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-5.0.8.tgz#9b3df61f884f46e12d3eca46e75517fde58da68e"
integrity sha512-vjnNX8zQCSp4HadUJ3gpZiizCsK/ROjgGMpd4bcRxuyiTNGGMaznmKbhqdyVeFVap1sX8h2Qu380awaotey/mQ==
"@fontsource/vazirmatn@^5.0.20":
version "5.0.20"
resolved "https://registry.yarnpkg.com/@fontsource/vazirmatn/-/vazirmatn-5.0.20.tgz#9e8d56b712f6c397e7a6c63498a2fecca9fde9a3"
integrity sha512-5h9bKrZjJ3U7C5tj2OtGdDBWGzS+acOOFhlonYlNekS4vNzcwMU7qkKADHTZYGQrMqhpUNKqGwHEHlxXqZpXmQ==
"@fontsource/tajawal@^5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@fontsource/tajawal/-/tajawal-5.1.0.tgz#9508e6da41fa6eae59e025c98c791603bd73ad0a"
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":
version "6.3.11"