Added public keys page

baseTemplates/templates/keys/keys.tmpl

@@ -0,0 +1,57 @@
+{{ define "bodyClass" }}page-keys{{ end }}
+
+{{ define "content" }}
+    <main class="max-80">
+        <h1>Public keys</h1>
+
+        <h2>SSH</h2>
+        <p>
+            text/plain: <a href="/ssh/">https://prettysunflower.moe/ssh</a>
+        </p>
+
+        <div class="key">
+            <input id="ssh-key" value="{{ .Ssh }}" readonly>
+            <button class="copy-button" data-keyid="ssh-key"><img src="/static/svg/copy.svg" alt="copy icon"></button>
+        </div>
+
+        <h2>age</h2>
+        <p>
+            text/plain: <a href="/age/">https://prettysunflower.moe/age</a>
+        </p>
+
+        <div class="key">
+            <input id="age-key" value="{{ .Age }}" readonly>
+            <button class="copy-button" data-keyid="age-key"><img src="/static/svg/copy.svg" alt="copy icon"></button>
+        </div>
+
+        <h2>GPG</h2>
+        <p>
+            text/plain: <a href="/gpg/">https://prettysunflower.moe/gpg</a>
+        </p>
+
+        <div class="key">
+            <textarea id="gpg-key" readonly>{{ .Gpg }}</textarea>
+            <button class="copy-button" data-keyid="gpg-key"><img src="/static/svg/copy.svg" alt="copy icon"></button>
+        </div>
+    </main>
+
+    <script>
+        document.querySelectorAll("textarea").forEach(function(textarea) {
+            textarea.style.height = textarea.scrollHeight + "px";
+            textarea.style.overflowY = "hidden";
+
+            textarea.addEventListener("input", function() {
+                this.style.height = "auto";
+                this.style.height = this.scrollHeight + "px";
+            });
+        });
+
+        document.querySelectorAll("button.copy-button").forEach(function(button) {
+            button.addEventListener("click", function() {
+                const keyInput = document.getElementById(button.dataset.keyid);
+                keyInput.select();
+                document.execCommand("copy");
+            })
+        })
+    </script>
+{{ end }}

keys/init.go

@@ -3,15 +3,31 @@ package keys
 import (
 	"io"
 	"net/http"
+	"prettysunflower-website/baseTemplates"
 )
 
 func InitHttpHandlers() {
+	http.HandleFunc("/keys/", keysPage)
 	http.HandleFunc("/ssh/", sshKey)
 	http.HandleFunc("/age/", ageKey)
 	http.HandleFunc("/gpg/", gpgKey)
 	http.HandleFunc("/gpg/koumbit/", gpgKey)
 }
 
+type TemplateData struct {
+	Ssh string
+	Age string
+	Gpg string
+}
+
+func keysPage(w http.ResponseWriter, r *http.Request) {
+	baseTemplates.WithBase(w, TemplateData{
+		Ssh: SSH_KEY,
+		Age: AGE_KEY,
+		Gpg: GPG_KEY,
+	}, "templates/keys/keys.tmpl")
+}
+
 func sshKey(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "text/plain")
 	_, _ = io.WriteString(w, SSH_KEY)

static/static/css/layout.scss

@@ -93,3 +93,58 @@ nav {
 
     margin-bottom: 2rem;
 }
+
+.page-keys {
+    main {
+        margin-bottom: 2rem;
+    }
+
+    h2:has(+ p) {
+        margin-bottom: 0;
+    }
+
+    h2 + p {
+        margin-top: 0.25rem;
+    }
+
+    .key {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+
+        input, textarea {
+            background-color: oklch(from colors.$background-color calc(l - 0.1) c h);
+            border: none;
+            padding: 1rem;
+            width: 100%;
+            line-height: 2em;
+            line-break: anywhere;
+            resize: none;
+
+            &:focus-visible, &:focus {
+                outline: none;
+            }
+        }
+
+        button {
+            background-color: oklch(from colors.$background-color calc(l - 0.2) c h);
+            border: 0;
+            padding: 1rem;
+            width: auto;
+            cursor: pointer;
+
+            &:hover {
+                background-color: oklch(from colors.$background-color calc(l - 0.25) c h);
+            }
+
+            &:active {
+                background-color: oklch(from colors.$background-color calc(l - 0.3) c h);
+            }
+
+            img {
+                height: 1.5em;
+            }
+        }
+    }
+}

static/static/css/style.css

@@ -78,6 +78,50 @@ nav > div > div:last-child {
   max-width: 100%;
 }
 
+.page-keys main {
+  margin-bottom: 2rem;
+}
+.page-keys h2:has(+ p) {
+  margin-bottom: 0;
+}
+.page-keys h2 + p {
+  margin-top: 0.25rem;
+}
+.page-keys .key {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+.page-keys .key input, .page-keys .key textarea {
+  background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.1) c h);
+  border: none;
+  padding: 1rem;
+  width: 100%;
+  line-height: 2em;
+  line-break: anywhere;
+  resize: none;
+}
+.page-keys .key input:focus-visible, .page-keys .key input:focus, .page-keys .key textarea:focus-visible, .page-keys .key textarea:focus {
+  outline: none;
+}
+.page-keys .key button {
+  background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.2) c h);
+  border: 0;
+  padding: 1rem;
+  width: auto;
+  cursor: pointer;
+}
+.page-keys .key button:hover {
+  background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.25) c h);
+}
+.page-keys .key button:active {
+  background-color: oklch(from oklch(97% 0.0261 90.1deg) calc(l - 0.3) c h);
+}
+.page-keys .key button img {
+  height: 1.5em;
+}
+
 body {
   font-family: "Open Sans", apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: oklch(97% 0.0261 90.1deg);

static/static/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["fonts.scss","layout.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAAQ;ACER;EACI;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKZ;EAOI;;AALI;EACI;;;ACtFZ;EACI,aFFS;EEGT,kBCLe;EDMf;;;AEHA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EAOA;EACA;;AANA;EANJ;IAOQ;IACA;;;AAMJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AAEA;EAkBI;;AAjBA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EAdJ;IAeQ;;;AAOJ;EACI;;AAGJ;EACI;EACA;;AAKJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EAfJ;IAgBQ;IACA;;;AAMhB;EHxGA;;;AIjBA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;;AAKZ;EAzBJ;IA0BQ;;;AAGJ;EA7BJ;IA8BQ;;;AAGJ;EAjCJ;IAkCQ","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["fonts.scss","layout.scss","body.scss","colors.scss","index.scss","radio.scss"],"names":[],"mappings":"AAAQ;ACER;EACI;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKZ;EAOI;;AALI;EACI;;;AAQR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AC9IhB;EACI,aFFS;EEGT,kBCLe;EDMf;;;AEHA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EAOA;EACA;;AANA;EANJ;IAOQ;IACA;;;AAMJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AAEA;EAkBI;;AAjBA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EAdJ;IAeQ;;;AAOJ;EACI;;AAGJ;EACI;EACA;;AAKJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EAfJ;IAgBQ;IACA;;;AAMhB;EHxGA;;;AIjBA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;;AAKZ;EAzBJ;IA0BQ;;;AAGJ;EA7BJ;IA8BQ;;;AAGJ;EAjCJ;IAkCQ","file":"style.css"}

static/static/svg/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16 20v2h-1v1H3v-1H2V6h1V5h3v15z"/><path fill="currentColor" d="M16 7V1H8v1H7v16h1v1h13v-1h1V7zm4 10H9V3h5v6h6z"/><path fill="currentColor" d="M22 5v1h-5V1h1v1h1v1h1v1h1v1z"/></svg>