3D Public Preview Initial Test

src/pages/publics/[schem].astro

@@ -0,0 +1,33 @@
+---
+import {createGetStaticPaths} from "astro-i18n";
+import { getCollection, CollectionEntry } from "astro:content";
+import PageLayout from "../../layouts/PageLayout.astro";
+import PublicPreview from "@components/3d/PublicPreview.svelte";
+import { Image } from "astro:assets";
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    const pages = await getCollection("publics");
+
+    return pages.map((entry) => ({
+        props: {
+            schem: entry,
+        },
+        params: {
+            schem: entry.id,
+        },
+    }));
+});
+
+const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
+---
+
+<PageLayout title={schem.data.name}>
+    <h1 class="text-5xl font-bold" transition:name={schem.data.name + "-title"}>{schem.data.name}</h1>
+    <PublicPreview client:idle file={schem.id}>
+        <Image transition:name={schem.data.name + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
+    </PublicPreview>
+    <p transition:name={schem.data.name + "-desc"}>{schem.data.description}</p>
+    <p>
+        Erbauer: {schem.data.creator.join(", ")}
+    </p>
+</PageLayout>

src/pages/publics/index.astro

@@ -0,0 +1,25 @@
+---
+import PageLayout from "../../layouts/PageLayout.astro";
+import {getCollection} from "astro:content";
+import {l} from "../../util/util";
+import { Image } from "astro:assets";
+import Card from "@components/Card.svelte";
+
+const publics = await getCollection("publics");
+---
+
+<PageLayout title="Publics">
+    <div>
+        {publics.map((pub) => (
+            <a href={l("/publics/" + pub.id)}>
+                <Card extraClasses="w-full mx-0">
+                    <div class="flex justify-center">
+                        <Image src={pub.data.image} alt={pub.data.name} transition:name={pub.data.name + "-img"} />
+                    </div>
+                    <h2 class="font-bold text-5xl" transition:name={pub.data.name + "-title"}>{pub.data.name}</h2>
+                    <h3 transition:name={pub.data.name + "-desc"}>{pub.data.description}</h3>
+                </Card>
+            </a>
+        ))}
+    </div>
+</PageLayout>