Add /notas page

src/components/ResponsiveImage.tsx

@@ -36,7 +36,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps & BoxProps> = ({
   } else {
     placeholder = require(`../assets/${url}?lqip`)
     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 (

src/pages/_document.tsx

@@ -4,7 +4,7 @@ import Document, { Head, Html, Main, NextScript } from 'next/document'
 const { publicRuntimeConfig } = getConfig()
 
 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 {
   render() {

src/pages/notas.tsx

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