Add /notas page

master
Ian Mancini 4 years ago
parent 13a88af73e
commit 7e11780f1c

@ -36,7 +36,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
} 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&format=jpg`)
responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800&format=webp`) responsiveImageWebp = require(`../assets/${url}?resize&sizes[]=300,sizes[]=600,sizes[]=900,sizes[]=1200,sizes[]=1800,sizes[]=1900&quality=90&format=webp`)
} }
return ( return (

@ -4,7 +4,7 @@ import Document, { Head, Html, Main, NextScript } from 'next/document'
const { publicRuntimeConfig } = getConfig() const { publicRuntimeConfig } = getConfig()
const description = const description =
'Sitio web para Seminario de Gestion de Contenidos para la web llevado a cabo por Lautaro Valdez e Ian Mancini' 'Sitio web para Seminario de Gestion de Contenidos para la Web. Llevado a cabo por Lautaro Valdez e Ian Mancini. Año 2020'
class MyDocument extends Document { class MyDocument extends Document {
render() { render() {

@ -0,0 +1,76 @@
import { Link as ChakraLink, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
import Link from 'next/link'
import ResponsiveImage from '../components/ResponsiveImage'
import SEO from '../components/SEO'
import { getAbout, getAllNotasWithImages, INotaWithImage, login } from '../lib/api'
const Notas: React.FC<{ notas: INotaWithImage[] }> = ({ notas }) => {
return (
<>
<SEO title="work" />
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
<Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
Notas y pensamientos
</Heading>
<Stack wrap="wrap" direction="row" spacing="2rem">
{notas.map((nota) => (
<Link href={`/notas/${nota.slug}`} passHref key={nota.slug}>
<ChakraLink>
<Flex
w="320px"
h="430px"
overflow="hidden"
position="relative"
borderRadius="primary"
align="flex-end"
>
<ResponsiveImage
position="absolute"
zIndex="0"
w="100%"
h="100%"
alt={`Imagen de ${nota.titulo}`}
url={`notas/${nota.imagen_file}`}
/>
<Stack position="relative" zIndex="1" p="1rem" spacing="0.25rem">
<Heading as="h3" fontSize="lg" lineHeight="1.2">
{nota.titulo}
</Heading>
<Text as="small" fontSize="sm" pb="1rem">
{nota.tiempo_lectura} min de lectura
</Text>
<Stack
w="100%"
wrap="nowrap"
overflow="hidden"
direction="row"
spacing="1rem"
fontSize="md"
sx={{ '& p': { whiteSpace: 'nowrap', textOverflow: 'ellipsis' } }}
>
{nota.tags.map((tag) => (
<Text key={tag}> {tag} </Text>
))}
</Stack>
</Stack>
</Flex>
</ChakraLink>
</Link>
))}
</Stack>
</Box>
</>
)
}
export default Notas
export async function getStaticProps() {
await login()
const data = await getAllNotasWithImages()
return { props: { notas: data } }
}
Loading…
Cancel
Save