From 375541242bbc3e6307efe672342d49e0cf933f7c Mon Sep 17 00:00:00 2001
From: svrnm <neumanns@cisco.com>
Date: Wed, 25 Sep 2024 08:46:41 +0200
Subject: [PATCH 1/3] New Getting Started

Signed-off-by: svrnm <neumanns@cisco.com>
---
 content/en/docs/getting-started/_index.md     | 30 --------------
 content/en/docs/getting-started/dev.md        | 39 -------------------
 content/en/docs/getting-started/ops.md        | 23 -----------
 content/en/docs/learn/_index.md               | 17 ++++++++
 .../en/docs/learn/best-practices/_index.md    |  6 +++
 .../en/docs/learn/getting-started/_index.md   |  6 +++
 .../en/docs/learn/getting-started/overview.md | 25 ++++++++++++
 .../sample-application/code/0-init-folder.md  |  6 +++
 .../sample-application/index.md               | 22 +++++++++++
 layouts/shortcodes/code-and-text.html         |  6 +++
 layouts/shortcodes/learn/code.html            |  3 ++
 layouts/shortcodes/learn/row.html             |  1 +
 layouts/shortcodes/learn/text.html            |  3 ++
 13 files changed, 95 insertions(+), 92 deletions(-)
 delete mode 100644 content/en/docs/getting-started/_index.md
 delete mode 100644 content/en/docs/getting-started/dev.md
 delete mode 100644 content/en/docs/getting-started/ops.md
 create mode 100644 content/en/docs/learn/_index.md
 create mode 100644 content/en/docs/learn/best-practices/_index.md
 create mode 100644 content/en/docs/learn/getting-started/_index.md
 create mode 100644 content/en/docs/learn/getting-started/overview.md
 create mode 100644 content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md
 create mode 100644 content/en/docs/learn/getting-started/sample-application/index.md
 create mode 100644 layouts/shortcodes/code-and-text.html
 create mode 100644 layouts/shortcodes/learn/code.html
 create mode 100644 layouts/shortcodes/learn/row.html
 create mode 100644 layouts/shortcodes/learn/text.html

diff --git a/content/en/docs/getting-started/_index.md b/content/en/docs/getting-started/_index.md
deleted file mode 100644
index b90ad2b72f5b..000000000000
--- a/content/en/docs/getting-started/_index.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Getting Started
-description: Get started with OpenTelemetry based on your role.
-no_list: true
-weight: 160
----
-
-Select a role[^1] to get started:
-
-<div class="l-get-started-buttons justify-content-start mt-3 ms-3">
-
-- [Dev](dev/)
-- [Ops](ops/)
-
-</div>
-
-You can also try out the official [OpenTelemetry demo][demo] to _see_ what
-observability with OpenTelemetry looks like!
-
-<div class="l-primary-buttons justify-content-start mt-3 mb-5 ms-3">
-
-- [Try the demo][demo]
-
-</div>
-
-[^1]: If none of these roles apply to you, [let us know][].
-
-[demo]: /ecosystem/demo/
-[let us know]:
-  https://github.com/open-telemetry/opentelemetry.io/issues/new?title=Add%20a%20new%20persona:%20My%20Persona&body=Provide%20a%20description%20of%20your%20role%20and%20responsibilities%20and%20what%20your%20observability%20goals%20are
diff --git a/content/en/docs/getting-started/dev.md b/content/en/docs/getting-started/dev.md
deleted file mode 100644
index 73c8175a320a..000000000000
--- a/content/en/docs/getting-started/dev.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Getting started for Developers
-linkTitle: Dev
----
-
-This is the [getting-started](..) page for you if:
-
-- You develop software.
-- Your goal is to get observability by writing code.
-- You want to have your dependencies emit telemetry for you automatically.
-
-OpenTelemetry can help you! To accomplish your goals of having your dependencies
-instrumented automatically and instrumenting your own code with our API
-manually, we recommend that you learn the following concepts first:
-
-- [What is OpenTelemetry?](../../what-is-opentelemetry/)
-- [How can I add instrumentation to my code base?](../../concepts/instrumentation/code-based/)
-
-If you develop libraries, frameworks or middleware that is used as a dependency
-within other software, we recommend that you learn how you can provide telemetry
-natively:
-
-- [How can I add native instrumentation to my library?](../../concepts/instrumentation/libraries/)
-
-Next, you can deep dive into the documentations for the
-[language](../../languages/) you are using:
-
-- [C++](../../languages/cpp/)
-- [.NET](../../languages/net/)
-- [Erlang / Elixir](../../languages/erlang/)
-- [Go](../../languages/go/)
-- [Java](../../languages/java/)
-- [JavaScript / TypeScript](../../languages/js/)
-- [PHP](../../languages/php/)
-- [Python](../../languages/python/)
-- [Ruby](../../languages/ruby/)
-- [Rust](../../languages/rust/)
-- [Swift](../../languages/swift/)
-- [Other](../../languages/other/)
diff --git a/content/en/docs/getting-started/ops.md b/content/en/docs/getting-started/ops.md
deleted file mode 100644
index ac60198d37fa..000000000000
--- a/content/en/docs/getting-started/ops.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Getting started for Ops
-linkTitle: Ops
----
-
-This is the [getting-started](..) page for you if:
-
-- You run a set of applications in production.
-- Your goal is to get telemetry out of them without touching their code.
-- You want to collect traces, metrics, and logs from several services and send
-  them off to your observability backend.
-
-OpenTelemetry can help you! To accomplish your goal of getting telemetry out of
-applications without touching their code, we recommend that you learn the
-following:
-
-- [What is OpenTelemetry?](../../what-is-opentelemetry/)
-- [How can I instrument applications without touching their code?](../../concepts/instrumentation/zero-code/)
-- [How can I set up a collector?](../../collector/)
-- [How can I get automation for Kubernetes with the OpenTelemetry Operator?](../../kubernetes/operator/)
-
-If you are looking for a set of applications to try things out, you will find
-our official [OpenTelemetry demo](/ecosystem/demo/) useful.
diff --git a/content/en/docs/learn/_index.md b/content/en/docs/learn/_index.md
new file mode 100644
index 000000000000..d4f0c8149a55
--- /dev/null
+++ b/content/en/docs/learn/_index.md
@@ -0,0 +1,17 @@
+---
+title: Learn OpenTelemetry
+description:
+weight: 160
+---
+
+This section of the OpenTelemetry documentation contains tutorials, that will
+help you to cover the basics of Observability using OpenTelemetry and that will
+teach you best practices for common advanced topics.
+
+If you are new to OpenTelemetry, we recommend that you dive into the
+[Getting Started](./getting-started/) first. By doing them, you will learn
+hands-on about the main concepts, features and components of OpenTelemetry.
+
+After completing the [Getting Started](./getting-started/), you can either dive into the [Best Practices](./best-practices/),
+and learn more advanced topics using hands on tutorials, or you can explore other
+sections of the [OpenTelemetry Documentation](/docs) based on your needs and learning goals.
\ No newline at end of file
diff --git a/content/en/docs/learn/best-practices/_index.md b/content/en/docs/learn/best-practices/_index.md
new file mode 100644
index 000000000000..c1c42d4914cd
--- /dev/null
+++ b/content/en/docs/learn/best-practices/_index.md
@@ -0,0 +1,6 @@
+---
+title: Best Practices
+description:
+weight: 90
+aliases: [/docs/getting-started]
+---
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/_index.md b/content/en/docs/learn/getting-started/_index.md
new file mode 100644
index 000000000000..25997d686add
--- /dev/null
+++ b/content/en/docs/learn/getting-started/_index.md
@@ -0,0 +1,6 @@
+---
+title: Getting Started
+description:
+weight: 10
+aliases: [/docs/getting-started]
+---
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/overview.md b/content/en/docs/learn/getting-started/overview.md
new file mode 100644
index 000000000000..4893a4484903
--- /dev/null
+++ b/content/en/docs/learn/getting-started/overview.md
@@ -0,0 +1,25 @@
+---
+title: >- 
+    Overview
+description: What you'll be building
+weight: -1
+---
+
+For this tutorial, you will be starting with an _uninstrumented_ distributed sample app. _Uninstrumented_ means, that this
+app will initially not have any code, that will emit telemetry, such as traces, metrics and logs.
+
+You will add the OpenTelemetry SDK to that application, and afterwards _instrument_ the application by adding traces, metrics
+and logs. You will do that, for your dependencies and for your custom code.
+
+When you have successfully instrumented the app, you will learn how to export your telemetry to the console and then using OTLP
+to the OpenTelemetry collector. You will see how you can receive telemetry with the collector, process that telemetry and finally
+export it to a backend, that can visualize your data.
+
+By the end of the tutorial, you will have learned how to instrument your own app using OpenTelemetry.
+
+{{% alert title="Note" color="info" %}}
+
+You can follow the tutorial using your own application as well, but we recommend that you use the provided [sample application](./sample-application.md)
+when you go through it for the first time, such that you have an easier time when you need to troubleshoot or go back some steps.
+
+{{% /alert %}}
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md b/content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md
new file mode 100644
index 000000000000..11c20a27acc8
--- /dev/null
+++ b/content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md
@@ -0,0 +1,6 @@
+---
+headless: true
+---
+```bash
+npm init -f
+```
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sample-application/index.md b/content/en/docs/learn/getting-started/sample-application/index.md
new file mode 100644
index 000000000000..56f819815682
--- /dev/null
+++ b/content/en/docs/learn/getting-started/sample-application/index.md
@@ -0,0 +1,22 @@
+---
+title: Sample Application
+description:
+weight: 10
+---
+
+The sample application is a "dice game": a game coordinator service will ask
+two (or more) player services for a random number between 1 and 6. The player
+with the highest number wins.
+
+The first few chapters of this tutorial will focus on the player service, which
+is a basic HTTP application, that has an API endpoint `/rolldice` which returns
+a random number between 1 and 6 on request.
+
+Begin by choosing the programming language in which you want to get started:
+
+{{% code-and-text code="code/0-init-folder.md" %}}
+
+As a first step you need to create a new folder and initialize your project.
+Run the code on the right to do so.
+
+{{% /code-and-text %}}
diff --git a/layouts/shortcodes/code-and-text.html b/layouts/shortcodes/code-and-text.html
new file mode 100644
index 000000000000..648dab90ba48
--- /dev/null
+++ b/layouts/shortcodes/code-and-text.html
@@ -0,0 +1,6 @@
+{{- $code := .Get "code" -}}
+{{- $pageName := (printf "%s/%s" .Page.Path $code) -}}
+{{- $codePage := .Site.GetPage $pageName -}}
+
+
+<div class="container-fluid gx-0"><div class="row"><div class="col">{{ .Inner }}</div><div class="col">{{ $codePage.Content }}</div></div></div>
\ No newline at end of file
diff --git a/layouts/shortcodes/learn/code.html b/layouts/shortcodes/learn/code.html
new file mode 100644
index 000000000000..fd56b72d0732
--- /dev/null
+++ b/layouts/shortcodes/learn/code.html
@@ -0,0 +1,3 @@
+<div class="col">
+{{ .Inner }}
+</div>
diff --git a/layouts/shortcodes/learn/row.html b/layouts/shortcodes/learn/row.html
new file mode 100644
index 000000000000..30e2aae7575c
--- /dev/null
+++ b/layouts/shortcodes/learn/row.html
@@ -0,0 +1 @@
+<div class="container-fluid gx-0"><div class="row">{{ .Inner  }}</div></div>
diff --git a/layouts/shortcodes/learn/text.html b/layouts/shortcodes/learn/text.html
new file mode 100644
index 000000000000..fd56b72d0732
--- /dev/null
+++ b/layouts/shortcodes/learn/text.html
@@ -0,0 +1,3 @@
+<div class="col">
+{{ .Inner }}
+</div>

