Feat: Guide page designed (#51)

* build: added necessary dependency

* build: configurations for build

* feat: added components for guide page

* feat: updated utilities components

* feat: added libraries

* feat: added catch-all-routes for guide page

* feat: updated file list

* refactor: refactored layouts and types

* feat: implemented all docs fetching only inside read-docs

* feat: added context to control documentation section

* feat: updated type system accordingly

* feat: added components to support documentation layout

* feat: added a utility Head for meta data

* feat: designed documentation layout

* feat: added new head comp to main layout

* style: exported colour mode from theme context

* style: added new logo

* style: added edit doc icon

* feat: added mdx components

* style: enabled syntax highlighting

* style: added style defaults in tailwind.config

* feat: added remark rehype plugins

* feat: added utility components

* feat: added utility function

* fix: fixed overflowing issue for strong elements

* style: designed and added functionalities to mdx components

* style: fixed code breaking in codeblock component

* style: improved design for documentation sidebar

* style: improved design of mdx codeblock

* feat: updated documentation layout

* refactor: refactored code base

* build: removed unnecessary packages

docs/guides/installation/installation.mdx

@@ -0,0 +1,53 @@
+---
+title: Installation
+edit: https://github.com/pbclife/gitopener.vercel.app/edit/main/docs/installation.mdx
+---
+
+# Installation
+
+- [Fork the Repository][fork-link] into your github account
+
+- Clone the project into your local machine by running following comman in console
+
+```bash Clone to local machine
+git clone https://github.com/<your-github-username>/gitopener.vercel.app.git
+```
+
+- Navigate to the folder after successful cloning
+
+```bash Change Directory
+cd gitopener.vercel.app
+```
+
+- Install required dependencies to run this software in your local machine
+  > As Git Opener uses yarn package manager, it is recommended to use yarn, [install yarn][yarn-website]
+
+```bash Terminal
+yarn
+```
+
+- Make .env.local file in root directory with these variables
+  > This step is optional, Do this step if you want to run complete application with database support
+
+```jsx .env.local
+MONGO_URI = 'YOUR MONGODB CONNECTION STRING GOES HERE';
+GITHUB_TOKEN = 'YOUR GITHUB TOKEN GOES HERE';
+```
+
+- Get mongodb connection string here: [MONGODB DOCS][mongodb-docs]
+- Generate github token here: [GITHUB TOKEN][github-token]
+
+- Run the project on your local machine
+
+```sh Terminal
+yarn dev
+```
+
+- Every time you start making changes to your forked repo make sure it's in sync with the original repo
+
+<ResponsiveImg alt="image" src="/images/gradbg.jpg" width={1280} height={720} />
+
+[fork-link]: https://github.com/pbclife/gitopener.vercel.app/fork
+[yarn-website]: https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable
+[mongodb-docs]: https://www.mongodb.com/docs/compass/current/connect
+[github-token]: https://github.com/settings/tokens

docs/guides/starting-contribution/getting-started.mdx

@@ -0,0 +1,31 @@
+---
+title: Getting Started
+---
+
+# Dummy
+
+Dummy is a content generation toolkit designed to make the development, testing and presentation of web prototypes less time consuming and more realistic. It does so by making it easy to populate static HTML with dynamic content, and by randomizing elements within a layout on subsequent loads of a document, in a way, simulating connectivity to a live database.
+
+Originally conceived as a tool for helping to simulate the high volume, rapidly changing content characteristics of online newspapers and magazines, it's generalized enough to benefit the early stage front-end development of any website or application with content that frequently changes in length, form or nature.
+
+Dummy can be useful in the early stages of a project's development, where basic questions and assumptions about how to architect the front-end must be tested and resolved to conclusion before engineers further down the Gantt diagram can begin their work of obfuscating yours.
+
+It can also been seen as a support tool for designers and front-end artisans ready to embrace the dark art of designing in-browser, as vastly different layout permutations can be generated and evaluated rapidly with each load of the page. Problems and shortcommings can be more quickly exposed.
+
+### Dummy can…
+
+- Insert randomly selected strings of placeholder text in various lengths and formats (e.g. headline, teaser, paragraph).
+- Automagically crop and size high quality, news worthy, Creative Commons licensed placeholder images from a default pool – or from a specific folder or subset of folders that you provide.
+- Flesh out highly variable, asset rich layouts quickly with friendly, human-readable logic for building loops and controlling probability.
+- Allow you to focus on the important things – namely, the design and the code – not on copying and pasting (static) Lorem Ipsum, or hunting down plausible placeholder images.
+- More. Not lots more, but a _bit_ more!
+
+### You can…
+
+- Watch a screencast at https://vimeo.com/42252088
+- Ask questions and direct misgivings to http://twitter.com/kerns
+- Fork, follow or download via https://github.com/kerns/dummy
+
+### More Info
+
+Dummy's primary goal is to provide tools that speed front-end prototyping and QA. Whether you're meticulously crafting a fully responsive site with a myriad of CSS breakpoints, or just slapping together a half-baked idea – using Dummy should make it easier _at the earliest stages of development_ to visualize, test and present something much closer to what your actual front-end will become under a variety of different conditions.

docs/guides/starting-contribution/hello-world.mdx

@@ -0,0 +1,31 @@
+---
+title: Getting Started
+---
+
+# Dummy
+
+Dummy is a content generation toolkit designed to make the development, testing and presentation of web prototypes less time consuming and more realistic. It does so by making it easy to populate static HTML with dynamic content, and by randomizing elements within a layout on subsequent loads of a document, in a way, simulating connectivity to a live database.
+
+Originally conceived as a tool for helping to simulate the high volume, rapidly changing content characteristics of online newspapers and magazines, it's generalized enough to benefit the early stage front-end development of any website or application with content that frequently changes in length, form or nature.
+
+Dummy can be useful in the early stages of a project's development, where basic questions and assumptions about how to architect the front-end must be tested and resolved to conclusion before engineers further down the Gantt diagram can begin their work of obfuscating yours.
+
+It can also been seen as a support tool for designers and front-end artisans ready to embrace the dark art of designing in-browser, as vastly different layout permutations can be generated and evaluated rapidly with each load of the page. Problems and shortcommings can be more quickly exposed.
+
+### Dummy can…
+
+- Insert randomly selected strings of placeholder text in various lengths and formats (e.g. headline, teaser, paragraph).
+- Automagically crop and size high quality, news worthy, Creative Commons licensed placeholder images from a default pool – or from a specific folder or subset of folders that you provide.
+- Flesh out highly variable, asset rich layouts quickly with friendly, human-readable logic for building loops and controlling probability.
+- Allow you to focus on the important things – namely, the design and the code – not on copying and pasting (static) Lorem Ipsum, or hunting down plausible placeholder images.
+- More. Not lots more, but a _bit_ more!
+
+### You can…
+
+- Watch a screencast at https://vimeo.com/42252088
+- Ask questions and direct misgivings to http://twitter.com/kerns
+- Fork, follow or download via https://github.com/kerns/dummy
+
+### More Info
+
+Dummy's primary goal is to provide tools that speed front-end prototyping and QA. Whether you're meticulously crafting a fully responsive site with a myriad of CSS breakpoints, or just slapping together a half-baked idea – using Dummy should make it easier _at the earliest stages of development_ to visualize, test and present something much closer to what your actual front-end will become under a variety of different conditions.

docs/guides/starting-contribution/welcome.mdx

@@ -0,0 +1,29 @@
+---
+title: Welcome
+---
+
+# Git Opener
+
+Git Opener is a 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 guideline before you start. If don't know about how the things get done don't woory we have covered basic questions that might come into your mind when you are starting. Just give them a read and tight your helmet belive me the journey will be wild...
+
+## Learn Contributing
+
+From creating an issue to to open a pull request, everything got covered. The basic things you need to know is the terminologies. If you are curious you definately checkout these
+
+- **What is Git?**
+- **What is Github?**
+- **What is fork in Github?**
+- **What is an issue?**
+- **What is branch?**
+- **How to write professional commits?**
+- **How to Push your commits to your repository?**
+- **How to create a pull request to upstream?**
+
+## How it works
+
+- Based on your contribution file `your-github-username.mdx` GitOpener authenticates you.
+- Make your profile publically visible as
+
+```
+https://www.gitopener.vercel.app/contributors/<your-github-username>
+```

next.config.js

@@ -14,6 +14,15 @@ const nextConfig = withMdx({
   images: {
     domains: ['avatars.githubusercontent.com'],
   },
+  async redirects() {
+    return [
+      {
+        source: '/guides',
+        destination: '/guides/starting-contribution/welcome',
+        permanent: true,
+      },
+    ];
+  },
 });
 
 module.exports = nextConfig;

package.json

@@ -34,17 +34,22 @@
     "eslint-config-next": "13.1.1",
     "mongoose": "^6.8.2",
     "next": "13.1.1",
+    "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": "4.9.4",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "unist-util-map": "^3.1.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.3.0",

src/components/contributorpage/ContributorComp.tsx

@@ -1,4 +1,4 @@
-import { getFormattedDate } from '@/lib/Date';
+import { getFormattedDate } from '@/lib/date';
 import type { TCont } from '@/types/server/Contributors';
 import GithubIcon from '@icons/Github';
 import Glow from '@utilities/Glow';

src/components/contributorpage/NewContributrs.tsx

@@ -1,7 +1,7 @@
 import { ContributorsProps } from '@/pages/contributors';
 import FresLeafIcon from '@icons/FreshLeaf';
 import type { FC } from 'react';
-import Represent from '../layouts/represent';
+import Represent from '../../layouts/represent';
 import RenderContributors from './RenderContributors';
 
 type Props = {

src/components/contributorpage/OldContributrs.tsx

@@ -1,7 +1,7 @@
 import { ContributorsProps } from '@/pages/contributors';
 import EarlyBirdsIcon from '@icons/EarlyBirds';
 import type { FC } from 'react';
-import Represent from '../layouts/represent';
+import Represent from '../../layouts/represent';
 import RenderContributors from './RenderContributors';
 
 type Props = {

src/components/contributorpage/PopularContributrs.tsx

@@ -1,7 +1,7 @@
 import { ContributorsProps } from '@/pages/contributors';
 import StarManIcon from '@icons/StarMan';
 import type { FC } from 'react';
-import Represent from '../layouts/represent';
+import Represent from '../../layouts/represent';
 import RenderContributors from './RenderContributors';
 
 type Props = {

src/components/footer/index.tsx

@@ -1,8 +1,8 @@
-import { StarIcon } from '@heroicons/react/24/solid';
 import Container from '@layouts/Container';
 import Glow from '@utilities/Glow';
 import GradientBG from '@utilities/GradientBg';
 import Logo from '@utilities/Logo';
+import StarUs from '@utilities/StarUs';
 import colors from 'tailwindcss/colors';
 import FooterList from './FooterList';
 import Slogun from './Slogun';
@@ -25,15 +25,7 @@ export default function Footer() {
       <Container className=" py-8 font-semibold text-skin-base">
         <div className="mb-4 flex flex-col xs:flex-row xs:items-center xs:justify-between">
           <Logo />
-          <a
-            href="https://github.com/pbclife/gitopener.vercel.app"
-            target="_blank"
-            rel="norefferer noreferrer"
-            className="rounded-btn flex items-center justify-center gap-x-2 bg-skin-inverted text-skin-inverted"
-          >
-            <StarIcon className="h-5 w-5" />
-            Star Us
-          </a>
+          <StarUs />
         </div>
         {/* Slogun & links */}
         <div className="flex flex-col-reverse gap-8 xs:flex-col sm:flex-row sm:items-start sm:justify-between sm:px-8">

src/components/guidespage/BreadCrumb.tsx

@@ -0,0 +1,56 @@
+import { ChevronRightIcon, HomeIcon } from '@heroicons/react/20/solid';
+import Link from 'next/link';
+import type { ComponentProps, FC } from 'react';
+
+interface Crumb {
+  title: string;
+  Icon: FC<ComponentProps<'svg'>>;
+  href: string;
+}
+
+const crumbs: Crumb[] = [
+  {
+    title: `Home`,
+    Icon: HomeIcon,
+    href: `/`,
+  },
+];
+
+type BreadCrumbProps = {
+  dirName?: string;
+  fileName?: string;
+};
+
+const BreadCrumb: FC<BreadCrumbProps> = ({ fileName, dirName }) => {
+  return (
+    <div className=" flex items-center text-sm font-medium capitalize text-accent ">
+      <ul className="">
+        {crumbs.map((crumb) => (
+          <li key={crumb.title} className="flex list-none items-center">
+            <Link
+              className="flex items-center gap-x-1 rounded-full p-1 font-semibold text-accent lg:bg-accent/10 lg:px-4"
+              href={crumb.href}
+            >
+              <crumb.Icon className=" h-6 w-6 lg:h-5 lg:w-5" />
+              <p className="hidden lg:block">{crumb.title}</p>
+            </Link>
+            <ChevronRightIcon className="h-5 w-5 text-skin-base " />
+          </li>
+        ))}
+      </ul>
+      <div className=" flex items-center gap-x-1">
+        {dirName && (
+          <>
+            <p className="hidden font-semibold text-skin-muted/60 sm:block">
+              {dirName}
+            </p>
+            <ChevronRightIcon className="hidden h-5 w-5 text-skin-base sm:block " />
+          </>
+        )}
+        {fileName && <p className="font-semibold text-skin-base">{fileName}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default BreadCrumb;

src/components/guidespage/DocList.tsx

@@ -0,0 +1,38 @@
+import { useDocumentationContext } from '@/context/DocumentationContext';
+import type { FolderStructure } from '@/types/client/FileSystem';
+import { Bars2Icon } from '@heroicons/react/20/solid';
+import type { ComponentProps, FC } from 'react';
+import DocListForMobile from './DocListForMobile';
+import SidebarLinks from './SidebarLinks';
+
+type DocListProps = ComponentProps<'ul'> & {
+  data: FolderStructure;
+  mobile?: boolean;
+};
+
+const DocList: FC<DocListProps> = ({ data, mobile = false, ...props }) => {
+  // state
+  const { openSidebar, closeSidebar } = useDocumentationContext();
+
+  if (mobile)
+    return (
+      <>
+        <button
+          onClick={openSidebar}
+          className="grid place-items-center rounded-full p-1 outline-none hover:bg-skin-shine"
+        >
+          <Bars2Icon className="h-6 w-6" />
+        </button>
+        <DocListForMobile>
+          <SidebarLinks
+            data={data}
+            performOnLinkClick={closeSidebar}
+            {...props}
+          />
+        </DocListForMobile>
+      </>
+    );
+  return <SidebarLinks data={data} {...props} />;
+};
+
+export default DocList;