parent
42513a6b5c
commit
0a942c7db7
@ -0,0 +1,48 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module',
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
amd: true,
|
||||
node: true,
|
||||
},
|
||||
plugins: ['prettier', 'simple-import-sort'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier/@typescript-eslint',
|
||||
'plugin:react/recommended',
|
||||
'plugin:jsx-a11y/recommended',
|
||||
'prettier/@typescript-eslint',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
rules: {
|
||||
'prettier/prettier': ['error', {}, { usePrettierrc: true }],
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/prop-types': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'simple-import-sort/sort': 'error',
|
||||
'sort-imports': 'off',
|
||||
'import/order': 'off',
|
||||
'jsx-a11y/anchor-is-valid': [
|
||||
'error',
|
||||
{
|
||||
components: ['Link'],
|
||||
specialLink: ['hrefLeft', 'hrefRight'],
|
||||
aspects: ['invalidHref', 'preferButton'],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
docker/
|
||||
.env
|
||||
dump*
|
||||
|
||||
.log
|
||||
|
||||
assets/
|
||||
@ -0,0 +1,4 @@
|
||||
.cache
|
||||
package.json
|
||||
package-lock.json
|
||||
public
|
||||
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
semi: false,
|
||||
trailingComma: "all",
|
||||
singleQuote: true,
|
||||
printWidth: 90,
|
||||
tabWidth: 2
|
||||
};
|
||||
@ -0,0 +1,60 @@
|
||||
# Artimañas 2020
|
||||
|
||||
Este es el repositorio para el código del sitio web de Artimañas 2020.
|
||||
|
||||
## Instrucciones para desarrollo
|
||||
|
||||
La aplicación web consiste de dos partes:
|
||||
|
||||
1. CMS: [Directus](https://directus.io/)
|
||||
2. Componente de SSR (Server Side Rendering): [Next.js](https://nextjs.org/)
|
||||
|
||||
### Configurando el entorno
|
||||
|
||||
Hay 3 variables de entorno que se deben configurar en el archivo `.env`, la primera corresponde a la contraseña de la base de datos de MySQL y las otras dos a la seguridad de Directus:
|
||||
|
||||
- `MYSQL_PASSWORD`
|
||||
- `DIRECTUS_AUTH_PUBLICKEY`
|
||||
- `DIRECTUS_AUTH_SECRETKEY`
|
||||
|
||||
Estas pueden ser cualquier string, pero se deben asignar antes de crear los contenedores, y si se modifican posteriormente, los contenedores no funcionaran correctamente.
|
||||
|
||||
El script `setup-env.sh` permite generar valores para las variables de entorno automáticamente y crear e iniciar los contenedores de docker después de esto.
|
||||
|
||||
``` bash
|
||||
./setup-env.sh
|
||||
```
|
||||
|
||||
### CMS y base de datos
|
||||
|
||||
Directus depende de una base de datos SQL que se puede levantar usando [Docker](https://www.docker.com/) con el archivo de [docker-compose](https://docs.docker.com/compose/) provisto:
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
Cuando el contenedor de la base de datos se cree por primera vez, la base de datos se inicializará con el dump que se encuentra en `./db/init.sql`. Este contiene las tablas para las obras, biografías, e información general del sitio, así como los usuarios correspondientes a cada alumno de la materia. Para modificar los datos una vez iniciados los contenedores, se puede acceder a la interfaz web de directus en [http://localhost:8080](http://localhost:8080) con las siguientes credenciales:
|
||||
|
||||
- Usuario: `admin@artiweb.net`
|
||||
- Contraseña: `password`
|
||||
|
||||
Eventualmente, este dump deberá ser actualizado con el contenido real/final, para que el entorno de desarrollo sea lo mas fiel posible con respecto al de producción. Esto se puede llevar a cabo con el script provisto en la raíz del repositorio (`manage-db`):
|
||||
|
||||
``` bash
|
||||
./manage-db.sh backup
|
||||
```
|
||||
|
||||
### Sitio web (front end)
|
||||
|
||||
Una vez que la base de datos haya sido inicializada, se puede iniciar el servidor de desarrollo (componente de SSR) con:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Los archivos en el directorio `src` se pueden editar y los cambios se verán reflejados en el navegador sin la necesidad de recargar la página.
|
||||
|
||||
## Screencasts
|
||||
|
||||
- [Configurando el servidor de desarrollo en Manjaro / Arch Linux](https://youtu.be/1_Eo37owlDw)
|
||||
- [Descripción de los archivos del respositorio](https://youtu.be/5-D9CbGm-8Q)
|
||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,7 @@
|
||||
MYSQL_HOST=mysql
|
||||
MYSQL_DB=directus
|
||||
MYSQL_PASSWORD=directus
|
||||
MYSQL_USER=directus
|
||||
MYSQL_PASSWORD=
|
||||
DIRECTUS_AUTH_PUBLICKEY=
|
||||
DIRECTUS_AUTH_SECRETKEY=
|
||||
|
||||
DIRECTUS_HOST=
|
||||
DIRECTUS_API_USER=
|
||||
DIRECTUS_API_PASSWORD=
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
const dotenv = require('dotenv')
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const fetch = require('node-fetch')
|
||||
|
||||
dotenv.config()
|
||||
|
||||
const { DIRECTUS_HOST, DIRECTUS_API_USER, DIRECTUS_API_PASSWORD } = process.env
|
||||
|
||||
async function main() {
|
||||
const res = await fetch(`${DIRECTUS_HOST}/_/auth/authenticate`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ email: DIRECTUS_API_USER, password: DIRECTUS_API_PASSWORD }),
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
const { data } = await res.json()
|
||||
const { token } = data
|
||||
|
||||
const roles = await fetch(`${DIRECTUS_HOST}/_/roles?access_token=${token}`)
|
||||
const rolesJson = await roles.json()
|
||||
|
||||
const studentsRole = rolesJson.data.find((role) => role.name === 'Alumn@')
|
||||
const guestsRole = rolesJson.data.find((role) => role.name === 'Invitad@')
|
||||
const studentsRoleId = studentsRole.id
|
||||
const guestsRoleId = guestsRole.id
|
||||
|
||||
const allUsers = await fetch(`${DIRECTUS_HOST}/_/users?access_token=${token}`)
|
||||
const allUsersJson = await allUsers.json()
|
||||
const usersFiltered = allUsersJson.data.filter(
|
||||
(user) => user.role === studentsRoleId || user.role === guestsRoleId,
|
||||
)
|
||||
|
||||
const allEvents = await fetch(
|
||||
`${DIRECTUS_HOST}/_/items/cronograma?access_token=${token}`,
|
||||
)
|
||||
const allEventsJson = await allEvents.json()
|
||||
|
||||
const allEventsWithUserNames = allEventsJson.data.map((event) => {
|
||||
const user = usersFiltered.find((user) => user.id === event.user_asociado)
|
||||
|
||||
if (!user) return event
|
||||
|
||||
const user_name = `${user.first_name.split(/[ ,]+/)[0]} ${
|
||||
user.last_name.split(/[ ,]+/)[0]
|
||||
}`
|
||||
|
||||
return {
|
||||
...event,
|
||||
user_name,
|
||||
}
|
||||
})
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(__dirname, 'src/events.json'),
|
||||
JSON.stringify(allEventsWithUserNames),
|
||||
)
|
||||
}
|
||||
|
||||
main()
|
||||
@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
|
||||
declare const Textfit: any
|
||||
declare module 'react-textfit'
|
||||
@ -0,0 +1,42 @@
|
||||
const path = require('path')
|
||||
const withPlugins = require('next-compose-plugins')
|
||||
const withSourceMaps = require('@zeit/next-source-maps')
|
||||
const optimizedImages = require('next-optimized-images')
|
||||
const withBundleAnalyzer = require('@next/bundle-analyzer')({
|
||||
enabled: process.env.ANALYZE === 'true',
|
||||
})
|
||||
// const withCSS = require('@zeit/next-css')
|
||||
|
||||
const basePath = process.env.NODE_ENV === 'development' ? '' : ''
|
||||
|
||||
module.exports = withPlugins(
|
||||
[
|
||||
[withBundleAnalyzer({})],
|
||||
[
|
||||
withSourceMaps({
|
||||
webpack(config) {
|
||||
return config
|
||||
},
|
||||
}),
|
||||
],
|
||||
[
|
||||
optimizedImages,
|
||||
{
|
||||
responsive: {
|
||||
adapter: require('responsive-loader/sharp'),
|
||||
publicPath: path.join(basePath, '_next/static/images/'),
|
||||
},
|
||||
},
|
||||
],
|
||||
// [withCSS({ cssModules: true })],
|
||||
],
|
||||
{
|
||||
publicRuntimeConfig: {
|
||||
basePath,
|
||||
},
|
||||
serverRuntimeConfig: {
|
||||
PROJECT_ROOT: __dirname,
|
||||
},
|
||||
basePath,
|
||||
},
|
||||
)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,68 @@
|
||||
{
|
||||
"name": "seminario-next",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 13001",
|
||||
"build": "next build",
|
||||
"export": "next export",
|
||||
"start": "next start",
|
||||
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
|
||||
"fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/react": "^1.0.0",
|
||||
"@chakra-ui/theme": "^1.0.0",
|
||||
"@chakra-ui/theme-tools": "^1.0.0",
|
||||
"@directus/sdk-js": "^6.3.0",
|
||||
"@emotion/react": "^11.1.1",
|
||||
"@emotion/styled": "^11.0.0",
|
||||
"@next/bundle-analyzer": "^9.5.5",
|
||||
"@typescript-eslint/eslint-plugin": "^4.8.1",
|
||||
"@typescript-eslint/parser": "^4.8.1",
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"@zeit/next-source-maps": "0.0.3",
|
||||
"bent": "^7.3.12",
|
||||
"eslint": "^7.13.0",
|
||||
"eslint-config-prettier": "^6.15.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-react": "^7.21.5",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"focus-visible": "^5.2.0",
|
||||
"framer-motion": "^2.9.4",
|
||||
"imagemin-mozjpeg": "^9.0.0",
|
||||
"imagemin-optipng": "^8.0.0",
|
||||
"lodash": "^4.17.20",
|
||||
"lqip-loader": "^2.2.1",
|
||||
"next": "^10.0.2",
|
||||
"next-compose-plugins": "^2.2.1",
|
||||
"next-optimized-images": "^2.6.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"prettier": "^2.1.2",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-headroom": "^3.0.0",
|
||||
"react-icons": "^3.11.0",
|
||||
"react-markdown": "^5.0.3",
|
||||
"react-textfit": "^1.1.0",
|
||||
"responsive-loader": "^2.2.0",
|
||||
"sharp": "^0.26.3",
|
||||
"smoothscroll-polyfill": "^0.4.4",
|
||||
"typeface-ibm-plex-sans": "^1.1.13",
|
||||
"webp-loader": "^0.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bent": "^7.3.2",
|
||||
"@types/node": "^14.14.10",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/react": "^16.9.56",
|
||||
"@types/react-dom": "^16.9.9",
|
||||
"@types/react-headroom": "^2.2.1",
|
||||
"@types/smoothscroll-polyfill": "^0.3.1",
|
||||
"dotenv": "^8.2.0",
|
||||
"eslint-plugin-simple-import-sort": "^5.0.3",
|
||||
"node-fetch": "^2.6.1",
|
||||
"typescript": "^4.1.2"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 300 B |
|
After Width: | Height: | Size: 486 B |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 335 B |
@ -0,0 +1 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
@ -0,0 +1,57 @@
|
||||
#!/bin/sh
|
||||
|
||||
check_available() {
|
||||
# Function to check if a program is installed
|
||||
which $1 &> /dev/null
|
||||
|
||||
if [ $? = 1 ]; then
|
||||
echo "$1 is not available, please install it before running the script"
|
||||
exit 1
|
||||
fi
|
||||
}
|
||||
|
||||
gen_password() {
|
||||
check_available openssl
|
||||
openssl rand -base64 32
|
||||
}
|
||||
|
||||
read -p "MySQL password: (press enter to randomize): " mysql_password
|
||||
mysql_password=${mysql_password:-`gen_password`}
|
||||
|
||||
read -p "Directus pubkey: (press enter to randomize): " directus_pubkey
|
||||
directus_pubkey=${directus_pubkey:-`gen_password`}
|
||||
|
||||
read -p "Directus secretkey: (press enter to randomize): " directus_secret
|
||||
directus_secret=${directus_secret:-`gen_password`}
|
||||
|
||||
if [ ! -f "./.env" ]; then
|
||||
echo "Copying ./env.example to ./.env"
|
||||
cp ./env.example ./.env
|
||||
fi
|
||||
|
||||
sed -i -e "s#MYSQL_PASSWORD=.*#MYSQL_PASSWORD=${mysql_password}#g" \
|
||||
"$(dirname "$0")/.env"
|
||||
|
||||
sed -i -e "s#DIRECTUS_AUTH_PUBLICKEY=.*#DIRECTUS_AUTH_PUBLICKEY=${directus_pubkey}#g" \
|
||||
"$(dirname "$0")/.env"
|
||||
|
||||
sed -i -e "s#DIRECTUS_AUTH_SECRETKEY=.*#DIRECTUS_AUTH_SECRETKEY=${directus_secret}#g" \
|
||||
"$(dirname "$0")/.env"
|
||||
|
||||
read -p "Start docker containers? (requires docker-compose) [Y/n] " start_docker
|
||||
start_docker=${start_docker:-Y}
|
||||
|
||||
if [[ $start_docker =~ [yY] ]]; then
|
||||
check_available docker-compose
|
||||
sudo docker-compose up -d
|
||||
|
||||
# while true; do
|
||||
# sudo docker-compose logs mysql | grep "mysqld: ready for connections" &> /dev/null
|
||||
# EC=$?
|
||||
# if [ $EC -eq 0 ]; then
|
||||
# sleep 5
|
||||
# sudo docker-compose run --rm directus install --email admin@artiweb.net --password password
|
||||
# break
|
||||
# fi
|
||||
# done
|
||||
fi
|
||||
@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import { ChakraProps, Box } from '@chakra-ui/core'
|
||||
|
||||
import { ReactComponent as LogoSVG } from '../images/header/logo.svg'
|
||||
|
||||
interface LogoProps {
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
const Logo: React.FC = (props) => {
|
||||
return <LogoSVG {...props} />
|
||||
}
|
||||
|
||||
const StyledLogo: React.FC<ChakraProps & LogoProps> = (props) => {
|
||||
return <Box as={Logo} {...props} />
|
||||
}
|
||||
|
||||
export default StyledLogo
|
||||
@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import { IconButton } from '@chakra-ui/react'
|
||||
import { MdMenu, MdClose } from 'react-icons/md'
|
||||
|
||||
interface MenuButtonProps {
|
||||
isOpen?: boolean
|
||||
handleClick?: () => void
|
||||
}
|
||||
|
||||
const MenuButton: React.FC<MenuButtonProps> = ({ handleClick, isOpen = false }) => {
|
||||
return (
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
aria-label="Open menu"
|
||||
icon={!isOpen ? <MdMenu /> : <MdClose />}
|
||||
fontSize="2rem"
|
||||
mr="1rem"
|
||||
variant="ghost"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuButton
|
||||
@ -0,0 +1,86 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { AnimateSharedLayout, motion } from 'framer-motion'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Link as ChakraLink, Flex, Box, Stack, HStack } from '@chakra-ui/react'
|
||||
import Headroom from 'react-headroom'
|
||||
|
||||
import paths from '../paths'
|
||||
|
||||
const Container = motion.custom(Flex)
|
||||
|
||||
const containerVariants = {
|
||||
open: {
|
||||
opacity: 1,
|
||||
display: 'flex',
|
||||
},
|
||||
closed: {
|
||||
opacity: 0,
|
||||
transition: {
|
||||
when: 'afterChildren',
|
||||
},
|
||||
transitionEnd: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
type NavProps = {
|
||||
handleClick: () => void
|
||||
variant?: string
|
||||
}
|
||||
|
||||
const Nav: React.FC<NavProps> = ({ handleClick, variant = undefined }) => {
|
||||
const { pathname } = useRouter()
|
||||
|
||||
return (
|
||||
<Container
|
||||
direction="row"
|
||||
wrap="wrap"
|
||||
h="100%"
|
||||
justify="center"
|
||||
align="center"
|
||||
display="flex"
|
||||
variants={containerVariants}
|
||||
animate={variant}
|
||||
>
|
||||
<Stack
|
||||
direction={['column', 'row']}
|
||||
spacing={['1rem', '2.5rem']}
|
||||
position={['absolute', 'static']}
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
{paths.map((path) => {
|
||||
const currentLocation = pathname === '/' ? '/' : pathname.substring(1)
|
||||
const currentPath = path.path === '/' ? '/' : path.path.substring(1)
|
||||
|
||||
if (currentPath === '/') {
|
||||
return null
|
||||
}
|
||||
|
||||
const current =
|
||||
currentLocation === currentPath ||
|
||||
(currentPath !== '/' && currentLocation.includes(currentPath))
|
||||
|
||||
return (
|
||||
<Box key={path.path}>
|
||||
<Link href={path.path} passHref>
|
||||
<ChakraLink
|
||||
onClick={handleClick}
|
||||
fontWeight="bold"
|
||||
color={current ? 'blue' : 'black'}
|
||||
fontSize="md"
|
||||
>
|
||||
{path.name}
|
||||
</ChakraLink>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default Nav
|
||||
@ -0,0 +1,105 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
Image,
|
||||
Link as ChakraLink,
|
||||
Box,
|
||||
Flex,
|
||||
Spacer,
|
||||
useBreakpointValue,
|
||||
} from '@chakra-ui/react'
|
||||
import { motion } from 'framer-motion'
|
||||
import Headroom from 'react-headroom'
|
||||
|
||||
import Nav from './Nav'
|
||||
import MenuButton from './MenuButton'
|
||||
|
||||
export const closedNavHeight = '76px'
|
||||
|
||||
const headerVariants = {
|
||||
open: {
|
||||
height: '100vh',
|
||||
transition: {
|
||||
ease: 'easeInOut',
|
||||
duration: 0.3,
|
||||
when: 'beforeChildren',
|
||||
},
|
||||
},
|
||||
closed: {
|
||||
height: closedNavHeight,
|
||||
transition: {
|
||||
when: 'afterChildren',
|
||||
ease: 'easeInOut',
|
||||
duration: 0.3,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const MotionFlex = motion.custom(Flex)
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const [navOpen, setNavOpen] = useState(false)
|
||||
const isMobile = useBreakpointValue<boolean>({
|
||||
base: true,
|
||||
sm: true,
|
||||
md: true,
|
||||
lg: false,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.style.setProperty('--nav-height', closedNavHeight)
|
||||
})
|
||||
|
||||
const toggleNav = () => {
|
||||
setNavOpen(!navOpen)
|
||||
|
||||
const body = document.getElementsByTagName('body')[0]
|
||||
body.classList.toggle('lock-scroll')
|
||||
}
|
||||
|
||||
const closeNav = () => {
|
||||
setNavOpen(false)
|
||||
|
||||
const body = document.getElementsByTagName('body')[0]
|
||||
body.classList.remove('lock-scroll')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile && navOpen) {
|
||||
closeNav()
|
||||
}
|
||||
}, [isMobile, navOpen])
|
||||
|
||||
return (
|
||||
<Headroom style={{ zIndex: 2 }}>
|
||||
<MotionFlex
|
||||
layout="position"
|
||||
w="100%"
|
||||
direction="column"
|
||||
position="absolute"
|
||||
variants={headerVariants}
|
||||
initial="closed"
|
||||
animate={navOpen ? 'open' : 'closed'}
|
||||
bg="white"
|
||||
>
|
||||
<Flex h={closedNavHeight} align="center" px={[null, null, '2rem']}>
|
||||
<Link href="/" passHref>
|
||||
<ChakraLink onClick={() => closeNav()}>
|
||||
<Image src="/images/logo.svg" alt="Logo del estudio" p="1rem" h="100%" />
|
||||
</ChakraLink>
|
||||
</Link>
|
||||
<Spacer />
|
||||
{isMobile ? (
|
||||
<MenuButton isOpen={navOpen} handleClick={() => toggleNav()} />
|
||||
) : (
|
||||
<Nav variant="open" handleClick={() => closeNav()} />
|
||||
)}
|
||||
</Flex>
|
||||
{isMobile ? <Nav handleClick={() => closeNav()} /> : null}
|
||||
</MotionFlex>
|
||||
<Box w="100%" h={closedNavHeight} />
|
||||
</Headroom>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -0,0 +1,73 @@
|
||||
import { Image, Box, BoxProps, SystemStyleObject } from '@chakra-ui/react'
|
||||
|
||||
type ResponsiveImageProps = {
|
||||
url: string | null
|
||||
avatar?: boolean
|
||||
alt: string
|
||||
imageStyle?: SystemStyleObject
|
||||
filter?: string
|
||||
}
|
||||
|
||||
// const defaultSizes = 'sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800'
|
||||
|
||||
const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
|
||||
url,
|
||||
avatar,
|
||||
alt,
|
||||
children,
|
||||
imageStyle,
|
||||
w,
|
||||
h,
|
||||
...rest
|
||||
}) => {
|
||||
if (url === null) return null
|
||||
|
||||
let placeholder
|
||||
let responsiveImage
|
||||
let responsiveImageWebp
|
||||
|
||||
// The sizes are hardcoded because of a bug with webpack that impedes parametrization string interpolation
|
||||
// after the question mark
|
||||
// see https://github.com/cyrilwanner/next-optimized-images/issues/16
|
||||
if (avatar) {
|
||||
placeholder = require(`../assets/${url}?lqip`)
|
||||
responsiveImage = require(`../assets/${url}?resize&sizes[]=96,sizes[]=128,sizes[]=256&format=jpg`)
|
||||
responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=96,sizes[]=128,sizes[]=256&format=webp`)
|
||||
} else {
|
||||
placeholder = require(`../assets/${url}?lqip`)
|
||||
responsiveImage = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800&format=jpg`)
|
||||
responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800&format=webp`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
width={w ?? responsiveImage.width}
|
||||
height={h ?? responsiveImage.height}
|
||||
background={`url(${placeholder})`}
|
||||
backgroundSize="cover"
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
objectFit="cover"
|
||||
sx={{
|
||||
'& picture img': imageStyle,
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
<picture>
|
||||
<source srcSet={responsiveImageWebp.srcSet} type="image/webp" />
|
||||
<Image
|
||||
objectFit="cover"
|
||||
w="100%"
|
||||
h="100%"
|
||||
alt={alt}
|
||||
src={responsiveImage.src}
|
||||
srcSet={responsiveImage.srcSet}
|
||||
loading="lazy"
|
||||
/>
|
||||
</picture>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default ResponsiveImage
|
||||
@ -0,0 +1,24 @@
|
||||
import Head from 'next/head'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const defaultTitle = 'Estudio'
|
||||
|
||||
type SEOProps = {
|
||||
title?: string
|
||||
}
|
||||
|
||||
const SEO: React.FC<SEOProps> = ({ title }) => {
|
||||
const t = title ? `${title} | ${defaultTitle}` : defaultTitle
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<Head>
|
||||
<title>{t}</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta property="og:title" content={t} key="ogtitle" />
|
||||
<meta property="og:url" content={`${router.pathname}`} />
|
||||
</Head>
|
||||
)
|
||||
}
|
||||
|
||||
export default SEO
|
||||
@ -0,0 +1,232 @@
|
||||
import DirectusSDK from '@directus/sdk-js'
|
||||
import { IFile } from '@directus/sdk-js/dist/types/schemes/directus/File'
|
||||
import bent from 'bent'
|
||||
import fs from 'fs'
|
||||
import getConfig from 'next/config'
|
||||
import path from 'path'
|
||||
import { promisify } from 'util'
|
||||
|
||||
const { serverRuntimeConfig } = getConfig()
|
||||
const writeFile = promisify(fs.writeFile)
|
||||
const getBuffer = bent('buffer')
|
||||
|
||||
const assetsDir = path.join(serverRuntimeConfig.PROJECT_ROOT, '/src/assets/')
|
||||
|
||||
const notasImagesDir = path.join(assetsDir, '/notas/')
|
||||
const workImagesDir = path.join(assetsDir, '/work/')
|
||||
const avatarImagesDir = path.join(assetsDir, '/avatar/')
|
||||
|
||||
const createDir = (dir: string) => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
console.info(`Creating directory ${dir}`)
|
||||
fs.mkdirSync(dir)
|
||||
}
|
||||
}
|
||||
|
||||
createDir(assetsDir)
|
||||
createDir(notasImagesDir)
|
||||
createDir(workImagesDir)
|
||||
|
||||
export interface IFileWithData extends IFile {
|
||||
filename_disk: string
|
||||
data: {
|
||||
full_url: string
|
||||
}
|
||||
}
|
||||
|
||||
export async function getImage(id: number) {
|
||||
const images = ((await client.getFiles()) as unknown) as { data: Array<IFileWithData> }
|
||||
return images.data.find((file) => file.id === id)
|
||||
}
|
||||
|
||||
export async function downloadFile(id: number, dir: string): Promise<string | null> {
|
||||
const imageData = await getImage(id)
|
||||
if (!imageData) return null
|
||||
const fileDir = path.join(dir, imageData.filename_disk)
|
||||
|
||||
if (!fs.existsSync(fileDir)) {
|
||||
console.info(`Downloading image with id ${id} as ${fileDir}`)
|
||||
const buffer = await getBuffer(imageData.data.full_url.replace('http', 'https'))
|
||||
await writeFile(fileDir, buffer as Buffer)
|
||||
console.info(`Succesfully downloaded image with ${fileDir}`)
|
||||
} else {
|
||||
console.info(`Image ${fileDir} exists. Skipping download`)
|
||||
}
|
||||
|
||||
return imageData.filename_disk
|
||||
}
|
||||
|
||||
export async function extractUrlAndDownloadImage(element, imageKey: string, dir: string) {
|
||||
const imageId = element.data[imageKey]
|
||||
let imagenUrl = imageId ? await downloadFile(imageId, dir) : null
|
||||
const returnValue = { ...element.data, [`${imageKey}_file`]: imagenUrl }
|
||||
|
||||
return returnValue
|
||||
}
|
||||
|
||||
const client = new DirectusSDK({
|
||||
mode: 'jwt',
|
||||
project: '_',
|
||||
url: process.env.DIRECTUS_HOST,
|
||||
})
|
||||
|
||||
export async function login() {
|
||||
return client.login({
|
||||
email: process.env.DIRECTUS_API_USER,
|
||||
password: process.env.DIRECTUS_API_PASSWORD,
|
||||
})
|
||||
}
|
||||
|
||||
export interface IWork {
|
||||
id: number
|
||||
titulo: string
|
||||
banner: number
|
||||
tags: string[]
|
||||
cliente: string
|
||||
pais: string
|
||||
year: string
|
||||
texto_descripcion: string
|
||||
color1: string
|
||||
color2: string
|
||||
imagenes: number[]
|
||||
slug: string
|
||||
}
|
||||
|
||||
export interface IWorkWithBanner extends IWork {
|
||||
banner_file: string | null
|
||||
}
|
||||
|
||||
export interface IWorkWithImages extends IWorkWithBanner {
|
||||
imagenes_files: string[] | null
|
||||
}
|
||||
|
||||
export async function getAllWorks() {
|
||||
return client.getItems<IWork[]>('work')
|
||||
}
|
||||
|
||||
export async function getWorkById(id: number) {
|
||||
return client.getItem<IWork>('work', id)
|
||||
}
|
||||
|
||||
export interface IAbout {
|
||||
texto_about: string
|
||||
texto_team: string
|
||||
}
|
||||
|
||||
export async function getAbout() {
|
||||
return client.getItem<IAbout>('about', 1)
|
||||
}
|
||||
|
||||
export interface IInicio {
|
||||
mensaje_inspirador: string
|
||||
fondo: number
|
||||
}
|
||||
|
||||
export interface IInicioWithImage {
|
||||
fondo_file: string
|
||||
}
|
||||
|
||||
export async function getInicio() {
|
||||
return client.getItem<IInicio[]>('inicio', 1)
|
||||
}
|
||||
|
||||
export interface ITeamMember {
|
||||
id: number
|
||||
nombre: string
|
||||
cita: string
|
||||
avatar: number
|
||||
}
|
||||
|
||||
export interface ITeamMemberWithImage {
|
||||
avatar_file: string
|
||||
}
|
||||
|
||||
export async function getAllTeam() {
|
||||
return client.getItems<ITeamMember[]>('el_team')
|
||||
}
|
||||
|
||||
export async function getTeamById(id: number) {
|
||||
return client.getItem<ITeamMember>('team', id)
|
||||
}
|
||||
|
||||
export interface INota {
|
||||
id: number
|
||||
titulo: string
|
||||
tiempo_lectura: number
|
||||
cuerpo: string
|
||||
tags: string[]
|
||||
slug: string
|
||||
imagen: number
|
||||
}
|
||||
|
||||
export interface INotaWithImage extends INota {
|
||||
imagen_file: string | null
|
||||
}
|
||||
|
||||
export async function getAllNotas() {
|
||||
return client.getItems<INota[]>('notas')
|
||||
}
|
||||
|
||||
export async function getNotaById(id: number) {
|
||||
return client.getItem<INota>('notas', id)
|
||||
}
|
||||
|
||||
export async function getAllNotasWithImages(): Promise<INotaWithImage[]> {
|
||||
const notas = await getAllNotas()
|
||||
|
||||
const notasWithImages: INotaWithImage[] = await Promise.all(
|
||||
notas.data.map(async (nota) =>
|
||||
extractUrlAndDownloadImage(nota, 'imagen', notasImagesDir),
|
||||
),
|
||||
)
|
||||
|
||||
return notasWithImages
|
||||
}
|
||||
|
||||
export async function getNotaWithImage(id: number): Promise<INotaWithImage> {
|
||||
const nota = await getNotaById(id)
|
||||
const notaWithImage = await extractUrlAndDownloadImage(nota, 'imagen', notasImagesDir)
|
||||
return notaWithImage
|
||||
}
|
||||
|
||||
export async function getAllWorksWithBanners(): Promise<IWorkWithBanner[]> {
|
||||
const works = await getAllWorks()
|
||||
|
||||
const worksWithBanners: IWorkWithBanner[] = await Promise.all(
|
||||
works.data.map(async (work) =>
|
||||
extractUrlAndDownloadImage(work, 'banner', workImagesDir),
|
||||
),
|
||||
)
|
||||
|
||||
return worksWithBanners
|
||||
}
|
||||
|
||||
export async function getWorkWithImages(id: number): Promise<IWorkWithImages> {
|
||||
const work = await getWorkById(id)
|
||||
const workWithBanner = extractUrlAndDownloadImage(work, 'banner', workImagesDir)
|
||||
const imageNames: string[] = await Promise.all(
|
||||
work.data.imagenes.map(async (image) => downloadFile(image, workImagesDir)),
|
||||
)
|
||||
|
||||
return { ...workWithBanner, imagenes_files: imageNames }
|
||||
}
|
||||
|
||||
export async function getTeamMembersWithImages(): Promise<ITeamMemberWithImage[]> {
|
||||
const team = await getAllTeam()
|
||||
|
||||
const teamWithAvatars: ITeamMemberWithImage[] = await Promise.all(
|
||||
team.data.map(async (member) =>
|
||||
extractUrlAndDownloadImage(member, 'avatar', avatarImagesDir),
|
||||
),
|
||||
)
|
||||
|
||||
return teamWithAvatars
|
||||
}
|
||||
|
||||
export async function getInicioWithImage(): Promise<IInicioWithImage> {
|
||||
const inicio = await getInicio()
|
||||
const inicioWithImage = await extractUrlAndDownloadImage(inicio, 'fondo', assetsDir)
|
||||
return inicioWithImage
|
||||
}
|
||||
|
||||
export default client
|
||||
@ -0,0 +1,59 @@
|
||||
import { Flex, ChakraProvider } from '@chakra-ui/react'
|
||||
import { AppProps } from 'next/app'
|
||||
import { useRouter } from 'next/router'
|
||||
import NProgress from 'nprogress'
|
||||
import { useEffect } from 'react'
|
||||
import Head from 'next/head'
|
||||
|
||||
import NavBar from '../components/NavBar'
|
||||
|
||||
import 'focus-visible/dist/focus-visible'
|
||||
import 'typeface-ibm-plex-sans'
|
||||
|
||||
import theme from '../theme'
|
||||
|
||||
const App: React.FC<AppProps> = ({ Component, pageProps }) => {
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
const setDocHeight = () => {
|
||||
document.documentElement.style.setProperty('--vh', `${window.innerHeight / 100}px`)
|
||||
}
|
||||
|
||||
const load = () => {
|
||||
NProgress.start()
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
NProgress.done()
|
||||
}
|
||||
|
||||
router.events.on('routeChangeStart', load)
|
||||
router.events.on('routeChangeComplete', stop)
|
||||
router.events.on('routeChangeError', stop)
|
||||
|
||||
setDocHeight()
|
||||
window.addEventListener('resize', function () {
|
||||
setDocHeight()
|
||||
})
|
||||
window.addEventListener('orientationchange', function () {
|
||||
setDocHeight()
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
<ChakraProvider theme={theme} resetCSS>
|
||||
<Flex direction="column" minH="calc(var(--vh, 1vh) * 100)" w="100%">
|
||||
<NavBar />
|
||||
<Component {...pageProps} />
|
||||
</Flex>
|
||||
</ChakraProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@ -0,0 +1,57 @@
|
||||
import getConfig from 'next/config'
|
||||
import Document, { Head, Html, Main, NextScript } from 'next/document'
|
||||
|
||||
const { publicRuntimeConfig } = getConfig()
|
||||
|
||||
const description =
|
||||
'Sitio web para Seminario de Gestion de Contenidos para la web llevado a cabo por Lautaro Valdez e Ian Mancini'
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html lang="es">
|
||||
<Head>
|
||||
<meta charSet="UTF-8" />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href={`${publicRuntimeConfig.basePath}/apple-touch-icon.png`}
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href={`${publicRuntimeConfig.basePath}/favicon-32x32.png`}
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href={`${publicRuntimeConfig.basePath}/favicon-16x16.png`}
|
||||
/>
|
||||
<link
|
||||
rel="manifest"
|
||||
href={`${publicRuntimeConfig.basePath}/site.webmanifest`}
|
||||
/>
|
||||
|
||||
<meta property="og:description" content={description} key="ogdesc" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content={`${publicRuntimeConfig.basePath}/android-chrome-512x512.png`}
|
||||
key="ogimage"
|
||||
/>
|
||||
|
||||
<link rel="icon" href={`${publicRuntimeConfig.basePath}/favicon.ico`} />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument
|
||||
@ -0,0 +1,48 @@
|
||||
import { Text, Box } from '@chakra-ui/react'
|
||||
|
||||
import ResponsiveImage from '../components/ResponsiveImage'
|
||||
import SEO from '../components/SEO'
|
||||
|
||||
import { getInicioWithImage, login } from '../lib/api'
|
||||
|
||||
const Home: React.FC = ({ fondo_file, mensaje_inspirador }) => {
|
||||
return (
|
||||
<>
|
||||
<SEO />
|
||||
<Box direction="column" w="100%" position="relative" flex="1 0 0">
|
||||
<ResponsiveImage
|
||||
url={fondo_file}
|
||||
alt="Fondo de página de inicio"
|
||||
zIndex={0}
|
||||
w="100%"
|
||||
h="calc(var(--vh, 1vh) * 100 - var(--nav-height, 72px))"
|
||||
overflow="hidden"
|
||||
/>
|
||||
<Text
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
fontSize={['3xl', '3xl', '7xl']}
|
||||
fontWeight="700"
|
||||
lineHeight="1.2"
|
||||
pr="2rem"
|
||||
zIndex={1}
|
||||
position="absolute"
|
||||
textAlign="right"
|
||||
style={{ wordSpacing: '9999px' }}
|
||||
>
|
||||
{mensaje_inspirador}
|
||||
</Text>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
||||
export async function getStaticProps() {
|
||||
await login()
|
||||
|
||||
const data = await getInicioWithImage()
|
||||
|
||||
return { props: data }
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
type Path = {
|
||||
name: string
|
||||
path: string
|
||||
}
|
||||
|
||||
const paths: Array<Path> = [
|
||||
{
|
||||
name: 'Inicio',
|
||||
path: '/',
|
||||
},
|
||||
{
|
||||
name: 'Work',
|
||||
path: '/work',
|
||||
},
|
||||
{
|
||||
name: 'About',
|
||||
path: '/about',
|
||||
},
|
||||
{
|
||||
name: 'El team',
|
||||
path: '/team',
|
||||
},
|
||||
{
|
||||
name: 'Notas',
|
||||
path: '/notas',
|
||||
},
|
||||
{
|
||||
name: 'Contact',
|
||||
path: '/contact',
|
||||
},
|
||||
]
|
||||
|
||||
export default paths
|
||||
@ -0,0 +1,78 @@
|
||||
import { extendTheme } from '@chakra-ui/react'
|
||||
|
||||
export const blue = '#3452FF'
|
||||
|
||||
const customTheme = extendTheme({
|
||||
colors: {
|
||||
blue,
|
||||
},
|
||||
fonts: {
|
||||
body: 'IBM Plex Sans, sans-serif',
|
||||
heading: 'IBM Plex Sans, sans-serif',
|
||||
},
|
||||
styles: {
|
||||
global: {
|
||||
'.headroom': {
|
||||
zIndex: '99 !important',
|
||||
},
|
||||
'#nprogress': {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'.hide-scrollbar, #__next': {
|
||||
'::webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
scrollbarWidth: 'none !important',
|
||||
},
|
||||
'#nprogress .bar': {
|
||||
background: 'blue',
|
||||
position: 'fixed',
|
||||
zIndex: 1031,
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '3px',
|
||||
},
|
||||
a: {
|
||||
textDecoration: 'none !important',
|
||||
},
|
||||
'html, body': {
|
||||
fontFamily: 'IBM Plex Sans, sans-serif',
|
||||
bg: 'white',
|
||||
color: 'black',
|
||||
fontSize: 'xl',
|
||||
lineHeight: 'tall',
|
||||
width: '100%',
|
||||
minHeight: '100vh',
|
||||
},
|
||||
'.enable-scroll': {
|
||||
overflow: 'hidden auto',
|
||||
},
|
||||
'.lock-scroll': {
|
||||
overflow: 'hidden !important',
|
||||
},
|
||||
// '*': {
|
||||
// scrollbarWidth: 'auto',
|
||||
// scrollbarColor: `${green} black`,
|
||||
// },
|
||||
|
||||
// '*::-webkit-scrollbar': {
|
||||
// width: '12px',
|
||||
// height: '12px',
|
||||
// },
|
||||
// '*::-webkit-scrollbar-track': {
|
||||
// background: `#000000`,
|
||||
// },
|
||||
// '*::-webkit-scrollbar-thumb': {
|
||||
// backgroundColor: `${green}`,
|
||||
// borderRadius: '12px',
|
||||
// border: '2px solid black',
|
||||
// },
|
||||
// '*::-webkit-scrollbar-corner': {
|
||||
// backgroundColor: `#000000`,
|
||||
// },
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export default customTheme
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in new issue