Bazkidetza sortzen du (#4)

* feat: back-en propietatea sortzen du

* feat: bazkidetzarako testua sartzen du

* feat: maketazioa konpontzen du

* feat: gezia sartzen du

* fix: consola zuzenketak egiten ditu

* feat: margina konpontzen du

* fix: html-a konpontzen du

* feat: izena aldatzen du

* feat: lege oharra sortzen du

* feat: pribatutasun politika sortzen du

back/src/api/hasiera/content-types/hasiera/schema.json

@@ -17,6 +17,10 @@
     },
     "izenburua": {
       "type": "string"
+    },
+    "bazkidetza": {
+      "type": "richtext",
+      "required": true
     }
   }
 }

back/src/api/lege-oharra/content-types/lege-oharra/schema.json

@@ -0,0 +1,24 @@
+{
+  "kind": "singleType",
+  "collectionName": "lege_oharrak",
+  "info": {
+    "singularName": "lege-oharra",
+    "pluralName": "lege-oharrak",
+    "displayName": "Lege Oharra",
+    "description": ""
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "izenburua": {
+      "type": "string",
+      "required": true
+    },
+    "edukia": {
+      "type": "richtext",
+      "required": true
+    }
+  }
+}

back/src/api/lege-oharra/controllers/lege-oharra.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ *  lege-oharra controller
+ */
+
+const { createCoreController } = require('@strapi/strapi').factories;
+
+module.exports = createCoreController('api::lege-oharra.lege-oharra');

back/src/api/lege-oharra/routes/lege-oharra.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * lege-oharra router.
+ */
+
+const { createCoreRouter } = require('@strapi/strapi').factories;
+
+module.exports = createCoreRouter('api::lege-oharra.lege-oharra');

back/src/api/lege-oharra/services/lege-oharra.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * lege-oharra service.
+ */
+
+const { createCoreService } = require('@strapi/strapi').factories;
+
+module.exports = createCoreService('api::lege-oharra.lege-oharra');

back/src/api/pribatutasun-politika/content-types/pribatutasun-politika/schema.json

@@ -0,0 +1,21 @@
+{
+  "kind": "singleType",
+  "collectionName": "pribatutasun_politikak",
+  "info": {
+    "singularName": "pribatutasun-politika",
+    "pluralName": "pribatutasun-politikak",
+    "displayName": "Pribatutasun politika"
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "izenburua": {
+      "type": "string"
+    },
+    "edukia": {
+      "type": "richtext"
+    }
+  }
+}

back/src/api/pribatutasun-politika/controllers/pribatutasun-politika.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ *  pribatutasun-politika controller
+ */
+
+const { createCoreController } = require('@strapi/strapi').factories;
+
+module.exports = createCoreController('api::pribatutasun-politika.pribatutasun-politika');

back/src/api/pribatutasun-politika/routes/pribatutasun-politika.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * pribatutasun-politika router.
+ */
+
+const { createCoreRouter } = require('@strapi/strapi').factories;
+
+module.exports = createCoreRouter('api::pribatutasun-politika.pribatutasun-politika');

back/src/api/pribatutasun-politika/services/pribatutasun-politika.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * pribatutasun-politika service.
+ */
+
+const { createCoreService } = require('@strapi/strapi').factories;
+
+module.exports = createCoreService('api::pribatutasun-politika.pribatutasun-politika');

front/gatsby-config.js

@@ -68,6 +68,8 @@ module.exports = {
               populate: '*',
             },
           },
+          'lege-oharra',
+          'pribatutasun-politika',
         ],
         queryLimit: 1000,
       },

front/package.json

@@ -17,6 +17,7 @@
     "prettier": "prettier . --write"
   },
   "dependencies": {
+    "@strapi/plugin-graphql": "^4.1.12",
     "@types/styled-components": "^5.1.20",
     "babel-plugin-styled-components": "^2.0.2",
     "gatsby": "^4.5.2",
@@ -37,7 +38,9 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-markdown": "^8.0.3",
     "react-responsive": "^9.0.0-beta.6",
+    "remark-gfm": "^3.0.1",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {

front/src/assets/gezia.svg

@@ -0,0 +1,4 @@
+<svg width="37" height="31" viewBox="0 0 37 31" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.249298 18.36L25.3407 18.36L17.0741 26.58L21.1571 30.64L32.32 19.54L36.3829 15.48L32.32 11.42L21.1571 0.320013L17.0741 4.39001L25.3407 12.61L0.249298 12.61L0.249298 18.36Z" fill="#191919"/>
+</svg>

front/src/components/Gainburua/DesktopNabigazioa.tsx

@@ -5,7 +5,7 @@ import { rem } from 'polished';
 import { size } from '../../ui/theme';
 
 export const DesktopNabigazioa: React.FC<{
-  atala: 'hasiera' | 'kafetegia';
+  atala?: 'hasiera' | 'kafetegia';
 }> = ({ atala }) => {
   return (
     <Nabigazioa>
@@ -24,6 +24,7 @@ export const DesktopNabigazioa: React.FC<{
 export const Nabigazioa = styled.nav`
   display: flex;
   justify-content: center;
+  padding-bottom: ${rem(size.tiny)};
 `;
 
 export const EstekaZerrenda = styled.ul`

front/src/components/Gainburua/Gainburua.tsx

@@ -12,17 +12,20 @@ import { DesktopNabigazioa } from './DesktopNabigazioa';
 import { MugikorNabigazioa } from './MugikorNabigazioa';
 import MediaQuery from 'react-responsive';
 import { KontaktuDatuak } from './KontaktuDatuak';
+import Gezia from '../../assets/gezia.svg';
 
 interface Props {
-  izenburua: string;
-  deskribapena: string;
-  atala: 'hasiera' | 'kafetegia';
+  izenburua?: string;
+  deskribapena?: string;
+  atala?: 'hasiera' | 'kafetegia';
+  onClick?: () => void;
 }
 
 export const Gainburua: React.FC<Props> = ({
   izenburua,
   deskribapena,
   atala,
+  onClick,
 }) => {
   return (
     <Wrapper atala={atala}>
@@ -55,16 +58,22 @@ export const Gainburua: React.FC<Props> = ({
         </GainburuWrapper>
       </MediaQuery>
 
-      <Nagusia>
-        <Container>
-          <Deskribapena>{deskribapena}</Deskribapena>
+      {deskribapena && (
+        <Nagusia>
+          <Container>
+            <Deskribapena>{deskribapena}</Deskribapena>
 
-          <IzenburuWrapper>
-            <Marra />
-            <Izenburua>{izenburua}</Izenburua>
-          </IzenburuWrapper>
-        </Container>
-      </Nagusia>
+            <IzenburuWrapper>
+              <Marra />
+              <Izenburua>{izenburua}</Izenburua>
+            </IzenburuWrapper>
+
+            <GeziaWrapper>
+              <GeziaLogo atala={atala} onClick={onClick} />
+            </GeziaWrapper>
+          </Container>
+        </Nagusia>
+      )}
 
       <MediaQuery minWidth={breakpoints.tablet}>
         <DesktopNabigazioa atala={atala} />
@@ -73,6 +82,36 @@ export const Gainburua: React.FC<Props> = ({
   );
 };
 
+const GeziaWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
+  cursor: pointer;
+  path {
+    fill: ${({ atala }) =>
+      atala === 'hasiera' ? colors.zuria : colors.beltza};
+  }
+
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-name: bounce-2;
+  animation-timing-function: ease;
+
+  @keyframes bounce-2 {
+    0% {
+      transform: rotate(90deg) translateX(0);
+    }
+    50% {
+      transform: rotate(90deg) translateX(-${size.base}px);
+    }
+    100% {
+      transform: rotate(90deg) translateX(0);
+    }
+  }
+`;
+
 const Nagusia = styled.main`
   flex-grow: 1;
 `;
@@ -99,7 +138,7 @@ const MugikorLogoWrapper = styled.div`
   justify-content: center;
 `;
 
-const Wrapper = styled.div<{ atala: 'hasiera' | 'kafetegia' }>`
+const Wrapper = styled.div<{ atala?: 'hasiera' | 'kafetegia' }>`
   --color: ${({ atala }) =>
     atala === 'hasiera' ? colors.zuria : colors.beltza};
 
@@ -110,13 +149,12 @@ const Wrapper = styled.div<{ atala: 'hasiera' | 'kafetegia' }>`
     atala === 'hasiera' ? colors.gorria : colors.horia};
   color: var(--color);
 
-  padding-bottom: ${rem(size.tiny)};
-
   /* HACK: Hasiera orriak edukirik ez duenez, gainburuak altuera osoa hartuko du */
   min-height: ${({ atala }) => (atala === 'hasiera' ? '100vh' : '0')};
 
   ${media.desktop`
-    min-height: 100vh;  
+    min-height: ${({ atala }: { atala: 'hasiera' | 'kafetegia' }) =>
+      Boolean(atala) ? '100vh' : '0'};  
   `}
 `;
 
@@ -135,7 +173,6 @@ const GainburuWrapper = styled.header`
   display: flex;
   align-items: start;
   justify-content: space-between;
-  margin-bottom: ${rem(size.base)};
 
   ${media.tablet`
     padding: ${rem(size.large)};
@@ -157,6 +194,7 @@ const IzenburuWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  margin-bottom: ${rem(size.large)};
 `;
 
 const Marra = styled.div`

front/src/components/Gainburua/KontaktuDatuak.tsx

@@ -27,7 +27,7 @@ export const KontaktuDatuak: React.FC = () => {
             aria-label="Laba Twitterren"
             href="https://twitter.com/labasarea/"
           >
-            <Twitter aria-role="link" title="Laba Twitterren" />
+            <Twitter title="Laba Twitterren" />
           </a>
         </SareSoziala>
 

front/src/components/Gainburua/MugikorNabigazioa.tsx

@@ -132,7 +132,7 @@ const KontaktuDatuak: React.FC = () => {
             aria-label="Laba Twitterren"
             href="https://twitter.com/labasarea/"
           >
-            <Twitter aria-role="link" title="Laba Twitterren" />
+            <Twitter title="Laba Twitterren" />
           </a>
         </SareSoziala>
 

front/src/components/Oina.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'gatsby';
+import { rem } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+import { size } from '../ui/theme';
+
+export const Oina: React.VFC = () => (
+  <Wrapper>
+    <Link to="/lege-oharra">Lege-oharra</Link>
+  </Wrapper>
+);
+
+const Wrapper = styled.footer`
+  display: flex;
+  justify-content: center;
+  padding: ${rem(size.base)};
+`;

front/src/pages/404.tsx

@@ -6,7 +6,7 @@ const NotFoundPage: React.VFC = () => {
     <main>
       <h1>Ez dugu orria topatu</h1>
       <br />
-      <Link to="/">Go home</Link>.
+      <Link to="/">Hasierara bueltatu</Link>
     </main>
   );
 };

front/src/pages/index.tsx

@@ -4,6 +4,13 @@ import { GlobalStyles } from '../ui/GlobalStyles';
 
 import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
+import styled from 'styled-components';
+import { colors, font, fontWeight, size } from '../ui/theme';
+import { Container } from '../components/Container';
+import { rem } from 'polished';
+import Gezia from '../assets/gezia.svg';
+import ReactMarkdown from 'react-markdown';
+import { Oina } from '../components/Oina';
 
 interface DataProps {
   strapiHasiera: {
@@ -11,6 +18,7 @@ interface DataProps {
       attributes: {
         deskribapena: string;
         izenburua: string;
+        bazkidetza: string;
       };
     };
   };
@@ -24,6 +32,7 @@ const IndexPage: React.VFC<PageProps> = () => {
           attributes {
             deskribapena
             izenburua
+            bazkidetza
           }
         }
       }
@@ -48,9 +57,62 @@ const IndexPage: React.VFC<PageProps> = () => {
         atala="hasiera"
         izenburua={strapiHasiera.data.attributes.izenburua}
         deskribapena={strapiHasiera.data.attributes.deskribapena}
+        onClick={() => {
+          window.location.replace('/#labazkidetza');
+        }}
       />
+
+      <ContentWrapper id="labazkidetza">
+        <Container>
+          <Deskribapena>
+            {strapiHasiera.data.attributes.bazkidetza}
+          </Deskribapena>
+
+          <IzanLabaWrapper>
+            <Botoia href="https://forms.gle/sRq2ejXqv6q88sQe9">
+              <GeziaLogo /> Labazkidetu.
+            </Botoia>
+          </IzanLabaWrapper>
+        </Container>
+      </ContentWrapper>
+
+      <Oina />
     </>
   );
 };
 
+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()};
+`;
+
+const Botoia = styled.a`
+  border: 2px solid ${colors.beltza};
+  ${font.large()};
+  padding: ${rem(size.base)};
+  background: ${colors.zuria};
+  font-weight: ${fontWeight.bold};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`;
+
+const GeziaLogo = styled(Gezia)`
+  margin-right: ${rem(size.tiny)};
+`;
+
+const IzanLabaWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export default IndexPage;

front/src/pages/kafetegia.tsx

@@ -14,6 +14,7 @@ import { rem } from 'polished';
 import { Produktua } from '../domain/models/Produktua';
 import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
 import { AlergenoLegenda } from '../components/AlergenoLegenda';
+import { Oina } from '../components/Oina';
 
 const Kafetegia: React.VFC<PageProps> = () => {
   const {
@@ -41,9 +42,12 @@ const Kafetegia: React.VFC<PageProps> = () => {
         atala="kafetegia"
         izenburua={izenburua}
         deskribapena={deskribapena}
+        onClick={() => {
+          window.location.replace('/kafetegia/#kafetegia');
+        }}
       />
 
-      <ContentWrapper>
+      <ContentWrapper id="kafetegia">
         <Container>
           <TaldeWrapper>
             <IzenburuWrapper>
@@ -125,6 +129,8 @@ const Kafetegia: React.VFC<PageProps> = () => {
           </OnEgin>
         </Container>
       </ContentWrapper>
+
+      <Oina />
     </>
   );
 };

front/src/pages/lege-oharra.tsx

@@ -0,0 +1,106 @@
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
+import React from 'react';
+import { GlobalStyles } from '../ui/GlobalStyles';
+
+import { Helmet } from 'react-helmet';
+import { Container } from '../components/Container';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+import { font, fontWeight, size } from '../ui/theme';
+import { rem } from 'polished';
+import { Gainburua } from '../components/Gainburua';
+import { Oina } from '../components/Oina';
+
+interface DataProps {
+  strapiLegeOharra: {
+    data: {
+      attributes: {
+        izenburua: string;
+        edukia: string;
+      };
+    };
+  };
+}
+
+const LegeOharra: React.VFC<PageProps> = () => {
+  const { strapiLegeOharra } = useStaticQuery<DataProps>(graphql`
+    {
+      strapiLegeOharra {
+        data {
+          attributes {
+            izenburua
+            edukia
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <>
+      <Helmet
+        title={`${strapiLegeOharra.data.attributes.izenburua} | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      />
+
+      <GlobalStyles />
+
+      <Gainburua />
+
+      <Container>
+        <Atala>
+          <Edukia>{strapiLegeOharra.data.attributes.edukia}</Edukia>
+        </Atala>
+      </Container>
+
+      <Oina />
+    </>
+  );
+};
+
+const Atala = styled.section`
+  padding-top: ${rem(size.base)};
+`;
+
+const Edukia = styled(ReactMarkdown)`
+  font-weight: ${fontWeight.regular};
+  ${font.base()};
+
+  p:not(-last-child) {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h1 {
+    ${font.gargantuan()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h2 {
+    ${font.huge()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h3 {
+    ${font.large()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h4 {
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.mini)};
+  }
+
+  ul {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  li {
+    list-style: disc inside;
+    margin-bottom: ${rem(size.small)};
+  }
+`;
+
+export default LegeOharra;

front/src/pages/pribatutasun-politika.tsx

@@ -0,0 +1,120 @@
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
+import React from 'react';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import remarkGfm from 'remark-gfm';
+
+import { Helmet } from 'react-helmet';
+import { Container } from '../components/Container';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+import { colors, font, fontWeight, size } from '../ui/theme';
+import { rem } from 'polished';
+import { Gainburua } from '../components/Gainburua';
+import { Oina } from '../components/Oina';
+
+interface DataProps {
+  strapiPribatutasunPolitika: {
+    data: {
+      attributes: {
+        izenburua: string;
+        edukia: string;
+      };
+    };
+  };
+}
+
+const PribatutasunPolitika: React.VFC<PageProps> = () => {
+  const { strapiPribatutasunPolitika } = useStaticQuery<DataProps>(graphql`
+    {
+      strapiPribatutasunPolitika {
+        data {
+          attributes {
+            izenburua
+            edukia
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <>
+      <Helmet
+        title={`${strapiPribatutasunPolitika.data.attributes.izenburua} | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      />
+
+      <GlobalStyles />
+
+      <Gainburua />
+
+      <Container>
+        <Atala>
+          <Edukia>{strapiPribatutasunPolitika.data.attributes.edukia}</Edukia>
+        </Atala>
+      </Container>
+
+      <Oina />
+    </>
+  );
+};
+
+const Atala = styled.section`
+  padding-top: ${rem(size.base)};
+`;
+
+const Edukia = styled(ReactMarkdown).attrs({ remarkPlugins: [remarkGfm] })`
+  font-weight: ${fontWeight.regular};
+  ${font.base()};
+
+  p:not(-last-child) {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h1 {
+    ${font.gargantuan()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h2 {
+    ${font.huge()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h3 {
+    ${font.large()};
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.base)};
+  }
+
+  h4 {
+    font-weight: ${fontWeight.bold};
+    margin-bottom: ${rem(size.mini)};
+  }
+
+  ul {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  li {
+    list-style: disc inside;
+    margin-bottom: ${rem(size.small)};
+  }
+
+  table {
+    margin-bottom: ${rem(size.base)};
+  }
+
+  th {
+    padding: ${size.small}px;
+  }
+
+  td {
+    padding: ${size.small}px;
+    border: 1px solid ${colors.beltza};
+  }
+`;
+
+export default PribatutasunPolitika;

front/src/ui/GlobalStyles.tsx

@@ -197,6 +197,10 @@ export const GlobalStyles = createGlobalStyle`
   ${reset};
   ${reboot};
 
+  html {
+    scroll-behavior: smooth;
+  }
+
   body {
       font-family: 'Almarai', sans-serif;