From 22410a3cee459761a9eb2d1a52de99557a424797 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 19 Sep 2024 17:57:15 -0500
Subject: [Neue] Parallel font loading on web (#5411)

* 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
---
 bskyweb/cmd/bskyweb/server.go                      |   5 ++
 .../media/Inter-Black.66e9a87f1c921e844ed4.otf     | Bin 0 -> 619772 bytes
 .../Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf     | Bin 0 -> 592516 bytes
 .../media/Inter-Bold.8d330503e1d034ad68de.otf      | Bin 0 -> 626056 bytes
 .../Inter-BoldItalic.bb17e63f9baa0d861a20.otf      | Bin 0 -> 604316 bytes
 .../media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf | Bin 0 -> 627736 bytes
 .../Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf | Bin 0 -> 603412 bytes
 .../media/Inter-Italic.95778eb0c75dc956257e.otf    | Bin 0 -> 586752 bytes
 .../media/Inter-Medium.296aa2d65964269836b3.otf    | Bin 0 -> 622088 bytes
 .../Inter-MediumItalic.0e57e17a6311368e2114.otf    | Bin 0 -> 599652 bytes
 .../media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf   | Bin 0 -> 605092 bytes
 .../media/Inter-SemiBold.2277990330981b8409bb.otf  | Bin 0 -> 624244 bytes
 .../Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf  | Bin 0 -> 602496 bytes
 .../media/MaterialIcons.f20305dee9d396fea5c7.ttf   | Bin 0 -> 356840 bytes
 bskyweb/templates/base.html                        |  98 +++++++++++++++++++++
 15 files changed, 103 insertions(+)
 create mode 100644 bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
 create mode 100644 bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
 create mode 100644 bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
 create mode 100644 bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
 create mode 100644 bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
 create mode 100644 bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
 create mode 100644 bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
 create mode 100644 bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
 create mode 100644 bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
 create mode 100644 bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
 create mode 100644 bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
 create mode 100644 bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
 create mode 100644 bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf

(limited to 'bskyweb')

diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go
index 2d75a2b72..fd80a5ed1 100644
--- a/bskyweb/cmd/bskyweb/server.go
+++ b/bskyweb/cmd/bskyweb/server.go
@@ -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)
 		}
diff --git a/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf b/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
new file mode 100644
index 000000000..44d1779af
Binary files /dev/null and b/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf differ
diff --git a/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf b/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
new file mode 100644
index 000000000..6fc475e41
Binary files /dev/null and b/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf differ
diff --git a/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf b/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
new file mode 100644
index 000000000..58a38073e
Binary files /dev/null and b/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf differ
diff --git a/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf b/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
new file mode 100644
index 000000000..e67935aa5
Binary files /dev/null and b/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf differ
diff --git a/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf b/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
new file mode 100644
index 000000000..66cd95228
Binary files /dev/null and b/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf differ
diff --git a/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf b/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
new file mode 100644
index 000000000..f269814a6
Binary files /dev/null and b/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf differ
diff --git a/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf b/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
new file mode 100644
index 000000000..f78848b98
Binary files /dev/null and b/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf differ
diff --git a/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf b/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
new file mode 100644
index 000000000..f44f89ada
Binary files /dev/null and b/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf differ
diff --git a/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf b/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
new file mode 100644
index 000000000..1970f5721
Binary files /dev/null and b/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf differ
diff --git a/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf b/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
new file mode 100644
index 000000000..2d0bd1d64
Binary files /dev/null and b/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf differ
diff --git a/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf b/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
new file mode 100644
index 000000000..52c84550b
Binary files /dev/null and b/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf differ
diff --git a/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf b/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
new file mode 100644
index 000000000..b725bfc88
Binary files /dev/null and b/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf differ
diff --git a/bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf b/bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf
new file mode 100644
index 000000000..9d09b0feb
Binary files /dev/null and b/bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf differ
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index f7acd4614..b0c3c2195 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -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
-- 
cgit 1.4.1