From a845733bc47c0dce8d645aa0bcf85ba0c27af543 Mon Sep 17 00:00:00 2001
From: yixiuer <yixiuer.me@gmail.com>
Date: Fri, 1 Nov 2024 11:30:19 +0800
Subject: [PATCH] perf: load self-hosted fonts async

---
 assets/scss/custom/_custom.scss   | 38 -------------------------------
 assets/scss/custom/fonts.scss     | 37 ++++++++++++++++++++++++++++++
 layouts/partials/custom/head.html | 13 +++++++++--
 3 files changed, 48 insertions(+), 40 deletions(-)
 create mode 100644 assets/scss/custom/fonts.scss

diff --git a/assets/scss/custom/_custom.scss b/assets/scss/custom/_custom.scss
index d4bcddf..0ae8a74 100644
--- a/assets/scss/custom/_custom.scss
+++ b/assets/scss/custom/_custom.scss
@@ -1,41 +1,3 @@
-// https://github.com/ichitenfont/I.Ming
-@font-face {
-    font-family: 'I.MingCP';
-    font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/I.MingCP-8.10.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-}
-
-// https://github.com/lxgw/LxgwWenkaiTC
-@font-face {
-    font-family: 'LXGW WenKai TC';
-    font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/LXGWWenKaiTC-Light-v1.501.woff2') format('woff2');
-    font-weight: 300;
-    font-style: normal;
-}
-
-// https://github.com/TypeNetwork/Amstelvar
-@font-face {
-    font-family: 'Amstelvar';
-    font-display: swap;
-    src: url('#{$baseRelURL}/fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations'),
-         url('#{$baseRelURL}/fonts/Amstelvar-Roman-VF.woff2') format('woff2');
-    font-weight: 100 900;
-    font-stretch: 50% 125%;
-    font-style: normal;
-}
-@font-face {
-    font-family: 'Amstelvar';
-    font-display: swap;
-    src: url('#{$baseRelURL}/fonts/Amstelvar-Italic-VF.woff2') format('woff2-variations'),
-         url('#{$baseRelURL}/fonts/Amstelvar-Italic-VF.woff2') format("woff2");
-    font-weight: 100 900;
-    font-stretch: 50% 125%;
-    font-style: italic;
-}
-
 .home {
     font-family: 'Noto Serif TC', serif;
     .avatar {
diff --git a/assets/scss/custom/fonts.scss b/assets/scss/custom/fonts.scss
new file mode 100644
index 0000000..745764f
--- /dev/null
+++ b/assets/scss/custom/fonts.scss
@@ -0,0 +1,37 @@
+// https://github.com/ichitenfont/I.Ming
+@font-face {
+  font-family: 'I.MingCP';
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/I.MingCP-8.10.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+// https://github.com/lxgw/LxgwWenkaiTC
+@font-face {
+  font-family: 'LXGW WenKai TC';
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/LXGWWenKaiTC-Light-v1.501.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+// https://github.com/TypeNetwork/Amstelvar
+@font-face {
+  font-family: 'Amstelvar';
+  font-display: swap;
+  src: url('/fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations'),
+       url('/fonts/Amstelvar-Roman-VF.woff2') format('woff2');
+  font-weight: 100 900;
+  font-stretch: 50% 125%;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Amstelvar';
+  font-display: swap;
+  src: url('/fonts/Amstelvar-Italic-VF.woff2') format('woff2-variations'),
+       url('/fonts/Amstelvar-Italic-VF.woff2') format("woff2");
+  font-weight: 100 900;
+  font-stretch: 50% 125%;
+  font-style: italic;
+}
\ No newline at end of file
diff --git a/layouts/partials/custom/head.html b/layouts/partials/custom/head.html
index 5e5e2fb..ac3ffcf 100644
--- a/layouts/partials/custom/head.html
+++ b/layouts/partials/custom/head.html
@@ -1,5 +1,14 @@
-<!-- This file fixes an unknown weird bug with 🄯 -->
+{{/*  Fix an unknown weird bug with 🄯  */}}
 {{ $link := "https://fonts.googleapis.com/css2?family=Noto+Serif+SC&text=🄯&display=swap" }}
 
 <link rel="stylesheet" href="{{ $link }}" media="print" onload="this.media='all'" />
-<noscript><link rel="stylesheet" href="{{ $link }}" /></noscript>
\ No newline at end of file
+<noscript><link rel="stylesheet" href="{{ $link }}" /></noscript>
+
+{{/*  Load self-hosted fonts async  */}}
+{{- $path := (strings.TrimPrefix "/" (printf `%s/css/fonts.min.css` .Site.LanguagePrefix)) -}}
+{{- $options := (dict "targetPath" $path "outputStyle" "compressed") -}}
+
+{{- $style := resources.Get "scss/custom/fonts.scss" | resources.ExecuteAsTemplate (printf "%s/styles/fonts-rendered.scss" .Lang) . | toCSS $options -}}
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+<link rel="stylesheet" href="{{ $style.RelPermalink }}" media="print" onload="this.media='all'" />
+<noscript><link rel="stylesheet" href="{{ $style.RelPermalink }}" /></noscript>
\ No newline at end of file