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
2023-07-04 17:47:40 +02:00
parent de10cfc551
commit 2a48360784
12 changed files with 323 additions and 36 deletions
--- a/back/config/env/production/plugins.js
+++ b/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: {},
+      },
+    },
+  },
+});
--- a/back/database/migrations/development.db
+++ b/back/database/migrations/development.db
--- a/back/database/migrations/images/uztailak-9-irudia.jpeg
+++ b/back/database/migrations/images/uztailak-9-irudia.jpeg
--- a/back/database/migrations/images/uztailak-9.jpeg
+++ b/back/database/migrations/images/uztailak-9.jpeg
--- a/back/package.json
+++ b/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",
--- a/back/src/components/hasiera/sf-eguna.json
+++ b/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
    }
  }
 }
--- a/front/src/components/Dialog.tsx
+++ b/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%);
+    }
+  }
+`;
--- a/front/src/components/SEO.tsx
+++ b/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>
 );
--- a/front/src/components/SFEgunaEdukia.tsx
+++ b/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>
      ))}
--- a/front/src/images/og-image.jpeg
+++ b/front/src/images/og-image.jpeg
--- a/front/src/pages/sanferminak.tsx
+++ b/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;
  `}
--- a/yarn.lock
+++ b/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"