From 57cabd8e6c6c1b06074a48b0d4887131eb089c07 Mon Sep 17 00:00:00 2001 From: Guste Gaubaite <219.guste@gmail.com> Date: Tue, 2 Dec 2025 11:43:59 +0100 Subject: [PATCH 1/5] feat(#50): add Nunito Sans font, Prettier and Tailwind CSS plugin for code formatting --- .prettierrc | 3 ++ front/package.json | 5 ++- package-lock.json | 109 ++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b4bfed3 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/front/package.json b/front/package.json index abbc0a5..e521b3f 100644 --- a/front/package.json +++ b/front/package.json @@ -7,6 +7,7 @@ "start": "next dev" }, "dependencies": { + "@fontsource/nunito-sans": "^5.2.7", "@tailwindcss/postcss": "^4.1.17", "next": "^15.4.1", "postcss": "^8.5.6", @@ -17,6 +18,8 @@ "devDependencies": { "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", - "daisyui": "^5.5.5" + "daisyui": "^5.5.5", + "prettier": "^3.7.3", + "prettier-plugin-tailwindcss": "^0.7.2" } } diff --git a/package-lock.json b/package-lock.json index f49cebd..cc9078a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "front": { "version": "1.0.0", "dependencies": { + "@fontsource/nunito-sans": "^5.2.7", "@tailwindcss/postcss": "^4.1.17", "next": "^15.4.1", "postcss": "^8.5.6", @@ -40,7 +41,9 @@ "devDependencies": { "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", - "daisyui": "^5.5.5" + "daisyui": "^5.5.5", + "prettier": "^3.7.3", + "prettier-plugin-tailwindcss": "^0.7.2" } }, "functions": { @@ -275,6 +278,15 @@ "node": ">=14" } }, + "node_modules/@fontsource/nunito-sans": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/nunito-sans/-/nunito-sans-5.2.7.tgz", + "integrity": "sha512-Vh+xhMsrH1eA9Q83Va82su3rDmNilYg+ur/TfHAOyr5kTpCOWMB8B1tDoJvSe+yJPpZ2jEWtnBHGqI2LUPVxUA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@img/sharp-darwin-arm64": { "version": "0.34.3", "cpu": [ @@ -2859,6 +2871,101 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prettier": { + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.3.tgz", + "integrity": "sha512-QgODejq9K3OzoBbuyobZlUhznP5SKwPqp+6Q6xw6o8gnhr4O85L2U915iM2IDcfF2NPXVaM9zlo9tdwipnYwzg==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz", + "integrity": "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20.19" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-hermes": "*", + "@prettier/plugin-oxc": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "@zackad/prettier-plugin-twig": "*", + "prettier": "^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", + "prettier-plugin-multiline-arrays": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-sort-imports": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-hermes": { + "optional": true + }, + "@prettier/plugin-oxc": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "@zackad/prettier-plugin-twig": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-multiline-arrays": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + } + } + }, "node_modules/pretty-format": { "version": "30.0.5", "dev": true, From bd95b950a43cd0cb242aa6c85a0acdb5734fe99e Mon Sep 17 00:00:00 2001 From: Guste Gaubaite <219.guste@gmail.com> Date: Tue, 2 Dec 2025 11:45:33 +0100 Subject: [PATCH 2/5] feat(#50): defined a custom DaisyUI theme, established base styles for headings and paragraphs, introduced utility classes --- front/src/app/globals.css | 86 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/front/src/app/globals.css b/front/src/app/globals.css index 4c1b0c2..7025098 100644 --- a/front/src/app/globals.css +++ b/front/src/app/globals.css @@ -1,2 +1,88 @@ @import "tailwindcss"; @plugin "daisyui"; + +@import "@fontsource/nunito-sans/400.css"; +@import "@fontsource/nunito-sans/500.css"; +@import "@fontsource/nunito-sans/600.css"; + +@plugin "daisyui/theme" { + name: "info-embalse"; + default: true; + color-scheme: light; + + --color-primary: #1b9aaa; + --color-accent: #d9d900; + + --color-base-100: #feffff; /* White background */ + --color-base-200: #eaeaea; /* Grey background */ + --color-base-content: #060d14; /* Text color */ +} + +@theme { + --font-sans: "Nunito Sans", sans-serif; + + /* Title color */ + --color-title: #051c1f; + + /* Accesible visited link color */ + --color-visited-link: #257782; + + /*Primary color palette*/ + + --color-brand-50: #e8f5f7; + --color-brand-100: #d1ebee; + --color-brand-200: #a4d7dd; + --color-brand-300: #76c2cc; + --color-brand-400: #49aebb; + --color-brand-500: #1b9aaa; /* Primary color */ + --color-brand-600: #167b88; + --color-brand-700: #105c66; + --color-brand-800: #0b3e44; + --color-brand-900: #051f22; + --color-brand-950: #01161a; +} + +@layer base { + h1, + h2, + h3, + h4, + h5, + h6 { + @apply text-title opacity-95; + } + + p, + body { + @apply opacity-85; + } + + /* H1 Title 36px */ + h1 { + @apply text-4xl leading-none font-semibold; + } + + /* H2 Title 28px */ + h2 { + @apply text-[28px] leading-normal font-semibold; + } + + /* H3 Subtitle 24px */ + h3 { + @apply text-2xl leading-none font-medium; + } + + /* Text 14px */ + p, + body { + @apply text-base-content text-base leading-normal font-normal; + } +} + +@layer utilities { + /*Accesible link */ + + .link-accessible { + @apply link text-title visited:text-visited-link font-bold opacity-95; + } +} From c3141968606991bbe3a41dc1da9d2a3e84724cd2 Mon Sep 17 00:00:00 2001 From: Guste Gaubaite <219.guste@gmail.com> Date: Tue, 2 Dec 2025 11:47:27 +0100 Subject: [PATCH 3/5] feat(#50): add header and footer components with logo and navigation links --- front/public/images/logo.svg | 13 ++++++++ front/src/app/layouts/footer.component.tsx | 38 ++++++++++++++++++++++ front/src/app/layouts/header.component.tsx | 11 +++++++ front/src/app/layouts/index.ts | 2 ++ 4 files changed, 64 insertions(+) create mode 100644 front/public/images/logo.svg create mode 100644 front/src/app/layouts/footer.component.tsx create mode 100644 front/src/app/layouts/header.component.tsx create mode 100644 front/src/app/layouts/index.ts diff --git a/front/public/images/logo.svg b/front/public/images/logo.svg new file mode 100644 index 0000000..7924782 --- /dev/null +++ b/front/public/images/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/front/src/app/layouts/footer.component.tsx b/front/src/app/layouts/footer.component.tsx new file mode 100644 index 0000000..ff877bb --- /dev/null +++ b/front/src/app/layouts/footer.component.tsx @@ -0,0 +1,38 @@ +import Link from "next/link"; +import { FC } from "react"; + +export const FooterComponent: FC = () => { + return ( + + ); +}; diff --git a/front/src/app/layouts/header.component.tsx b/front/src/app/layouts/header.component.tsx new file mode 100644 index 0000000..08339ce --- /dev/null +++ b/front/src/app/layouts/header.component.tsx @@ -0,0 +1,11 @@ +import { FC } from "react"; + +export const HeaderComponent: FC = () => { + return ( +
+
+ InfoEmbalse logo +
+
+ ); +}; diff --git a/front/src/app/layouts/index.ts b/front/src/app/layouts/index.ts new file mode 100644 index 0000000..e6dec5e --- /dev/null +++ b/front/src/app/layouts/index.ts @@ -0,0 +1,2 @@ +export * from "./header.component"; +export * from "./footer.component"; From d751776ea3fcc82d5bcb0294ef23ac154e5cad75 Mon Sep 17 00:00:00 2001 From: Guste Gaubaite <219.guste@gmail.com> Date: Tue, 2 Dec 2025 11:48:59 +0100 Subject: [PATCH 4/5] feat(#50): integrate header and footer components in layout, apply custom theme and update pages to use new typography and accessible link styles --- .../src/app/embalse-provincia/[provincia]/page.tsx | 4 ++-- front/src/app/embalse-provincia/page.tsx | 4 ++-- front/src/app/embalse/[embalse]/page.tsx | 3 ++- front/src/app/layout.tsx | 13 +++++-------- front/src/app/page.tsx | 6 +++--- 5 files changed, 14 insertions(+), 16 deletions(-) diff --git a/front/src/app/embalse-provincia/[provincia]/page.tsx b/front/src/app/embalse-provincia/[provincia]/page.tsx index ba6360e..0e144b9 100644 --- a/front/src/app/embalse-provincia/[provincia]/page.tsx +++ b/front/src/app/embalse-provincia/[provincia]/page.tsx @@ -8,9 +8,9 @@ export default async function EmbalseProvinciaListadoPage({ params }: Props) { const { provincia } = await params; return (
-

Embalses de {provincia}

+

Embalses de {provincia}

- + Embalse de Casasola
diff --git a/front/src/app/embalse-provincia/page.tsx b/front/src/app/embalse-provincia/page.tsx index 27e2263..8c502d9 100644 --- a/front/src/app/embalse-provincia/page.tsx +++ b/front/src/app/embalse-provincia/page.tsx @@ -3,8 +3,8 @@ import Link from "next/link"; export default function EmbalsesProvinciaPage() { return (
-

Embalse por provincias

- +

Embalse por provincias

+ Málaga
diff --git a/front/src/app/embalse/[embalse]/page.tsx b/front/src/app/embalse/[embalse]/page.tsx index bc03273..68c2a95 100644 --- a/front/src/app/embalse/[embalse]/page.tsx +++ b/front/src/app/embalse/[embalse]/page.tsx @@ -8,7 +8,8 @@ export default async function EmbalseDetallePage({ params }: Props) { const { embalse } = await params; return (
-

Detalle del embalse: {embalse}

+

Detalle del embalse: {embalse}

+

Hola hgola h uhfrf hfueh

); } diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx index 4fd5cbb..c4137ee 100644 --- a/front/src/app/layout.tsx +++ b/front/src/app/layout.tsx @@ -1,5 +1,6 @@ import React from "react"; import "./globals.css"; +import { FooterComponent, HeaderComponent } from "./layouts"; interface Props { children: React.ReactNode; @@ -8,18 +9,14 @@ interface Props { const RootLayout = (props: Props) => { const { children } = props; return ( - + -
-

Soy un header

-
+
{children}
- + ); diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx index 8d2c51f..850b152 100644 --- a/front/src/app/page.tsx +++ b/front/src/app/page.tsx @@ -3,12 +3,12 @@ import Link from "next/link"; const RootPage = () => { return (
-

Página de inicio

+

Página de inicio

- + Embalses por provincias - + Detalle del embalse
From 09996ca1c4abee956451328ae806fb829330afdc Mon Sep 17 00:00:00 2001 From: Guste Gaubaite <219.guste@gmail.com> Date: Wed, 3 Dec 2025 08:54:27 +0100 Subject: [PATCH 5/5] remove dummy paragraph --- front/src/app/embalse/[embalse]/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/front/src/app/embalse/[embalse]/page.tsx b/front/src/app/embalse/[embalse]/page.tsx index 68c2a95..a50d99c 100644 --- a/front/src/app/embalse/[embalse]/page.tsx +++ b/front/src/app/embalse/[embalse]/page.tsx @@ -9,7 +9,6 @@ export default async function EmbalseDetallePage({ params }: Props) { return (

Detalle del embalse: {embalse}

-

Hola hgola h uhfrf hfueh

); }