115 lines
3.3 KiB
JavaScript
115 lines
3.3 KiB
JavaScript
import Page from 'site/components/wrappers/page.js'
|
|
import useApp from 'site/hooks/useApp.js'
|
|
import Link from 'next/link'
|
|
import TimeAgo from 'react-timeago'
|
|
import { strapiHost } from 'shared/config/freesewing.mjs'
|
|
import { strapiImage } from 'shared/utils'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
|
|
const strapi = 'https://posts.freesewing.org'
|
|
const textShadow = {
|
|
style: {
|
|
textShadow:
|
|
'1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 2px 2px 1px #000000',
|
|
},
|
|
}
|
|
|
|
const Preview = ({ post }) => (
|
|
<div className="shadow rounded-lg">
|
|
<Link href={`/blog/${post.slug}`}>
|
|
<a title={post.title} className="hover:underline">
|
|
<div
|
|
className="bg-base-100 w-full aspect-video shadow flex flex-column items-end rounded-lg"
|
|
style={{
|
|
backgroundImage: `url(${strapi}${post.image.sizes.medium.url})`,
|
|
backgroundSize: 'cover',
|
|
}}
|
|
>
|
|
<div className="grow"></div>
|
|
<div className="text-right mb-3 lg:mb-8">
|
|
<div
|
|
className={`
|
|
bg-neutral text-neutral-content bg-opacity-40 text-right
|
|
px-4 py-1
|
|
lg:px-8 lg:py-4
|
|
|
|
`}
|
|
>
|
|
<h5
|
|
className={`
|
|
text-neutral-content
|
|
text-xl font-bold
|
|
md:text-2xl md:font-normal
|
|
xl:text-3xl
|
|
`}
|
|
{...textShadow}
|
|
>
|
|
{post.title}
|
|
</h5>
|
|
<p
|
|
className={`
|
|
hidden md:block
|
|
m-0 p-1 -mt-2
|
|
text-neutral-content
|
|
leading-normal text-sm font-normal
|
|
opacity-70
|
|
`}
|
|
{...textShadow}
|
|
>
|
|
<TimeAgo date={post.date} /> by <strong>{post.author}</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
)
|
|
|
|
const BlogIndexPage = (props) => {
|
|
const app = useApp()
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Page app={app} title={t('blog')} slug="blog">
|
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2 max-w-7xl">
|
|
{props.posts.map((post) => (
|
|
<Preview app={app} post={post} key={post.slug} />
|
|
))}
|
|
</div>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
export default BlogIndexPage
|
|
|
|
/*
|
|
* 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({ locale }) {
|
|
const posts = await fetch(`${strapiHost}/blogposts?_locale=${locale}&_sort=date:DESC&dev_ne=true`)
|
|
.then((response) => response.json())
|
|
.then((data) => data)
|
|
.catch((err) => console.log(err))
|
|
|
|
return {
|
|
props: {
|
|
posts: posts.map((post) => ({
|
|
slug: post.slug,
|
|
title: post.title,
|
|
date: post.date,
|
|
author: post.author.displayname,
|
|
image: strapiImage(post.image, ['medium']),
|
|
})),
|
|
...(await serverSideTranslations(locale)),
|
|
},
|
|
}
|
|
}
|