SteamWar/Website
10
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Add Xray Preview

Browse Source
This commit is contained in:
Chaoscaot
2024-03-24 21:34:02 +01:00
parent 7cf76bc7c7
commit f062f3eaf9
7 changed files with 68 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/publics/[schem].astro
View File

@@ -2,7 +2,7 @@
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 PublicPreview from "@components/publics/PublicPreview.svelte";
import { Image } from "astro:assets";
export const getStaticPaths = createGetStaticPaths(async () => {
@@ -22,11 +22,11 @@ const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
---
<PageLayout title={schem.data.name}>
<h1 class="text-5xl font-bold w-fit" 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>
<h1 class="text-5xl font-bold w-fit" transition:name={schem.data.id + "-title"}>{schem.data.name}</h1>
<PublicPreview client:idle file={schem.id} imageHeight={schem.data.image.height}>
<Image transition:name={schem.data.id + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
</PublicPreview>
<p transition:name={schem.data.name + "-desc"}>{schem.data.description}</p>
<p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>
<p>
Erbauer: {schem.data.creator.join(", ")}
</p>

10
src/pages/publics/index.astro
View File

@@ -4,6 +4,7 @@ import {getCollection} from "astro:content";
import {l} from "../../util/util";
import { Image } from "astro:assets";
import Card from "@components/Card.svelte";
import XRayPreview from "@components/publics/XRayPreview.svelte";
const publics = await getCollection("publics");
---
@@ -14,10 +15,13 @@ const publics = await getCollection("publics");
<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"} />
<XRayPreview client:load>
<Image slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
{pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
</XRayPreview>
</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>
<h2 class="font-bold text-5xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
<h3 transition:name={pub.data.id + "-desc"}>{pub.data.description}</h3>
</Card>
</a>
))}