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

36
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"; import { getRandomId } from "src/utils/random";
interface Props { interface Props {
src: string; img: PayloadImage;
alt?: string;
id?: string;
class?: string;
} }
const { src, alt } = Astro.props; const {
img: { url, width, height },
} = Astro.props;
const uniqueId = getRandomId(); 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 ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<img id={uniqueId} src={src} alt={alt} class="when-no-print when-js" /> <img id={uniqueId} src={url} class="when-no-print when-js" />
<img src={src} alt={alt} class="when-no-print when-no-js" /> <img src={url} class="when-no-print when-no-js" />
{/* ------------------------------------------- CSS -------------------------------------------- */} {/* ------------------------------------------- CSS -------------------------------------------- */}
<style set:html={style} is:inline></style>
<style> <style>
img { img {
position: absolute; position: absolute;
@ -28,25 +38,21 @@ const uniqueId = getRandomId();
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 100vh; height: auto;
max-height: 100%;
object-fit: cover; object-fit: cover;
object-position: 50% 0; object-position: 50% 0;
z-index: -1; 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( mask-image: linear-gradient(
to bottom, to bottom,
rgba(0 0 0 / 30%) 0%, rgba(0 0 0 / 30%) 0%,
rgba(0 0 0 / 5%) 100vh, rgba(0 0 0 / 5%) 100vh,
rgba(0 0 0 / 5%) 80%,
transparent 100% transparent 100%
); );
height: 100%;
max-height: 100vw;
}
user-select: none; user-select: none;
@ -59,7 +65,7 @@ const uniqueId = getRandomId();
{/* ------------------------------------------- JS --------------------------------------------- */} {/* ------------------------------------------- JS --------------------------------------------- */}
<script define:vars={{ uniqueId }}> <script define:vars={{ uniqueId }} is:inline>
const element = document.getElementById(uniqueId); const element = document.getElementById(uniqueId);
element.addEventListener("load", () => { 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), description: translation.description && formatRichTextToString(translation.description),
}} }}
parentPages={parentPages} parentPages={parentPages}
backgroundIllustration={backgroundImage?.url ?? thumbnail?.url}> backgroundImage={backgroundImage ?? thumbnail}>
<div id="layout"> <div id="layout">
<div id="left"> <div id="left">
<AppLayoutTitle <AppLayoutTitle

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

@ -14,7 +14,13 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
<AppLayout <AppLayout
openGraph={{ title: t("home.title") }} 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 hideFooterLinks
hideHomeButton> hideHomeButton>
<div id="title" slot="header-title"> <div id="title" slot="header-title">
@ -102,10 +108,11 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
</a> </a>
</section> </section>
<section class="DEV_TODO"> <section>
<h2>{t("home.moreSection.title")}</h2> <h2>{t("home.moreSection.title")}</h2>
<p set:html={t("home.moreSection.description")} /> <p set:html={t("home.moreSection.description")} />
<div class="grid"> <div class="grid">
<div class="DEV_TODO">
<LinkCard <LinkCard
icon="material-symbols:calendar-month-outline" icon="material-symbols:calendar-month-outline"
title={t("footer.links.timeline.title")} title={t("footer.links.timeline.title")}
@ -115,12 +122,6 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
})} })}
href={getLocalizedUrl("/timeline")} href={getLocalizedUrl("/timeline")}
/> />
<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 <LinkCard
icon="material-symbols:movie-outline" icon="material-symbols:movie-outline"
title={t("footer.links.videos.title")} title={t("footer.links.videos.title")}
@ -134,6 +135,14 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
href={getLocalizedUrl("/archives")} href={getLocalizedUrl("/archives")}
/> />
</div> </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"
/>
</div>
</section> </section>
<section> <section>

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

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

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

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