CI/CD auto deploy website (#4)

Co-authored-by: stcb <21@stcb.cc>
Reviewed-on: icing/G-EIP-700-TLS-7-1-eip-stephane.corbiere#4
Co-authored-by: ange <ange@yw5n.com>
Co-committed-by: ange <ange@yw5n.com>

website/Dockerfile

@@ -1,14 +1,15 @@
-ARG VER=1.23
+FROM docker.io/golang:1.23 AS build
-
-FROM "docker.io/golang:$VER" as build
 WORKDIR /build/
-ARG VER
+COPY go.mod go.sum .
-COPY main.go .
+RUN go mod download
-RUN printf "module main\ngo $VER" > go.mod && CGO_ENABLED=0 go build -o /app
+COPY src/ .
+RUN CGO_ENABLED=0 go build -o /app
 
 FROM scratch
-COPY --from=build /app /app
+COPY --from=build /app .
-COPY static/ /static/
+COPY html/ html/
-COPY html/ /html/
+COPY css/ css/
+COPY static/ static/
+COPY tmpl/ tmpl/
 EXPOSE 3000
-CMD ["/app"]
+CMD ["./app"]

website/compose.yaml

@@ -4,3 +4,19 @@ services:
     build: .
     ports:
       - "3000:3000"
+    develop:
+      watch:
+        - action: rebuild
+          path: src/
+        - action: sync+restart
+          path: tmpl/
+          target: tmpl/
+        - action: sync+restart
+          path: html/
+          target: html/
+        - action: sync
+          path: css/
+          target: css/
+        - action: sync
+          path: static/
+          target: static/

website/css/about.css

@@ -0,0 +1,171 @@
+:root {
+  --primary-color: #000000;
+  --background-color: #f5f5f5;
+  --text-color: #333;
+  --secondary-text-color: #777;
+}
+
+.content {
+  margin: 20px auto;
+  max-width: 900px;
+  padding: 40px;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border-radius: 8px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 2.5em;
+  color: var(--primary-color);
+  margin-bottom: 30px;
+  text-align: center;
+  animation: fadeInDown 1s ease;
+}
+
+.section-title {
+  font-size: 1.8em;
+  color: var(--primary-color);
+  margin-top: 40px;
+  margin-bottom: 20px;
+  position: relative;
+  animation: fadeInLeft 1s ease;
+}
+
+.section-title::after {
+  content: '';
+  width: 50px;
+  height: 3px;
+  background-color: var(--primary-color);
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+}
+
+p, li {
+  line-height: 1.6;
+  font-size: 1.1em;
+  animation: fadeIn 1s ease;
+}
+
+ul {
+  margin-left: 20px;
+  list-style-type: disc;
+}
+
+.features ul li {
+  margin-bottom: 10px;
+}
+
+.team-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.team-list li {
+  margin-bottom: 8px;
+  font-weight: bold;
+  color: var(--text-color);
+}
+
+.back-link-container {
+  text-align: center;
+  margin-top: 40px;
+  animation: fadeInUp 1s ease;
+}
+
+.back-link {
+  text-decoration: none;
+  color: var(--primary-color);
+  font-weight: bold;
+  border: 2px solid var(--primary-color);
+  padding: 10px 20px;
+  border-radius: 5px;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.back-link:hover {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  } to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  } to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  } to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  } to {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .content {
+    padding: 20px;
+  }
+
+  .title {
+    font-size: 2em;
+  }
+
+  .section-title {
+    font-size: 1.5em;
+  }
+
+  p, li {
+    font-size: 1em;
+  }
+}
+
+@media (max-width: 480px) {
+  .content {
+    padding: 15px;
+  }
+
+  .title {
+    font-size: 1.8em;
+  }
+
+  .section-title {
+    font-size: 1.2em;
+  }
+
+  p, li {
+    font-size: 0.9em;
+  }
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+}

website/css/index.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0;
+}
+
+div {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3em;
+}

website/css/style.css

@@ -0,0 +1,4 @@
+a.nostyle {
+  color: inherit;
+  cursor: pointer;
+}

