Skip to content

Commit 20edb50

Browse files
avikalpgavikalpg
committed
ui: docs: [MAJOR] 1. Added SideBar and RenderMarkdown components.
2. Created DocsSideBar view to use Sidebar in the documations section 3. Added all the pages for the User Guide section of the documentation.
1 parent 64281a7 commit 20edb50

11 files changed

+635
-147
lines changed

‎components/RenderMarkdown.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Markdown from "react-markdown";
2+
import remarkGfm from "remark-gfm";
3+
4+
export const RenderMarkdown = (props: { markdownText: string }) => {
5+
const { markdownText } = props;
6+
return (<span className='rich-text'>
7+
{markdownText.split("\n").map((line: string, index: number) => {
8+
return (
9+
<Markdown remarkPlugins={[remarkGfm]} key={index}>
10+
{line}
11+
</Markdown>
12+
)
13+
})}
14+
</span>)
15+
}

‎components/SideBar.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
import { useRouter } from 'next/router';
4+
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
5+
6+
export interface SidebarNavItem {
7+
label: string;
8+
href: string;
9+
children?: SidebarNavItem[];
10+
}
11+
12+
interface SideBarProps {
13+
navItems: SidebarNavItem[];
14+
className?: string;
15+
}
16+
17+
const SideBar: React.FC<SideBarProps> = ({ navItems = [], className }) => {
18+
const router = useRouter();
19+
const itemClassName = (isActive: boolean) => `block px-4 !py-2 my-1 rounded-md hover:no-underline font-normal ${isActive
20+
? 'text-secondary bg-primary'
21+
: 'hover:bg-primary/50'
22+
}`;
23+
24+
const renderNavItem = (item: SidebarNavItem) => {
25+
if (!item.children) {
26+
return (
27+
<Link
28+
href={item.href}
29+
key={item.label}
30+
className={itemClassName(router.pathname === item.href)}
31+
>
32+
{item.label}
33+
</Link>
34+
);
35+
}
36+
37+
return (
38+
<AccordionItem value={item.label} key={item.label} className="border-b-0 px-0">
39+
<AccordionTrigger className={itemClassName(router.pathname === item.href)}>
40+
<Link href={item.href}>
41+
{item.label}
42+
</Link>
43+
</AccordionTrigger>
44+
<AccordionContent>
45+
<ul className="ml-4">
46+
{item.children.map((child) => renderNavItem(child))}
47+
</ul>
48+
</AccordionContent>
49+
</AccordionItem>
50+
);
51+
};
52+
53+
return (
54+
<div className={`bg-background p-4 rounded-lg ${className ?? ''}`}>
55+
<h3 className="text-lg font-semibold mb-4">Documentation</h3>
56+
<nav>
57+
<Accordion type="multiple" className=''>
58+
{navItems.map((item) => renderNavItem(item))}
59+
</Accordion>
60+
</nav>
61+
</div>
62+
);
63+
};
64+
65+
export default SideBar;

