fixed issue #17

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
@@ -44,10 +44,10 @@
     "@tailwindcss/typography": "^0.5.10",
     "@types/marked": "^5.0.2",
     "@types/node": "20.8.7",
-    "@types/react": "18.2.29",
+    "@types/react": "18.2.31",
     "@types/react-dom": "18.2.14",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.12.0",

src/layouts/components/Logo.astro

@@ -33,8 +33,6 @@ const { theme_switcher }: { theme_switcher: boolean } = config.settings;
           width={logo_width.replace("px", "") * 2}
           height={logo_height.replace("px", "") * 2}
           alt={title}
-          fit={"contain"}
-          background={"rgba(0,0,0,0)"}
           style={{
             height: logo_height.replace("px", "") + "px",
             width: logo_width.replace("px", "") + "px",
@@ -48,8 +46,6 @@ const { theme_switcher }: { theme_switcher: boolean } = config.settings;
             width={logo_width.replace("px", "") * 2}
             height={logo_height.replace("px", "") * 2}
             alt={title}
-            fit={"contain"}
-            background={"rgba(0,0,0,0)"}
             style={{
               height: logo_height.replace("px", "") + "px",
               width: logo_width.replace("px", "") + "px",

src/layouts/partials/Testimonial.astro

@@ -85,28 +85,31 @@ const { testimonial } = Astro.props;
   import "swiper/css/pagination";
   import { Autoplay, Pagination } from "swiper/modules";
 
-  new Swiper(".testimonial-slider", {
-    modules: [Pagination, Autoplay],
-    spaceBetween: 24,
-    loop: true,
-    loopedSlides: 2,
-    centeredSlides: true,
-    autoplay: {
-      delay: 2500,
-      disableOnInteraction: false,
-    },
-    pagination: {
-      el: ".testimonial-slider-pagination",
-      type: "bullets",
-      clickable: true,
-    },
-    breakpoints: {
-      768: {
-        slidesPerView: 2,
+  // astro:page-load event is fired when the page is loaded
+  document.addEventListener("astro:page-load", () => {
+    new Swiper(".testimonial-slider", {
+      modules: [Pagination, Autoplay],
+      spaceBetween: 24,
+      loop: true,
+      loopedSlides: 2,
+      centeredSlides: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
       },
-      992: {
-        slidesPerView: 3,
+      pagination: {
+        el: ".testimonial-slider-pagination",
+        type: "bullets",
+        clickable: true,
       },
-    },
+      breakpoints: {
+        768: {
+          slidesPerView: 2,
+        },
+        992: {
+          slidesPerView: 3,
+        },
+      },
+    });
   });
 </script>

src/pages/index.astro

@@ -71,8 +71,6 @@ const { banner, features }: Homepage = homepage.data;
                 src={feature.image}
                 height={480}
                 width={520}
-                fit="contain"
-                background="rgba(0,0,0,0)"
                 alt={feature.title}
                 format="webp"
               />

src/styles/components.scss

@@ -75,11 +75,13 @@
 }
 
 // swiper pagination
-.swiper-pagination-bullet {
-  @apply h-2.5 w-2.5 bg-theme-light opacity-100 dark:bg-darkmode-theme-light;
+.testimonial-slider-pagination {
+  .swiper-pagination-bullet {
+    @apply h-2.5 w-2.5 bg-theme-light opacity-100 dark:bg-darkmode-theme-light;
 
-  &-active {
-    @apply h-4 w-4 bg-primary dark:bg-darkmode-primary;
+    &-active {
+      @apply h-4 w-4 bg-primary dark:bg-darkmode-primary;
+    }
   }
 }