fixed video play issue and icons on linkspage

content/english/linkspage.md

@@ -1,20 +1,20 @@
 ---
 date: 2023-05-19
 title: An Appstek Corp's Product Entity (A market-first SaaS 2.0 solution)
-description: Links Page similar to Linktree page.
+description: Overview Links Page.
 load_google_icons: true # (https://fonts.google.com/icons?icon.set=Material+Symbols) Load google icons only in this page (It will boost website performance)
 
 page_layout: "default" # Mandatory (If you want to use blog single page layout)
+page_description: ""
 hide_series_post: true # Hide series post
 hide_related_post: true # hide related post located at the end of the page
-hide_post_meta: false # hide post meta like last update & publish data, estimated reading time etc.
+hide_post_meta: true # hide post meta like last update & publish data, estimated reading time etc.
 hide_tableofcontent: true # hide table of contents
 hide_popup_form: true # hide table of contents
 
-cover_image: false
-cover_image_src: ""
+cover_image: true
+cover_image_src: "/images/logos/logo-dark.svg"
 cover_image_height: ""
-cover_image_width: ""
 
 bannerarea: false
 bannertext: "This is banner area text"
@@ -27,12 +27,13 @@ draft: false
 ---
 
 {{< link-row title="Check us out!" >}}
-  {{< link image="/images/block-image-02.png" label="IntelOps Brochure" url="https://publuu.com/flip-book/289184/674718" >}}
-  {{< link image="/images/block-image-02.png" label="IntelOps Platform Overview" url="https://publuu.com/flip-book/289184/674198" >}}
-  {{< link icon="video_label" label="IntelOps Website" url="https://intelops.ai/" target="_self" >}}
+{{< link image="/images/linkspage/document.svg" label="IntelOps Brochure" url=`https://publuu.com/flip-book/289184/674718` >}}
+{{< link image="/images/linkspage/document.svg" label="IntelOps Platform Overview" url=`https://publuu.com/flip-book/289184/674198` >}}
+{{< link image="/images/linkspage/web.svg" label="IntelOps Website" url=`https://intelops.ai/` target="_self" >}}
 {{</ link-row >}}
 
 {{< link-row title="Videos" >}}
-  {{< link icon="videocam" label="Capten Stack Overview" type="video" videoEmbedId="OpNIXe0Wc30" >}}
-  {{< link icon="videocam" label="Compage Teaser" type="video" videoEmbedId="6CwEGQlY3Pk" >}}
+{{< link image="/images/linkspage/videocam.svg" label="Capten Stack Overview" type="video" videoEmbedId="OpNIXe0Wc30" >}}
+<!-- {{< link icon="videocam" label="Compage Teaser" type="video" videoEmbedId="6CwEGQlY3Pk" >}} -->
+{{< link image="/images/linkspage/videocam.svg" label="Compage Teaser" type="video" videoEmbedId="6CwEGQlY3Pk" >}} 
 {{</ link-row >}}

themes/delta/assets/js/script.js

