fix: blog links

Signed-off-by: veralex <alexey.verevkin@akvelon.com>
falcosecurity · Apr 3, 2023 · 0a6b6a6 · 0a6b6a6
1 parent 8a13ba0
commit 0a6b6a6
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 23 deletions.
diff --git a/assets/js/copy-link.js b/assets/js/copy-link.js
@@ -0,0 +1,10 @@
+const copyLinkClickHandler = (link) => {
+  navigator.clipboard.writeText(link);
+
+  const toast = $('#toast');
+  const [el] = toast;
+  el.classList.remove('d-none');
+  el.getElementsByClassName('toast__content')[0].innerText = 'Link copied to clipboard';
+
+  toast.toast('show');
+}
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -9,6 +9,7 @@
 @import "community";
 @import "announcement";
 @import "landing";
+@import "toasts";
 
 // Mixins
 @import "mixins/grid";

diff --git a/assets/scss/_toasts.scss b/assets/scss/_toasts.scss
@@ -0,0 +1,13 @@
+.toast {
+  bottom: 1rem;
+  right: 1rem;
+
+  min-width: 20rem;
+  width: 20rem;;
+
+  line-height: 1rem;
+
+  @include media-breakpoint-down(sm) {
+    top: 10rem;
+  }
+}
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
@@ -12,6 +12,7 @@
         <main role="main">
           {{ partial "version-banner.html" . }}
           {{ block "main" . }}{{ end }}
+          {{ partial "toast.html" }}
         </main>
       </div>
       {{ partial "footer.html" . }}

diff --git a/layouts/blog/content.html b/layouts/blog/content.html
@@ -8,13 +8,16 @@
 			</div>
 		</div>
 		<div class="row flex-xl-nowrap"> 
-      <div class="col-10">
+      <div class="col">
 				{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
-				<div class="td-byline mb-3">
+				<div class="d-flex align-items-center mb-3 post__content">
 					{{ with .Params.author }}
 						<b class="text-uppercase text-dark mr-3">{{ . | markdownify }}</b>
 					{{ end}}
 					<time datetime="{{  $.Date.Format "2006-01-02" }}" class="text-muted">{{ $.Date.Format $.Site.Params.time_format_default  }}</time>
+					<button class="btn btn-link text-muted p-0" onclick="copyLinkClickHandler(`{{ .Permalink }}`)">
+						<i class="fa fa-link ml-2"></i>
+					</button>
 				</div>
 				<h1>{{ .Title }}</h1>
 				<ul class="taxonomy-terms post__tags">
@@ -27,24 +30,6 @@ <h1>{{ .Title }}</h1>
 					{{ end }}
 				</ul>
 			</div>
-			<aside class="d-none d-xl-block col-xl-2 d-print-none mt-5 pt-4">
-				<p>{{ "general_share" | T }}</p>
-				<div class="post__share d-flex gap-3">
-					{{/*  TODO: add links  */}}
-					<a class="btn btn-link p-0 text-dark" role="button">
-						<i class="fab fa-facebook"></i>
-					</a>
-					<a class="btn btn-link p-0 text-dark" role="button">
-						<i class="fab fa-twitter"></i>
-					</a>
-					<a class="btn btn-link p-0 text-dark" role="button">
-						<i class="fab fa-linkedin"></i>
-					</a>
-					<a class="btn btn-link p-0 text-dark" role="button">
-						<i class="fa fa-envelope"></i>
-					</a>
-				</div>
-			</aside>
 		</div>
 	</div>
 </section>

diff --git a/layouts/partials/blog/card.html b/layouts/partials/blog/card.html
@@ -8,10 +8,12 @@
   </a>
 </div>
 <div class="post__content">
-  <div class="d-flex text-muted text-uppercase">
+  <div class="d-flex align-items-center text-muted text-uppercase">
     <small class="flex-grow-1">{{ .Params.author }}</small>
     <small class="flex-shrink-0">{{ .Date.Format ($.Param "time_format_default") }}</small>
-    <i class="fa fa-link ml-2"></i>
+    <button class="btn btn-link text-muted p-0" onclick="copyLinkClickHandler(`{{ .Permalink }}`)">
+      <i class="fa fa-link ml-2"></i>
+    </button>
   </div>
 
   <a href="{{ .RelPermalink }}" class="text-decoration-none">
@@ -32,4 +34,4 @@ <h5 class="text-body mt-3">{{ .LinkTitle }}</h5>
         {{ end }}
     {{ end }}
   </ul>
-</div>
+</div>
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
@@ -8,4 +8,6 @@
 <script src="{{ $announcement.RelPermalink }}" async></script>
 {{ $subscribe := resources.Get "js/subscribe-form.js" }}
 <script src="{{ $subscribe.RelPermalink }}" async></script>
+{{ $copy_link := resources.Get "js/copy-link.js" }}
+<script src="{{ $copy_link.RelPermalink }}" async></script>
 {{/*  TODO: merge scripts when revamp is ready  */}}
diff --git a/layouts/partials/toast.html b/layouts/partials/toast.html
@@ -0,0 +1,15 @@
+<div
+  id="toast"
+  class="d-none toast position-fixed"
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  data-delay="2000"
+>
+  <div class="d-flex align-items-center py-2 px-3">
+    <div class="mr-4 w-100 toast__content"></div>
+    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+</div>