Merge branch 'feat/lab-cards' into 'main'

feat: add lab cards

See merge request !56

astro.config.mjs

@@ -36,6 +36,7 @@ export default defineConfig({
             "CardsGrid",
             "Tabs",
             "Tab",
+            "LabCard",
           ],
           "@fchh/fcos-suite-ui": [
             "Accordion",

package-lock.json

@@ -13,7 +13,7 @@
         "@astrojs/tailwind": "^5.1.0",
         "@carbon/icons-react": "^11.39.0",
         "@fchh/fcos-suite-map": "^0.1.4",
-        "@fchh/fcos-suite-ui": "^0.2.18",
+        "@fchh/fcos-suite-ui": "^0.2.24",
         "@types/react": "^18.2.73",
         "@types/react-dom": "^18.2.23",
         "astro": "^4.5.12",
@@ -1354,9 +1354,9 @@
       }
     },
     "node_modules/@fchh/fcos-suite-ui": {
-      "version": "0.2.18",
-      "resolved": "https://registry.npmjs.org/@fchh/fcos-suite-ui/-/fcos-suite-ui-0.2.18.tgz",
-      "integrity": "sha512-fhEqt6aT+EN6M8pHmceRkb/2B+e2/hWpKBrGxhipkntBi2Aw1lsCPaXITNhoKtk+7vBo5qWVK+kpHsnP2HJkvw==",
+      "version": "0.2.24",
+      "resolved": "https://registry.npmjs.org/@fchh/fcos-suite-ui/-/fcos-suite-ui-0.2.24.tgz",
+      "integrity": "sha512-xDtwe+pkfZc3jt97ApIwaqvH3ERDLFPUfS/zoqnjmSa8fswngTVSrntqNTVZKuVJp4yCvAnTSO2+r/v7gdpiiA==",
       "dev": true
     },
     "node_modules/@floating-ui/core": {

package.json

@@ -29,7 +29,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "@carbon/icons-react": "^11.39.0",
     "@fchh/fcos-suite-map": "^0.1.4",
-    "@fchh/fcos-suite-ui": "^0.2.18",
+    "@fchh/fcos-suite-ui": "^0.2.24",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
     "astro": "^4.5.12",

src/components/LabCard.astro

+---
+import MiniCardLinkWrapper from "./MiniCardLinkWrapper";
+import LabsAccordionWrapper from "./LabsAccordionWrapper";
+import { getCollection } from "astro:content";
+
+interface Props {
+  names: string[];
+  name: string;
+}
+
+const { names = [], name } = Astro.props;
+
+const combinedNames = [...names, name].filter(Boolean);
+
+const labs = await getCollection("labs", (lab) =>
+  combinedNames.includes(lab.id.split("/").at(-1))
+);
+
+const accordionClasses = "fc-bg-grey-100 !fc-border-b-0";
+---
+
+<div class="fc-flex fc-flex-col fc-gap-y-6">
+  {
+    labs?.map(({ data: lab }) => (
+      <div class="fc-flex fc-flex-col fc-gap-y-2">
+        <MiniCardLinkWrapper
+          name={lab.name}
+          subtitle={lab.website}
+          socialMedia={lab.socialMedia}
+          tags={lab.tags.map((tag, i) => ({
+            id: lab.name + i,
+            title: tag,
+          }))}
+          image={{
+            alt: `Standort von ${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}` }}
+          className={"md:fc-max-w-none not-prose"}
+        />
+        {lab.hours && (
+          <LabsAccordionWrapper
+            className={accordionClasses}
+            title="Öffnungszeiten"
+            icon="Time"
+            contentHtml={lab.hours}
+          />
+        )}
+        {lab.directions && (
+          <LabsAccordionWrapper
+            className={accordionClasses}
+            title="Anfahrt"
+            icon="Milestone"
+            contentHtml={lab.directions}
+          />
+        )}
+        {lab.fees && (
+          <LabsAccordionWrapper
+            className={accordionClasses}
+            title="Preise & Gebühren"
+            icon="CurrencyEuro"
+            contentHtml={lab.fees}
+          />
+        )}
+        {lab.machines && (
+          <LabsAccordionWrapper
+            className={accordionClasses}
+            icon="Settings"
+            title="Maschinen & Geräte"
+            contentHtml={lab.machines}
+          />
+        )}
+      </div>
+    ))
+  }
+</div>

src/components/LabsAccordionWrapper.tsx

+import React from "react";
+import { Accordion } from "@fchh/fcos-suite-ui";
+import { useEffect } from "react";
+import Icon from "./Icon";
+
+type LabsAccordionWrapperProps = {
+  title: string;
+  id?: string;
+  icon?: string;
+  className?: string;
+  contentHtml?: string;
+};
+
+const LabsAccordionWrapper: React.FC<LabsAccordionWrapperProps> = ({
+  title,
+  id,
+  icon,
+  contentHtml,
+  ...restProps
+}) => {
+  useEffect(() => {
+    const details = document.querySelectorAll(`details#${id}`);
+    details.forEach((targetDetail) => {
+      targetDetail.addEventListener("click", () => {
+        details.forEach((detail) => {
+          if (detail !== targetDetail) {
+            detail.removeAttribute("open");
+          }
+        });
+      });
+    });
+  }, []);
+  const [leftColumn, rightColumn] = contentHtml.split("<hr/>");
+  return (
+    <Accordion
+      title={title}
+      id={id}
+      {...restProps}
+      {...(icon ? { icon: <Icon name={icon} className="w-6 h-6" /> } : {})}
+    >
+      <div
+        className={`${rightColumn ? "fc-grid fc-grid-cols-2 fc-gap-x-2" : ""}`}
+      >
+        <div dangerouslySetInnerHTML={{ __html: leftColumn }} />
+        {rightColumn && (
+          <div dangerouslySetInnerHTML={{ __html: rightColumn }} />
+        )}
+      </div>
+    </Accordion>
+  );
+};
+
+export default LabsAccordionWrapper;

src/components/MiniCardLinkWrapper.tsx

+import React from "react";
+import { MiniCard, SocialMediaIcon } from "@fchh/fcos-suite-ui";
+import type { SocialNetworks } from "@fchh/fcos-suite-ui";
+
+type Props = {
+  name: any;
+  subtitle: any;
+  socialMedia: Array<{ href: string; type: string }>;
+  className?: string;
+  image?: { alt: string; src: string };
+};
+
+const MiniCardLinkWrapper: React.FC<Props> = ({
+  name,
+  subtitle,
+  socialMedia,
+  image,
+  ...rest
+}) => {
+  const subtitleEl = (
+    <>
+      <a href={subtitle} target="_blank" rel="noreferrer">
+        {subtitle?.replace(/^https?:\/\//g, "")}
+      </a>
+      <div className="flex gap-2 text-black items-center">
+        {socialMedia?.map((s) => (
+          <SocialMediaIcon
+            key={name + s.type}
+            href={s.href}
+            className="w-4 h-4 sm:w-5 sm:h-5"
+            type={s.type as SocialNetworks}
+          />
+        ))}
+      </div>
+    </>
+  );
+  return <MiniCard subtitle={subtitleEl} name={name} image={image} {...rest} />;
+};
+
+export default MiniCardLinkWrapper;

src/components/index.tsx

@@ -22,6 +22,7 @@ import GridCardIconWrapper from "@components/GridCardIconWrapper";
 import CardsGrid from "@components/CardsGrid.astro";
 import Tabs from "@components/Tabs.astro";
 import Tab from "@components/Tab.astro";
+import LabCard from "@components/LabCard.astro";
 
 export {
   Accordion,
@@ -47,5 +48,6 @@ export {
   GridCardIconWrapper,
   CardsGrid,
   Tabs,
-  Tab
+  Tab,
+  LabCard
 };

src/content/config.ts

@@ -43,7 +43,7 @@ const toolbarCollection = defineCollection({
     icon: z.string(),
     target: z.string(),
     onlyDesktop: z.boolean().optional(),
-    order: z.number()
+    order: z.number(),
   }),
 });
 
@@ -52,7 +52,28 @@ const footerLogosCollection = defineCollection({
     img: z.string(),
     href: z.string().optional(),
     alt: z.string().optional(),
-    order: z.number().optional()
+    order: z.number().optional(),
+  }),
+});
+
+const labsCollection = defineCollection({
+  type: "data",
+  schema: z.object({
+    socialMedia: z.array(z.object({ type: z.string(), href: z.string() })),
+    name: z.string(),
+    description: z.string(),
+    website: z.string(),
+    lat: z.number(),
+    lng: z.number(),
+    headerImage: z.string(),
+    logo: z.string(),
+    category: z.string(),
+    relationStatus: z.string().optional(),
+    tags: z.array(z.string()),
+    hours: z.string().optional(),
+    directions: z.string().optional(),
+    fees: z.string().optional(),
+    machines: z.string().optional(),
   }),
 });
 
@@ -61,5 +82,6 @@ export const collections = {
   map: mapCollection,
   socials: socialsCollection,
   toolbar: toolbarCollection,
-  footerLogos: footerLogosCollection
+  footerLogos: footerLogosCollection,
+  labs: labsCollection,
 };

src/content/labs/de/musterhausen.yaml

+name: Beispielort Musterhausen
+description: "Dieser Makerspace hat es in sich. Er existiert seit 50 Jahren und ist das Urgestein in der Stadt. Mit 500 Mitgliedern teilt man sich hier eine Werkstatt auf dem neusten Stand der Technik."
+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: Vereinsmitglied
+tags:
+  - 3D-Drucker
+  - Lasercutter
+  - CNC-Fräse
+  - Holz
+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/de/dokumentation/beispiele.mdx

@@ -415,3 +415,9 @@ Hier ein weiteres Beispiel mit einem Repository, das auf GitHub verfügbar ist:
     },
   ]}
 />
+
+## Lab Cards
+```
+<LabCard name="musterhausen" />
+```
+<LabCard name="musterhausen" />