From a40ea086eca36f9dd020937f5982069044dcb7ff Mon Sep 17 00:00:00 2001
From: Cameron <cameron.taylor.ninja@gmail.com>
Date: Tue, 5 Mar 2024 19:51:12 -0500
Subject: [PATCH] blog title linking ez

---
 11ty-source/_layouts/blog-post.liquid |  8 +++---
 11ty-source/scripts.njk               | 10 +++++++-
 scss/style.scss                       | 37 +++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/11ty-source/_layouts/blog-post.liquid b/11ty-source/_layouts/blog-post.liquid
index bd852b08d..c2cde35b8 100644
--- a/11ty-source/_layouts/blog-post.liquid
+++ b/11ty-source/_layouts/blog-post.liquid
@@ -4,9 +4,11 @@ layout: default.liquid
 <!-- <%- @partial('header-menu.html.eco', {ablog:"class='active'"}) %> -->
 
 <div class="col-12">
-	<h1 class="title">{{ title }}</h1>
-
-	<p class="post-date">{{ postDate }}</p>
+	<div>
+		<h1 class="title"><a class="icon-link icon-link-hover" style="color:var(--bs-body-color)" onclick="copyAnchorLink()">{{ title }} <i class="bi-link-45deg" aria-hidden="true"></i></a></h1>
+		<p class="post-date">{{ postDate }}</p>
+	</div>
+	
 
 	{{ content }}
 
diff --git a/11ty-source/scripts.njk b/11ty-source/scripts.njk
index c05c8f75a..cfe32cd3e 100644
--- a/11ty-source/scripts.njk
+++ b/11ty-source/scripts.njk
@@ -1,3 +1,11 @@
 ---
 permalink: 11ty-bundle.js
----
\ No newline at end of file
+---
+
+
+function copyAnchorLink() {
+	if (navigator.clipboard)
+		navigator.clipboard.writeText(window.location.href.replace(window.location.hash, ""));
+	else
+		console.log("Clipboard API not supported");
+}
diff --git a/scss/style.scss b/scss/style.scss
index 17d24882e..c959bd645 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -52,6 +52,43 @@ a.header-anchor::before {
 	visibility: hidden;
 }
 
+.icon-link-hover:hover > i {
+	opacity: 1;
+}
+
+@keyframes rotate-back-and-forth {
+	0% {
+		transform: rotate(0deg);
+	}
+	50% {
+		transform: rotate(10deg);
+	}
+	100% {
+		transform: rotate(0deg);
+	}
+}
+
+.icon-link-hover:active > i {
+	opacity: 1;
+	animation: rotate-back-and-forth 0.1s;
+	animation-iteration-count: 3;
+}
+
+.icon-link-hover:active > i::after {
+	content: " link copied to clipboard";
+	opacity: 0.2;
+}
+
+.icon-link-hover > i {
+	opacity: 0;
+	transform: translate(0, 2px);
+	transition: all 0.1s ease-out;
+}
+
+.icon-link-hover {
+	cursor: pointer;
+}
+
 //   .columns-2 {
 //     @include columns(2);
 //   }