@@ -54,27 +54,7 @@ blocks.forEach((block) => {
 // on ready state
 $(document).ready(function () {
   "use strict";
-
-  // Video Modal
-  // Get a reference to the video URL button and the video iframe
-  const videoButton = document.querySelector('[data-bs-target="#videoModal"]');
-  const videoIframe = document.getElementById('videoIframe');
-
-  // Add a click event listener to the video button
-  videoButton?.addEventListener('click', function () {
-    // Get the video URL from the "video-url" attribute
-    const videoURL = videoButton.getAttribute('video-url');
-    // Set the video URL in the iframe
-    videoIframe.src = videoURL;
-  });
-
-  // Add an event listener for when the modal is closed
-  const videoModal = document.getElementById('videoModal');
-  videoModal?.addEventListener('hidden.bs.modal', function () {
-    // Remove the src attribute to stop the video
-    videoIframe.removeAttribute('src');
-  });
-
+
   const scrolledPopup = document.querySelector('.scrolledPopup');
   if (scrolledPopup) {
 
@@ -220,8 +200,8 @@ $(document).ready(function () {
         $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0"
       );
     });
-    $("#videoModal").on("hide.bs.modal", function (e) {
-      $("#showVideo").attr("src", $videoSrc);
+    $("#videoModal").on("hidden.bs.modal", function (e) {
+      $("#showVideo").attr("src", "");
     });
   }
 

themes/delta/layouts/_default/single.html

@@ -2,6 +2,22 @@
 
 {{ partial "header.html" . }}
 
+
+{{ if .Params.load_google_icons }}
+<!-- Google Icons -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+<style>
+.material-symbols-outlined {
+  vertical-align: middle;
+  font-variation-settings:
+  'FILL' 0,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 24
+}
+</style>
+{{ end }}
+
 <!-- checking blog -->
 {{ if or (eq .Section "post") (eq .Params.page_layout "default") (eq .Section "posts") (eq .Section "blog") (eq .Section "blogs") (eq .Section "news") (eq .Section "categories") (eq .Section "tags") }}
 
@@ -76,6 +92,9 @@ <h1 class="title banner-title" {{with .Params.bannertext_color}}style="color:{{.
 
         <div class="pb-1">
           <h1 class="h2 mb-3">{{.Title | markdownify}}</h1>
+          {{ with .Params.page_description }}
+            <p>{{. | markdownify}}</p>
+          {{ end }}
           {{ if not .Params.hide_post_meta }}
           <span class="text-muted small d-inline-block" style="opacity:.75">Last Update : {{ .Lastmod.Format "02 January, 2006" }} <span class="mx-1 text-dark-50">|</span> Published : {{ .PublishDate.Format "02 January, 2006" }} <span class="mx-1 text-dark-50">|</span> {{.ReadingTime}} {{i18n `min_read`}}</span>
           {{ end }}

themes/delta/layouts/partials/header.html

@@ -167,18 +167,6 @@
   </div>
 </div>
 
-<!-- Modal -->
-<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-lg modal-dialog-centered">
-    <div class="modal-content">
-      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      <div class="modal-body ratio ratio-16x9">
-        <iframe id="videoIframe" class="aspect" src="" frameborder="0"></iframe>
-      </div>
-    </div>
-  </div>
-</div>
-
 <script>
   const searchModal = document.getElementById('searchModal');
   const searchInput = document.getElementById('searchInput');

themes/delta/layouts/partials/style.html

@@ -18,21 +18,6 @@
 <link rel="dns-prefetch" href="//platform.twitter.com">
 
 
-{{ if .Params.load_google_icons }}
-<!-- Google Icons -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-<style>
-.material-symbols-outlined {
-  vertical-align: middle;
-  font-variation-settings:
-  'FILL' 0,
-  'wght' 400,
-  'GRAD' 0,
-  'opsz' 24
-}
-</style>
-{{ end }}
-
 <!-- plugins + stylesheet -->
 {{ $styles := slice }}
 {{ range site.Params.plugins.css }}

themes/delta/layouts/shortcodes/link.html

@@ -7,7 +7,7 @@
 {{ $videoEmbedId := default "C0DPdy98e4c" (.Get "videoEmbedId") }}
 
 {{ if eq $type "video" }}
-  <button type="button" class="link-item" video-url="https://www.youtube.com/embed/{{$videoEmbedId}}?rel=0&autoplay=1" title="{{$label}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen data-bs-toggle="modal" data-bs-target="#videoModal">
+  <button type="button" class="link-item" data-src="https://www.youtube.com/embed/{{$videoEmbedId}}?rel=0&autoplay=1" title="{{$label}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen data-bs-toggle="modal" data-bs-target="#videoModal">
     {{ if $image }}
     {{ partial "image.html" (dict "Src" $image "Class" "img-fluid" "Alt" $label "Size" "30x") }}
     {{ else }}