110 lines
3 KiB
JavaScript
110 lines
3 KiB
JavaScript
// Dependencies
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import { pages as posts } from 'site/prebuild/blog.mjs'
|
|
import { meta } from 'site/prebuild/blog-meta.mjs'
|
|
import { cloudflareImageUrl } from 'shared/utils.mjs'
|
|
import { nsMerge } from 'shared/utils.mjs'
|
|
// Hooks
|
|
import { useTranslation } from 'next-i18next'
|
|
// Components
|
|
import Link from 'next/link'
|
|
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
|
|
|
// Translation namespaces used on this page
|
|
const namespaces = nsMerge('designs', 'sections', pageNs)
|
|
|
|
// Helper object to order posts
|
|
const order = {}
|
|
let i = 0 // Avoid posts with same date not showing up
|
|
for (const [slug, props] of Object.entries(meta)) {
|
|
i++
|
|
order[props.d + i] = slug
|
|
}
|
|
|
|
export const recentBlogPosts = Object.keys(order)
|
|
.sort()
|
|
.reverse()
|
|
.slice(0, 2)
|
|
.map((d) => order[d])
|
|
|
|
const textShadow = {
|
|
style: {
|
|
textShadow:
|
|
'1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 2px 2px 1px #000000',
|
|
},
|
|
}
|
|
|
|
/* eslint-disable @next/next/no-img-element */
|
|
export const BlogPreview = ({ post }) => (
|
|
<Link href={`/${post.s}`} className="aspect-video relative">
|
|
<img
|
|
alt={post.caption}
|
|
src={cloudflareImageUrl({ id: post.s.replace('/', '-'), variant: 'w1000' })}
|
|
loading="lazy"
|
|
className="rounded md:rounded-lg top-0 left-0"
|
|
/>
|
|
<div
|
|
className={`absolute bottom-4 md:bottom-8 right-0 ml-8 md:ml-12
|
|
rounded-l md:rounded-l-lg bg-neutral bg-opacity-70 p-2 px-4 font-medium leading-7
|
|
text-neutral-content text-right text-xl md:text-2xl
|
|
|
|
`}
|
|
{...textShadow}
|
|
>
|
|
{post.t}
|
|
</div>
|
|
</Link>
|
|
)
|
|
|
|
/*
|
|
* Each page MUST be wrapped in the PageWrapper component.
|
|
* You also MUST spread props.page into this wrapper component
|
|
* when path and locale come from static props (as here)
|
|
* or set them manually.
|
|
*/
|
|
const BlogIndexPage = ({ page }) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<PageWrapper {...page} t={t('sections:blog')}>
|
|
<div className="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 max-w-7xl">
|
|
{Object.keys(order)
|
|
.sort()
|
|
.reverse()
|
|
.map((date) => (
|
|
<BlogPreview
|
|
post={{
|
|
s: order[date],
|
|
...posts[page.locale][order[date]],
|
|
}}
|
|
key={order[date]}
|
|
/>
|
|
))}
|
|
</div>
|
|
</PageWrapper>
|
|
)
|
|
}
|
|
|
|
export default BlogIndexPage
|
|
|
|
/*
|
|
* getStaticProps() is used to fetch data at build-time.
|
|
*
|
|
* On this page, it fetches data for the blogs to be linked to on this page
|
|
*
|
|
* This, in combination with getStaticPaths() below means this
|
|
* page will be used to link to all blogs.
|
|
*
|
|
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
|
*/
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, namespaces)),
|
|
page: {
|
|
locale,
|
|
path: ['blog'],
|
|
},
|
|
},
|
|
}
|
|
}
|