SIAFI Website

Bienvenido al repositorio del sitio web de SIAFI. Este proyecto está desarrollado con React y Next.js, y tiene como objetivo proporcionar información sobre la Sociedad de Inteligencia Artificial y sus actividades.

Puedes ver el sitio web en acción en siafi-unam.org.

Para entrar al CMS de Sanity, ve a siafi-unam.org/studio (necesitas credenciales para acceder).

Tecnologías Utilizadas

• React: Biblioteca de JavaScript para construir interfaces de usuario.
• Next.js: Framework de React para aplicaciones web.
• Sanity.io: CMS (Plataforma de gestión de contenido) para administrar el contenido de forma code-less.
• CSS Modules: Para el estilo de los componentes.
• Vercel: Plataforma de despliegue y hosting del sitio.
• Bootstrap: Framework de CSS para el diseño de la página (principalmente utilizado para el layout).

Instalación

Para instalar y ejecutar este proyecto localmente, sigue estos pasos:

1. Clona el repositorio:

   git clone https://github.com/SIAFI-UNAM/siafi-website.git

2. Navega al directorio del proyecto:

   cd siafi-website

3. Instala las dependencias (debes tener Node.js instalado previamente):

   npm install

4. Duplica el archivo .env.example y renombralo a .env.local en la raíz del proyecto.

   cp .env.example .env.local

5. Agrega los tokens necesarios en el archivo .env.local. (Psst: Si eres un SIAFIto y quieres hacer cambios, puedes preguntarle al líder de proyectos por los tokens 😉)

6. Ejecuta el servidor de desarrollo:

   npm run dev

7. Abre tu navegador y ve a http://localhost:3000 para ver el sitio web en acción.

Estructura del Proyecto

La estructura principal del proyecto es la siguiente:

siafi-website/
├── public/                 # Archivos públicos (favicon, imágenes públicas, etc.)
├── src/
│   ├── components/         # Componentes React organizados por sección o "General" para componentes reutilizables
│   ├── styles/             # Archivos de estilo (CSS Modules)
│   ├── sanity/             # Configuración, tipos de contenido y más del CMS Sanity
│   ├── assets/             # Archivos de imágenes, fuentes, etc.
│   ├── lib/                # Funciones y utilidades
│   |── app/                # App router de Next.js con layouts y rutas
        │── (sanity)        # Configuración de Sanity para la vista del CMS
        └── (webpage)       # Vistas de la página de SIAFI
│   └── image-paths.ts      # Paths de imágenes del proyecto para facilitar su uso
├── .gitignore              # Archivos y directorios ignorados por Git
├── package.json            # Dependencias y scripts del proyecto
└── README.md               # Este archivo

¿Cómo Contribuir?

Las contribuciones son bienvenidas. Si deseas contribuir, por favor sigue estos pasos (seas o no miembro de SIAFI):

1. Haz un fork del repositorio.

2. Crea una nueva rama siguiendo la metodología GitFlow. Por ejemplo: feature/add-dark-mode.

3. Realiza tus cambios y utiliza Conventional Commits para tus mensajes de commit. (Ya es un plus si usas también gitmoji 😄).

   💡 Te recomiendo esta extensión de VSCode para tus commits 👉🏼 Conventional Commits

4. ⚠️ Actualiza el archivo CHANGELOG.md con tus cambios y si es necesario el archivo .env.example con el nombre de las nuevas variables de entorno.

   Nota: Aún no le coloques versión a el archivo CHANGELOG, escribe tus cambios debajo de UNRELEASED CHANGES y cuando sea mezclado se le colocara el versioning

5. Sube tus cambios a tu fork.

6. Abre un Pull Request de tu rama en tu fork a la rama development en este repositorio. NO LO HAGAS A LA RAMA main.

7. Los miembros de SIAFI revisarán tu Pull Request y te darán retroalimentación.

8. Una vez que tu Pull Request sea aprobado, será fusionado a la rama development y se desplegará en producción (main) más adelante. 🚀

9. Un miembro de SIAFI se encargará de actualizar el archivo CHANGELOG.md con la versión correspondiente, actualizar la versión del package.json (npm version [major/minor/patch]) y de hacer el despliegue a producción.

Créditos

Este proyecto fue originalmente desarrollado con ❤️ por Christian Leyva, antiguo miembro de SIAFI.

Inspiración

El sitio web está inspirado en el diseño Influencer Meet Tech creado por Andikan Bassey y otros diseñadores (el diseño esta licenciado sobre CC BY 4.0).

Assets Utilizados

• dddoodle
• Casual life 3D Assets