feat: new home page

docs/guides/installation/installation.mdx

@@ -75,6 +75,10 @@ yarn dev
   <LinkedIn name="Thakur" username="sboy99" href="Github Star">
     dolor sit amet consectetur adipisicing elit.
   </LinkedIn>
+
+   {/* <Card Icon="Flame" title="hello" subtitle="">
+    dolor sit amet consectetur adipisicing elit.
+  </Card> */}
 </Grid>
 
 [fork-link]: https://github.com/pbclife/gitopener.vercel.app/fork

package.json

@@ -31,23 +31,19 @@
     "axios": "^1.2.2",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
+    "lucide-react": "^0.241.0",
     "mongoose": "^7.0.2",
     "next": "^13.2.4",
     "next-mdx-remote": "^4.3.0",
     "octokit": "^2.0.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rehype-autolink-headings": "^6.1.1",
-    "rehype-parse": "^8.0.4",
     "rehype-prism-plus": "^1.5.0",
     "rehype-slug": "^5.1.0",
-    "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
-    "remark-html": "^15.0.1",
-    "remark-parse": "^10.0.1",
     "sharp": "^0.31.3",
     "typescript": "5.0.2",
-    "unified": "^10.1.2",
     "unist-util-map": "^3.1.3"
   },
   "devDependencies": {

src/components/home/ContributorPanel.tsx

@@ -0,0 +1,133 @@
+import clsx from 'clsx';
+import {
+  LightbulbIcon,
+  MicroscopeIcon,
+  Plus,
+  SquirrelIcon,
+} from 'lucide-react';
+import Link from 'next/link';
+import type { FC } from 'react';
+
+type ContributorPanelProps = {};
+
+export const ContributorPanel: FC<ContributorPanelProps> = () => {
+  return (
+    <div className="-mx-4 pb-8">
+      <div className="relative ">
+        <div className="z-0 w-full rounded-xl border border-slate-700 bg-slate-900 pt-4 shadow-2xl shadow-accent/5 backdrop-blur-md">
+          {/* header */}
+          <div className="-my-[1px] flex items-center justify-between gap-4 border-y border-slate-700 bg-slate-800/50 py-2 px-4  text-slate-500">
+            <span className="flex items-center gap-4 font-mono text-lg">
+              <SquirrelIcon className="h-8 w-8 text-lime-500" />{' '}
+              <span className="hidden sm:block">
+                Beginner friendly
+                <span className="text-lime-500"> Guides</span>
+              </span>
+            </span>
+            <Link
+              href={`/guides/starting-contribution/welcome`}
+              className="flex items-center gap-2 rounded border border-emerald-500 bg-emerald-700/80 px-2 py-0.5 font-medium text-slate-200"
+            >
+              <MicroscopeIcon className="h-5 w-5" /> Explore
+            </Link>
+          </div>
+          {/* body */}
+          <div className="flex min-h-screen-50 w-full">
+            {/* sidebar */}
+            <div className="ml-4 hidden min-h-64 w-60 flex-shrink-0 border-x border-slate-700 bg-slate-800/40 p-4 lg:flex lg:flex-col lg:justify-between">
+              <div className="space-y-4">
+                {[1, 2, 3, 4, 5].map((v) => (
+                  <SidebarSkeleton
+                    key={v}
+                    className={v % 2 === 0 ? `animate-pulse` : ``}
+                  />
+                ))}
+              </div>
+              <Link
+                href={`https://github.com/pbclife/gitopener.vercel.app/tree/main/docs/guides`}
+                className="flex items-center justify-center gap-2 rounded border border-emerald-500 bg-emerald-700/80 px-2 py-0.5 font-medium text-slate-200"
+              >
+                <Plus className="h-5 w-5" /> Contribute
+              </Link>
+            </div>
+            {/* outlet */}
+            <div className="flex-auto p-4 text-slate-300 sm:p-8">
+              {/* question */}
+              <h3 className="text-2xl font-bold">
+                How to write professional commits ?
+              </h3>
+              <p className="mt-2 text-slate-400">
+                {`To write professional commits in GitHub, it's important to follow
+              a few best practices.`}
+              </p>
+              {/* ans */}
+              <h4 className="my-4 text-xl font-bold">The conventional way:</h4>
+              {/* convention */}
+              <div className="mb-4 flex gap-2">
+                <span className="rounded border border-lime-600/50 bg-lime-600/10 py-0.5 px-2 text-lime-600">
+                  type
+                </span>
+                <span className="rounded border border-yellow-600/50 bg-yellow-600/10  py-0.5 px-2 text-yellow-600">
+                  scope
+                </span>
+                :
+                <span className="rounded border border-fuchsia-600/50 bg-fuchsia-600/10 py-0.5 px-2 text-fuchsia-600 ">
+                  description
+                </span>
+              </div>
+              <div className="my-8 space-y-4">
+                {/* type */}
+                <div className="flex gap-2">
+                  <LightbulbIcon className="h-5 w-5 flex-shrink-0 text-lime-500" />
+                  <span>
+                    <span className="rounded border border-lime-600/50 bg-lime-600/10 py-0.5 px-2 text-lime-600">
+                      {`type`}
+                    </span>
+                    {` : `} Commit Type like build, ci, docs, feat, fix etc.
+                    This field is mandatory.
+                  </span>
+                </div>
+                {/* scope */}
+                <div className="flex gap-2">
+                  <LightbulbIcon className="h-5 w-5 flex-shrink-0 text-yellow-500" />
+                  <span>
+                    <span className="rounded border border-yellow-600/50 bg-yellow-600/10 py-0.5 px-2 text-yellow-600">
+                      {`scope`}
+                    </span>
+                    {` : `} Phrase describing a section of the codebase. This
+                    field is optional.
+                  </span>
+                </div>
+                {/* description */}
+                <div className="flex gap-2">
+                  <LightbulbIcon className="h-5 w-5 flex-shrink-0 text-fuchsia-500" />
+                  <span className="leading-6">
+                    <span className="rounded border border-fuchsia-600/50 bg-fuchsia-600/10 py-0.5 px-2 text-fuchsia-600">
+                      {`description`}
+                    </span>
+                    {` : `} Description should be in the present tense. Not
+                    capitalized. No period in the end. Each description consists
+                    of a Title, Body and Footer. The Title and Body are
+                    mandatory if the description is large enough. The footer is
+                    optional.
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* overlay */}
+        <div className="absolute top-0 -left-5 -z-10 h-full min-h-screen-50 w-full rotate-3 rounded-lg border border-emerald-500 bg-emerald-700/80"></div>
+      </div>
+    </div>
+  );
+};
+
+export const SidebarSkeleton: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <div className={clsx('w-full space-y-2', className)}>
+      <div className="h-4 w-full  rounded-md bg-slate-700"></div>
+      <div className="h-2 w-[75%]  rounded-md bg-slate-700"></div>
+    </div>
+  );
+};

