Add /notas/[slug] page

src/lib/api.ts

@@ -120,6 +120,16 @@ export async function getWorkBySlug(slug: string) {
   })
 }
 
+export async function getNotaBySlug(slug: string) {
+  return client.getItems<INota[]>('notas', {
+    filter: {
+      slug: {
+        eq: slug,
+      },
+    },
+  })
+}
+
 export interface IAbout {
   texto_about: string
   texto_team: string
@@ -211,8 +221,10 @@ export async function getAllNotasWithImages(): Promise<INotaWithImage[]> {
   return notasWithImages
 }
 
-export async function getNotaWithImage(id: number): Promise<INotaWithImage> {
-  const nota = await getNotaById(id)
+export async function getNotaWithImage(slug: string): Promise<INotaWithImage> {
+  const _nota = await getNotaBySlug(slug)
+  const nota = _nota.data[0]
+
   const notaWithImage = await extractUrlAndDownloadImage(nota, 'imagen', notasImagesDir)
   return notaWithImage
 }

src/pages/notas/[slug].tsx

@@ -0,0 +1,64 @@
+import { Spacer, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
+
+import ResponsiveImage from 'components/ResponsiveImage'
+import SEO from 'components/SEO'
+
+import { getAllNotasWithImages, getNotaWithImage, INotaWithImage, login } from 'lib/api'
+import ReactMarkdown from 'react-markdown'
+
+const NotePage: React.FC<{ data: INotaWithImage }> = ({ data }) => {
+  console.log(data)
+  return (
+    <>
+      <SEO title="notas" />
+      <Box w={['100%', '100%', '880px']} pt="2rem" px="1rem" mx="auto" pb="6rem">
+        <Heading fontSize="2xl"> {data.titulo}</Heading>
+        <Text as="small" fontSize="sm" pb="2rem">
+          {data.tiempo_lectura} min de lectura
+        </Text>
+        <Stack
+          w="100%"
+          wrap="wrap"
+          direction="row"
+          spacing="1rem"
+          fontSize="md"
+          pb="2rem"
+        >
+          {data.tags.map((tag) => (
+            <Text key={tag}> {tag} </Text>
+          ))}
+        </Stack>
+        <Text as={ReactMarkdown} pb="3rem">
+          {data.cuerpo}
+        </Text>
+        <ResponsiveImage
+          borderRadius="primary"
+          w="100%"
+          h="auto"
+          alt={`Imagen de nota ${data.titulo}`}
+          url={`notas/${data.imagen_file}`}
+        />
+      </Box>
+    </>
+  )
+}
+
+export default NotePage
+
+export async function getStaticPaths() {
+  await login()
+  const notas = await getAllNotasWithImages()
+
+  return {
+    paths: notas.map((nota) => `/notas/${nota.slug}`),
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  await login()
+
+  const notaWithImage = await getNotaWithImage(params.slug)
+
+  return { props: { data: notaWithImage } }
+}

src/pages/notas/index.tsx

@@ -1,16 +1,16 @@
 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 ResponsiveImage from 'components/ResponsiveImage'
+import SEO from 'components/SEO'
 
-import { getAbout, getAllNotasWithImages, INotaWithImage, login } from '../lib/api'
+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">
+      <Box w={['100%', '100%', '1220px']} pt="2rem" px="2rem" mx="auto">
         <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
           Notas y pensamientos
         </Heading>
@@ -34,26 +34,38 @@ const Notas: React.FC<{ notas: INotaWithImage[] }> = ({ notas }) => {
                     alt={`Imagen de ${nota.titulo}`}
                     url={`notas/${nota.imagen_file}`}
                   />
-                  <Stack position="relative" zIndex="1" p="1rem" spacing="0.25rem">
+                  <Stack
+                    position="relative"
+                    zIndex="1"
+                    p="1rem"
+                    spacing="0.25rem"
+                    w="100%"
+                  >
                     <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
+                    <Box
                       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>
+                      <Text
+                        sx={{
+                          whiteSpace: 'nowrap',
+                          textOverflow: 'ellipsis',
+                          overflow: 'hidden',
+                          wordSpacing: '0.5rem',
+                        }}
+                      >
+                        {nota.tags.map((tag) => `${tag} `)}
+                      </Text>
+                    </Box>
                   </Stack>
                 </Flex>
               </ChakraLink>

src/pages/work/[slug].tsx

@@ -5,7 +5,7 @@ import SEO from 'components/SEO'
 
 import { getAllWorks, getWorkWithImages, IWorkWithImages, login } from 'lib/api'
 
-const Work: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
+const WorkPage: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
   return (
     <>
       <SEO title="work" />
@@ -84,7 +84,7 @@ const Work: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
   )
 }
 
-export default Work
+export default WorkPage
 
 export async function getStaticPaths() {
   await login()