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
moerabaya · Jun 1, 2023 · ef50500 · ef50500 · vercel · Jun 1, 2023
1 parent 6239e57
commit ef50500
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git a/pages/blog/[slug].tsx 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 → pages/blog/index.tsx b/pages/blog.tsx → 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(
+      <Link
+        href={`/blog`}
+        className={`px-3 py-2 bg-stone-100 hover:bg-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 rounded-2xl !outline-none ${
+          !router.query?.slug && "bg-stone-200 dark:bg-stone-800 cursor-default"
+        }`}
+      >
+        All
+      </Link>
+    );
+    getAllCategories().forEach((_, key) => {
+      items.push(
+        <Link
+          href={`/blog/${key.toString().toLowerCase()}`}
+          className={`px-3 py-2 bg-stone-100 hover:bg-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 rounded-3xl !outline-none ${
+            router.query?.slug === key.toString().toLowerCase() &&
+            "bg-stone-200 dark:bg-stone-800 cursor-default"
+          }`}
+        >
+          {key}
+        </Link>
+      );
+    });
+
+    return items;
+  };
   return (
     <div className="page-content">
       <Head>
@@ -36,7 +82,7 @@ const Blog = ({ posts }: any) => {
         />
         <meta
           property="og:image"
-          content={require("../assets/images/metaimage.png")}
+          content={require("../../assets/images/metaimage.png")}
         />
 
         {/* <!-- Twitter --> */}
@@ -48,7 +94,7 @@ const Blog = ({ posts }: any) => {
         />
         <meta
           property="twitter:image"
-          content={require("../assets/images/metaimage.png")}
+          content={require("../../assets/images/metaimage.png")}
         />
       </Head>
       <div className="container mx-auto max-w-4xl px-5 pt-5">
@@ -62,8 +108,9 @@ const Blog = ({ posts }: any) => {
             {getLocalizedString("blog", "title")}
           </Text>
         </AnimatedView>
+        <div className="pt-4 px-4 space-x-3">{renderCategories()}</div>
         <ul className="px-0 mx-0 py-5">
-          {posts?.map((post: any, index: number) => (
+          {filteredPosts?.map((post: any, index: number) => (
             <AnimatedView key={post.slug} delay={index / 2}>
               <Link
                 href={post.slug}

diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
@@ -145,7 +145,6 @@ const getStaticPaths = async () => {
       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
@@ -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"
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,7 +145,6 @@ const getStaticPaths = async () => { @@
           slug: filename.replace(".mdx", ""),
         },
       }));
       return {
         paths,
         fallback: false,
@@ Expand Down @@