feat: migrate to new codebase

xenomech · Jun 30, 2023 · 87bf5ba · 87bf5ba
1 parent 059a0d7
commit 87bf5ba
Show file tree

Hide file tree

Showing 58 changed files with 9,347 additions and 3,556 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.gitignore b/.gitignore
@@ -25,10 +25,15 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
 # vercel
 .vercel
+
+
+# Contentlayer
+.contentlayer
diff --git a/.prettierrc b/.prettierrc
diff --git a/common/common.js b/common/common.js
@@ -0,0 +1,21 @@
+// common functions to simplify the codebase
+
+
+const format = require('date-fns/format')
+
+export const convertDateToString = (date) => {
+  return format(new Date(date), 'PPPP')
+}
+
+export const returnSelectedFields = (data) => {
+  return data.map((_) => {
+    return {
+      title: _.title,
+      date: _.date,
+      draft: _.draft,
+      category: _.category,
+      readingTime: _.readingTime,
+      slug: _.slug,
+    }
+  })
+}
diff --git a/common/index.js b/common/index.js
@@ -0,0 +1 @@
+export * from "./common"
diff --git a/common/utils/supabase.js b/common/utils/supabase.js
@@ -0,0 +1,5 @@
+import { createClient } from '@supabase/supabase-js';
+
+const SupaClient = createClient( process.env.SUPABASE_URL || '', process.env.SUPABASE_API_KEY || '');
+
+export { SupaClient };
diff --git a/components/BlogCard.js b/components/BlogCard.js
diff --git a/components/Card.js b/components/Card.js
@@ -1,14 +1,22 @@
-import { ArrowSVG } from "../data/assets";
+import { ArrowSVG, EyeSVG } from "data/assets";
+import PageViews from "./PageViews";
+
 
 export default function Card({ frontMatter, index }) {
+
   return (
     <div className="w-full flex justify-between my-2 p-2 font-normal items-center sm:text-xl hover:translate-x-5  rounded-md transition-all duration-200 ease-in-out">
       <div className="flex justify-between items-center">
         <p className="px-2 text-gray-600 dark:text-gray-300">{index}</p>
         <p className="px-2">{frontMatter.title}</p>
       </div>
       <div className="flex items-center justify-between">
-        <p className="px-2 hidden xl:flex">{frontMatter.readingTime.text}</p>
+        <div className="hidden xl:flex">
+          <PageViews slug={frontMatter.slug}>
+            <EyeSVG style="h-6 w-6 mx-2 text-gray-600" />
+          </PageViews>
+        </div>
+        <p className="px-2 hidden xl:flex text-gray-600 dark:text-gray-300">{frontMatter.readingTime.text}</p>
         <span>
           <ArrowSVG style="h-6 w-6 mx-2 text-gray-600" />
         </span>

diff --git a/components/Container.js b/components/Container.js
@@ -1,22 +1,38 @@
 import Head from "next/head";
 
+/**
+ * 
+ *@description Container wrapping all the content with react head for SEO
+ *@param {object} {children}
+ *@param {object} {frontmatter}
+ */
+
 export default function Container({ children, frontmatter }) {
   const meta = {
     title: "Gokul Suresh - Software Developer ",
+    name: "Gokul Suresh",
     description: "All my scribbles are available here",
     type: "website",
+    image: "https://gokuls.dev/static/images/PreviewImage.png",
+    twitterHandle: "@justgokulsuresh",
     ...frontmatter,
   };
   return (
-    <div className="sm:mx-auto">
+    <div>
       <Head>
         <title>{meta.title}</title>
         <meta content={meta.description} name="description" />
         <meta property="og:type" content={meta.type} />
-        <meta property="og:site_name" content="Gokul Suresh" />
+        <meta property="og:site_name" content={meta.name} />
         <meta property="og:description" content={meta.description} />
         <meta property="og:title" content={meta.title} />
         <meta property="og:image" content={meta.image} />
+        <meta name="twitter:title" content={meta.title} />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:author" content={meta.twitterHandle} />
+        <meta name="twitter:site" content={meta.twitterHandle} />
+        <meta name="twitter:description" content={meta.description} />
+        <meta name="twitter:image" content={meta.image} />
         {meta.date && (
           <meta property="article:published_time" content={meta.date} />
         )}

diff --git a/components/Experience.js b/components/Experience.js
@@ -1,4 +1,12 @@
-import { CheckMarkSVG } from "../data/assets";
+import { CheckMarkSVG } from "data/assets";
+
+/**
+ *@author Gokul Suresh <[email protected]
+ *@param {Array} {data} 
+ *@description Component rendering out Experience from the Data provided in constants
+ *@todo : [] type def every data
+ */
+
 export default function Experience({ data }) {
   return (
     <div className="flex justify-start items-center w-full p-5">

diff --git a/components/ExperienceCard.js b/components/ExperienceCard.js
diff --git a/components/FilterPills.js b/components/FilterPills.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default function FilterPills({ item, filter, setFilter }) {
+  if (item.id === filter) {
+    return (
+      <div className="m-2 p-2 px-4 border-2 text-white border-blue-500 bg-blue-500 rounded-xl cursor-pointer" onClick={() => setFilter(item.id)}>
+        <p>{item.id}</p>
+      </div>
+    )
+  } else {
+    return (
+      <div className="m-2 p-2 px-4 border-2 border-gray-500 dark:border-gray-700 hover:border-2 hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-xl transition-all duration-200 ease-in-out cursor-pointer" onClick={() => setFilter(item.id)}>
+        <p>{item.id}</p>
+      </div>
+    )
+  }
+}
diff --git a/components/Footer.js b/components/Footer.js
@@ -1,9 +1,9 @@
 import Link from "next/link";
-import { footerItems } from "../data/store";
+import { footerItems } from "data/assets";
 
 export default function Footer() {
   return (
-    <div className="pb-24">
+    <div className="pb-10">
       <hr className="w-full border-1 border-gray-200 dark:border-gray-800 mb-5" />
       <div className="xl:flex-row flex-col flex justify-between sm:items-center text-gray-800 dark:text-gray-200 ">
         <div className="text-gray-600 dark:text-zinc-400 grid grid-cols-3 gap-x-2 md:gap-x-5">
@@ -33,9 +33,9 @@ export default function Footer() {
 const FooterLinks = ({ href, label }) => {
   return (
     <Link href={href}>
-      <a className="col-span-1 p-2 hover:text-gray-400 transition-all duration-100 ease-in-out">
+      <p className="col-span-1 p-2 hover:text-gray-400 transition-all duration-100 ease-in-out">
         {label}
-      </a>
+      </p>
     </Link>
   );
 };
diff --git a/components/Layout.js b/components/Layout.js
@@ -1,28 +1,14 @@
-import Head from "next/head";
 
+/**
+ * 
+ *@description Layout for all the Pages container comes under layout
+ */
 export default function Layout(props) {
-  const { children, ...customMeta } = props;
-  const meta = {
-    title: "Gokul Suresh - Software Developer ",
-    description: "All my scribbles are available here",
-    type: "website",
-    ...customMeta,
-  };
+  const { children } = props;
+  //TODO : customMeta Fix; to dynamically accept it from heirarchy of components...
   return (
     <>
-      <Head>
-        <title>{meta.title}</title>
-        <meta content={meta.description} name="description" />
-        <meta property="og:type" content={meta.type} />
-        <meta property="og:site_name" content="Gokul Suresh" />
-        <meta property="og:description" content={meta.description} />
-        <meta property="og:title" content={meta.title} />
-        <meta property="og:image" content={meta.image} />
-        {meta.date && (
-          <meta property="article:published_time" content={meta.date} />
-        )}
-      </Head>
-      <div className="lg:w-6/12 sm:mx-auto min-h-screen p-4">{children}</div>
+      <div className="lg:w-7/12 sm:mx-auto min-h-screen p-4">{children}</div>
     </>
   );
 }
diff --git a/components/MDXComponents.js b/components/MDXComponents.js
@@ -1,15 +1,41 @@
 import Image from "next/image";
 
 function RoundedImage(props) {
+  return (
+    <div className={props.tails}>
+      <Image alt={props.alt} className="rounded-xl" {...props} />
+    </div>
+  );
+}
+
+function SandboxFrame(props) {
   return (
     <div className="w-full flex justify-center">
-      <Image alt={props.alt} className="rounded-lg" {...props} />
+      <iframe
+        {...props}
+        className="w-full h-10/12 border-0 rounded-lg"
+        title="Optimistic UI example"
+        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      ></iframe>
+    </div>
+  );
+}
+function Flex({ style, children }) {
+  return (
+    <div className="flex md:flex-row flex-col items-center justify-center">
+      {children}
     </div>
   );
 }
 
+function Grid({ style, children }) {
+  return <div className='grid p-4 2xl:grid-cols-2 gap-4 justify-center items-center'>{children}</div>;
+}
 const MDXComponents = {
   Image: RoundedImage,
+  SandboxFrame,
+  Flex,
+  Grid,
 };
 
 export default MDXComponents;