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

[Neue] Parallel font loading on web (#5411)

Browse Source 
* Parallel font loading

(cherry picked from commit 10e2b05b575bbbf8b0ca5b4a336817cd902d712b)

* Handle failures

* Rely on font-face and preload tags for font loading (#5431)

* Cache fonts for a year
This commit is contained in:
Eric Bailey
2024-09-19 17:57:15 -05:00
committed by GitHub
parent c8184e823d
commit 22410a3cee
19 changed files with 216 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyweb/cmd/bskyweb/server.go
+5
View File
@@ -210,6 +210,11 @@ func serve(cctx *cli.Context) error {
maxAge = 7 * (60 * 60 * 24) // 1 week
}
// fonts can be cached for a year
if strings.HasSuffix(path, ".otf") {
maxAge = 365 * (60 * 60 * 24) // 1 year
}
c.Response().Header().Set("Cache-Control", fmt.Sprintf("public, max-age=%d", maxAge))
return next(c)
}
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
+98
View File
@@ -13,7 +13,105 @@
<!-- Hello Humans! API docs at https://atproto.com -->
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
<style>
@font-face {
font-family: "Inter-Regular";
src: local("Inter-Regular"), url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format("font/otf");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-Italic";
src: local("Inter-Italic"), url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format("font/otf");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-Medium";
src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-MediumItalic";
src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-SemiBold";
src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-SemiBoldItalic";
src: local("Inter-SemiBoldItalic"), url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf) format("font/otf");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-Bold";
src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-BoldItalic";
src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-ExtraBold";
src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-ExtraBoldItalic";
src: local("Inter-ExtraBoldItalic"), url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf) format("font/otf");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-Black";
src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-BlackItalic";
src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/**
* Extend the react-native-web reset:
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
src/App.native.tsx
+2 -3
View File
@@ -55,7 +55,7 @@ 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 {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
@@ -156,13 +156,12 @@ function InnerApp() {
function App() {
const [isReady, setReady] = useState(false)
const [loaded] = useFonts()
React.useEffect(() => {
initPersistedState().then(() => setReady(true))
}, [])
if (!isReady || !loaded) {
if (!isReady) {
return null
}
src/App.web.tsx
+2 -3
View File
@@ -46,7 +46,7 @@ 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 {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
@@ -146,13 +146,12 @@ function InnerApp() {
function App() {
const [isReady, setReady] = useState(false)
const [loaded, error] = useFonts()
React.useEffect(() => {
initPersistedState().then(() => setReady(true))
}, [])
if (!isReady || (!loaded && !error)) {
if (!isReady) {
return null
}
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'),
web/index.html
+99
View File
@@ -17,7 +17,106 @@
<link rel="preconnect" href="https://bsky.social">
<link rel="preconnect" href="https://bsky.network">
<title>%WEB_TITLE%</title>
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
<style>
@font-face {
font-family: "Inter-Regular";
src: local("Inter-Regular"), url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format("font/otf");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-Italic";
src: local("Inter-Italic"), url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format("font/otf");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-Medium";
src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-MediumItalic";
src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-SemiBold";
src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-SemiBoldItalic";
src: local("Inter-SemiBoldItalic"), url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf) format("font/otf");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-Bold";
src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-BoldItalic";
src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-ExtraBold";
src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-ExtraBoldItalic";
src: local("Inter-ExtraBoldItalic"), url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf) format("font/otf");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter-Black";
src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter-BlackItalic";
src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/**
* Extend the react-native-web reset:
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js