diff --git a/front/index.d.ts b/front/index.d.ts new file mode 100644 index 0000000..2e96954 --- /dev/null +++ b/front/index.d.ts @@ -0,0 +1,9 @@ +declare module '*.png' { + const value: string; + export default value; +} + +declare module '*.jpeg' { + const value: string; + export default value; +} diff --git a/front/src/assets/favicon.svg b/front/src/assets/favicon.svg index 11a7a6c..955a985 100644 --- a/front/src/assets/favicon.svg +++ b/front/src/assets/favicon.svg @@ -2,7 +2,7 @@ diff --git a/front/src/components/Gainburua/DesktopNabigazioa.tsx b/front/src/components/Gainburua/DesktopNabigazioa.tsx index d0e503e..e32cfd9 100644 --- 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 = ({ atala }) => { - Laba gara + Laba gara - Sanferminak + Sanferminak - Dastatu Laba + Dastatu Laba diff --git a/front/src/components/Gainburua/GainburuLink.tsx b/front/src/components/Gainburua/GainburuLink.tsx new file mode 100644 index 0000000..f18dd3a --- /dev/null +++ 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); + } +`; diff --git a/front/src/components/Gainburua/Gainburua.tsx b/front/src/components/Gainburua/Gainburua.tsx index 06184dc..4a3060b 100644 --- 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 = ({ izenburua, deskribapena, atala, - onClick, }) => { return ( @@ -38,11 +37,11 @@ export const Gainburua: React.FC = ({ - + - + @@ -50,11 +49,11 @@ export const Gainburua: React.FC = ({ - + - + @@ -71,7 +70,9 @@ export const Gainburua: React.FC = ({ - + + + @@ -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') { diff --git a/front/src/components/Gainburua/KontaktuDatuak.tsx b/front/src/components/Gainburua/KontaktuDatuak.tsx index 524a694..fb12c9b 100644 --- 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 = () => { - - + - - + diff --git a/front/src/components/Oina.tsx b/front/src/components/Oina.tsx index e008808..a95987a 100644 --- 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}; + } `; diff --git a/front/src/components/SEO.tsx b/front/src/components/SEO.tsx new file mode 100644 index 0000000..5732818 --- /dev/null +++ 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 = ({ title, description, location }) => ( + + {description && } + + + + + +); diff --git a/front/src/images/og-image.jpeg b/front/src/images/og-image.jpeg new file mode 100644 index 0000000..77855d9 Binary files /dev/null and b/front/src/images/og-image.jpeg differ diff --git a/front/src/pages/404.tsx b/front/src/pages/404.tsx index 8400ac3..d373343 100644 --- 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 ( -
-

Ez dugu orria topatu

-
- Hasierara bueltatu -
+ <> + + + + + + +
+

Ez dugu orria topatu

+
+ Hasierara bueltatu +
+ + ); }; diff --git a/front/src/pages/index.tsx b/front/src/pages/index.tsx index 7129e08..4aa78e6 100644 --- 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 = () => { +const IndexPage: React.VFC = ({ location }) => { const { strapiHasiera } = useStaticQuery(graphql` { strapiHasiera { @@ -33,12 +33,11 @@ const IndexPage: React.VFC = () => { return ( <> - - - + @@ -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)` diff --git a/front/src/pages/kafetegia.tsx b/front/src/pages/kafetegia.tsx index 6c94f98..5aecb6f 100644 --- 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 = () => { +const Kafetegia: React.VFC = ({ location }) => { const { izenburua, deskribapena, @@ -32,9 +32,7 @@ const Kafetegia: React.VFC = () => { return ( <> - - - + diff --git a/front/src/pages/lege-oharra.tsx b/front/src/pages/lege-oharra.tsx index 6ee01ac..1607425 100644 --- 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 = () => { +const LegeOharra: React.VFC = ({ location }) => { const { strapiLegeOharra } = useStaticQuery(graphql` { strapiLegeOharra { @@ -30,10 +30,7 @@ const LegeOharra: React.VFC = () => { return ( <> - + diff --git a/front/src/pages/pribatutasun-politika.tsx b/front/src/pages/pribatutasun-politika.tsx index c29ff85..e8df0e9 100644 --- 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 = () => { +const PribatutasunPolitika: React.VFC = ({ location }) => { const { strapiPribatutasunPolitika } = useStaticQuery(graphql` { strapiPribatutasunPolitika { @@ -31,10 +31,7 @@ const PribatutasunPolitika: React.VFC = () => { return ( <> - + diff --git a/front/src/pages/sanferminak.tsx b/front/src/pages/sanferminak.tsx index decfd62..737fc35 100644 --- 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 = () => { +const IndexPage: React.VFC = ({ location }) => { const { strapiSanferminak } = useStaticQuery(graphql` { strapiSanferminak { @@ -58,18 +58,14 @@ const IndexPage: React.VFC = () => { return ( <> - - - - + +