docs: create website Contributing page

website/docs/contributing/00-index.mdx

@@ -0,0 +1,13 @@
+---
+slug: /contributing
+title: MySQL2
+---
+
+import { PageTitle } from '@site/src/components/PageTitle';
+
+<PageTitle title='Contributing' />
+
+# Contributing
+
+Want to improve something in **MySQL2**?
+Please check [Contributing.md](https://github.com/sidorares/node-mysql2/blob/master/Contributing.md) for detailed instruction on how to get started.

website/docs/contributing/website.mdx

@@ -0,0 +1,208 @@
+---
+title: Documentation Site
+---
+
+import { FAQ } from '@site/src/components/FAQ';
+import { History } from '@site/src/components/History';
+import { Stability } from '@site/src/components/Stability';
+
+# Website Contributing Guidelines
+
+This website is built using [Docusaurus 3](https://docusaurus.io/), a modern static website generator.
+
+---
+
+## Environment
+
+You will need these tools installed on your system:
+
+- [Node.js (18.x or higher)](https://nodejs.org/)
+
+---
+
+## Development
+
+1. Fork the [MySQL2](https://github.com/sidorares/node-mysql2) repository.
+2. Download your forked repository locally. The website's workspace is the "_website_" directory in **node-mysql2** root.
+3. Create a new branch from `master` (optional).
+4. Run `cd website` to enter the website workspace.
+5. Run `npm ci` to install the dependecies from _package-lock.json_.
+6. Run `npm start` to starting the local development.
+
+> It will start a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+For **Docusaurus** complete documentation, please [see here](https://docusaurus.io/docs).
+
+<FAQ title='CLI example'>
+
+```bash
+git clone https://github.com/sidorares/node-mysql2.git
+git checkout -b website # optional
+cd /path-to/node-mysql2/website
+npm ci
+npm start
+```
+
+</FAQ>
+
+Documentation is auto-generated from **MDX** files placed in these directories:
+
+- _./docs/documentation_
+- _./docs/examples_
+- _./docs/faq_
+
+:::danger Caution
+Note that the website has its own _package.json_.
+
+Please, do not install dependencies for the website in **node-mysql2** root.
+:::
+
+---
+
+## Extras Components
+
+Every extra component is thoroughly documented with complete typings descriptions.
+
+> [**Docusaurus Markdown Features:**](https://docusaurus.io/docs/markdown-features) The MDX compiler transforms Markdown files to React components, and allows you to use JSX in your Markdown content. This enables you to easily interleave React components within your content, and create delightful learning experiences.
+
+### History
+
+The `History` component displays version changes in a table format, listing version numbers alongside their changes.
+
+{/* prettier-ignore-start */}
+```tsx
+import { History } from '@site/src/components/History';
+
+<History
+  records={[
+    {
+      version: '1.0.0',
+      changes: ['Some change message.'],
+    },
+  ]}
+/>
+```
+{/* prettier-ignore-end */}
+
+:::tip
+You can also utilize React components in the `changes` option.
+:::
+
+<FAQ title='Example'>
+  <History
+    records={[
+      {
+        version: '1.0.0',
+        changes: ['Some change message.'],
+      },
+    ]}
+  />
+</FAQ>
+
+---
+
+### Stability
+
+See the [Stability Badges](/docs/stability-badges) for more detais.
+
+{/* prettier-ignore-start */}
+```tsx
+import { History } from '@site/src/components/History';
+
+<Stability level={2} />
+<Stability level={2} message='Some message' />
+```
+{/* prettier-ignore-end */}
+
+:::tip
+You can also utilize React components in the `message` option.
+:::
+
+Available levels: `0`, `1`, `1.1`, `1.2`, `2` and `3`.
+
+<FAQ title='Example'>
+  <Stability level={2} />
+  <Stability level={2} message='Some message.' />
+</FAQ>
+
+---
+
+### FAQ
+
+{/* prettier-ignore-start */}
+```tsx
+import { FAQ } from '@site/src/components/FAQ';
+
+<FAQ title='Title'>
+
+  > Some markdown (**MDX**) content.
+
+</FAQ>
+```
+{/* prettier-ignore-end */}
+
+:::tip
+
+- The **FAQ** component can be utilized in any section or page.
+- Code blocks are compatible and can be used within the **FAQ** component.
+  :::
+
+<FAQ title='Example'>
+  <FAQ title='Title'>
+
+    > Some markdown (**MDX**) content.
+
+  </FAQ>
+</FAQ>
+
+---
+
+## Running Tests
+
+<FAQ title='Check Prettier and ESLint rules for compliance'>
+
+```bash
+npm run lintcheck
+```
+
+- Included in the **GitHub Actions** workflow.
+
+</FAQ>
+<FAQ title='Check for typings errors'>
+
+<Stability
+  level={1}
+  message={
+    <>
+      Checks for <strong>MDX</strong> components are missing.
+    </>
+  }
+/>
+
+```bash
+npm run typecheck
+```
+
+- Included in the **GitHub Actions** workflow.
+
+</FAQ>
+<FAQ title='Clear and build the website'>
+
+```bash
+npm run clear
+npm run build
+```
+
+- Included in the **GitHub Actions** workflow.
+
+</FAQ>
+<FAQ title='Fix issues from Prettier and ESLint rules' open>
+
+```bash
+npm run lint
+```
+
+- To prevent lint issues, it is recommended to execute this command before creating your commit.
+- Not included in the **GitHub Actions** workflow.
+
+</FAQ>

website/docusaurus.config.ts

@@ -63,6 +63,11 @@ const config: Config = {
           className: 'navbar__brand navbar__manual--title text--truncate',
           activeBaseRegex: `^/$`,
         },
+        {
+          to: '/docs/examples',
+          label: 'Examples',
+          position: 'left',
+        },
         {
           to: '/docs/faq',
           label: 'FAQ',
@@ -88,7 +93,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
-      additionalLanguages: ['json'],
+      additionalLanguages: ['json', 'bash', 'tsx'],
     },
   } satisfies Preset.ThemeConfig,
 

website/i18n/pt-BR/docusaurus-plugin-content-docs/current.json

@@ -4,5 +4,8 @@
   },
   "sidebar.docs.category.Examples": {
     "message": "Exemplos"
+  },
+  "sidebar.docs.category.Contributing": {
+    "message": "Contribuições"
   }
 }

website/i18n/pt-BR/docusaurus-plugin-content-docs/current/contributing/00-index.mdx

@@ -0,0 +1,13 @@
+---
+slug: /contributing
+title: MySQL2
+---
+
+import { PageTitle } from '@site/src/components/PageTitle';
+
+<PageTitle title='Contribuições' />
+
+# Contribuições
+
+Quer melhorar algo no **MySQL2**?
+Consulte o arquivo [Contributing.md](https://github.com/sidorares/node-mysql2/blob/master/Contributing.md) para instruções detalhadas sobre como começar.

website/i18n/zh-CN/docusaurus-plugin-content-docs/current.json

@@ -4,5 +4,8 @@
   },
   "sidebar.docs.category.Examples": {
     "message": "Examples"
+  },
+  "sidebar.docs.category.Contributing": {
+    "message": "贡献"
   }
 }

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/contributing.mdx → website/i18n/zh-CN/docusaurus-plugin-content-docs/current/contributing/00-index.mdx

@@ -1,3 +1,12 @@
+---
+slug: /contributing
+title: MySQL2
+---
+
+import { PageTitle } from '@site/src/components/PageTitle';
+
+<PageTitle title='贡献' />
+
 # 贡献
 
 如果要为`node-mysql2`做些贡献.请查阅 [Contributing.md](https://github.com/sidorares/node-mysql2/blob/master/Contributing.md) 来获得更多详细信息。

website/sidebars.ts

@@ -10,15 +10,15 @@ const sidebars: SidebarsConfig = {
       label: 'Documentation',
       items: [{ type: 'autogenerated', dirName: 'documentation' }],
     },
+    'api-and-configurations',
+    'acknowledgements',
     {
       type: 'category',
-      label: 'Examples',
-      items: [{ type: 'autogenerated', dirName: 'examples' }],
+      label: 'Contributing',
+      items: [{ type: 'autogenerated', dirName: 'contributing' }],
     },
-    'api-and-configurations',
-    'acknowledgements',
-    'contributing',
   ],
+  examples: [{ type: 'autogenerated', dirName: 'examples' }],
   faq: [{ type: 'autogenerated', dirName: 'faq' }],
 };
 

website/src/components/FAQ.tsx

@@ -8,6 +8,17 @@ export type FAQProps = {
   title: string;
 };
 
+/**
+ * Usage example:
+ *
+ * ```mdx
+ * <FAQ title='Title'>
+ *
+ * > Some markdown (**MDX**) content.
+ *
+ * </FAQ>
+ * ```
+ */
 export const FAQ: FC<FAQProps> = ({ children, open, title }) => {
   return (
     <Details

website/src/css/_history.scss

@@ -11,6 +11,7 @@ details {
       @include flex(row, center);
       gap: 0.35rem;
       color: var(--history-summary-color);
+      font-weight: 500;
 
       svg {
         width: 1.125rem;
@@ -64,7 +65,7 @@ details {
       --ifm-alert-background-color: #f9fafb;
       --ifm-alert-border-color: var(--ifm-menu-color-active);
       --ifm-table-border-color: #bcd7ff;
-      --history-summary-color: #1b6192;
+      --history-summary-color: #3a85ba;
       --history-summary-icon: var(--docusaurus-details-decoration-color);
       --history-code-background: #ecf4ff;
       --history-separator: var(--ifm-table-border-color);