Merge pull request #11 from LeetaoGoooo/style-refactor

fix list style && refactor ui && support favicon and better slug

Author: LeetaoGoooo

core/api_test.go

@@ -3,7 +3,7 @@ package core
 import "testing"
 
 func TestApi(t *testing.T) {
-	api := NewApi("username", "repor", "token")
+	api := NewApi("username", "repo", "token")
 	t.Run("TestApiCategories", func(t *testing.T) {
 		categories, err := api.FetchCategories("", "")
 		if err != nil {

go.mod

@@ -12,6 +12,8 @@ require (
 	github.com/go-redis/redis/v8 v8.11.4 // indirect
 	github.com/goccy/go-json v0.9.7 // indirect
 	github.com/golang/protobuf v1.5.2 // indirect
+	github.com/gosimple/slug v1.13.1 // indirect
+	github.com/gosimple/unidecode v1.0.1 // indirect
 	github.com/jellydator/ttlcache/v2 v2.11.1 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/leodido/go-urn v1.2.1 // indirect

go.sum

@@ -53,6 +53,10 @@ github.com/google/go-cmp v0.5.8 h1:e6P7q2lk1O+qJJb4BtCQXlK8vWEO8V1ZeuEdJNOqZyg=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
 github.com/gorilla/feeds v1.1.1 h1:HwKXxqzcRNg9to+BbvJog4+f3s/xzvtZXICcQGutYfY=
 github.com/gorilla/feeds v1.1.1/go.mod h1:Nk0jZrvPFZX1OBe5NPiddPw7CfwF6Q9eqzaBbaightA=
+github.com/gosimple/slug v1.13.1 h1:bQ+kpX9Qa6tHRaK+fZR0A0M2Kd7Pa5eHPPsb1JpHD+Q=
+github.com/gosimple/slug v1.13.1/go.mod h1:UiRaFH+GEilHstLUmcBgWcI42viBN7mAb818JrYOeFQ=
+github.com/gosimple/unidecode v1.0.1 h1:hZzFTMMqSswvf0LBJZCZgThIZrpDHFXux9KeGmn6T/o=
+github.com/gosimple/unidecode v1.0.1/go.mod h1:CP0Cr1Y1kogOtx0bJblKzsVWrqYaqfNOnHzpgWw4Awc=
 github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU=
 github.com/jellydator/ttlcache/v2 v2.11.1 h1:AZGME43Eh2Vv3giG6GeqeLeFXxwxn1/qHItqWZl6U64=
 github.com/jellydator/ttlcache/v2 v2.11.1/go.mod h1:RtE5Snf0/57e+2cLWFYWCCsLas2Hy3c5Z4n14XmSvTI=

main.go

@@ -12,6 +12,7 @@ import (
 	"github.com/chenyahui/gin-cache/persist"
 	"github.com/gin-gonic/gin"
 	"github.com/gorilla/feeds"
+	"github.com/gosimple/slug"
 	"github.com/shurcooL/githubv4"
 	"gopkg.in/yaml.v2"
 )
@@ -96,6 +97,9 @@ var funcMap = template.FuncMap{
 		}
 		return false
 	},
+	"slug": func(title githubv4.String) string {
+		return slug.Make(string(title))
+	},
 }
 
 func FetchPosts(c *gin.Context) {
@@ -199,13 +203,13 @@ func GenerateFeed(c *gin.Context) {
 		return
 	}
 
-	for _, disdiscussion := range discussions.Nodes {
+	for _, discussion := range discussions.Nodes {
 		feed.Items = append(feed.Items, &feeds.Item{
-			Title:       string(disdiscussion.Title),
-			Description: string([]rune(disdiscussion.Body)[:200]),
+			Title:       string(discussion.Title),
+			Description: string([]rune(discussion.Body)[:200]),
 			Author:      &feeds.Author{Name: config.Website.Name, Email: config.Website.Email},
-			Created:     disdiscussion.CreatedAt.Time,
-			Link:        &feeds.Link{Href: fmt.Sprintf("%s/post/%d/%s", config.Website.Host, disdiscussion.Number, disdiscussion.Title)},
+			Created:     discussion.CreatedAt.Time,
+			Link:        &feeds.Link{Href: fmt.Sprintf("%s/post/%d/%s", config.Website.Host, discussion.Number, discussion.Title)},
 		})
 	}
 
@@ -218,6 +222,7 @@ func main() {
 	r.SetFuncMap(funcMap)
 	r.LoadHTMLGlob("templates/**/*")
 	r.Static("/css", "templates/css")
+	r.StaticFile("/favicon.ico", "templates/favicon.ico")
 	r.GET("/", cache.CacheByRequestURI(memoryCache, 30*time.Second), FetchPosts)
 	r.GET("/category/:category_id/:category_name", cache.CacheByRequestURI(memoryCache, 30*time.Second), FetchPosts)
 	r.GET("/post/:id/:title", cache.CacheByRequestURI(memoryCache, 1*time.Hour), FetchPost)

templates/base/navbar.html

@@ -3,7 +3,7 @@
       <div class="md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu">
          <nav>
             <ul
-               class="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
+               class="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 list-none">
                <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400 item-menu"
                      href="/">Home</a></li>
                {{ range $index, $Navbar := .Navbars }}

templates/pages/index.html

@@ -80,7 +80,7 @@ <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm
                                     <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
                                         <div
                                             class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition  dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl">
-                                        </div><a href="/post/{{.Number}}/{{.Title}}"><span
+                                        </div><a href="/post/{{.Number}}/{{.Title | slug }}"><span
                                                 class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl"></span><span
                                                 class="relative z-10">{{ .Title}}</span></a>
                                     </h2>
@@ -112,7 +112,7 @@ <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-1
                 {{ if .Posts.PageInfo.HasPreviousPage }}
                 <a class="px-2 py-1 text-3xl leading-6 text-slate-400 transition cursor-pointer "
                     href="/?pre={{.Posts.PageInfo.StartCursor}}">
-                    < </a>
+                    </a>
                 {{ end }}
                 {{ if .Posts.PageInfo.HasNextPage}}
                 <a class="px-2 py-1 text-3xl leading-6 text-slate-400 transition  cursor-pointer"

templates/pages/post.html

@@ -5,10 +5,19 @@
     <meta charSet="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>{{ .Post.Title }}</title>
-    <meta property="og:description" content="{{  .Post.BodyText | previewContent}}" />
-    <meta property="og:title" content="{{  .Post.Title }}" />
+    <meta property="description" content="{{  .Post.BodyText | previewContent}}" />
+    <meta property="title" content="{{  .Post.Title }}" />
 
     <script src="https://cdn.tailwindcss.com"></script>
+    <style type="text/tailwindcss">
+        @layer base {
+            ul {
+                list-style: disc;
+                margin: 0;
+                padding: 0;
+              }
+        }
+    </style>
 </head>
 
 <body class="flex flex-col bg-zinc-50 dark:bg-black">
@@ -25,15 +34,15 @@
                 </div>
             </div>
             <main>
-                <div class="sm:px-8 mt-16 lg:mt-32">
+                <div class="sm:px-8">
                     <div class="mx-auto max-w-7xl lg:px-8">
                         <div class="relative px-4 sm:px-8 lg:px-12">
                             <div class="mx-auto max-w-2xl lg:max-w-5xl">
                                 <div class="xl:relative">
                                     <div class="mx-auto max-w-2xl">
                                         <article class="dark:text-white">
                                             <header class="flex flex-col">
-                                                <h2
+                                                <h1
                                                     class="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
                                                     {{ .Post.Title }}</h1>
                                                 <div class="flex w-full items-center justify-between pb-3 mt-6">