Sanferminak kentzen ditu (#9)
* chore: Strapi bertsioa igotzen du * chore: Gatsby eguneratzen du * chore: build-a konpontzen du * feat: Sanferminak kentzen ditu * feat: rimraf sartzen du * chore: build-a ngrokekin lotzen du * chore: karta eguneratzen du * feat: karta eguneratzen du
This commit is contained in:
Aitor Urrutia
GitHub
@@ -1,3 +1,3 @@
|
||||
GATSBY_ROOT_URL=http://localhost:8000
|
||||
API_URL=http://localhost:1337
|
||||
GATSBY_ROOT_URL=http://127.0.0.1:8000
|
||||
API_URL=http://127.0.0.1:1337
|
||||
STRAPI_GRAPHQL_TOKEN=307442ef6911b9692d6946bf6aac5d910795b56d92063e8a58ace14e31c8ac6ad7b64480ba591689abbad02758da9562e423e1ef1af8b9f303612ffb63f94f567060ea9f690d9d14bce676bdcf985a2a8c95643963ffd6f593490bb4b4ccae51572cbf315e7c823d0f368de2fe113b113986e9943df1a81e6e4228b82cc7cead
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
GATSBY_ROOT_URL=https://laba-webgunea.netlify.app
|
||||
API_URL=https://laba-webgunea.up.railway.app
|
||||
API_URL=https://vervet-big-dassie.ngrok-free.app
|
||||
|
||||
|
||||
1
front/.gitignore
vendored
1
front/.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
node_modules/
|
||||
.cache/
|
||||
public
|
||||
.env
|
||||
|
||||
@@ -16,13 +16,12 @@ module.exports = {
|
||||
resolve: 'gatsby-source-strapi-graphql',
|
||||
options: {
|
||||
apiURL: process.env.API_URL,
|
||||
collectionTypes: ['sf-ekitaldia'],
|
||||
collectionTypes: [],
|
||||
singleTypes: [
|
||||
'hasiera',
|
||||
'kafetegia',
|
||||
'lege-oharra',
|
||||
'pribatutasun-politika',
|
||||
'sanferminak',
|
||||
],
|
||||
contentTypes: [],
|
||||
// Enable/disable cache.
|
||||
|
||||
@@ -17,37 +17,37 @@
|
||||
"prettier": "prettier . --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"@strapi/plugin-graphql": "^4.1.12",
|
||||
"@types/styled-components": "^5.1.20",
|
||||
"babel-plugin-styled-components": "^2.0.2",
|
||||
"dayjs": "^1.11.9",
|
||||
"gatsby": "^4.5.2",
|
||||
"gatsby-plugin-image": "^2.5.1",
|
||||
"gatsby-plugin-manifest": "^4.5.1",
|
||||
"gatsby-plugin-offline": "^5.5.2",
|
||||
"gatsby-plugin-react-helmet": "^5.5.0",
|
||||
"gatsby-plugin-react-svg": "^3.1.0",
|
||||
"gatsby-plugin-sharp": "^4.5.1",
|
||||
"gatsby-plugin-sitemap": "^5.5.0",
|
||||
"gatsby-plugin-styled-components": "^5.5.0",
|
||||
"gatsby-plugin-webfonts": "^2.2.1",
|
||||
"gatsby-source-filesystem": "^4.5.1",
|
||||
"gatsby-source-strapi-graphql": "^4.6.2",
|
||||
"gatsby-transformer-sharp": "^4.5.0",
|
||||
"polished": "^4.1.3",
|
||||
"@strapi/plugin-graphql": "^4.15.5",
|
||||
"@types/styled-components": "^5.1.34",
|
||||
"babel-plugin-styled-components": "^2.1.4",
|
||||
"dayjs": "^1.11.10",
|
||||
"gatsby": "^5.12.11",
|
||||
"gatsby-plugin-image": "^3.12.3",
|
||||
"gatsby-plugin-manifest": "^5.12.3",
|
||||
"gatsby-plugin-offline": "^6.12.3",
|
||||
"gatsby-plugin-react-helmet": "^6.12.0",
|
||||
"gatsby-plugin-react-svg": "^3.3.0",
|
||||
"gatsby-plugin-sharp": "^5.12.3",
|
||||
"gatsby-plugin-sitemap": "^6.12.3",
|
||||
"gatsby-plugin-styled-components": "^6.12.0",
|
||||
"gatsby-plugin-webfonts": "^2.3.2",
|
||||
"gatsby-source-filesystem": "^5.12.1",
|
||||
"gatsby-source-strapi-graphql": "^6.1.2",
|
||||
"gatsby-transformer-sharp": "^5.12.3",
|
||||
"polished": "^4.2.2",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-markdown": "^8.0.3",
|
||||
"react-responsive": "^9.0.0-beta.6",
|
||||
"react-markdown": "^8.0.7",
|
||||
"react-responsive": "^9.0.2",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"styled-components": "^5.3.3"
|
||||
"styled-components": "^6.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-helmet": "^6.1.5",
|
||||
"@types/react-helmet": "^6.1.11",
|
||||
"gatsby-source-rest-api": "^0.2.3",
|
||||
"prettier": "^2.5.1",
|
||||
"qs": "^6.10.3"
|
||||
"prettier": "^3.1.0",
|
||||
"qs": "^6.11.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,9 +16,6 @@ export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
|
||||
<Esteka aktiboa={atala === 'hasiera'}>
|
||||
<GainburuLink to="/">Laba gara</GainburuLink>
|
||||
</Esteka>
|
||||
<Esteka aktiboa={atala === 'sanferminak'}>
|
||||
<GainburuLink to="/sanferminak">Sanferminak</GainburuLink>
|
||||
</Esteka>
|
||||
<Esteka aktiboa={atala === 'kafetegia'}>
|
||||
<GainburuLink to="/kafetegia">Dastatu Laba</GainburuLink>
|
||||
</Esteka>
|
||||
|
||||
@@ -14,7 +14,7 @@ import { KontaktuDatuak } from './KontaktuDatuak';
|
||||
import Gezia from '../../assets/gezia.svg';
|
||||
import { GainburuLink } from './GainburuLink';
|
||||
|
||||
export type AtalaName = 'hasiera' | 'kafetegia' | 'sanferminak';
|
||||
export type AtalaName = 'hasiera' | 'kafetegia';
|
||||
|
||||
interface Props {
|
||||
izenburua?: string;
|
||||
@@ -233,10 +233,6 @@ const Izenburua = styled.h1`
|
||||
`;
|
||||
|
||||
function getAtalaBackground(atala?: AtalaName) {
|
||||
if (atala === 'sanferminak') {
|
||||
return colors.gorria;
|
||||
}
|
||||
|
||||
if (atala === 'hasiera') {
|
||||
return colors.morea;
|
||||
}
|
||||
@@ -249,7 +245,7 @@ function getAtalaBackground(atala?: AtalaName) {
|
||||
}
|
||||
|
||||
function getAtalaColor(atala?: AtalaName) {
|
||||
if (atala === 'hasiera' || atala === 'sanferminak') {
|
||||
if (atala === 'hasiera' ) {
|
||||
return colors.zuria;
|
||||
}
|
||||
|
||||
@@ -261,7 +257,7 @@ function getAtalaColor(atala?: AtalaName) {
|
||||
}
|
||||
|
||||
function getAtalaHoverColor(atala?: AtalaName) {
|
||||
if (atala === 'sanferminak' || atala === 'hasiera') {
|
||||
if (atala === 'hasiera') {
|
||||
return colors.horia;
|
||||
}
|
||||
|
||||
|
||||
@@ -25,9 +25,6 @@ export const MugikorNabigazioa: React.FC = () => {
|
||||
<Esteka>
|
||||
<Link to="/">Laba gara</Link>
|
||||
</Esteka>
|
||||
<Esteka>
|
||||
<Link to="/sanferminak">Sanferminak</Link>
|
||||
</Esteka>
|
||||
<Esteka>
|
||||
<Link to="/kafetegia">Dastatu Laba</Link>
|
||||
</Esteka>
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
import React from 'react';
|
||||
import { datesUtils } from '../utils/dateUtils';
|
||||
import { SFEguna } from '../pages/sanferminak';
|
||||
import styled from 'styled-components';
|
||||
import { rem } from 'polished';
|
||||
import { font, fontWeight, size } from '../ui/theme';
|
||||
import { graphql, useStaticQuery } from 'gatsby';
|
||||
|
||||
interface DataProps {
|
||||
allStrapiSfEkitaldia: {
|
||||
nodes: {
|
||||
id: string;
|
||||
hitzordua: string;
|
||||
izenburua: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
export const SFEgunaEdukia: React.FC<{ sfeguna: SFEguna }> = ({ sfeguna }) => {
|
||||
const { eguna, ekitaldi_nagusia } = sfeguna;
|
||||
|
||||
const {
|
||||
allStrapiSfEkitaldia: { nodes: egunak },
|
||||
} = useStaticQuery<DataProps>(graphql`
|
||||
{
|
||||
allStrapiSfEkitaldia {
|
||||
nodes {
|
||||
hitzordua
|
||||
id
|
||||
izenburua
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
const besteEgunak = egunak.filter(
|
||||
ekitaldia =>
|
||||
datesUtils.areSameDay(new Date(ekitaldia.hitzordua), new Date(eguna)) &&
|
||||
ekitaldi_nagusia.id !== ekitaldia.id,
|
||||
);
|
||||
|
||||
return (
|
||||
<SFEgunWrapper>
|
||||
<SFEgunaEguna>Uztailak {new Date(eguna).getDate()}.</SFEgunaEguna>
|
||||
|
||||
<SFEgunaNagusiaOrdua>
|
||||
{datesUtils.getHour(new Date(ekitaldi_nagusia.hitzordua))}
|
||||
</SFEgunaNagusiaOrdua>
|
||||
|
||||
<SFEgunaNagusiaIzenburua>
|
||||
{ekitaldi_nagusia.izenburua}
|
||||
</SFEgunaNagusiaIzenburua>
|
||||
|
||||
{besteEgunak.map(eguna => (
|
||||
<BesteHitzordua key={eguna.id}>
|
||||
{datesUtils.getHour(new Date(eguna.hitzordua))} {eguna.izenburua}
|
||||
</BesteHitzordua>
|
||||
))}
|
||||
</SFEgunWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const BesteHitzordua = styled.p`
|
||||
${font.base()};
|
||||
font-weight: ${fontWeight.bold};
|
||||
|
||||
margin-top: ${rem(size.base)};
|
||||
`;
|
||||
|
||||
const SFEgunaEguna = styled.p`
|
||||
margin-bottom: ${rem(size.base)};
|
||||
|
||||
${font.large()};
|
||||
`;
|
||||
|
||||
const SFEgunaNagusiaIzenburua = styled.h2`
|
||||
flex-grow: 1;
|
||||
|
||||
${font.large()};
|
||||
|
||||
font-weight: ${fontWeight.bold};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const SFEgunaNagusiaOrdua = styled.p`
|
||||
${font.base()};
|
||||
|
||||
font-weight: ${fontWeight.bold};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const SFEgunWrapper = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
@@ -1,264 +0,0 @@
|
||||
import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
|
||||
import React, { useState } from 'react';
|
||||
import { GlobalStyles } from '../ui/GlobalStyles';
|
||||
|
||||
import { Gainburua } from '../components/Gainburua';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
breakpoints,
|
||||
colors,
|
||||
font,
|
||||
fontWeight,
|
||||
media,
|
||||
size,
|
||||
} from '../ui/theme';
|
||||
import { Container } from '../components/Container';
|
||||
import { rem, rgba } from 'polished';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Oina } from '../components/Oina';
|
||||
import { SFEgunaEdukia } from '../components/SFEgunaEdukia';
|
||||
import { datesUtils } from '../utils/dateUtils';
|
||||
import { SEO } from '../components/SEO';
|
||||
import { GatsbyImage, getImage, ImageDataLike } from 'gatsby-plugin-image';
|
||||
import { Dialog } from '../components/Dialog';
|
||||
import MediaQuery from 'react-responsive';
|
||||
|
||||
export interface SFEguna {
|
||||
id: string;
|
||||
eguna: string;
|
||||
ekitaldi_nagusia: {
|
||||
id: string;
|
||||
hitzordua: string;
|
||||
izenburua: string;
|
||||
};
|
||||
kartela?: { file: ImageDataLike };
|
||||
atzealde_irudia?: { file: ImageDataLike };
|
||||
}
|
||||
|
||||
interface DataProps {
|
||||
strapiSanferminak: {
|
||||
datu_orokorrak: {
|
||||
deskribapena: string;
|
||||
izenburua: string;
|
||||
};
|
||||
edukia?: string;
|
||||
sf_egunak: SFEguna[];
|
||||
};
|
||||
}
|
||||
|
||||
const IndexPage: React.VFC<PageProps> = ({ location }) => {
|
||||
const { strapiSanferminak } = useStaticQuery<DataProps>(graphql`
|
||||
{
|
||||
strapiSanferminak {
|
||||
datu_orokorrak {
|
||||
izenburua
|
||||
deskribapena
|
||||
}
|
||||
edukia
|
||||
sf_egunak {
|
||||
eguna
|
||||
id
|
||||
ekitaldi_nagusia {
|
||||
id
|
||||
hitzordua
|
||||
izenburua
|
||||
}
|
||||
kartela {
|
||||
alternativeText
|
||||
file {
|
||||
childImageSharp {
|
||||
gatsbyImageData(layout: FULL_WIDTH, aspectRatio: 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
atzealde_irudia {
|
||||
alternativeText
|
||||
file {
|
||||
childImageSharp {
|
||||
gatsbyImageData(width: 300, aspectRatio: 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
const [openKartela, setOpenKartela] = useState<ImageDataLike>();
|
||||
const kartelaImage = openKartela && getImage(openKartela);
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalStyles />
|
||||
|
||||
<SEO
|
||||
location={location}
|
||||
title={strapiSanferminak.datu_orokorrak.izenburua}
|
||||
description={strapiSanferminak.datu_orokorrak.izenburua}
|
||||
/>
|
||||
|
||||
<Gainburua
|
||||
atala="sanferminak"
|
||||
izenburua={strapiSanferminak.datu_orokorrak.izenburua}
|
||||
deskribapena={strapiSanferminak.datu_orokorrak.deskribapena}
|
||||
onClick={() => {
|
||||
navigate('/sanferminak#edukia');
|
||||
}}
|
||||
/>
|
||||
|
||||
<ContentWrapper id="edukia">
|
||||
<Container>
|
||||
{strapiSanferminak.edukia && (
|
||||
<Deskribapena>{strapiSanferminak.edukia}</Deskribapena>
|
||||
)}
|
||||
|
||||
{strapiSanferminak.sf_egunak &&
|
||||
strapiSanferminak.sf_egunak.length > 0 && (
|
||||
<SFEgunZerrenda>
|
||||
{strapiSanferminak.sf_egunak.map(sfeguna => {
|
||||
const image =
|
||||
sfeguna.atzealde_irudia &&
|
||||
getImage(sfeguna.atzealde_irudia?.file);
|
||||
|
||||
return (
|
||||
<SFEgunaElementua key={sfeguna.id}>
|
||||
<MediaQuery minWidth={breakpoints.tablet}>
|
||||
{image && (
|
||||
<AtzealdeIrudia
|
||||
alt="Atzealdeko irudia"
|
||||
image={image}
|
||||
/>
|
||||
)}
|
||||
</MediaQuery>
|
||||
|
||||
<EdukiaWrapper
|
||||
aria-label={sfeguna.ekitaldi_nagusia.izenburua}
|
||||
className={
|
||||
datesUtils.isToday(new Date(sfeguna.eguna))
|
||||
? 'active'
|
||||
: ''
|
||||
}
|
||||
onClick={() => setOpenKartela(sfeguna.kartela?.file)}
|
||||
>
|
||||
<SFEgunaEdukia sfeguna={sfeguna} />
|
||||
</EdukiaWrapper>
|
||||
</SFEgunaElementua>
|
||||
);
|
||||
})}
|
||||
</SFEgunZerrenda>
|
||||
)}
|
||||
</Container>
|
||||
</ContentWrapper>
|
||||
|
||||
<Oina />
|
||||
|
||||
<Dialog
|
||||
open={Boolean(openKartela)}
|
||||
onClose={() => setOpenKartela(undefined)}
|
||||
>
|
||||
{kartelaImage && <Kartela alt="Kartela" image={kartelaImage} />}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const AtzealdeIrudia = styled(GatsbyImage)`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: -1;
|
||||
`;
|
||||
|
||||
const Kartela = styled(GatsbyImage)`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const EdukiaWrapper = styled.button`
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ${rem(size.small)};
|
||||
|
||||
color: ${colors.zuria};
|
||||
border: none;
|
||||
|
||||
background-color: ${colors.beltza};
|
||||
transition: background-color 0.75s ease;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: ${rgba(colors.beltza, 0.8)};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 4px solid ${colors.urdina};
|
||||
}
|
||||
|
||||
${media.tablet`
|
||||
position: absolute;
|
||||
`}
|
||||
|
||||
&.active {
|
||||
@keyframes mymove {
|
||||
0% {
|
||||
background-color: ${colors.beltza};
|
||||
}
|
||||
33% {
|
||||
background-color: ${colors.gorria};
|
||||
}
|
||||
66% {
|
||||
background-color: ${colors.beltza};
|
||||
}
|
||||
}
|
||||
|
||||
animation: mymove 4s infinite;
|
||||
}
|
||||
`;
|
||||
|
||||
const SFEgunaElementua = styled.li`
|
||||
width: 100%;
|
||||
|
||||
color: ${colors.zuria};
|
||||
|
||||
${media.tablet`
|
||||
position: relative;
|
||||
aspect-ratio: 1/1;
|
||||
margin-bottom: 0;
|
||||
`}
|
||||
`;
|
||||
|
||||
const SFEgunZerrenda = styled.ul`
|
||||
display: grid;
|
||||
grid-column-gap: ${rem(size.mini)};
|
||||
grid-row-gap: ${rem(size.mini)};
|
||||
|
||||
${media.tablet`
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
`}
|
||||
|
||||
${media.desktop`
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
`}
|
||||
`;
|
||||
|
||||
const Deskribapena = styled(ReactMarkdown)`
|
||||
margin-bottom: ${rem(size.large)};
|
||||
|
||||
p:not(-last-child) {
|
||||
margin-bottom: ${rem(size.base)};
|
||||
}
|
||||
`;
|
||||
|
||||
const ContentWrapper = styled.div`
|
||||
padding: ${size.huge}px 0;
|
||||
font-weight: ${fontWeight.regular};
|
||||
${font.large()};
|
||||
`;
|
||||
|
||||
export default IndexPage;
|
||||
Reference in New Issue
Block a user