Adding dashboard instructions for PostgreSQL db examples (#24483)

Author: Oxyjun

src/content/docs/hyperdrive/examples/connect-to-postgres/postgres-database-providers/digital-ocean.mdx

@@ -8,7 +8,7 @@ sidebar:
 description: Connect Hyperdrive to a Digital Ocean Postgres database instance.
 ---
 
-import { Render } from "~/components";
+import { Render, Steps } from "~/components";
 
 This example shows you how to connect Hyperdrive to a Digital Ocean database instance.
 
@@ -18,11 +18,13 @@ To allow Hyperdrive to connect to your database, you will need to ensure that Hy
 
 ### DigitalOcean Dashboard
 
+<Steps>
 1. Go to the DigitalOcean dashboard and select the database you wish to connect to.
 2. Go to the **Overview** tab.
 3. Under the **Connection Details** panel, select **Public network**.
 4. On the dropdown menu, select **Connection string** > **show-password**.
 5. Copy the connection string.
+</Steps>
 
 With the connection string, you can now create a Hyperdrive database configuration.
 

src/content/partials/hyperdrive/create-hyperdrive-config.mdx

@@ -2,7 +2,7 @@
 {}
 ---
 
-import { WranglerConfig, Render } from "~/components";
+import { WranglerConfig, Render, Tabs, TabItem, Steps } from "~/components";
 
 To configure Hyperdrive, you will need:
 
@@ -19,35 +19,56 @@ postgres://USERNAME:PASSWORD@HOSTNAME_OR_IP_ADDRESS:PORT/database_name
 
 Most database providers will provide a connection string you can directly copy-and-paste directly into Hyperdrive.
 
-To create a Hyperdrive configuration with the [Wrangler CLI](/workers/wrangler/install-and-update/), open your terminal and run the following command. Replace \<NAME_OF_HYPERDRIVE_CONFIG> with a name for your Hyperdrive configuration and paste the connection string provided from your database host, or replace `user`, `password`, `HOSTNAME_OR_IP_ADDRESS`, `port`, and `database_name` placeholders with those specific to your database:
+<Tabs>
 
-```sh
-npx wrangler hyperdrive create <NAME_OF_HYPERDRIVE_CONFIG> --connection-string="postgres://user:password@HOSTNAME_OR_IP_ADDRESS:PORT/database_name"
-```
+<TabItem label="Dashboard">
 
-:::note
+To create a Hyperdrive configuration with the Cloudflare dashboard:
 
-Hyperdrive will attempt to connect to your database with the provided credentials to verify they are correct before creating a configuration. If you encounter an error when attempting to connect, refer to Hyperdrive's [troubleshooting documentation](/hyperdrive/observability/troubleshooting/) to debug possible causes.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login).
+2. Go to **Storage & Databases** > **Hyperdrive**.
+3. Select **Create Configuration**.
+4. Fill out the form, including the connection string.
+5. Select **Create**.
+</Steps>
 
-:::
+</TabItem>
+<TabItem label="Wrangler CLI">
 
-This command outputs a binding for the [Wrangler configuration file](/workers/wrangler/configuration/):
+To create a Hyperdrive configuration with the [Wrangler CLI](/workers/wrangler/install-and-update/):
+<Steps>
+1. Open your terminal and run the following command. Replace `<NAME_OF_HYPERDRIVE_CONFIG>` with a name for your Hyperdrive configuration and paste the connection string provided from your database host, or replace `user`, `password`, `HOSTNAME_OR_IP_ADDRESS`, `port`, and `database_name` placeholders with those specific to your database:
 
-<WranglerConfig>
+	```sh
+	npx wrangler hyperdrive create <NAME_OF_HYPERDRIVE_CONFIG> --connection-string="postgres://user:password@HOSTNAME_OR_IP_ADDRESS:PORT/database_name"
+	```
 
-```toml
-name = "hyperdrive-example"
-main = "src/index.ts"
-compatibility_date = "2024-08-21"
-compatibility_flags = ["nodejs_compat"]
+2. This command outputs a binding for the [Wrangler configuration file](/workers/wrangler/configuration/):
 
-# Pasted from the output of `wrangler hyperdrive create <NAME_OF_HYPERDRIVE_CONFIG> --connection-string=[...]` above.
-[[hyperdrive]]
-binding = "HYPERDRIVE"
-id = "<ID OF THE CREATED HYPERDRIVE CONFIGURATION>"
-```
+	<WranglerConfig>
+
+	```toml
+	name = "hyperdrive-example"
+	main = "src/index.ts"
+	compatibility_date = "2024-08-21"
+	compatibility_flags = ["nodejs_compat"]
 
-</WranglerConfig>
+	# Pasted from the output of `wrangler hyperdrive create <NAME_OF_HYPERDRIVE_CONFIG> --connection-string=[...]` above.
+	[[hyperdrive]]
+	binding = "HYPERDRIVE"
+	id = "<ID OF THE CREATED HYPERDRIVE CONFIGURATION>"
+	```
+
+	</WranglerConfig>
+</Steps>
+</TabItem>
+
+</Tabs>
+
+:::note
+Hyperdrive will attempt to connect to your database with the provided credentials to verify they are correct before creating a configuration. If you encounter an error when attempting to connect, refer to Hyperdrive's [troubleshooting documentation](/hyperdrive/observability/troubleshooting/) to debug possible causes.
+:::
 
 ## 3. Use Hyperdrive from your Worker