feat: html static templates

2024-12-14 08:34:47 +00:00 · 2024-12-14 08:34:47 +00:00 · e9fc659a5a
commit e9fc659a5a
parent 9d0da00371
12 changed files with 91 additions and 100 deletions
--- a/9
+++ b/9
@ -6,8 +6,9 @@ COPY src/ .
 RUN CGO_ENABLED=0 go build -o /app

 FROM scratch
-COPY --from=build /app /app
-COPY static/ /static/
-COPY html/ /html/
+COPY --from=build /app .
+COPY html/ html/
+COPY static/ static/
+COPY tmpl/ tmpl/
 EXPOSE 3000
-CMD ["/app"]
+CMD ["./app"]
--- a/compose.yaml
+++ b/compose.yaml
@ -10,7 +10,10 @@ services:
          path: src/
        - action: sync+restart
          path: html/
-          target: html
+          target: html/
+        - action: sync+restart
+          path: tmpl/
+          target: tmpl/
        - action: sync
          path: static/
-          target: static
+          target: static/
--- a/html/about.html
+++ b/html/about.html
@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Ange DUHAYON</title>
-    <link rel="stylesheet" href="style.css"/>
-  </head>
-  <body>
-    <div id="header">
-      <a id="headerLink" href="/">Ange DUHAYON</a>
-      <span id="headerSubtitle">DevOps Engineer</span>
-      <span class="right" style="font-size: .4em;">Website heavily inspired from <a href="//suckless.org/" target="_blank" rel="noreferrer noopener">suckless.org</a></span>
-    </div>
-    <div id="menu">
-      <a href="/">contact</a>
-      <a href="/resume">resume</a>
-      <a href="/about"><b>about me</b></a>
-      <span class="right">
-        <a href="//git.gmoker.com/yw5n/" target="_blank" rel="noreferrer noopener">source</a>
-      </span>
-    </div>
-    <div id="content">
-      <!--
-      <div id="nav">
-        <ul>
-        </ul>
-      </div>
-      -->
-      <div id="main">
-      </div>
-    </div>
-  </body>
-</html>
--- a/html/contact.html
+++ b/html/contact.html
@ -1,41 +1,11 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <meta charset="UTF-8">
-    <title>Ange DUHAYON</title>
-    <link rel="stylesheet" href="style.css"/>
-    <script>
-      function copyElem(id, r='') {
-        navigator.clipboard.writeText(
-          document.getElementById(id).innerText.replaceAll(r, ''),
-        );
-      }
-
-      function copyFile(id) {
-        fetch(document.getElementById(id).childNodes[0].href).then(f => {
-          f.text().then(t => {
-            navigator.clipboard.writeText(t);
-          })
-        })
-      }
-    </script>
+    {{template "head.tmpl" .}}
  </head>
  <body>
-    <div id="header">
-      <a id="headerLink" href="/">Ange DUHAYON</a>
-      <span id="headerSubtitle">DevOps Engineer</span>
-      <span class="right" style="font-size: .4em;">Website heavily inspired from <a href="//suckless.org/" target="_blank" rel="noreferrer noopener">suckless.org</a></span>
-    </div>
-    <div id="menu">
-      <a href="/"><b>contact</b></a>
-      <a href="/resume">resume</a>
-      <!--
-      <a href="/about">about me</a>
-      -->
-      <span class="right">
-        <a href="//git.gmoker.com/yw5n/" target="_blank" rel="noreferrer noopener">source</a>
-      </span>
-    </div>
+    <script src="static/copy.js"></script>
+    {{template "header.tmpl" .}}
    <div id="content">
      <!--
      <div id="nav">
--- a/html/resume.html
+++ b/html/resume.html
@ -1,26 +1,8 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Ange DUHAYON</title>
-    <link rel="stylesheet" href="style.css"/>
-  </head>
+  {{template "head.tmpl" .}}
  <body>
-    <div id="header">
-      <a id="headerLink" href="/">Ange DUHAYON</a>
-      <span id="headerSubtitle">DevOps Engineer</span>
-      <span class="right" style="font-size: .4em;">Website heavily inspired from <a href="//suckless.org/" target="_blank" rel="noreferrer noopener">suckless.org</a></span>
-    </div>
-    <div id="menu">
-      <a href="/">contact</a>
-      <a href="/resume"><b>resume</b></a>
-      <!--
-      <a href="/about">about me</a>
-      -->
-      <span class="right">
-        <a href="//git.gmoker.com/yw5n/" target="_blank" rel="noreferrer noopener">source</a>
-      </span>
-    </div>
+    {{template "header.tmpl". }}
    <div id="content">
      <div id="nav">
        <!--
