From b4983f1d4d3f23e3913ca56ea80b612dc52f8c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E9=97=BB=E9=A3=8E?= <wuwenfengmi@gmail.com>
Date: Mon, 22 Jun 2026 20:24:30 +0800
Subject: [PATCH] feat: add icons to homepage header and navigation links

- Add blog icon to homepage welcome title
  - Newspaper/blog icon (48px, blue)
  - Centered with flex layout

- Add lightning icon to homepage subtitle
  - Lightning bolt icon (24px, gray)
  - Represents speed and modern tech

- Add home icon to navigation home link
  - House icon with clean design
  - Consistent styling with other nav elements

- Add login icon to navigation login link
  - Login/sign-in icon
  - Only shown when user is not logged in

- Use Heroicons SVG for consistency
- Responsive and accessible design
- Smooth hover transitions

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 templates/layouts/base.html | 14 ++++++++++++--
 templates/pages/home.html   | 14 ++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 286ac8b..1d57b84 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -34,7 +34,12 @@
                 {{if .SiteLogoText}}{{.SiteLogoText}}{{else}}{{index .Tr "site_title"}}{{end}}
             </a>
             <div class="flex items-center gap-4">
-                <a href="/" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">{{index .Tr "home"}}</a>
+                <a href="/" class="text-gray-600 hover:text-blue-600 transition-colors text-sm flex items-center gap-1.5">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                    </svg>
+                    <span>{{index .Tr "home"}}</span>
+                </a>
                 {{if .IsLoggedIn}}
                     <!-- Avatar Dropdown (click to toggle) -->
                     <div class="relative" id="avatarDropdown">
@@ -72,7 +77,12 @@
                         </div>
                     </div>
                 {{else}}
-                    <a href="/login" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">{{index .Tr "login"}}</a>
+                    <a href="/login" class="text-gray-600 hover:text-blue-600 transition-colors text-sm flex items-center gap-1.5">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
+                        </svg>
+                        <span>{{index .Tr "login"}}</span>
+                    </a>
                 {{end}}
             </div>
         </div>
diff --git a/templates/pages/home.html b/templates/pages/home.html
index 784552e..61b0538 100644
--- a/templates/pages/home.html
+++ b/templates/pages/home.html
@@ -1,11 +1,17 @@
 {{define "home"}}
 {{template "header" .}}
 <section class="max-w-5xl mx-auto px-4 py-20 text-center">
-    <h1 class="text-5xl font-extrabold text-gray-900 mb-4">
-        {{if .SiteHomeWelcome}}{{.SiteHomeWelcome}}{{else}}{{index .Tr "home_welcome"}}{{end}}
+    <h1 class="text-5xl font-extrabold text-gray-900 mb-4 flex items-center justify-center gap-3">
+        <svg class="w-12 h-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
+        </svg>
+        <span>{{if .SiteHomeWelcome}}{{.SiteHomeWelcome}}{{else}}{{index .Tr "home_welcome"}}{{end}}</span>
     </h1>
-    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
-        {{if .SiteHomeSubtitle}}{{.SiteHomeSubtitle}}{{else}}{{index .Tr "home_subtitle"}}{{end}}
+    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto flex items-center justify-center gap-2">
+        <svg class="w-6 h-6 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+        <span>{{if .SiteHomeSubtitle}}{{.SiteHomeSubtitle}}{{else}}{{index .Tr "home_subtitle"}}{{end}}</span>
     </p>
 </section>