Orri sekundarioak css modulesera pasatzen ditu (#14)

* refactor: extract component

* refactor: extract component

* refactor: use comonent

* feat: Orrialde basikoa CSS modulesera pasatzen du

* chore: erabiltzen ez den konponentea kentzen du

* feat: Oina CSS modulesera pasatzen du

* refactor: CSS variable

* chore: erabiltzen ez den tema kentzen du

* chore: erabiltzen ez den objektua kentzen du

* chore: dependentziak kentzen ditu

back/package.json

@@ -10,9 +10,9 @@
   "scripts": {
     "build": "strapi build",
     "develop": "strapi develop",
+    "public-proxy": "ngrok http --domain=vervet-big-dassie.ngrok-free.app 1337",
     "start": "strapi start",
-    "strapi": "strapi",
+    "strapi": "strapi"
-    "public-proxy": "ngrok http --domain=vervet-big-dassie.ngrok-free.app 1337"
   },
   "dependencies": {
     "@strapi/plugin-graphql": "^4.15.5",
@@ -26,8 +26,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "^5.2.0",
     "sqlite3": "5.1.6",
-    "strapi-plugin-netlify-deployments": "^2.0.2",
+    "strapi-plugin-netlify-deployments": "^2.0.2"
-    "styled-components": "^5.2.1"
   },
   "strapi": {
     "uuid": "b0fa2552-2961-4886-8673-c2d7fe07b8a1"

front/gatsby-config.js

@@ -32,7 +32,6 @@ module.exports = {
     },
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
-    'gatsby-plugin-styled-components',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {

front/package.json

@@ -18,8 +18,6 @@
   },
   "dependencies": {
     "@strapi/plugin-graphql": "^4.15.5",
-    "@types/styled-components": "^5.1.34",
-    "babel-plugin-styled-components": "^2.1.4",
     "dayjs": "^1.11.10",
     "gatsby": "^5.12.11",
     "gatsby-plugin-image": "^3.12.3",
@@ -30,12 +28,10 @@
     "gatsby-plugin-sass": "^6.12.3",
     "gatsby-plugin-sharp": "^5.12.3",
     "gatsby-plugin-sitemap": "^6.12.3",
-    "gatsby-plugin-styled-components": "^6.12.0",
     "gatsby-plugin-webfonts": "^2.3.2",
     "gatsby-source-filesystem": "^5.12.1",
     "gatsby-source-strapi-graphql": "^6.1.2",
     "gatsby-transformer-sharp": "^5.12.3",
-    "polished": "^4.2.2",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -43,7 +39,6 @@
     "react-markdown": "^8.0.7",
     "remark-gfm": "^3.0.1",
     "sass": "^1.69.5",
-    "styled-components": "^6.1.1",
     "typescript-plugin-css-modules": "^5.0.2"
   },
   "devDependencies": {

front/src/components/AlergenoLegenda/AlergenoLegenda.module.scss

@@ -15,12 +15,12 @@
 
 .izena {
   margin-bottom: var(--size-tiny);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   text-align: center;
 }
 
 .zenbakia {
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   text-align: center;
   color: var(--color-morea);
 }

front/src/components/Dialog.tsx

@@ -1,115 +0,0 @@
-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/Oina.tsx

@@ -1,33 +0,0 @@
-import { Link } from 'gatsby';
-import { rem } from 'polished';
-import React from 'react';
-import styled from 'styled-components';
-import { colors, size } from '../ui/theme';
-
-export const Oina: React.VFC = () => (
-  <Wrapper>
-    <Esteka to="/lege-oharra">Lege oharra</Esteka>
-    <Esteka to="/pribatutasun-politika">Pribatutasun politika</Esteka>
-  </Wrapper>
-);
-
-const Wrapper = styled.footer`
-  display: flex;
-  justify-content: center;
-  padding: ${rem(size.base)};
-`;
-
-const Esteka = styled(Link)`
-  &:not(:last-child) {
-    margin-right: ${rem(size.mini)};
-  }
-
-  transition: color 500ms ease-out 100ms;
-  &:hover {
-    color: ${colors.morea};
-  }
-
-  &:focus {
-    outline: 2px solid ${colors.morea};
-  }
-`;

front/src/components/Oina/Oina.module.scss

@@ -0,0 +1,20 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+  padding: var(--size-base);
+}
+
+.esteka {
+  &:not(:last-child) {
+    margin-right: var(--size-mini);
+  }
+
+  transition: color 500ms ease-out 100ms;
+  &:hover {
+    color: var(--color-morea);
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-morea);
+  }
+}

front/src/components/Oina/Oina.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Link } from 'gatsby';
+
+import * as styles from './Oina.module.scss';
+
+export const Oina: React.FC = () => (
+  <footer className={styles.wrapper}>
+    <Link className={styles.esteka} to="/lege-oharra">
+      Lege oharra
+    </Link>
+    <Link className={styles.esteka} to="/pribatutasun-politika">
+      Pribatutasun politika
+    </Link>
+  </footer>
+);

