updates

cmd/server/main.go

@@ -1,7 +1,6 @@
 package main
 
 import (
-	"html/template"
 	"net/http"
 
 	"git.tijl.dev/tijl/tijl.dev/internal/assets"
@@ -28,15 +27,6 @@ func main() {
 
 	engine.AddFunc("icon", assets.Svg)
 
-	// Todo better language system
-	engine.AddFunc("translate", func(key string) template.HTML {
-		translations := i18n.GetTranslations()["en"] // for now we just fix it to english
-		if translation, ok := translations[key]; ok {
-			return template.HTML(translation)
-		}
-		return ""
-	})
-
 	app := fiber.New(fiber.Config{
 		Views:                 engine,
 		DisableStartupMessage: true,
@@ -45,27 +35,57 @@ func main() {
 	app.Use(fiberlogrus.New())
 
 	app.Get("/", func(c *fiber.Ctx) error {
-		return c.Render("index", getCommon(c))
+		data := getCommon(c)
+		data["Title"] = i18n.Translate(c, "home")
+		return c.Render("index", data, "layouts/base")
 	})
 	app.Get("/blog", func(c *fiber.Ctx) error {
-		return c.Render("blog", getCommon(c))
+		data := getCommon(c)
+		data["Title"] = i18n.Translate(c, "blog")
+		return c.Render("blog", data, "layouts/base")
 	})
 	app.Get("/projects", func(c *fiber.Ctx) error {
-		return c.Render("projects", getCommon(c))
+		data := getCommon(c)
+		data["Title"] = i18n.Translate(c, "projects")
+		return c.Render("projects", data, "layouts/base")
 	})
 	app.Get("/about", func(c *fiber.Ctx) error {
-		return c.Render("about", getCommon(c))
+		data := getCommon(c)
+		data["Title"] = i18n.Translate(c, "about")
+		return c.Render("about", data, "layouts/base")
+	})
+	app.Get("/settings", func(c *fiber.Ctx) error {
+		lang := c.Query("lang")
+		redirectURL := c.Query("redirect")
+		if lang != "" {
+			c.Cookie(&fiber.Cookie{
+				Name:   "language",
+				Value:  lang,
+				Secure: false,
+			})
+		}
+		if redirectURL != "" {
+			return c.Redirect(redirectURL)
+		}
+		return nil
 	})
 
 	app.Use("/static", filesystem.New(filesystem.Config{
 		Root: http.FS(static.Embed),
 	}))
 
+	app.Use(func(c *fiber.Ctx) error {
+		data := getCommon(c)
+		return c.Render("404", data, "layouts/base")
+	})
+
 	log.Fatal(app.Listen(":3000"))
 }
 
 func getCommon(c *fiber.Ctx) fiber.Map {
 	return fiber.Map{
 		"Path":     c.Path(),
+		"Language": i18n.GetLanguage(c),
+		"T":        i18n.GetTranslations(i18n.GetLanguage(c)),
 	}
 }

internal/assets/svg.go

@@ -14,7 +14,7 @@ var SVGData map[string]string
 func loadSVGs() {
 	SVGData = make(map[string]string)
 
-	dir := "static/assets"
+	dir := "static/assets/icons"
 
 	files, err := filepath.Glob(filepath.Join(dir, "*.svg"))
 	if err != nil {

internal/i18n/i18n.go

@@ -45,7 +45,7 @@ func Load() {
 }
 
 func Translate(c *fiber.Ctx, key string) string {
-	lang := c.Locals("lang").(string)
+	lang := c.Cookies("language")
 	if messages, ok := translations[lang]; ok {
 		if message, ok := messages[key]; ok {
 			return message
@@ -59,6 +59,20 @@ func Translate(c *fiber.Ctx, key string) string {
 	return key
 }
 
-func GetTranslations() map[string]map[string]string {
+func GetLanguage(c *fiber.Ctx) string {
-	return translations
+	lang := c.Cookies("language")
+
+	if _, ok := translations[lang]; ok {
+		return lang
+	} else {
+		return DefaultLang
+	}
+}
+
+func GetTranslations(lang string) map[string]string {
+	if messages, ok := translations[lang]; ok {
+		return messages
+	}
+
+	return translations[DefaultLang]
 }

locales/en.json

@@ -6,5 +6,5 @@
 	"english": "English",
 	"dutch": "Dutch",
 	"about": "About",
-	"projects": "projects"
+	"projects": "Projects"
 }

views/404.html

@@ -0,0 +1 @@
+<h2>404 not found</h2>

views/about.html

@@ -1,11 +1 @@
-{{ template "layouts/base" . }}
+<h2>TODO About</h2>
-
-{{define "title"}}{{translate "about"}}{{end}}
-
-{{define "header"}}
-{{template "partials/menu" .}}
-{{end}}
-
-{{ define "content" }}
-<div>TODO About</div>
-{{ end }}

views/blog.html

@@ -1,11 +1 @@
-{{ template "layouts/base" . }}
+<h2>TODO Blog</h2>
-
-{{define "title"}}{{translate "blog"}}{{end}}
-
-{{define "header"}}
-{{template "partials/menu" .}}
-{{end}}
-
-{{ define "content" }}
-<div>TODO Blog</div>
-{{ end }}

views/index.html

@@ -1,12 +1,87 @@
-{{ template "layouts/base" . }}
-
-{{define "title"}}{{translate "home"}}{{end}}
-
-{{define "header"}}
-{{template "partials/menu" .}}
-{{end}}
-
-{{ define "content" }}
 <h2>Welcome to My Go App</h2>
 <p>This is the homepage.</p>
-{{ end }}
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+<p>This is the homepage.</p>
+{{.T.about}}

views/layouts/base.html

@@ -1,25 +1,22 @@
 <!doctype html>
-<html lang="{{block " language" .}}en{{end}}">
+<html lang='{{.Language}}'>
 
 <head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="static/css/styles.css" />
-    <!-- <link rel="icon" href="/favicon.png" /> -->
+    <link rel="icon" href="/static/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#f28c18" />
-    <!-- <script defer data-api="/analytics/api/event" data-domain="tijl.dev" src="/analytics/js/script.js"></script> -->
+    <title>{{.Title}}</title>
-    <title>{{block "title" .}}{{end}}</title>
 </head>
 
-<body class="lg:w-4/5 xl:w-3/4 mx-auto">
+<body class="lg:max-w-[80%] xl:max-w-[75%] mx-auto">
     <header>
-        {{block "header" .}}{{end}}
+        {{template "partials/menu" .}}
     </header>
-    <main class="mx-8 mt-4">
+    <main class="mx-8 pt-24">
-        {{block "content" .}}{{end}}
+        {{embed}}
     </main>
-    <footer>
-    </footer>
 </body>
 
 </html>

views/partials/menu.html

@@ -1,4 +1,4 @@
-<nav class="flex">
+<nav class="flex fixed mx-auto w-full lg:w-[80%] xl:w-[75%]">
     <div class="mt-4 mx-4 rounded-2xl shadow-2xl bg-base-300 navbar">
         <div class="flex-1">
             <a href="/" class="btn btn-ghost font-mono text-xl">tijl.dev</a>
@@ -18,7 +18,7 @@
                             <span class="w-5 text-center">
                                 {{icon "home" }}
                             </span>
-                            <span class="text-base">{{translate "home"}}</span>
+                            <span class="text-base">{{.T.home}}</span>
                         </a>
                     </li>
                     <li>
@@ -26,7 +26,7 @@
                             <span class=" w-5 text-center">
                                 {{icon "blog"}}
                             </span>
-                            <span class="text-base">{{translate "blog"}}</span>
+                            <span class="text-base">{{.T.blog}}</span>
                         </a>
                     </li>
                     <li>
@@ -34,7 +34,7 @@
                             <span class="w-5 text-center">
                                 {{icon "projects"}}
                             </span>
-                            <span class="text-base">{{translate "projects"}}</span>
+                            <span class="text-base">{{.T.projects}}</span>
                         </a>
                     </li>
                     <li>
@@ -42,49 +42,50 @@
                             <span class="w-5 text-center">
                                 {{icon "about"}}
                             </span>
-                            <span class="text-base">{{translate "about"}}</span>
+                            <span class="text-base">{{.T.about}}</span>
                         </a>
                     </li>
-                    <!--<li class="flex-none">
+                    <li class="flex-none">
                         <details class="dropdown">
                             <summary><a class="flex gap-4">
                                     <span class="w-5 text-center">
                                         {{icon "language"}}
                                     </span>
-                                    <span class="text-base">{{translate "language"}}</span>
+                                    <span class="text-base">{{.T.language}}</span>
                                 </a>
                             </summary>
 
                             <ul class="menu dropdown-content z-[12] bg-base-200 rounded-box w-48 p-3 shadow-xl gap-1">
                                 <li>
-                                    <a class="flex gap-4 active" href="/settings?lang=en">
+                                    <a class='flex gap-4 {{if eq .Language "en"}}active{{end}}'
+                                        href="/settings?lang=en&redirect={{.Path}}">
                                         <span class="w-5 h-5 text-center">
                                             🇬🇧
                                         </span>
                                         <span class="text-base">
-                                            {{translate "english"}}
+                                            {{.T.english}}
                                         </span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a class="flex gap-4" href="/settings?lang=nl">
+                                    <a class='flex gap-4 {{if eq .Language "nl"}}active{{end}}'
+                                        href="/settings?lang=nl&redirect={{.Path}}">
                                         <span class="w-5 h-5 text-center">
                                             🇳🇱
                                         </span>
                                         <span class="text-base">
-                                            {{translate "dutch"}}
+                                            {{.T.dutch}}
                                         </span>
                                     </a>
                                 </li>
                             </ul>
                         </details>
                     </li>
--->
                     <li><a class="active flex gap-4" href="/login">
                             <span class="w-5 text-center">
                                 {{icon "login"}}
                             </span>
-                            <span class="text-base">{{translate "login"}}</span>
+                            <span class="text-base">{{.T.login}}</span>
                         </a>
                     </li>
                 </ul>

views/projects.html

@@ -1,11 +1 @@
-{{ template "layouts/base" . }}
+<h2>TODO Projects</h2>
-
-{{define "title"}}{{translate "projects"}}{{end}}
-
-{{define "header"}}
-{{template "partials/menu" .}}
-{{end}}
-
-{{ define "content" }}
-<div>TODO Projects</div>
-{{ end }}