Merge pull request #35 from PatrickNiyogitare28/v2-develop

V2 develop
PatrickNiyogitare28 · Jul 15, 2022 · c209006 · c209006 · vercel · Jul 15, 2022
2 parents 1a1c1d3 + 5dc1891
commit c209006
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Code-Ark
+# [patrickniyo.com](https://patrickniyo.com)
 
 My personal blogging garden, where I share programming skills, tutorials and Best coding and performance practices.
 

diff --git a/components/Head.tsx b/components/Head.tsx
@@ -3,12 +3,12 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { MetaProps } from '../types/layout';
 
-export const WEBSITE_HOST_URL = 'https://codeark-com.vercel.app';
+export const WEBSITE_HOST_URL = 'https://patrickniyo.com';
 
 const Head = ({ customMeta }: { customMeta?: MetaProps }): JSX.Element => {
   const router = useRouter();
   const meta: MetaProps = {
-    title: 'Code-Ark',
+    title: 'Patrick Niyogitare',
     description:
       'Blogging Garden for Programming tips,Tutorials, Trending tools & Practices',
     image: `${WEBSITE_HOST_URL}/images/site-preview.png`,
@@ -23,7 +23,7 @@ const Head = ({ customMeta }: { customMeta?: MetaProps }): JSX.Element => {
       <meta property="og:url" content={`${WEBSITE_HOST_URL}${router.asPath}`} />
       <link rel="canonical" href={`${WEBSITE_HOST_URL}${router.asPath}`} />
       <meta property="og:type" content={meta.type} />
-      <meta property="og:site_name" content="Code-Ark" />
+      <meta property="og:site_name" content="Patrick-Niyogitare" />
       <meta property="og:description" content={meta.description} />
       <meta property="og:title" content={meta.title} />
       <meta property="og:image" content={meta.image} />

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -3,7 +3,6 @@ import { MetaProps } from '../types/layout';
 import Head from './Head';
 import Navigation from './Navigation';
 import ThemeSwitch from './ThemeSwitch';
-import Image from 'next/image';
 import Link from 'next/link';
 
 type LayoutProps = {
@@ -20,21 +19,15 @@ const Layout = ({ children, customMeta }: LayoutProps): JSX.Element => {
       <header className="gradient-header">
         <div className="max-w-5xl px-4 mx-auto">
           <div className="flex items-center justify-between py-2 cursor-pointer">
-            <div
-              style={{ width: '25%' }}
-              className="flex justify-between items-center"
-            >
+            <div style={{}} className="flex justify-between items-center ">
               <Link href="/">
-                <div className="bg-black border rounded-md flex items-center">
-                  <Image
-                    src="/images/logo.png"
-                    width="50"
-                    height="40"
-                    draggable="false"
-                  />
+                <div className="bg-black logo-wrapper  w-[40px] justify-around h-[40px] rounded-full flex items-center">
+                  <label className=" text-center text-white">PN</label>
                 </div>
               </Link>
-              <Navigation />
+              <div className="ml-[2em]">
+                <Navigation />
+              </div>
             </div>
             <ThemeSwitch />
           </div>

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "code-ark",
+  "name": "patrickniyo.com",
   "description": "My personal blogging garden",
   "author": "[email protected]",
   "license": "MIT",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,6 +3,7 @@ import type { AppProps } from 'next/app';
 import React from 'react';
 import '../styles/globals.css';
 import '../styles/media.css';
+import '../styles/common.css';
 
 const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   return (

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -25,7 +25,7 @@ export const About = (): JSX.Element => {
   return (
     <Layout
       customMeta={{
-        title: 'About - Code-Ark',
+        title: 'About - Patrick Niyogitare',
       }}
     >
       <div

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -13,6 +13,7 @@ type IndexProps = {
 export const Index = ({ posts }: IndexProps): JSX.Element => {
   const tags: Array<string> = [
     'Flutter',
+    'React Native',
     'Typescript',
     'Nodejs',
     'React',
@@ -21,10 +22,11 @@ export const Index = ({ posts }: IndexProps): JSX.Element => {
     'Git',
     'CLIs',
     'Azure',
+    'Web3',
   ];
   return (
     <Layout>
-      <h1>Code Ark</h1>
+      <h1>Patrick Niyogitare</h1>
       <p>
         Blogging Garden for <code>Programming tips</code>,<code>Tutorials</code>
         , <code>Trending tools</code> & <code>Practices</code>
@@ -43,40 +45,49 @@ export const Index = ({ posts }: IndexProps): JSX.Element => {
       </div>
 
       <h1 className="mt-10">Articles</h1>
-      {posts.map((post) => (
-        <article
-          key={post.slug}
-          className="mt-5 p-5  rounded-lg shadow shadow-green-600 dark:border"
-        >
-          <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
-            {format(parseISO(post.date), 'MMMM dd, yyyy')}
-          </p>
-          <h1 className="mb-2 text-xl">
-            <Link as={`/posts/${post.slug}`} href={`/posts/[slug]`}>
-              <a className="text-gray-900 dark:text-white dark:hover:text-blue-400">
-                {post.title}
-              </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 className="flex flex-wrap gap-10">
+        {posts.map((post, index: number) => (
+          <div className="w-[47%] article-wrapper" key={index.toString()}>
+            <article
+              key={post.slug}
+              className="flex flex-col justify-between mt-5 p-5 rounded-lg shadow  dark:border h-[350px]"
+            >
+              <div>
+                <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
+                  {format(parseISO(post.date), 'MMMM dd, yyyy')}
+                </p>
+                <h1 className="mb-2 text-xl">
+                  <Link as={`/posts/${post.slug}`} href={`/posts/[slug]`}>
+                    <a className="text-gray-900 dark:text-white dark:hover:text-blue-400">
+                      {post.title}
+                    </a>
+                  </Link>
+                </h1>
+                <div className="mt-5 mb-5 post-tags-wrapper flex flex-wrap gap-2">
+                  {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>
+              </div>
+              <div className="article-description">
+                <p className="mb-3">{post.description}</p>
+              </div>
+              <p>
+                <Link as={`/posts/${post.slug}`} href={`/posts/[slug]`}>
+                  <a>Read More</a>
+                </Link>
+              </p>
+            </article>
           </div>
-          <p className="mb-3">{post.description}</p>
-          <p>
-            <Link as={`/posts/${post.slug}`} href={`/posts/[slug]`}>
-              <a>Read More</a>
-            </Link>
-          </p>
-        </article>
-      ))}
+        ))}
+      </div>
     </Layout>
   );
 };

diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
@@ -36,7 +36,7 @@ type PostPageProps = {
 const PostPage = ({ source, frontMatter }: PostPageProps): JSX.Element => {
   const router: any = useRouter();
   const customMeta: MetaProps = {
-    title: `${frontMatter.title} - Code-Ark`,
+    title: `${frontMatter.title} - patrickniyo.com`,
     description: frontMatter.description,
     image: `${WEBSITE_HOST_URL}${frontMatter.image}`,
     date: frontMatter.date,