front/src/components/Oina/index.ts

@@ -0,0 +1 @@
+export { Oina } from './Oina';

front/src/components/SEO.tsx

@@ -1,6 +1,8 @@
-import { PageProps } from 'gatsby';
 import React from 'react';
 import { Helmet } from 'react-helmet';
+
+import { PageProps } from 'gatsby';
+
 import ogImagePath from '../images/og-image.jpeg';
 
 interface Props {
@@ -10,7 +12,7 @@ interface Props {
   location: PageProps['location'];
 }
 
-export const SEO: React.VFC<Props> = ({ title, description, location }) => (
+export const SEO: React.FC<Props> = ({ title, description, location }) => (
   <Helmet title={`${title} | Laba`} htmlAttributes={{ lang: 'eu' }}>
     {description && <meta name="description" content={description} />}
 

front/src/pages/404.tsx

@@ -1,30 +1,16 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 
-import { Link } from 'gatsby';
+import { PageProps } from 'gatsby';
 
-import { Container } from '../components/Container';
+import { SEO } from '../components/SEO';
-import { Gainburua } from '../components/Gainburua';
+import { NotFound } from '../views/NotFound';
-import { GlobalStyles } from '../ui/GlobalStyles';
 
-const NotFoundPage: React.FC = () => {
+const NotFoundPage: React.FC<PageProps> = ({ location }) => {
   return (
     <>
-      <Helmet
+      <SEO title="Ez dugu orria topatu" location={location} />
-        title={`Ez dugu orria topatu | Laba`}
-        htmlAttributes={{ lang: 'eu' }}
-      />
 
-      <GlobalStyles />
+      <NotFound />
-      <Gainburua />
-
-      <Container>
-        <main>
-          <h1>Ez dugu orria topatu</h1>
-          <br />
-          <Link to="/">Hasierara bueltatu</Link>
-        </main>
-      </Container>
     </>
   );
 };

front/src/pages/lege-oharra.tsx

@@ -1,24 +1,16 @@
-import { graphql, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
-import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Container } from '../components/Container';
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
-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';
 import { SEO } from '../components/SEO';
+import { RegularPage } from '../views/RegularPage';
+import { RegularPageContent } from '../views/RegularPage/RegularPageContent';
 
 interface DataProps {
-  strapiLegeOharra: {
+  strapiLegeOharra: RegularPageContent;
-    izenburua: string;
-    edukia: string;
-  };
 }
 
-const LegeOharra: React.VFC<PageProps> = ({ location }) => {
+const LegeOharra: React.FC<PageProps> = ({ location }) => {
   const { strapiLegeOharra } = useStaticQuery<DataProps>(graphql`
     {
       strapiLegeOharra {
@@ -32,64 +24,9 @@ const LegeOharra: React.VFC<PageProps> = ({ location }) => {
     <>
       <SEO title={strapiLegeOharra.izenburua} location={location} />
 
-      <GlobalStyles />
+      <RegularPage content={strapiLegeOharra} />
-
-      <Gainburua />
-
-      <Container>
-        <Atala>
-          <Edukia>{strapiLegeOharra.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

@@ -1,25 +1,16 @@
-import { graphql, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
-import { GlobalStyles } from '../ui/GlobalStyles';
-import remarkGfm from 'remark-gfm';
 
-import { Container } from '../components/Container';
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
-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';
 import { SEO } from '../components/SEO';
+import { RegularPage } from '../views/RegularPage/RegularPage';
+import { RegularPageContent } from '../views/RegularPage/RegularPageContent';
 
 interface DataProps {
-  strapiPribatutasunPolitika: {
+  strapiPribatutasunPolitika: RegularPageContent;
-    izenburua: string;
-    edukia: string;
-  };
 }
 
-const PribatutasunPolitika: React.VFC<PageProps> = ({ location }) => {
+const PribatutasunPolitika: React.FC<PageProps> = ({ location }) => {
   const { strapiPribatutasunPolitika } = useStaticQuery<DataProps>(graphql`
     {
       strapiPribatutasunPolitika {
@@ -33,83 +24,9 @@ const PribatutasunPolitika: React.VFC<PageProps> = ({ location }) => {
     <>
       <SEO title={strapiPribatutasunPolitika.izenburua} location={location} />
 
-      <GlobalStyles />
+      <RegularPage content={strapiPribatutasunPolitika} />
-
-      <Gainburua />
-
-      <Container>
-        <Atala>
-          <Edukia>{strapiPribatutasunPolitika.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};
-  }
-
-  hr {
-    border: 2px solid ${colors.horia};
-    margin-bottom: ${rem(size.base)};
-    margin-top: ${rem(size.base)};
-  }
-`;
-
 export default PribatutasunPolitika;

front/src/styles/cssConfig.scss

@@ -13,7 +13,7 @@ body {
   font-family: 'Almarai', sans-serif;
 
   @include baseFont;
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 
   color: var(--color-beltza);
 }

front/src/styles/generic/reboot.scss

@@ -31,5 +31,5 @@ body {
 }
 
 strong {
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 }

front/src/styles/settings/fontWeight.scss

@@ -0,0 +1,4 @@
+:root {
+  --font-weight-regular: 300;
+  --font-weight-bold: 700;
+}

front/src/styles/settings/index.scss

@@ -1,2 +1,3 @@
 @import 'colors';
 @import 'sizes';
+@import 'fontWeight';

front/src/ui/GlobalStyles.tsx

@@ -1,213 +0,0 @@
-import { createGlobalStyle, css } from 'styled-components';
-
-import { font, fontWeight } from './theme';
-import { colors } from './theme/colors';
-
-/**
- * Inicializa estilos base
- * 1. Change from `box-sizing: content-box` so that `width` is not affected
- *    by `padding` or `border`.
- * 2. As a best practice, apply a default 'background-color'.
- * 3. Set an explicit initial text-align value so that we can later use the the 'inherit'
- *    value on things like '<th>' elements.
- * 4. Prevent adjustments of font size after orientation changes in IE on
- *    Windows Phone and in iOS.
- * 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge,
- *    so we force a non-overlapping, non-auto-hiding scrollbar to counteract.
- * 6. Change the default tap highlight to be completely transparent in iOS.
- * 7. Implement full height to let children control own height.
- */
-const reboot = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box; /* 1 */
-  }
-  html {
-    -webkit-text-size-adjust: 100%; /* 4 */
-    -ms-text-size-adjust: 100%; /* 4 */
-    -ms-overflow-style: scrollbar; /* 5 */
-    -webkit-tap-highlight-color: rgba(#000, 0); /* 6 */
-    -webkit-tap-highlight-color: transparent;
-  }
-  body {
-    min-height: 100vh;
-  }
-  -ms-viewport {
-    width: device-width;
-  }
-  strong {
-    font-weight: 700;
-  }
-`;
-
-const reset = css`
-  /* http://meyerweb.com/eric/tools/css/reset/
-   v4.0 | 20180602
-   License: none (public domain)
-*/
-  html,
-  body,
-  div,
-  span,
-  applet,
-  object,
-  iframe,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  blockquote,
-  pre,
-  a,
-  abbr,
-  acronym,
-  address,
-  big,
-  cite,
-  code,
-  del,
-  dfn,
-  img,
-  ins,
-  kbd,
-  q,
-  s,
-  samp,
-  small,
-  strike,
-  strong,
-  sub,
-  sup,
-  tt,
-  var,
-  u,
-  center,
-  dl,
-  dt,
-  dd,
-  ol,
-  ul,
-  li,
-  fieldset,
-  form,
-  label,
-  legend,
-  table,
-  caption,
-  tbody,
-  tfoot,
-  thead,
-  tr,
-  th,
-  td,
-  article,
-  aside,
-  canvas,
-  details,
-  embed,
-  figure,
-  figcaption,
-  footer,
-  header,
-  hgroup,
-  main,
-  menu,
-  nav,
-  output,
-  ruby,
-  section,
-  summary,
-  time,
-  mark,
-  audio,
-  video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-  }
-  em,
-  i,
-  b {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    vertical-align: baseline;
-  }
-  /* HTML5 display-role reset for older browsers */
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  hgroup,
-  main,
-  menu,
-  nav,
-  section {
-    display: block;
-  }
-  *:focus,
-  :active {
-    outline: 0;
-  }
-  /* HTML5 hidden-attribute fix for newer browsers */
-  *[hidden] {
-    display: none;
-  }
-  body {
-    line-height: 1;
-  }
-  ol,
-  ul {
-    list-style: none;
-  }
-  blockquote,
-  q {
-    quotes: none;
-  }
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
-    content: '';
-    content: none;
-  }
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-  a:link,
-  a:visited,
-  a:active {
-    text-decoration: none;
-    color: inherit;
-  }
-`;
-
-export const GlobalStyles = createGlobalStyle`
-  ${reset};
-  ${reboot};
-
-  html {
-    scroll-behavior: smooth;
-  }
-
-  body {
-      font-family: 'Almarai', sans-serif;
-
-      ${font.base()}
-      font-weight: ${fontWeight.bold};
-
-      color: ${colors.beltza};
-  }
-`;

front/src/ui/theme/breakpoints.ts

@@ -1,4 +0,0 @@
-export const breakpoints = {
-  tablet: 768,
-  desktop: 1024,
-};

front/src/ui/theme/colors.ts

@@ -1,10 +0,0 @@
-export const colors = {
-  beltza: '#191919',
-  urdina: '#8FBBFD',
-  morea: '#510DFB',
-  horia: '#FDB201',
-  gorria: '#FD3647',
-  zuria: '#FFFFFF',
-};
-
-export type Color = keyof typeof colors;

front/src/ui/theme/font.ts

@@ -1,41 +0,0 @@
-import { css } from 'styled-components';
-import { rem } from 'polished';
-
-export const font = {
-  tiny() {
-    return css`
-      font-size: ${rem(12.64)};
-      line-height: ${rem(17)};
-    `;
-  },
-  small() {
-    return css`
-      font-size: ${rem(16)};
-      line-height: ${rem(22)};
-    `;
-  },
-  base() {
-    return css`
-      font-size: ${rem(18)};
-      line-height: ${rem(24)};
-    `;
-  },
-  large() {
-    return css`
-      font-size: ${rem(25.63)};
-      line-height: ${rem(35)};
-    `;
-  },
-  huge() {
-    return css`
-      font-size: ${rem(36.41)};
-      line-height: ${rem(50)};
-    `;
-  },
-  gargantuan() {
-    return css`
-      font-size: ${rem(41.83)};
-      line-height: ${rem(57)};
-    `;
-  },
-};

front/src/ui/theme/fontWeight.ts

@@ -1,4 +0,0 @@
-export const fontWeight = {
-  regular: 300,
-  bold: 700,
-};

front/src/ui/theme/index.ts

@@ -1,7 +0,0 @@
-export { breakpoints } from './breakpoints';
-export { font } from './font';
-export { media } from './media';
-export { size } from './size';
-export { colors } from './colors';
-export type { Color } from './colors';
-export { fontWeight } from './fontWeight';

front/src/ui/theme/media.ts

@@ -1,15 +0,0 @@
-import { css } from 'styled-components';
-import { breakpoints } from './breakpoints';
-
-export const media = {
-  tablet: (styles: TemplateStringsArray, ...args) => css`
-    @media (min-width: ${breakpoints.tablet}px) {
-      ${css(styles, ...args)};
-    }
-  `,
-  desktop: (styles: TemplateStringsArray, ...args) => css`
-    @media (min-width: ${breakpoints.desktop}px) {
-      ${css(styles, ...args)};
-    }
-  `,
-};

front/src/ui/theme/size.ts

@@ -1,12 +0,0 @@
-export const size = {
-  none: 0,
-  xtiny: 4,
-  tiny: 8,
-  small: 12,
-  mini: 16,
-  base: 24,
-  medium: 32,
-  large: 48,
-  xlarge: 64,
-  huge: 96,
-};

front/src/utils/dateUtils.ts

@@ -1,27 +0,0 @@
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-
-dayjs.extend(utc);
-
-export const datesUtils = {
-  getDate,
-  getHour,
-  areSameDay,
-  isToday,
-};
-
-function getDate(rawDate: string): Date {
-  return dayjs(rawDate).toDate();
-}
-
-function getHour(date: Date): string {
-  return dayjs(date).format('H:mm');
-}
-
-function areSameDay(date: Date, reference: Date): boolean {
-  return dayjs(date).isSame(reference, 'day');
-}
-
-function isToday(date: Date) {
-  return dayjs(date).isSame(new Date(), 'day');
-}

front/src/views/Hasiera/Hasiera.module.scss

@@ -2,7 +2,7 @@
 
 .contentWrapper {
   padding: var(--size-huge) 0;
-  font-weight: 300;
+  font-weight: var(--font-weight-regular);
   @include largeFont;
 }
 
@@ -24,7 +24,7 @@
   @include largeFont;
   padding: var(--size-base);
   background: var(--color-zuria);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   cursor: pointer;
   display: flex;
   align-items: center;

front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss

@@ -27,7 +27,7 @@
 
 .izena {
   text-align: left;
-  font-weight: 300;
+  font-weight: var(--font-weight-regular);
   padding: 0 var(--size-xtiny);
   vertical-align: top;
 }
@@ -35,7 +35,7 @@
 .prezioa {
   width: var(--size-huge);
   text-align: right;
-  font-weight: 300;
+  font-weight: var(--font-weight-regular);
   padding: 0 var(--size-xtiny);
   vertical-align: top;
 }
@@ -58,7 +58,7 @@
 
 .alergenoa {
   color: var(--color-morea);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 
   &:not(:last-child)::after {
     content: ', ';

front/src/views/NotFound/NotFound.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Link } from 'gatsby';
+
+import { Container } from '../../components/Container';
+import { Gainburua } from '../../components/Gainburua';
+
+export const NotFound: React.FC = () => (
+  <>
+    <Gainburua />
+
+    <Container>
+      <main>
+        <h1>404: Ez dugu bilatzen duzun orria topatu</h1>
+        <br />
+        <Link to="/">Hasierara bueltatu</Link>
+      </main>
+    </Container>
+  </>
+);

front/src/views/NotFound/index.ts

@@ -0,0 +1 @@
+export { NotFound } from './NotFound';

front/src/views/RegularPage/RegularPage.module.scss

@@ -0,0 +1,65 @@
+@import '../../styles/tools/mixins/font.scss';
+
+.atala {
+  padding-top: var(--size-base);
+}
+
+.edukia {
+  font-weight: var(--font-weight-regular);
+  @include baseFont;
+
+  p:not(-last-child) {
+    margin-bottom: var(--size-base);
+  }
+
+  h1 {
+    @include gargantuanFont;
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--size-base);
+  }
+
+  h2 {
+    @include hugeFont;
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--size-base);
+  }
+
+  h3 {
+    @include largeFont;
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--size-base);
+  }
+
+  h4 {
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--size-mini);
+  }
+
+  ul {
+    margin-bottom: var(--size-base);
+  }
+
+  li {
+    list-style: disc inside;
+    margin-bottom: var(--size-small);
+  }
+
+  table {
+    margin-bottom: var(--size-base);
+  }
+
+  th {
+    padding: var(--size-small);
+  }
+
+  td {
+    padding: var(--size-small);
+    border: 1px solid var(--color-beltza);
+  }
+
+  hr {
+    border: 2px solid var(--color-beltza);
+    margin-bottom: var(--size-base);
+    margin-top: var(--size-base);
+  }
+}

front/src/views/RegularPage/RegularPage.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import remarkGfm from 'remark-gfm';
+
+import { Container } from '../../components/Container';
+import { Gainburua } from '../../components/Gainburua';
+import { Oina } from '../../components/Oina';
+import * as styles from './RegularPage.module.scss';
+import { RegularPageContent } from './RegularPageContent';
+
+interface Props {
+  content: RegularPageContent;
+}
+
+export const RegularPage: React.FC<Props> = ({ content }) => {
+  const { edukia } = content;
+
+  return (
+    <>
+      <Gainburua />
+
+      <Container>
+        <section className={styles.atala}>
+          <ReactMarkdown remarkPlugins={[remarkGfm]} className={styles.edukia}>
+            {edukia}
+          </ReactMarkdown>
+        </section>
+      </Container>
+
+      <Oina />
+    </>
+  );
+};

front/src/views/RegularPage/RegularPageContent.ts

@@ -0,0 +1,4 @@
+export interface RegularPageContent {
+  izenburua: string;
+  edukia: string;
+}

front/src/views/RegularPage/index.ts

@@ -0,0 +1 @@
+export { RegularPage } from './RegularPage';

yarn.lock

@@ -1250,7 +1250,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
   integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
@@ -1474,13 +1474,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@1.2.1", "@emotion/is-prop-valid@^1.1.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
-  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
-  dependencies:
-    "@emotion/memoize" "^0.8.1"
-
 "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -1533,11 +1526,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
-  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
-
 "@emotion/unitless@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
@@ -4961,7 +4949,7 @@
   dependencies:
     "@types/unist" "^2"
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@^3.3.1":
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -5294,20 +5282,6 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.8.tgz#518609aefb797da19bf222feb199e8f653ff7627"
   integrity sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==
 
-"@types/styled-components@^5.1.34":
-  version "5.1.34"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300"
-  integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    csstype "^3.0.2"
-
-"@types/stylis@4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
-  integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==
-
 "@types/through@*":
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.33.tgz#14ebf599320e1c7851e7d598149af183c6b9ea56"
@@ -6454,7 +6428,7 @@ babel-plugin-remove-graphql-queries@^5.13.0:
     "@babel/types" "^7.20.7"
     gatsby-core-utils "^4.13.0"
 
-"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.1.4:
+"babel-plugin-styled-components@>= 1.12.0":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
   integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
@@ -7990,7 +7964,7 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
-css-to-react-native@3.2.0, css-to-react-native@^3.0.0:
+css-to-react-native@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
@@ -8093,11 +8067,6 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
-csstype@3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
-
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -10408,13 +10377,6 @@ gatsby-plugin-sitemap@^6.12.3:
     minimatch "^3.1.2"
     sitemap "^7.1.1"
 
-gatsby-plugin-styled-components@^6.12.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-6.13.0.tgz#90f9ce15f81940729a972518733ca73f63a71be8"
-  integrity sha512-7cqwnwg9YXTTpUuJSemey7bP/TeUZ3cgnFT81AU6qgosNB1y+eaHRHQuNjM+AMGcnkjwxnYP1RDGfn0pMxSOTg==
-  dependencies:
-    "@babel/runtime" "^7.20.13"
-
 gatsby-plugin-typescript@^5.13.0:
   version "5.13.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-5.13.0.tgz#7ffb1144409d2c06fdcf177f0cd1e6626746c8a1"
@@ -14385,7 +14347,7 @@ nanoclone@^0.2.1:
   resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
   integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
 
-nanoid@^3.3.6, nanoid@^3.3.7:
+nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -15497,13 +15459,6 @@ pluralize@8.0.0:
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
-polished@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-4.2.2.tgz#2529bb7c3198945373c52e34618c8fe7b1aa84d1"
-  integrity sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==
-  dependencies:
-    "@babel/runtime" "^7.17.8"
-
 pony-cause@^2.1.2:
   version "2.1.10"
   resolved "https://registry.yarnpkg.com/pony-cause/-/pony-cause-2.1.10.tgz#828457ad6f13be401a075dbf14107a9057945174"
@@ -15790,15 +15745,6 @@ postcss@7.0.36:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 postcss@^8.0.0, postcss@^8.2.15, postcss@^8.2.9, postcss@^8.3.11, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.24, postcss@^8.4.27:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
@@ -17375,7 +17321,7 @@ shallow-compare@^1.2.2:
   resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb"
   integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==
 
-shallowequal@1.1.0, shallowequal@^1.1.0:
+shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -18130,37 +18076,6 @@ styled-components@5.3.3:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-styled-components@^5.2.1:
-  version "5.3.11"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
-  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
-
-styled-components@^6.1.1:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.3.tgz#d3ffea630800f4486e79f6264826dad9426474e3"
-  integrity sha512-kLerFjTAABuEZ870O4q4dyT/VCOJC/HA08+VeIGhkiOKkwJLP17HAWHCiqZWnUMV19m3axlOKR/+/EbCbuJAZg==
-  dependencies:
-    "@emotion/is-prop-valid" "1.2.1"
-    "@emotion/unitless" "0.8.0"
-    "@types/stylis" "4.2.0"
-    css-to-react-native "3.2.0"
-    csstype "3.1.2"
-    postcss "8.4.31"
-    shallowequal "1.1.0"
-    stylis "4.3.0"
-    tslib "2.5.0"
-
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@@ -18174,11 +18089,6 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-stylis@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
-  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
-
 stylus@^0.59.0:
   version "0.59.0"
   resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.59.0.tgz#a344d5932787142a141946536d6e24e6a6be7aa6"
@@ -18638,11 +18548,6 @@ tsconfig-paths@^4.1.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
-  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
-
 tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"