docs: improve styles

sidorares · Nov 27, 2023 · 63959ca · 63959ca
1 parent c962dfd
commit 63959ca
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 51 deletions.
diff --git 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';
+
+<PageTitle title='FAQ' />
+
 # 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
@@ -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
 
 <FAQ title='createConnection'>
 
+<Stability
+  level={2}
+  message='This solution has been tested and confirmed as the correct answer.'
+/>
+
 Handling connection errors by adding an error event listener:
 
 ```js
@@ -32,6 +38,8 @@ connection.addListener('error', (err) => {
 
 <FAQ title='createPool'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling connection errors through callback's `err` parameter:
 
 ```js
@@ -57,6 +65,8 @@ pool.getConnection((err, connection) => {
 
 <FAQ title='createPoolCluster'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling connection errors through callback's `err` parameter:
 
 ```js
@@ -84,6 +94,8 @@ poolCluster.getConnection('NodeI', (err, connection) => {
 
 <FAQ title='execute'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling `execute` errors through callback's `err` parameter:
 
 ```js
@@ -105,6 +117,8 @@ connection.execute('SELEC 1 + 1', (err, rows) => {
 
 <FAQ title='query'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling `query` errors through callback's `err` parameter:
 
 ```js
@@ -128,6 +142,11 @@ connection.query('SELEC 1 + 1', (err, rows) => {
 
 <FAQ title='createConnection'>
 
+<Stability
+  level={2}
+  message='This solution has been tested and confirmed as the correct answer.'
+/>
+
 Handling connection errors through `try-catch` block:
 
 ```js
@@ -152,6 +171,8 @@ try {
 
 <FAQ title='createPool'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling connection errors through `try-catch` block:
 
 ```js
@@ -178,6 +199,8 @@ try {
 
 <FAQ title='createPoolCluster'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling connection errors through `try-catch` block:
 
 ```js
@@ -206,6 +229,8 @@ try {
 
 <FAQ title='execute'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling `execute` errors through `try-catch` block:
 
 ```js
@@ -227,6 +252,8 @@ try {
 
 <FAQ title='query'>
 
+<Stability level={2} message='This solution has been tested.' />
+
 Handling `query` errors through `try-catch` block:
 
 ```js

diff --git 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';
+
+<PageTitle title='MySQL2 | Quickstart' />
 
 # 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
@@ -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';
+
+<PageTitle title='MySQL2 | Guia Rápido' />
 
 # 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
@@ -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';
+
+<PageTitle title='MySQL2 | Quickstart' />
 
 # MySQL2
 

diff --git 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<StabilityProps> = ({ level, message }) => {
     },
     1: {
       title: 'Experimental',
-      icon: <Microscope />,
+      icon: <Lightbulb />,
     },
     1.1: {
       title: 'Early Development',
-      icon: <Lightbulb />,
+      icon: <Microscope />,
     },
     1.2: {
       title: 'Release Candidate',
-      icon: <Package />,
+      icon: <PackageSearch />,
     },
     2: {
       title: 'Stable',
-      icon: <ShieldCheck />,
+      icon: <PackageCheck />,
     },
     3: {
       title: 'Legacy',
@@ -78,11 +79,13 @@ export const Stability: FC<StabilityProps> = ({ level, message }) => {
 
   return (
     <section className='stability' data-level={level}>
-      <header>
-        <strong>{level}</strong>
-        <span>{styles[level].title}</span>
-        {styles[level].icon}
-      </header>
+      <Link to='/docs/stability-badges'>
+        <header>
+          <strong>{level}</strong>
+          <span>{styles[level].title}</span>
+          {styles[level].icon}
+        </header>
+      </Link>
       {message ? <p>{message}</p> : null}
     </section>
   );

diff --git 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
@@ -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
@@ -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);
-      }
-    }
   }
 }