feat: beatify the blog content.

Remove some unused font files and upgrade tailwindcss to v4.0.0.

.gitignore

@@ -484,4 +484,4 @@ $RECYCLE.BIN/
 *.swp
 
 # Tailwind auto-generated stylesheet
-output.css
+*.g.css

YaeBlog/Components/App.razor

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="YaeBlog.styles.css"/>
     <link rel="icon" href="images/favicon.ico"/>
     <link rel="stylesheet" href="globals.css"/>
-    <link rel="stylesheet" href="output.css"/>
+    <link rel="stylesheet" href="tailwind.g.css"/>
     <HeadOutlet/>
 </head>
 

YaeBlog/Extensions/AngleSharpExtensions.cs

@@ -0,0 +1,18 @@
+using AngleSharp.Dom;
+
+namespace YaeBlog.Extensions;
+
+public static class AngleSharpExtensions
+{
+    public static IEnumerable<IElement> EnumerateParentElements(this IElement element)
+    {
+        IElement? e = element.ParentElement;
+
+        while (e is not null)
+        {
+            IElement c = e;
+            e = e.ParentElement;
+            yield return c;
+        }
+    }
+}

YaeBlog/Processors/EssayStylesPostRenderProcessor.cs

@@ -1,6 +1,7 @@
 using AngleSharp;
 using AngleSharp.Dom;
 using YaeBlog.Abstraction;
+using YaeBlog.Extensions;
 using YaeBlog.Models;
 
 namespace YaeBlog.Processors;
@@ -20,20 +21,21 @@ public sealed class EssayStylesPostRenderProcessor : IPostRenderProcessor
 
         ApplyGlobalCssStyles(document);
         BeatifyTable(document);
+        BeatifyList(document);
+        BeatifyInlineCode(document);
 
         return essay.WithNewHtmlContent(document.DocumentElement.OuterHtml);
     }
 
     private readonly Dictionary<string, string> _globalCssStyles = new()
     {
-        { "pre", "p-4 bg-slate-300 rounded-sm overflow-x-auto" },
+        { "pre", "p-4 bg-gray-100 rounded-sm overflow-x-auto" },
         { "h2", "text-3xl font-bold py-4" },
         { "h3", "text-2xl font-bold py-3" },
         { "h4", "text-xl font-bold py-2" },
         { "h5", "text-lg font-bold py-1" },
         { "p", "p-2" },
         { "img", "w-11/12 block mx-auto my-2 rounded-md shadow-md" },
-        { "ul", "list-disc pl-2" }
     };
 
     private void ApplyGlobalCssStyles(IDocument document)
@@ -99,4 +101,45 @@ public sealed class EssayStylesPostRenderProcessor : IPostRenderProcessor
             }
         }
     }
+
+    private static void BeatifyList(IDocument document)
+    {
+        foreach (IElement ulElement in from e in document.All
+                 where e.LocalName == "ul"
+                 select e)
+        {
+            // 首先给<ul>元素添加样式
+            ulElement.ClassList.Add("list-disc ml-10");
+
+
+            foreach (IElement liElement in from e in ulElement.Children
+                     where e.LocalName == "li"
+                     select e)
+            {
+                // 修改<li>元素中的<p>元素样式
+                // 默认的p-2间距有点太宽了
+                foreach (IElement pElement in from e in liElement.Children
+                         where e.LocalName == "p"
+                         select e)
+                {
+                    pElement.ClassList.Remove("p-2");
+                    pElement.ClassList.Add("p-1");
+                }
+            }
+        }
+    }
+
+    private static void BeatifyInlineCode(IDocument document)
+    {
+        // 选择不在<pre>元素内的<code>元素
+        // 即行内代码
+        IEnumerable<IElement> inlineCodes = from e in document.All
+            where e.LocalName == "code" && e.EnumerateParentElements().All(p => p.LocalName != "pre")
+            select e;
+
+        foreach (IElement e in inlineCodes)
+        {
+            e.ClassList.Add("bg-gray-100 inline p-1 rounded-xs");
+        }
+    }
 }

YaeBlog/YaeBlog.csproj

@@ -13,7 +13,7 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
-  <Target Name="EnsurePnpmInstalled" BeforeTargets="Build">
+  <Target Name="EnsurePnpmInstalled" BeforeTargets="BeforeBuild">
     <Message Importance="low" Text="Ensure pnpm is installed..."/>
     <Exec Command="pnpm --version" ContinueOnError="true">
       <Output TaskParameter="ExitCode" PropertyName="ErrorCode"/>
@@ -25,9 +25,13 @@
     <Exec Command="pnpm install"/>
   </Target>
 
-  <Target Name="TailwindGenerate" AfterTargets="EnsurePnpmInstalled">
+  <Target Name="TailwindGenerate" AfterTargets="EnsurePnpmInstalled" BeforeTargets="BeforeBuild" Condition="'$(_IsPublishing)' == 'yes'">
     <Message Importance="normal" Text="Generate css files using tailwind..."/>
-    <Exec Command="pnpm tailwind -i wwwroot/input.css -o wwwroot/output.css"/>
+    <Exec Command="pnpm tailwindcss -i wwwroot/tailwind.css -o $(IntermediateOutputPath)tailwind.g.css"/>
+
+    <ItemGroup>
+      <Content Include="$(IntermediateOutputPath)tailwind.g.css" Visible="false" TargetPath="wwwroot/tailwind.g.css"/>
+    </ItemGroup>
   </Target>
 
 </Project>

YaeBlog/package.json

@@ -1,12 +1,15 @@
 {
-  "name": "YaeBlog",
-  "version": "1.0.0",
-  "description": "",
-  "scripts": {},
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "tailwindcss": "^3.4.16"
-  }
+    "name": "yae-blog",
+    "version": "1.0.0",
+    "description": "",
+    "scripts": {
+        "dev": "tailwindcss -i wwwroot/tailwind.css -o wwwroot/tailwind.g.css -w"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "tailwindcss": "^4.0.0",
+        "@tailwindcss/cli": "^4.0.0"
+    }
 }

YaeBlog/tailwind.config.js

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["**/*.razor", "**/*.cshtml", "**/*.html", "Processors/EssayStylesPostRenderProcessor.cs"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-

YaeBlog/wwwroot/input.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

YaeBlog/wwwroot/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";