Big bang/webgune berria (#18)
* chore: netlify deployments plugina kentzen du * chore: Strapi berria instalatzen du * feat: astro instalatzen du * chore: cypress instalatzen du * feat: back eta front konektatzen ditu * feat: server side rendering egiten du * chore: Strapin enterprise edition flagak kentzen ditu * feat: euskara sartzen du * chore: Strapi bertsioa igotzen du * feat: preview modua sortzen du ingurune bariableen bidez * aurreko commitarekin doa * fix: cypress konpontzen du * chore: Strapi bertsioa igotzen du * feat: ekintza back-ean sortzen du * feat: zikloa eta erakundea sortzen ditu * feat: erakundeen kudeaketa hobetzen du * chore: pnpm erabiltzen du * feat: Strapi bertsioa igotzen du * ekintza sortzen du eta zerbitzuak eguneratzen ditu * chore: graphql erabiltzen du populazioa ekiditeko * chore: collection erabiltzen du ekintzetarako * chore: bertsioak igotzen ditu * chore: Astro bertsioa igotzen du * chore: Strapi bertsioa igotzen du * feat: home-a hasten du * feat: zig zag separadorea sortzen du * feat: zig zaga doitzen du * feat: heroa doitzen du * feat: agenda sortzen du * feat: agenda eta izan labazkide atalak konektatzen ditu * feat: home-aren edukia sortzen du * chore: app.js sartzen du WTF * feat: header-a sortzen du * feat: card-a hobetzen du * feat: footer-a sortzen du * feat: ekintzen zerrenda erakusten du * feat: zikloaren bista sortzen du * fix: header-aren estekak konpontzen ditu * chore: remove unused code * chore: components directorioa kentzen du * chore: typescript konfigurazioa hobetzen du * chore: views path-a sortzen du * feat: zikloaren deskribapena erakusten du * feat: ekintzaren bista sortzen du * feat: zig zag marra erakusten du * ignore: comment * feat: hitzordua erakusten du * feat: zikloa erakusten du * feat: Waveko erroreak errepasatzen ditu * feat: Wave birpasatzen du * feat: zerrendan irudia erakusten du * feat: karga optimizatzen du * feat: irudien formatuak kontuan hartzen ditu * feat: zikloan ekintza irudiak erakusten ditu * feat: ekintza zerrenda atontzen du * feat: header-eko estekak markatzen ditu * feat: irudi estela erakusten du * feat: responsive-a hobetzen du * feat: orri basikoa sortzen du * feat: hasiera responsive egiten du * feat: overflow konpontzen du * feat: bug-a uzten du LOL * feat: irudi estela mugikorrean aktibatzen du * feat: orri basikoa eta ekintza mugikorrean jartzen ditu * feat: mugikor menua sortzen du * feat: mugikor menua amaitzen du * feat: build estatikoa sortzen du * feat: sitemap-a sortzen du * feat: rss feed-a sortzen du * chore: ingurune aldagaiak sortzen ditu * chore: public-proxy komandoa sortzen du * feat: irudiak webp formatuan jartzen ditu * fix: irudiak erakusten ditu ekintzen zerrendan * feat: ekintza zerrendaren irudia animatzen du * refactor: extract functions * fix: animazioa konpontzen du * feat: irudi estela hobetzen du * chore: prerender aldagaiak kentzen ditu * chore: SASS warning-ak kentzen ditu * feat: ziklo eta ekintzetan H1 ezartzen du * feat: slideshow-a sortzen du * feat: ekintzak hitzorduan oinarrituta filtratzen ditu * feat: hitzorduen arabera filtratzen du eta moment kentzen du * feat: titulua aldatzen du * feat: menua eguneratzen du * feat: parte hartun deskribapena sortzen du * feat: Cloudinary konfiguratzen du * fix: cloudinary konfigurazioa konpontzen du * feat: erositako fonteak jartzen ditu
This commit is contained in:
Aitor Urrutia
GitHub
229
front/src/views/hasiera/Hasiera.astro
Normal file
229
front/src/views/hasiera/Hasiera.astro
Normal file
@@ -0,0 +1,229 @@
|
||||
---
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Logo from "../../assets/labaLogo.svg";
|
||||
import ZigZag from "../_components/ZigZag.astro";
|
||||
import { type Ekintza } from "models/Ekintza";
|
||||
import MarkdownParser from "../_components/MarkdownParser.astro";
|
||||
import { type Hasiera } from "models/Hasiera";
|
||||
import PartehartzeaCard from "./components/PartehartzeaCard.astro";
|
||||
import Header from "../_components/Header.astro";
|
||||
import Footer from "../_components/Footer.astro";
|
||||
import EkintzaZerrenda from "../_components/EkintzaZerrenda.astro";
|
||||
import IrudiEstela from "views/_components/IrudiEstela.astro";
|
||||
|
||||
interface Props {
|
||||
hasiera: Hasiera;
|
||||
ekintzak: Ekintza[];
|
||||
}
|
||||
|
||||
const { hasiera, ekintzak } = Astro.props;
|
||||
|
||||
const { izenburua, izanLabazkide, parteHartu, mosaikoa }: Hasiera = hasiera;
|
||||
|
||||
const hurrengoEkintzak = ekintzak.filter((ekintza) =>
|
||||
dayjs().isBefore(ekintza.hitzordua)
|
||||
);
|
||||
---
|
||||
|
||||
<Layout title={izenburua}>
|
||||
<Header isAbsolutePosition />
|
||||
|
||||
<main class="main">
|
||||
<section class="hero">
|
||||
<h1>
|
||||
<span class="visually-hidden">Laba</span>
|
||||
<Logo class="logo" aria-title="Laba" />
|
||||
</h1>
|
||||
|
||||
<IrudiEstela mosaikoa={mosaikoa} />
|
||||
</section>
|
||||
|
||||
<ZigZag from="marroia" />
|
||||
|
||||
<section class="agenda" id="agenda">
|
||||
<EkintzaZerrenda ekintzak={hurrengoEkintzak} title="Agenda" />
|
||||
</section>
|
||||
|
||||
<ZigZag from="gorria-background" to="gorria" />
|
||||
|
||||
<section class="izan-labazkide" id="izan-labazkide">
|
||||
<div class="labazkide-wrapper">
|
||||
<h2 class="title">{izanLabazkide.izenburua}</h2>
|
||||
|
||||
<MarkdownParser content={izanLabazkide.deskribapena} />
|
||||
|
||||
<a class="izan-labazkide--url" href={izanLabazkide.url.url}
|
||||
>{izanLabazkide.url.label}</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ZigZag from="gorria" to="gorria-background" />
|
||||
|
||||
<section class="parte-hartu" id="parte-hartu">
|
||||
<h2 class="title">{parteHartu.izenburua}</h2>
|
||||
|
||||
<div class="parte-hartzeak--wrapper">
|
||||
{
|
||||
parteHartu.deskribapena && (
|
||||
<div class="parte-hartu--deskribapena">
|
||||
<MarkdownParser content={parteHartu.deskribapena} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<ul class="parte-hartzeak">
|
||||
{
|
||||
parteHartu.parteHartzea.map((parteHartzea) => (
|
||||
<PartehartzeaCard partehartzea={parteHartzea} />
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../style/mixins/displayFonts.scss";
|
||||
@use "../../style/tools/mediaQueries.scss";
|
||||
|
||||
@mixin sectionPadding() {
|
||||
padding: var(--space-07-mobile) var(--space-05-mobile);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
padding: var(--space-10-desktop) var(--space-07-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
background-color: var(--gorria-background);
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
min-height: 97dvh;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: var(--space-05-mobile);
|
||||
|
||||
background-color: var(--marroia);
|
||||
color: var(--gorria);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
padding: var(--space-07-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
z-index: 20;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
height: 33dvh;
|
||||
}
|
||||
}
|
||||
|
||||
.agenda {
|
||||
z-index: 20;
|
||||
|
||||
@include sectionPadding;
|
||||
}
|
||||
|
||||
.izan-labazkide {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, [col-start] 1fr);
|
||||
gap: var(--space-03-mobile);
|
||||
|
||||
background-color: var(--gorria);
|
||||
color: var(--zuria);
|
||||
|
||||
@include sectionPadding;
|
||||
@include mediaQueries.aboveTablet {
|
||||
gap: var(--space-05-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
.labazkide-wrapper {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-05-mobile);
|
||||
|
||||
grid-column: col-start 1 / -1;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
gap: var(--space-05-desktop);
|
||||
grid-column: col-start 4 / span 6;
|
||||
}
|
||||
}
|
||||
|
||||
.izan-labazkide--url {
|
||||
color: var(--zuria);
|
||||
}
|
||||
|
||||
.parte-hartu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: var(--space-06-mobile);
|
||||
|
||||
color: var(--marroia);
|
||||
text-align: center;
|
||||
|
||||
@include sectionPadding;
|
||||
@include mediaQueries.aboveTablet {
|
||||
gap: var(--space-06-desktop);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.parte-hartu--deskribapena {
|
||||
grid-column: col-start 2 / span 10;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
grid-column: col-start 5 / span 4;
|
||||
}
|
||||
}
|
||||
|
||||
.parte-hartzeak {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-05-desktop);
|
||||
grid-column: col-start 2 / span 10;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
flex-direction: row;
|
||||
gap: var(--space-05-desktop);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.parte-hartzeak--wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, [col-start] 1fr);
|
||||
gap: var(--space-05-desktop);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include displayFonts.display2;
|
||||
}
|
||||
</style>
|
||||
26
front/src/views/hasiera/components/ExternalSVG.astro
Normal file
26
front/src/views/hasiera/components/ExternalSVG.astro
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import type { ExternalSVG } from "models/Hasiera";
|
||||
|
||||
interface Props {
|
||||
externalSVG: ExternalSVG;
|
||||
}
|
||||
|
||||
const { externalSVG } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="external-svg" set:html={externalSVG} />
|
||||
|
||||
<style lang="scss" is:global>
|
||||
@use "../../../style/tools/mediaQueries.scss";
|
||||
|
||||
.external-svg {
|
||||
svg {
|
||||
width: var(--space-06-mobile);
|
||||
height: auto;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
width: var(--space-07-desktop);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
front/src/views/hasiera/components/PartehartzeaCard.astro
Normal file
75
front/src/views/hasiera/components/PartehartzeaCard.astro
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
import type { Partehartzea } from "models/Hasiera";
|
||||
import ExternalSVG from "./ExternalSVG.astro";
|
||||
|
||||
interface Props {
|
||||
partehartzea: Partehartzea;
|
||||
}
|
||||
|
||||
const { partehartzea } = Astro.props;
|
||||
---
|
||||
|
||||
<li>
|
||||
<div><ExternalSVG externalSVG={partehartzea.ikonoa} /></div>
|
||||
|
||||
<h3>{partehartzea.izenburua}</h3>
|
||||
<p>{partehartzea.deskribapena}</p>
|
||||
|
||||
<a href={`mailto:${partehartzea.email}`}>{partehartzea.email}</a>
|
||||
</li>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../../style/mixins/displayFonts.scss";
|
||||
@use "../../../style/tools/mediaQueries.scss";
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--space-04-mobile);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
width: 30%;
|
||||
padding: var(--space-04-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
color: var(--gorria);
|
||||
margin-bottom: var(--space-03-mobile);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
margin-bottom: var(--space-03-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: var(--space-04-mobile);
|
||||
|
||||
@include displayFonts.display4;
|
||||
@include mediaQueries.aboveTablet {
|
||||
margin-bottom: var(--space-05-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-04-mobile);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
margin-bottom: var(--space-05-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--marroia);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include displayFonts.display6;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user