src/components/home/Intro.tsx

@@ -0,0 +1,52 @@
+import { GitCommit, Plus } from 'lucide-react';
+import type { FC } from 'react';
+import CodeBlock from '../mdxcomponents/CodeBlock';
+import Glow from '../utilities/Glow';
+import { Heading } from '../utilities/Heading';
+import TypoComp from '../utilities/TypoComponent';
+
+type IntroProps = {};
+const githubRepo = 'https://github.com/pbclife/gitopener.vercel.app';
+export const Intro: FC<IntroProps> = () => {
+  return (
+    <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
+      <div className="">
+        <Heading title="What is Gitopener?" subTitle="Introduction" />
+        <TypoComp className="my-4 max-w-full sm:my-6">
+          <p className="text-justify">
+            {`Git Opener is an open-source project for everyone. If you are looking for a good project to get started with open source and you want to see your code in action, then you are in the right place. Just checkout our contribution guidelines before you start. If you don't know how things get done, don't worry; we have covered basic questions that might come to your mind when you start. Just give them a read and tight your helmet, believe me, the journey will be wild...`}
+          </p>
+        </TypoComp>
+      </div>
+      <div className="relative h-fit">
+        <Glow className="w-[100%]  translate-x-32 opacity-60" />
+        <CodeBlock fileName="git_opener.tsx" toCopy={githubRepo}>
+          <div className="w-full flex-shrink-0 space-y-2 py-4">
+            {/* Instruction */}
+            <div className="-ml-[1px] flex items-center gap-4 border-l-2 border-emerald-500 bg-emerald-500/10 px-4 py-2 text-white">
+              <Plus className="h-4 w-4 flex-shrink-0 text-emerald-400" />
+              Jump start your contribution with Git Opener
+            </div>
+            {/* Steps 1 */}
+            <div className="flex flex-col gap-4 px-4 py-2 text-white">
+              <div className="flex items-center gap-4">
+                <GitCommit className="h-5 w-5 text-accent" />
+                Fork the repository
+              </div>
+              <div className="flex items-center gap-4">
+                <GitCommit className="h-5 w-5 text-accent" />
+                Contribute
+              </div>
+              <div className="flex items-center gap-4">
+                <GitCommit className="h-5 w-5 text-accent" />
+                Create pull request
+              </div>
+            </div>
+          </div>
+        </CodeBlock>
+        {/* overlay */}
+        <div className="absolute left-0 top-6 -z-10 h-64 w-full rotate-6 rounded-md border-2 border-accent/25 bg-accent/10 backdrop-blur-md"></div>
+      </div>
+    </div>
+  );
+};

