blog title linking ez

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 }}
 

11ty-source/scripts.njk

@@ -1,3 +1,11 @@
 ---
 permalink: 11ty-bundle.js
----
+---
+
+
+function copyAnchorLink() {
+	if (navigator.clipboard)
+		navigator.clipboard.writeText(window.location.href.replace(window.location.hash, ""));
+	else
+		console.log("Clipboard API not supported");
+}

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);
 //   }