Preload fonts in use as per CSS definitions (#765)

cotti · web-flow · commit 99b12f8bf7a8 · 2025-03-18T11:06:36.000-03:00
* Preload fonts in use as per CSS definitions

* Adjust FontUriCache typing and stricten Regex

* Readjust link header ordering.

* Fix accessor to private.
diff --git a/src/Elastic.Markdown/Helpers/Preloader.cs b/src/Elastic.Markdown/Helpers/Preloader.cs
@@ -0,0 +1,39 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using System.Collections.Immutable;
+using System.Diagnostics;
+using System.Reflection;
+using System.Text.RegularExpressions;
+
+namespace Elastic.Markdown.Helpers;
+
+public static partial class FontPreloader
+{
+	private static IReadOnlyCollection<string>? FontUriCache = null!;
+
+	public static async Task<IReadOnlyCollection<string>> GetFontUrisAsync() => FontUriCache ??= await LoadFontUrisAsync();
+	private static async Task<IReadOnlyCollection<string>> LoadFontUrisAsync()
+	{
+		var cachedFontUris = new List<string>();
+		var assembly = Assembly.GetExecutingAssembly();
+		var stylesResourceName = assembly.GetManifestResourceNames().First(n => n.EndsWith("styles.css"));
+
+		using var cssFileStream = new StreamReader(assembly.GetManifestResourceStream(stylesResourceName)!);
+
+		var cssFile = await cssFileStream.ReadToEndAsync();
+		var matches = FontUriRegex().Matches(cssFile);
+
+		foreach (Match match in matches)
+		{
+			if (match.Success)
+				cachedFontUris.Add($"/_static/{match.Groups[1].Value}");
+		}
+		FontUriCache = cachedFontUris;
+		return FontUriCache;
+	}
+
+	[GeneratedRegex(@"url\([""']?([^""'\)]+?\.(woff2|ttf|otf))[""']?\)", RegexOptions.Multiline | RegexOptions.Compiled)]
+	private static partial Regex FontUriRegex();
+}
diff --git a/src/Elastic.Markdown/Slices/Layout/_Head.cshtml b/src/Elastic.Markdown/Slices/Layout/_Head.cshtml
@@ -1,7 +1,12 @@
 @inherits RazorSlice<LayoutViewModel>
+@using Elastic.Markdown.Helpers
 <head>
 	<title>@Model.Title</title>
-	<link rel="stylesheet" type="text/css" href="@Model.Static("styles.css")"/>
+	@foreach (var fontFile in await FontPreloader.GetFontUrisAsync())
+	{
+		<link rel="preload" href="@fontFile" as="font" type="font/woff2" crossorigin>
+	}
+	<link rel="stylesheet preload" as="style" type="text/css" href="@Model.Static("styles.css")" crossorigin/>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	@await RenderPartialAsync(_Favicon.Create())
