fix: Lab Cards translations

src/components/LabCard.astro

@@ -2,21 +2,49 @@
 import MiniCardLinkWrapper from "./MiniCardLinkWrapper";
 import LabsAccordionWrapper from "./LabsAccordionWrapper";
 import { getCollection } from "astro:content";
+import { LANGUAGES } from "@config";
 
 interface Props {
   names: string[];
   name: string;
+  hide?: string[];
 }
 
-const { names = [], name } = Astro.props;
+const { names = [], name = "", hide = [] } = Astro.props;
+
+const localeFromUrl =
+  Astro?.url?.pathname.split("/").filter(Boolean)[0] || LANGUAGES[0].locale;
 
 const combinedNames = [...names, name].filter(Boolean);
 
 const labs = await getCollection("labs", (lab) =>
-  combinedNames.includes(lab.id.split("/").at(-1))
+  combinedNames.map((name) => localeFromUrl + "/" + name).includes(lab.id)
 );
 
 const accordionClasses = "fc-bg-grey-100 !fc-border-b-0";
+
+const captions = {
+  en: {
+    mapImageAlt: "Location of ",
+    logoAlt: "Logo of ",
+    aboutTitle: "About this place",
+    hoursTitle: "Opening hours",
+    directionsTitle: "Directions",
+    feesTitle: "Fees",
+    machinesTitle: "Machines",
+  },
+  de: {
+    mapImageAlt: "Standort von ",
+    logoAlt: "Logo von ",
+    aboutTitle: "Über diesen Ort",
+    hoursTitle: "Öffnungszeiten",
+    directionsTitle: "Anfahrt",
+    feesTitle: "Preise & Gebühren",
+    machinesTitle: "Maschinen & Geräte",
+  },
+};
+
+const translatedCaptions = captions[localeFromUrl];
 ---
 
 <div class="fc-flex fc-flex-col fc-gap-y-6">
@@ -32,41 +60,50 @@ const accordionClasses = "fc-bg-grey-100 !fc-border-b-0";
             title: tag,
           }))}
           image={{
-            alt: `Standort von ${lab.name}`,
+            alt: translatedCaptions.mapImageAlt + lab.name,
             src: `https://api.mapbox.com/styles/v1/mapbox/light-v11/static/pin-s+ee2f45(${lab.lng},${lab.lat})/${lab.lng},${lab.lat},13,0/180x180@2x?access_token=${import.meta.env.PUBLIC_MAPBOX_TOKEN}&logo=false`,
           }}
-          rightImage={{ src: lab.logo, alt: `Logo von ${lab.name}` }}
+          rightImage={{ src: lab.logo, alt: translatedCaptions.logoAlt + lab.name }}
           className={"md:fc-max-w-none not-prose"}
         />
