Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show more of the background images

This commit is contained in:
DrMint 2024-03-11 23:53:53 +01:00
parent 2f9e9a4912
commit 4639935eb8
7 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AppLayout/AppEmptyLayout.astro
View File

@ -2,7 +2,7 @@
import Html from "./components/Html.astro";
import Topbar from "./components/Topbar/Topbar.astro";
import Footer from "./components/Footer.astro";
import type { ParentPage } from "src/shared/payload/payload-sdk";
import type { ParentPage, PayloadImage } from "src/shared/payload/payload-sdk";
import AppLayoutBackgroundImg from "./components/AppLayoutBackgroundImg.astro";
import type { ComponentProps } from "astro/types";
@ -10,17 +10,17 @@ interface Props {
openGraph?: ComponentProps<typeof Html>["openGraph"];
parentPages?: ParentPage[];
hideFooterLinks?: boolean;
backgroundIllustration?: string | undefined;
backgroundImage?: PayloadImage | undefined;
}
const { openGraph, hideFooterLinks = false, parentPages, backgroundIllustration } = Astro.props;
const { openGraph, hideFooterLinks = false, parentPages, backgroundImage } = Astro.props;
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<Html openGraph={openGraph}>
<header>
{backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />}
{backgroundImage && <AppLayoutBackgroundImg img={backgroundImage} />}
<Topbar parentPages={parentPages} />
</header>
<main><slot /></main>

7
src/components/AppLayout/AppLayout.astro
View File

