acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Parallel font loading

Browse Source 
(cherry picked from commit 10e2b05b575bbbf8b0ca5b4a336817cd902d712b)
This commit is contained in:
Eric Bailey
2024-09-18 19:34:25 -05:00
parent cbc7cd0808
commit a6ea8fb57b
21 changed files with 290 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
BIN
View File
Binary file not shown.
bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf
BIN
View File
Binary file not shown.
bskyweb/templates/base.html
+127
View File
@@ -315,6 +315,133 @@
<meta property="og:site_name" content="Bluesky Social" />
<link type="application/activity+json" href="" />
<script>
try {
const InterRegular = new FontFace(
'Inter-Regular',
'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
{
style: 'normal',
weight: 400,
}
);
const InterItalic = new FontFace(
'Inter-Italic',
'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
{
style: 'italic',
weight: 400,
}
);
const InterMedium = new FontFace(
'Inter-Medium',
'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
{
style: 'normal',
weight: 500,
}
);
const InterMediumItalic = new FontFace(
'Inter-MediumItalic',
'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
{
style: 'italic',
weight: 500,
}
);
const InterSemiBold = new FontFace(
'Inter-SemiBold',
'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
{
style: 'normal',
weight: 600,
}
);
const InterSemiBoldItalic = new FontFace(
'Inter-SemiBoldItalic',
'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
{
style: 'italic',
weight: 600,
}
);
const InterBold = new FontFace(
'Inter-Bold',
'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
{
style: 'normal',
weight: 700,
}
);
const InterBoldItalic = new FontFace(
'Inter-BoldItalic',
'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
{
style: 'italic',
weight: 700,
}
);
const InterExtraBold = new FontFace(
'Inter-ExtraBold',
'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
{
style: 'normal',
weight: 800,
}
);
const InterExtraBoldItalic = new FontFace(
'Inter-ExtraBoldItalic',
'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
{
style: 'italic',
weight: 800,
}
);
const InterBlack = new FontFace(
'Inter-Black',
'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
{
style: 'normal',
weight: 900,
}
);
const InterBlackItalic = new FontFace(
'Inter-BlackItalic',
'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
{
style: 'italic',
weight: 900,
}
);
document.fonts.add(InterRegular);
document.fonts.add(InterItalic);
document.fonts.add(InterMedium);
document.fonts.add(InterMediumItalic);
document.fonts.add(InterSemiBold);
document.fonts.add(InterSemiBoldItalic);
document.fonts.add(InterBold);
document.fonts.add(InterBoldItalic);
document.fonts.add(InterExtraBold);
document.fonts.add(InterExtraBoldItalic);
document.fonts.add(InterBlack);
document.fonts.add(InterBlackItalic);
InterRegular.load();
InterItalic.load();
InterMedium.load();
InterMediumItalic.load();
InterSemiBold.load();
InterSemiBoldItalic.load();
InterBold.load();
InterBoldItalic.load();
InterExtraBold.load();
InterExtraBoldItalic.load();
InterBlack.load();
InterBlackItalic.load();
} catch () {}
</script>
{% block html_head_extra -%}{%- endblock %}
</head>
<body>
package.json
+1 -1
View File
@@ -15,7 +15,7 @@
"web": "expo start --web",
"use-build-number": "./scripts/useBuildNumberEnv.sh",
"use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
"build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/",
"build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/* ./bskyweb/static/media/",
"build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
"build-ios": "yarn use-build-number-with-bump eas build -p ios",
"build-android": "yarn use-build-number-with-bump eas build -p android",
src/App.native.tsx
+2 -1
View File
@@ -55,8 +55,9 @@ import {TestCtrls} from '#/view/com/testing/TestCtrls'
import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
import * as Toast from '#/view/com/util/Toast'
import {Shell} from '#/view/shell'
import {ThemeProvider as Alf, useFonts} from '#/alf'
import {ThemeProvider as Alf} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {useFonts} from '#/alf/util/useFonts'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
src/App.web.tsx
+2 -1
View File
@@ -46,8 +46,9 @@ import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/Video
import * as Toast from '#/view/com/util/Toast'
import {ToastContainer} from '#/view/com/util/Toast.web'
import {Shell} from '#/view/shell/index'
import {ThemeProvider as Alf, useFonts} from '#/alf'
import {ThemeProvider as Alf} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {useFonts} from '#/alf/util/useFonts'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
src/alf/fonts.ts
+10 -9
View File
@@ -1,6 +1,6 @@
import {useFonts as defaultUseFonts} from 'expo-font'
import {isNative, isWeb} from '#/platform/detection'
import {isWeb} from '#/platform/detection'
import {Device, device} from '#/storage'
const FAMILIES = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif`
@@ -35,15 +35,16 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
}
/*
* Unused fonts are commented out, but the files are there if we need them.
* IMPORTANT: This is unused. Expo statically extracts these fonts, but we load
* them manually so that we can parallelize the loading along with the JS
* bundle.
*
* See `#/alf/util/useFonts` for the actually used hooks.
*
* All used fonts MUST be configured here. Unused fonts are commented out, but
* the files are there if we need them.
*/
export function useFonts() {
/**
* For native, the `expo-font` config plugin embeds the fonts in the
* application binary. But `expo-font` isn't supported on web, so we fall
* back to async loading here.
*/
if (isNative) return [true, null]
export function DO_NOT_USE() {
return defaultUseFonts({
// 'Inter-Thin': require('../../assets/fonts/inter/Inter-Thin.otf'),
// 'Inter-ThinItalic': require('../../assets/fonts/inter/Inter-ThinItalic.otf'),
src/alf/util/useFonts.ts
+8
View File
@@ -0,0 +1,8 @@
export function useFonts() {
/**
* For native, the `expo-font` config plugin embeds the fonts in the
* application binary. But `expo-font` isn't supported on web, so we fall
* back to async loading here.
*/
return [true, null]
}
src/alf/util/useFonts.web.ts
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
export function useFonts() {
const [loaded, setLoaded] = React.useState(false)
React.useEffect(() => {
document.fonts.ready.then(() => {
setLoaded(true)
})
}, [setLoaded])
return [loaded, null]
}
web/index.html
+127
View File
@@ -308,6 +308,133 @@
margin-left: -6px;
}
</style>
<script>
try {
const InterRegular = new FontFace(
'Inter-Regular',
'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
{
style: 'normal',
weight: 400,
}
);
const InterItalic = new FontFace(
'Inter-Italic',
'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
{
style: 'italic',
weight: 400,
}
);
const InterMedium = new FontFace(
'Inter-Medium',
'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
{
style: 'normal',
weight: 500,
}
);
const InterMediumItalic = new FontFace(
'Inter-MediumItalic',
'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
{
style: 'italic',
weight: 500,
}
);
const InterSemiBold = new FontFace(
'Inter-SemiBold',
'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
{
style: 'normal',
weight: 600,
}
);
const InterSemiBoldItalic = new FontFace(
'Inter-SemiBoldItalic',
'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
{
style: 'italic',
weight: 600,
}
);
const InterBold = new FontFace(
'Inter-Bold',
'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
{
style: 'normal',
weight: 700,
}
);
const InterBoldItalic = new FontFace(
'Inter-BoldItalic',
'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
{
style: 'italic',
weight: 700,
}
);
const InterExtraBold = new FontFace(
'Inter-ExtraBold',
'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
{
style: 'normal',
weight: 800,
}
);
const InterExtraBoldItalic = new FontFace(
'Inter-ExtraBoldItalic',
'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
{
style: 'italic',
weight: 800,
}
);
const InterBlack = new FontFace(
'Inter-Black',
'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
{
style: 'normal',
weight: 900,
}
);
const InterBlackItalic = new FontFace(
'Inter-BlackItalic',
'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
{
style: 'italic',
weight: 900,
}
);
document.fonts.add(InterRegular);
document.fonts.add(InterItalic);
document.fonts.add(InterMedium);
document.fonts.add(InterMediumItalic);
document.fonts.add(InterSemiBold);
document.fonts.add(InterSemiBoldItalic);
document.fonts.add(InterBold);
document.fonts.add(InterBoldItalic);
document.fonts.add(InterExtraBold);
document.fonts.add(InterExtraBoldItalic);
document.fonts.add(InterBlack);
document.fonts.add(InterBlackItalic);
InterRegular.load();
InterItalic.load();
InterMedium.load();
InterMediumItalic.load();
InterSemiBold.load();
InterSemiBoldItalic.load();
InterBold.load();
InterBoldItalic.load();
InterExtraBold.load();
InterExtraBoldItalic.load();
InterBlack.load();
InterBlackItalic.load();
} catch () {}
</script>
</head>
<body>