diff --git a/src/components/LabCard.astro b/src/components/LabCard.astro
index 537d8007210fc4ad64bfbbae7168a0e0f15de6c5..b0d92f8a8771039d1df4dfaf9c7a3a7a8fcef0a5 100644
--- a/src/components/LabCard.astro
+++ b/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}
/>
)}
diff --git a/src/components/LabsAccordionWrapper.tsx b/src/components/LabsAccordionWrapper.tsx
index c4fbade959f0fafb50ab33ca8d7e298022a82314..56980613a2f20495c593850b3feae8e1dc971d6f 100644
--- a/src/components/LabsAccordionWrapper.tsx
+++ b/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" /> } : {})}
>
diff --git a/src/content/labs/en/musterhausen.yaml b/src/content/labs/en/musterhausen.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..d7c1fb9bda44b5eacda1f9fe403ce44655d7f026
--- /dev/null
+++ b/src/content/labs/en/musterhausen.yaml
@@ -0,0 +1,26 @@
+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
diff --git a/src/pages/en/category1/examples.mdx b/src/pages/en/category1/examples.mdx
index 4003f56d952fe5a90aac6a751232d4c6a8b21e31..5f21ce8fc98424856e55d594a67f32c81dee6ab6 100644
--- a/src/pages/en/category1/examples.mdx
+++ b/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" />