From 69bfaa8db0d7cf925d3d64930216ddad248d0136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lera=20Elvo=C3=A9?= <yagich@poto.cafe>
Date: Sat, 24 May 2025 05:12:46 +0300
Subject: [PATCH] add code blocks + copy

---
 data/static/style.css | 39 ++++++++++++++++++++++++++++++++++++++-
 js/copy-code.js       |  7 +++++++
 lib/babycode.lua      |  4 +++-
 sass/style.scss       | 42 +++++++++++++++++++++++++++++++++++++++++-
 views/base.etlua      |  1 +
 5 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 js/copy-code.js

diff --git a/data/static/style.css b/data/static/style.css
index dd6994c..8818029 100644
--- a/data/static/style.css
+++ b/data/static/style.css
@@ -105,7 +105,43 @@ body {
 
 .post-content {
   grid-area: post-content;
-  padding: 5px 20px;
+  padding: 20px;
+  margin-right: 25%;
+}
+
+pre code {
+  display: block;
+  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left: 10px solid rgb(229.84, 231.92, 227.28);
+  padding: 20px;
+}
+
+.copy-code-container {
+  position: sticky;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: sans-serif;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: #c1ceb1;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+.copy-code-container::before {
+  content: "code block";
+  font-style: italic;
+  margin-left: 10px;
+}
+
+.copy-code {
+  margin-right: 10px;
 }
 
 .user-posts {
@@ -340,6 +376,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline;
+  margin-right: 25%;
 }
 
 .topic {
diff --git a/js/copy-code.js b/js/copy-code.js
new file mode 100644
index 0000000..ac9c7c7
--- /dev/null
+++ b/js/copy-code.js
@@ -0,0 +1,7 @@
+for (let button of document.querySelectorAll(".copy-code")) {
+  button.addEventListener("click", async () => {
+    await navigator.clipboard.writeText(button.value)
+    button.textContent = "Copied!"
+    setTimeout(() => {button.textContent = "Copy"}, 1000.0)
+  })
+}
diff --git a/lib/babycode.lua b/lib/babycode.lua
index 1947151..d5d5647 100644
--- a/lib/babycode.lua
+++ b/lib/babycode.lua
@@ -44,7 +44,9 @@ function babycode.to_html(s, escape_html)
 
   -- replace code block placeholders back with their original contents
   text = text:gsub("\1CODE:(%d+)\1", function(n)
-    return "<pre><code>"..code_blocks[tonumber(n)].."</code></pre>"
+    local code = code_blocks[tonumber(n)]
+    local button = ("<button type=button class=\"copy-code\" value=\"%s\">Copy</button>"):format(code)
+    return "<pre><span class=\"copy-code-container\">" .. button .. "</span><code>"..code.."</code></pre>"
   end)
 
   return text
diff --git a/sass/style.scss b/sass/style.scss
index df775ca..3f6b71a 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -6,6 +6,7 @@ $accent_color: #c1ceb1;
 
 $dark_bg: color.scale($accent_color, $lightness: -25%, $saturation: -97%);
 $dark2: color.scale($accent_color, $lightness: -30%, $saturation: -60%);
+$verydark: color.scale($accent_color, $lightness: -80%, $saturation: -70%);
 
 $light: color.scale($accent_color, $lightness: 40%, $saturation: -60%);
 $lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
@@ -140,7 +141,45 @@ body {
 
 .post-content {
   grid-area: post-content;
-  padding: 5px 20px;
+  padding: 20px;
+  margin-right: 25%;
+}
+
+pre code {
+  display: block;
+  background-color: $verydark;
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left: 10px solid $lighter;
+  padding: 20px;
+}
+
+.copy-code-container {
+  position: sticky;
+  // width: 100%;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: sans-serif;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: $accent_color;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+  
+  &::before {
+    content: "code block";
+    font-style: italic;
+    margin-left: 10px;
+  }
+}
+
+.copy-code {
+  margin-right: 10px;
 }
 
 .user-posts {
@@ -341,6 +380,7 @@ input[type="text"], input[type="password"], textarea, select {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline;
+  margin-right: 25%;
 }
 
 .topic {
diff --git a/views/base.etlua b/views/base.etlua
index d22d3c0..cde8a6f 100644
--- a/views/base.etlua
+++ b/views/base.etlua
@@ -13,5 +13,6 @@
 <body>
   <% render("views.common.topnav") -%>
   <% content_for("inner") %>
+  <script src="/static/js/copy-code.js"></script>
 </body>
 </html>