107 lines
2.9 KiB
Plaintext
107 lines
2.9 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
|
|
import { slugify } from "@lib/utils";
|
|
|
|
import SectionTitle from "@components/SectionTitle.astro";
|
|
import MainLayout from "@layouts/MainLayout.astro";
|
|
|
|
import Token from "@components/Token.astro";
|
|
import ProjectCard from "@components/ProjectCard.astro";
|
|
|
|
const projects = (await getCollection("projects")).sort(
|
|
(a, b) => b.data.date.valueOf() - a.data.date.valueOf()
|
|
);
|
|
|
|
const types = [...new Set(projects.map((project) => project.data.type))];
|
|
---
|
|
|
|
<MainLayout title="Projects">
|
|
<div class="w-full">
|
|
<section id="projects" class="bg-white dark:bg-gray-950">
|
|
<div class="mx-auto max-w-4xl px-8 py-16 text-center">
|
|
<SectionTitle Tag="h1">Recent Projects</SectionTitle>
|
|
<div id="filter-tokens" class="my-8 space-y-2 space-x-2">
|
|
<Token
|
|
as="button"
|
|
aria-pressed="true"
|
|
class="filter-token !text-primary ring-primary bg-white ring-2 hover:cursor-pointer"
|
|
data-type="all">All</Token
|
|
>
|
|
{
|
|
types.map((type) => (
|
|
<Token
|
|
as="button"
|
|
aria-pressed="false"
|
|
class="filter-token hover:cursor-pointer"
|
|
data-type={slugify(type)}
|
|
>
|
|
{type}
|
|
</Token>
|
|
))
|
|
}
|
|
</div>
|
|
<div class="space-y-16 md:space-y-8">
|
|
{
|
|
projects.map((project, index) => {
|
|
return (
|
|
<ProjectCard
|
|
project={project}
|
|
textOn={index % 2 === 0 ? "left" : "right"}
|
|
data-type={slugify(project.data.type)}
|
|
class="project"
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</MainLayout>
|
|
|
|
<script>
|
|
function setUpFilters() {
|
|
const tokensContainer = document.querySelector("#filter-tokens");
|
|
|
|
if (!tokensContainer) return;
|
|
|
|
const tokens =
|
|
tokensContainer.querySelectorAll<HTMLElement>(".filter-token");
|
|
const projects = document.querySelectorAll<HTMLElement>(".project");
|
|
|
|
tokensContainer.addEventListener("click", (e) => {
|
|
const token = (e.target as Element).closest<HTMLElement>(".filter-token");
|
|
if (!token) return;
|
|
|
|
tokens.forEach((t) => {
|
|
t.classList.remove(
|
|
"bg-white",
|
|
"!text-primary",
|
|
"ring-primary",
|
|
"ring-2"
|
|
);
|
|
t.setAttribute("aria-pressed", "false");
|
|
});
|
|
|
|
token.classList.add(
|
|
"bg-white",
|
|
"!text-primary",
|
|
"ring-primary",
|
|
"ring-2"
|
|
);
|
|
token.setAttribute("aria-pressed", "true");
|
|
|
|
const type = token.dataset.type;
|
|
|
|
projects.forEach((project) => {
|
|
const match = type === "all" || project.dataset.type === type;
|
|
project.classList.toggle("hidden", !match);
|
|
});
|
|
});
|
|
}
|
|
|
|
setUpFilters();
|
|
document.addEventListener("astro:page-load", setUpFilters);
|
|
</script>
|