Add /works/[slug] pages

master
Ian Mancini 4 years ago
parent 8f25dce7cb
commit 5a70d78819

@ -1,18 +0,0 @@
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

@ -35,10 +35,13 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=96,sizes[]=128,sizes[]=256&format=webp`) responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=96,sizes[]=128,sizes[]=256&format=webp`)
} else { } else {
placeholder = require(`../assets/${url}?lqip`) placeholder = require(`../assets/${url}?lqip`)
responsiveImage = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800&format=jpg`) responsiveImage = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800&sizes[]=1900&quality=85format=jpg`)
responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800,sizes[]=1900&quality=90&format=webp`) responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800,sizes[]=1900&quality=90&format=webp`)
} }
const src = responsiveImage.src.replaceAll('_next', '/_next')
const srcSet = responsiveImage.srcSet.replaceAll('_next', '/_next')
return ( return (
<Box <Box
width={w ?? responsiveImage.width} width={w ?? responsiveImage.width}
@ -47,7 +50,6 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
backgroundSize="cover" backgroundSize="cover"
position="relative" position="relative"
overflow="hidden" overflow="hidden"
objectFit="cover"
sx={{ sx={{
'& picture img': imageStyle, '& picture img': imageStyle,
}} }}
@ -55,14 +57,15 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
> >
{children} {children}
<picture> <picture>
<source srcSet={responsiveImageWebp.srcSet} type="image/webp" /> <source srcSet={srcSet} type="image/webp" />
<Image <Image
objectFit="cover" objectFit="cover"
objectPosition="center"
w="100%" w="100%"
h="100%" h="100%"
alt={alt} alt={alt}
src={responsiveImage.src} src={src}
srcSet={responsiveImage.srcSet} srcSet={srcSet}
loading="lazy" loading="lazy"
/> />
</picture> </picture>

@ -110,6 +110,16 @@ export async function getWorkById(id: number) {
return client.getItem<IWork>('work', id) return client.getItem<IWork>('work', id)
} }
export async function getWorkBySlug(slug: string) {
return client.getItems<IWork[]>('work', {
filter: {
slug: {
eq: slug,
},
},
})
}
export interface IAbout { export interface IAbout {
texto_about: string texto_about: string
texto_team: string texto_team: string
@ -132,6 +142,22 @@ export async function getInicio() {
return client.getItem<IInicio[]>('inicio', 1) return client.getItem<IInicio[]>('inicio', 1)
} }
interface IWorkImageIds {
id: number
work_id: number
directus_files_id: number
}
export async function getWorkImageIds(id: number) {
return client.getItems<IWorkImageIds[]>('work_directus_files', {
filter: {
work_id: {
eq: id,
},
},
})
}
export interface ITeamMember { export interface ITeamMember {
id: number id: number
nombre: string nombre: string
@ -209,11 +235,17 @@ export async function getInicioWithImage(): Promise<IInicioWithImage> {
return inicioWithImage return inicioWithImage
} }
export async function getWorkWithImages(id: number): Promise<IWorkWithImages> { export async function getWorkWithImages(slug: string): Promise<IWorkWithImages> {
const work = await getWorkById(id) const _work = await getWorkBySlug(slug)
const workWithBanner = extractUrlAndDownloadImage(work, 'banner', workImagesDir) const work = _work.data[0]
const workImageIds = await getWorkImageIds(work.id)
const workWithBanner = await extractUrlAndDownloadImage(work, 'banner', workImagesDir)
const imageNames: string[] = await Promise.all( const imageNames: string[] = await Promise.all(
work.data.imagenes.map(async (image) => downloadFile(image, workImagesDir)), workImageIds.data.map(async (image) =>
downloadFile(image.directus_files_id, workImagesDir),
),
) )
return { ...workWithBanner, imagenes_files: imageNames } return { ...workWithBanner, imagenes_files: imageNames }

@ -0,0 +1,105 @@
import { Spacer, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
import ResponsiveImage from 'components/ResponsiveImage'
import SEO from 'components/SEO'
import { getAllWorks, getWorkWithImages, IWorkWithImages, login } from 'lib/api'
const Work: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
return (
<>
<SEO title="work" />
<ResponsiveImage
url={`work/${data.banner_file}`}
alt={`Imagen de ${data.titulo}`}
w="100%"
minH="580px"
maxH="70vh"
mb="1rem"
/>
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
<Flex pb="4rem">
<Box>
<Heading as="h3" fontSize="xl" pb="0.5rem">
{data.titulo}
</Heading>
<Stack fontSize="md" spacing="1rem" direction="row">
{data.tags.map((tag) => (
<Text fontSize="md" key={tag}>
{tag}
</Text>
))}
</Stack>
</Box>
<Spacer />
<Flex direction="column" w="40%">
<Stack
direction="row"
wrap="wrap"
spacing="0"
justify="space-between"
pb="6rem"
>
<Box fontSize="md">
<Heading fontSize="inherit" as="h4" pb="0.5rem">
Cliente
</Heading>
<Text>{data.cliente}</Text>
</Box>
<Box fontSize="md">
<Heading fontSize="inherit" as="h4" pb="0.5rem">
País
</Heading>
<Text>{data.pais}</Text>
</Box>
<Box fontSize="md">
<Heading fontSize="inherit" as="h4" pb="0.5rem">
Año
</Heading>
<Text>{data.year}</Text>
</Box>
</Stack>
<Box w="100%" h="8px" mb="calc(2rem + 8px)">
<Box display="inline-block" w="60%" h="100%" bg={data.color1} />
<Box display="inline-block" w="15%" h="100%" bg={data.color2} />
</Box>
<Heading as="h4" fontSize="md" pb="1rem">
El proyecto
</Heading>
<Text fontSize="lg">{data.texto_descripcion}</Text>
</Flex>
</Flex>
{data.imagenes_files.map((imagen, index) => (
<ResponsiveImage
key={imagen}
width="100%"
height="auto"
url={`work/${imagen}`}
alt={`Imagen ${index} ilustrativa de ${data.titulo}`}
mb="2rem"
/>
))}
</Box>
</>
)
}
export default Work
export async function getStaticPaths() {
await login()
const works = await getAllWorks()
return {
paths: works.data.map((work) => `/work/${work.slug}`),
fallback: false,
}
}
export async function getStaticProps({ params }) {
await login()
const workWithImages = await getWorkWithImages(params.slug)
return { props: { data: workWithImages } }
}

@ -1,10 +1,10 @@
import { Stack, Heading, Text, Box, Flex, Link as ChakraLink } from '@chakra-ui/react' import { Stack, Heading, Text, Box, Flex, Link as ChakraLink } from '@chakra-ui/react'
import Link from 'next/link' import Link from 'next/link'
import ResponsiveImage from '../components/ResponsiveImage' import ResponsiveImage from 'components/ResponsiveImage'
import SEO from '../components/SEO' import SEO from 'components/SEO'
import { getAllWorksWithBanners, IWorkWithBanner, login } from '../lib/api' import { getAllWorksWithBanners, IWorkWithBanner, login } from 'lib/api'
const Work: React.FC<{ data: IWorkWithBanner[] }> = ({ data }) => { const Work: React.FC<{ data: IWorkWithBanner[] }> = ({ data }) => {
return ( return (

@ -15,6 +15,9 @@ const customTheme = extendTheme({
}, },
styles: { styles: {
global: { global: {
p: {
lineHeight: '1.9',
},
'.headroom': { '.headroom': {
zIndex: '99 !important', zIndex: '99 !important',
}, },

@ -12,7 +12,8 @@
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve" "jsx": "preserve",
"baseUrl": "./src"
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"] "exclude": ["node_modules"]

Loading…
Cancel
Save