docs: migrate examples

website/.eslintrc.json

@@ -106,6 +106,16 @@
         ],
         "no-unused-vars": 2
       }
+    },
+    {
+      "files": ["static/**/*"],
+      "rules": {
+        "import/no-unresolved": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "no-unused-vars": "off",
+        "no-bitwise": "off"
+      }
     }
   ],
   "settings": {

website/docs/documentation/00-introduction.mdx → website/docs/documentation/00-index.mdx

@@ -1,8 +1,19 @@
-# Introduction
+---
+slug: /documentation
+title: Introduction
+---
+
+import { PageTitle } from '@site/src/components/PageTitle';
+
+<PageTitle title='Documentation' />
 
-MySQL2 aims to be a drop in replacement for [node-mysql](https://github.com/mysqljs/mysql). Please check `node-mysql` for full documentation.
+# Documentation
 
-**Note :** _If you see any API incompatibilities with `node-mysql`, please report via github issue._
+MySQL2 aims to be a drop in replacement for [node-mysql](https://github.com/mysqljs/mysql).
+
+:::note
+_If you see any API incompatibilities with `node-mysql`, please report via github issue._
+:::
 
 Not only `Node-MySQL2` offers better performance over `node-mysql`, we also support these additional features.
 
@@ -20,7 +31,7 @@ Not only `Node-MySQL2` offers better performance over `node-mysql`, we also supp
 
 ## Examples
 
-Please check these [examples](/docs/examples) for `node-mysql2`.
+Please check these [examples](/docs/examples) for **MySQL2**.
 
 ---
 

website/docs/examples/index.mdx → website/docs/examples/00-index.mdx

@@ -1,36 +1,120 @@
 ---
-title: Quickstart
+slug: /examples
+title: Introduction
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { PageTitle } from '@site/src/components/PageTitle';
+
+<PageTitle title='Examples' />
+
 # Examples
 
-## Simple SELECT
+## Simple `SELECT`
+
+<Tabs>
+  <TabItem value='Promise' default>
+
+```js
+import mysql from 'mysql2/promise';
+
+const connection = await mysql.createConnection({
+  user: 'test',
+  database: 'test',
+});
+
+const [rows] = await connection.query('SELECT 1+1 AS `test1`');
+// ...
+```
+
+  </TabItem>
+  <TabItem value='Callback'>
 
 ```js
 const mysql = require('mysql2');
-const connection = mysql.createConnection({ user: 'test', database: 'test' });
 
-connection.query('SELECT 1+1 as test1', (err, rows) => {
-  //
+const connection = mysql.createConnection({
+  user: 'test',
+  database: 'test',
+});
+
+connection.query('SELECT 1+1 AS `test1`', (err, rows) => {
+  // ...
 });
 ```
 
-## Prepared statement and parameters
+  </TabItem>
+</Tabs>
+
+---
+
+## Prepared Statement and Parameters
+
+<Tabs>
+  <TabItem value='Promise' default>
+
+```js
+import mysql from 'mysql2/promise';
+
+const connection = await mysql.createConnection({
+  user: 'test',
+  database: 'test',
+});
+
+const [rows] = await connection.execute('SELECT 1+? AS `test1`', [10]);
+// ...
+```
+
+  </TabItem>
+  <TabItem value='Callback'>
 
 ```js
 const mysql = require('mysql2');
-const connection = mysql.createConnection({ user: 'test', database: 'test' });
+
+const connection = mysql.createConnection({
+  user: 'test',
+  database: 'test',
+});
 
 connection.execute('SELECT 1+? as test1', [10], (err, rows) => {
-  //
+  // ...
 });
 ```
 
+  </TabItem>
+</Tabs>
+
+---
+
 ## Connecting over encrypted connection
 
+<Tabs>
+  <TabItem value='Promise' default>
+
+```js
+import fs from 'fs';
+import mysql from 'mysql2/promise';
+
+const connection = await mysql.createConnection({
+  user: 'test',
+  database: 'test',
+  ssl: {
+    key: fs.readFileSync('./certs/client-key.pem'),
+    cert: fs.readFileSync('./certs/client-cert.pem'),
+  },
+});
+
+console.log(await connection.query('SELECT 1+1 AS `test1`'));
+```
+
+  </TabItem>
+  <TabItem value='Callback'>
+
 ```js
 const fs = require('fs');
 const mysql = require('mysql2');
+
 const connection = mysql.createConnection({
   user: 'test',
   database: 'test',
@@ -39,26 +123,62 @@ const connection = mysql.createConnection({
     cert: fs.readFileSync('./certs/client-cert.pem'),
   },
 });
-connection.query('SELECT 1+1 as test1', console.log);
+
+connection.query('SELECT 1+1 AS `test1`', console.log);
 ```
 
+  </TabItem>
+</Tabs>
+
 You can use 'Amazon RDS' string as value to ssl property to connect to Amazon RDS mysql over ssl (in that case http://s3.amazonaws.com/rds-downloads/mysql-ssl-ca-cert.pem CA cert is used)
 
+<Tabs>
+  <TabItem value='Promise' default>
+
+```js
+import mysql from 'mysql2/promise';
+
+try {
+  const connection = await mysql.createConnection({
+    user: 'foo',
+    password: 'bar',
+    host: 'db.id.ap-southeast-2.rds.amazonaws.com',
+    ssl: 'Amazon RDS',
+  });
+
+  const [res] = await connection.query("SHOW `status` LIKE 'Ssl_cipher'");
+
+  console.log(res);
+  connection.end();
+} catch (err) {
+  console.log(err);
+}
+```
+
+  </TabItem>
+  <TabItem value='Callback'>
+
 ```js
 const mysql = require('mysql2');
+
 const connection = mysql.createConnection({
   user: 'foo',
   password: 'bar',
   host: 'db.id.ap-southeast-2.rds.amazonaws.com',
   ssl: 'Amazon RDS',
 });
 
-connection.query("show status like 'Ssl_cipher'", (err, res) => {
+connection.query("SHOW `status` LIKE 'Ssl_cipher'", (err, res) => {
   console.log(err, res);
   connection.end();
 });
 ```
 
+  </TabItem>
+</Tabs>
+
+---
+
 ## Simple MySQL proxy server
 
 ```js
@@ -115,6 +235,8 @@ server.on('connection', (conn) => {
 });
 ```
 
+---
+
 ## Examples using MySQL server API
 
 - [MySQL-pg-proxy](https://github.com/sidorares/mysql-pg-proxy) - MySQL to Postgres proxy server.

website/docs/examples/binlog-watcher.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# Binlog Watcher
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/binlog-watcher.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/connect-over-socks.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# Connect Over Socks
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/connect-over-socks.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/execute.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# Execute
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/execute.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/mysqlproxy.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# MySQL Proxy
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/mysqlproxy.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/pass-sha.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# Pass SHA
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/pass-sha.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/pool-test.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# Pool Test
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/pool-test.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/prepare.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# MySQL Proxy
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/prepare.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/promise-co-await.mdx

@@ -0,0 +1,29 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# Promise CO Await
+
+<Tabs>
+  <TabItem value='await.js' default>
+    <ExternalCodeEmbed
+      url='/examples/promise-co-await/await.js'
+      language='js'
+    />
+  </TabItem>
+  <TabItem value='co.js' default>
+    <ExternalCodeEmbed url='/examples/promise-co-await/co.js' language='js' />
+  </TabItem>
+  <TabItem value='.babelrc' default>
+    <ExternalCodeEmbed
+      url='/examples/promise-co-await/babelrc.json'
+      language='js'
+    />
+  </TabItem>
+  <TabItem value='package.json' default>
+    <ExternalCodeEmbed
+      url='/examples/promise-co-await/package.json'
+      language='js'
+    />
+  </TabItem>
+</Tabs>

website/docs/examples/queries/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Queries",
+  "link": {
+    "type": "generated-index"
+  }
+}

website/docs/examples/queries/select.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# SELECT
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/queries/select.js' language='js' />
+  </TabItem>
+</Tabs>

website/docs/examples/server.mdx

@@ -0,0 +1,11 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { ExternalCodeEmbed } from '@site/src/components/ExternalCodeEmbed';
+
+# Server
+
+<Tabs>
+  <TabItem value='index.js' default>
+    <ExternalCodeEmbed url='/examples/server.js' language='js' />
+  </TabItem>
+</Tabs>