feat(page): added about project page, added CONTRIBUTING.md docs

Author: kelvink96

.changeset/tiny-apes-sort.md

@@ -0,0 +1,5 @@
+---
+'antd-multi-dashboard': minor
+---
+
+optimized imports, added project about page and made UI simple and minimal

CONTRIBUTING.md

@@ -1,4 +1,51 @@
-This repo uses [changesets](https://github.com/changesets/changesets) to
-make releasing updates easier. For you, the contributor, this means you
-should run `npm run changeset` when you've got your changes ready. For
-more details, see this short document on [adding a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md#i-am-in-a-single-package-repository).
+# Contributing
+
+👍🎉 First off, thanks for taking the time to contribute! 🎉👍
+
+If you have found an issue or would like to request a new feature, simply create a new issue detailing the request. We also welcome pull requests. See below for information on getting started with development and submitting pull requests.
+
+Please note we have a [code of conduct](https://github.com/design-sparx/antd-multipurpose-dashboard/blob/main/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.
+
+> This repo uses [changesets](https://github.com/changesets/changesets) to
+> make releasing updates easier. For you, the contributor, this means you
+> should run `npm run changeset` when you've got your changes ready. For
+> more details, see this short document on [adding a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md#i-am-in-a-single-package-repository).
+
+## Found an Issue?
+
+If you find a bug in the source code or a mistake in the documentation, you can help us by submitting an issue to our [GitHub Repository](https://github.com/design-sparx/antd-multipurpose-dashboard/issues/new/choose). Even better you can submit a Pull Request with a fix.
+
+## Submitting a Pull Request
+
+1. Make sure that the contribution you want to make is explained or detailed in a GitHub issue! Find an [existing issue](https://github.com/design-sparx/antd-multipurpose-dashboard/issues) or [open a new one](https://github.com/design-sparx/antd-multipurpose-dashboard/issues/new/choose).
+2. Once done, [fork the repository](https://github.com/design-sparx/antd-multipurpose-dashboard/fork) in your own GitHub account.
+3. [Create a new Git branch](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository).
+4. Make the changes on your branch.
+5. [Submit the branch as a PR](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork) pointing to the main branch of the main repository.
+   > We do not enforce a naming convention for the PRs, but please use something descriptive of your changes.
+
+## Development Workflow
+
+Install dependencies
+
+```
+pnpm install
+```
+
+Run dev server
+
+```
+pnpm run dev
+```
+
+## Linter
+
+Each PR should pass the linter to be accepted. To fix lint and prettier errors, run `pnpm run lint:fix` and `pnpm run prettier:fix`.
+
+## Commit Message
+
+We use [commitlint](https://commitlint.js.org/guides/getting-started) to manage and standardize our commits:
+
+- check [commitlint conventional guides](https://github.com/conventional-changelog/commitlint?tab=readme-ov-file#what-is-commitlint),
+- not finish by a dot or any other punctuation character (!,?),
+- start with a verb so that we can read your commit message this way: "This commit will ...", where "..." is the commit message. e.g.: "Fix the home page button" or "Add support for dark mode"

README.md

@@ -34,7 +34,7 @@
 - [Live preview](https://antd-multipurpose-dashboard.netlify.app/)
 - [Components preview](https://6546507b657a74164abf2db6-iqmnggdrcl.chromatic.com/)
 - [Medium](https://medium.com/@kelvink96/designing-modern-dashboards-a-journey-through-react-vite-ant-design-and-storybook-2dac23e1e49a)
-- [Product roadmap](https://kelvink96.notion.site/Antd-multipurpose-dashboard-Product-roadmap-92163e05b8ea444a8f87b7f834933069) _ **New** _
+- [Product roadmap](https://kelvink96.notion.site/Antd-multipurpose-dashboard-Product-roadmap-92163e05b8ea444a8f87b7f834933069) **New**
 
 ## Introduction
 
@@ -164,7 +164,7 @@ the source files are included in the package.
 ┃ ┣ 📂 assets/                  # Assets folder **
 ┃ ┣ 📂 components/              # App Components **
 ┃ ┣ 📂 constants/               # App Components **
-┃ ┃ ┗ 📃 routes.ts              # All routes declarations **
+┃ ┃ ┗ 📃 routes.tsx              # All routes declarations **
 ┃ ┣ 📂 context/                 # React state conexts **
 ┃ ┣ 📂 hooks/                   # React Hooks **
 ┃ ┃ ┗ 📃 useFetch.ts            # Data fetch hook (optional) **

src/layouts/app/SideNav.tsx

@@ -81,7 +81,7 @@ const items: MenuProps['items'] = [
     ),
   ]),
   getItem(
-    <Link to={PATH_ABOUT.root}>Sitemap</Link>,
+    <Link to={PATH_ABOUT.root}>About</Link>,
     'about',
     <InfoCircleOutlined />
   ),

src/pages/About.tsx

@@ -10,31 +10,35 @@ import {
 } from '@ant-design/icons';
 import { Card, PageHeader } from '../components';
 import { createElement } from 'react';
-import { DASHBOARD_ITEMS } from '../constants';
+import { DASHBOARD_ITEMS, PATH_GITHUB } from '../constants';
 import { Link } from 'react-router-dom';
 
 const { Title, Text } = Typography;
 
 const SITES = [
   {
-    title: 'github',
-    description: 'source code of the website.',
+    title: 'GitHub',
+    description: 'Source code of the website.',
     icon: GithubOutlined,
+    link: PATH_GITHUB.repo,
   },
   {
     title: 'Report Bug',
-    description: 'something not working? Report a bug',
+    description: 'Something not working? Report a bug',
     icon: BugOutlined,
+    link: PATH_GITHUB.repo + '/issues/new/choose',
   },
   {
     title: 'Request Feature',
     description: 'Need something? Request a new feature.',
     icon: BulbOutlined,
+    link: PATH_GITHUB.repo + '/issues/new/choose',
   },
   {
     title: 'Contribute',
     description: 'Contribute to this project.',
     icon: CodeOutlined,
+    link: PATH_GITHUB.repo + '/blob/main/CONTRIBUTING.md',
   },
 ];
 
@@ -45,7 +49,7 @@ export const AboutPage = () => {
     <div>
       <Flex vertical gap="middle">
         <PageHeader
-          title="default dashboard"
+          title="About"
           breadcrumbs={[
             {
               title: (
@@ -76,20 +80,30 @@ export const AboutPage = () => {
           ]}
         />
         <Card>
-          <Title>Antd Admin</Title>
-          <Text>
-            A dynamic and versatile multipurpose dashboard template built using
-            React, Vite, Ant Design, and Storybook
-          </Text>
+          <Flex vertical gap="small">
+            <Title level={3} className="m-0">
+              Antd Admin
+            </Title>
+            <Text>
+              A dynamic and versatile multipurpose dashboard template built
+              using React, Vite, Ant Design, and Storybook
+            </Text>
+          </Flex>
         </Card>
         <Row {...context?.rowProps}>
           {SITES.map((s) => (
-            <Col xs={24} sm={12} md={8} xl={6} key={`col-${s.title}`}>
-              <Card>
-                {createElement(s.icon)}
-                <Title>{s.title}</Title>
-                <Text>{s.description}</Text>
-              </Card>
+            <Col xs={24} sm={12} key={`col-${s.title}`}>
+              <a href={s.link} target="_blank">
+                <Card hoverable>
+                  <Flex vertical gap="small">
+                    {createElement(s.icon, { style: { fontSize: 24 } })}
+                    <Title level={5} className="m-0">
+                      {s.title}
+                    </Title>
+                    <Text>{s.description}</Text>
+                  </Flex>
+                </Card>
+              </a>
             </Col>
           ))}
         </Row>

src/routes/routes.tsx

@@ -34,18 +34,17 @@ import {
   UserProfileSecurityPage,
   VerifyEmailPage,
   WelcomePage,
+  LearningDashboardPage,
+  LogisticsDashboardPage,
 } from '../pages';
 import {
   CorporateLayout,
   DashboardLayout,
   GuestLayout,
   UserAccountLayout,
 } from '../layouts';
-import {
-  LearningDashboardPage,
-  LogisticsDashboardPage,
-} from '../pages/dashboards';
 import React, { ReactNode, useEffect } from 'react';
+import { AboutPage } from '../pages/About.tsx';
 
 // Custom scroll restoration function
 export const ScrollToTop: React.FC = () => {
@@ -270,6 +269,18 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: '/about',
+    element: <PageWrapper children={<DashboardLayout />} />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        index: true,
+        path: '',
+        element: <AboutPage />,
+      },
+    ],
+  },
 ]);
 
 export default router;