From 0e8dcf8072e6324e57999d691122973e932ecc51 Mon Sep 17 00:00:00 2001
From: svrnm <neumanns@cisco.com>
Date: Wed, 2 Oct 2024 10:42:54 +0200
Subject: [PATCH 2/3] New Getting Started

Signed-off-by: svrnm <neumanns@cisco.com>
---
 assets/js/navScroll.js                        |  29 +++-
 .../getting-started/add-context/index.md      |   8 +
 .../getting-started/add-telemetry/index.md    |  40 +++++
 .../collector-setup/sdk-setup/index.md        |  11 ++
 .../correlate-across-services/index.md        |  10 ++
 .../getting-started/export-telemetry/index.md |  15 ++
 .../en/docs/learn/getting-started/overview.md |  17 +-
 .../sample-application/code/0-init-folder.md  |   6 -
 .../sample-application/code/go.md             |  69 ++++++++
 .../sample-application/code/javascript.md     |  78 +++++++++
 .../sample-application/code/typescript.md     |  78 +++++++++
 .../sample-application/index.md               |  97 ++++++++++-
 .../getting-started/sdk-setup/code/go.md      | 153 ++++++++++++++++++
 .../learn/getting-started/sdk-setup/index.md  |  23 +++
 .../getting-started/visualization/index.md    |   7 +
 layouts/shortcodes/_var.html                  |   8 +
 layouts/shortcodes/code-and-text.html         |   6 -
 layouts/shortcodes/code-block.html            |   2 +
 layouts/shortcodes/learn/code.html            |   3 -
 layouts/shortcodes/learn/row.html             |   1 -
 layouts/shortcodes/learn/text.html            |   3 -
 layouts/shortcodes/multicode.html             |  48 ++++++
 22 files changed, 680 insertions(+), 32 deletions(-)
 create mode 100644 content/en/docs/learn/getting-started/add-context/index.md
 create mode 100644 content/en/docs/learn/getting-started/add-telemetry/index.md
 create mode 100644 content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md
 create mode 100644 content/en/docs/learn/getting-started/correlate-across-services/index.md
 create mode 100644 content/en/docs/learn/getting-started/export-telemetry/index.md
 delete mode 100644 content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md
 create mode 100644 content/en/docs/learn/getting-started/sample-application/code/go.md
 create mode 100644 content/en/docs/learn/getting-started/sample-application/code/javascript.md
 create mode 100644 content/en/docs/learn/getting-started/sample-application/code/typescript.md
 create mode 100644 content/en/docs/learn/getting-started/sdk-setup/code/go.md
 create mode 100644 content/en/docs/learn/getting-started/sdk-setup/index.md
 create mode 100644 content/en/docs/learn/getting-started/visualization/index.md
 create mode 100644 layouts/shortcodes/_var.html
 delete mode 100644 layouts/shortcodes/code-and-text.html
 create mode 100644 layouts/shortcodes/code-block.html
 delete mode 100644 layouts/shortcodes/learn/code.html
 delete mode 100644 layouts/shortcodes/learn/row.html
 delete mode 100644 layouts/shortcodes/learn/text.html
 create mode 100644 layouts/shortcodes/multicode.html

diff --git a/assets/js/navScroll.js b/assets/js/navScroll.js
index 4fc710164b20..bbbb02d880da 100644
--- a/assets/js/navScroll.js
+++ b/assets/js/navScroll.js
@@ -1,3 +1,5 @@
+const { validateAdditionalItems } = require("ajv/dist/vocabularies/applicator/additionalItems");
+
 // Check If an Element is Visible in the Viewport
 function isInViewport(element) {
   const rect = element.getBoundingClientRect();
@@ -5,7 +7,7 @@ function isInViewport(element) {
     rect.top >= 0 &&
     rect.left >= 0 &&
     rect.bottom <=
-      (window.innerHeight || document.documentElement.clientHeight) &&
+    (window.innerHeight || document.documentElement.clientHeight) &&
     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
   );
 }
@@ -15,3 +17,28 @@ let ele = document.querySelector('#td-section-nav .td-sidebar-nav-active-item');
 if (ele && !isInViewport(ele)) {
   ele.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
 }
