You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
nx-guitar-school/apps/website/pages/blog/index.tsx

48 lines
1.7 KiB

import axios from "axios";
import delve from "dlv";
import SeoConfig from "../../components/seo-config/seo-config";
import Layout from "../../components/layout/layout";
import Categories from "../../components/categories/categories";
import styles from "./index.module.scss";
import BlogSearch from "../../components/blog-search/blog-search";
import {environment} from "../../environments/environment";
import CardBlog from "../../components/card-blog/card-blog";
export async function getServerSideProps(context) {
const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`)
const posts = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC`)
return {
props: {
categories: delve(categories, 'data.data', []),
lastPublished: delve(posts, 'data.data', []),
}
}
}
export function Blog({menuHeader, menuFooter, seo, categories, lastPublished}) {
return (
<>
<SeoConfig {...seo}/>
<Layout menuHeader={menuHeader} menuFooter={menuFooter} headerTransparent={true}>
<main className={styles['blog-container'] + " w-full lg:my-10"}>
<section className="container max-w-screen-xl mx-auto relative flex">
<section className="grow lg:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
{lastPublished.map((post, index: number) => (
<CardBlog key={'card-blog-' + post.id + index} item={post}/>))
}
</section>
<aside className="grow lg:basis-2/6">
<BlogSearch/>
<Categories items={categories}/>
</aside>
</section>
</main>
</Layout>
</>
);
}
export default Blog;