add: Carousel for homepage

package.json

@@ -19,6 +19,7 @@
     "astro-seo": "^0.8.0",
     "dayjs": "^1.11.10",
     "tailwindcss": "^3.0.24",
+    "tw-elements": "^1.0.0",
     "typescript": "^5.2.2",
     "vanilla-cookieconsent": "^2.9.2"
   },

src/components/About/Members.astro

@@ -2,7 +2,6 @@
 import { Image } from "astro:assets";
 import { getEntry } from "astro:content";
 const members = await getEntry("data", "members");
-console.log(members);
 ---
 
 <section>

src/components/Head/BaseHead.astro

@@ -17,6 +17,7 @@ const {
   <meta charset="utf-8" />
   <Cookies />
   <GoogleAnalytics id="G-PT82VBC5KD" />
+
   <SEO
     title={title}
     description={description}

src/components/Home/Hero.astro

@@ -1,22 +1,122 @@
 ---
+import { getCollection } from "astro:content";
 import Header from "../Header.astro";
 import { Image } from "astro:assets";
 import logoImage from "../../assets/openAMP_combox_dark.svg";
+import FirstItem from "../News/FirstItem.astro";
+import dayjs from "dayjs";
 
 const { data } = Astro.props;
+const blogs = await getCollection("news");
+const blogLists = blogs
+  .sort((a, b) => dayjs(b.data.date).diff(dayjs(a.data.date)))
+  .slice(0, 2);
 ---
 
 <Header>
-  <Image height={300} src={logoImage} alt="openAMP Logo" />
-
-  <p class="leading-normal text-center max-w-xl text-xl mb-4">
-    {data.main_body}
-  </p>
-  <a
-    onclick="
-    window.open('https://github.com/OpenAMP', '_blank')
-    "
-    class="bg-openampred mt-2 p-4 rounded text-md text-center transition ease-in-out hover:bg-red-600 text-white"
-    >View on Github</a
+  <div
+    id="carouselExampleControls"
+    class="relative"
+    data-te-carousel-init
+    data-te-ride="carousel"
   >
+    <!--Carousel items-->
+    <div
+      class="relative w-full overflow-hidden after:clear-both after:block after:content-['']"
+    >
+      <!--First item-->
+      <div
+        class="relative float-left -mr-[100%] mb-3 w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-te-carousel-item
+        data-te-carousel-active
+      >
+        <Image height={300} src={logoImage} alt="openAMP Logo" />
+
+        <p class="leading-normal text-center max-w-xl text-xl mb-4">
+          {data.main_body}
+        </p>
+        <a
+          onclick="
+          window.open('https://github.com/OpenAMP', '_blank')
+          "
+          class="bg-openampred align-middle mt-2 mx-auto p-4 rounded text-md text-center transition ease-in-out hover:bg-red-600 text-white"
+          >View on Github</a
+        >
+      </div>
+      <!--Second item-->
+      <div
+        class="relative text-black float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-te-carousel-item
+      >
+        <FirstItem {...blogLists[0]} />
+      </div>
+      <!--Third item-->
+      <div
+        class="relative text-black float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-te-carousel-item
+      >
+        <FirstItem {...blogLists[1]} />
+      </div>
+    </div>
+
+    <!--Carousel controls - prev item-->
+    <button
+      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+      type="button"
+      data-te-target="#carouselExampleControls"
+      data-te-slide="prev"
+    >
+      <span class="inline-block h-8 w-8">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="h-6 w-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 19.5L8.25 12l7.5-7.5"></path>
+        </svg>
+      </span>
+      <span
+        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+        >Previous</span
+      >
+    </button>
+    <!--Carousel controls - next item-->
+    <button
+      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+      type="button"
+      data-te-target="#carouselExampleControls"
+      data-te-slide="next"
+    >
+      <span class="inline-block h-8 w-8">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="h-6 w-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
+        </svg>
+      </span>
+      <span
+        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+        >Next</span
+      >
+    </button>
+  </div>
+  <script>
+    import { Carousel, initTE } from "tw-elements";
+
+    initTE({ Carousel });
+  </script>
 </Header>

src/layouts/MainLayout.astro

@@ -12,4 +12,7 @@ import "../styles/global.scss";
     <slot />
   </main>
   <Footer />
+  <script
+    type="text/javascript"
+    src="../node_modules/tw-elements/dist/js/tw-elements.umd.min.js"></script>
 </body>

src/pages/index.astro

@@ -13,6 +13,7 @@ const { Content } = await render();
   <BaseHead />
   <MainLayout>
     <Hero data={data} />
+
     <section class="text-center decoration-0 prose-xl mb-8">
       <Content />
     </section>

tailwind.config.cjs

@@ -1,7 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 const defaultTheme = require("tailwindcss/defaultTheme");
 module.exports = {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  content: [
+    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
+    "./node_modules/tw-elements/dist/js/**/*.js",
+  ],
   theme: {
     ...defaultTheme,
     extend: {
@@ -22,5 +25,9 @@ module.exports = {
       spacing: "margin, padding",
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [
+    // require("@tailwindcss/typography"),
+
+    require("tw-elements/dist/plugin.cjs"),
+  ],
 };