[Workers] Add documentation for cf-tutor tool (#17627)

* Add documentation for cf-tutor tool

* Add beta tag

* Add beta tag.

* Fix links to cf-tutor docs

* Fix links

* Update download from browser steps

* Add full stop

* Fix beta tag

* Update src/content/docs/workers/get-started/cf-tutor.mdx

Co-authored-by: Jun Lee <[email protected]>

* Update src/content/docs/workers/get-started/cf-tutor.mdx

Co-authored-by: Jun Lee <[email protected]>

* Update src/content/partials/workers/cf-tutor.mdx

Co-authored-by: Jun Lee <[email protected]>

* Update src/content/partials/workers/cf-tutor.mdx

Co-authored-by: Jun Lee <[email protected]>

---------

Co-authored-by: Jun Lee <[email protected]>

Author: db-cloudflare

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

@@ -533,4 +533,5 @@ If you have any feature requests or notice any bugs, share your feedback directl
 
 - See supported [Wrangler commands for D1](/workers/wrangler/commands/#d1).
 - Learn how to use the [D1 client API](/d1/build-with-d1/d1-client-api/) within your Worker.
+- Learn the basics of using Workers with D1 and CLI development in a guided learning experience with [Cloudflare CLI tutor](/workers/get-started/cf-tutor/).
 - Explore [community projects built on D1](/d1/reference/community-projects/).

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

@@ -6,14 +6,20 @@ sidebar:
 head:
   - tag: title
     content: Get started guide
-
 ---
 
-import { Render } from "~/components"
+import { Render } from "~/components";
 
 Cloudflare R2 Storage allows developers to store large amounts of unstructured data without the costly egress bandwidth fees associated with typical cloud storage services.
 
-<div style="position: relative; padding-top: 56.25%;"><iframe src="https://customer-6qw1mjlclhl2mqdy.cloudflarestream.com/c247ba8eb4b61355184867bec9e5c532/iframe?poster=https%3A%2F%2Fcustomer-6qw1mjlclhl2mqdy.cloudflarestream.com%2Fc247ba8eb4b61355184867bec9e5c532%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>
+<div style="position: relative; padding-top: 56.25%;">
+	<iframe
+		src="https://customer-6qw1mjlclhl2mqdy.cloudflarestream.com/c247ba8eb4b61355184867bec9e5c532/iframe?poster=https%3A%2F%2Fcustomer-6qw1mjlclhl2mqdy.cloudflarestream.com%2Fc247ba8eb4b61355184867bec9e5c532%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
+		style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
+		allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+		allowfullscreen="true"
+	></iframe>
+</div>
 
 ## 1. Install and authenticate Wrangler
 
@@ -51,6 +57,10 @@ You will receive a confirmation message after a successful upload.
 
 Cloudflare provides multiple ways for developers to access their R2 buckets:
 
-* [Workers Runtime API](/r2/api/workers/workers-api-usage/)
-* [S3 API compatibility](/r2/api/s3/api/)
-* [Public buckets](/r2/buckets/public-buckets/)
+- [Workers Runtime API](/r2/api/workers/workers-api-usage/)
+- [S3 API compatibility](/r2/api/s3/api/)
+- [Public buckets](/r2/buckets/public-buckets/)
+
+## Related resources
+
+- [Cloudflare CLI tutor](/workers/get-started/cf-tutor/) - Learn the basics of using Workers with R2 and CLI development in a guided learning experience.

src/content/docs/workers-ai/get-started/workers-wrangler.mdx

@@ -135,3 +135,4 @@ By finishing this tutorial, you have created a Worker, connected it to Workers A
 
 - [Cloudflare Developers community on Discord](https://discord.cloudflare.com) - Submit feature requests, report bugs, and share your feedback directly with the Cloudflare team by joining the Cloudflare Discord server.
 - [Models](/workers-ai/models/) - Browse the Workers AI models catalog.
+- [Cloudflare CLI tutor](/workers/get-started/cf-tutor/) - Learn the basics of Workers AI and CLI development in a guided learning experience.

src/content/docs/workers/get-started/cf-tutor.mdx

@@ -0,0 +1,33 @@
+---
+title: CLI guided learning
+pcx_content_type: get-started
+sidebar:
+  order: 2
+  badge:
+    text: Beta
+head:
+  - tag: title
+    content: Get started - CLI guided learning
+---
+
+import { Badge, Render } from "~/components";
+
+Cloudflare CLI tutor, or `cf-tutor`, is a guided learning experience within your terminal. If you are unfamiliar with Workers, or are new to command line interface (CLI) based development, cf-tutor offers an introduction on how to use Workers with other Cloudflare products through your terminal.
+
+`cf-tutor` is currently a beta application in pre-release. To download the application, you can use the `git clone` in your terminal, or download the application from the releases page on the project repo.
+
+## Prerequisites
+
+<Render file="prereqs" product="workers" />
+
+## How to run
+
+<Render file="cf-tutor" product="workers" />
+
+## Next steps
+
+To do more:
+
+- Visit the [Cloudflare dashboard](https://dash.cloudflare.com/) for simpler editing.
+- Learn how to [test and debug](/workers/testing/) your Workers.
+- Read about [Workers limits and pricing](/workers/platform/).

src/content/docs/workers/get-started/guide.mdx

@@ -48,11 +48,11 @@ cd my-first-worker
 
 In your project directory, C3 will have generated the following:
 
-* `wrangler.toml`: Your [Wrangler](/workers/wrangler/configuration/#sample-wranglertoml-configuration) configuration file.
-* `index.js` (in `/src`): A minimal `'Hello World!'` Worker written in [ES module](/workers/reference/migrate-to-module-workers/) syntax.
-* `package.json`: A minimal Node dependencies configuration file.
-* `package-lock.json`: Refer to [`npm` documentation on `package-lock.json`](https://docs.npmjs.com/cli/v9/configuring-npm/package-lock-json).
-* `node_modules`: Refer to [`npm` documentation `node_modules`](https://docs.npmjs.com/cli/v7/configuring-npm/folders#node-modules).
+- `wrangler.toml`: Your [Wrangler](/workers/wrangler/configuration/#sample-wranglertoml-configuration) configuration file.
+- `index.js` (in `/src`): A minimal `'Hello World!'` Worker written in [ES module](/workers/reference/migrate-to-module-workers/) syntax.
+- `package.json`: A minimal Node dependencies configuration file.
+- `package-lock.json`: Refer to [`npm` documentation on `package-lock.json`](https://docs.npmjs.com/cli/v9/configuring-npm/package-lock-json).
+- `node_modules`: Refer to [`npm` documentation `node_modules`](https://docs.npmjs.com/cli/v7/configuring-npm/folders#node-modules).
 
 </Details>
 
@@ -191,7 +191,7 @@ Preview your Worker at `<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev`.
 
 <Details header="Seeing 523 errors?">
 
-If you see [`523` errors](/support/troubleshooting/cloudflare-errors/troubleshooting-cloudflare-5xx-errors/#error-523-origin-is-unreachable) when pushing your  `*.workers.dev` subdomain for the first time, wait a minute or so and the errors will resolve themselves.
+If you see [`523` errors](/support/troubleshooting/cloudflare-errors/troubleshooting-cloudflare-5xx-errors/#error-523-origin-is-unreachable) when pushing your `*.workers.dev` subdomain for the first time, wait a minute or so and the errors will resolve themselves.
 
 </Details>
 
@@ -201,6 +201,7 @@ To do more:
 
 - Visit the [Cloudflare dashboard](https://dash.cloudflare.com/) for simpler editing.
 - Review our [Examples](/workers/examples/) and [Tutorials](/workers/tutorials/) for inspiration.
+- Learn the basics of developing Cloudflare applications through a CLI with our [Cloudflare CLI tutor tool](/workers/get-started/cf-tutor/).
 - Set up [bindings](/workers/runtime-apis/bindings/) to allow your Worker to interact with other resources and unlock new functionality.
 - Learn how to [test and debug](/workers/testing/) your Workers.
 - Read about [Workers limits and pricing](/workers/platform/).

src/content/partials/workers/cf-tutor.mdx

@@ -0,0 +1,41 @@
+---
+{}
+---
+
+import { TabItem, Tabs } from "~/components";
+
+<Tabs>
+
+<TabItem label="Git clone HTTPS">
+
+1. Open a terminal window.
+2. In your terminal, navigate to the folder you wish to install cf-tutor. You can change directory by using the `cd` command followed by the folder path. You can either enter the full path such as `cd Documents/Projects/ ` or you can use `cd` multiple times to go folder by folder. To see the files and folders in the directory you are currently in, run `ls`.
+3. Run the command `git clone https://github.com/db-cloudflare/cf-tutor.git` to download cf-tutor.
+4. Run the command `cd cf-tutor` to enter the application folder.
+5. Run the command `npm i` to install all dependendant packages.
+6. Once the dependencies have installed, run `npm start ` to run the application
+
+</TabItem>
+
+<TabItem label="Git clone SSH">
+
+The following steps require an SSH key. Vist [GitHub documentation on Connecting with SSH to learn more](https://docs.github.com/en/authentication/connecting-to-github-with-ssh)
+
+1. Open a terminal window.
+2. In your terminal, navigate to the folder you wish to install cf-tutor. You can change directory by using the `cd` command followed by the folder path. You can either enter the full path such as `cd Documents/Projects/ ` or you can use `cd` multiple times to go folder by folder. To see the files and folders in the directory you are currently in, run `ls`.
+3. Run the command `git clone [email protected]:db-cloudflare/cf-tutor.git` and enter your SSH key to download cf-tutor.
+4. Run the command `cd cf-tutor` to enter the application folder.
+5. Run the command `npm i` to install all dependendant packages.
+6. Once the dependencies have installed, run `npm start ` to run the application
+
+</TabItem>
+
+<TabItem label="Download from browser">
+
+1. Open [cf-tutor releases](https://github.com/db-cloudflare/cf-tutor/releases).
+2. Download the cf-tutor.zip file and extract the folder inside it into your desired location.
+3. In your terminal, navigate to the cf-tutor folder. You can change directory by using the `cd` command followed by the folder path. You can either enter the full path such as `cd Documents/Projects/cf-tutor` or you can use `cd` multiple times to go folder by folder. To see the files and folders in the directory you are currently in, run `ls`.
+4. Run the command `npm i` to install all dependendant packages.
+5. Once the dependencies have installed, run `npm start ` to run the application.
+
+</TabItem> </Tabs>