import Page from 'site/components/wrappers/page.js' import useApp from 'site/hooks/useApp.js' import TimeAgo from 'react-timeago' import MdxWrapper from 'shared/components/wrappers/mdx' import mdxCompiler from 'shared/mdx/compiler' import Head from 'next/head' import Lightbox from 'shared/components/lightbox.js' import ImageWrapper from 'shared/components/wrappers/img.js' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { strapiHost } from 'shared/config/freesewing.mjs' import { strapiImage } from 'shared/utils' const Author = ({ author }) => (

{author?.displayname}

{author?.displayname} Wrote this

) const PostPage = ({ post, author }) => { const app = useApp() return (

[{post.date}] By {author.displayname || 'FIXME: No displayname'}

{post.caption}

) } /* * getStaticProps() is used to fetch data at build-time. * * On this page, it is loading the blog content from strapi. * * This, in combination with getStaticPaths() below means this * page will be used to render/generate all blog content. * * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching */ export async function getStaticProps({ params, locale }) { const { slug } = params const post = await fetch( `${strapiHost}/blogposts?_locale=${locale}&dev_ne=true&slug_eq=${slug}` ) .then(response => response.json()) .then(data => data[0]) .catch(err => console.log(err)) return { props: { post: { slug, ...(await mdxCompiler(post.body)), title: post.title, date: post.date, caption: post.caption, image: { w: post.image.width, h: post.image.height, url: post.image.url }, }, author: { displayname: post.author.displayname, slug: post.author.slug, about: post.author.about, image: strapiImage(post.author.picture, ['small']), ...(await mdxCompiler(post.author.about)), }, ...(await serverSideTranslations(locale)), } } } export const getStaticPaths = async () => { const paths = await fetch( `${strapiHost}/blogposts?_locale=en&dev_ne=true&_limit=-1` ) .then(response => response.json()) .then(data => data.map(post => `/blog/${post.slug}`)) .catch(err => console.log(err)) return { paths: [ ...paths ], fallback: false, } } export default PostPage