From ef50500225f7e4ce0d98014f13a5b27f68efcfdd Mon Sep 17 00:00:00 2001 From: Mohammed Rabay'a Date: Thu, 1 Jun 2023 22:34:58 +0200 Subject: [PATCH] feat: Responsive Design and Blog Categories (#21) * Update content * Update index.tsx * Update blog.tsx * Update about.tsx * Update about recent work * Fix navigation * Fix code blocks * Update code blocks * Mobile Friendly Footer * Add categories * Blog Categories --- pages/blog/[slug].tsx | 26 +++++++++ pages/{blog.tsx => blog/index.tsx} | 57 +++++++++++++++++-- pages/posts/[slug].tsx | 1 - ...etting-started-with-nextjs-and-graphql.mdx | 2 +- 4 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 pages/blog/[slug].tsx rename pages/{blog.tsx => blog/index.tsx} (71%) 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()}
    - {posts?.map((post: any, index: number) => ( + {filteredPosts?.map((post: any, index: number) => ( { slug: filename.replace(".mdx", ""), }, })); - return { paths, fallback: false, diff --git a/posts/getting-started-with-nextjs-and-graphql.mdx b/posts/getting-started-with-nextjs-and-graphql.mdx index 9340675..f448bde 100644 --- a/posts/getting-started-with-nextjs-and-graphql.mdx +++ b/posts/getting-started-with-nextjs-and-graphql.mdx @@ -3,7 +3,7 @@ title: "Setting up GraphQL in Next.js" slug: nextjs/setting-up-graphql description: Visual studio, Mac, csharp, Xamarin, iOS, Android, c#, javascript, development, bugs, errors tags: NextJS, GraphQL -category: Development +category: GraphQL metaimage: "" image: "/articles/ante-hamersmit-gi1f13S1-64-unsplash.jpg" placeholder: "/articles/ante-hamersmit-gi1f13S1-64-unsplash-placeholder.jpg"