From 8b7ea76325c8736bc51dbc85822d3023aad263ce Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Sun, 29 May 2022 18:44:32 +0200 Subject: [PATCH] wip(org): Added blog index page --- packages/freesewing.org/pages/blog/index.js | 80 +++++++++++++-------- packages/freesewing.shared/utils.js | 18 +++++ 2 files changed, 69 insertions(+), 29 deletions(-) diff --git a/packages/freesewing.org/pages/blog/index.js b/packages/freesewing.org/pages/blog/index.js index 36ff2ff78d0..1c66721aaf9 100644 --- a/packages/freesewing.org/pages/blog/index.js +++ b/packages/freesewing.org/pages/blog/index.js @@ -1,43 +1,45 @@ import Page from 'shared/components/wrappers/page.js' import useApp from 'site/hooks/useApp.js' import Link from 'next/link' -import { posts } from 'site/prebuild/strapi.blog.en.js' -import orderBy from 'lodash.orderby' import TimeAgo from 'react-timeago' -import Head from 'next/head' -import HelpUs from 'site/components/help-us.js' +import { strapiHost } from 'shared/config/freesewing.mjs' +import { strapiImage } from 'shared/utils.js' +import { useTranslation } from 'next-i18next' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' const strapi = "https://posts.freesewing.org" const Preview = ({ app, post }) => ( -
+
-
-
+
{post.title}

- by {post.author} + by {post.author}

@@ -49,30 +51,50 @@ const Preview = ({ app, post }) => ( const BlogIndexPage = (props) => { const app = useApp() + const { t } = useTranslation() return ( - - - - - - - - - - - - - - +
- {Object.values(orderBy(posts, ['date'], ['desc'])) - .map(post => ) + {props.posts.map(post => ) }
- ) } 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({ params, 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)), + } + } +} + diff --git a/packages/freesewing.shared/utils.js b/packages/freesewing.shared/utils.js index 153423c4f91..1360b7c8b91 100644 --- a/packages/freesewing.shared/utils.js +++ b/packages/freesewing.shared/utils.js @@ -76,3 +76,21 @@ export const optionType = option => { export const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1); +export const strapiImage = (img, sizes=['thumbnail', 'xlarge', 'large', 'medium', 'small', 'xsmall']) => { + const image = { + caption: img.caption, + w: img.width, + h: img.height, + url: img.url, + sizes: {} + } + for (const size of sizes) { + if (img.formats[size]) image.sizes[size] = { + w: img.formats[size].width, + h: img.formats[size].width, + url: img.formats[size].url, + } + } + + return image +}