diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx new file mode 100644 index 0000000..5a4825b --- /dev/null +++ b/pages/blog/[slug].tsx @@ -0,0 +1,26 @@ +import Blog, { getStaticProps } from "./index"; + +export const getStaticPaths = async () => { + const { props } = await getStaticProps(); + + const categories = new Map(); + props.posts?.map((post) => { + categories.set((post as any).category, { + params: { + slug: (post as any).category.toLowerCase(), + }, + }); + }); + const paths: any[] = []; + categories.forEach(function (value, key) { + paths.push(value); + }); + + return { + paths, + fallback: false, + }; +}; + +export { getStaticProps }; +export default Blog; diff --git a/pages/blog.tsx b/pages/blog/index.tsx similarity index 71% rename from pages/blog.tsx rename to pages/blog/index.tsx index 603cea8..947a3d8 100644 --- a/pages/blog.tsx +++ b/pages/blog/index.tsx @@ -5,13 +5,59 @@ import useGlobalization from "hooks/useGlobalization"; import Head from "next/head"; import Image from "next/image"; import Link from "next/link"; +import { useRouter } from "next/router"; import path from "path"; -import AnimatedView from "../components/atoms/AnimatedView"; -import useFormatter from "../hooks/useFormatter"; +import AnimatedView from "../../components/atoms/AnimatedView"; +import useFormatter from "../../hooks/useFormatter"; const Blog = ({ posts }: any) => { const formatter = useFormatter(); + const router = useRouter(); + const filteredPosts = router.query?.slug + ? posts?.filter( + (post: any) => post.category.toLowerCase() === router.query?.slug + ) + : posts; const { getLocalizedString } = useGlobalization(); + const getAllCategories = () => { + const categories = new Map(); + for (const post of posts) { + categories.set(post.category, [ + ...(categories?.get(post.category) ?? []), + post, + ]); + } + return categories; + }; + + const renderCategories = () => { + const items: JSX.Element[] = []; + items.push( + + All + + ); + getAllCategories().forEach((_, key) => { + items.push( + + {key} + + ); + }); + + return items; + }; return (
@@ -36,7 +82,7 @@ const Blog = ({ posts }: any) => { /> {/* */} @@ -48,7 +94,7 @@ const Blog = ({ posts }: any) => { />
@@ -62,8 +108,9 @@ const Blog = ({ posts }: any) => { {getLocalizedString("blog", "title")} +
{renderCategories()}