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

Rely on font-face and preload tags for font loading

Browse Source
This commit is contained in:
Eric Bailey
2024-09-19 16:22:23 -05:00
parent 7df3fca3ce
commit 12cf11da2f
6 changed files with 199 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyweb/templates/base.html
+98 -127
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
@@ -315,133 +413,6 @@
<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 (e) {}
</script>
{% block html_head_extra -%}{%- endblock %}
</head>
<body>
src/App.native.tsx
+1 -3
View File
@@ -57,7 +57,6 @@ import * as Toast from '#/view/com/util/Toast'
import {Shell} from '#/view/shell'
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'
@@ -154,13 +153,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
+1 -3
View File
@@ -48,7 +48,6 @@ import {ToastContainer} from '#/view/com/util/Toast.web'
import {Shell} from '#/view/shell/index'
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'
@@ -145,13 +144,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/alf/util/useFonts.ts
-8
View File
@@ -1,8 +0,0 @@
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
-21
View File
@@ -1,21 +0,0 @@
import React from 'react'
export function useFonts() {
const [loaded, setLoaded] = React.useState(false)
React.useEffect(() => {
try {
document.fonts.ready
.then(() => {
setLoaded(true)
})
.catch(() => {
setLoaded(true)
})
} catch (e) {
setLoaded(true)
}
}, [setLoaded])
return [loaded, null]
}
web/index.html
+99 -127
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
@@ -308,133 +407,6 @@
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 (e) {}
</script>
</head>
<body>