From 787bb67b619341e85682a845622887ad43abf67c Mon Sep 17 00:00:00 2001 From: zackaj Date: Mon, 25 Nov 2024 01:25:28 +0100 Subject: [PATCH 1/3] func and ui done, todo pin copy button position --- public/copy.svg | 25 ++++++++++++++++++++++ public/js/copy.js | 40 +++++++++++++++++++++++++++++++++++ src/components/BaseHead.astro | 1 + src/styles/global.css | 9 +++++++- 4 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 public/copy.svg create mode 100644 public/js/copy.js diff --git a/public/copy.svg b/public/copy.svg new file mode 100644 index 00000000..1adb0944 --- /dev/null +++ b/public/copy.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/js/copy.js b/public/js/copy.js new file mode 100644 index 00000000..3672e544 --- /dev/null +++ b/public/js/copy.js @@ -0,0 +1,40 @@ +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)); + + //add to code block + code.classList.add('relative'); + code.appendChild(btn); +}); + +/** +* @param {MouseEvent} e +*/ +function copyCode(e) { + let codeBlock = getChildByTagName(e.currentTarget.parentElement, 'CODE') + navigator.clipboard.writeText(codeBlock.innerText) + const use = getChildByTagName(getChildByTagName(e.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); +} diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index eca0dc1e..b1826827 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -53,6 +53,7 @@ const { title, description, image = "/open-graph.jpg" } = Astro.props + diff --git a/src/styles/global.css b/src/styles/global.css index 9ef386f2..3c6132a9 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -147,4 +147,11 @@ article img { #meteors .shower.ul { @apply rotate-315; -} \ No newline at end of file +} +.copy-btn { + @apply absolute top-2 right-2 w-[30px]; +} + +.copy-svg { + @apply w-full aspect-square text-white opacity-70 hover:opacity-90; +} From e25c29e6008dd9dfbff81415a0ee1b07dbc1c2e1 Mon Sep 17 00:00:00 2001 From: zackaj Date: Mon, 25 Nov 2024 19:23:33 +0100 Subject: [PATCH 2/3] fixed copy button position --- public/js/copy.js | 15 ++++++++++----- src/styles/global.css | 13 ++++++++++++- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/public/js/copy.js b/public/js/copy.js index 3672e544..f9cff70f 100644 --- a/public/js/copy.js +++ b/public/js/copy.js @@ -15,18 +15,23 @@ codeBlocks.forEach((code) => { 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(btn); + code.appendChild(container); }); /** -* @param {MouseEvent} e +* @param {MouseEvent} event */ -function copyCode(e) { - let codeBlock = getChildByTagName(e.currentTarget.parentElement, 'CODE') +function copyCode(event) { + let codeBlock = getChildByTagName(event.currentTarget.parentElement.parentElement, 'CODE') navigator.clipboard.writeText(codeBlock.innerText) - const use = getChildByTagName(getChildByTagName(e.currentTarget, 'svg'), 'use'); + const use = getChildByTagName(getChildByTagName(event.currentTarget, 'svg'), 'use'); use.setAttribute('href', '/copy.svg#filled') setTimeout(() => { if (use) { diff --git a/src/styles/global.css b/src/styles/global.css index 3c6132a9..7e0ef18f 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -2,6 +2,10 @@ @tailwind components; @tailwind utilities; +:root{ + --copy-btn-margin:10px; +} + @layer base { @font-face { font-family: "Atkinson"; @@ -148,8 +152,15 @@ article img { #meteors .shower.ul { @apply rotate-315; } + +.copy-cnt{ + @apply absolute w-full; + top:var(--copy-btn-margin); +} .copy-btn { - @apply absolute top-2 right-2 w-[30px]; + @apply w-[30px] fixed; + left:calc(100% - var(--copy-btn-margin)); + transform: translateX(-100%); } .copy-svg { From 4eab9afd4c3849dd654882d864a9015e02c5d486 Mon Sep 17 00:00:00 2001 From: zackaj Date: Mon, 25 Nov 2024 19:46:19 +0100 Subject: [PATCH 3/3] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 63bf6a53..3404f1c0 100644 --- a/README.md +++ b/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