From 110cb846265a655fca4cd3c73a679dc491ef84ad Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Tue, 25 Oct 2022 01:25:12 -0400
Subject: [PATCH] Add preload tag for main.css (#577)

* Add preload tag for main.css

Improve performance. In addition, CloudFlare has supported early hints with this tag.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
See also https://blog.cloudflare.com/early-hints-on-cloudflare-pages/

* Associate with the preconnect option

Co-authored-by: Mimi <stevenjoezhang@gmail.com>
---
 _config.yml                    | 2 +-
 layout/_partials/head/head.njk | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/_config.yml b/_config.yml
index 8299ac4..f9ebb71 100644
--- a/_config.yml
+++ b/_config.yml
@@ -336,7 +336,7 @@ calendar:
 # See: https://theme-next.js.org/docs/theme-settings/miscellaneous
 # ---------------------------------------------------------------
 
-# Preconnect CDN for fonts and plugins.
+# Preload styles and preconnect CDN for fonts and plugins.
 # For more information: https://www.w3.org/TR/resource-hints/#preconnect
 preconnect: false
 
diff --git a/layout/_partials/head/head.njk b/layout/_partials/head/head.njk
index e85686b..fabf711 100644
--- a/layout/_partials/head/head.njk
+++ b/layout/_partials/head/head.njk
@@ -10,6 +10,9 @@
   {{- meta_generator() }}
 {%- endif %}
 
+{%- if config.preconnect %}
+  <link rel="preload" href="{{ url_for(theme.css) }}/main.css" as="style">
+{%- endif %}
 {{ next_pre() }}
 
 {%- if theme.favicon.apple_touch_icon %}