From 25712a37cfa4586911cd1f5d8ec00b8e1e2dc3fd Mon Sep 17 00:00:00 2001 From: Sagar Bera Date: Sat, 10 Jun 2023 01:26:03 +0530 Subject: [PATCH] feat: new home page --- docs/guides/installation/installation.mdx | 4 + package.json | 6 +- src/components/home/ContributorPanel.tsx | 133 ++++++++++++++++++++ src/components/home/Intro.tsx | 52 ++++++++ src/components/home/index.ts | 2 + src/components/mdxcomponents/Card.tsx | 6 + src/components/utilities/Heading.tsx | 17 +++ src/layouts/Main.tsx | 2 + src/lib/readDocs.ts | 49 +------- src/pages/_app.tsx | 3 + src/pages/index.tsx | 51 ++------ yarn.lock | 141 +++++----------------- 12 files changed, 260 insertions(+), 206 deletions(-) create mode 100644 src/components/home/ContributorPanel.tsx create mode 100644 src/components/home/Intro.tsx create mode 100644 src/components/home/index.ts create mode 100644 src/components/utilities/Heading.tsx diff --git a/docs/guides/installation/installation.mdx b/docs/guides/installation/installation.mdx index 8da769e..8d0b0fb 100644 --- a/docs/guides/installation/installation.mdx +++ b/docs/guides/installation/installation.mdx @@ -75,6 +75,10 @@ yarn dev dolor sit amet consectetur adipisicing elit. + + {/* + dolor sit amet consectetur adipisicing elit. + */} [fork-link]: https://github.com/pbclife/gitopener.vercel.app/fork diff --git a/package.json b/package.json index 5b7c31b..f9ccf58 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "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", @@ -38,16 +39,11 @@ "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": { diff --git a/src/components/home/ContributorPanel.tsx b/src/components/home/ContributorPanel.tsx new file mode 100644 index 0000000..7d57bdb --- /dev/null +++ b/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 = () => { + return ( +
+
+
+ {/* header */} +
+ + {' '} + + Beginner friendly + Guides + + + + Explore + +
+ {/* body */} +
+ {/* sidebar */} +
+
+ {[1, 2, 3, 4, 5].map((v) => ( + + ))} +
+ + Contribute + +
+ {/* outlet */} +
+ {/* question */} +

+ How to write professional commits ? +

+

+ {`To write professional commits in GitHub, it's important to follow + a few best practices.`} +

+ {/* ans */} +

The conventional way:

+ {/* convention */} +
+ + type + + + scope + + : + + description + +
+
+ {/* type */} +
+ + + + {`type`} + + {` : `} Commit Type like build, ci, docs, feat, fix etc. + This field is mandatory. + +
+ {/* scope */} +
+ + + + {`scope`} + + {` : `} Phrase describing a section of the codebase. This + field is optional. + +
+ {/* description */} +
+ + + + {`description`} + + {` : `} 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. + +
+
+
+
+
+ {/* overlay */} +
+
+
+ ); +}; + +export const SidebarSkeleton: FC<{ className?: string }> = ({ className }) => { + return ( +
+
+
+
+ ); +}; diff --git a/src/components/home/Intro.tsx b/src/components/home/Intro.tsx new file mode 100644 index 0000000..428897d --- /dev/null +++ b/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 = () => { + return ( +
+
+ + +

+ {`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...`} +

+ +
+
+ + +
+ {/* Instruction */} +
+ + Jump start your contribution with Git Opener +
+ {/* Steps 1 */} +
+
+ + Fork the repository +
+
+ + Contribute +
+
+ + Create pull request +
+
+
+ + {/* overlay */} +
+
+
+ ); +}; diff --git a/src/components/home/index.ts b/src/components/home/index.ts new file mode 100644 index 0000000..e613165 --- /dev/null +++ b/src/components/home/index.ts @@ -0,0 +1,2 @@ +export * from './ContributorPanel'; +export * from './Intro'; diff --git a/src/components/mdxcomponents/Card.tsx b/src/components/mdxcomponents/Card.tsx index d56ef72..da33bc2 100644 --- a/src/components/mdxcomponents/Card.tsx +++ b/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 = ({ subTitle, href, }) => { + + if(typeof Icon === 'string') { + Icon= lucide[Icon]; + } + return (
= ({ subTitle, title }) => { + return ( +
+ {subTitle && ( +

{subTitle}

+ )} +

{title}

+
+ ); +}; diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index 0ba6626..2eea389 100644 --- a/src/layouts/Main.tsx +++ b/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'> & { diff --git a/src/lib/readDocs.ts b/src/lib/readDocs.ts index df50b9a..e240eed 100644 --- a/src/lib/readDocs.ts +++ b/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 = 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 = 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); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5166e62..4367210 100644 --- a/src/pages/_app.tsx +++ b/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) { + +