nite/pcgamedb
1
0
Fork 0
Code Issues Pull Requests Actions Releases 5 Activity

embed frontend files

Browse Source
This commit is contained in:
Nite07 2024-11-29 11:32:17 +08:00
parent 2c969680e0
commit c04a8d53c6
10 changed files with 110 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
go.mod
View File

@ -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

49
server/route.go
View File

@ -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 := filepath.Glob("server/templates/layouts/*.html")
layoutFiles, err := frontendFS.ReadDir("templates/layouts")
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)
r.AddFromFiles(name, append([]string{rootFile}, layoutFiles...)...)
if rootFile.IsDir() {
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)
return
}
if key == "" {
ctx.HTML(400, "400.html", nil)
ctx.HTML(400, "400.html", err)
return
}
games, totalPage, err := db.SearchGameInfos(key, pageInt, 10)

BIN
server/static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

7
server/templates/400.html Normal file
View File

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

36
server/templates/game.html
View File

@ -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>

30
server/templates/index.html
View File

@ -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}}

24
server/templates/layouts/base.html
View File

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

7
server/templates/layouts/footer.html
View File

@ -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
文档</a>
<div><a href="https://git.nite07.com/nite/pcgamedb" target="_blank">Open Source</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>

17
server/templates/layouts/header.html
View File

@ -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">
<a class="nav-link" href="https://www.nite07.com" target="_blank">博客</a>
</li>
<!-- <li class="nav-item"><a class="nav-link" href="https://www.nite07.com" target="_blank">Blog</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>

10
server/templates/search.html
View File

@ -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">