Merge pull request #19 from zackAJ/feat-copy_clipboard

README.md

@@ -24,6 +24,7 @@ It is primarily Astro, Tailwind and Typescript, with a very small amount of Soli
 - ✅ Markdown support
 - ✅ MDX Support (components in your markdown)
 - ✅ Searchable content (posts and projects)
+- ✅ Code Blocks - copy to clipboard
 
 ## 💯 Lighthouse score
 ![Astro Sphere Lighthouse Score](_lighthouse.png)
@@ -61,7 +62,6 @@ Replace npm with your package manager of choice. `npm`, `pnpm`, `yarn`, `bun`, e
 ## 🗺️ Roadmap
 
 A few features I plan to implement
-- ⬜ Code Blocks - copy to clipboard
 - ⬜ Article Pages - Table of Contents
 - ⬜ Article Pages - Share on social media
 

public/js/copy.js

@@ -0,0 +1,45 @@
+const codeBlocks = document.querySelectorAll('pre:has(code)');
+
+//add copy btn to every code block on the dom
+codeBlocks.forEach((code) => {
+  //button icon
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', '/copy.svg#empty');
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.classList.add('copy-svg');
+  svg.appendChild(use);
+
+  //create button
+  const btn = document.createElement('button');
+  btn.appendChild(svg);
+  btn.classList.add('copy-btn');
+  btn.addEventListener('click', (e) => copyCode(e));
+
+  //container to fix copy button
+  const container = document.createElement('div');
+  container.classList.add('copy-cnt');
+  container.appendChild(btn);
+
+  //add to code block
+  code.classList.add('relative');
+  code.appendChild(container);
+});
+
+/**
+* @param {MouseEvent} event
+*/
+function copyCode(event) {
+  let codeBlock = getChildByTagName(event.currentTarget.parentElement.parentElement, 'CODE')
+  navigator.clipboard.writeText(codeBlock.innerText)
+  const use = getChildByTagName(getChildByTagName(event.currentTarget, 'svg'), 'use');
+  use.setAttribute('href', '/copy.svg#filled')
+  setTimeout(() => {
+    if (use) {
+      use.setAttribute('href', '/copy.svg#empty')
+    }
+  }, 100);
+}
+
+function getChildByTagName(element, tagName) {
+  return Array.from(element.children).find((child) => child.tagName === tagName);
+}

src/components/BaseHead.astro

@@ -53,6 +53,7 @@ const { title, description, image = "/open-graph.jpg" } = Astro.props
 <script is:inline src="/js/theme.js"></script>
 <script is:inline src="/js/scroll.js"></script>
 <script is:inline src="/js/animate.js"></script>
+<script defer is:inline src="/js/copy.js"></script>
 
 <!-- <ViewTransitions  /> -->
 

src/styles/global.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root{
+  --copy-btn-margin:10px;
+}
+
 @layer base {
   @font-face {
     font-family: "Atkinson";
@@ -147,4 +151,18 @@ article img {
 
 #meteors .shower.ul {
   @apply rotate-315;
-}
+}
+
+.copy-cnt{
+  @apply absolute w-full;
+  top:var(--copy-btn-margin);
+}
+.copy-btn {
+  @apply  w-[30px] fixed;
+  left:calc(100% - var(--copy-btn-margin));
+  transform: translateX(-100%);
+}
+
+.copy-svg {
+  @apply w-full aspect-square text-white opacity-70 hover:opacity-90;
+}