add lazy loading

pactus-project · Sep 11, 2024 · 6368407 · 6368407
1 parent b081126
commit 6368407
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 133 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -4,7 +4,9 @@
 @tailwind typography;
 
 @layer components {
-
+  .lazy {
+    @apply skeleton border-none
+  }
   .my-timeline-row {
     --timeline-row-start: 0px !important;
   }
@@ -1323,10 +1325,12 @@ html {
   transition: .5s;
   background-image: url(/images/roadmap.png);
   background-repeat: repeat-x;
-  max-width: 100%!important
+  max-width: 100% !important
 }
 
-.fn_cs_hero_slider,.frenify_cards_gallery .o_img,.ripple {
+.fn_cs_hero_slider,
+.frenify_cards_gallery .o_img,
+.ripple {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center
@@ -1348,9 +1352,9 @@ html {
   left: 40px;
   width: 20px;
   height: 20px;
-  background: -moz-linear-gradient(90deg,#7064e9,#217AFF);
-  background: -webkit-linear-gradient(90deg,#7064e9,#217AFF);
-  background: linear-gradient(to right,#7064e9,#217AFF);
+  background: -moz-linear-gradient(90deg, #7064e9, #217AFF);
+  background: -webkit-linear-gradient(90deg, #7064e9, #217AFF);
+  background: linear-gradient(to right, #7064e9, #217AFF);
   border-radius: 100%;
   bottom: 100%;
   margin-bottom: 41px
@@ -1377,7 +1381,7 @@ html {
   font-weight: 500;
   text-transform: uppercase;
   padding: 0 40px;
-  background-color: rgba(255,255,255,.1);
+  background-color: rgba(255, 255, 255, .1);
   border-bottom-right-radius: 10px;
   border-top-left-radius: 10px;
   height: 40px;
@@ -1409,6 +1413,7 @@ html {
   background-color: rgba(255, 255, 255, .1);
   content: '';
 }
+
 .slider_holder {
   position: relative;
 }
@@ -1428,7 +1433,7 @@ html {
   border: double 4px transparent;
   background-image: linear-gradient(#161a25, #161a25),
     linear-gradient(137.48deg,
-    rgba(112, 100, 233, 1) 10%,
+      rgba(112, 100, 233, 1) 10%,
       #14376b 45%,
       #000000 67%,
       #161a25 87%);
@@ -1604,4 +1609,8 @@ html {
 
 .swiper-slide .item {
   height: 100% !important;
+}
+
+.lazy.loaded {
+  background-color: transparent;
 }
diff --git a/layouts/blog/index.html b/layouts/blog/index.html
@@ -1,76 +1,67 @@
 {{ define "title" }}{{ .Page.Title }}{{ end }}
 {{ define "main" }}
-  <section
-    class="container mx-auto px-4 py-8 pt-[8rem] md:pt-[10rem] relative z-20 flex-grow pb-20 flex flex-col min-h-full">
-    {{ $latestPost := index (.Pages.ByDate.Reverse) 0 }}
-    <a
-      href="{{ $latestPost.Permalink }}"
-      class="relative w-full min-h-[300px] h-auto rounded-xl block fill-neutral-content">
-      <div
-        class="absolute inset-0 bg-cover bg-top bg-no-repeat rounded-xl"
-        style="background-image: url('{{ $latestPost.Params.image | absURL }}');"></div>
-      <div class="absolute inset-0 bg-[#000] bg-opacity-40 rounded-xl"></div>
-      <div class="relative z-10 md:p-10 p-5">
-        <div class="mt-20 block"></div>
-        <div class="mt-3 block">
-          <h1
-            class="rounded-xl inline-block text-neutral-50 font-bold text-3xl">
-            {{ $latestPost.Title }}
-          </h1>
+<section
+  class="container mx-auto px-4 py-8 pt-[8rem] md:pt-[10rem] relative z-20 flex-grow pb-20 flex flex-col min-h-full">
+  {{ $latestPost := index (.Pages.ByDate.Reverse) 0 }}
+  <a href="{{ $latestPost.Permalink }}"
+    class="relative w-full min-h-[300px] h-auto rounded-xl block fill-neutral-content">
+    <div class="absolute inset-0 bg-cover bg-top bg-no-repeat rounded-xl"
+      style="background-image: url('{{ $latestPost.Params.image | absURL }}');"></div>
+    <div class="absolute inset-0 bg-[#000] bg-opacity-40 rounded-xl"></div>
+    <div class="relative z-10 md:p-10 p-5">
+      <div class="mt-20 block"></div>
+      <div class="mt-3 block">
+        <h1 class="rounded-xl inline-block text-neutral-50 font-bold text-3xl">
+          {{ $latestPost.Title }}
+        </h1>
+      </div>
+      <div class="mt-3 block">
+        <p class="rounded-xl inline-block text-neutral-50 font-light text-lg">
+          {{ $summary := $latestPost.Params.description | plainify | truncate 300 " ..." }}
+          {{ $summary }}
+        </p>
+      </div>
+      <div class="mt-5 flex">
+        <img src="/images/author.svg" alt="{{ .Title }}" />
+        <span class="font-bold text ml-3 mt-[7px] text-neutral-50">{{ $latestPost.Params.author }}</span>
+        <span class="font-medium text-sm ml-3 mt-[9px] text-neutral-50">{{ $latestPost.Date.Format "January 2, 2006"
+          }}</span>
+      </div>
+    </div>
+  </a>
+  <div class="mt-10">
+    <h1 class="text-neutral-50 font-bold text-xl">Latest Posts</h1>
+    <div class="mt-5 grid grid-flow-row grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-4">
+      {{ range .Pages.ByDate.Reverse }}
+      <div class="bg-[#242535] p-5 rounded-xl">
+        <div class="block relative overflow-hidden group">
+          <a href="{{ .Permalink }}">
+            <img data-src="{{ .Params.image }}"
+              class="w-full object-cover rounded-xl h-56 lazy" />
+
+            <div
+              class="absolute rounded-xl transition-all delay-75 inset-0 group-hover:bg-gradient-to-br group-hover:from-[#fff]/40 group-hover:to-transparent">
+            </div>
+          </a>
         </div>
-        <div class="mt-3 block">
-          <p class="rounded-xl inline-block text-neutral-50 font-light text-lg">
-            {{ $summary := $latestPost.Params.description  | plainify | truncate 300 " ..." }}
-            {{ $summary }}
-          </p>
+        <div class="block mt-5">
+          <a href="{{ .Permalink }}">
+            <h1 class="text-neutral-50 font-bold text-xl hover:text-[#7064e9]">
+              {{ .Title }}
+            </h1>
+          </a>
+          {{ $summary := .Params.description | plainify | truncate 150 " ..." }}
+          <p class="text-sm mt-2">{{ $summary }}</p>
         </div>
-        <div class="mt-5 flex">
-          <img src="/images/author.svg" alt="{{ .Title }}" />
-          <span class="font-bold text ml-3 mt-[7px] text-neutral-50"
-            >{{ $latestPost.Params.author }}</span
-          >
-          <span class="font-medium text-sm ml-3 mt-[9px] text-neutral-50"
-            >{{ $latestPost.Date.Format "January 2, 2006" }}</span
-          >
+        <div class="block mt-8">
+          <h1 class="text-[#97989F] font-medium text-sm">
+            {{ .Date.Format "January 2, 2006" }}
+          </h1>
         </div>
       </div>
-    </a>
-    <div class="mt-10">
-      <h1 class="text-neutral-50 font-bold text-xl">Latest Posts</h1>
-      <div
-        class="mt-5 grid grid-flow-row grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-4">
-        {{ range .Pages.ByDate.Reverse }}
-          <div class="bg-[#242535] p-5 rounded-xl">
-            <div class="block relative overflow-hidden group">
-              <a href="{{ .Permalink }}">
-                <img
-                  src="{{ .Params.image }}"
-                  alt="{{ .Title }}"
-                  class="w-full object-cover rounded-xl h-56" />
-
-                <div
-                  class="absolute rounded-xl transition-all delay-75 inset-0 group-hover:bg-gradient-to-br group-hover:from-[#fff]/40 group-hover:to-transparent"></div>
-              </a>
-            </div>
-            <div class="block mt-5">
-              <a href="{{ .Permalink }}">
-                <h1
-                  class="text-neutral-50 font-bold text-xl hover:text-[#7064e9]">
-                  {{ .Title }}
-                </h1>
-              </a>
-              {{ $summary := .Params.description | plainify | truncate 150 " ..." }}    
-              <p class="text-sm mt-2">{{ $summary }}</p>
-            </div>
-            <div class="block mt-8">
-              <h1 class="text-[#97989F] font-medium text-sm">
-                {{ .Date.Format "January 2, 2006" }}
-              </h1>
-            </div>
-          </div>
-        {{ end }}
+      {{ end }}
 
-      </div>
     </div>
-  </section>
-{{ end }}
+  </div>
+</section>
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -428,8 +428,8 @@ <h3 class="fn__gradient_title text-2xl"><span class="prefix"></span><span data-f
                   <div class="container mx-auto">
                     <div
                       class="w-full p-10 bg-[#14161D] rounded-2xl shadow-xl shadow-[#0B0B0F] flex flex-col md:flex-row items-start md:items-center gap-3">
-                      <img src="{{ .Params.image }}" alt="{{ .Title }}"
-                        class="w-full md:w-1/4 h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0">
+                      <img data-src="{{ .Params.image }}"
+                        class="lazy w-full md:w-1/4 h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0">
                       <div class="flex-1">
                         <h1 class="text-2xl font-bold text-neutral-50">
                           {{ .Title }}

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -4,7 +4,15 @@
 <script src="{{ .RelPermalink }}"></script>
 {{ end }}
 
-
+<script src="/js/lazyload.min.js"></script>
+<script>
+  var lazyLoadInstance = new LazyLoad({
+    elements_selector: ".lazy",
+    callback_loaded: (el) => {
+      el.classList.add("loaded");
+    }
+  });
+</script>
 <script src="/js/aos.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function () {

diff --git a/layouts/partials/single-scripts.html b/layouts/partials/single-scripts.html
@@ -1,9 +1,10 @@
+ss
 <script src="/js/jquery.min.js"></script>
 {{ with resources.Get "js/main.js" | js.Build (dict "minify" true) | fingerprint }}
-  <script src="{{ .RelPermalink }}"></script>
+<script src="{{ .RelPermalink }}"></script>
 {{ end }}
 
-
+<script src="/js/lazyload.min.js"></script>
 <script>
   $(document).ready(function () {
     $(".prose h2, .prose h3, .prose h4, .prose h5, .prose h6").each(
@@ -98,38 +99,33 @@
 {{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
 {{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
 {{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
-<link
-  type="text/css"
-  rel="stylesheet"
-  href="{{ $katexCSS.RelPermalink }}"
-  integrity="{{ $katexCSS.Data.Integrity }}" />
-<script
-  defer
-  src="{{ $katexJS.RelPermalink }}"
-  integrity="{{ $katexJS.Data.Integrity }}"></script>
-<script
-  defer
-  src="{{ $katexAutoRenderJS.RelPermalink }}"
-  integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
-<script
-  defer
-  src="{{ $mhchemJS.RelPermalink }}"
-  integrity="{{ $mhchemJS.Data.Integrity }}"></script>
+<link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
+<script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
+<script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
+<script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
 {{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
 {{- range $katexFonts -}}
-  {{ .Publish }}
+{{ .Publish }}
 {{- end -}}
-<script>
+<s>
   // TODO: make render options configurable
   document.addEventListener("DOMContentLoaded", function () {
-    renderMathInElement(document.body, {
-      delimiters: [
-        { left: "$$", right: "$$", display: true },
-        { left: "$", right: "$", display: false },
-        { left: "\\(", right: "\\)", display: false },
-        { left: "\\[", right: "\\]", display: true },
-      ],
-      throwOnError: false,
-    });
+  renderMathInElement(document.body, {
+  delimiters: [
+  { left: "$$", right: "$$", display: true },
+  { left: "$", right: "$", display: false },
+  { left: "\\(", right: "\\)", display: false },
+  { left: "\\[", right: "\\]", display: true },
+  ],
+  throwOnError: false,
   });
-</script>
+  });
+  </script>
+  <script>
+    var lazyLoadInstance = new LazyLoad({
+      elements_selector: ".lazy",
+      callback_loaded: (el) => {
+        el.classList.add("loaded");
+      }
+    });
+  </script>