From 63959cab51d36b930781ae7240ec6e6447402391 Mon Sep 17 00:00:00 2001
From: wellwelwel <46850407+wellwelwel@users.noreply.github.com>
Date: Mon, 27 Nov 2023 05:35:26 -0300
Subject: [PATCH] docs: improve styles
---
website/docs/faq/00-index.mdx | 6 +-
website/docs/faq/how-to-handle-errors.mdx | 27 +++++++++
website/docs/index.mdx | 3 +
.../current/index.mdx | 3 +
.../current/index.mdx | 3 +
website/src/components/Stability.tsx | 25 ++++----
website/src/css/custom.scss | 15 ++---
website/src/css/stability/_light.scss | 8 +--
website/src/css/stability/_main.scss | 60 ++++++++++---------
9 files changed, 99 insertions(+), 51 deletions(-)
diff --git a/website/docs/faq/00-index.mdx b/website/docs/faq/00-index.mdx
index 54759a939f..e27ee54c27 100644
--- a/website/docs/faq/00-index.mdx
+++ b/website/docs/faq/00-index.mdx
@@ -3,10 +3,14 @@ slug: /faq
title: Introduction
---
+import { PageTitle } from '@site/src/components/PageTitle';
+
+
+
# Frequently Asked Questions
This section provides answers to commonly asked questions about [MySQL2](https://github.com/sidorares/node-mysql2/discussions).
:::tip
-To explore the FAQs, please use the **sidebar** navigation on desktop or access the **menu** on mobile devices.
+To explore the FAQs, please use the **sidebar navigation** on desktop or access the **menu** on mobile devices.
:::
diff --git a/website/docs/faq/how-to-handle-errors.mdx b/website/docs/faq/how-to-handle-errors.mdx
index bfda1e0a39..01645754a0 100644
--- a/website/docs/faq/how-to-handle-errors.mdx
+++ b/website/docs/faq/how-to-handle-errors.mdx
@@ -1,4 +1,5 @@
import { FAQ } from '@site/src/components/FAQ';
+import { Stability } from '@site/src/components/Stability';
# How to handle errors?
@@ -8,6 +9,11 @@ This section details error handling techniques in MySQL2. It covers essential er
+
+
Handling connection errors by adding an error event listener:
```js
@@ -32,6 +38,8 @@ connection.addListener('error', (err) => {
+
+
Handling connection errors through callback's `err` parameter:
```js
@@ -57,6 +65,8 @@ pool.getConnection((err, connection) => {
+
+
Handling connection errors through callback's `err` parameter:
```js
@@ -84,6 +94,8 @@ poolCluster.getConnection('NodeI', (err, connection) => {
+
+
Handling `execute` errors through callback's `err` parameter:
```js
@@ -105,6 +117,8 @@ connection.execute('SELEC 1 + 1', (err, rows) => {
+
+
Handling `query` errors through callback's `err` parameter:
```js
@@ -128,6 +142,11 @@ connection.query('SELEC 1 + 1', (err, rows) => {
+
+
Handling connection errors through `try-catch` block:
```js
@@ -152,6 +171,8 @@ try {
+
+
Handling connection errors through `try-catch` block:
```js
@@ -178,6 +199,8 @@ try {
+
+
Handling connection errors through `try-catch` block:
```js
@@ -206,6 +229,8 @@ try {
+
+
Handling `execute` errors through `try-catch` block:
```js
@@ -227,6 +252,8 @@ try {
+
+
Handling `query` errors through `try-catch` block:
```js
diff --git a/website/docs/index.mdx b/website/docs/index.mdx
index 865eaeea1a..6fab97d731 100644
--- a/website/docs/index.mdx
+++ b/website/docs/index.mdx
@@ -7,6 +7,9 @@ description: MySQL client for Node.js with focus on performance
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+import { PageTitle } from '@site/src/components/PageTitle';
+
+
# MySQL2
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/index.mdx b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/index.mdx
index 5a6c206884..0feea50a70 100644
--- a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/index.mdx
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/index.mdx
@@ -7,6 +7,9 @@ description: Cliente MySQL para Node.js com foco em performance
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+import { PageTitle } from '@site/src/components/PageTitle';
+
+
# MySQL2
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/index.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/index.mdx
index 70f0f0bf30..9cbfb25112 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/index.mdx
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/index.mdx
@@ -7,6 +7,9 @@ description: 适用于Node.js的MySQL客户端，专注于性能优化
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+import { PageTitle } from '@site/src/components/PageTitle';
+
+
# MySQL2
diff --git a/website/src/components/Stability.tsx b/website/src/components/Stability.tsx
index d166a3d975..f3e01c46b2 100644
--- a/website/src/components/Stability.tsx
+++ b/website/src/components/Stability.tsx
@@ -1,11 +1,12 @@
import { FC, JSX } from 'react';
+import Link from '@docusaurus/Link';
import {
AlertTriangle,
Lightbulb,
LightbulbOff,
Microscope,
- Package,
- ShieldCheck,
+ PackageSearch,
+ PackageCheck,
} from 'lucide-react';
export type StabilityProps = {
@@ -56,19 +57,19 @@ export const Stability: FC = ({ level, message }) => {
},
1: {
title: 'Experimental',
- icon: ,
+ icon: ,
},
1.1: {
title: 'Early Development',
- icon: ,
+ icon: ,
},
1.2: {
title: 'Release Candidate',
- icon: ,
+ icon: ,
},
2: {
title: 'Stable',
- icon: ,
+ icon: ,
},
3: {
title: 'Legacy',
@@ -78,11 +79,13 @@ export const Stability: FC = ({ level, message }) => {
return (
-
- {level}
- {styles[level].title}
- {styles[level].icon}
-
+
+
+ {level}
+ {styles[level].title}
+ {styles[level].icon}
+
+
{message ? {message}
: null}
);
diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss
index 229f7615fe..8669a0f886 100644
--- a/website/src/css/custom.scss
+++ b/website/src/css/custom.scss
@@ -14,14 +14,15 @@
--ifm-table-background: #fdfdfd7a !important;
}
+// Dracula Theme
[data-theme='dark'] {
- --ifm-color-primary: #3686cc;
- --ifm-color-primary-dark: #3177b3;
- --ifm-color-primary-darker: #2c6ca1;
- --ifm-color-primary-darkest: #245881;
- --ifm-color-primary-light: #3a91d3;
- --ifm-color-primary-lighter: #4a9bdd;
- --ifm-color-primary-lightest: #5ea6e6;
+ --ifm-color-primary: #7a77ff;
+ --ifm-color-primary-dark: #5552ff;
+ --ifm-color-primary-darker: #433fff;
+ --ifm-color-primary-darkest: #0c07ff;
+ --ifm-color-primary-light: #9f9cff;
+ --ifm-color-primary-lighter: #b1afff;
+ --ifm-color-primary-lightest: #b1afff;
--docusaurus-highlighted-code-line-bg: #0c0d152b;
--ifm-table-stripe-background: #5e30a0 !important;
--ifm-table-background: transparent !important;
diff --git a/website/src/css/stability/_light.scss b/website/src/css/stability/_light.scss
index bc7f5ac72c..b8e9d456b8 100644
--- a/website/src/css/stability/_light.scss
+++ b/website/src/css/stability/_light.scss
@@ -25,11 +25,11 @@
}
&[data-level='2'] {
- --stability-background: #e8ffe0;
- --stability-border: #c5ec51;
- --stability-title-background: #40c414;
+ --stability-background: #e6f6e6;
+ --stability-border: #85cb86;
+ --stability-title-background: #50af50;
--stability-title-color: #fff;
- --stability-text: #31bb0b;
+ --stability-text: #3e893f;
--stability-description: #579b23;
--stability-separator: #ceefcd;
}
diff --git a/website/src/css/stability/_main.scss b/website/src/css/stability/_main.scss
index 21a9928581..0a0009b8f4 100644
--- a/website/src/css/stability/_main.scss
+++ b/website/src/css/stability/_main.scss
@@ -11,6 +11,38 @@ section {
border: 0.0625rem solid var(--stability-border);
background-color: var(--stability-background);
+ a {
+ text-decoration: none !important;
+
+ header {
+ @include flex(row, center);
+ gap: 0.46875rem;
+
+ strong {
+ display: block;
+ padding: 0 0.46875rem;
+ border-radius: var(--ifm-code-border-radius);
+ font-size: 0.875rem;
+ background-color: var(--stability-title-background);
+ color: var(--stability-title-color);
+ }
+
+ span {
+ flex-grow: 1;
+ @include flex(row, center);
+ gap: 0.125rem;
+ font-weight: 600;
+ color: var(--stability-text);
+ }
+
+ svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ stroke: var(--stability-text);
+ }
+ }
+ }
+
p {
width: 100%;
margin: 0;
@@ -19,34 +51,6 @@ section {
font-size: 0.91rem;
color: var(--stability-description);
}
-
- header {
- @include flex(row, center);
- gap: 0.46875rem;
-
- strong {
- display: block;
- padding: 0 0.46875rem;
- border-radius: var(--ifm-code-border-radius);
- font-size: 0.875rem;
- background-color: var(--stability-title-background);
- color: var(--stability-title-color);
- }
-
- span {
- flex-grow: 1;
- @include flex(row, center);
- gap: 0.125rem;
- font-weight: 600;
- color: var(--stability-text);
- }
-
- svg {
- width: 1.25rem;
- height: 1.25rem;
- stroke: var(--stability-text);
- }
- }
}
}