Add copy button to codeblocks

Author: GearsDatapacks

src/website/component.gleam

@@ -1,11 +1,14 @@
+import contour
 import gleam/list
+import gleam/option.{type Option, Some}
 import lustre/attribute.{attribute}
 import lustre/element.{type Element}
 import lustre/element/html
+import pearl
 import website/component/footer
 import website/component/header
 
-pub fn head(page: String) -> Element(a) {
+pub fn head(page: String) -> Element(_) {
   html.head([], [
     html.meta([attribute("charset", "UTF-8")]),
     html.title([], page <> " | Gears"),
@@ -38,7 +41,7 @@ pub type Section(a) {
   Section(content: List(Element(a)))
 }
 
-pub fn page(name: String, sections: List(Section(a))) -> Element(a) {
+pub fn page(name: String, sections: List(Section(a))) -> Element(_) {
   html.html([attribute("lang", "en")], [
     head(name),
     html.body([attribute.class("min-h-screen bg-slate-800 text-white")], [
@@ -64,6 +67,33 @@ pub fn text_page(header: String, content: List(Element(a))) -> Section(a) {
   ])
 }
 
-pub fn dangerous_html(html: String) -> Element(a) {
+pub fn dangerous_html(html: String) -> Element(_) {
   element.unsafe_raw_html("", "span", [], html)
 }
+
+pub fn code_block(language: Option(String), code_text: String) -> Element(_) {
+  let code = case language {
+    Some("erlang") | Some("erl") ->
+      dangerous_html(pearl.highlight_html(code_text))
+    Some("gleam") -> dangerous_html(contour.to_html(code_text))
+    _ -> html.text(code_text)
+  }
+
+  html.div([attribute.class("codeblock")], [
+    html.button(
+      [
+        attribute.class("copy-button"),
+        attribute(
+          "onclick",
+          "navigator.clipboard.writeText(`" <> code_text <> "`)",
+        ),
+      ],
+      [html.text("copy")],
+    ),
+    html.pre([], [
+      html.code([attribute("data-lang", option.unwrap(language, "text"))], [
+        code,
+      ]),
+    ]),
+  ])
+}

src/website/component/footer.gleam

@@ -2,7 +2,7 @@ import lustre/attribute
 import lustre/element.{type Element}
 import lustre/element/html
 
-pub fn view() -> Element(a) {
+pub fn view() -> Element(_) {
   html.footer(
     [
       attribute.class("right-5 bottom-4 fixed"),

src/website/component/header.gleam

@@ -3,7 +3,7 @@ import lustre/element.{type Element}
 import lustre/element/html
 import lustre/element/svg
 
-pub fn view() -> Element(a) {
+pub fn view() -> Element(_) {
   html.header([attribute.class("bg-purple-700 flex w-full select-none")], [
     html.nav(
       [

src/website/data/blog.gleam

@@ -1,20 +1,17 @@
-import contour
 import gleam/bool
 import gleam/dict.{type Dict}
 import gleam/list
-import gleam/option
 import gleam/string
 import jot
-import lustre/attribute.{attribute}
+import lustre/attribute
 import lustre/element
 import lustre/element/html
 import lustre/ssg/djot
-import pearl
 import simplifile
 import tom.{type Toml}
 import website/component
 
-pub fn posts() -> List(Post(a)) {
+pub fn posts() -> List(Post(_)) {
   let assert Ok(files) = simplifile.read_directory("blog/")
 
   list.filter_map(files, fn(file) {
@@ -35,7 +32,7 @@ pub fn posts() -> List(Post(a)) {
   })
 }
 
-fn renderer() -> djot.Renderer(element.Element(a)) {
+fn renderer() -> djot.Renderer(element.Element(_)) {
   let default = djot.default_renderer()
   djot.Renderer(
     ..default,
@@ -72,24 +69,7 @@ fn renderer() -> djot.Renderer(element.Element(a)) {
           )
       }
     },
-    codeblock: fn(attrs, lang, code) {
-      let lang = option.unwrap(lang, "text")
-
-      let code = case lang {
-        "erlang" | "erl" -> component.dangerous_html(pearl.highlight_html(code))
-        "gleam" -> component.dangerous_html(contour.to_html(code))
-        _ -> html.text(code)
-      }
-
-      html.pre(
-        dict.fold(attrs, [], fn(attrs, name, value) {
-          [attribute(name, value), ..attrs]
-        }),
-        [
-          html.code([attribute("data-lang", lang)], [code]),
-        ],
-      )
-    },
+    codeblock: fn(_attrs, lang, code) { component.code_block(lang, code) },
   )
 }
 

src/website/page/index.gleam

@@ -183,7 +183,7 @@ type Talk {
   )
 }
 
-fn talk(talk: Talk) -> Element(a) {
+fn talk(talk: Talk) -> Element(_) {
   html.p([attribute.class("my-3")], [
     html.a(
       [
@@ -203,7 +203,7 @@ fn talk(talk: Talk) -> Element(a) {
   ])
 }
 
-fn social(social: Social) -> Element(a) {
+fn social(social: Social) -> Element(_) {
   html.a([attribute.href(social.url), attribute.target("_blank")], [
     html.img([
       attribute.src("/images/" <> social.icon),

static/main.css

@@ -63,4 +63,14 @@ pre code .hl-atom {
 
 pre code .hl-variant {
   color: #ffddfa
+}
+
+button.copy-button {
+  position: absolute;
+  top: 0.1rem;
+  right: 0.5rem;
+}
+
+div.codeblock {
+  position: sticky;
 }