src/components/home/index.ts

@@ -0,0 +1,2 @@
+export * from './ContributorPanel';
+export * from './Intro';

src/components/mdxcomponents/Card.tsx

@@ -1,4 +1,5 @@
 import LinkComp from '@utilities/LinkComp';
+import * as lucide from 'lucide-react';
 import type { ComponentProps, FC, ReactNode } from 'react';
 
 type CardProps = {
@@ -18,6 +19,11 @@ const Card: FC<CardProps> = ({
   subTitle,
   href,
 }) => {
+
+  if(typeof Icon === 'string') {
+    Icon= lucide[Icon];
+  }
+
   return (
     <LinkComp href={href}>
       <div

src/components/utilities/Heading.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react';
+
+type HeadingProps = {
+  title: string;
+  subTitle?: string;
+};
+
+export const Heading: FC<HeadingProps> = ({ subTitle, title }) => {
+  return (
+    <div className="space-y-2 text-skin-base">
+      {subTitle && (
+        <p className="text-lg font-medium text-accent">{subTitle}</p>
+      )}
+      <h2 className="text-3xl font-extrabold ">{title}</h2>
+    </div>
+  );
+};

src/layouts/Main.tsx

@@ -2,6 +2,8 @@ import Footer from '@components/footer';
 import Header from '@components/header';
 import Menu from '@components/menu';
 import Head from '@utilities/Head';
+
+import Script from 'next/script';
 import type { ComponentProps, FC } from 'react';
 
 export type LayoutProps = ComponentProps<'div'> & {

src/lib/readDocs.ts

@@ -2,64 +2,17 @@ import { getMdxContent } from '@/lib/mdx/getMdxContent';
 import { prepareMeta } from '@/lib/utils';
 import type {
   GetContentsFromSlug,
-  GetFileContents,
   GetGuidePaths,
-  GetProcessedHtml,
-  TFileContent,
 } from '@/types/client/FileSystem';
 import { promises as fs } from 'fs';
 import matter from 'gray-matter';
 import path from 'path';
-import rehypeParse from 'rehype-parse';
-import rehypeStringify from 'rehype-stringify';
-import remarkGfm from 'remark-gfm';
-import remarkHtml from 'remark-html';
-import remarkParse from 'remark-parse';
-import { unified } from 'unified';
 import { getPriorityWiseGuides } from './guides/getPriorityWiseGuides';
 import withStyledLi from './mdx/rehype/withStyledLi';
 
-type TSuppordedFile = 'heading' | 'installation' | 'tech-stack';
-
-const docsDir = path.join(process.cwd(), 'docs');
+// const docsDir = path.join(process.cwd(), 'docs');
 const guideDirPath = path.join(process.cwd(), 'docs', 'guides');
 
-//  To Get File Contents
-export const getFileContents: GetFileContents<TSuppordedFile> = async (
-  fileName
-) => {
-  const file = await fs.readFile(
-    path.join(docsDir, 'home', `${fileName}.mdx`),
-    'utf8'
-  );
-  const grayFile = matter(file);
-  const content = (
-    await unified()
-      .use(remarkParse)
-      .use(remarkGfm)
-      .use(remarkHtml)
-      .process(grayFile.content)
-  ).toString();
-
-  return {
-    meta: grayFile.data,
-    content,
-  };
-};
-
-// To Process HTML from string
-export const getProcessedHtml: GetProcessedHtml<TFileContent> = async (
-  content
-) => {
-  const processedHtmlString = (
-    await unified()
-      .use(rehypeParse, { fragment: true })
-      .use(rehypeStringify)
-      .process(content)
-  ).toString();
-  return processedHtmlString;
-};
-
 // Get all catch-all paths
 export const getGuidePaths: GetGuidePaths<{ guide: string[] }> = async () => {
   const slugsWithPriority = await getPriorityWiseGuides(guideDirPath);

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import useProgressBar from '@/hooks/useProgressBar';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { Fira_Code, Inter } from 'next/font/google';
+import Script from 'next/script';
 
 const inter = Inter({
   display: 'block',
@@ -37,6 +38,8 @@ export default function App({ Component, pageProps }: AppProps) {
           </HeaderProvider>
         </ThemeProvider>
       </main>
+
+      <Script src='https://unpkg.com/lucide@latest' />
     </>
   );
 }