[Hyperdrive] Adding Deploy to Cloudflare buttons for Hyperdrive

src/content/docs/hyperdrive/get-started.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 2
 ---
 
-import { Render, PackageManagers, Tabs, TabItem } from "~/components";
+import { Render, PackageManagers, Tabs, TabItem, TypeScriptExample } from "~/components";
 
 Hyperdrive accelerates access to your existing databases from Cloudflare Workers, making even single-region databases feel globally distributed.
 
@@ -27,6 +27,31 @@ Learn more about the [databases that Hyperdrive supports](/hyperdrive/reference/
 
 :::
 
+## Quick start
+
+If you want to skip the steps and get started quickly, click on the button below.
+
+<Tabs syncKey ="sqlType">
+<TabItem label="PostgreSQL">
+
+**PostgreSQL deployment**
+
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/docs-examples/tree/hyperdrive-get-started/hyperdrive/hyperdrive-get-started-postgres)
+
+</TabItem>
+<TabItem label="MySQL">
+
+**MySQL deployment**
+
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/templates/tree/main/mysql-hyperdrive-template)
+
+</TabItem>
+</Tabs>
+
+This creates a repository in your GitHub account and deploys the application to Cloudflare Workers. Use this option if you are familiar with Cloudflare Workers, and wish to skip the step-by-step guidance.
+
+You may wish to manually follow the steps if you are new to Cloudflare Workers.
+
 ## Prerequisites
 
 Before you begin, ensure you have completed the following:
@@ -104,7 +129,7 @@ To create your first Hyperdrive, you will need:
 
 Hyperdrive accepts the combination of these parameters in the common connection string format used by database drivers:
 
-<Tabs>
+<Tabs syncKey ="sqlType">
 	<TabItem label="PostgreSQL">
 		```txt
 
@@ -179,7 +204,7 @@ Once you have created a Hyperdrive configuration and bound it to your Worker, yo
 
 ### Install a database driver
 
-<Tabs>
+<Tabs syncKey ="sqlType">
 <TabItem label="PostgreSQL">
 
 To connect to your database, you will need a database driver which allows you to authenticate and query your database. For this tutorial, you will use [node-postgres (pg)](https://node-postgres.com/), one of the most widely used PostgreSQL drivers.
@@ -210,7 +235,7 @@ With the driver installed, you can now create a Worker script that queries your
 
 ### Write a Worker
 
-<Tabs>
+<Tabs syncKey ="sqlType">
 <TabItem label="PostgreSQL">
 After you have set up your database, you will run a SQL query from within your Worker.
 
@@ -220,7 +245,8 @@ The `index.ts` file is where you configure your Worker's interactions with Hyper
 
 Populate your `index.ts` file with the following code:
 
-```typescript
+<TypeScriptExample>
+```ts
 // pg 8.13.0 or later is recommended
 import { Client } from "pg";
 
@@ -241,7 +267,7 @@ export default {
 		try {
 			// Connect to the database
 			await sql.connect();
-			
+
 			// Sample query
 			const results = await sql.query(`SELECT * FROM pg_tables`);
 
@@ -257,6 +283,7 @@ export default {
 	},
 } satisfies ExportedHandler<Env>;
 ```
+</TypeScriptExample>
 
 Upon receiving a request, the code above does the following:
 
@@ -274,7 +301,8 @@ The `index.ts` file is where you configure your Worker's interactions with Hyper
 
 Populate your `index.ts` file with the following code:
 
-```typescript
+<TypeScriptExample>
+```ts
 // mysql2 v3.13.0 or later is required
 import { createConnection  } from 'mysql2/promise';
 
@@ -294,7 +322,7 @@ export default {
 			user: env.HYPERDRIVE.user,
 			password: env.HYPERDRIVE.password,
 			database: env.HYPERDRIVE.database,
-			port: env.HYPERDRIVE.port
+			port: env.HYPERDRIVE.port,
 
 			// The following line is needed for mysql2 compatibility with Workers
 			// mysql2 uses eval() to optimize result parsing for rows with > 100 columns
@@ -331,6 +359,7 @@ export default {
 } satisfies ExportedHandler<Env>;
 
 ```
+</TypeScriptExample>
 
 Upon receiving a request, the code above does the following: