OG Image jartzen du (#7)

* feat: og image sartzen du sanferminetan * feat: SEO konponentea sortzen du * refactor: orri guztietan SEO konponentea erabiltzen du * feat: focus hobetzen du * feat: favicon aldatzen du * feat: koloreak aldatzen ditu
2023-07-03 19:13:17 +02:00
parent 89436522b2
commit de10cfc551
16 changed files with 119 additions and 64 deletions
--- a/front/src/assets/favicon.svg
+++ b/front/src/assets/favicon.svg
@@ -2,7 +2,7 @@
    <defs>
        <style>
            .cls-1 {
-                fill: #510DFB;
+                fill: #191919;
            }
        </style>
    </defs>
--- a/front/src/components/Gainburua/DesktopNabigazioa.tsx
+++ b/front/src/components/Gainburua/DesktopNabigazioa.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { Link } from 'gatsby';
 import styled, { css } from 'styled-components';
 import { rem } from 'polished';
 import { size } from '../../ui/theme';
 import { AtalaName } from './Gainburua';
+import { GainburuLink } from './GainburuLink';

 interface Props {
  atala?: AtalaName;
@@ -14,13 +14,13 @@ export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
    <Nabigazioa>
      <EstekaZerrenda>
        <Esteka aktiboa={atala === 'hasiera'}>
-          <Link to="/">Laba gara</Link>
+          <GainburuLink to="/">Laba gara</GainburuLink>
        </Esteka>
        <Esteka aktiboa={atala === 'sanferminak'}>
-          <Link to="/sanferminak">Sanferminak</Link>
+          <GainburuLink to="/sanferminak">Sanferminak</GainburuLink>
        </Esteka>
        <Esteka aktiboa={atala === 'kafetegia'}>
-          <Link to="/kafetegia">Dastatu Laba</Link>
+          <GainburuLink to="/kafetegia">Dastatu Laba</GainburuLink>
        </Esteka>
      </EstekaZerrenda>
    </Nabigazioa>
--- a/front/src/components/Gainburua/GainburuLink.tsx
+++ b/front/src/components/Gainburua/GainburuLink.tsx
@@ -0,0 +1,8 @@
+import { Link } from 'gatsby';
+import styled from 'styled-components';
+
+export const GainburuLink = styled(Link)`
+  &:focus {
+    outline: 3px solid var(--hover-color);
+  }
+`;
--- a/front/src/components/Gainburua/Gainburua.tsx
+++ b/front/src/components/Gainburua/Gainburua.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'gatsby';

 import { rem } from 'polished';
 import styled from 'styled-components';
@@ -13,6 +12,7 @@ import { MugikorNabigazioa } from './MugikorNabigazioa';
 import MediaQuery from 'react-responsive';
 import { KontaktuDatuak } from './KontaktuDatuak';
 import Gezia from '../../assets/gezia.svg';
+import { GainburuLink } from './GainburuLink';

 export type AtalaName = 'hasiera' | 'kafetegia' | 'sanferminak';

@@ -27,7 +27,6 @@ export const Gainburua: React.FC<Props> = ({
  izenburua,
  deskribapena,
  atala,
-  onClick,
 }) => {
  return (
    <Wrapper atala={atala}>
@@ -38,11 +37,11 @@ export const Gainburua: React.FC<Props> = ({
              <MugikorNabigazioa />
            </MenuWrapper>
            <MugikorLogoWrapper>
-              <Link to="/">
+              <GainburuLink to="/">
                <LogoWrapper>
                  <Logo title="Laba gara" atala={atala} />
                </LogoWrapper>
-              </Link>
+              </GainburuLink>
            </MugikorLogoWrapper>
          </MugikorWrapper>
        </Container>
@@ -50,11 +49,11 @@ export const Gainburua: React.FC<Props> = ({

      <MediaQuery minWidth={breakpoints.tablet}>
        <GainburuWrapper>
-          <Link to="/">
+          <GainburuLink to="/">
            <LogoWrapper>
              <Logo title="Laba gara" atala={atala} />
            </LogoWrapper>
-          </Link>
+          </GainburuLink>

          <KontaktuDatuak />
        </GainburuWrapper>
@@ -71,7 +70,9 @@ export const Gainburua: React.FC<Props> = ({
            </IzenburuWrapper>

            <GeziaWrapper>
-              <GeziaLogo atala={atala} onClick={onClick} />
+              <GainburuLink to="#edukia">
+                <GeziaLogo atala={atala} />
+              </GainburuLink>
            </GeziaWrapper>
          </Container>
        </Nagusia>
@@ -233,11 +234,11 @@ const Izenburua = styled.h1`

 function getAtalaBackground(atala?: AtalaName) {
  if (atala === 'sanferminak') {
-    return colors.morea;
+    return colors.gorria;
  }

  if (atala === 'hasiera') {
-    return colors.gorria;
+    return colors.morea;
  }

  if (atala === 'kafetegia') {
--- a/front/src/components/Gainburua/KontaktuDatuak.tsx
+++ b/front/src/components/Gainburua/KontaktuDatuak.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { font, size } from '../../ui/theme';
 import InstagramLogo from '../../assets/instagram.svg';
 import TwitterLogo from '../../assets/twitter.svg';
+import { GainburuLink } from './GainburuLink';

 /**
 * ERREPIKATUA
@@ -22,23 +23,23 @@ export const KontaktuDatuak: React.FC = () => {

      <SareSozialak>
        <SareSoziala>
-          <a
+          <GainburuLink
            tabIndex={0}
            aria-label="Laba Twitterren"
-            href="https://twitter.com/labasarea/"
+            to="https://twitter.com/labasarea/"
          >
            <Twitter title="Laba Twitterren" />
-          </a>
+          </GainburuLink>
        </SareSoziala>

        <SareSoziala>
-          <a
+          <GainburuLink
            tabIndex={0}
            aria-label="Laba Instagramen"
-            href="https://www.instagram.com/labasarea/"
+            to="https://www.instagram.com/labasarea/"
          >
            <Instagram role="link" title="Laba Instagramen" />
-          </a>
+          </GainburuLink>
        </SareSoziala>
      </SareSozialak>
    </Kontaktua>
--- a/front/src/components/Oina.tsx
+++ b/front/src/components/Oina.tsx
@@ -26,4 +26,8 @@ const Esteka = styled(Link)`
  &:hover {
    color: ${colors.morea};
  }
+
+  &:focus {
+    outline: 2px solid ${colors.morea};
+  }
 `;
--- a/front/src/components/SEO.tsx
+++ b/front/src/components/SEO.tsx
@@ -0,0 +1,24 @@
+import { PageProps } from 'gatsby';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import ogImagePath from '../images/og-image.jpeg';
+
+interface Props {
+  title: string;
+  description?: string;
+
+  location: PageProps['location'];
+}
+
+export const SEO: React.VFC<Props> = ({ title, description, location }) => (
+  <Helmet title={`${title} | Laba`} htmlAttributes={{ lang: 'eu' }}>
+    {description && <meta name="description" content={description} />}
+
+    <meta
+      name="og:image"
+      content={`${location.protocol}//${location.host}${ogImagePath}`}
+    />
+    <meta name="og:image:height" content="500" />
+    <meta name="og:image:width" content="1500" />
+  </Helmet>
+);
--- a/front/src/images/og-image.jpeg
+++ b/front/src/images/og-image.jpeg
--- a/front/src/pages/404.tsx
+++ b/front/src/pages/404.tsx
@@ -1,13 +1,29 @@
 import React from 'react';
 import { Link } from 'gatsby';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import { Gainburua } from '../components/Gainburua';
+import { Container } from '../components/Container';
+import { Helmet } from 'react-helmet';

 const NotFoundPage: React.VFC = () => {
  return (
-    <main>
-      <h1>Ez dugu orria topatu</h1>
-      <br />
-      <Link to="/">Hasierara bueltatu</Link>
-    </main>
+    <>
+      <Helmet
+        title={`Ez dugu orria topatu | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      />
+
+      <GlobalStyles />
+      <Gainburua />
+
+      <Container>
+        <main>
+          <h1>Ez dugu orria topatu</h1>
+          <br />
+          <Link to="/">Hasierara bueltatu</Link>
+        </main>
+      </Container>
+    </>
  );
 };

--- a/front/src/pages/index.tsx
+++ b/front/src/pages/index.tsx
@@ -2,7 +2,6 @@ import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
 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';
@@ -11,6 +10,7 @@ import { rem } from 'polished';
 import Gezia from '../assets/gezia.svg';
 import ReactMarkdown from 'react-markdown';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';

 interface DataProps {
  strapiHasiera: {
@@ -20,7 +20,7 @@ interface DataProps {
  };
 }

-const IndexPage: React.VFC<PageProps> = () => {
+const IndexPage: React.VFC<PageProps> = ({ location }) => {
  const { strapiHasiera } = useStaticQuery<DataProps>(graphql`
    {
      strapiHasiera {
@@ -33,12 +33,11 @@ const IndexPage: React.VFC<PageProps> = () => {

  return (
    <>
-      <Helmet
-        title={`${strapiHasiera.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      >
-        <meta name="description" content={strapiHasiera.deskribapena} />
-      </Helmet>
+      <SEO
+        title={strapiHasiera.izenburua}
+        description={strapiHasiera.deskribapena}
+        location={location}
+      />

      <GlobalStyles />

@@ -96,6 +95,11 @@ const Botoia = styled.a`
  &:hover {
    color: ${colors.morea};
  }
+
+  &:focus {
+    border: 2px solid ${colors.zuria};
+    outline: 3px solid ${colors.morea};
+  }
 `;

 const GeziaLogo = styled(Gezia)`
--- a/front/src/pages/kafetegia.tsx
+++ b/front/src/pages/kafetegia.tsx
@@ -2,7 +2,6 @@ import { PageProps, navigate } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';

-import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
 import { Container } from '../components/Container';
 import styled from 'styled-components';
@@ -15,8 +14,9 @@ import { Produktua } from '../domain/models/Produktua';
 import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
 import { AlergenoLegenda } from '../components/AlergenoLegenda';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';

-const Kafetegia: React.VFC<PageProps> = () => {
+const Kafetegia: React.VFC<PageProps> = ({ location }) => {
  const {
    izenburua,
    deskribapena,
@@ -32,9 +32,7 @@ const Kafetegia: React.VFC<PageProps> = () => {

  return (
    <>
-      <Helmet title={`${izenburua} | Laba`} htmlAttributes={{ lang: 'eu' }}>
-        <meta name="description" content={deskribapena} />
-      </Helmet>
+      <SEO title={izenburua} description={deskribapena} location={location} />

      <GlobalStyles />

--- a/front/src/pages/lege-oharra.tsx
+++ b/front/src/pages/lege-oharra.tsx
@@ -2,7 +2,6 @@ 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';
@@ -10,6 +9,7 @@ import { font, fontWeight, size } from '../ui/theme';
 import { rem } from 'polished';
 import { Gainburua } from '../components/Gainburua';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';

 interface DataProps {
  strapiLegeOharra: {
@@ -18,7 +18,7 @@ interface DataProps {
  };
 }

-const LegeOharra: React.VFC<PageProps> = () => {
+const LegeOharra: React.VFC<PageProps> = ({ location }) => {
  const { strapiLegeOharra } = useStaticQuery<DataProps>(graphql`
    {
      strapiLegeOharra {
@@ -30,10 +30,7 @@ const LegeOharra: React.VFC<PageProps> = () => {

  return (
    <>
-      <Helmet
-        title={`${strapiLegeOharra.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      />
+      <SEO title={strapiLegeOharra.izenburua} location={location} />

      <GlobalStyles />

--- a/front/src/pages/pribatutasun-politika.tsx
+++ b/front/src/pages/pribatutasun-politika.tsx
@@ -3,7 +3,6 @@ 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';
@@ -11,6 +10,7 @@ import { colors, font, fontWeight, size } from '../ui/theme';
 import { rem } from 'polished';
 import { Gainburua } from '../components/Gainburua';
 import { Oina } from '../components/Oina';
+import { SEO } from '../components/SEO';

 interface DataProps {
  strapiPribatutasunPolitika: {
@@ -19,7 +19,7 @@ interface DataProps {
  };
 }

-const PribatutasunPolitika: React.VFC<PageProps> = () => {
+const PribatutasunPolitika: React.VFC<PageProps> = ({ location }) => {
  const { strapiPribatutasunPolitika } = useStaticQuery<DataProps>(graphql`
    {
      strapiPribatutasunPolitika {
@@ -31,10 +31,7 @@ const PribatutasunPolitika: React.VFC<PageProps> = () => {

  return (
    <>
-      <Helmet
-        title={`${strapiPribatutasunPolitika.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      />
+      <SEO title={strapiPribatutasunPolitika.izenburua} location={location} />

      <GlobalStyles />

--- a/front/src/pages/sanferminak.tsx
+++ b/front/src/pages/sanferminak.tsx
@@ -2,7 +2,6 @@ import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';

-import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
 import styled from 'styled-components';
 import { colors, font, fontWeight, media, size } from '../ui/theme';
@@ -12,6 +11,7 @@ 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';

 export interface SFEguna {
  id: string;
@@ -34,7 +34,7 @@ interface DataProps {
  };
 }

-const IndexPage: React.VFC<PageProps> = () => {
+const IndexPage: React.VFC<PageProps> = ({ location }) => {
  const { strapiSanferminak } = useStaticQuery<DataProps>(graphql`
    {
      strapiSanferminak {
@@ -58,18 +58,14 @@ const IndexPage: React.VFC<PageProps> = () => {

  return (
    <>
-      <Helmet
-        title={`${strapiSanferminak.datu_orokorrak.izenburua} | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      >
-        <meta
-          name="description"
-          content={strapiSanferminak.datu_orokorrak.deskribapena}
-        />
-      </Helmet>
-
      <GlobalStyles />

+      <SEO
+        location={location}
+        title={strapiSanferminak.datu_orokorrak.izenburua}
+        description={strapiSanferminak.datu_orokorrak.izenburua}
+      />
+
      <Gainburua
        atala="sanferminak"
        izenburua={strapiSanferminak.datu_orokorrak.izenburua}
@@ -123,7 +119,7 @@ const SFEgunaElementua = styled.li`
        background-color: ${colors.beltza};
      }
      33% {
-        background-color: ${colors.morea};
+        background-color: ${colors.gorria};
      }
      66% {
        background-color: ${colors.beltza};