Add IDs to all components of the website

This commit is contained in:
itsfinniii
2026-03-26 22:08:04 +01:00
parent 1fd51a6a3f
commit 82c0905c0e
6 changed files with 25 additions and 7 deletions

View File

@@ -9,7 +9,10 @@ interface Props {
const equipment = Astro.props.equipment;
---
<div class="flex lg:flex-row flex-col lg:justify-center justify-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center">
<div
id={`equipment-${equipment.id}`}
class="flex lg:flex-row flex-col lg:justify-center justify-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center"
>
<div class="flex flex-col gap-1.5">
<h2 class="text-5xl font-bold">{equipment.title}</h2>
{ equipment.text !== null && (

View File

@@ -9,7 +9,10 @@ interface Props {
const faq = Astro.props.faq;
---
<div class="flex lg:flex-row flex-col justify-between py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
<div
id={`faq-${faq.id}`}
class="flex lg:flex-row flex-col justify-between py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
<div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
<h2 class="text-5xl font-bold">{faq.title}</h2>
{ faq.text !== null && (

View File

@@ -26,7 +26,10 @@ const lastBlogs = await getLastBlogs(blogs.amount);
const size = calculateSizeClasses(blogs.amount, lastBlogs.length);
---
<div class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
<div
id={`lastblogs-${blogs.id}`}
class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
<div class="flex flex-row justify-between items-center w-full">
<h2 class="text-4xl font-bold">{blogs.title}</h2>
<div>

View File

@@ -19,7 +19,10 @@ const averageStars = Math.round((totalStars / totalReviews) * 10) / 10;
const reviewsToShow = reviews.reviews.slice(0, 5);
---
<div class="flex lg:flex-row flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
<div
id={`reviews-${reviews.id}`}
class="flex lg:flex-row flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
<div class="flex flex-col lg:gap-5 gap-2.25 lg:min-w-[32.5%]">
<div class="flex flex-col">
<h2 class="text-3xl font-bold">{reviews.title}</h2>

View File

@@ -11,8 +11,11 @@ interface Props {
const upcomingEvents = Astro.props.upcomingEvents;
---
<div id={`upcomingevents-${upcomingEvents.id}`} class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18">
<h1 class="text-5xl font-bold">Upcoming Events</h1>
<div
id={`upcomingevents-${upcomingEvents.id}`}
class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18"
>
<h1 class="text-5xl font-bold">{upcomingEvents.title}</h1>
<div class="flex flex-col items-start gap-7 w-full">
{ upcomingEvents.events.map((event) => (

View File

@@ -8,7 +8,10 @@ interface Props {
const wallOfText = Astro.props.wallOfText;
---
<div id={`walloftext-${wallOfText.id}`} class="flex flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
<div
id={`walloftext-${wallOfText.id}`}
class="flex flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
<h2 class="text-5xl font-bold">{wallOfText.title}</h2>
<div set:html={markdownToHtml(wallOfText.text)}></div>
</div>