feat: add copy paste shortcut

src/codeblock/fence.rs

@@ -17,7 +17,7 @@ fn parse_range(s: &str) -> Option<RangeInclusive<usize>> {
     }
 }
 
-#[derive(Debug)]
+#[derive(Debug, Clone)]
 pub struct FenceSettings<'a> {
     pub language: Option<&'a str>,
     pub line_numbers: bool,
@@ -65,7 +65,9 @@ struct FenceIter<'a> {
 
 impl<'a> FenceIter<'a> {
     fn new(fence_info: &'a str) -> Self {
-        Self { split: fence_info.split(',') }
+        Self {
+            split: fence_info.split(','),
+        }
     }
 
     fn parse_ranges(token: Option<&str>) -> Vec<RangeInclusive<usize>> {

src/content.rs

@@ -239,14 +239,26 @@ pub fn convert_md_to_html(md_content: &str, settings: &Settings, path: Option<&s
                     cmark::CodeBlockKind::Fenced(fence_info) => FenceSettings::new(fence_info),
                     _ => FenceSettings::new(""),
                 };
-                let (block, begin) = CodeBlock::new(fence, settings, path);
+                let (block, begin) = CodeBlock::new(fence.clone(), settings, path);
                 code_block = Some(block);
+
+                events.push(Event::Html("<div class=\"code-block\">".into()));
+
+                let language = &fence.language.unwrap_or("code");
+
+                events.push(Event::Html(
+                    format!("<div class=\"language-name\">{}</div>", language).into(),
+                ));
+
+                events.push(Event::Html(
+                        "<button class=\"copy-to-clipboard\"><svg class=\"h-6 w-6 fill-white\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\"><path d=\"M 4 2 C 2.895 2 2 2.895 2 4 L 2 17 C 2 17.552 2.448 18 3 18 C 3.552 18 4 17.552 4 17 L 4 4 L 17 4 C 17.552 4 18 3.552 18 3 C 18 2.448 17.552 2 17 2 L 4 2 z M 8 6 C 6.895 6 6 6.895 6 8 L 6 20 C 6 21.105 6.895 22 8 22 L 20 22 C 21.105 22 22 21.105 22 20 L 22 8 C 22 6.895 21.105 6 20 6 L 8 6 z M 8 8 L 20 8 L 20 20 L 8 20 L 8 8 z\"></path></svg></button>\n" .into(),
+                ));
                 events.push(Event::Html(begin.into()));
             }
             Event::End(TagEnd::CodeBlock) => {
                 // reset highlight and close the code block
                 code_block = None;
-                events.push(Event::Html("</code></pre>\n".into()));
+                events.push(Event::Html("</code></pre></div>\n".into()));
             }
             event => {
                 if let Some(heading) = current.as_mut() {

static/css/emmett.css

@@ -251,7 +251,6 @@ article img {
 
 /** Code **/
 
-div code,
 li code,
 p code,
 h1 code,
@@ -274,12 +273,15 @@ samp {
 }
 
 pre {
+  margin-top: 0px;
   padding: 0.625rem;
   font-style: monospace;
   white-space: pre-wrap;
   font-size: 1rem;
 
-  border-radius: var(--standard-border-radius);
+  border-bottom-left-radius: var(--standard-border-radius);
+  border-bottom-right-radius: var(--standard-border-radius);
+  border-top-right-radius: var(--standard-border-radius);
   box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.2);
 }
 
@@ -324,7 +326,7 @@ footer p {
   padding-left: 2.1rem;
 }
 .markdown-heading:not(:hover) a.anchor {
-  display: none;
+  opacity: 0;
 }
 
 .markdown-heading a.anchor {
@@ -335,15 +337,45 @@ footer p {
   width: 2.1rem;
   height: 2.1rem;
   margin: auto;
-  border-radius: var(--borderRadius-small);
   justify-content: center;
   align-items: center;
   transform: translateY(-50%);
   float: left;
-  padding-right: var(--base-size-4);
   line-height: 1;
+  opacity: 1;
 }
 
 .markdown-heading a:hover.anchor {
   background-color: transparent;
 }
+.code-block {
+  position: relative;
+}
+.code-block button {
+  background-color: transparent;
+  border-radius: var(--standard-border-radius);
+  cursor: pointer;
+  border: none;
+}
+
+.code-block .language-name {
+  display: inline-block;
+  background-color: #2b303b;
+  color: #ffffff;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+
+  box-shadow: 0.3rem 0rem 0.3rem -0.05rem rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid white;
+}
+
+.copy-to-clipboard {
+  position: absolute;
+  right: 0.5rem;
+  top: 2.2rem;
+}
+.copy-to-clipboard svg {
+  width: 1rem;
+  height: 1rem;
+  fill: white;
+}

static/js/emmett.js

@@ -0,0 +1,57 @@
+function fallbackCopyTextToClipboard(text) {
+  var textArea = document.createElement("textarea");
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    var successful = document.execCommand("copy");
+    var msg = successful ? "successful" : "unsuccessful";
+    console.log("Fallback: Copying text command was " + msg);
+  } catch (err) {
+    console.error("Fallback: Oops, unable to copy", err);
+  }
+
+  document.body.removeChild(textArea);
+}
+function copyTextToClipboard(text, clickedElement) {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  navigator.clipboard.writeText(text).then(
+    function () {
+      console.log("Async: Copying to clipboard was successful!");
+      clickedElement.innerHTML =
+        '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 498.138 498.138" xml:space="preserve"> <g> <path d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472 c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457 C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474 l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917 H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47 c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051 c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745 c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/> </g> </svg>';
+    },
+    function (err) {
+      console.error("Async: Could not copy text: ", err);
+    }
+  );
+}
+document.addEventListener(
+  "DOMContentLoaded",
+  function () {
+    const divs = document.querySelectorAll(".copy-to-clipboard");
+
+    divs.forEach((el) =>
+      el.addEventListener("click", (event) => {
+        console.log("CLIC");
+        const code = event.currentTarget.nextElementSibling;
+        console.log(event.currentTarget);
+        console.log(code);
+        console.log(code.textContent);
+        copyTextToClipboard(code.textContent, event.currentTarget);
+      })
+    );
+  },
+  false
+);

templates/base.html

@@ -18,6 +18,7 @@
       content="https://vincent.jousse.org/{% block ogurl %}{% endblock ogurl %}"
     />
 
+    <script defer src="/js/emmett.js"></script>
     <link
       rel="alternate"
       type="application/atom+xml"