From 5a70d78819d42153e892a4c811441f385c983ee1 Mon Sep 17 00:00:00 2001 From: Ian Mancini Date: Fri, 11 Dec 2020 01:18:57 -0300 Subject: [PATCH] Add /works/[slug] pages --- src/components/Logo.tsx | 18 ----- src/components/ResponsiveImage.tsx | 13 +-- src/lib/api.ts | 40 +++++++++- src/pages/work/[slug].tsx | 105 +++++++++++++++++++++++++ src/pages/{work.tsx => work/index.tsx} | 6 +- src/theme.ts | 3 + tsconfig.json | 3 +- 7 files changed, 157 insertions(+), 31 deletions(-) delete mode 100644 src/components/Logo.tsx create mode 100644 src/pages/work/[slug].tsx rename src/pages/{work.tsx => work/index.tsx} (93%) diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx deleted file mode 100644 index abb0b48..0000000 --- a/src/components/Logo.tsx +++ /dev/null @@ -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 -} - -const StyledLogo: React.FC = (props) => { - return -} - -export default StyledLogo diff --git a/src/components/ResponsiveImage.tsx b/src/components/ResponsiveImage.tsx index 60278a2..d42ff2c 100644 --- a/src/components/ResponsiveImage.tsx +++ b/src/components/ResponsiveImage.tsx @@ -35,10 +35,13 @@ const ResponsiveImage: React.FC = ({ 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`) + 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`) } + const src = responsiveImage.src.replaceAll('_next', '/_next') + const srcSet = responsiveImage.srcSet.replaceAll('_next', '/_next') + return ( = ({ backgroundSize="cover" position="relative" overflow="hidden" - objectFit="cover" sx={{ '& picture img': imageStyle, }} @@ -55,14 +57,15 @@ const ResponsiveImage: React.FC = ({ > {children} - + {alt} diff --git a/src/lib/api.ts b/src/lib/api.ts index e458d5f..2e8f97a 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -110,6 +110,16 @@ export async function getWorkById(id: number) { return client.getItem('work', id) } +export async function getWorkBySlug(slug: string) { + return client.getItems('work', { + filter: { + slug: { + eq: slug, + }, + }, + }) +} + export interface IAbout { texto_about: string texto_team: string @@ -132,6 +142,22 @@ export async function getInicio() { return client.getItem('inicio', 1) } +interface IWorkImageIds { + id: number + work_id: number + directus_files_id: number +} + +export async function getWorkImageIds(id: number) { + return client.getItems('work_directus_files', { + filter: { + work_id: { + eq: id, + }, + }, + }) +} + export interface ITeamMember { id: number nombre: string @@ -209,11 +235,17 @@ export async function getInicioWithImage(): Promise { return inicioWithImage } -export async function getWorkWithImages(id: number): Promise { - const work = await getWorkById(id) - const workWithBanner = extractUrlAndDownloadImage(work, 'banner', workImagesDir) +export async function getWorkWithImages(slug: string): Promise { + const _work = await getWorkBySlug(slug) + const work = _work.data[0] + + const workImageIds = await getWorkImageIds(work.id) + + const workWithBanner = await extractUrlAndDownloadImage(work, 'banner', workImagesDir) 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 } diff --git a/src/pages/work/[slug].tsx b/src/pages/work/[slug].tsx new file mode 100644 index 0000000..237070a --- /dev/null +++ b/src/pages/work/[slug].tsx @@ -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 ( + <> + + + + + + + {data.titulo} + + + {data.tags.map((tag) => ( + + {tag} + + ))} + + + + + + + + Cliente + + {data.cliente} + + + + País + + {data.pais} + + + + Año + + {data.year} + + + + + + + + El proyecto + + {data.texto_descripcion} + + + {data.imagenes_files.map((imagen, index) => ( + + ))} + + + ) +} + +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 } } +} diff --git a/src/pages/work.tsx b/src/pages/work/index.tsx similarity index 93% rename from src/pages/work.tsx rename to src/pages/work/index.tsx index 30bcd5f..eb83d27 100644 --- a/src/pages/work.tsx +++ b/src/pages/work/index.tsx @@ -1,10 +1,10 @@ import { Stack, Heading, Text, Box, Flex, Link as ChakraLink } from '@chakra-ui/react' import Link from 'next/link' -import ResponsiveImage from '../components/ResponsiveImage' -import SEO from '../components/SEO' +import ResponsiveImage from 'components/ResponsiveImage' +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 }) => { return ( diff --git a/src/theme.ts b/src/theme.ts index 5b26d47..c714d2f 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -15,6 +15,9 @@ const customTheme = extendTheme({ }, styles: { global: { + p: { + lineHeight: '1.9', + }, '.headroom': { zIndex: '99 !important', }, diff --git a/tsconfig.json b/tsconfig.json index 93a83a4..dcec99a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,8 @@ "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve" + "jsx": "preserve", + "baseUrl": "./src" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"]