k6 Studio documentation (#1778)

* Add k6 studio docs folder

* Add basic structure to Get started tutorial

* Update Google Chrome URL

* Fill out Create a test recording for get started guide

* Add content to Components index page

* Add content to Test Recorder page

* Update test recorder action buttons section

* Split publishing workflows (#1781)

* Split publishing workflows

Signed-off-by: Jack Baldry <[email protected]>

* Move k6 docs to subdirectory

Signed-off-by: Jack Baldry <[email protected]>

* Update script example

Signed-off-by: Jack Baldry <[email protected]>

* Add k6-studio to Makefile

Signed-off-by: Jack Baldry <[email protected]>

* Fix doc-validator for k6

Signed-off-by: Jack Baldry <[email protected]>

* Use awk not grep

Signed-off-by: Jack Baldry <[email protected]>

---------

Signed-off-by: Jack Baldry <[email protected]>

* Add Test Generator draft

* Add Test Validator structure

* Add Test Generator screenshot

* Add Test Validator draft

* Remove k6 studio content

---------

Signed-off-by: Jack Baldry <[email protected]>
Co-authored-by: Jack Baldry <[email protected]>

.github/workflows/doc-validator.yml

@@ -1,7 +1,7 @@
 name: Validate documentation
 on:
   pull_request:
-    paths: ["docs/sources/**"]
+    paths: ["docs/sources/k6/**"]
   workflow_dispatch:
 jobs:
   doc-validator:
@@ -15,9 +15,9 @@ jobs:
         run: >
           doc-validator
           '--skip-checks=^image.+$'
-          docs/sources
+          docs/sources/k6
           /docs/k6
-          | grep -v "The 'description' parameter in the front matter must be present."
+          | awk '!/"The '"'"'description'"'"' parameter in the front matter must be present."/'
           | reviewdog
           -f=rdjsonl
           --fail-on-error

.github/workflows/publish-technical-documentation-k6-studio.yml

@@ -0,0 +1,22 @@
+name: publish-technical-documentation-k6-studio
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "docs/sources/k6-studio/**"
+  workflow_dispatch:
+jobs:
+  sync:
+    if: github.repository == 'grafana/k6-docs'
+    permissions:
+      contents: read
+      id-token: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: grafana/writers-toolkit/publish-technical-documentation@publish-technical-documentation/v1
+        with:
+          source_directory: docs/sources/k6-studio
+          website_directory: content/docs/k6-studio

.github/workflows/publish-technical-documentation.yml → .github/workflows/publish-technical-documentation-k6.yml

@@ -1,11 +1,11 @@
-name: publish-technical-documentation
+name: publish-technical-documentation-k6
 
 on:
   push:
     branches:
       - main
     paths:
-      - "docs/sources/**"
+      - "docs/sources/k6/**"
   workflow_dispatch:
 jobs:
   sync:
@@ -18,4 +18,5 @@ jobs:
       - uses: actions/checkout@v4
       - uses: grafana/writers-toolkit/publish-technical-documentation@publish-technical-documentation/v1
         with:
+          source_directory: docs/sources/k6
           website_directory: content/docs/k6

docs/sources/k6-studio/_index.md

@@ -0,0 +1,46 @@
+---
+weight: 950
+title: k6 Studio
+hero:
+  title: Grafana k6 Studio
+  level: 1
+  image: /media/docs/k6/GrafanaLogo_k6Studio_orange.svg
+  width: 100
+  height: 100
+  description: Grafana k6 Studio is an open-source desktop application for Mac and Windows designed to help you generate k6 test scripts.
+cards:
+  title_class: pt-0 lh-1
+  items:
+    - title: Introduction
+      href: ./introduction/
+      description: An overview of k6 Studio and its components.
+      height: 24
+    - title: Installation
+      href: ./installation/
+      description: Learn how to install k6 Studio.
+      height: 24
+---
+
+{{< docs/hero-simple key="hero" >}}
+
+---
+
+## Overview
+
+{{< admonition type="note" >}}
+
+k6 Studio is in the [experimental stage](https://grafana.com/docs/release-life-cycle/). For bug reports or feedback, open an issue in the [k6 Studio GitHub repository](https://github.com/grafana/k6-studio/issues).
+
+{{< /admonition >}}
+
+k6 Studio is a desktop application that can help you:
+
+- Record a user flow from browser interactions and generate a HAR file.
+- Generate and customize a k6 test script from a HAR file, including the ability to use rules to quickly iterate on the script creation process.
+- Test and debug k6 scripts using a visual interface. Inspect the request and response details for any request in your script.
+
+Visit the [k6 Studio GitHub repository](https://github.com/grafana/k6-studio/) for more information and to download the application.
+
+## Explore
+
+{{< card-grid key="cards" type="simple" >}}

docs/sources/k6-studio/installation.md

@@ -0,0 +1,29 @@
+---
+title: 'Installation'
+description: 'Learn how to download and install k6 Studio'
+weight: 200
+---
+
+# Installation
+
+You can install k6 Studio on Windows and macOS.
+
+## Before you begin
+
+- Install [Google Chrome](https://www.google.com/chrome/) on your computer.
+
+## Install k6 Studio
+
+To install k6 Studio:
+
+- Go to the [Releases page](https://github.com/grafana/k6-studio/releases) in the k6 Studio GitHub repository.
+- Download the executable file for your system.
+  - **For Windows**: Click on **k6.Studio-{VERSION}-Setup.exe**.
+  - **For macOS**: Click on **k6.Studio-{VERSION}-arm64.dmg**.
+- After the download finishes, open the executable file.
+
+{{< admonition type="note" >}}
+
+For macOS users, make sure that you install k6 Studio in your Applications folder. If you install it in your Downloads folder, the application won't work correctly.
+
+{{< /admonition >}}

docs/sources/k6-studio/introduction.md

@@ -0,0 +1,23 @@
+---
+title: 'Introduction'
+description: 'Understand the basic concepts of k6 Studio, how it works, and how to get started.'
+weight: 100
+---
+
+# Introduction
+
+k6 Studio is a free desktop application designed to help you create k6 tests scripts using a visual interface.
+
+![k6 Studio homepage](/media/docs/k6-studio/screenshot-k6-studio-homepage.png)
+
+[Grafana k6](https://grafana.com/docs/k6/latest/) is an open source performance testing tool that allows you to run JavaScript scripts to test your applications. One of the biggest challenges users face when they're getting started with k6 is generating test scripts from scratch, especially when working with applications that you might not have easy access to the source code or documentation.
+
+For users that have less experience with JavaScript or k6, k6 Studio can help you record a script from a browser session and allow you to quickly get started running test scripts to test your application. For developers who are already familiar with k6, k6 Studio can optimize the time it takes to create a new script, and give you tools to validate and debug your scripts outside of the CLI.
+
+The k6 Studio desktop application consists of three components:
+
+- **Test Recorder**: The Test Recorder can help you generate test scripts. When you start a recording, the application uses a proxy recorder and launches an instance of Chrome, and records the traffic from your actions on the browser.
+- **Test Generator**: The Test Generator takes the output of a test recording and gives you options to customize the test with a visual interface and generate a test script from it. You can use it to define a list of hosts to allow or remove from your script, include variables in your script, and configure rules to extract values, parameterize requests, and more.
+- **Test Validator**: The Test Validator can help you validate that a test script is working as expected. You can use it to run one iteration of your test, and visualize the request and response of any requests on your test script. The Test Validator works with any k6 test script, not only scripts generated via the Test Generator.
+
+After you create a test script using the Test Generator, you can use that same script to run a load test using the k6 CLI or in Grafana Cloud k6, and start getting more information about well your systems or applications are performing.

docs/sources/_index.md → docs/sources/k6/_index.md

@@ -3,7 +3,7 @@ title: Grafana k6 documentation
 menuTitle: Grafana k6
 description: The k6 documentation covers everything you need to know about k6 OSS, load testing, and performance testing.
 type: redirect
-redirectURL: /docs/k6/latest/ # needed for local dev only
+redirectURL: /docs/k6/next/ # needed for local dev only
 weight: 1
 layout: project
 cms_docs: true