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

back/config/env/production/plugins.js

@@ -0,0 +1,16 @@
+module.exports = ({ env }) => ({
+  upload: {
+    config: {
+      provider: "cloudinary",
+      providerOptions: {
+        cloud_name: env("CLOUDINARY_NAME"),
+        api_key: env("CLOUDINARY_KEY"),
+        api_secret: env("CLOUDINARY_SECRET"),
+      },
+      actionOptions: {
+        upload: {},
+        delete: {},
+      },
+    },
+  },
+});

back/package.json

@@ -13,6 +13,7 @@
     "@strapi/plugin-graphql": "^4.11.3",
     "@strapi/plugin-i18n": "4.11.3",
     "@strapi/plugin-users-permissions": "4.11.3",
+    "@strapi/provider-upload-cloudinary": "^4.11.3",
     "@strapi/strapi": "4.11.3",
     "pg": "^8.11.1",
     "pg-connection-string": "^2.6.1",

back/src/components/hasiera/sf-eguna.json

@@ -14,6 +14,20 @@
     },
     "eguna": {
       "type": "date"
+    },
+    "atzealde_irudia": {
+      "allowedTypes": [
+        "images"
+      ],
+      "type": "media",
+      "multiple": false
+    },
+    "kartela": {
+      "allowedTypes": [
+        "images"
+      ],
+      "type": "media",
+      "multiple": false
     }
   }
 }

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:height" content="669" />
-    <meta name="og:image:width" content="1500" />
+    <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 => (
+                {strapiSanferminak.sf_egunak.map(sfeguna => {
-                  <SFEgunaElementua
+                  const image =
-                    key={sfeguna.id}
+                    sfeguna.atzealde_irudia &&
-                    className={
+                    getImage(sfeguna.atzealde_irudia?.file);
-                      datesUtils.isToday(new Date(sfeguna.eguna))
+
-                        ? 'active'
+                  return (
-                        : ''
+                    <SFEgunaElementua key={sfeguna.id}>
-                    }
+                      <MediaQuery minWidth={breakpoints.tablet}>
-                  >
+                        {image && (
-                    <SFEgunaEdukia sfeguna={sfeguna} />
+                          <AtzealdeIrudia
-                  </SFEgunaElementua>
+                            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;
   `}

yarn.lock

@@ -4762,6 +4762,15 @@
     "@strapi/utils" "4.11.3"
     sendmail "^1.6.1"
 
+"@strapi/provider-upload-cloudinary@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@strapi/provider-upload-cloudinary/-/provider-upload-cloudinary-4.11.3.tgz#13489fea999b83016a0d4d6239545cdfe7f380bc"
+  integrity sha512-SzQPN/JKY+8qv4aDYFrDsxyVcIgYlev/Llb7nUErkRmL/tleGcftfVS3mWDva/S6nztRLxchEvZ3Bge4BndGpw==
+  dependencies:
+    "@strapi/utils" "4.11.3"
+    cloudinary "^1.37.0"
+    into-stream "^5.1.0"
+
 "@strapi/provider-upload-local@4.11.2":
   version "4.11.2"
   resolved "https://registry.npmjs.org/@strapi/provider-upload-local/-/provider-upload-local-4.11.2.tgz"
@@ -7777,6 +7786,21 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+cloudinary-core@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.13.0.tgz#b59f90871b6c708c3d0735b9be47ac08181c57fb"
+  integrity sha512-Nt0Q5I2FtenmJghtC4YZ3MZZbGg1wLm84SsxcuVwZ83OyJqG9CNIGp86CiI6iDv3QobaqBUpOT7vg+HqY5HxEA==
+
+cloudinary@^1.37.0:
+  version "1.37.3"
+  resolved "https://registry.yarnpkg.com/cloudinary/-/cloudinary-1.37.3.tgz#859ac875c022e84315e6ea092aa3f05e031ceabb"
+  integrity sha512-XrGb60ZeQhYp9QQjj5DP3cYsAc27OV1B7pezvVxyqgHB5WMeMsofzeIy6+k0o/fCCv744Nf7xsYiTlUi3V0V/Q==
+  dependencies:
+    cloudinary-core "^2.13.0"
+    core-js "^3.30.1"
+    lodash "^4.17.21"
+    q "^1.5.1"
+
 co-body@^5.1.1:
   version "5.2.0"
   resolved "https://registry.npmjs.org/co-body/-/co-body-5.2.0.tgz"
@@ -8221,6 +8245,11 @@ core-js@^3.17.2:
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.20.2.tgz"
   integrity sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw==
 
+core-js@^3.30.1:
+  version "3.31.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.31.0.tgz#4471dd33e366c79d8c0977ed2d940821719db344"
+  integrity sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
@@ -10504,6 +10533,14 @@ fresh@0.5.2, fresh@~0.5.2:
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
+from2@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  integrity sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
 fs-capacitor@^6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/fs-capacitor/-/fs-capacitor-6.2.0.tgz"
@@ -12313,6 +12350,14 @@ intl-messageformat@9.13.0:
     "@formatjs/icu-messageformat-parser" "2.1.0"
     tslib "^2.1.0"
 
+into-stream@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-5.1.1.tgz#f9a20a348a11f3c13face22763f2d02e127f4db8"
+  integrity sha512-krrAJ7McQxGGmvaYbB7Q1mcA+cRwg9Ij2RfWIeVesNBgVDZmzY/Fa4IpZUT3bmdRzMzdf/mzltCG2Dq99IZGBA==
+  dependencies:
+    from2 "^2.3.0"
+    p-is-promise "^3.0.0"
+
 invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
@@ -15607,6 +15652,11 @@ p-finally@^1.0.0:
   resolved "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
+p-is-promise@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-3.0.0.tgz#58e78c7dfe2e163cf2a04ff869e7c1dba64a5971"
+  integrity sha512-Wo8VsW4IRQSKVXsJCn7TomUaVtyfjVDn3nUP7kE967BQk0CwFpdbZs0X0uk5sW9mkBa9eNM7hCMaG93WUAwxYQ==
+
 p-limit@3.1.0, p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
@@ -16920,7 +16970,7 @@ purest@4.0.2:
     request-multipart "^1.0.0"
     request-oauth "^1.0.1"
 
-q@^1.1.2:
+q@^1.1.2, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -17394,6 +17444,19 @@ readable-stream@1.1.x:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@^2.0.0, readable-stream@~2.3.6:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^2.0.1, readable-stream@^2.0.6, readable-stream@^2.2.2:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
@@ -17426,19 +17489,6 @@ readable-stream@~1.0.31:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@~2.3.6:
-  version "2.3.8"
-  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
-  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 readable-web-to-node-stream@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz"