Merge pull request #14 from PatrickNiyogitare28/ch-taging

Ch taging

pages/index.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import { format, parseISO } from 'date-fns';
 import { GetStaticProps } from 'next';
 import Link from 'next/link';
-import React from 'react';
 import Layout from '../components/Layout';
 import { getAllPosts } from '../lib/api';
 import { PostType } from '../types/post';
@@ -12,7 +12,7 @@ type IndexProps = {
 
 export const Index = ({ posts }: IndexProps): JSX.Element => {
   const tags: Array<string> = [
-    'Flutter', 'Typescript', 'Nodejs','React','Nestjs', 'Springboot', 'Git','CLIs', 'Azure'
+    'Flutter', 'Typescript', 'Nodejs', 'React', 'Nestjs', 'Springboot', 'Git', 'CLIs', 'Azure'
   ]
   return (
     <Layout>
@@ -21,11 +21,11 @@ export const Index = ({ posts }: IndexProps): JSX.Element => {
 
       <h1>Tags 🏷️</h1>
       <div className="mt-2 tags-wrapper">
-      {tags.map((tag:string, index:number) => (
-        <code 
-        className='ml-2 text-xs border p-2 rounded'
-        key={index.toString()}>{tag}</code>
-      ))}
+        {tags.map((tag: string, index: number) => (
+          <code
+            className='ml-2 text-xs border p-2 rounded'
+            key={index.toString()}>{tag}</code>
+        ))}
       </div>
 
       <h1 className="mt-10">Articles</h1>
@@ -41,6 +41,15 @@ export const Index = ({ posts }: IndexProps): JSX.Element => {
               </a>
             </Link>
           </h1>
+          <div className='mt-5 mb-5 post-tags-wrapper'>
+            {post.tags.map((tag: string, index: number) => (
+              <code
+                key={index.toString()}
+                className="text-sm ml-2 font-light border py-1 px-5 rounded-2xl cursor-pointer"
+                style={{ color: 'grey' }}
+              >#{tag.toLowerCase()}</code>
+            ))}
+          </div>
           <p className="mb-3">{post.description}</p>
           <p>
             <Link as={`/posts/${post.slug}`} href={`/posts/[slug]`}>
@@ -54,7 +63,7 @@ export const Index = ({ posts }: IndexProps): JSX.Element => {
 };
 
 export const getStaticProps: GetStaticProps = async () => {
-  const posts = getAllPosts(['date', 'description', 'slug', 'title']);
+  const posts = getAllPosts(['date', 'description', 'slug', 'title', 'tags']);
 
   return {
     props: { posts },

pages/posts/[slug].tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { format, parseISO } from 'date-fns';
 import fs from 'fs';
 import matter from 'gray-matter';
@@ -9,9 +10,9 @@ import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import path from 'path';
-import React from 'react';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
+import { useRouter } from 'next/router';
 import Layout, { WEBSITE_HOST_URL } from '../../components/Layout';
 import { MetaProps } from '../../types/layout';
 import { PostType } from '../../types/post';
@@ -33,6 +34,7 @@ type PostPageProps = {
 };
 
 const PostPage = ({ source, frontMatter }: PostPageProps): JSX.Element => {
+  const router: any = useRouter();
   const customMeta: MetaProps = {
     title: `${frontMatter.title} - Code-Ark`,
     description: frontMatter.description,
@@ -44,12 +46,22 @@ const PostPage = ({ source, frontMatter }: PostPageProps): JSX.Element => {
     <Layout customMeta={customMeta}>
       <div className='flex justify-around'>
       <article>
-        <h1 className="mb-3 text-5xl text-gray-900 dark:text-white">
+        <h1 className="mb-3 text-5xl text-gray-900 dark:text-white"
+        //  style={{width:'30%'}}
+        >
           {frontMatter.title}
         </h1>
-        <p className="mb-10 text-sm text-gray-500 dark:text-gray-400">
+        <div className='flex my-5 mb-10' style={{height:'50px'}}>
+        <Image 
+        src="/authors/pn.jpg" 
+        width="50" 
+        height="50" 
+        className='rounded-full cursor-pointer avatar-style' 
+        onClick={() => router.push('/about')}/>
+        <p className="mb-10 text-sm text-gray-500 dark:text-gray-400 ml-5" style={{ marginTop:'2%'}}>
           {format(parseISO(frontMatter.date), 'MMMM dd, yyyy')}
         </p>
+        </div>
         <div className="prose text-lg dark:prose-dark">
           <MDXRemote {...source} components={components}/>
         </div>

posts/basic-pull-request-description.mdx

@@ -1,8 +1,11 @@
 ---
-title: Basic stardard description of a Pull Request
+title: Standard Pull request description
 description: Pull requests let you tell others about changes you've pushed to a branch in a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before your changes are merged into the base branch.
 date: '2021-03-12'
 image: '/images/git-auth.png'
+tags: 
+- git
+- practices
 ---
 
 

posts/clean-coce.mdx

@@ -1,11 +1,14 @@
 ---
-title: Clean Code Convetion by Robert C. Martin
-description: Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.
+title: The clean code convetion
+description: From Robert C. Martin, Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.
 date: '2021-04-20'
 image: '/images/git-auth.png'
+tags: 
+- practices
+- clean-code
 ---
 
-Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.
+From Robert C. Martin, Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.
 _____________________________________
 
 ## General rules

posts/defining-enums-in-javascript.mdx

@@ -1,8 +1,11 @@
 ---
-title: Defining enumerations in javascript
+title: Enumerations in Javascript
 description: Enumerations offer an easy way to work with sets of related constants. Eventhough javascript doesn't accept enums, how can this practice be achieved?
 date: '2021-04-15'
 image: '/images/git-auth.png'
+tags: 
+- enums
+- javascript
 ---
 
 _____________________________________

posts/solved-password-auth-is-temporally-disabled.mdx

@@ -1,8 +1,11 @@
 ---
-title: Solved- Resolving Password authentication is temporarily disabled as part of a brownout. Please use a personal access token instead.
-description: If you're trying to run `git push origin main` or basically accessing your remote git and you get the bellow error this blog is for you  to get  it resolved
+title: Git password authentication issue
+description: Solved- Resolving Password authentication is temporarily disabled as part of a brownout. Please use a personal access token instead. Failing If you're trying to run `git push origin main` or basically accessing your remote git
 date: '2021-06-02'
 image: '/images/git-auth.png'
+tags: 
+- git
+- fixes
 ---
 
 <Image
@@ -40,21 +43,21 @@ Let's see how you can quickly get this resolved in the simplest way so that you
 
 - [x] [Create your github access token](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token)
 - [x] Update the 
-    ```md
-       remote origin url
+    ```shell
+    $ git remote origin url
     ``` 
     to use token 
 
 Feel free to jump that  step **creating access token** if you have already created your github access token
   > Note that you don't need to create a new access token for each project, It will depend on previlages you need to include in the access token
 
 1. Remove remote origin 
-    ```md
-        git remote remove origin
+    ```shell
+    $ git remote remove origin
     ```
 2. Reset the remote origin including ***your token you created***
-    ```md 
-       git remote add origin https://<token>@<git_url>.git
+    ```shell
+    $ git remote add origin https://<token>@<git_url>.git
     ```
 
 Now you are good to go    

posts/what-is-azure.mdx

@@ -3,6 +3,9 @@ title: What is Microsoft Azure
 description: Microsoft Azure, formerly known as Windows Azure, is Microsoft's public cloud computing platform. It provides a range of cloud services, including compute, analytics, storage and networking. Users can pick and choose from these services to develop and scale new applications, or run existing applications 
 date: '2021-12-25'
 image: '/images/azure-1.png'
+tags: 
+- azure
+- cloud
 ---
 _____________________________________
 

posts/why-nestjs-as-for-backend-services.mdx

@@ -1,8 +1,12 @@
 ---
-title: Why to choose Nestjs as your backend framework
+title: Why to choose Nestjs
 description: Nestjs is a framework for building efficient, scalable [Nodejs] server-side applications. It uses modern JavaScript is built with [TypeScript] (preserves compatibility with pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).Under the hood, Nest makes use of [Express], but also, provides compatibility with a wide range of other libraries, like e.g. [Fastify]...
 date: '2021-09-03'
 image: '/images/why-nest-banner.jpg'
+tags: 
+- nestjs
+- typescript
+- microservices
 ---
 
 <Image

styles/media.css

@@ -1,10 +1,33 @@
+body::-webkit-scrollbar {
+    width: 10px;
+  }
+  body::-webkit-scrollbar-track {
+    background: transparent; 
+  }
+  body::-webkit-scrollbar-thumb {
+    background: #555657; 
+
+  }
+  body::-webkit-scrolrlbar-thumb:hover {
+    background: #555657;
+
+  }
+.avatar-style{
+    border: 2px solid grey !important;
+}
 @media only screen and (max-width: 600px) {
     .tags-wrapper{
      width: 85vw;
      display: grid;
      grid-template-columns: auto auto auto;
      grid-row-gap: 0.5em;
     }
+    .post-tags-wrapper{
+        width: max-content;
+        display: grid;
+        grid-template-columns: auto auto;
+        grid-row-gap: 0.5em;
+    }
     .about-container{
         margin-top: 2em;
         flex-direction: column;

types/post.ts

@@ -4,4 +4,5 @@ export type PostType = {
   image?: string;
   slug: string;
   title: string;
+  tags: string[]
 };