+
+
+let _activeVar = '';
+
+document.querySelectorAll('option[data-bs-toggle="tab"]').forEach(function (tab) {
+  tab.addEventListener('show.bs.tab', function (event) {
+    let _newVar = event.target.textContent.toLowerCase();
+    if (_activeVar != _newVar) {
+      console.log('activate')
+      _activeVar = _newVar;
+      document.querySelectorAll(`.code-vars`).forEach(function (v) {
+        v.style.display = 'none';
+      });
+      document.querySelectorAll(`.code-vars-${_activeVar}`).forEach(function (v) {
+        v.style.display = 'inline';
+      });
+    }
+  })
+
+  tab.addEventListener('shown.bs.tab', function (event) {
+    if(event.target.classList.contains('active')) {
+      event.target.selected = true;
+    }
+  })
+});
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/add-context/index.md b/content/en/docs/learn/getting-started/add-context/index.md
new file mode 100644
index 000000000000..f76956a5389d
--- /dev/null
+++ b/content/en/docs/learn/getting-started/add-context/index.md
@@ -0,0 +1,8 @@
+---
+title: Add Context
+description: 
+weight: 90
+---
+
+In this section you will learn about Resources, Instrumentation Scope, Exemplars
+and other ways that allow you to add more context to different kinds of telemetry.
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/add-telemetry/index.md b/content/en/docs/learn/getting-started/add-telemetry/index.md
new file mode 100644
index 000000000000..a301cbc7bb3c
--- /dev/null
+++ b/content/en/docs/learn/getting-started/add-telemetry/index.md
@@ -0,0 +1,40 @@
+---
+title: Add Telemetry
+description: Add traces, metrics and logs to your application
+weight: 30
+---
+
+In this section we will capture traces, metrics and logs from your application.
+You will learn how to extract telemetry from your dependencies, and how you can
+add telemetry to your custom code.
+
+## Instrumenting libraries
+
+As a first step, you will learn how to extract traces, metrics and logs from your
+dependencies. There are three different situations you will encounter, when looking
+into the observability of a library or framework:
+
+- The library is _natively instrumented_, and comes with OpenTelemetry support by default. You can get traces, metrics and logs emitted from that library by adding
+  and setting up the OpenTelemetry SDK with your app.
+- If a library is not _natively instrumented_, there might be an _instrumnetation library_ available, which is an additional dependency you can add to your project.
+  This instrumentation library will inject OpenTelemetry API calls into the other library, such that it will emit telemetry.
+- In some cases, you will encounter libraries which are neither _natively instrumented_ nor can be instrumented using an existing _instrumentation library_. We will
+  skip this situation in this beginners tutorial.
+
+_tbd_
+
+### Using natively instrumented libraries
+
+### Using instrumentation libraries
+
+### Finding instrumentation for libraries
+
+## Instrumenting custom code
+
+Add logs, metrics, traces
+
+### Add traces
+
+### Add metrics
+
+### Add logs
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md b/content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md
new file mode 100644
index 000000000000..40c5aa0870d9
--- /dev/null
+++ b/content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md
@@ -0,0 +1,11 @@
+---
+title: Setup the Collector
+description: 
+weight: 50
+---
+
+In this section you will learn how you can setup common receivers, processors,
+connectors and exporters of the OpenTelemetry collector. You will use the OTLP
+receiver to capture data from your application, then transform it using the 
+`transform processor` and finally export the telemetry to the console or to
+an OTLP compatible backend that can visualize your telemetry.
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/correlate-across-services/index.md b/content/en/docs/learn/getting-started/correlate-across-services/index.md
new file mode 100644
index 000000000000..2c05a9dd7e6c
--- /dev/null
+++ b/content/en/docs/learn/getting-started/correlate-across-services/index.md
@@ -0,0 +1,10 @@
+---
+title: Correlate across Services
+description: 
+weight: 70
+---
+
+In this section we will add the coordinator service and a second player service to
+your application. You will learn how OpenTelemetry propagates information across
+service boundaries, such that you can see telemetry being stitched together across
+services in your visualization backend. 
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/export-telemetry/index.md b/content/en/docs/learn/getting-started/export-telemetry/index.md
new file mode 100644
index 000000000000..cba68c7cee73
--- /dev/null
+++ b/content/en/docs/learn/getting-started/export-telemetry/index.md
@@ -0,0 +1,15 @@
+---
+title: Export Telemetry
+description: Export telemetry to the OpenTelemetry Collector or a backend
+weight: 40
+---
+
+In this section you will learn how to export the telemetry your app is generating.
+You will output your telemetry to the console, then use the OTLP exporter to
+send telemetry to the OpenTelemetry collector or a compatible backend.
+
+## Export to the console
+
+## Export via OTLP
+
+## Other exporters
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/overview.md b/content/en/docs/learn/getting-started/overview.md
index 4893a4484903..79c9980531c0 100644
--- a/content/en/docs/learn/getting-started/overview.md
+++ b/content/en/docs/learn/getting-started/overview.md
@@ -5,18 +5,23 @@ description: What you'll be building
 weight: -1
 ---
 
-For this tutorial, you will be starting with an _uninstrumented_ distributed sample app. _Uninstrumented_ means, that this
-app will initially not have any code, that will emit telemetry, such as traces, metrics and logs.
+For this tutorial, you will be starting with an _uninstrumented_ distributed [sample app](./sample-application/). _Uninstrumented_ means, that this
+app will initially not have any code, that will emit telemetry, such as [traces](/docs/concepts/signals/traces), [metrics](/docs/concepts/signals/metrics) and [logs](/docs/concepts/signals/logs).
 
-You will add the OpenTelemetry SDK to that application, and afterwards _instrument_ the application by adding traces, metrics
+You will [add the OpenTelemetry SDK](./sdk-setup/code/) to that application, and afterwards [_instrument_](./add-telemetry/) the application by adding traces, metrics
 and logs. You will do that, for your dependencies and for your custom code.
 
-When you have successfully instrumented the app, you will learn how to export your telemetry to the console and then using OTLP
-to the OpenTelemetry collector. You will see how you can receive telemetry with the collector, process that telemetry and finally
-export it to a backend, that can visualize your data.
+When you have successfully instrumented the app, you will learn how to [export your telemetry](./export-telemetry/) to the console and then using OTLP
+to the OpenTelemetry collector. You will see how you can [receive telemetry with the collector](./collector-setup/), process that telemetry and eventually
+export it to a backend, that can [visualize your data](./visualization/).
+
+Finally, you will learn how OpenTelemetry can [correlate telemetry across service boundaries](./correlate-across-services/), and how you can [add more context](./add-context/), like service, container or
+host information to your telemetry.
 
 By the end of the tutorial, you will have learned how to instrument your own app using OpenTelemetry.
 
+Start by setting up the [sample application](./sample-application/) that will be used throughout the tutorial.
+
 {{% alert title="Note" color="info" %}}
 
 You can follow the tutorial using your own application as well, but we recommend that you use the provided [sample application](./sample-application.md)
