labasarea/laba-webgunea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Orri sekundarioak css modulesera pasatzen ditu (#14)

Browse Source 
* 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
This commit is contained in:
Aitor Urrutia
2023-12-26 11:43:01 +01:00
committed by GitHub
parent 311e25cdd7
commit 2646b21712
36 changed files with 209 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
back/database/migrations/development.db
View File

Binary file not shown.

7
back/package.json
View File

@@ -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",
"public-proxy": "ngrok http --domain=vervet-big-dassie.ngrok-free.app 1337"
"strapi": "strapi"
},
"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",
"styled-components": "^5.2.1"
"strapi-plugin-netlify-deployments": "^2.0.2"
},
"strapi": {
"uuid": "b0fa2552-2961-4886-8673-c2d7fe07b8a1"

1
front/gatsby-config.js
View File

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

5
front/package.json
View File

@@ -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": {

4
front/src/components/AlergenoLegenda/AlergenoLegenda.module.scss
View File

@@ -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);
}

115
front/src/components/Dialog.tsx
View File

@@ -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%);
}
}
`;

33
front/src/components/Oina.tsx
View File

@@ -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};
}
`;

20
front/src/components/Oina/Oina.module.scss Normal file
View File

@@ -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);
}
}

16
front/src/components/Oina/Oina.tsx Normal file
View File

@@ -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>
);

1
front/src/components/Oina/index.ts Normal file
View File

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

6
front/src/components/SEO.tsx
View File

@@ -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} />}

26
front/src/pages/404.tsx
View File

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

77
front/src/pages/lege-oharra.tsx
View File

@@ -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 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 { graphql, PageProps, useStaticQuery } from 'gatsby';
import { SEO } from '../components/SEO';
import { RegularPage } from '../views/RegularPage';
import { RegularPageContent } from '../views/RegularPage/RegularPageContent';
interface DataProps {
strapiLegeOharra: {
izenburua: string;
edukia: string;
};
strapiLegeOharra: RegularPageContent;
}
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 />
<Gainburua />
<Container>
<Atala>
<Edukia>{strapiLegeOharra.edukia}</Edukia>
</Atala>
</Container>
<Oina />
<RegularPage content={strapiLegeOharra} />
</>
);
};
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;

97
front/src/pages/pribatutasun-politika.tsx
View File

@@ -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 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 { graphql, PageProps, useStaticQuery } from 'gatsby';
import { SEO } from '../components/SEO';
import { RegularPage } from '../views/RegularPage/RegularPage';
import { RegularPageContent } from '../views/RegularPage/RegularPageContent';
interface DataProps {
strapiPribatutasunPolitika: {
izenburua: string;
edukia: string;
};
strapiPribatutasunPolitika: RegularPageContent;
}
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 />
<Gainburua />
<Container>
<Atala>
<Edukia>{strapiPribatutasunPolitika.edukia}</Edukia>
</Atala>
</Container>
<Oina />
<RegularPage content={strapiPribatutasunPolitika} />
</>
);
};
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;

2
front/src/styles/cssConfig.scss
View File

@@ -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);
}

2
front/src/styles/generic/reboot.scss
View File

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

4
front/src/styles/settings/fontWeight.scss Normal file
View File

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

1
front/src/styles/settings/index.scss
View File

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

213
front/src/ui/GlobalStyles.tsx
View File

@@ -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};
}
`;

4
front/src/ui/theme/breakpoints.ts
View File

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

10
front/src/ui/theme/colors.ts
View File

@@ -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;

41
front/src/ui/theme/font.ts
View File

@@ -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)};
`;
},
};

4
front/src/ui/theme/fontWeight.ts
View File

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

7
front/src/ui/theme/index.ts
View File

@@ -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';

15
front/src/ui/theme/media.ts
View File

@@ -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)};
}
`,
};

12
front/src/ui/theme/size.ts
View File

@@ -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,
};

27
front/src/utils/dateUtils.ts
View File

@@ -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');
}

4
front/src/views/Hasiera/Hasiera.module.scss
View File

@@ -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;

6
front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss
View File

@@ -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: ', ';

20
front/src/views/NotFound/NotFound.tsx Normal file
View File

@@ -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>
</>
);

1
front/src/views/NotFound/index.ts Normal file
View File

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

65
front/src/views/RegularPage/RegularPage.module.scss Normal file
View File

@@ -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);
}
}

34
front/src/views/RegularPage/RegularPage.tsx Normal file
View File

@@ -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 />
</>
);
};

4
front/src/views/RegularPage/RegularPageContent.ts Normal file
View File

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

1
front/src/views/RegularPage/index.ts Normal file
View File

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

107
yarn.lock
View File

@@ -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"