Add /works/[slug] pages

src/components/Logo.tsx

@@ -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

src/components/ResponsiveImage.tsx

@@ -35,10 +35,13 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
     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 (
     <Box
       width={w ?? responsiveImage.width}
@@ -47,7 +50,6 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
       backgroundSize="cover"
       position="relative"
       overflow="hidden"
-      objectFit="cover"
       sx={{
         '& picture img': imageStyle,
       }}
@@ -55,14 +57,15 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
     >
       {children}
       <picture>
-        <source srcSet={responsiveImageWebp.srcSet} type="image/webp" />
+        <source srcSet={srcSet} type="image/webp" />
         <Image
           objectFit="cover"
+          objectPosition="center"
           w="100%"
           h="100%"
           alt={alt}
-          src={responsiveImage.src}
-          srcSet={responsiveImage.srcSet}
+          src={src}
+          srcSet={srcSet}
           loading="lazy"
         />
       </picture>

src/lib/api.ts

@@ -110,6 +110,16 @@ export async function getWorkById(id: number) {
   return client.getItem<IWork>('work', id)
 }
 
+export async function getWorkBySlug(slug: string) {
+  return client.getItems<IWork[]>('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<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 {
   id: number
   nombre: string
@@ -209,11 +235,17 @@ export async function getInicioWithImage(): Promise<IInicioWithImage> {
   return inicioWithImage
 }
 
-export async function getWorkWithImages(id: number): Promise<IWorkWithImages> {
-  const work = await getWorkById(id)
-  const workWithBanner = extractUrlAndDownloadImage(work, 'banner', workImagesDir)
+export async function getWorkWithImages(slug: string): Promise<IWorkWithImages> {
+  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 }

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 (
+    <>
+      <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 } }
+}

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 (

src/theme.ts

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

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"]