From ffe5544f9c0b1f4d92fcad138e096a948f9e33a0 Mon Sep 17 00:00:00 2001
From: Oleksii Holub <1935960+Tyrrrz@users.noreply.github.com>
Date: Thu, 7 Apr 2022 20:25:14 +0300
Subject: [PATCH] Dowload fonts in HTML export when using download media

---
 .../Writers/Html/MessageGroupTemplate.cshtml    | 14 +++++++-------
 .../Writers/Html/PreambleTemplate.cshtml        | 17 ++++++++++-------
 .../ViewModels/Dialogs/ExportSetupViewModel.cs  |  2 +-
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
index 84a99e9..ab29e15 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
@@ -8,14 +8,14 @@
 @inherits MiniRazor.TemplateBase<MessageGroupTemplateContext>
 
 @{
+    ValueTask<string> ResolveUrlAsync(string url) => Model.ExportContext.ResolveMediaUrlAsync(url);
+
     string FormatDate(DateTimeOffset date) => Model.ExportContext.FormatDate(date);
 
     string FormatMarkdown(string markdown) => Model.FormatMarkdown(markdown);
 
     string FormatEmbedMarkdown(string markdown) => Model.FormatMarkdown(markdown, false);
 
-    ValueTask<string> ResolveUrlAsync(string url) => Model.ExportContext.ResolveMediaUrlAsync(url);
-
     var userMember = Model.ExportContext.TryGetMember(Model.MessageGroup.Author.Id);
 
     var userColor = Model.ExportContext.TryGetUserColor(Model.MessageGroup.Author.Id);
@@ -140,19 +140,19 @@
                         @if (attachment.IsImage)
                         {
                             <a href="@await ResolveUrlAsync(attachment.Url)">
-                                <img class="chatlog__attachment-media" src="@await ResolveUrlAsync(attachment.Url)" alt="Image attachment" title="@($"Image: {attachment.FileName} ({attachment.FileSize})")" loading="lazy">
+                                <img class="chatlog__attachment-media" src="@await ResolveUrlAsync(attachment.Url)" alt="Image attachment" title="Image: @attachment.FileName (@attachment.FileSize)" loading="lazy">
                             </a>
                         }
                         else if (attachment.IsVideo)
                         {
                             <video class="chatlog__attachment-media" controls>
-                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="Video attachment" title="@($"Video: {attachment.FileName} ({attachment.FileSize})")">
+                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="Video attachment" title="Video: @attachment.FileName (@attachment.FileSize)">
                             </video>
                         }
                         else if (attachment.IsAudio)
                         {
                             <audio class="chatlog__attachment-media" controls>
-                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="Audio attachment" title="@($"Audio: {attachment.FileName} ({attachment.FileSize})")">
+                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="Audio attachment" title="Audio: @attachment.FileName (@attachment.FileSize)">
                             </audio>
                         }
                         else
@@ -418,11 +418,11 @@
                     <div class="chatlog__sticker" title="@sticker.Name">
                         @if (sticker.Format is StickerFormat.Png or StickerFormat.PngAnimated)
                         {
-                            <img class="chatlog__sticker--media" src="@(await ResolveUrlAsync(sticker.SourceUrl))" alt="Sticker">
+                            <img class="chatlog__sticker--media" src="@await ResolveUrlAsync(sticker.SourceUrl)" alt="Sticker">
                         }
                         else if (sticker.Format == StickerFormat.Lottie)
                         {
-                            <div class="chatlog__sticker--media" data-source="@(await ResolveUrlAsync(sticker.SourceUrl))"></div>
+                            <div class="chatlog__sticker--media" data-source="@await ResolveUrlAsync(sticker.SourceUrl)"></div>
                         }
                     </div>
                 }
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
index 04bc718..96fb419 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
@@ -11,10 +11,13 @@
             ? darkVariant
             : lightVariant;
 
-    string FormatDate(DateTimeOffset date) => Model.ExportContext.FormatDate(date);
+    string GetFontUrl(int weight) =>
+        $"https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-{weight}.woff";
 
     ValueTask<string> ResolveUrlAsync(string url) => Model.ExportContext.ResolveMediaUrlAsync(url, CancellationToken);
 
+    string FormatDate(DateTimeOffset date) => Model.ExportContext.FormatDate(date);
+
     string FormatMarkdown(string markdown) => Model.FormatMarkdown(markdown);
 }
 
@@ -30,38 +33,38 @@
     <style>
         @@font-face {
             font-family: Whitney;
-            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-300.woff);
+            src: url(@await ResolveUrlAsync(GetFontUrl(300)));
             font-weight: 300;
         }
 
         @@font-face {
             font-family: Whitney;
-            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-400.woff);
+            src: url(@await ResolveUrlAsync(GetFontUrl(400)));
             font-weight: 400;
         }
 
         @@font-face {
             font-family: Whitney;
-            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-500.woff);
+            src: url(@await ResolveUrlAsync(GetFontUrl(500)));
             font-weight: 500;
         }
 
         @@font-face {
             font-family: Whitney;
-            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-600.woff);
+            src: url(@await ResolveUrlAsync(GetFontUrl(600)));
             font-weight: 600;
         }
 
         @@font-face {
             font-family: Whitney;
-            src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-700.woff);
+            src: url(@await ResolveUrlAsync(GetFontUrl(700)));
             font-weight: 700;
         }
 
         body {
             background-color: @Themed("#36393e", "#ffffff");
             color: @Themed("#dcddde", "#23262a");
-            font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
             font-size: 17px;
             font-weight: @Themed("400", "500");
         }
diff --git a/DiscordChatExporter.Gui/ViewModels/Dialogs/ExportSetupViewModel.cs b/DiscordChatExporter.Gui/ViewModels/Dialogs/ExportSetupViewModel.cs
index 896374f..96e2d32 100644
--- a/DiscordChatExporter.Gui/ViewModels/Dialogs/ExportSetupViewModel.cs
+++ b/DiscordChatExporter.Gui/ViewModels/Dialogs/ExportSetupViewModel.cs
@@ -74,7 +74,7 @@ public class ExportSetupViewModel : DialogScreen
         MessageFilterValue = _settingsService.LastMessageFilterValue;
         ShouldDownloadMedia = _settingsService.LastShouldDownloadMedia;
 
-        // Show the "advanced options" by default if any
+        // Show the "advanced options" section by default if any
         // of the advanced options are set to non-default values.
         IsAdvancedSectionDisplayed =
             After != default ||