src/pages/de/network/map/[...poi].astro

+---
+import DataHeaderWrapper from "@components/DataHeaderWrapper.astro";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import FabCityMap from "@fchh/fcos-suite-map";
+import { getBaseUrl, buildPageTree } from "@utils";
+import { LANGUAGES } from "@config";
+import type { IPage } from "@interfaces/IPage";
+import "@fchh/fcos-suite-map/dist/style.css";
+
+interface Poi {
+  name: string;
+  description: string;
+  website: string;
+  lat: number;
+  lng: number;
+  image: string;
+  category: string;
+  relationStatus: string;
+  tags: Array<{ displayName: string; color: string }>;
+}
+
+const baseUrl = getBaseUrl(true);
+const localeFromUrl =
+  Astro?.url?.pathname.replace(baseUrl, "").split("/").filter(Boolean)[0] ||
+  LANGUAGES[0].locale;
+
+const rawContent = await Astro.glob<IPage>("../../../**/*.mdx");
+
+const menuItems = buildPageTree(rawContent, baseUrl, localeFromUrl);
+const rawPoiData = await Astro.glob<Poi>("./*.mdx");
+const poiData = rawPoiData
+  .filter(
+    (poi) => !(poi.file.endsWith("index.mdx") || poi.file.endsWith("index.md"))
+  )
+  .map((poi) => ({
+    ...poi.frontmatter,
+    id: poi.url?.split("/").at(-1),
+  }));
+
+export async function getStaticPaths() {
+  const rawPoiData = await Astro.glob<Poi>("./*.mdx");
+  const poiData = rawPoiData
+    .filter(
+      (poi) =>
+        !(poi.file.endsWith("index.mdx") || poi.file.endsWith("index.md"))
+    )
+    .map((poi) => ({
+      ...poi.frontmatter,
+      id: poi.url?.split("/").at(-1),
+    }));
+
+  const staticPaths = poiData.map((poi) => ({
+    params: { poi: "poi/" + poi.id },
+  }));
+  return [...staticPaths, { params: { poi: undefined } }];
+}
+
+const { poi } = Astro.params;
+
+const currentPoi = poiData.find((singlePoi) => singlePoi.id === poi?.split("/").at(-1));
+---
+
+<BaseLayout
+  title={currentPoi?.name || "Map"}
+  hideFooter
+  bodyClasses="fc-h-full fc-flex fc-flex-col"
+>
+  <DataHeaderWrapper
+    menuItems={menuItems}
+    compact
+    light
+    disableAnimation
+    backgroundImageClasses="fc-bg-[url('/images/illustrations/map-pattern.svg')] fc-bg-cover fc-bg-no-repeat"
+    reactClasses="!fc-absolute lg:!fc-static"
+    itemsAlwaysLight={true}
+  />
+  <main class="fc-h-64 fc-basis-full">
+    <FabCityMap
+      baseUrl={`${baseUrl != "/" ? baseUrl : ""}/de/network/map/`}
+      data={poiData}
+      mapboxToken={import.meta.env.PUBLIC_MAPBOX_TOKEN}
+      client:only="react"
+    />
+  </main>
+</BaseLayout>

src/pages/de/network/map/index.mdx

----
-layout: "@layouts/MapLayout.astro"
-title: Fab Map
-order: 3
-hideChildren: true
----