Skip to content

Commit c78c206

Browse files
gpblgpbl
authored
docs: add locale-specific fonts to demos (#2986)
1 parent 609f45c commit c78c206

3 files changed

Lines changed: 128 additions & 3 deletions

File tree

‎apps/website/docusaurus.config.ts‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,32 @@ const hebrewPath = nodeRequire.resolve("../../packages/hebrew/src/index.tsx");
4040
const hijriPath = nodeRequire.resolve("../../packages/hijri/src/index.tsx");
4141
const persianPath = nodeRequire.resolve("../../packages/persian/src/index.tsx");
4242

43+
const googleFontFamilies = [
44+
"Inter:wght@400;500;600;700",
45+
"Vazirmatn:wght@400;500;600;700",
46+
"Noto Sans:wght@400;500;600;700",
47+
"Noto Sans Armenian:wght@400;500;600;700",
48+
"Noto Sans Bengali:wght@400;500;600;700",
49+
"Noto Sans Devanagari:wght@400;500;600;700",
50+
"Noto Sans Ethiopic:wght@400;500;600;700",
51+
"Noto Sans Georgian:wght@400;500;600;700",
52+
"Noto Sans Gujarati:wght@400;500;600;700",
53+
"Noto Sans Hebrew:wght@400;500;600;700",
54+
"Noto Sans JP:wght@400;500;600;700",
55+
"Noto Sans KR:wght@400;500;600;700",
56+
"Noto Sans Kannada:wght@400;500;600;700",
57+
"Noto Sans Khmer:wght@400;500;600;700",
58+
"Noto Sans HK:wght@400;500;600;700",
59+
"Noto Sans SC:wght@400;500;600;700",
60+
"Noto Sans TC:wght@400;500;600;700",
61+
"Noto Sans Tamil:wght@400;500;600;700",
62+
"Noto Sans Telugu:wght@400;500;600;700",
63+
"Noto Sans Thai:wght@400;500;600;700",
64+
];
65+
const googleFontsStylesheet = `https://fonts.googleapis.com/css2?${googleFontFamilies
66+
.map((family) => `family=${family.replace(/ /g, "+")}`)
67+
.join("&")}&display=swap`;
68+
4369
function createApiReferenceRedirects(path: string): string[] {
4470
if (path.startsWith("/api/react/")) {
4571
return [path.replace("/api/react/", "/api/")];
@@ -114,6 +140,7 @@ const config: Config = {
114140
customCss: [
115141
"../../packages/react-day-picker/src/style.css",
116142
"./src/css/site.css",
143+
"./src/css/daypicker-locale-fonts.css",
117144
],
118145
},
119146
sitemap: {
@@ -133,9 +160,7 @@ const config: Config = {
133160
],
134161

135162
// Modern font
136-
stylesheets: [
137-
"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
138-
],
163+
stylesheets: [googleFontsStylesheet],
139164

140165
plugins: [
141166
function currentExamplesAliasPlugin() {

‎apps/website/src/components/ShadowDomWrapper.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import style from "!raw-loader!@daypicker/react/src/style.css";
2+
import localeFontStyle from "!raw-loader!../css/daypicker-locale-fonts.css";
23
import { useColorMode } from "@docusaurus/theme-common";
34
import root from "react-shadow";
45

@@ -16,6 +17,7 @@ export function ShadowDomWrapper({
1617
<root.div>
1718
{children}
1819
<style>{baseStyleCss ?? style.toString()}</style>
20+
<style>{localeFontStyle.toString()}</style>
1921
<style>{`
2022
.rdp-root {
2123
--rdp-accent-color: var(--ifm-color-primary);

‎apps/website/src/css/daypicker-locale-fonts.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.rdp-root {
2+
--rdp-locale-font-fallback: var(
3+
--ifm-font-family-base,
4+
ui-sans-serif,
5+
system-ui,
6+
sans-serif
7+
);
8+
}
9+
10+
.rdp-root:lang(ar),
11+
.rdp-root:lang(fa),
12+
.rdp-root:lang(ckb),
13+
.rdp-root:lang(ug) {
14+
font-family: "Vazirmatn", var(--rdp-locale-font-fallback);
15+
}
16+
17+
.rdp-root:lang(he) {
18+
font-family: "Noto Sans Hebrew", var(--rdp-locale-font-fallback);
19+
}
20+
21+
.rdp-root:lang(am) {
22+
font-family: "Noto Sans Ethiopic", var(--rdp-locale-font-fallback);
23+
}
24+
25+
.rdp-root:lang(th) {
26+
font-family: "Noto Sans Thai", var(--rdp-locale-font-fallback);
27+
}
28+
29+
.rdp-root:lang(hy) {
30+
font-family: "Noto Sans Armenian", var(--rdp-locale-font-fallback);
31+
}
32+
33+
.rdp-root:lang(ka) {
34+
font-family: "Noto Sans Georgian", var(--rdp-locale-font-fallback);
35+
}
36+
37+
.rdp-root:lang(bn) {
38+
font-family: "Noto Sans Bengali", var(--rdp-locale-font-fallback);
39+
}
40+
41+
.rdp-root:lang(hi) {
42+
font-family: "Noto Sans Devanagari", var(--rdp-locale-font-fallback);
43+
}
44+
45+
.rdp-root:lang(gu) {
46+
font-family: "Noto Sans Gujarati", var(--rdp-locale-font-fallback);
47+
}
48+
49+
.rdp-root:lang(kn) {
50+
font-family: "Noto Sans Kannada", var(--rdp-locale-font-fallback);
51+
}
52+
53+
.rdp-root:lang(km) {
54+
font-family: "Noto Sans Khmer", var(--rdp-locale-font-fallback);
55+
}
56+
57+
.rdp-root:lang(ta) {
58+
font-family: "Noto Sans Tamil", var(--rdp-locale-font-fallback);
59+
}
60+
61+
.rdp-root:lang(te) {
62+
font-family: "Noto Sans Telugu", var(--rdp-locale-font-fallback);
63+
}
64+
65+
.rdp-root:lang(ja) {
66+
font-family: "Noto Sans JP", var(--rdp-locale-font-fallback);
67+
}
68+
69+
.rdp-root:lang(ko) {
70+
font-family: "Noto Sans KR", var(--rdp-locale-font-fallback);
71+
}
72+
73+
.rdp-root:lang(zh-CN),
74+
.rdp-root:lang(zh-Hans) {
75+
font-family: "Noto Sans SC", var(--rdp-locale-font-fallback);
76+
}
77+
78+
.rdp-root:lang(zh-HK) {
79+
font-family: "Noto Sans HK", var(--rdp-locale-font-fallback);
80+
}
81+
82+
.rdp-root:lang(zh-TW),
83+
.rdp-root:lang(zh-Hant) {
84+
font-family: "Noto Sans TC", var(--rdp-locale-font-fallback);
85+
}
86+
87+
.rdp-root:lang(be),
88+
.rdp-root:lang(bg),
89+
.rdp-root:lang(el),
90+
.rdp-root:lang(kk),
91+
.rdp-root:lang(mk),
92+
.rdp-root:lang(mn),
93+
.rdp-root:lang(ru),
94+
.rdp-root:lang(sr),
95+
.rdp-root:lang(uk),
96+
.rdp-root:lang(uz-Cyrl) {
97+
font-family: "Noto Sans", var(--rdp-locale-font-fallback);
98+
}

0 commit comments

Comments
 (0)