embed frontend files

go.mod

@@ -9,6 +9,7 @@ require (
 	github.com/bogdanfinn/tls-client v1.7.8
 	github.com/btcsuite/btcutil v1.0.2
 	github.com/gin-contrib/cors v1.7.2
+	github.com/gin-contrib/multitemplate v1.0.1
 	github.com/gin-gonic/gin v1.10.0
 	github.com/redis/go-redis/v9 v9.7.0
 	github.com/robfig/cron/v3 v3.0.1
@@ -40,7 +41,6 @@ require (
 	github.com/cloudwego/iasm v0.2.0 // indirect
 	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
 	github.com/gabriel-vasile/mimetype v1.4.6 // indirect
-	github.com/gin-contrib/multitemplate v1.0.1 // indirect
 	github.com/gin-contrib/sse v0.1.0 // indirect
 	github.com/go-openapi/jsonpointer v0.21.0 // indirect
 	github.com/go-openapi/jsonreference v0.21.0 // indirect

server/route.go

@@ -1,6 +1,10 @@
 package server
 
 import (
+	"embed"
+	"errors"
+	"io/fs"
+	"net/http"
 	"path/filepath"
 	"pcgamedb/crawler"
 	"pcgamedb/db"
@@ -8,6 +12,7 @@ import (
 	"pcgamedb/server/handler"
 	"pcgamedb/server/middleware"
 	"strconv"
+	"strings"
 
 	"github.com/gin-contrib/cors"
 	"github.com/gin-contrib/multitemplate"
@@ -21,6 +26,9 @@ import (
 	ginSwagger "github.com/swaggo/gin-swagger"
 )
 
+//go:embed templates templates/layouts static
+var frontendFS embed.FS
+
 func initRoute(app *gin.Engine) {
 	app.Use(cors.New(cors.Config{
 		AllowAllOrigins: true,
@@ -31,30 +39,49 @@ func initRoute(app *gin.Engine) {
 }
 
 func initFrontend(app *gin.Engine) {
+	// Load static files
+	staticFs, err := fs.Sub(frontendFS, "static")
+	if err != nil {
+		log.Logger.Fatal("Error loading static files", zap.Error(err))
+		return
+	}
+	app.StaticFS("/static", http.FS(staticFs))
 
+	// Load templates
+	// directly using templates app.LoadHTMLFiles() to load all templates leads to error
+	// because use templates with same name in different html file will case overridden
+	// so we need to load all templates manually and use multitemplate to render them
 	r := multitemplate.NewRenderer()
 
-	app.Static("/static", "server/static")
+	layoutFiles, err := frontendFS.ReadDir("templates/layouts")
-
-	layoutFiles, err := filepath.Glob("server/templates/layouts/*.html")
 	if err != nil {
 		log.Logger.Fatal("Error loading layout templates", zap.Error(err))
 		return
 	}
 
-	rootFiles, err := filepath.Glob("server/templates/*.html")
+	rootFiles, err := frontendFS.ReadDir("templates")
 	if err != nil {
 		log.Logger.Fatal("Error loading root templates", zap.Error(err))
 		return
 	}
 
 	for _, rootFile := range rootFiles {
-		name := filepath.Base(rootFile)
+		if rootFile.IsDir() {
-		r.AddFromFiles(name, append([]string{rootFile}, layoutFiles...)...)
+			continue
+		}
+		name := filepath.Base(rootFile.Name())
+		templateFiles := []string{"templates/" + name}
+		for _, layout := range layoutFiles {
+			if !layout.IsDir() {
+				templateFiles = append(templateFiles, "templates/layouts/"+layout.Name())
+			}
+		}
+		r.AddFromFS(name, frontendFS, templateFiles...)
 	}
 
 	app.HTMLRender = r
 
+	// Load routes
 	app.GET("/", func(ctx *gin.Context) {
 		monthTop, err := crawler.GetSteam250MonthTop50Cache()
 		if err != nil {
@@ -102,8 +129,9 @@ func initFrontend(app *gin.Engine) {
 	app.GET("/search", func(ctx *gin.Context) {
 		key := ctx.Query("key")
 		page := ctx.Query("page")
+		key = strings.TrimSpace(key)
 		if len(key) < 2 {
-			ctx.HTML(400, "400.html", nil)
+			ctx.HTML(400, "400.html", errors.New("Search key should be at least 2 characters long"))
 			return
 		}
 		if page == "" {
@@ -111,12 +139,7 @@ func initFrontend(app *gin.Engine) {
 		}
 		pageInt, err := strconv.Atoi(page)
 		if err != nil {
-			ctx.HTML(400, "400.html", nil)
+			ctx.HTML(400, "400.html", err)
-			return
-		}
-
-		if key == "" {
-			ctx.HTML(400, "400.html", nil)
 			return
 		}
 		games, totalPage, err := db.SearchGameInfos(key, pageInt, 10)

server/templates/400.html

@@ -0,0 +1,7 @@
+{{template "base" .}}
+{{define "title"}}Bad Request{{end}}
+{{define "styles"}} {{end}}
+{{define "content"}}
+Bad Request
+{{.}}
+{{end}}

server/templates/game.html

@@ -1,6 +1,6 @@
 {{template "base" .}}
 
-{{define "title"}}{{.Name}} - 游戏详情{{end}}
+{{define "title"}}{{.Name}} - Details{{end}}
 
 {{define "styles"}}
 <style>
@@ -54,7 +54,7 @@
       <img src="{{.Cover}}" class="img-fluid rounded game-cover" alt="{{.Name}}" />
       {{else}}
       <div class="game-cover bg-secondary d-flex align-items-center justify-content-center rounded">
-        <span class="text-white">暂无封面</span>
+        <span class="text-white">No Image</span>
       </div>
       {{end}}
     </div>
@@ -63,7 +63,7 @@
 
       {{if .Aliases}}
       <div>
-        <span class="info-label">别名：</span>
+        <span class="info-label">Aliases:</span>
         {{range .Aliases}}
         <span class="tag">{{.}}</span>
         {{end}}
@@ -71,14 +71,14 @@
       {{end}}
 
       <div>
-        <span class="info-label">开发商：</span>
+        <span class="info-label">Developers:</span>
         {{range .Developers}}
         <span class="tag">{{.}}</span>
         {{end}}
       </div>
 
       <div>
-        <span class="info-label">发行商：</span>
+        <span class="info-label">Publishers:</span>
         {{range .Publishers}}
         <span class="tag">{{.}}</span>
         {{end}}
@@ -86,7 +86,7 @@
 
       {{if .Languages}}
       <div>
-        <span class="info-label">支持语言：</span>
+        <span class="info-label">Languages:</span>
         {{range .Languages}}
         <span class="tag">{{.}}</span>
         {{end}}
@@ -98,7 +98,7 @@
       {{end}} {{if .SteamID}}
       <div>
         <a href="https://store.steampowered.com/app/{{.SteamID}}" target="_blank" class="btn btn-primary">
-          在 Steam 上查看
+          Steam
         </a>
       </div>
       {{end}}
@@ -112,7 +112,7 @@
       <div class="swiper-wrapper">
         {{range .Screenshots}}
         <div class="swiper-slide">
-          <img src="{{.}}" alt="游戏截图" />
+          <img src="{{.}}" alt="screenshot" />
         </div>
         {{end}}
       </div>
@@ -126,7 +126,7 @@
   <!-- Download Links -->
   {{if .Games}}
   <div class="mb-4">
-    <h3 class="mb-3">下载链接</h3>
+    <h3 class="mb-3">Download</h3>
     <div class="row g-4">
       {{range .Games}}
       <div class="col-md-6">
@@ -135,34 +135,30 @@
             <h5 class="card-title">{{.RawName}}</h5>
             {{if .Size}}
             <div class="card-text">
-              <small class="text-muted">文件大小：{{.Size}}</small>
+              <small class="text-muted">Size: {{.Size}}</small>
             </div>
             {{end}}
             {{if .Author}}
             <div class="card-text">
-              <small class="text-muted">来源：{{.Author}}</small>
+              <small class="text-muted">Source: {{.Author}}</small>
             </div>
             {{end}}
             {{if .Password}}
             <div class="card-text">
-              解压密码：<code>{{.Password}}</code>
+              <small class="text-muted">Unzip password: <code>{{.Password}}</code></small>
             </div>
             {{end}}
             <div class="mt-2 d-flex justify-content-between align-items-center">
-              <!-- <a href="{{.Download}}" class="btn btn-success" target="_blank">下载</a> -->
               <div class="input-group" style="max-width: 300px;">
                 <input type="text" class="form-control form-control-sm" value="{{.Download}}" readonly>
                 <button class="btn btn-outline-secondary btn-sm" type="button"
                   onclick="copyToClipboard(this.previousElementSibling)">
-                  复制
+                  Copy
                 </button>
               </div>
-              <a href="{{.Url}}" class="btn btn-outline-primary" target="_blank">详情页</a>
+              <a href="{{.Url}}" class="btn btn-outline-primary" target="_blank">Source Page</a>
             </div>
           </div>
-          <div class="card-footer text-muted">
-            更新时间：{{.UpdatedAt.Format "2006-01-02 15:04:05"}}
-          </div>
         </div>
       </div>
       {{end}}
@@ -196,7 +192,7 @@
     navigator.clipboard.writeText(input.value).then(() => {
       const button = input.nextElementSibling;
       const originalText = button.textContent;
-      button.textContent = '已复制';
+      button.textContent = 'Copied';
       button.classList.remove('btn-outline-secondary');
       button.classList.add('btn-success');
 
@@ -206,7 +202,7 @@
         button.classList.add('btn-outline-secondary');
       }, 1500);
     }).catch(err => {
-      console.error('复制失败:', err);
+      console.error('Failed to copy:', err);
     });
   }
 </script>

server/templates/index.html

@@ -40,22 +40,6 @@
 {{end}}
 
 {{define "content"}}
-<!-- Search Section -->
-<div class="bg-light py-4">
-  <div class="container">
-    <form action="/search" method="GET">
-      <div class="row justify-content-center">
-        <div class="col-md-8">
-          <div class="input-group">
-            <input type="text" class="form-control" name="key" placeholder="搜索游戏..." />
-            <button class="btn btn-primary" type="submit">搜索</button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-
 <!-- Games Grid -->
 <div class="container py-4">
   <h2 class="mb-4">Month Top</h2>
@@ -67,7 +51,7 @@
         <img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
         {{else}}
         <div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
-          <span class="text-white">暂无图片</span>
+          <span class="text-white">No Image</span>
         </div>
         {{end}}
         <div class="card-body">
@@ -75,7 +59,7 @@
           <p class="card-text game-description">{{.Description}}</p>
           {{if .Publishers}}
           <div class="publishers mb-2">
-            <small class="text-muted">发行商:</small>
+            <small class="text-muted">Publishers:</small>
             {{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
             <small class="text-muted">{{$publisher}}</small>
             {{end}}
@@ -98,7 +82,7 @@
         <img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
         {{else}}
         <div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
-          <span class="text-white">暂无图片</span>
+          <span class="text-white">No Image</span>
         </div>
         {{end}}
         <div class="card-body">
@@ -106,7 +90,7 @@
           <p class="card-text game-description">{{.Description}}</p>
           {{if .Publishers}}
           <div class="publishers mb-2">
-            <small class="text-muted">发行商:</small>
+            <small class="text-muted">Publishers:</small>
             {{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
             <small class="text-muted">{{$publisher}}</small>
             {{end}}
@@ -120,7 +104,7 @@
 </div>
 
 <div class="container py-4">
-  <h2 class="mb-4">Best Of The Year</h2>
+  <h2 class="mb-4">Best of the Year</h2>
   <div class="row g-4">
     {{range .BestOfTheYear}}
     <div class="col-12 col-sm-6 col-md-4 col-lg-5-item">
@@ -129,7 +113,7 @@
         <img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
         {{else}}
         <div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
-          <span class="text-white">暂无图片</span>
+          <span class="text-white">No Image</span>
         </div>
         {{end}}
         <div class="card-body">
@@ -137,7 +121,7 @@
           <p class="card-text game-description">{{.Description}}</p>
           {{if .Publishers}}
           <div class="publishers mb-2">
-            <small class="text-muted">发行商:</small>
+            <small class="text-muted">Publishers:</small>
             {{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
             <small class="text-muted">{{$publisher}}</small>
             {{end}}

server/templates/layouts/base.html

@@ -1,25 +1,23 @@
 {{define "base"}}
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-bs-theme="dark">
-  <head>
+
-    <meta charset="UTF-8" />
+<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="UTF-8" />
-    <title>{{template "title" .}}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link
+  <title>{{template "title" .}}</title>
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+  <link rel="icon" type="image/x-icon" href="/static/favicon.png">
-      rel="stylesheet"
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
-    />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
-    <link
+  {{block "styles" .}}{{end}}
-      rel="stylesheet"
+</head>
-      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
+
-    />
+<body>
-    {{block "styles" .}}{{end}}
+  {{template "header" .}} {{block "content" .}}{{end}} {{template "footer" .}}
-  </head>
+
-  <body>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    {{template "header" .}} {{block "content" .}}{{end}} {{template "footer" .}}
+  {{block "scripts" .}}{{end}}
+</body>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    {{block "scripts" .}}{{end}}
-  </body>
 </html>
-{{end}}
+{{end}}

server/templates/layouts/footer.html

@@ -1,10 +1,11 @@
 {{define "footer"}}
 <!-- Footer -->
-<footer class="bg-dark text-light py-4 mt-5">
+<footer class="text-light py-4 mt-5">
   <div class="container">
     <div class="col text-center">
-      <a href="https://git.nite07.com/nite/pcgamedb" target="_blank">开源仓库</a> | <a href="/api/swagger/index.html">API
+      <div><a href="https://git.nite07.com/nite/pcgamedb" target="_blank">Open Source</a> | <a
-        文档</a>
+          href="/api/swagger/index.html">API Doc</a></div>
+      <div>Made by <a href="https://www.nite07.com" target="_blank">Nite</a></div>
     </div>
   </div>
 </footer>

server/templates/layouts/header.html

@@ -1,14 +1,21 @@
 {{define "header"}}
 <!-- Header -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg">
   <div class="container">
-    <a class="navbar-brand" href="/">游戏库</a>
+    <a class="navbar-brand" href="/">GameDB</a>
     <div class="navbar-collapse" id="navbarNav">
       <ul class="navbar-nav">
-        <li class="nav-item">
+        <!-- <li class="nav-item"><a class="nav-link" href="https://www.nite07.com" target="_blank">Blog</a></li> -->
-          <a class="nav-link" href="https://www.nite07.com" target="_blank">博客</a>
-        </li>
       </ul>
+
+      <div class="ms-auto">
+        <form action="/search" method="GET" class="d-flex">
+          <div class="input-group">
+            <input type="text" class="form-control" name="key" placeholder="Input full english name of game" />
+            <button class="btn btn-primary" type="submit">Search</button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </nav>

server/templates/search.html

@@ -47,6 +47,7 @@
 </div>
 <!-- Games Grid -->
 <div class="container py-4">
+    {{if .Games}}
     <div class="row g-4">
         {{range .Games}}
         <div class="col-12 col-sm-6 col-md-4 col-lg-5-item">
@@ -55,7 +56,7 @@
                 <img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
                 {{else}}
                 <div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
-                    <span class="text-white">暂无图片</span>
+                    <span class="text-white">No Image</span>
                 </div>
                 {{end}}
                 <div class="card-body">
@@ -63,7 +64,7 @@
                     <p class="card-text game-description">{{.Description}}</p>
                     {{if .Publishers}}
                     <div class="publishers mb-2">
-                        <small class="text-muted">发行商:</small>
+                        <small class="text-muted">Publishers:</small>
                         {{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
                         <small class="text-muted">{{$publisher}}</small>
                         {{end}}
@@ -74,6 +75,11 @@
         </div>
         {{end}}
     </div>
+    {{else}}
+    <div class="text-center py-5">
+        <h4 class="text-muted">No results found for "{{.Key}}"</h4>
+    </div>
+    {{end}}
 </div>
 <!-- Pagination -->
 <div class="container py-4">