‎next.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ const nextConfig = {
3838
hostname: process.env.NEXT_PUBLIC_STRAPI_API_URL, // Blog server
3939
pathname: '/**',
4040
},
41+
{
42+
protocol: 'https',
43+
hostname: 'github.com', // GitHub README images
44+
pathname: '/Alokit-Innovations/.github/assets/**'
45+
}
4146
],
4247
},
4348
webpack: (config, { isServer }) => {

‎pages/docs/bitbucket-installation.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import DocsSideBar from '../../views/docs/DocsSideBar';
3+
import MainAppBar from '../../views/MainAppBar';
4+
import Footer from '../../components/Footer';
5+
import Markdown from 'react-markdown';
6+
import remarkGfm from "remark-gfm";
7+
8+
const BitbucketInstallation: React.FC = () => {
9+
const installationMD = `
10+
## Sign in to Bitbucket
11+
First, you need to sign in to your Bitbucket account. If you don't have an account, you can create one by visiting https://bitbucket.org/account/signup/.
12+
13+
## Grant Vibinex access to your repositories
14+
After signing in, you need to grant Vibinex access to your repositories. Click on the "Authorize Bitbucket OAuth Consumer" button on the Vibinex website. This will redirect you to Bitbucket's authorization page.
15+
16+
On the authorization page, you will be asked to grant Vibinex access to your repositories. Review the permissions and click "Grant access" to proceed.
17+
18+
## Select repositories
19+
After granting access, you will be redirected back to the Vibinex website. Here, you can select the repositories you want to set up with Vibinex.
20+
21+
You can either select individual repositories or select all repositories in your Bitbucket account. Once you have made your selection, click "Continue" to proceed.
22+
23+
## Configure Vibinex
24+
In this step, you will configure Vibinex for your selected repositories. You can choose between self-hosting or cloud-hosting options.
25+
26+
If you choose self-hosting, you will need to set up a Docker container on your own infrastructure. Detailed instructions for self-hosting will be provided.
27+
28+
If you choose cloud-hosting, Vibinex will handle the hosting for you. You will need to provide some information about your cloud provider and Vibinex will set up the necessary infrastructure.
29+
30+
## Install browser extension
31+
To get the most out of Vibinex, you should install the Vibinex browser extension. This extension will highlight relevant code changes and provide additional information directly in your Bitbucket pull requests.
32+
33+
You can install the extension by visiting https://chromewebstore.google.com/detail/vibinex-code-review/jafgelpkkkopeaefadkdjcmnicgpcncc?pli=1.
34+
35+
## Verify your setup
36+
After completing the installation steps, you can verify that Vibinex is working correctly by checking your Bitbucket repositories.
37+
38+
You should see the Vibinex logo next to the repositories that are set up with Vibinex. When you view pull requests, relevant code changes should be highlighted in yellow.
39+
40+
If you encounter any issues or have questions, please refer to the troubleshooting section or contact our support team.
41+
`
42+
43+
const RenderMarkdown = (props: { markdownText: string }) => {
44+
const { markdownText } = props;
45+
return (<span className='rich-text'>
46+
{markdownText.split("\n").map((line: string, index: number) => {
47+
return (
48+
<Markdown remarkPlugins={[remarkGfm]} key={index}>
49+
{line}
50+
</Markdown>
51+
)
52+
})}
53+
</span>)
54+
}
55+
56+
return (
57+
<div>
58+
<MainAppBar />
59+
<div className="flex">
60+
<DocsSideBar className='w-full sm:w-80' />
61+
62+
{/* Center content */}
63+
<div className='sm:w-2/3 mx-auto mt-8 px-2 py-2'>
64+
<RenderMarkdown markdownText={installationMD} />
65+
</div>
66+
</div>
67+
<Footer />
68+
</div>
69+
);
70+
};
71+
72+
export default BitbucketInstallation;

‎pages/docs/github-installation.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import DocsSideBar from '../../views/docs/DocsSideBar';
3+
import MainAppBar from '../../views/MainAppBar';
4+
import Footer from '../../components/Footer';
5+
6+
const GithubInstallation: React.FC = () => {
7+
return (
8+
<div>
9+
<MainAppBar />
10+
<div className="flex">
11+
<DocsSideBar className='w-full sm:w-80' />
12+
13+
{/* Center content */}
14+
<div className='sm:w-2/3 mx-auto mt-8 px-2 py-2'>
15+
{/* Add your documentation content for setting up Vibinex on a GitHub repository here */}
16+
<h1>Setting up Vibinex on GitHub</h1>
17+
<p>Follow these steps to set up Vibinex on your GitHub repository:</p>
18+
{/* Add more content as needed */}
19+
</div>
20+
</div>
21+
<Footer />
22+
</div>
23+
);
24+
};
25+
26+
export default GithubInstallation;

0 commit comments

Comments
 (0)