troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: replace carousel using alpine with javascript

Browse source
This commit is contained in:
Troy 2025-02-15 23:08:31 +00:00
parent 74b9460ea1
commit 700095d8af
Signed by: troy
GPG key ID: DFC06C02ED3B4711
9 changed files with 165 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/pages/index.astro
View file

@ -3,24 +3,21 @@ import Layout from "@layouts/Layout.astro";
import { HOME } from "@consts";
import { getCollection } from "astro:content";
import Hero from "@components/Hero.astro";
import Carousel from "@components/Carousel.astro";
import Slideshow from "@components/Slideshow.astro";
const allProjects = await getCollection("projects");
const projects = allProjects
.filter((project) => !project.data.draft && project.data.featured)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
const projectsJSON = JSON.stringify(projects);
---
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<div class="block w-full">
<Hero />
<section
id="featured-projects"
class="animate-reveal opacity-0 [animation-delay:0.1s]"
>
<Carousel data={projectsJSON} />
</section>
</div>
<Hero />
<section
id="featured-projects"
class="animate-reveal opacity-0 [animation-delay:0.1s]"
>
<Slideshow images={projects} />
</section>
</Layout>