docs(landing pages): edit components based on user behavior (#3660)

kubeshop · Feb 19, 2024 · 883ee4d · 883ee4d
1 parent 909841d
commit 883ee4d
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 91 deletions.
diff --git a/docs/docs/examples-tutorials/overview.mdx b/docs/docs/examples-tutorials/overview.mdx
@@ -13,8 +13,6 @@ image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_T
 breadcrumb_label: Nothing
 ---
 
-import CodeBlock from '@theme/CodeBlock';
-
 Find tutorials and guides to help you get started with Tracetest.
 
 ```mdx-code-block

diff --git a/docs/docs/getting-started/installation.mdx b/docs/docs/getting-started/installation.mdx
@@ -24,24 +24,20 @@ This page showcases getting started with [Tracetest](https://app.tracetest.io/)
 
 ## Install the Tracetest Agent
 
-[Tracetest Agent](../concepts/agent) runs as a standalone process. It runs either locally on your machine or as a container. Once started, Tracetest Agent exposes OTLP ports `4317` (gRPC) and `4318` (HTTP) for trace ingestion. It executes tests in the environment where it is running and returns the response from triggered tests.
+[Tracetest Agent](/concepts/agent) runs as a standalone process. It runs either locally on your machine or as a container. Once started, Tracetest Agent exposes OTLP ports `4317` (gRPC) and `4318` (HTTP) for trace ingestion. It executes tests in the environment where it is running and returns the response from triggered tests.
+
+[Sign in to Tracetest](https://app.tracetest.io/), and get your [Tracetest Agent API Key](/configuration/agent).
 
 <Tabs groupId="installation">
-  <TabItem value="cli" label="Tracetest CLI" default>
+<TabItem value="cli" label="Tracetest CLI" default>
 
 <CodeBlock
   language="text"
   title="Terminal"
 >
-tracetest start
+{`tracetest start --api-key <your_api_key>`}
 </CodeBlock>
 
-The Agent will start and open a browser. Sign in to Tracetest.
-
-![](https://res.cloudinary.com/djwdcmwdz/image/upload/v1695990166/docs/screely-1695990151905_eb8yiw.png)
-
-Once signed in, return to the terminal.
-
 <CodeBlock
   language="text"
   title="Expected output:"
@@ -61,8 +57,8 @@ gRPC: `http://localhost:4317`
 
 HTTP: `http://localhost:4318/v1/traces`
 
-  </TabItem>
-  <TabItem value="docker" label="Docker" default>
+</TabItem>
+<TabItem value="docker" label="Docker" default>
 
 <CodeBlock
     language="text"
@@ -71,12 +67,6 @@ HTTP: `http://localhost:4318/v1/traces`
 {`docker run \\\n-p 4317:4317 \\\n-p 4318:4318 \\\n-e TRACETEST_API_KEY="<your_api_key>" \\\nkubeshop/tracetest-agent`}
 </CodeBlock>
 
-The Agent will start and open a browser. Sign in to Tracetest.
-
-![](https://res.cloudinary.com/djwdcmwdz/image/upload/v1695990166/docs/screely-1695990151905_eb8yiw.png)
-
-Once signed in, return to the terminal.
-
 <CodeBlock
   language="text"
   title="Expected output:"
@@ -110,8 +100,8 @@ You can reach services running on your local machine using:
 - MacOS (docker version >= 18.03) and Linux (docker version >= 20.10.0): `host.docker.internal:8080`
 :::
 
-  </TabItem>
-  <TabItem value="kubernetes" label="Kubernetes" default>
+</TabItem>
+<TabItem value="kubernetes" label="Kubernetes" default>
 
 <CodeBlock
     language="text"
@@ -120,12 +110,6 @@ You can reach services running on your local machine using:
 {`curl https://raw.githubusercontent.com/kubeshop/tracetest/main/k8s/agent/deploy-agent.sh | bash -s -- default <your_api_key>`}
 </CodeBlock>
 
-The Agent will start and open a browser. Sign in to Tracetest.
-
-![](https://res.cloudinary.com/djwdcmwdz/image/upload/v1695990166/docs/screely-1695990151905_eb8yiw.png)
-
-Once signed in, return to the terminal.
-
 <CodeBlock
   language="text"
   title="Expected output:"
@@ -159,7 +143,7 @@ You can reach services running on your local machine using:
 - MacOS (docker version >= 18.03) and Linux (docker version >= 20.10.0): `host.docker.internal:8080`
 :::
 
-  </TabItem>
+</TabItem>
 </Tabs>
 
 :::tip Don't have OpenTelemetry installed?

diff --git a/docs/docs/getting-started/open.mdx b/docs/docs/getting-started/open.mdx
@@ -11,7 +11,7 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
-This page showcases opening the Tracetest Web UI and creating a test against the [sample Pokeshop API](/live-examples/pokeshop/overview).
+This page showcases opening the Tracetest Web UI and creating a test against the [microservice sample Pokeshop API](/live-examples/pokeshop/overview).
 
 Once you've installed Tracetest, as explained in the [installation guide](./installation.mdx), the Tracetest Agent is running on `localhost` ports `4317` and `4318`. You then access the Tracetest Web UI on [`app.tracetest.io`](https://app.tracetest.io). Here's what will greet you after a fresh install.
 
@@ -79,7 +79,7 @@ In the Web UI go to **Settings > Demo**, toggle **Enable Pokeshop**, and add:
 
 ![Settings](https://res.cloudinary.com/djwdcmwdz/image/upload/v1696251763/docs/screely-1696251756346_ptxb9m.png)
 
-With the CLI, create a file called `tracetest-provision.yaml`.
+Create a file called `tracetest-provision.yaml`.
 
 ```yaml title=tracetest-provision.yaml
 ---
@@ -93,7 +93,7 @@ spec:
     grpcEndpoint: localhost:8082
 ```
 
-Run the command below to enable the `demo` resource.
+With the CLI, run the command below to enable the `demo` resource.
 
 ```bash
 tracetest apply demo -f tracetest-provision.yaml

diff --git a/docs/docs/getting-started/overview.mdx b/docs/docs/getting-started/overview.mdx
@@ -16,14 +16,29 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
-Tracetest is a cloud-native application, packaged and distributed as a Docker image and designed to run in a containerized environment.
+```mdx-code-block
+import {TracetestGettingStartedGuideCardsRow, TracetestCoreGettingStartedGuideCardsRow} from '@site/src/components/GettingStartedGuide';
+```
+
+Tracetest is a cloud-native application, designed to run in the cloud. Get started with Tracetest in two ways:
+
+- [Tracetest managed platform](https://app.tracetest.io/) and use managed infrastructure with collaboration for teams.
+- Deploy [Tracetest Core](/core/getting-started/overview) to your own infrastructure with Docker or Kubernetes.
+
+## Getting Started with Tracetest Managed Platform
 
-We recommend using our managed platform for [Tracetest](https://app.tracetest.io/), because it's the easiest way to build and test with OpenTelemetry. Tracetest includes features such as collaboration for teams and comes with a free tier for development.
+**We recommend using our managed platform for [Tracetest](https://app.tracetest.io/)**. It's the easiest way to test microservices and distributed apps with OpenTelemetry distributed traces. Tracetest provides managed infrastructure, [collaboration for teams](/concepts/environments), [RBAC](/concepts/roles-and-permissions), [organizations](/concepts/organizations), [dependency-free config](/concepts/agent), [agentless serverless config](/concepts/cloud-agent), and much more.
 
-Alternatively, you can run Tracetest Core on your own infrastructure with Docker or Kubernetes.
+Get started with the installation guide below, tailored for microservice and distributed app developers. You may find it insightful even if you have [one of many other supported use cases](/examples-tutorials/recipes).
 
 ```mdx-code-block
-import {GettingStartedGuideCardsRow} from '@site/src/components/GettingStartedGuide';
+<TracetestGettingStartedGuideCardsRow />
+```
+
+## Getting Started with Tracetest Core
 
-<GettingStartedGuideCardsRow />
+Tracetest Core is a cloud-native application, packaged and distributed as a Docker image and designed to run in a containerized environment.
+
+```mdx-code-block
+<TracetestCoreGettingStartedGuideCardsRow />
 ```
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -119,7 +119,7 @@ const config = {
         // content:
         //   '<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/live/2MSDy3XHjtE?si=VlK7cxJOsgKi5QTE&t=1132">Tracetest is the official testing harness for the OpenTelemetry Demo! 🚀</a>',
         content:
-          '<a target="_blank" rel="noopener noreferrer" href="https://tracetest.io/blog/opentelemetry-is-not-just-for-monitoring-and-troubleshooting-any-longer-announcing-tracetest-open-beta">Tracetest Open Beta is Live. Try it! Give us feedback! 🙌</a>',
+          '<a target="_blank" rel="noopener noreferrer" href="https://tracetest.io/pricing">Tracetest Open Beta is Live. Try it! Give us feedback! 🙌</a>',
         isCloseable: false,
       },  
       navbar: {
@@ -194,7 +194,7 @@ const config = {
           {
             type: "html",
             position: "left",
-            value: `<iframe src="https://ghbtns.com/github-btn.html?user=kubeshop&repo=tracetest&type=star&count=true&size=medium" style='margin-top: 6px' frameborder="0" scrolling="0" width="90" height="20" title="GitHub"></iframe>`,
+            value: `<iframe src="https://ghbtns.com/github-btn.html?user=kubeshop&repo=tracetest&type=star&count=true&size=medium" style='margin-top: 8px' frameborder="0" scrolling="0" width="120" height="20" title="GitHub"></iframe>`,
           },
           {
             type: "search",

diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -113,11 +113,6 @@ const sidebars = {
       id: "examples-tutorials/overview",
       label: "Overview",
     },
-    {
-      type: "doc",
-      id: "examples-tutorials/tutorials",
-      label: "Tutorials",
-    },
     {
       type: "category",
       link: {
@@ -325,31 +320,6 @@ const sidebars = {
         },
       ],
     },
-    {
-      type: "category",
-      label: "CI/CD Automation",
-      link: {
-        type: "doc",
-        id: "ci-cd-automation/overview",
-      },
-      items: [
-        {
-          type: "doc",
-          id: "ci-cd-automation/github-actions-pipeline",
-          label: "GitHub Actions Pipeline",
-        },
-        {
-          type: "doc",
-          id: "ci-cd-automation/testkube-pipeline",
-          label: "Testkube Kubernetes-native Test Runner Pipeline",
-        },
-        {
-          type: "doc",
-          id: "ci-cd-automation/tekton-pipeline",
-          label: "Tekton Cloud-native Pipeline",
-        },
-      ],
-    },
     {
       type: "category",
       label: "Tools & Integrations",
@@ -395,15 +365,45 @@ const sidebars = {
         },
       ],
     },
+    {
+      type: "category",
+      label: "CI/CD Automation",
+      link: {
+        type: "doc",
+        id: "ci-cd-automation/overview",
+      },
+      items: [
+        {
+          type: "doc",
+          id: "ci-cd-automation/github-actions-pipeline",
+          label: "GitHub Actions Pipeline",
+        },
+        {
+          type: "doc",
+          id: "ci-cd-automation/testkube-pipeline",
+          label: "Testkube Kubernetes-native Test Runner Pipeline",
+        },
+        {
+          type: "doc",
+          id: "ci-cd-automation/tekton-pipeline",
+          label: "Tekton Cloud-native Pipeline",
+        },
+      ],
+    },
+    {
+      type: "doc",
+      id: "examples-tutorials/videos",
+      label: "Videos & Recordings",
+    },
     {
       type: "doc",
       id: "examples-tutorials/webinars",
       label: "Webinars",
     },
     {
       type: "doc",
-      id: "examples-tutorials/videos",
-      label: "Videos",
+      id: "examples-tutorials/tutorials",
+      label: "Blog Post Tutorials",
     },
   ],
 

diff --git a/docs/src/components/ExamplesTutorialsOverview/index.tsx b/docs/src/components/ExamplesTutorialsOverview/index.tsx
@@ -8,24 +8,24 @@ import Heading from '@theme/Heading';
 
 const ExamplesTutorialsOverview = [
   {
-    name: '👨‍💻 Tutorials',
-    url: '/examples-tutorials/tutorials',
+    name: '🍱 Recipes',
+    url: '/examples-tutorials/recipes',
     description: (
-      <Translate >
-        Check out the following blog posts with Tracetest-related content.
+      <Translate>
+        Self-contained guides to popular use cases.
       </Translate>
     ),
-    button: 'Learn more',
+    button: 'Start building',
   },
   {
-    name: '🍱 Recipes',
-    url: '/examples-tutorials/recipes',
+    name: '🛠️ Tools & Integrations',
+    url: '/tools-and-integrations/overview',
     description: (
       <Translate>
-        Short, self-contained, and runnable solutions to popular use cases.
+        Tools and integrations examples with Tracetest.
       </Translate>
     ),
-    button: 'Start building',
+    button: 'Integrate',
   },
   {
     name: '⚙️ CI/CD Automation',
@@ -38,14 +38,14 @@ const ExamplesTutorialsOverview = [
     button: 'Automate',
   },
   {
-    name: '🛠️ Tools & Integrations',
-    url: '/tools-and-integrations/overview',
+    name: '📽️ Videos & Recordings',
+    url: '/examples-tutorials/videos',
     description: (
       <Translate>
-        Check out tools and integrations with Tracetest.
+        Tracetest video guides and conference talks!
       </Translate>
     ),
-    button: 'Integrate',
+    button: 'Watch now',
   },
   {
     name: '🎙️ Webinars',
@@ -58,14 +58,14 @@ const ExamplesTutorialsOverview = [
     button: 'Watch now',
   },
   {
-    name: '📽️ Videos',
-    url: '/examples-tutorials/videos',
+    name: '👨‍💻 Blog Post Tutorials',
+    url: '/examples-tutorials/tutorials',
     description: (
-      <Translate>
-        Check out Tracetest video guides and conference talks!
+      <Translate >
+        Check out the following blog posts with Tracetest-related content.
       </Translate>
     ),
-    button: 'Watch now',
+    button: 'Learn more',
   },
 ];
 

diff --git a/docs/src/components/GettingStartedGuide/index.tsx b/docs/src/components/GettingStartedGuide/index.tsx
@@ -5,7 +5,7 @@ import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
 import Heading from '@theme/Heading';
 
-const GettingStartedGuides = [
+const TracetestGettingStartedGuides = [
   {
     name: 'Tracetest 🚀',
     url: '/getting-started/installation',
@@ -16,6 +16,9 @@ const GettingStartedGuides = [
     ),
     button: 'Start',
   },
+];
+
+const TracetestCoreGettingStartedGuides = [
   {
     name: 'Tracetest Core 🪨 ',
     url: '/core/getting-started/installation',
@@ -52,10 +55,20 @@ function GettingStartedGuideCard({name, url, description, button}: Props) {
   );
 }
 
-export function GettingStartedGuideCardsRow(): JSX.Element {
+export function TracetestGettingStartedGuideCardsRow(): JSX.Element {
+  return (
+    <div className="row">
+      {TracetestGettingStartedGuides.map((gettingStartedGuide) => (
+        <GettingStartedGuideCard key={gettingStartedGuide.name} {...gettingStartedGuide} />
+      ))}
+    </div>
+  );
+}
+
+export function TracetestCoreGettingStartedGuideCardsRow(): JSX.Element {
   return (
     <div className="row">
-      {GettingStartedGuides.map((gettingStartedGuide) => (
+      {TracetestCoreGettingStartedGuides.map((gettingStartedGuide) => (
         <GettingStartedGuideCard key={gettingStartedGuide.name} {...gettingStartedGuide} />
       ))}
     </div>