Add /notas/[slug] page

master
Ian Mancini 4 years ago
parent 5a70d78819
commit be82458c0b

@ -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 { export interface IAbout {
texto_about: string texto_about: string
texto_team: string texto_team: string
@ -211,8 +221,10 @@ export async function getAllNotasWithImages(): Promise<INotaWithImage[]> {
return notasWithImages return notasWithImages
} }
export async function getNotaWithImage(id: number): Promise<INotaWithImage> { export async function getNotaWithImage(slug: string): Promise<INotaWithImage> {
const nota = await getNotaById(id) const _nota = await getNotaBySlug(slug)
const nota = _nota.data[0]
const notaWithImage = await extractUrlAndDownloadImage(nota, 'imagen', notasImagesDir) const notaWithImage = await extractUrlAndDownloadImage(nota, 'imagen', notasImagesDir)
return notaWithImage return notaWithImage
} }

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

@ -1,16 +1,16 @@
import { Link as ChakraLink, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react' import { Link as ChakraLink, Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
import Link from 'next/link' import Link from 'next/link'
import ResponsiveImage from '../components/ResponsiveImage' import ResponsiveImage from 'components/ResponsiveImage'
import SEO from '../components/SEO' 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 }) => { const Notas: React.FC<{ notas: INotaWithImage[] }> = ({ notas }) => {
return ( return (
<> <>
<SEO title="work" /> <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"> <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
Notas y pensamientos Notas y pensamientos
</Heading> </Heading>
@ -34,26 +34,38 @@ const Notas: React.FC<{ notas: INotaWithImage[] }> = ({ notas }) => {
alt={`Imagen de ${nota.titulo}`} alt={`Imagen de ${nota.titulo}`}
url={`notas/${nota.imagen_file}`} 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"> <Heading as="h3" fontSize="lg" lineHeight="1.2">
{nota.titulo} {nota.titulo}
</Heading> </Heading>
<Text as="small" fontSize="sm" pb="1rem"> <Text as="small" fontSize="sm" pb="1rem">
{nota.tiempo_lectura} min de lectura {nota.tiempo_lectura} min de lectura
</Text> </Text>
<Stack <Box
w="100%" w="100%"
wrap="nowrap" wrap="nowrap"
overflow="hidden" overflow="hidden"
direction="row" direction="row"
spacing="1rem" spacing="1rem"
fontSize="md" fontSize="md"
sx={{ '& p': { whiteSpace: 'nowrap', textOverflow: 'ellipsis' } }}
> >
{nota.tags.map((tag) => ( <Text
<Text key={tag}> {tag} </Text> sx={{
))} whiteSpace: 'nowrap',
</Stack> textOverflow: 'ellipsis',
overflow: 'hidden',
wordSpacing: '0.5rem',
}}
>
{nota.tags.map((tag) => `${tag} `)}
</Text>
</Box>
</Stack> </Stack>
</Flex> </Flex>
</ChakraLink> </ChakraLink>

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

Loading…
Cancel
Save