--- a/src/main.go
+++ b/src/main.go
@ -7,9 +7,8 @@ import (

 func main() {
    http.HandleFunc("/", route)
-
-    err := http.ListenAndServe(":3000", nil)
-    if err != nil {
+    generateTmpl()
+    if err := http.ListenAndServe(":3000", nil); err != nil {
        log.Fatal(err)
    }
 }
--- a/src/route.go
+++ b/src/route.go
@ -34,8 +34,9 @@ func route(w http.ResponseWriter, r *http.Request) {
                http.Error(
                    w, "405 method not allowed", http.StatusMethodNotAllowed,
                )
-                fmt.Println(r.Method, r.URL.Path)
+                return
            }
+            fmt.Println(r.Method, r.URL.Path)
            rt.handler(w, r.WithContext(
                context.WithValue(r.Context(), URLParam{}, matches[1:])),
            )
--- a/src/tmpl.go
+++ b/src/tmpl.go
@ -0,0 +1,29 @@
+package main
+
+import (
+    "bytes"
+    "html/template"
+    "path/filepath"
+    "regexp"
+)
+
+var TMPL map[string][]byte
+
+// TODO not use a global
+// TODO use range instead of if else in header.html
+func generateTmpl() {
+    files, _ := filepath.Glob("html/*.html")
+    re := regexp.MustCompile("html(/.+).html")
+
+    TMPL = make(map[string][]byte, len(files))
+    for _, f := range files {
+        b := new(bytes.Buffer)
+        name := re.FindStringSubmatch(f)[1]
+        t, _ := template.ParseFiles(f)
+        t.ParseGlob("tmpl/*.tmpl")
+        t.Execute(b, map[string]any{
+            "name": name,
+        })
+        TMPL[name] = b.Bytes()
+    }
+}
--- a/src/views.go
+++ b/src/views.go
@ -2,15 +2,15 @@ package main

 import (
    "net/http"
-    "path/filepath"
 )

 func index(w http.ResponseWriter, r *http.Request) {
-    http.ServeFile(w, r, filepath.Join("html", "index.html"))
+    r.URL.Path = "/contact"
+    html(w, r)
 }

 func style(w http.ResponseWriter, r *http.Request) {
-    http.ServeFile(w, r, "/html/style.css")
+    http.ServeFile(w, r, "html/style.css")
 }

 func static(w http.ResponseWriter, r *http.Request) {
@ -18,5 +18,9 @@ func static(w http.ResponseWriter, r *http.Request) {
 }

 func html(w http.ResponseWriter, r *http.Request) {
-    http.ServeFile(w, r, filepath.Join("html", r.URL.Path + ".html"))
+    if t, found := TMPL[r.URL.Path]; found {
+        w.Write(t)
+    } else {
+        http.NotFound(w, r)
+    }
 }
--- a/static/copy.js
+++ b/static/copy.js
@ -0,0 +1,13 @@
+function copyElem(id, r='') {
+  navigator.clipboard.writeText(
+    document.getElementById(id).innerText.replaceAll(r, ''),
+  );
+}
+
+function copyFile(id) {
+  fetch(document.getElementById(id).childNodes[0].href).then(f => {
+    f.text().then(t => {
+      navigator.clipboard.writeText(t);
+    })
+  })
+}
--- a/tmpl/head.tmpl
+++ b/tmpl/head.tmpl
@ -0,0 +1,5 @@
+<head>
+  <meta charset="UTF-8">
+  <title>Ange DUHAYON</title>
+  <link rel="stylesheet" href="style.css"/>
+</head>
--- a/tmpl/header.tmpl
+++ b/tmpl/header.tmpl
@ -0,0 +1,17 @@
+<div id="header">
+  <a id="headerLink" href="/">Ange DUHAYON</a>
+  <span id="headerSubtitle">DevOps Engineer</span>
+  <span class="right" style="font-size: .4em;">Website heavily inspired from <a href="//suckless.org/" target="_blank" rel="noreferrer noopener">suckless.org</a></span>
+</div>
+<div id="menu">
+  {{if eq .name "/contact"}}
+  <a href="/"><b>contact</b></a>
+  <a href="/resume">resume</a>
+  {{else if eq .name "/resume"}}
+  <a href="/">contact</a>
+  <a href="/resume"><b>resume</b></a>
+  {{end}}
+  <span class="right">
+    <a href="//git.gmoker.com/yw5n" target="_blank" rel="noreferrer noopener">source</a>
+  </span>
+</div>