diff --git a/content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md b/content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md
deleted file mode 100644
index 11c20a27acc8..000000000000
--- a/content/en/docs/learn/getting-started/sample-application/code/0-init-folder.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-headless: true
----
-```bash
-npm init -f
-```
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sample-application/code/go.md b/content/en/docs/learn/getting-started/sample-application/code/go.md
new file mode 100644
index 000000000000..ccadfa2e51c0
--- /dev/null
+++ b/content/en/docs/learn/getting-started/sample-application/code/go.md
@@ -0,0 +1,69 @@
+---
+headless: true
+title: Go
+params:
+    app-file: main.go
+    lib-file: rolldice.go
+---
+{{% code-block "init" %}}
+
+```bash
+go mod init dice
+```
+
+{{% /code-block %}}
+{{% code-block "app-file" %}}
+
+```go
+/* main.go */
+package main
+
+import (
+	"log"
+	"net/http"
+)
+
+func main() {
+	http.HandleFunc("/rolldice", rolldice)
+
+	log.Fatal(http.ListenAndServe(":8080", nil))
+}
+
+```
+
+{{% /code-block %}}
+
+{{% code-block "lib-file" %}}
+
+```go
+package main
+
+import (
+	"io"
+	"log"
+	"math/rand"
+	"net/http"
+	"strconv"
+)
+
+func rolldice(w http.ResponseWriter, r *http.Request) {
+	roll := 1 + rand.Intn(6)
+
+	resp := strconv.Itoa(roll) + "\n"
+	if _, err := io.WriteString(w, resp); err != nil {
+		log.Printf("Write failed: %v\n", err)
+	}
+}
+
+```
+
+{{% /code-block %}}
+
+{{% code-block "run-app" %}}
+
+```console
+$ node app.js
+Listening for requests on http://localhost:8080
+```
+
+{{% /code-block %}}
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sample-application/code/javascript.md b/content/en/docs/learn/getting-started/sample-application/code/javascript.md
new file mode 100644
index 000000000000..54b30bf841b6
--- /dev/null
+++ b/content/en/docs/learn/getting-started/sample-application/code/javascript.md
@@ -0,0 +1,78 @@
+---
+headless: true
+title: JavaScript
+params:
+    app-file: app.js
+    lib-file: dice.js
+---
+{{% code-block "init" %}}
+
+```bash
+npm init -y
+npm install express
+```
+
+{{% /code-block %}}
+{{% code-block "app-file" %}}
+
+```javascript
+/*app.js*/
+const express = require('express');
+const { rollTheDice } = require('./dice.js');
+
+const PORT = parseInt(process.env.PORT || '8080');
+const app = express();
+
+app.get('/rolldice', (req, res) => {
+  const rolls = req.query.rolls ? parseInt(req.query.rolls.toString()) : NaN;
+  if (isNaN(rolls)) {
+    res
+      .status(400)
+      .send("Request parameter 'rolls' is missing or not a number.");
+    return;
+  }
+  res.send(JSON.stringify(rollTheDice(rolls, 1, 6)));
+});
+
+app.listen(PORT, () => {
+  console.log(`Listening for requests on http://localhost:${PORT}`);
+});
+```
+
+{{% /code-block %}}
+
+{{% code-block "lib-file" %}}
+
+```javascript
+/*dice.js*/
+function rollOnce(min, max) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+function rollTheDice(rolls, min, max) {
+  const result = [];
+  for (let i = 0; i < rolls; i++) {
+    result.push(rollOnce(min, max));
+  }
+  return result;
+}
+
+module.exports = { rollTheDice };
+
+});
+
+app.listen(PORT, () => {
+  console.log(`Listening for requests on http://localhost:${PORT}`);
+});
+```
+
+{{% /code-block %}}
+
+{{% code-block "run-app" %}}
+
+```console
+$ node app.js
+Listening for requests on http://localhost:8080
+```
+
+{{% /code-block %}}
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sample-application/code/typescript.md b/content/en/docs/learn/getting-started/sample-application/code/typescript.md
new file mode 100644
index 000000000000..254163fb281d
--- /dev/null
+++ b/content/en/docs/learn/getting-started/sample-application/code/typescript.md
@@ -0,0 +1,78 @@
+---
+headless: true
+title: Typescript
+params:
+    app-file: app.ts
+    lib-file: dice.ts
+---
+{{% code-block "init" %}}
+
+```bash
+npm init -y
+npm install typescript \
+  ts-node \
+  @types/node \
+  express \
+  @types/express
+
+# initialize typescript
+npx tsc --init
+```
+
+{{% /code-block %}}
+{{% code-block "app-file" %}}
+
+```javascript
+/*app.ts*/
+import express, { Request, Express } from 'express';
+import { rollTheDice } from './dice';
+
+const PORT: number = parseInt(process.env.PORT || '8080');
+const app: Express = express();
+
+app.get('/rolldice', (req, res) => {
+  const rolls = req.query.rolls ? parseInt(req.query.rolls.toString()) : NaN;
+  if (isNaN(rolls)) {
+    res
+      .status(400)
+      .send("Request parameter 'rolls' is missing or not a number.");
+    return;
+  }
+  res.send(JSON.stringify(rollTheDice(rolls, 1, 6)));
+});
+
+app.listen(PORT, () => {
+  console.log(`Listening for requests on http://localhost:${PORT}`);
+});
+
+```
+
+{{% /code-block %}}
+
+{{% code-block "lib-file" %}}
+
+```javascript
+/*dice.ts*/
+function rollOnce(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+export function rollTheDice(rolls: number, min: number, max: number) {
+  const result: number[] = [];
+  for (let i = 0; i < rolls; i++) {
+    result.push(rollOnce(min, max));
+  }
+  return result;
+}
+```
+
+{{% /code-block %}}
+
+{{% code-block "run-app" %}}
+
+```console
+$ npx ts-node app.ts
+Listening for requests on http://localhost:8080
+```
+
+{{% /code-block %}}
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sample-application/index.md b/content/en/docs/learn/getting-started/sample-application/index.md
index 56f819815682..4b591f4cd109 100644
--- a/content/en/docs/learn/getting-started/sample-application/index.md
+++ b/content/en/docs/learn/getting-started/sample-application/index.md
@@ -1,7 +1,7 @@
 ---
 title: Sample Application
 description:
-weight: 10
+weight: 11
 ---
 
 The sample application is a "dice game": a game coordinator service will ask
@@ -12,11 +12,96 @@ The first few chapters of this tutorial will focus on the player service, which
 is a basic HTTP application, that has an API endpoint `/rolldice` which returns
 a random number between 1 and 6 on request.
 
-Begin by choosing the programming language in which you want to get started:
+## Create and launch the player service
 
-{{% code-and-text code="code/0-init-folder.md" %}}
+Let's begin by setting up a new directory with the source code of the player
+service:
 
-As a first step you need to create a new folder and initialize your project.
-Run the code on the right to do so.
+```bash
+mkdir player-service
+cd player-service
+```
 
-{{% /code-and-text %}}
+### Dependencies
+
+In that new directory, run the following command in a terminal window to initialize a new project, and to add all the
+dependencies needed.
+
+{{% multicode "init" %}}
+
+### Code
+
+The player service consists of two files: an application file for the logic of the HTTP server, and a library file that
+will handle the dice rolling. 
+
+First, create the application file named {{% _var app-file %}} with the following code in it:
+
+{{% multicode "app-file" %}}
+
+Next, create the library file named {{% _var lib-file %}} with the following code in it:
+
+{{% multicode "lib-file" %}}
+
+### Test
+
+Build and run the application with the following command
+
+{{% multicode "run-app" %}}
+
+To verify that your player service is running, either open <http://localhost:8080/rolldice> in your web browser or run the following in the command line:
+
+```bash
+curl http://localhost:8080/rolldice
+```
+
+For the next sections of the tutorial all you need is the player service, so you can continue with [setting up the OpenTelemetry SDK](../setup-sdk).
+
+You can come back later here, when you will learn how to [correlate telemetry across services](../correlate-across-services/).
+
+## Create and launch the game coordinator
+
+For setting up the game coordinator, create another new directory, that lives
+side by side with the player service:
+
+```
+cd .. # if you are in the player-service directory
+mkdir coordinator-service
+cd coordinator-service
+```
+
+### Dependencies
+
+The game coordinator has the same dependencies. So, you can run the same code to initialize a new project, and to add all the
+dependencies needed.
+
+{{% multicode "init" %}}
+
+### Code
+
+Create the application file named {{% _var app-file %}} with the following code in it:
+
+{{% multicode "coordinator-app" %}}
+
+### Test
+
+To verify that your coordinator service is running and connecting properly to your one player service,  run the following in the command line:
+
+```bash
+./game-coordinator
+```
+
+Since you only have one player service currently running, you will see something like the following printed to the console:
+
+```text
+Player 1 wins: 6
+```
+
+## Run multiple player services
+
+To have multiple player compete, go back to the folder of the player service and run a second instance:
+
+{{% multicode "run-app" %}}
+
+## Next Step
+
+After you have setup your sample application, you can continue with [setting up the OpenTelemetry SDK](../sdk-setup/).
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sdk-setup/code/go.md b/content/en/docs/learn/getting-started/sdk-setup/code/go.md
new file mode 100644
index 000000000000..d5167914b89e
--- /dev/null
+++ b/content/en/docs/learn/getting-started/sdk-setup/code/go.md
@@ -0,0 +1,153 @@
+---
+headless: true
+title: Go
+params:
+    otel-file: otel.go
+---
+{{% code-block "add-dependencies" %}}
+
+```bash
+go get "go.opentelemetry.io/otel" \
+  "go.opentelemetry.io/otel/exporters/stdout/stdoutmetric" \
+  "go.opentelemetry.io/otel/exporters/stdout/stdouttrace" \
+  "go.opentelemetry.io/otel/exporters/stdout/stdoutlog" \
+  "go.opentelemetry.io/otel/sdk/log" \
+  "go.opentelemetry.io/otel/log/global" \
+  "go.opentelemetry.io/otel/propagation" \
+  "go.opentelemetry.io/otel/sdk/metric" \
+  "go.opentelemetry.io/otel/sdk/resource" \
+  "go.opentelemetry.io/otel/sdk/trace" \
+  "go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp"\
+  "go.opentelemetry.io/contrib/bridges/otelslog"
+```
+
+{{% /code-block  %}}
+
+{{% code-block "init-sdk" %}}
+> If you’re only using tracing or metrics, you can omit the corresponding TracerProvider or MeterProvider initialization code.
+
+```go
+package main
+
+import (
+	"context"
+	"errors"
+	"time"
+
+	"go.opentelemetry.io/otel"
+	"go.opentelemetry.io/otel/exporters/stdout/stdoutlog"
+	"go.opentelemetry.io/otel/exporters/stdout/stdoutmetric"
+	"go.opentelemetry.io/otel/exporters/stdout/stdouttrace"
+	"go.opentelemetry.io/otel/log/global"
+	"go.opentelemetry.io/otel/propagation"
+	"go.opentelemetry.io/otel/sdk/log"
+	"go.opentelemetry.io/otel/sdk/metric"
+	"go.opentelemetry.io/otel/sdk/trace"
+)
+
+// setupOTelSDK bootstraps the OpenTelemetry pipeline.
+// If it does not return an error, make sure to call shutdown for proper cleanup.
+func setupOTelSDK(ctx context.Context) (shutdown func(context.Context) error, err error) {
+	var shutdownFuncs []func(context.Context) error
+
+	// shutdown calls cleanup functions registered via shutdownFuncs.
+	// The errors from the calls are joined.
+	// Each registered cleanup will be invoked once.
+	shutdown = func(ctx context.Context) error {
+		var err error
+		for _, fn := range shutdownFuncs {
+			err = errors.Join(err, fn(ctx))
+		}
+		shutdownFuncs = nil
+		return err
+	}
+
+	// handleErr calls shutdown for cleanup and makes sure that all errors are returned.
+	handleErr := func(inErr error) {
+		err = errors.Join(inErr, shutdown(ctx))
+	}
+
+	// Set up propagator.
+	prop := newPropagator()
+	otel.SetTextMapPropagator(prop)
+
+	// Set up trace provider.
+	tracerProvider, err := newTraceProvider()
+	if err != nil {
+		handleErr(err)
+		return
+	}
+	shutdownFuncs = append(shutdownFuncs, tracerProvider.Shutdown)
+	otel.SetTracerProvider(tracerProvider)
+
+	// Set up meter provider.
+	meterProvider, err := newMeterProvider()
+	if err != nil {
+		handleErr(err)
+		return
+	}
+	shutdownFuncs = append(shutdownFuncs, meterProvider.Shutdown)
+	otel.SetMeterProvider(meterProvider)
+
+	// Set up logger provider.
+	loggerProvider, err := newLoggerProvider()
+	if err != nil {
+		handleErr(err)
+		return
+	}
+	shutdownFuncs = append(shutdownFuncs, loggerProvider.Shutdown)
+	global.SetLoggerProvider(loggerProvider)
+
+	return
+}
+
+func newPropagator() propagation.TextMapPropagator {
+	return propagation.NewCompositeTextMapPropagator(
+		propagation.TraceContext{},
+		propagation.Baggage{},
+	)
+}
+
+func newTraceProvider() (*trace.TracerProvider, error) {
+	traceExporter, err := stdouttrace.New(
+		stdouttrace.WithPrettyPrint())
+	if err != nil {
+		return nil, err
+	}
+
+	traceProvider := trace.NewTracerProvider(
+		trace.WithBatcher(traceExporter,
+			// Default is 5s. Set to 1s for demonstrative purposes.
+			trace.WithBatchTimeout(time.Second)),
+	)
+	return traceProvider, nil
+}
+
+func newMeterProvider() (*metric.MeterProvider, error) {
+	metricExporter, err := stdoutmetric.New()
+	if err != nil {
+		return nil, err
+	}
+
+	meterProvider := metric.NewMeterProvider(
+		metric.WithReader(metric.NewPeriodicReader(metricExporter,
+			// Default is 1m. Set to 3s for demonstrative purposes.
+			metric.WithInterval(3*time.Second))),
+	)
+	return meterProvider, nil
+}
+
+func newLoggerProvider() (*log.LoggerProvider, error) {
+	logExporter, err := stdoutlog.New()
+	if err != nil {
+		return nil, err
+	}
+
+	loggerProvider := log.NewLoggerProvider(
+		log.WithProcessor(log.NewBatchProcessor(logExporter)),
+	)
+	return loggerProvider, nil
+}
+```
+
+{{% /code-block %}}
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/sdk-setup/index.md b/content/en/docs/learn/getting-started/sdk-setup/index.md
new file mode 100644
index 000000000000..9910ed0d56e4
--- /dev/null
+++ b/content/en/docs/learn/getting-started/sdk-setup/index.md
@@ -0,0 +1,23 @@
+---
+title: Setup the SDK
+description: Add the OpenTelemetry SDK to the sample application
+weight: 20
+---
+
+In this section you will learn how to add the OpenTelemetry SDK to the [sample application](../sample-application/) and
+how to configure it.
+
+## Add Dependencies
+
+In the directory of the [player service](../sample-application/#create-and-launch-the-player-service) run the following
+command to install the OpenTelemetry SDK packages
+
+{{% multicode "add-dependencies" %}}
+
+## Initialize the OpenTelemetry SDK
+
+First, we’ll initialize the OpenTelemetry SDK. This is required for any application that exports telemetry.
+
+Create {{% _var "otel-file" %}} with OpenTelemetry SDK bootstrapping code:
+
+{{% multicode "init-sdk" %}}
\ No newline at end of file
diff --git a/content/en/docs/learn/getting-started/visualization/index.md b/content/en/docs/learn/getting-started/visualization/index.md
new file mode 100644
index 000000000000..1d47fd89f480
--- /dev/null
+++ b/content/en/docs/learn/getting-started/visualization/index.md
@@ -0,0 +1,7 @@
+---
+title: Visualize Telemetry
+description: 
+weight: 60
+---
+
+You will see different open source solutions that allow you to visualize your telemetry.
\ No newline at end of file
diff --git a/layouts/shortcodes/_var.html b/layouts/shortcodes/_var.html
new file mode 100644
index 000000000000..4ae71bb3958c
--- /dev/null
+++ b/layouts/shortcodes/_var.html
@@ -0,0 +1,8 @@
+{{ $name := .Get 0 }}
+{{ $varOrdinal := .Ordinal -}}
+
+{{- range $index, $element := .Page.Resources -}}
+    {{ $entryid := printf "code-vars-%v-%v-%v" $varOrdinal $index $element.Title | anchorize -}}
+    {{ $classname := printf "code-vars-%v" $element.Title | anchorize -}}
+    <code id="{{ $entryid }}" class="code-vars {{ $classname }}" style="display: none;">{{ index $element.Params $name }} </code>
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/shortcodes/code-and-text.html b/layouts/shortcodes/code-and-text.html
deleted file mode 100644
index 648dab90ba48..000000000000
--- a/layouts/shortcodes/code-and-text.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{{- $code := .Get "code" -}}
-{{- $pageName := (printf "%s/%s" .Page.Path $code) -}}
-{{- $codePage := .Site.GetPage $pageName -}}
-
-
-<div class="container-fluid gx-0"><div class="row"><div class="col">{{ .Inner }}</div><div class="col">{{ $codePage.Content }}</div></div></div>
\ No newline at end of file
diff --git a/layouts/shortcodes/code-block.html b/layouts/shortcodes/code-block.html
new file mode 100644
index 000000000000..8282e562f81c
--- /dev/null
+++ b/layouts/shortcodes/code-block.html
@@ -0,0 +1,2 @@
+{{ $blockName := .Get 0 }}
+{{ .Page.Store.Set $blockName .Inner }}
diff --git a/layouts/shortcodes/learn/code.html b/layouts/shortcodes/learn/code.html
deleted file mode 100644
index fd56b72d0732..000000000000
--- a/layouts/shortcodes/learn/code.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="col">
-{{ .Inner }}
-</div>
diff --git a/layouts/shortcodes/learn/row.html b/layouts/shortcodes/learn/row.html
deleted file mode 100644
index 30e2aae7575c..000000000000
--- a/layouts/shortcodes/learn/row.html
+++ /dev/null
@@ -1 +0,0 @@
-<div class="container-fluid gx-0"><div class="row">{{ .Inner  }}</div></div>
diff --git a/layouts/shortcodes/learn/text.html b/layouts/shortcodes/learn/text.html
deleted file mode 100644
index fd56b72d0732..000000000000
--- a/layouts/shortcodes/learn/text.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="col">
-{{ .Inner }}
-</div>
diff --git a/layouts/shortcodes/multicode.html b/layouts/shortcodes/multicode.html
new file mode 100644
index 000000000000..0eb57191df3c
--- /dev/null
+++ b/layouts/shortcodes/multicode.html
@@ -0,0 +1,48 @@
+{{- $code := default "none" (.Get 0) -}}
+{{ $tabPaneOrdinal := .Ordinal -}}
+
+{{ $activeSet := false -}}
+
+<ul class="nav nav-tabs justify-content-end" id="tabs-{{ $tabPaneOrdinal }}" role="tablist">
+    <form>
+        <div class="input-group">
+        <div class="input-group-text">
+            Language: 
+        </div>
+        <select class="form-select">
+            {{- range $index, $element := where .Page.Resources "Title" "ne" "" -}}
+                {{ $isActive := (not $activeSet) -}}
+                {{ $entryid := printf "tabs-%02v-%v" $tabPaneOrdinal $index | anchorize -}}
+                {{ $tabid := printf "tabs-%02v-%v-tab" $tabPaneOrdinal $index | anchorize -}}
+                <option class="
+                {{- if $isActive -}}
+                  {{ $activeSet = true }} active
+                {{- end -}}"
+                    data-td-tp-persist="{{ .Title | lower }}" data-bs-toggle="tab" id="{{ $tabid }}" data-bs-target="#{{ $entryid }}" value="tabs-{{ $tabPaneOrdinal }}-00">{{ .Title }}</option>
+            {{- end -}}
+        </select>
+    </div>
+    </form>
+</ul>
+
+
+{{ $activeSet = false -}}
+
+<div class="tab-content" id="tabs-{{ $tabPaneOrdinal }}-content">
+    {{- range $index, $element := where .Page.Resources "Title" "ne" "" -}}
+        {{ $isActive := (not $activeSet) -}}
+        {{ $entryid := printf "tabs-%02v-%v" $tabPaneOrdinal $index | anchorize -}}
+        {{ $tabid := printf "tabs-%02v-%v-tab" $tabPaneOrdinal $index | anchorize -}}
+        <div class="tab-body tab-pane fade
+        {{- if $isActive -}}
+          {{ $activeSet = true }} show active
+        {{- end }}" id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}" tabindex="2"
+            aria-labelledby="tabs-{{ $tabPaneOrdinal }}-01-tab">
+            {{- $noop := .Content -}}
+            {{- .Store.Get $code -}}
+        </div>
+    {{- end -}}
+</div>
+
+
+

From a52ab44221e37ed321aadf6f5a03ff0326ec872c Mon Sep 17 00:00:00 2001
From: svrnm <neumanns@cisco.com>
Date: Wed, 9 Oct 2024 10:18:12 +0200
Subject: [PATCH 3/3] more words

Signed-off-by: svrnm <neumanns@cisco.com>
---
 assets/js/navScroll.js                        | 51 +++++++++--------
 content/en/docs/learn/_index.md               |  7 ++-
 .../en/docs/learn/best-practices/_index.md    |  2 +-
 .../en/docs/learn/getting-started/_index.md   |  2 +-
 .../getting-started/add-context/index.md      |  5 +-
 .../getting-started/add-telemetry/index.md    | 28 ++++-----
 .../collector-setup/sdk-setup/index.md        |  8 +--
 .../correlate-across-services/index.md        | 10 ++--
 .../getting-started/export-telemetry/index.md |  9 +--
 .../en/docs/learn/getting-started/overview.md | 51 +++++++++++------
 .../sample-application/code/go.md             | 12 ++--
 .../sample-application/code/javascript.md     | 10 ++--
 .../sample-application/code/typescript.md     | 11 ++--
 .../sample-application/index.md               | 57 +++++++++++--------
 .../getting-started/sdk-setup/code/go.md      |  9 ++-
 .../learn/getting-started/sdk-setup/index.md  | 14 +++--
 .../getting-started/visualization/index.md    |  5 +-
 17 files changed, 165 insertions(+), 126 deletions(-)

diff --git a/assets/js/navScroll.js b/assets/js/navScroll.js
index bbbb02d880da..fc3f59a82e8c 100644
--- a/assets/js/navScroll.js
+++ b/assets/js/navScroll.js
@@ -1,4 +1,6 @@
-const { validateAdditionalItems } = require("ajv/dist/vocabularies/applicator/additionalItems");
+const {
+  validateAdditionalItems,
+} = require('ajv/dist/vocabularies/applicator/additionalItems');
 
 // Check If an Element is Visible in the Viewport
 function isInViewport(element) {
@@ -7,7 +9,7 @@ function isInViewport(element) {
     rect.top >= 0 &&
     rect.left >= 0 &&
     rect.bottom <=
-    (window.innerHeight || document.documentElement.clientHeight) &&
+      (window.innerHeight || document.documentElement.clientHeight) &&
     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
   );
 }
@@ -18,27 +20,30 @@ if (ele && !isInViewport(ele)) {
   ele.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
 }
 
-
 let _activeVar = '';
 
-document.querySelectorAll('option[data-bs-toggle="tab"]').forEach(function (tab) {
-  tab.addEventListener('show.bs.tab', function (event) {
-    let _newVar = event.target.textContent.toLowerCase();
-    if (_activeVar != _newVar) {
-      console.log('activate')
-      _activeVar = _newVar;
-      document.querySelectorAll(`.code-vars`).forEach(function (v) {
-        v.style.display = 'none';
-      });
-      document.querySelectorAll(`.code-vars-${_activeVar}`).forEach(function (v) {
-        v.style.display = 'inline';
-      });
-    }
-  })
+document
+  .querySelectorAll('option[data-bs-toggle="tab"]')
+  .forEach(function (tab) {
+    tab.addEventListener('show.bs.tab', function (event) {
+      let _newVar = event.target.textContent.toLowerCase();
+      if (_activeVar != _newVar) {
+        console.log('activate');
+        _activeVar = _newVar;
+        document.querySelectorAll(`.code-vars`).forEach(function (v) {
+          v.style.display = 'none';
+        });
+        document
+          .querySelectorAll(`.code-vars-${_activeVar}`)
+          .forEach(function (v) {
+            v.style.display = 'inline';
+          });
+      }
+    });
 
-  tab.addEventListener('shown.bs.tab', function (event) {
-    if(event.target.classList.contains('active')) {
-      event.target.selected = true;
-    }
-  })
-});
\ No newline at end of file
+    tab.addEventListener('shown.bs.tab', function (event) {
+      if (event.target.classList.contains('active')) {
+        event.target.selected = true;
+      }
+    });
+  });
diff --git a/content/en/docs/learn/_index.md b/content/en/docs/learn/_index.md
index d4f0c8149a55..2444b0c2dc96 100644
--- a/content/en/docs/learn/_index.md
+++ b/content/en/docs/learn/_index.md
@@ -12,6 +12,7 @@ If you are new to OpenTelemetry, we recommend that you dive into the
 [Getting Started](./getting-started/) first. By doing them, you will learn
 hands-on about the main concepts, features and components of OpenTelemetry.
 
-After completing the [Getting Started](./getting-started/), you can either dive into the [Best Practices](./best-practices/),
-and learn more advanced topics using hands on tutorials, or you can explore other
-sections of the [OpenTelemetry Documentation](/docs) based on your needs and learning goals.
\ No newline at end of file
+After completing the [Getting Started](./getting-started/), you can either dive
+into the [Best Practices](./best-practices/), and learn more advanced topics
+using hands on tutorials, or you can explore other sections of the
+[OpenTelemetry Documentation](/docs) based on your needs and learning goals.
diff --git a/content/en/docs/learn/best-practices/_index.md b/content/en/docs/learn/best-practices/_index.md
index c1c42d4914cd..9208caef4b97 100644
--- a/content/en/docs/learn/best-practices/_index.md
+++ b/content/en/docs/learn/best-practices/_index.md
@@ -3,4 +3,4 @@ title: Best Practices
 description:
 weight: 90
 aliases: [/docs/getting-started]
----
\ No newline at end of file
+---
diff --git a/content/en/docs/learn/getting-started/_index.md b/content/en/docs/learn/getting-started/_index.md
index 25997d686add..d6ba41a23052 100644
--- a/content/en/docs/learn/getting-started/_index.md
+++ b/content/en/docs/learn/getting-started/_index.md
@@ -3,4 +3,4 @@ title: Getting Started
 description:
 weight: 10
 aliases: [/docs/getting-started]
----
\ No newline at end of file
+---
diff --git a/content/en/docs/learn/getting-started/add-context/index.md b/content/en/docs/learn/getting-started/add-context/index.md
index f76956a5389d..cdf0c983b2a4 100644
--- a/content/en/docs/learn/getting-started/add-context/index.md
+++ b/content/en/docs/learn/getting-started/add-context/index.md
@@ -1,8 +1,9 @@
 ---
 title: Add Context
-description: 
+description:
 weight: 90
 ---
 
 In this section you will learn about Resources, Instrumentation Scope, Exemplars
-and other ways that allow you to add more context to different kinds of telemetry.
\ No newline at end of file
+and other ways that allow you to add more context to different kinds of
+telemetry.
diff --git a/content/en/docs/learn/getting-started/add-telemetry/index.md b/content/en/docs/learn/getting-started/add-telemetry/index.md
index a301cbc7bb3c..45a87cc56a8c 100644
--- a/content/en/docs/learn/getting-started/add-telemetry/index.md
+++ b/content/en/docs/learn/getting-started/add-telemetry/index.md
@@ -10,18 +10,20 @@ add telemetry to your custom code.
 
 ## Instrumenting libraries
 
-As a first step, you will learn how to extract traces, metrics and logs from your
-dependencies. There are three different situations you will encounter, when looking
-into the observability of a library or framework:
-
-- The library is _natively instrumented_, and comes with OpenTelemetry support by default. You can get traces, metrics and logs emitted from that library by adding
-  and setting up the OpenTelemetry SDK with your app.
-- If a library is not _natively instrumented_, there might be an _instrumnetation library_ available, which is an additional dependency you can add to your project.
-  This instrumentation library will inject OpenTelemetry API calls into the other library, such that it will emit telemetry.
-- In some cases, you will encounter libraries which are neither _natively instrumented_ nor can be instrumented using an existing _instrumentation library_. We will
-  skip this situation in this beginners tutorial.
-
-_tbd_
+As a first step, you will learn how to extract traces, metrics and logs from
+your dependencies. There are three different situations you will encounter, when
+looking into the observability of a library or framework:
+
+- The library is _natively instrumented_, and comes with OpenTelemetry support
+  by default. You can get traces, metrics and logs emitted from that library by
+  adding and setting up the OpenTelemetry SDK with your app.
+- If a library is not _natively instrumented_, there might be an
+  _instrumnetation library_ available, which is an additional dependency you can
+  add to your project. This instrumentation library will inject OpenTelemetry
+  API calls into the other library, such that it will emit telemetry.
+- In some cases, you will encounter libraries which are neither _natively
+  instrumented_ nor can be instrumented using an existing _instrumentation
+  library_. We will skip this situation in this beginners tutorial.
 
 ### Using natively instrumented libraries
 
@@ -37,4 +39,4 @@ Add logs, metrics, traces
 
 ### Add metrics
 
-### Add logs
\ No newline at end of file
+### Add logs
diff --git a/content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md b/content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md
index 40c5aa0870d9..3347e2399b62 100644
--- a/content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md
+++ b/content/en/docs/learn/getting-started/collector-setup/sdk-setup/index.md
@@ -1,11 +1,11 @@
 ---
 title: Setup the Collector
-description: 
+description:
 weight: 50
 ---
 
 In this section you will learn how you can setup common receivers, processors,
 connectors and exporters of the OpenTelemetry collector. You will use the OTLP
-receiver to capture data from your application, then transform it using the 
-`transform processor` and finally export the telemetry to the console or to
-an OTLP compatible backend that can visualize your telemetry.
\ No newline at end of file
+receiver to capture data from your application, then transform it using the
+`transform processor` and finally export the telemetry to the console or to an
+OTLP compatible backend that can visualize your telemetry.
diff --git a/content/en/docs/learn/getting-started/correlate-across-services/index.md b/content/en/docs/learn/getting-started/correlate-across-services/index.md
index 2c05a9dd7e6c..7a2296290700 100644
--- a/content/en/docs/learn/getting-started/correlate-across-services/index.md
+++ b/content/en/docs/learn/getting-started/correlate-across-services/index.md
@@ -1,10 +1,10 @@
 ---
 title: Correlate across Services
-description: 
+description:
 weight: 70
 ---
 
-In this section we will add the coordinator service and a second player service to
-your application. You will learn how OpenTelemetry propagates information across
-service boundaries, such that you can see telemetry being stitched together across
-services in your visualization backend. 
\ No newline at end of file
+In this section we will add the coordinator service and a second player service
+to your application. You will learn how OpenTelemetry propagates information
+across service boundaries, such that you can see telemetry being stitched
+together across services in your visualization backend.
diff --git a/content/en/docs/learn/getting-started/export-telemetry/index.md b/content/en/docs/learn/getting-started/export-telemetry/index.md
index cba68c7cee73..be7e3272c42d 100644
--- a/content/en/docs/learn/getting-started/export-telemetry/index.md
+++ b/content/en/docs/learn/getting-started/export-telemetry/index.md
@@ -4,12 +4,13 @@ description: Export telemetry to the OpenTelemetry Collector or a backend
 weight: 40
 ---
 
-In this section you will learn how to export the telemetry your app is generating.
-You will output your telemetry to the console, then use the OTLP exporter to
-send telemetry to the OpenTelemetry collector or a compatible backend.
+In this section you will learn how to export the telemetry your app is
+generating. You will output your telemetry to the console, then use the OTLP
+exporter to send telemetry to the OpenTelemetry collector or a compatible
+backend.
 
 ## Export to the console
 
 ## Export via OTLP
 
-## Other exporters
\ No newline at end of file
+## Other exporters
diff --git a/content/en/docs/learn/getting-started/overview.md b/content/en/docs/learn/getting-started/overview.md
index 79c9980531c0..5fa7975f5817 100644
--- a/content/en/docs/learn/getting-started/overview.md
+++ b/content/en/docs/learn/getting-started/overview.md
@@ -1,30 +1,45 @@
 ---
-title: >- 
-    Overview
+title: >-
+  Overview
 description: What you'll be building
 weight: -1
 ---
 
-For this tutorial, you will be starting with an _uninstrumented_ distributed [sample app](./sample-application/). _Uninstrumented_ means, that this
-app will initially not have any code, that will emit telemetry, such as [traces](/docs/concepts/signals/traces), [metrics](/docs/concepts/signals/metrics) and [logs](/docs/concepts/signals/logs).
-
-You will [add the OpenTelemetry SDK](./sdk-setup/code/) to that application, and afterwards [_instrument_](./add-telemetry/) the application by adding traces, metrics
-and logs. You will do that, for your dependencies and for your custom code.
-
-When you have successfully instrumented the app, you will learn how to [export your telemetry](./export-telemetry/) to the console and then using OTLP
-to the OpenTelemetry collector. You will see how you can [receive telemetry with the collector](./collector-setup/), process that telemetry and eventually
-export it to a backend, that can [visualize your data](./visualization/).
-
-Finally, you will learn how OpenTelemetry can [correlate telemetry across service boundaries](./correlate-across-services/), and how you can [add more context](./add-context/), like service, container or
+For this tutorial, you will be starting with an _uninstrumented_ distributed
+[sample app](./sample-application/). _Uninstrumented_ means, that this app will
+initially not have any code, that will emit telemetry, such as
+[traces](/docs/concepts/signals/traces),
+[metrics](/docs/concepts/signals/metrics) and
+[logs](/docs/concepts/signals/logs).
+
+You will [add the OpenTelemetry SDK](./sdk-setup/code/) to that application, and
+afterwards [_instrument_](./add-telemetry/) the application by adding traces,
+metrics and logs. You will do that, for your dependencies and for your custom
+code.
+
+When you have successfully instrumented the app, you will learn how to
+[export your telemetry](./export-telemetry/) to the console and then using OTLP
+to the OpenTelemetry collector. You will see how you can
+[receive telemetry with the collector](./collector-setup/), process that
+telemetry and eventually export it to a backend, that can
+[visualize your data](./visualization/).
+
+Finally, you will learn how OpenTelemetry can
+[correlate telemetry across service boundaries](./correlate-across-services/),
+and how you can [add more context](./add-context/), like service, container or
 host information to your telemetry.
 
-By the end of the tutorial, you will have learned how to instrument your own app using OpenTelemetry.
+By the end of the tutorial, you will have learned how to instrument your own app
+using OpenTelemetry.
 
-Start by setting up the [sample application](./sample-application/) that will be used throughout the tutorial.
+Start by setting up the [sample application](./sample-application/) that will be
+used throughout the tutorial.
 
 {{% alert title="Note" color="info" %}}
 
-You can follow the tutorial using your own application as well, but we recommend that you use the provided [sample application](./sample-application.md)
-when you go through it for the first time, such that you have an easier time when you need to troubleshoot or go back some steps.
+You can follow the tutorial using your own application as well, but we recommend
+that you use the provided [sample application](./sample-application.md) when you
+go through it for the first time, such that you have an easier time when you
+need to troubleshoot or go back some steps.
 
-{{% /alert %}}
\ No newline at end of file
+{{% /alert %}}
diff --git a/content/en/docs/learn/getting-started/sample-application/code/go.md b/content/en/docs/learn/getting-started/sample-application/code/go.md
index ccadfa2e51c0..66fbc63640ea 100644
--- a/content/en/docs/learn/getting-started/sample-application/code/go.md
+++ b/content/en/docs/learn/getting-started/sample-application/code/go.md
@@ -2,17 +2,17 @@
 headless: true
 title: Go
 params:
-    app-file: main.go
-    lib-file: rolldice.go
+  app-file: main.go
+  lib-file: rolldice.go
 ---
+
 {{% code-block "init" %}}
 
 ```bash
 go mod init dice
 ```
 
-{{% /code-block %}}
-{{% code-block "app-file" %}}
+{{% /code-block %}} {{% code-block "app-file" %}}
 
 ```go
 /* main.go */
@@ -28,7 +28,6 @@ func main() {
 
 	log.Fatal(http.ListenAndServe(":8080", nil))
 }
-
 ```
 
 {{% /code-block %}}
@@ -54,7 +53,6 @@ func rolldice(w http.ResponseWriter, r *http.Request) {
 		log.Printf("Write failed: %v\n", err)
 	}
 }
-
 ```
 
 {{% /code-block %}}
@@ -66,4 +64,4 @@ $ node app.js
 Listening for requests on http://localhost:8080
 ```
 
-{{% /code-block %}}
\ No newline at end of file
+{{% /code-block %}}
diff --git a/content/en/docs/learn/getting-started/sample-application/code/javascript.md b/content/en/docs/learn/getting-started/sample-application/code/javascript.md
index 54b30bf841b6..559b7e3f1ce9 100644
--- a/content/en/docs/learn/getting-started/sample-application/code/javascript.md
+++ b/content/en/docs/learn/getting-started/sample-application/code/javascript.md
@@ -2,9 +2,10 @@
 headless: true
 title: JavaScript
 params:
-    app-file: app.js
-    lib-file: dice.js
+  app-file: app.js
+  lib-file: dice.js
 ---
+
 {{% code-block "init" %}}
 
 ```bash
@@ -12,8 +13,7 @@ npm init -y
 npm install express
 ```
 
-{{% /code-block %}}
-{{% code-block "app-file" %}}
+{{% /code-block %}} {{% code-block "app-file" %}}
 
 ```javascript
 /*app.js*/
@@ -75,4 +75,4 @@ $ node app.js
 Listening for requests on http://localhost:8080
 ```
 
-{{% /code-block %}}
\ No newline at end of file
+{{% /code-block %}}
diff --git a/content/en/docs/learn/getting-started/sample-application/code/typescript.md b/content/en/docs/learn/getting-started/sample-application/code/typescript.md
index 254163fb281d..5879d08ee541 100644
--- a/content/en/docs/learn/getting-started/sample-application/code/typescript.md
+++ b/content/en/docs/learn/getting-started/sample-application/code/typescript.md
@@ -2,9 +2,10 @@
 headless: true
 title: Typescript
 params:
-    app-file: app.ts
-    lib-file: dice.ts
+  app-file: app.ts
+  lib-file: dice.ts
 ---
+
 {{% code-block "init" %}}
 
 ```bash
@@ -19,8 +20,7 @@ npm install typescript \
 npx tsc --init
 ```
 
-{{% /code-block %}}
-{{% code-block "app-file" %}}
+{{% /code-block %}} {{% code-block "app-file" %}}
 
 ```javascript
 /*app.ts*/
@@ -44,7 +44,6 @@ app.get('/rolldice', (req, res) => {
 app.listen(PORT, () => {
   console.log(`Listening for requests on http://localhost:${PORT}`);
 });
-
 ```
 
 {{% /code-block %}}
@@ -75,4 +74,4 @@ $ npx ts-node app.ts
 Listening for requests on http://localhost:8080
 ```
 
-{{% /code-block %}}
\ No newline at end of file
+{{% /code-block %}}
diff --git a/content/en/docs/learn/getting-started/sample-application/index.md b/content/en/docs/learn/getting-started/sample-application/index.md
index 4b591f4cd109..a18a81df2b76 100644
--- a/content/en/docs/learn/getting-started/sample-application/index.md
+++ b/content/en/docs/learn/getting-started/sample-application/index.md
@@ -4,9 +4,9 @@ description:
 weight: 11
 ---
 
-The sample application is a "dice game": a game coordinator service will ask
-two (or more) player services for a random number between 1 and 6. The player
-with the highest number wins.
+The sample application is a "dice game": a game coordinator service will ask two
+(or more) player services for a random number between 1 and 6. The player with
+the highest number wins.
 
 The first few chapters of this tutorial will focus on the player service, which
 is a basic HTTP application, that has an API endpoint `/rolldice` which returns
@@ -24,21 +24,23 @@ cd player-service
 
 ### Dependencies
 
-In that new directory, run the following command in a terminal window to initialize a new project, and to add all the
-dependencies needed.
+In that new directory, run the following command in a terminal window to
+initialize a new project, and to add all the dependencies needed.
 
 {{% multicode "init" %}}
 
 ### Code
 
-The player service consists of two files: an application file for the logic of the HTTP server, and a library file that
-will handle the dice rolling. 
+The player service consists of two files: an application file for the logic of
+the HTTP server, and a library file that will handle the dice rolling.
 
-First, create the application file named {{% _var app-file %}} with the following code in it:
+First, create the application file named {{% _var app-file %}} with the
+following code in it:
 
 {{% multicode "app-file" %}}
 
-Next, create the library file named {{% _var lib-file %}} with the following code in it:
+Next, create the library file named {{% _var lib-file %}} with the following
+code in it:
 
 {{% multicode "lib-file" %}}
 
@@ -48,49 +50,56 @@ Build and run the application with the following command
 
 {{% multicode "run-app" %}}
 
-To verify that your player service is running, either open <http://localhost:8080/rolldice> in your web browser or run the following in the command line:
+To verify that your player service is running, either open
+<http://localhost:8080/rolldice> in your web browser or run the following in the
+command line:
 
 ```bash
 curl http://localhost:8080/rolldice
 ```
 
-For the next sections of the tutorial all you need is the player service, so you can continue with [setting up the OpenTelemetry SDK](../setup-sdk).
+For the next sections of the tutorial all you need is the player service, so you
+can continue with [setting up the OpenTelemetry SDK](../setup-sdk).
 
-You can come back later here, when you will learn how to [correlate telemetry across services](../correlate-across-services/).
+You can come back later here, when you will learn how to
+[correlate telemetry across services](../correlate-across-services/).
 
 ## Create and launch the game coordinator
 
 For setting up the game coordinator, create another new directory, that lives
 side by side with the player service:
 
-```
+```shell
 cd .. # if you are in the player-service directory
 mkdir coordinator-service
 cd coordinator-service
 ```
 
-### Dependencies
+### Dependencies {#game-coordinator-dependencies}
 
-The game coordinator has the same dependencies. So, you can run the same code to initialize a new project, and to add all the
-dependencies needed.
+The game coordinator has the same dependencies. So, you can run the same code to
+initialize a new project, and to add all the dependencies needed.
 
 {{% multicode "init" %}}
 
-### Code
+### Code {#game-coordinator-code}
 
-Create the application file named {{% _var app-file %}} with the following code in it:
+Create the application file named {{% _var app-file %}} with the following code
+in it:
 
 {{% multicode "coordinator-app" %}}
 
-### Test
+### Test {#game-coordinator-test}
 
-To verify that your coordinator service is running and connecting properly to your one player service,  run the following in the command line:
+To verify that your coordinator service is running and connecting properly to
+your one player service, run the following in the command line:
 
 ```bash
 ./game-coordinator
 ```
 
-Since you only have one player service currently running, you will see something like the following printed to the console:
+Since you only have one player service currently running, you will see something
+like the following printed to the console:
 
 ```text
 Player 1 wins: 6
@@ -98,10 +107,12 @@ Player 1 wins: 6
 
 ## Run multiple player services
 
-To have multiple player compete, go back to the folder of the player service and run a second instance:
+To have multiple player compete, go back to the folder of the player service and
+run a second instance:
 
 {{% multicode "run-app" %}}
 
 ## Next Step
 
-After you have setup your sample application, you can continue with [setting up the OpenTelemetry SDK](../sdk-setup/).
\ No newline at end of file
+After you have setup your sample application, you can continue with
+[setting up the OpenTelemetry SDK](../sdk-setup/).
diff --git a/content/en/docs/learn/getting-started/sdk-setup/code/go.md b/content/en/docs/learn/getting-started/sdk-setup/code/go.md
index d5167914b89e..67170407a25b 100644
--- a/content/en/docs/learn/getting-started/sdk-setup/code/go.md
+++ b/content/en/docs/learn/getting-started/sdk-setup/code/go.md
@@ -2,8 +2,9 @@
 headless: true
 title: Go
 params:
-    otel-file: otel.go
+  otel-file: otel.go
 ---
+
 {{% code-block "add-dependencies" %}}
 
 ```bash
@@ -24,7 +25,9 @@ go get "go.opentelemetry.io/otel" \
 {{% /code-block  %}}
 
 {{% code-block "init-sdk" %}}
-> If you’re only using tracing or metrics, you can omit the corresponding TracerProvider or MeterProvider initialization code.
+
+> If you’re only using tracing or metrics, you can omit the corresponding
+> TracerProvider or MeterProvider initialization code.
 
 ```go
 package main
@@ -150,4 +153,4 @@ func newLoggerProvider() (*log.LoggerProvider, error) {
 }
 ```
 
-{{% /code-block %}}
\ No newline at end of file
+{{% /code-block %}}
diff --git a/content/en/docs/learn/getting-started/sdk-setup/index.md b/content/en/docs/learn/getting-started/sdk-setup/index.md
index 9910ed0d56e4..d2e537e44f65 100644
--- a/content/en/docs/learn/getting-started/sdk-setup/index.md
+++ b/content/en/docs/learn/getting-started/sdk-setup/index.md
@@ -4,20 +4,22 @@ description: Add the OpenTelemetry SDK to the sample application
 weight: 20
 ---
 
-In this section you will learn how to add the OpenTelemetry SDK to the [sample application](../sample-application/) and
-how to configure it.
+In this section you will learn how to add the OpenTelemetry SDK to the
+[sample application](../sample-application/) and how to configure it.
 
 ## Add Dependencies
 
-In the directory of the [player service](../sample-application/#create-and-launch-the-player-service) run the following
-command to install the OpenTelemetry SDK packages
+In the directory of the
+[player service](../sample-application/#create-and-launch-the-player-service)
+run the following command to install the OpenTelemetry SDK packages
 
 {{% multicode "add-dependencies" %}}
 
 ## Initialize the OpenTelemetry SDK
 
-First, we’ll initialize the OpenTelemetry SDK. This is required for any application that exports telemetry.
+First, we’ll initialize the OpenTelemetry SDK. This is required for any
+application that exports telemetry.
 
 Create {{% _var "otel-file" %}} with OpenTelemetry SDK bootstrapping code:
 
-{{% multicode "init-sdk" %}}
\ No newline at end of file
+{{% multicode "init-sdk" %}}
diff --git a/content/en/docs/learn/getting-started/visualization/index.md b/content/en/docs/learn/getting-started/visualization/index.md
index 1d47fd89f480..c2e26ab4a3db 100644
--- a/content/en/docs/learn/getting-started/visualization/index.md
+++ b/content/en/docs/learn/getting-started/visualization/index.md
@@ -1,7 +1,8 @@
 ---
 title: Visualize Telemetry
-description: 
+description:
 weight: 60
 ---
 
-You will see different open source solutions that allow you to visualize your telemetry.
\ No newline at end of file
+You will see different open source solutions that allow you to visualize your
+telemetry.