feat: copy code and chapter 1 of the docker course

assets/css/app.css

@@ -320,14 +320,41 @@
     @apply rounded-lg;
     @apply mx-auto w-[99%];
     @apply my-2;
+    position: relative;
   }
 
   pre > code {
     border-radius: 0;
     display: block;
     white-space: pre;
     padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
   }
+
+  pre > button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+
+    align-self: end;
+    border: none;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    color: var(--color-text);
+    font-weight: var(--fw-bold);
+    cursor: pointer;
+    justify-self: end;
+    margin-bottom: 0rem;
+    display: inline-block;
+    font-size: 10px;
+    width: 85px;
+    height: 20px;
+    text-align: center;
+    padding: 0px;
+    line-height: 0px;
+  }
+
   hr {
     border: 0;
     border-top: 0.1rem solid #f4f5f6;
@@ -547,7 +574,6 @@
   }
 
   @media (min-width: 40rem) {
-    /* Small devices (landscape phones, 576px and up) */
     header section {
       flex-direction: row;
     }

assets/js/app.js

@@ -33,6 +33,44 @@ Hooks.Scroll = {
   },
 };
 
+Hooks.CopyToClipboard = {
+  mounted() {
+    const copyButtonLabel = "Copy Code";
+
+    // use a class selector if available
+    let blocks = document.querySelectorAll("pre");
+
+    blocks.forEach((block) => {
+      // only add button if browser supports Clipboard API
+      console.log(block);
+      if (navigator.clipboard) {
+        let button = document.createElement("button");
+
+        button.innerText = copyButtonLabel;
+        block.appendChild(button);
+
+        button.addEventListener("click", async () => {
+          await copyCode(block, button);
+        });
+      }
+    });
+
+    async function copyCode(block, button) {
+      let code = block.querySelector("code");
+      let text = code.innerText;
+
+      await navigator.clipboard.writeText(text);
+
+      // visual feedback that task is completed
+      button.innerText = "Code Copied";
+
+      setTimeout(() => {
+        button.innerText = copyButtonLabel;
+      }, 700);
+    }
+  },
+};
+
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");

lib/tr_web/live/post_live.ex

@@ -123,6 +123,8 @@ defmodule TrWeb.PostLive do
 
     <%= TrWeb.AdsComponent.render_large_ad(assigns) %>
 
+    <pre class="hidden" phx-hook="CopyToClipboard" id="hidden-code-block"><code></code></pre>
+
     <%= cond do %>
       <% @post.sponsored && @current_user && Tr.SponsorsCache.sponsor?(@current_user.github_username) -> %>
         <%= raw(@post.body) %>

mix.lock

@@ -5,6 +5,7 @@
   "bunt": {:hex, :bunt, "1.0.0", "081c2c665f086849e6d57900292b3a161727ab40431219529f13c4ddcf3e7a44", [:mix], [], "hexpm", "dc5f86aa08a5f6fa6b8096f0735c4e76d54ae5c9fa2c143e5a1fc7c1cd9bb6b5"},
   "castore": {:hex, :castore, "1.0.9", "5cc77474afadf02c7c017823f460a17daa7908e991b0cc917febc90e466a375c", [:mix], [], "hexpm", "5ea956504f1ba6f2b4eb707061d8e17870de2bee95fb59d512872c2ef06925e7"},
   "certifi": {:hex, :certifi, "2.12.0", "2d1cca2ec95f59643862af91f001478c9863c2ac9cb6e2f89780bfd8de987329", [:rebar3], [], "hexpm", "ee68d85df22e554040cdb4be100f33873ac6051387baf6a8f6ce82272340ff1c"},
+  "clipboard": {:hex, :clipboard, "0.2.1", "d1409d6c94f6f5806c5c224d6396fb750729c6284bf375c08e9428ce9efc6470", [:mix], [], "hexpm", "7d6fa6851e7d6e3f21c6c4c9f903807097e2604f99ffc06354c980838d3b2fda"},
   "cloak": {:hex, :cloak, "1.1.4", "aba387b22ea4d80d92d38ab1890cc528b06e0e7ef2a4581d71c3fdad59e997e7", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "92b20527b9aba3d939fab0dd32ce592ff86361547cfdc87d74edce6f980eb3d7"},
   "combine": {:hex, :combine, "0.10.0", "eff8224eeb56498a2af13011d142c5e7997a80c8f5b97c499f84c841032e429f", [:mix], [], "hexpm", "1b1dbc1790073076580d0d1d64e42eae2366583e7aecd455d1215b0d16f2451b"},
   "comeonin": {:hex, :comeonin, "5.4.0", "246a56ca3f41d404380fc6465650ddaa532c7f98be4bda1b4656b3a37cc13abe", [:mix], [], "hexpm", "796393a9e50d01999d56b7b8420ab0481a7538d0caf80919da493b4a6e51faf1"},

priv/static/robots-6306cab35d61ff3ef9ddfaf9101465d8.txt

@@ -0,0 +1,7 @@
+# See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
+#
+# To ban all spiders from the entire site uncomment the next two lines:
+# User-agent: *
+# Disallow: /
+User-agent: *
+Disallow: 

priv/static/robots.txt

@@ -4,8 +4,4 @@
 # User-agent: *
 # Disallow: /
 User-agent: *
-Disallow: /
-
-User-agent: Googlebot
-User-agent: Bingbot
-User-agent: DuckDuckBot
+Disallow: