Import repositories from gitlab
This commit is contained in:
Julien Aldon
136
next/app/prog/city-wide/page.js
Normal file
136
next/app/prog/city-wide/page.js
Normal file
@@ -0,0 +1,136 @@
|
||||
import getData from "@/api";
|
||||
import styles from "./style.module.scss";
|
||||
import Fanfare from "@/components/fanfare";
|
||||
import TimeSlot from "@/components/timeSlot";
|
||||
import Empty from "@/components/empty";
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function generateMetadata() {
|
||||
const site = await getData("site", {
|
||||
populate: {
|
||||
edition: {
|
||||
populate: {
|
||||
flyer: {
|
||||
fields: [
|
||||
"name",
|
||||
"url",
|
||||
"alternativeText",
|
||||
"caption",
|
||||
"width",
|
||||
"height",
|
||||
],
|
||||
},
|
||||
programs: true,
|
||||
},
|
||||
fields: ["id", "introduction", "title", "subtitle"],
|
||||
},
|
||||
},
|
||||
fields: ["author"],
|
||||
});
|
||||
const current_edition = site.data?.attributes.edition.data?.attributes;
|
||||
const flyer =
|
||||
site.data?.attributes.edition.data?.attributes.flyer.data.attributes;
|
||||
const programs = current_edition?.programs.data;
|
||||
const cityWide = programs?.filter(
|
||||
(e) => e.attributes.type === "city-wide"
|
||||
)[0];
|
||||
|
||||
return cityWide
|
||||
? {
|
||||
metadataBase: `${process.env.NEXT_PUBLIC_ORIGIN}`,
|
||||
title: cityWide.attributes.title,
|
||||
description: cityWide.attributes.description,
|
||||
alternates: {
|
||||
canonical: "/prog/city-wide",
|
||||
},
|
||||
openGraph: {
|
||||
title: cityWide.attributes.title,
|
||||
url: `${process.env.NEXT_PUBLIC_ORIGIN}/prog/city-wide`,
|
||||
description: cityWide.attributes.description,
|
||||
images: {
|
||||
url: `${process.env.NEXT_PUBLIC_IMG_URI}${flyer.url}`,
|
||||
width: flyer.width,
|
||||
height: flyer.height,
|
||||
},
|
||||
authors: [site.data.attributes.author],
|
||||
type: "website",
|
||||
locale: "fr_FR",
|
||||
siteName: "Le Fefan - Festival de Fanfares",
|
||||
},
|
||||
}
|
||||
: {};
|
||||
}
|
||||
|
||||
export default async function CityWide() {
|
||||
const site = await getData("site", {
|
||||
populate: {
|
||||
edition: {
|
||||
populate: {
|
||||
programs: {
|
||||
populate: {
|
||||
bands: {
|
||||
fields: ["*"],
|
||||
},
|
||||
time_slots: {
|
||||
fields: ["*"],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
const edition = site.data?.attributes.edition ?? {};
|
||||
const program =
|
||||
edition.data?.attributes.programs.data.filter(
|
||||
({ attributes: r }) => r.type === "city-wide"
|
||||
)[0] ?? {};
|
||||
const time_slots = program.attributes?.time_slots.data ?? [];
|
||||
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
{program.attributes ? (
|
||||
<>
|
||||
<h2>{program.attributes.title}</h2>
|
||||
<section className={styles.program}>
|
||||
{time_slots.map(({ id, attributes: attr }) => {
|
||||
return (
|
||||
<TimeSlot
|
||||
key={id}
|
||||
content={attr.content}
|
||||
start={attr.start}
|
||||
end={attr.end}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
<section className={styles.program}>
|
||||
<article className={styles.featuring}>
|
||||
{program.attributes.bands.data.length === 0 ? null : (
|
||||
<h3>Les Fanfares</h3>
|
||||
)}
|
||||
<p className={styles.introduction}>
|
||||
{program.attributes.description}
|
||||
</p>
|
||||
{program.attributes.bands.data.map(({ id, attributes: attr }) => {
|
||||
return (
|
||||
<Fanfare key={id} location={attr.location} name={attr.name} />
|
||||
);
|
||||
})}
|
||||
</article>
|
||||
<iframe
|
||||
className={styles.map}
|
||||
src={program.attributes.map_uri}
|
||||
width={640}
|
||||
height={480}
|
||||
></iframe>
|
||||
</section>
|
||||
|
||||
<section className={styles.program}></section>
|
||||
</>
|
||||
) : (
|
||||
<Empty message="Pas de programmation à afficher pour le moment"></Empty>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
95
next/app/prog/city-wide/style.module.scss
Normal file
95
next/app/prog/city-wide/style.module.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
.main {
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
flex-flow: column;
|
||||
|
||||
.program {
|
||||
display: grid;
|
||||
width: 80rem;
|
||||
max-width: 90vw;
|
||||
align-self: center;
|
||||
grid-template-columns: repeat(3, calc(80rem / 3));
|
||||
grid-auto-rows: max-content;
|
||||
|
||||
&+.program {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
grid-column: 1 / -1;
|
||||
font-family: var(--font-details);
|
||||
margin: 0.25rem 0px;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
width: auto;
|
||||
grid-column: span 2;
|
||||
place-self: stretch;
|
||||
border: medium;
|
||||
}
|
||||
|
||||
.featuring {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, calc(80rem / 6));
|
||||
place-self: stretch;
|
||||
padding: 0px 0.5rem;
|
||||
place-items: stretch;
|
||||
align-content: start;
|
||||
grid-auto-rows: max-content;
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-details);
|
||||
grid-column: 1 / -1;
|
||||
margin: 0.25rem 0px;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
justify-self: stretch;
|
||||
max-width: 80vw;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: stretch;
|
||||
text-align: left;
|
||||
max-width: 90vw;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
align-self: center;
|
||||
font-family: var(--font-details);
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 80rem) {
|
||||
.main {
|
||||
.program {
|
||||
grid-template-columns: repeat(2, calc(50vw - 3rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 60rem) {
|
||||
.main {
|
||||
.program {
|
||||
grid-template-columns: repeat(1, 90vw);
|
||||
}
|
||||
|
||||
.featuring {
|
||||
.introduction {
|
||||
padding-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user