Add IDs to all components of the website
This commit is contained in:
@@ -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 && (
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user