Irudiak erakusten ditu (#8)

* feat: atzealde irudia erakusten du

* feat: cloudinary sartzen du

* feat: kartela erakusten du

* chore: typescript errorea ekiditen du

* feat: irisgarritasuna hobetzen du

* feat: modalaren estiloa hobetzendu

* feat: og image aldatzen du

front/src/components/Dialog.tsx

@@ -0,0 +1,115 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+
+import styled from 'styled-components';
+import { colors, font, media, size } from '../ui/theme';
+import { rgba } from 'polished';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const Dialog: React.FC<PropsWithChildren<Props>> = ({
+  open,
+  onClose,
+  children,
+}) => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    if (!modalRef) {
+      return;
+    }
+
+    if (open) {
+      modalRef.current?.showModal();
+      return;
+    }
+
+    modalRef.current?.close();
+  }, [open, modalRef]);
+
+  return (
+    <DialogWrapper
+      ref={modalRef}
+      // @ts-expect-error dialog-en tipoetan arazo bat dagoela dirudi
+      onClose={onClose}
+      onCancel={onClose}
+      onClick={({ target }) => {
+        if (target !== modalRef.current) {
+          return;
+        }
+        onClose();
+      }}
+    >
+      <DialogContent>
+        <Close title="Itxi" onClick={onClose}>
+          ✕
+        </Close>
+
+        {children && <DialogBody>{children}</DialogBody>}
+      </DialogContent>
+    </DialogWrapper>
+  );
+};
+
+const Close = styled.button`
+  position: absolute;
+  top: ${size.tiny}px;
+  right: ${size.tiny}px;
+
+  color: ${colors.zuria};
+  ${font.base()};
+
+  background-color: ${rgba(colors.beltza, 0.7)};
+  border: none;
+  cursor: pointer;
+  z-index: 1;
+  border-radius: 5px;
+
+  &:hover {
+    color: ${colors.urdina};
+  }
+`;
+
+const DialogBody = styled.div``;
+
+const DialogContent = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+const DialogWrapper = styled.dialog`
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: 30px auto;
+  padding: 0;
+  width: 85vw;
+
+  border: 1px solid ${colors.beltza};
+  box-shadow: 0 5px 15px ${colors.beltza};
+
+  ${media.tablet`
+    width: 600px;
+  `}
+
+  &::backdrop {
+    backdrop-filter: blur(4px);
+    background-color: ${rgba(colors.beltza, 0.6)};
+  }
+
+  &[open] {
+    animation: show 1s ease normal;
+  }
+  @keyframes show {
+    from {
+      transform: translateY(-110%);
+    }
+    to {
+      transform: translateY(0%);
+    }
+  }
+`;

front/src/components/SEO.tsx

@@ -18,7 +18,7 @@ export const SEO: React.VFC<Props> = ({ title, description, location }) => (
       name="og:image"
       content={`${location.protocol}//${location.host}${ogImagePath}`}
     />
-    <meta name="og:image:height" content="500" />
-    <meta name="og:image:width" content="1500" />
+    <meta name="og:image:height" content="669" />
+    <meta name="og:image:width" content="1205" />
   </Helmet>
 );

front/src/components/SFEgunaEdukia.tsx

@@ -52,7 +52,7 @@ export const SFEgunaEdukia: React.FC<{ sfeguna: SFEguna }> = ({ sfeguna }) => {
       </SFEgunaNagusiaIzenburua>
 
       {besteEgunak.map(eguna => (
-        <BesteHitzordua>
+        <BesteHitzordua key={eguna.id}>
           {datesUtils.getHour(new Date(eguna.hitzordua))} {eguna.izenburua}
         </BesteHitzordua>
       ))}

front/src/pages/sanferminak.tsx

@@ -1,17 +1,27 @@
 import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
-import React from 'react';
+import React, { useState } from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
 import { Gainburua } from '../components/Gainburua';
 import styled from 'styled-components';
-import { colors, font, fontWeight, media, size } from '../ui/theme';
+import {
+  breakpoints,
+  colors,
+  font,
+  fontWeight,
+  media,
+  size,
+} from '../ui/theme';
 import { Container } from '../components/Container';
-import { rem } from 'polished';
+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;
@@ -21,6 +31,8 @@ export interface SFEguna {
     hitzordua: string;
     izenburua: string;
   };
+  kartela?: { file: ImageDataLike };
+  atzealde_irudia?: { file: ImageDataLike };
 }
 
 interface DataProps {
@@ -30,7 +42,7 @@ interface DataProps {
       izenburua: string;
     };
     edukia?: string;
-    sf_egunak?: SFEguna[];
+    sf_egunak: SFEguna[];
   };
 }
 
@@ -51,11 +63,30 @@ const IndexPage: React.VFC<PageProps> = ({ location }) => {
             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 />
@@ -84,34 +115,87 @@ const IndexPage: React.VFC<PageProps> = ({ location }) => {
           {strapiSanferminak.sf_egunak &&
             strapiSanferminak.sf_egunak.length > 0 && (
               <SFEgunZerrenda>
-                {strapiSanferminak.sf_egunak.map(sfeguna => (
-                  <SFEgunaElementua
-                    key={sfeguna.id}
-                    className={
-                      datesUtils.isToday(new Date(sfeguna.eguna))
-                        ? 'active'
-                        : ''
-                    }
-                  >
-                    <SFEgunaEdukia sfeguna={sfeguna} />
-                  </SFEgunaElementua>
-                ))}
+                {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
+                        role="button"
+                        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 SFEgunaElementua = styled.li`
+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.div`
+  top: 0;
+  height: 100%;
+  width: 100%;
   padding: ${rem(size.small)};
 
-  width: 100%;
   background-color: ${colors.beltza};
-  color: ${colors.zuria};
+  transition: background-color 0.75s ease;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${rgba(colors.beltza, 0.8)};
+  }
+
+  ${media.tablet`
+    position: absolute;
+  `}
 
   &.active {
     @keyframes mymove {
@@ -128,8 +212,15 @@ const SFEgunaElementua = styled.li`
 
     animation: mymove 4s infinite;
   }
+`;
+
+const SFEgunaElementua = styled.li`
+  width: 100%;
+
+  color: ${colors.zuria};
 
   ${media.tablet`
+    position: relative;
     aspect-ratio: 1/1;
     margin-bottom: 0;
   `}