docs(saas): improve onboarding; add agent; add signin; add dark theme (…

…#3230) * docs(improvements): nav bar + color theme * docs(color): fix dark theme * docs(nav): add support dropdown * docs(typo): fix * docs(config): added agent
kubeshop · Oct 9, 2023 · 0d9a86f · 0d9a86f
1 parent 3ff92f1
commit 0d9a86f
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 24 deletions.
diff --git a/docs/docs/configuration/agent.mdx b/docs/docs/configuration/agent.mdx
@@ -0,0 +1,20 @@
+---
+id: agent
+title: Configuring the Tracetest Agent
+description: Tracetest allows you to quickly build integration and end-to-end tests, powered by your OpenTelemetry traces.
+keywords:
+  - tracetest
+  - trace-based testing
+  - observability
+  - distributed tracing
+  - testing
+image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1689693872/docs/Blog_Thumbnail_28_ugy2yy.png
+---
+
+Tracetest Agent is a lightweight, dependency-free, agent that runs locally in your development environment, or as a Docker container in your Cloud Native infrastructure.
+
+Once started, Tracetest Agent exposes OTLP ports `4317` and `4318` to ingest traces via gRCP and HTTP. Tracetest Agent connects to Tracetest via an API Key. 
+
+Unlike with Tracetest Core, you are not required to run a dedicated Tracetest Server. Running Tracetest Agent and using Tracetest as the remote server requires no configuration or infrastructure management.
+
+[Start Tracetest Agent](../getting-started/installation.mdx) in your environment to get started.
diff --git a/docs/docs/configuration/opentelemetry-collector-configuration-file-reference.md b/docs/docs/configuration/opentelemetry-collector-configuration-file-reference.md
@@ -19,7 +19,7 @@ Currently, Tracetest supports the following data stores. Click on the respective
 - [Grafana Tempo](./connecting-to-data-stores/tempo)
 - [Lightstep](./connecting-to-data-stores/lightstep)
 - [New Relic](./connecting-to-data-stores/new-relic)
-- [AWS X-Ray](./connecting-to-data-stores/awsxray.md)3
+- [AWS X-Ray](./connecting-to-data-stores/awsxray.md)
 - [Datadog](./connecting-to-data-stores/datadog)
 - [Honeycomb](./connecting-to-data-stores/honeycomb.md)
 - [Azure App Insights](./connecting-to-data-stores/azure-app-insights.md)

diff --git a/docs/docs/configuration/overview.md b/docs/docs/configuration/overview.md
@@ -1,9 +1,8 @@
 # Configuration
 
-There are several configuration options with Tracetest:
+There is one configuration option with Tracetest:
 
-- [Server configuration](./server) to set database connection information needed to connect to required PostgreSQL instance.
-- [Provisioning configuration](./provisioning) to 'preload' the Tracetest server with resources when first running the Tracetest server.
+- [Agent configuration](./agent) to run it locally, in Docker, or Kubernetes.
 
 ## Supported Trace Data Stores
 
@@ -38,7 +37,14 @@ Examples of configuring Tracetest to access different data stores can be found i
 
 We will be adding new data stores over the next couple of months - [let us know](https://github.com/kubeshop/tracetest/issues/new/choose) any additional data stores you would like to see us support.
 
-## Configuring the Server
+## Tracetest Core
+
+There are several configuration options with Tracetest Core:
+
+- [Server configuration](./server) to set database connection information needed to connect to required PostgreSQL instance.
+- [Provisioning configuration](./provisioning) to 'preload' the Tracetest server with resources when first running the Tracetest server.
+
+### Configuring Tracetest Server
 
 Tracetest has a configuration file to contain the minimal information needed to start the Tracetest server. See more at [Tracetest Server Configuration](./server).
 

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -240,8 +240,10 @@ const config = {
       // Use this to add an announcement for a webinar or event.
       announcementBar: {
         id: 'announcement',
+        // 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://www.youtube.com/live/2MSDy3XHjtE?si=VlK7cxJOsgKi5QTE&t=1132">Tracetest is the official testing harness for the OpenTelemetry Demo! 🚀</a>',
+          '<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>',
         isCloseable: false,
       },  
       navbar: {
@@ -279,19 +281,55 @@ const config = {
             label: 'Live Examples'
           },
           {
-            href: "https://tracetest.io/community",
-            label: "Community",
-            position: "left",
+            type: 'dropdown',
+            label: 'Support',
+            position: 'left',
+            items: [
+              {
+                label: 'Overview',
+                href: 'https://tracetest.io/support',
+              },
+              {
+                label: 'Community',
+                href: 'https://tracetest.io/community',
+              },
+              {
+                label: 'Pricing',
+                href: 'https://tracetest.io/pricing',
+              },
+              {
+                label: 'Talk to us in Discord',
+                href: 'https://discord.gg/6zupCZFQbe',
+              },
+              {
+                label: 'Open an issue in GitHub',
+                href: 'https://github.com/kubeshop/tracetest/issues/new/choose',
+              },
+              {
+                label: 'Learn',
+                href: 'https://tracetest.io/learn',
+              },
+              {
+                label: 'Contact Us',
+                href: 'https://tracetest.io/contact',
+              },
+            ],
           },
           {
             type: "html",
-            position: "right",
+            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>`,
           },
           {
             type: "search",
             position: "right",
           },
+          {
+            href: "https://app.tracetest.io",
+            label: "Sign In",
+            position: "right",
+            className: "sign-in-button",
+          },
         ],
       },
       footer: {

diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -438,11 +438,6 @@ const sidebars = {
         id: "configuration/overview",
       },
       items: [
-        // {
-        //   type: "doc",
-        //   id: "configuration/config-file-reference",
-        //   label: "Config File Reference",
-        // },
         {
           type: "category",
           label: "Connecting to Data Stores",
@@ -519,6 +514,11 @@ const sidebars = {
             },
           ],
         },
+        {
+          type: "doc",
+          id: "configuration/agent",
+          label: "Tracetest Agent Configuration",
+        },
         {
           type: "doc",
           id: "configuration/server",

diff --git a/docs/src/components/CoreGettingStartedGuide/index.tsx b/docs/src/components/CoreGettingStartedGuide/index.tsx
@@ -15,7 +15,7 @@ const CoreGettingStartedGuides = [
         Set up Tracetest Core and start trace-based testing your distributed system.
       </Translate>
     ),
-    button: 'Set up',
+    button: 'Start',
   },
   {
     name: '🙌 Open Tracetest Core',
@@ -35,7 +35,7 @@ const CoreGettingStartedGuides = [
         Install OpenTelemetry in 5 minutes without any code changes!
       </Translate>
     ),
-    button: 'Set up OpenTelemetry',
+    button: 'Configure OpenTelemetry',
   },
   {
     name: '🤩 Open Source',

diff --git a/docs/src/components/GettingStartedGuide/index.tsx b/docs/src/components/GettingStartedGuide/index.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable global-require */
 
 import React from 'react';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
 import Heading from '@theme/Heading';

diff --git a/docs/src/components/WelcomeGuide/index.tsx b/docs/src/components/WelcomeGuide/index.tsx
@@ -15,7 +15,7 @@ const WelcomeGuides = [
         Set up Tracetest and start trace-based testing your distributed system.
       </Translate>
     ),
-    button: 'Set up Tracetest',
+    button: 'Start',
   },
   {
     name: '🤩 Open Source',
@@ -35,7 +35,7 @@ const WelcomeGuides = [
         Connect your existing trace data store or send traces to Tracetest directly!
       </Translate>
     ),
-    button: 'Configure Tracetest',
+    button: 'Configure',
   },
   {
     name: '🙄 New to Trace-based Testing?',

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -30,6 +30,7 @@ nav {
   --ifm-color-primary-lightest: #e71140;
 }
 
+/* dark docs mode */
 [data-theme='dark'] {
   --ifm-color-primary: #f27e9b;
   --ifm-color-primary-dark: #ef5d81;
@@ -40,12 +41,43 @@ nav {
   --ifm-color-primary-lightest: #fce2e9;
 }
 
+/* marketing website dark color */
 [data-theme='dark'] {
-  background-color: #242526 !important;
+  --ifm-color-primary: #fda622;
+  --ifm-color-primary-dark: #fd9b06;
+  --ifm-color-primary-darker: #f29302;
+  --ifm-color-primary-darkest: #c77902;
+  --ifm-color-primary-light: #fdb13e;
+  --ifm-color-primary-lighter: #fdb74d;
+  --ifm-color-primary-lightest: #fec877;
+  --ifm-background-color: #2e1623 !important;
+  --ifm-background-surface-color: rgba(0,0,0,.92) !important;
+}
+
+[data-theme='dark'] {
+  /* Docs color scheme */
+  /* background-color: #242526 !important; */
+
+  /* marketing website scheme */
+  /* background-color: #2e1623 !important; */
+  background-color: var(--ifm-background-color);
 }
 
 html[data-theme='dark'] footer {
-  background-color: #242526 !important;
+  /* Docs color scheme */
+  /* background-color: #242526 !important; */
+
+  /* marketing website scheme */
+  background-color: var(--ifm-background-color) !important;
+
+}
+
+html[data-theme='dark'] .footer {
+  /* Docs color scheme */
+  /* background-color: #242526 !important; */
+
+  /* marketing website scheme */
+  background-color: var(--ifm-background-surface-color) !important;
 }
 
 
@@ -65,15 +97,38 @@ div[class^='announcementBar'] a:hover {
   text-decoration: underline;
 }
 
+/* Getting Started */
+
 /* Card */
+html[data-theme='dark'] .card {
+  background-color: #2e1623;
+  box-shadow: 0 2px 4px 2px rgba(255, 255, 255, 0.1);
+}
+html[data-theme='dark'] .card .button {
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-link-color);
+  border: transparent;
+}
+
+html[data-theme='dark'] .card .button:hover {
+  background-color: var(--ifm-color-emphasis-100);
+  color: var(--ifm-link-color);
+  border: transparent;
+}
+
 div[class^='gs__card'] .card {
   background-color: var(--ifm-background-surface-color);
   color: var(--ifm-font-color-base);
-  transition-duration: 500ms;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); */
+  box-shadow: none;
 }
 
 div[class^='gs__card'] .card:hover {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  border: 1px solid var(--ifm-color-primary);
+  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); */
+  box-shadow: none;
 }
 
 div[class^='gs__card'] .card a {
@@ -85,3 +140,46 @@ div[class^='gs__card'] .card a:hover {
   color: var(--ifm-font-color-base);
   text-decoration: inherit;
 }
+
+html[data-theme='dark'] div[class^='gs__card'] .card {
+  background-color: #2e1623;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  /* box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1); */
+  box-shadow: none;
+}
+html[data-theme='dark'] div[class^='gs__card'] .card:hover {
+  border: 1px solid var(--ifm-color-primary);
+  /* box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(255, 255, 255, 0.1); */
+  box-shadow: none;
+}
+
+/* nav sign in */
+
+.sign-in-button { 
+  margin: 0 6px 0 0;
+  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  align-items: center;
+  background: var(--docsearch-searchbox-background);
+  border: 0;
+  border-radius: 40px;
+  color: var(--docsearch-text-color);
+  cursor: pointer;
+  display: flex;
+  font-weight: 400;
+  height: 36px;
+  justify-content: space-between;
+  padding: 0 22px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.sign-in-button:hover {
+  background: var(--docsearch-searchbox-focus-background);
+  box-shadow: var(--docsearch-searchbox-shadow);
+  color: var(--docsearch-text-color);
+  outline: none;
+}
+
+.sign-in-button svg {
+  display: none;
+}