website/go.mod

@@ -0,0 +1,3 @@
+module main
+
+go 1.23.3

website/html/about.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    {{template "head.tmpl". }}
+  </head>
+  <body>
+    <div id="description" class="content">
+      <h1 class="title">What is Icing?</h1>
+
+      <div class="project-overview">
+        <p>
+        Icing is a simple, lightweight, and efficient dialer designed to
+        replace your everyday phone app. It ensures end-to-end encryption of
+        telephone communications by implementing a home-made, analogic-based
+        voice encryption. Inspired by SRTP (Secure Real-time Transport
+        Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
+        </p>
+      </div>
+
+      <div class="features">
+        <h2 class="section-title">Key Features</h2>
+        <ul>
+          <li>
+            <strong>End-to-End Encryption:</strong> Secure your calls with
+            robust encryption protocols.
+          </li>
+          <li>
+            <strong>Transparent:</strong> If your peer doesn't use Icing, the
+            call remains completely normal.
+          </li>
+          <li>
+            <strong>Analogic-based:</strong> An open-source, exportable,
+            protocol that <strong>works without internet.</strong>
+          </li>
+        </ul>
+      </div>
+
+      <div class="how-it-works">
+        <h2 class="section-title">How It Works</h2>
+        <p>
+        Icing generates a cryptographic key pair for you. Share your public key
+        with a neat QR code.
+        </p>
+        <p>
+        During a call between two Icing users, voices are encrypted,
+        compressed, and transmitted via the telephone network using the Icing
+        Acoustic Protocol.
+        </p>
+      </div>
+
+      <div class="team">
+        <h2 class="section-title">The Team</h2>
+        <ul class="team-list">
+          <li>{{template "stephane"}}</li>
+          <li>{{template "alexis"}}</li>
+          <li>{{template "ange"}}</li>
+          <li>{{template "bartosz"}}</li>
+          <li>{{template "florian"}}</li>
+        </ul>
+      </div>
+    </div>
+  </body>
+</html>

website/html/description.html

@@ -1,229 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Icing</title>
-    <!-- <link rel="stylesheet" href="style.css"/> -->
-  <style>
-    /* Theme colors */
-    :root {
-      --primary-color: #000000; /* Green accent color */
-      --background-color: #f5f5f5; /* Light background */
-      --text-color: #333; /* Dark text */
-      --secondary-text-color: #777; /* Secondary text color */
-    }
-
-    /* Base styles */
-    .content {
-      margin: 20px auto;
-      max-width: 900px;
-      padding: 40px;
-      background-color: var(--background-color);
-      color: var(--text-color);
-      border-radius: 8px;
-      font-family: 'Open Sans', Arial, sans-serif;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .title {
-      font-size: 2.5em;
-      color: var(--primary-color);
-      margin-bottom: 30px;
-      text-align: center;
-      animation: fadeInDown 1s ease;
-    }
-
-    .section-title {
-      font-size: 1.8em;
-      color: var(--primary-color);
-      margin-top: 40px;
-      margin-bottom: 20px;
-      position: relative;
-      animation: fadeInLeft 1s ease;
-    }
-
-    .section-title::after {
-      content: '';
-      width: 50px;
-      height: 3px;
-      background-color: var(--primary-color);
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-    }
-
-    p, li {
-      line-height: 1.6;
-      font-size: 1.1em;
-      animation: fadeIn 1s ease;
-    }
-
-    ul {
-      margin-left: 20px;
-      list-style-type: disc;
-    }
-
-    .features ul li {
-      margin-bottom: 10px;
-    }
-
-    .team-list {
-      list-style-type: none;
-      padding: 0;
-    }
-
-    .team-list li {
-      margin-bottom: 8px;
-      font-weight: bold;
-      color: var(--text-color);
-    }
-
-    .back-link-container {
-      text-align: center;
-      margin-top: 40px;
-      animation: fadeInUp 1s ease;
-    }
-
-    .back-link {
-      text-decoration: none;
-      color: var(--primary-color);
-      font-weight: bold;
-      border: 2px solid var(--primary-color);
-      padding: 10px 20px;
-      border-radius: 5px;
-      transition: background-color 0.3s, color 0.3s;
-    }
-
-    .back-link:hover {
-      background-color: var(--primary-color);
-      color: #fff;
-    }
-
-      @keyframes fadeInDown {
-        from {
-          opacity: 0;
-          transform: translateY(-20px);
-        } to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      @keyframes fadeInLeft {
-        from {
-          opacity: 0;
-          transform: translateX(-20px);
-        } to {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-
-      @keyframes fadeInUp {
-        from {
-          opacity: 0;
-          transform: translateY(20px);
-        } to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-        } to {
-          opacity: 1;
-        }
-      }
-
-      /* Responsive Design */
-      @media (max-width: 768px) {
-        .content {
-          padding: 20px;
-        }
-
-        .title {
-          font-size: 2em;
-        }
-
-        .section-title {
-          font-size: 1.5em;
-        }
-
-        p, li {
-          font-size: 1em;
-        }
-      }
-
-      @media (max-width: 480px) {
-        .content {
-          padding: 15px;
-        }
-
-        .title {
-          font-size: 1.8em;
-        }
-
-        .section-title {
-          font-size: 1.2em;
-        }
-
-        p, li {
-          font-size: 0.9em;
-        }
-      }
-
-      a {
-        color: var(--primary-color);
-        text-decoration: none;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="description" class="content">
-      <h1 class="title">Project Description</h1>
-
-      <div class="project-overview">
-        <h2 class="section-title">What is Icing?</h2>
-        <p>
-        Icing is a simple, lightweight, and efficient dialer designed to replace your everyday phone app. It ensures end-to-end encryption of telephone communications by implementing a home-made, analogic-based voice encryption. Inspired by SRTP (Secure Real-time Transport Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
-        </p>
-      </div>
-
-      <div class="features">
-        <h2 class="section-title">Key Features</h2>
-        <ul>
-          <li><strong>End-to-End Encryption:</strong> Secure your calls with robust encryption protocols.</li>
-          <li><strong>Transparent:</strong> If your peer doesn't use Icing, the call remains completely normal.</li>
-          <li><strong>Analogic-based:</strong> An open-source, exportable, protocol that <strong>works without internet.</strong></li>
-        </ul>
-      </div>
-
-      <div class="how-it-works">
-        <h2 class="section-title">How It Works</h2>
-        <p>
-        Icing generates a cryptographic key pair for you. Share your public key with a neat QR code.
-        </p>
-        <p>
-        During a call between two Icing users, voices are encrypted, compressed, and transmitted via the telephone network using the Icing Acoustic Protocol.
-        </p>
-      </div>
-
-      <div class="team">
-        <h2 class="section-title">Our Team</h2>
-        <p>
-        We are a team of five dedicated individuals working on this solution:
-        </p>
-        <ul class="team-list">
-          <li><a href="https://github.com/AlexisDanlos/" target="_blank">Alexis Danlos</a></li>
-          <li><a href="https://github.com/AustralEpitech/" target="_blank">AustralEpitech</a></li>
-          <li><a href="https://github.com/Bartoszkk/" target="_blank">Bartoszkk</a></li>
-          <li><a href="https://github.com/FlorianGRIFFON/" target="_blank">Florian GRIFFON</a></li>
-          <li><a href="https://github.com/STCB/" target="_blank">STCB</a></li>
-        </ul>
-      </div>
-    </div>
-  </body>
-</html>

website/html/index.html

@@ -1,31 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <style>
+    {{template "head.tmpl" .}}
-      .centered {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        font-size: 3em;
-        margin: 0;
-      }
-
-      .no-underline {
-        text-decoration: none;
-        color: inherit;
-      }
-
-      body {
-        margin: 0;
-      }
-    </style>
   </head>
   <body>
-  <div id="home">
+    <a class="nostyle" href="/about">
-    <h1 class="centered">
+      <div class="title">
-      <router-link to="/description" class="no-underline">ICING</router-link>
+        <h1>ICING</h1>
-    </h1>
+      </div>
-  </div>
+    </a>
   </body>
 </html>

website/main.go

@@ -1,32 +0,0 @@
-package main
-
-import (
-    "log"
-    "net/http"
-    "path/filepath"
-)
-
-func route(w http.ResponseWriter, r *http.Request) {
-    if r.URL.Path == "/style.css" {
-        http.ServeFile(w, r, "/html/style.css")
-        return
-    }
-    if len(r.URL.Path) > len("/static/") && r.URL.Path[:len("/static/")] == "/static/" {
-        http.ServeFile(w, r, r.URL.Path)
-        return
-    }
-    if r.URL.Path == "/" {
-        http.ServeFile(w, r, "/html/index.html")
-        return
-    }
-    http.ServeFile(w, r, filepath.Join("/html", r.URL.Path + ".html"))
-}
-
-func main() {
-    http.HandleFunc("/", route)
-
-    err := http.ListenAndServe(":3000", nil)
-    if err != nil {
-        log.Fatal(err)
-    }
-}

website/manifests/bin/deploy.sh

@@ -3,32 +3,35 @@ set -o pipefail
 
 function kapply() {
     for f in "$@"; do
-        kubectl apply -f \
+        kubectl apply -f <(envsubst < "manifests/$f")
-            <(envsubst "$(env | xargs printf '$%s ')" < "manifests/$f")
     done
-}
+}; export -f kapply
 
 function kcreatesec() {
-    kubectl create secret generic --save-config --dry-run=client -oyaml "$@" | kubectl apply -f-
+    kubectl create secret generic --dry-run=client -oyaml "$@" | kubectl replace -f-
-}
+}; export -f kcreatesec
 
 function kcreatecm() {
-    kubectl create configmap --dry-run=client -oyaml "$@" | kubectl apply -f-
+    kubectl create configmap --dry-run=client -oyaml "$@" | kubectl replace -f-
-}
+}; export -f kcreatecm
 
 function kgseckey() {
     local sec="$1"; shift
     local key="$1"; shift
 
-    kubectl get secret "$sec" -o jsonpath="{.data.$key}" | base64 -d
+    if ! kubectl get secret "$sec" -ojson | jq -re ".data.\"$key\" // empty" | base64 -d; then
-}
+        return 1
+    fi
+}; export -f kgseckey
 
 function kgcmkey() {
-    local cm="$1"; shift
+    local cm="$1";  shift
     local key="$1"; shift
 
-    kubectl get configmap "$cm" -o jsonpath="{.data.$key}"
+    if ! kubectl get configmap "$cm" -ojson | jq -re ".data.\"$key\" // empty"; then
-}
+        return 1
+    fi
+}; export -f kgcmkey
 
 
 kapply common/app.yaml

website/manifests/bin/devel.sh

@@ -1,4 +1,5 @@
 #!/bin/bash -e
+set -o pipefail
 
 export NB_REPLICAS=1
 

website/manifests/bin/prod.sh

@@ -1,4 +1,5 @@
 #!/bin/bash -e
+set -o pipefail
 
 export NB_REPLICAS=3
 

website/open.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+branch="$(git describe --contains --all HEAD)"
+
+xdg-open "https://$branch.g-eip-700-tls-7-1-eip-stephane.corbiere.icing.k8s.gmoker.com"

website/src/main.go

@@ -0,0 +1,14 @@
+package main
+
+import (
+    "log"
+    "net/http"
+)
+
+func main() {
+    http.HandleFunc("/", route)
+    generateTmpl()
+    if err := http.ListenAndServe(":3000", nil); err != nil {
+        log.Fatal(err)
+    }
+}

website/src/route.go

@@ -0,0 +1,51 @@
+package main
+
+import (
+    "context"
+    "fmt"
+    "net/http"
+    "regexp"
+    "slices"
+)
+
+type URLParam struct{}
+
+var routes = []struct {
+    methods []string
+    regex   *regexp.Regexp
+    handler http.HandlerFunc
+}{
+    {[]string{"GET"}, url(""), index},
+    {[]string{"GET"}, url("/static/.+"), static},
+    {[]string{"GET"}, url("/(.+\\.css)"), css},
+    {[]string{"GET"}, url("/([^/]+)"), html},
+}
+
+func url(s string) *regexp.Regexp {
+    return regexp.MustCompile("^" + s + "/?$")
+}
+
+func getParam(r *http.Request, i int) string {
+    return r.Context().Value(URLParam{}).([]string)[i]
+}
+
+func route(w http.ResponseWriter, r *http.Request) {
+    for _, rt := range routes {
+        matches := rt.regex.FindStringSubmatch(r.URL.Path)
+        if len(matches) > 0 {
+            if !slices.Contains(rt.methods, r.Method) {
+                w.Header().Set("Allow", r.Method)
+                http.Error(
+                    w, "405 method not allowed", http.StatusMethodNotAllowed,
+                )
+                return
+            }
+            fmt.Println(r.Method, r.URL.Path)
+            rt.handler(w, r.WithContext(
+                context.WithValue(r.Context(), URLParam{}, matches[1:]),
+            ))
+            return
+        }
+    }
+    http.NotFound(w, r)
+}

website/src/tmpl.go

@@ -0,0 +1,31 @@
+package main
+
+import (
+    "bytes"
+    "html/template"
+    "path/filepath"
+    "regexp"
+)
+
+var TMPL map[string][]byte
+
+func generateTmpl() {
+    files, _ := filepath.Glob("html/*.html")
+    re := regexp.MustCompile("html/(.+).html")
+    pages := make([]string, len(files))
+
+    for i, f := range files {
+        pages[i] = re.FindStringSubmatch(f)[1]
+    }
+    TMPL = make(map[string][]byte, len(files))
+    for i, f := range files {
+        b := new(bytes.Buffer)
+        t, _ := template.ParseFiles(f)
+        t.ParseGlob("tmpl/*.tmpl")
+        t.Execute(b, map[string]any{
+            "page": pages[i],
+            "pages": pages,
+        })
+        TMPL[pages[i]] = b.Bytes()
+    }
+}

website/src/views.go

@@ -0,0 +1,29 @@
+package main
+
+import (
+    "context"
+    "net/http"
+    "path/filepath"
+)
+
+func index(w http.ResponseWriter, r *http.Request) {
+    html(w, r.WithContext(
+        context.WithValue(r.Context(), URLParam{}, []string{"index"}),
+    ))
+}
+
+func static(w http.ResponseWriter, r *http.Request) {
+    http.ServeFile(w, r, r.URL.Path)
+}
+
+func css(w http.ResponseWriter, r *http.Request) {
+    http.ServeFile(w, r, filepath.Join("css", getParam(r, 0)))
+}
+
+func html(w http.ResponseWriter, r *http.Request) {
+    if t, found := TMPL[getParam(r, 0)]; found {
+        w.Write(t)
+    } else {
+        http.NotFound(w, r)
+    }
+}

website/tmpl/head.tmpl

@@ -0,0 +1,3 @@
+<title>Icing</title>
+<link rel="stylesheet" href="style.css"/>
+<link rel="stylesheet" href="{{.page}}.css"/>

website/tmpl/vars.tmpl

@@ -0,0 +1,19 @@
+{{define "alexis"}}
+<a href="https://github.com/AlexisDanlos" target="_blank">Alexis DANLOS</a>
+{{end}}
+
+{{define "ange"}}
+<a href="https://yw5n.com" target="_blank">Ange DUHAYON</a>
+{{end}}
+
+{{define "bartosz"}}
+<a href="https://github.com/Bartoszkk" target="_blank">Bartosz MICHALAK</a>
+{{end}}
+
+{{define "florian"}}
+<a href="https://github.com/FlorianGRIFFON" target="_blank">Florian GRIFFON</a>
+{{end}}
+
+{{define "stephane"}}
+<a href="https://github.com/STCB/" target="_blank">Stephane CORBIERE</a>
+{{end}}