@ -5,6 +5,7 @@ import Topbar from "./components/Topbar/Topbar.astro";
import Footer from "./components/Footer.astro";
import AppLayoutTitle from "./components/AppLayoutTitle.astro";
import type { ComponentProps } from "astro/types";
import type { PayloadImage } from "src/shared/payload/payload-sdk";
interface Props {
openGraph?: ComponentProps<typeof Html>["openGraph"];
@ -16,7 +17,7 @@ interface Props {
illustration?: string;
illustrationSize?: string;
illustrationPosition?: string;
backgroundIllustration?: string | undefined;
backgroundImage?: PayloadImage | undefined;
hideFooterLinks?: boolean;
hideHomeButton?: boolean;
}
@ -28,7 +29,7 @@ const {
pretitle,
description,
illustration,
backgroundIllustration,
backgroundImage,
parentPages,
illustrationSize = "contain",
illustrationPosition = "center",
@ -41,7 +42,7 @@ const {
<Html openGraph={openGraph}>
<header>
{backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />}
{backgroundImage && <AppLayoutBackgroundImg img={backgroundImage} />}
<Topbar parentPages={parentPages} hideHomeButton={hideHomeButton} />
{

48
src/components/AppLayout/components/AppLayoutBackgroundImg.astro
View File

@ -1,24 +1,34 @@
---
import type { PayloadImage } from "src/shared/payload/payload-sdk";
import { getRandomId } from "src/utils/random";
interface Props {
src: string;
alt?: string;
id?: string;
class?: string;
img: PayloadImage;
}
const { src, alt } = Astro.props;
const {
img: { url, width, height },
} = Astro.props;
const uniqueId = getRandomId();
const style = `
@media (max-aspect-ratio: ${width}/${height}) {
#${uniqueId} {
mask-image: linear-gradient( to bottom, rgba(0 0 0 / 30%) 0%, transparent 100% );
}
}
`;
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<img id={uniqueId} src={src} alt={alt} class="when-no-print when-js" />
<img src={src} alt={alt} class="when-no-print when-no-js" />
<img id={uniqueId} src={url} class="when-no-print when-js" />
<img src={url} class="when-no-print when-no-js" />
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style set:html={style} is:inline></style>
<style>
img {
position: absolute;
@ -28,25 +38,21 @@ const uniqueId = getRandomId();
bottom: 0;
width: 100%;
height: 100vh;
height: auto;
max-height: 100%;
object-fit: cover;
object-position: 50% 0;
z-index: -1;
mask-image: linear-gradient(to bottom, rgba(0 0 0 / 30%) 0%, transparent 100%);
@media (min-width: 110vh) {
mask-image: linear-gradient(
to bottom,
rgba(0 0 0 / 30%) 0%,
rgba(0 0 0 / 5%) 100vh,
transparent 100%
);
height: 100%;
max-height: 100vw;
}
mask-image: linear-gradient(
to bottom,
rgba(0 0 0 / 30%) 0%,
rgba(0 0 0 / 5%) 100vh,
rgba(0 0 0 / 5%) 80%,
transparent 100%
);
user-select: none;
@ -59,7 +65,7 @@ const uniqueId = getRandomId();
{/* ------------------------------------------- JS --------------------------------------------- */}
<script define:vars={{ uniqueId }}>
<script define:vars={{ uniqueId }} is:inline>
const element = document.getElementById(uniqueId);
element.addEventListener("load", () => {

2
src/pages/[locale]/collectibles/[slug].astro
View File

@ -57,7 +57,7 @@ const scansFirstImage = scans[0];
description: translation.description && formatRichTextToString(translation.description),
}}
parentPages={parentPages}
backgroundIllustration={backgroundImage?.url ?? thumbnail?.url}>
backgroundImage={backgroundImage ?? thumbnail}>
<div id="layout">
<div id="left">
<AppLayoutTitle

55
src/pages/[locale]/index.astro
View File

@ -14,7 +14,13 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
<AppLayout
openGraph={{ title: t("home.title") }}
backgroundIllustration="/img/background-image.webp"
backgroundImage={{
url: "/img/background-image.webp",
filename: "background-image",
height: 2279,
width: 1920,
mimeType: "image/webp",
}}
hideFooterLinks
hideHomeButton>
<div id="title" slot="header-title">
@ -102,37 +108,40 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
</a>
</section>
<section class="DEV_TODO">
<section>
<h2>{t("home.moreSection.title")}</h2>
<p set:html={t("home.moreSection.description")} />
<div class="grid">
<LinkCard
icon="material-symbols:calendar-month-outline"
title={t("footer.links.timeline.title")}
subtitle={t("footer.links.timeline.subtitle", {
eraCount: 8,
eventCount: 358,
})}
href={getLocalizedUrl("/timeline")}
/>
<div class="DEV_TODO">
<LinkCard
icon="material-symbols:calendar-month-outline"
title={t("footer.links.timeline.title")}
subtitle={t("footer.links.timeline.subtitle", {
eraCount: 8,
eventCount: 358,
})}
href={getLocalizedUrl("/timeline")}
/>
<LinkCard
icon="material-symbols:movie-outline"
title={t("footer.links.videos.title")}
subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
href={getLocalizedUrl("/videos")}
/>
<LinkCard
icon="material-symbols:folder-zip-outline"
title={t("footer.links.webArchives.title")}
subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
href={getLocalizedUrl("/archives")}
/>
</div>
<LinkCard
icon="material-symbols:perm-media-outline"
title={t("footer.links.gallery.title")}
subtitle={t("footer.links.gallery.subtitle", { count: 5750 })}
href="https://gallery.accords-library.com/posts"
/>
<LinkCard
icon="material-symbols:movie-outline"
title={t("footer.links.videos.title")}
subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
href={getLocalizedUrl("/videos")}
/>
<LinkCard
icon="material-symbols:folder-zip-outline"
title={t("footer.links.webArchives.title")}
subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
href={getLocalizedUrl("/archives")}
/>
</div>
</section>

2
src/pages/[locale]/pages/[slug].astro
View File

@ -26,6 +26,6 @@ const meta = getLocalizedMatch(page.translations);
thumbnail: page.thumbnail?.url,
}}
parentPages={page.parentPages}
backgroundIllustration={page.backgroundImage?.url ?? page.thumbnail?.url}>
backgroundImage={page.backgroundImage ?? page.thumbnail}>
<Page slug={page.slug} lang={Astro.locals.currentLocale} page={page} />
</AppEmptyLayout>

1
src/shared/payload/payload-sdk.ts
View File

@ -1022,6 +1022,7 @@ export enum Collections {
Wordings = "wordings",
Collectibles = "collectibles",
GenericContents = "generic-contents",
BackgroundImages = "background-images",
}
export enum CollectionGroups {