-        {lab.hours && (
+        {lab.description && !hide.includes("description") && (
+          <LabsAccordionWrapper
+            className={accordionClasses}
+            title={translatedCaptions.aboutTitle}
+            icon="LicenseThirdPartyDraft"
+            contentHtml={lab.description}
+            open={true}
+          />
+        )}
+        {lab.hours && !hide.includes("hours") && (
           <LabsAccordionWrapper
             className={accordionClasses}
-            title="Öffnungszeiten"
+            title={translatedCaptions.hoursTitle}
             icon="Time"
             contentHtml={lab.hours}
           />
         )}
-        {lab.directions && (
+        {lab.directions && !hide.includes("directions") && (
           <LabsAccordionWrapper
             className={accordionClasses}
-            title="Anfahrt"
+            title={translatedCaptions.directionsTitle}
             icon="Milestone"
             contentHtml={lab.directions}
           />
         )}
-        {lab.fees && (
+        {lab.fees && !hide.includes("fees") && (
           <LabsAccordionWrapper
             className={accordionClasses}
-            title="Preise & Gebühren"
+            title={translatedCaptions.feesTitle}
             icon="CurrencyEuro"
             contentHtml={lab.fees}
           />
         )}
-        {lab.machines && (
+        {lab.machines && !hide.includes("machines") && (
           <LabsAccordionWrapper
             className={accordionClasses}
             icon="Settings"
-            title="Maschinen & Geräte"
+            title={translatedCaptions.machinesTitle}
             contentHtml={lab.machines}
           />
         )}

src/components/LabsAccordionWrapper.tsx

@@ -9,6 +9,7 @@ type LabsAccordionWrapperProps = {
   icon?: string;
   className?: string;
   contentHtml?: string;
+  open?: boolean;
 };
 
 const LabsAccordionWrapper: React.FC<LabsAccordionWrapperProps> = ({
@@ -16,6 +17,7 @@ const LabsAccordionWrapper: React.FC<LabsAccordionWrapperProps> = ({
   id,
   icon,
   contentHtml,
+  open,
   ...restProps
 }) => {
   useEffect(() => {
@@ -35,6 +37,7 @@ const LabsAccordionWrapper: React.FC<LabsAccordionWrapperProps> = ({
     <Accordion
       title={title}
       id={id}
+      open={open}
       {...restProps}
       {...(icon ? { icon: <Icon name={icon} className="w-6 h-6" /> } : {})}
     >

src/content/labs/en/musterhausen.yaml

+name: Beispielort Musterhausen
+description: "This makerspace is really good. It has been around forever and is one of the best spaces in the whole town."
+website: https://www.fabcity.hamburg
+address: Mauerweg 96, 22767 Hamburg
+lat: 53.5498805
+lng: 9.9439878
+headerImage: /images/network/map/example_map.jpg
+logo: https://blog.attraktor.org/wp-content/uploads/2013/08/attraktor_logo.png
+category: Fab Lab
+relationStatus: Member
+tags:
+  - 3D-Printer
+  - Lasercutter
+  - CNC-Router
+  - Wood
+socialMedia:
+- type: instagram
+  href: https://www.instagram.com/
+- type: facebook
+  href: https://www.facebook.com/
+- type: x
+  href: https://twitter.com/
+hours: "<h3>Für Mitglieder</h3><p>Mitglieder erhalten eine digitale Schließberechtigung und können dann jederzeit die Räume betreteten</p><hr/><h3>Für Gäste und Besucher</h3><ul><li>Montag: 14 bis 17 Uhr</li><li>Dienstag: 14 bis 18 Uhr</li><li>Mittwoch: geschlossen</li><li>Donnerstag: ab 18 Uhr bis Open End</li></ul>"
+directions: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dictum dui. In euismod bibendum risus. Nulla tincidunt ipsum in purus bibendum, nec tincidunt libero pretium. Phasellus malesuada est massa, vel venenatis risus rhoncus non. Fusce in interdum mauris, id eleifend leo. Proin eros est, fringilla vitae congue in, facilisis quis tortor. Maecenas eu est quis elit aliquam fringilla ut quis erat. Maecenas orci diam, vehicula eget finibus eu, fermentum nec orci. Fusce fermentum mattis dolor a tincidunt. Etiam pellentesque arcu interdum magna hendrerit euismod."
+fees: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dictum dui. In euismod bibendum risus. Nulla tincidunt ipsum in purus bibendum, nec tincidunt libero pretium. Phasellus malesuada est massa, vel venenatis risus rhoncus non. Fusce in interdum mauris, id eleifend leo. Proin eros est, fringilla vitae congue in, facilisis quis tortor. Maecenas eu est quis elit aliquam fringilla ut quis erat. Maecenas orci diam, vehicula eget finibus eu, fermentum nec orci. Fusce fermentum mattis dolor a tincidunt. Etiam pellentesque arcu interdum magna hendrerit euismod."
+machines: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dictum dui. In euismod bibendum risus. Nulla tincidunt ipsum in purus bibendum, nec tincidunt libero pretium. Phasellus malesuada est massa, vel venenatis risus rhoncus non. Fusce in interdum mauris, id eleifend leo. Proin eros est, fringilla vitae congue in, facilisis quis tortor. Maecenas eu est quis elit aliquam fringilla ut quis erat. Maecenas orci diam, vehicula eget finibus eu, fermentum nec orci. Fusce fermentum mattis dolor a tincidunt. Etiam pellentesque arcu interdum magna hendrerit euismod."
\ No newline at end of file

src/pages/en/category1/examples.mdx

@@ -69,4 +69,10 @@ To display team members, contact persons or any other people, there is a custom
 
 <Carousel title="News" fluidToTheRight={true} type="article" ascending limit={4}/>
 
-<Carousel title="Events" fluidToTheRight={true} type="event" limit={2}/>
\ No newline at end of file
+<Carousel title="Events" fluidToTheRight={true} type="event" limit={2}/>
+
+## Lab Cards
+```
+<LabCard name="musterhausen" />
+```
+<LabCard name="musterhausen" />