Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Neue] Parallel font loading on web #5411

Merged
merged 5 commits into from
Sep 19, 2024
Merged

[Neue] Parallel font loading on web #5411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a6ea8fb
Parallel font loading
estrattonbailey Sep 19, 2024
7df3fca
Handle failures
estrattonbailey Sep 19, 2024
f02f62a
Rely on font-face and preload tags for font loading (#5431)
estrattonbailey Sep 19, 2024
a55d366
Merge remote-tracking branch 'origin/main' into neue/font-loading
estrattonbailey Sep 19, 2024
e0ef3d3
Cache fonts for a year
estrattonbailey Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions bskyweb/cmd/bskyweb/server.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down
Binary file added bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
View file
Open in desktop
Binary file not shown.
Binary file added bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf
View file
Open in desktop
Binary file not shown.
98 changes: 98 additions & 0 deletions bskyweb/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 2 additions & 3 deletions src/App.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
}

Expand Down
5 changes: 2 additions & 3 deletions src/App.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
}

Expand Down
19 changes: 10 additions & 9 deletions src/alf/fonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -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'),
Expand Down
99 changes: 99 additions & 0 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading