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