diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..3461ac5 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,16 @@ +--- +title: '⚠️🛑 {{ env.ACTION_TYPE }} Failed in {{ payload.repository.name }}' +labels: 'bug, automation' +--- + +La acción **{{ env.ACTION_TYPE }}** falló en la ejecución del flujo de trabajo en la rama **{{ env.BRANCH }}**. Por favor, revisa los errores y toma las medidas necesarias. + +### Detalles del error: + +- [Enlace al flujo de trabajo fallido]({{ env.URL_ACTION_RUN }}) + +### Pasos a seguir: + +1. Revisa los logs del flujo de trabajo para identificar los errores. +2. Aplica las correcciones necesarias según el contexto del fallo (ya sea de lint, build u otro). +3. Vuelve a hacer commit y push de los cambios para ejecutar el flujo de trabajo nuevamente. diff --git a/.github/README.md b/.github/README.md new file mode 100644 index 0000000..0791583 --- /dev/null +++ b/.github/README.md @@ -0,0 +1,35 @@ +[![Deploy to Vercel](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy.yml) +[![Build](https://github.com/igrowker/i003-adoptree-front/actions/workflows/build.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/build.yml) +[![Lint](https://github.com/igrowker/i003-adoptree-front/actions/workflows/lint.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/lint.yml) +[![Deploy Preview to Vercel](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy-merge.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy-merge.yml) +# Pipeline de CI para Build y Lint + +## Descripción + +Esta pipeline de integración continua (CI) está diseñada para verificar el estado de compilación y aplicar reglas de linting al código del repositorio. El objetivo es garantizar que el código esté en buen estado antes de ser fusionado o desplegado en otros entornos. + +## Ejecución + +La ejecución de la pipeline de `Build` de CI se realiza automáticamente cada vez que se realiza un `Push` en el repositorio. Si se detecta un error en la compilación o en la verificación de la sintaxis, se creará un issue en el repositorio para que se puedan revisar y solucionar los problemas. + +La ejecución de la pipeline de `Lint` de CI se realiza automáticamente cada vez que se realiza una `Pull Request` en el repositorio. Si se detecta un error en la verificación de la sintaxis, se creará un issue en el repositorio para que se puedan revisar y solucionar los problemas. + +# Pipeline de CI para Deploy del Preview + +## Descripción + +Esta pipeline de integración continua (CI) está diseñada para desplegar el código del repositorio en un entorno de producción y en un entorno de desarrollo. El objetivo es poder ver el resultado de los cambios antes de que se fusionen en el repositorio principal y su publicación en el entorno de producción. + +## Ejecución + +La ejecución de la pipeline de `Deploy Preview to Vercel` de CI se realiza automáticamente cada vez que se realiza una `Pull Request` en las ramas `main` o `develop`. Si se detecta un error en la despliegue, se creará un issue y un comentario en el repositorio para que se puedan revisar y solucionar los problemas. Además, si todo sale bien, se creará un comentario en el Pull Request para informar la `Url` del preview del entorno de desarrollo. + +# Pipeline de CI para Deploy del Production + +## Descripción + +Esta pipeline `Deploy to Vercel` es la encargada de desplegar el código del repositorio en el entorno de producción en Vercel. + +## Ejecución + +La ejecución de la pipeline de `Deploy to Vercel` de CI se realiza automáticamente cada vez que se realiza una `Push` o `Merge` a la rama `main`. Si se detecta un error en la despliegue, se creará un issue para que se puedan revisar y solucionar los problemas. diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..4cc2310 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,54 @@ +name: Build + +on: + pull_request: + types: [opened, synchronize, reopened] + +jobs: + build: + name: Build + runs-on: ubuntu-latest + permissions: + contents: read + packages: read + statuses: write + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 18 + cache: npm + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm ci --no-audit --no-fund + + - name: Build + run: npm run build + + - name: Create issue if build fails + if: failure() + uses: JasonEtco/create-an-issue@v2 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + ACTION_TYPE: 'Build' + URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} + BRANCH: ${{ github.ref }} + with: + assignees: ${{ github.event.sender.login }} + - name: Comment on PR if failed + if: failure() + uses: unsplash/comment-on-pr@v1.3.0 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + with: + msg: 'Falló el build de la rama :disappointed:. Por favor revisa los errores y toma las medidas necesarias. Action Run: [Action](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})' + - name: Comment on PR + uses: unsplash/comment-on-pr@v1.3.0 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + with: + msg: 'El build ha sido exitoso :+1: :thumbsup:.' diff --git a/.github/workflows/buildonpush.yml b/.github/workflows/buildonpush.yml new file mode 100644 index 0000000..c7e0bfc --- /dev/null +++ b/.github/workflows/buildonpush.yml @@ -0,0 +1,40 @@ +name: Build + +on: + push: null + +jobs: + build: + name: Build + runs-on: ubuntu-latest + permissions: + contents: read + packages: read + statuses: write + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 18 + cache: npm + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm ci --no-audit --no-fund + + - name: Build + run: npm run build + + - name: Create issue if build fails + if: failure() + uses: JasonEtco/create-an-issue@v2 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + ACTION_TYPE: 'Build' + URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} + BRANCH: ${{ github.ref }} + with: + assignees: ${{ github.event.sender.login }} diff --git a/.github/workflows/deploy-merge.yml b/.github/workflows/deploy-merge.yml new file mode 100644 index 0000000..cf0e2fc --- /dev/null +++ b/.github/workflows/deploy-merge.yml @@ -0,0 +1,69 @@ +name: Deploy Preview to Vercel + +on: + pull_request: + types: [opened, synchronize, reopened] + branches: + - main + - develop + +jobs: + deploy: + runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write + repository-projects: write + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Install Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: npm + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm install --no-audit --no-fund + + - name: Deploy to Vercel (Preview) + id: deploy + uses: amondnet/vercel-action@v25 + with: + vercel-token: ${{ secrets.VERCEL_TOKEN }} + github-token: ${{ secrets.GH_TOKEN }} + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} + scope: ${{ secrets.VERCEL_ORG_ID }} + working-directory: ./ + github-comment: true + - name: Print preview URL + run: | + echo ${{ steps.deploy.outputs.preview-url }} + + - name: Create issue if deploy fails + if: failure() + uses: JasonEtco/create-an-issue@v2 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + ACTION_TYPE: 'Deploy' + URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} + BRANCH: ${{ github.ref }} + with: + assignees: ${{ github.event.sender.login }} + - name: Comment on PR if failed + if: failure() + uses: unsplash/comment-on-pr@v1.3.0 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + with: + msg: 'Ocurrió un error al desplegar la rama. Por favor revisa los errores y toma las medidas necesarias. Action Run: [Action](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}).' + - name: Comment on PR + uses: unsplash/comment-on-pr@v1.3.0 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + with: + msg: 'El despliegue del Preview ha sido exitoso :+1: :thumbsup:.' diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..65ba484 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,60 @@ +name: Deploy to Vercel + +on: + push: + branches: + - main + - develop + +concurrency: + group: ci-${{ github.ref }} + cancel-in-progress: true + +jobs: + deploy: + runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write + repository-projects: write + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Install Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: npm + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm install --no-audit --no-fund + + - name: Deploy to Vercel (Preview) + id: deploy + uses: amondnet/vercel-action@v25 + with: + vercel-token: ${{ secrets.VERCEL_TOKEN }} + github-token: ${{ secrets.GH_TOKEN }} + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} + scope: ${{ secrets.VERCEL_ORG_ID }} + vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }} + working-directory: ./ + github-comment: true + - name: Print preview URL + run: | + echo ${{ steps.deploy.outputs.preview-url }} + + - name: Create issue if deploy fails + if: failure() + uses: JasonEtco/create-an-issue@v2 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + ACTION_TYPE: 'Deploy' + URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} + BRANCH: ${{ github.ref }} + with: + assignees: ${{ github.event.sender.login }} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000..842ab61 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,60 @@ +name: Lint + +on: + pull_request: + types: [opened, synchronize, reopened] + branches: + - main + - develop + +permissions: {} + +jobs: + lint: + name: Lint + runs-on: ubuntu-latest + + permissions: + contents: read + packages: read + statuses: write + + steps: + - name: Checkout code + uses: actions/checkout@v4 + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 18 + cache: npm + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm ci --no-audit --no-fund + + - name: Lint + run: npm run lint:ci + + - name: Create issue if lint fails + if: failure() + uses: JasonEtco/create-an-issue@v2 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + ACTION_TYPE: 'Lint' + URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} + BRANCH: ${{ github.ref }} + with: + assignees: ${{ github.event.sender.login }} + - name: Comment on PR if failed + if: failure() + uses: unsplash/comment-on-pr@v1.3.0 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + with: + msg: 'Falló la verificación del Lint :dissapointed:. Por favor revisa los errores y toma las medidas necesarias. Action Run: [Action](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})' + - name: Comment on PR + uses: unsplash/comment-on-pr@v1.3.0 + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + with: + msg: 'El linter ha verificado el código :+1: :thumbsup:.' diff --git a/.gitignore b/.gitignore index d7de12f..7da0b3f 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,4 @@ dist-ssr *.njsproj *.sln *.sw? +.vercel diff --git a/package-lock.json b/package-lock.json index 6379ec6..6805370 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.26.2" + "react-router-dom": "^6.26.2", + "template-vite-react": "file:" }, "devDependencies": { "@types/react": "^18.3.3", @@ -5917,6 +5918,10 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/template-vite-react": { + "resolved": "", + "link": true + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index 8090489..1d2ad85 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix", "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'", - "preview": "vite preview" + "preview": "vite preview", + "lint:ci": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0" }, "dependencies": { "@emotion/react": "^11.13.3", @@ -19,7 +20,8 @@ "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.26.2" + "react-router-dom": "^6.26.2", + "template-vite-react": "file:" }, "devDependencies": { "@types/react": "^18.3.3", diff --git a/public/Banner/sections.jpg b/public/Banner/sections.jpg new file mode 100644 index 0000000..16a2d75 Binary files /dev/null and b/public/Banner/sections.jpg differ diff --git a/src/App.tsx b/src/App.tsx index 676696b..43c7cbf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,26 @@ -import { useState } from 'react'; import Navbar from './components/Navbar/Navbar'; import Cards from './components/Cards/Cards'; import Beneficios from './components/Beneficios/Beneficios'; +import Banner from './components/Banner/Banner'; import './App.css'; import Agriculture from './components/Agriculture/Agriculture'; import Bienvenido from './components/Bienvenido/Bienvenido'; +import Arboles from './components/Arboles/Arboles'; +import Footer from './components/Footer/Footer'; -function App() { +const App: React.FC = () => { return ( <> + + +