feat: Multi-step indicator DOCS-470 (#1606)

* feat: Nav multistep

* feat: Add multistep navigation to the quickstart flow

* wip: Update codacy-mkdocs-material submodule

* feat: Improve styling

* feat: Update codacy-mkdocs-material

* feat: Update codacy-mkdocs-material

* feat: Nav multistep quickstart naming

* feat: Update codacy-mkdocs-material

* feat: Introduce multistep navigation

* feat: Update codacy-mkdocs-material

* feat: Update codacy-mkdocs-material

* feat: Update codacy-mkdocs-material

---------

Co-authored-by: Paulo Ribeiro <[email protected]>

Author: nicklem

docs/assets/includes/nav-multistep-quickstart.md

@@ -0,0 +1,39 @@
+<nav class="nav-multistep">
+    <p>This page is part of the following guided path:</p>
+    <ol>
+        <li class="{% if page.meta.nav_step == 0 %}nav-multistep__step--active{% endif %}">
+            {% if page.meta.nav_step == 0 %}
+                <p>
+                    Adding your first repository
+                </p>
+            {% else %}
+                <a href="/getting-started/codacy-quickstart#adding-your-first-repository">
+                    Adding your first repository
+                </a>
+            {% endif %}
+        </li>
+        <li class="{% if page.meta.nav_step == 1 %}nav-multistep__step--active{% endif %}">
+            {% if page.meta.nav_step == 1 %}
+                <p>
+                    Configuring your repository
+                </p>
+            {% else %}
+                <a href="/getting-started/configuring-your-repository#configuring-your-repository">
+                    Configuring your repository
+                </a>
+            {% endif %}
+        </li>
+        <li class="{% if page.meta.nav_step == 2 %}nav-multistep__step--active{% endif %}">
+            {% if page.meta.nav_step == 2 %}
+                <p>
+                    Integrating Codacy with your Git workflow
+                </p>
+            {% else %}
+                <a href="/getting-started/integrating-codacy-with-your-git-workflow#integrating-codacy-with-your-git-workflow">
+                    Integrating Codacy with your Git workflow
+                </a>
+            {% endif %}
+        </li>
+    </ol>
+</nav>
+

docs/getting-started/codacy-quickstart.md

@@ -1,5 +1,6 @@
 ---
 description: Set up Codacy to automatically analyze your source code and identify issues as you go, helping you develop software more efficiently with fewer issues down the line. Codacy notifies you of security issues, code coverage, duplication, and complexity in every commit and pull request.
+nav_step: 0
 ---
 
 # Codacy quickstart (5 min)
@@ -17,6 +18,10 @@ By integrating with your Git provider, Codacy keeps track of your team’s work,
 -   **Duplication**: the amount of duplicated portions of code
 -   **Coverage**: the percentage of lines of code covered by automated tests
 
+## Adding your first repository
+
+{% include-markdown "../assets/includes/nav-multistep-quickstart.md" %}
+
 To get started, head to [<span class="skip-vale">codacy.com</span>](https://www.codacy.com/) and click **Get started**. Then, follow these steps:
 
 1.  [Signing up](#signing-up)

docs/getting-started/configuring-your-repository.md

@@ -1,10 +1,13 @@
 ---
 description: Configure Codacy to match the coding conventions and best practices that your team may already be following or that you want to promote.
+nav_step: 1
 ---
 
 # Configuring your repository
 
-Once you've [added your first repository](codacy-quickstart.md), it's important that you configure Codacy's analysis tools to match the use cases of your team, such as configuring any coding conventions and best practices that your team may already be following or that you want to promote. It's also critical to review the configurations to avoid reporting false positives or any other issues that don't bring value to your team, which can introduce unwanted delays to the development process.
+{% include-markdown "../assets/includes/nav-multistep-quickstart.md" %}
+
+Once you've added your first repository, it's important that you configure Codacy's analysis tools to match the use cases of your team, such as configuring any coding conventions and best practices that your team may already be following or that you want to promote. It's also critical to review the configurations to avoid reporting false positives or any other issues that don't bring value to your team, which can introduce unwanted delays to the development process.
 
 You can optionally add coverage reports to detail how much of your code is covered by tests and unify your quality and coverage pipelines. You can generate coverage reports and upload them to Codacy using a range of options, such as CI/CD integration, CLI, Docker, GitHub action, and more.
 

docs/getting-started/integrating-codacy-with-your-git-workflow.md

@@ -1,10 +1,13 @@
 ---
 description: Integrate Codacy with your Git workflow to display analysis results and code coverage as status checks on your pull requests and optionally block merging pull requests.
+nav_step: 2
 ---
 
 # Integrating Codacy with your Git workflow
 
-Once you've [configured your repository](configuring-your-repository.md) to best match your use case, integrate Codacy with your Git workflow to display analysis results and code coverage as status checks on your pull requests.
+{% include-markdown "../assets/includes/nav-multistep-quickstart.md" %}
+
+Once you've configured your repository to best match your use case, integrate Codacy with your Git workflow to display analysis results and code coverage as status checks on your pull requests.
 
 In particular, you can configure quality gates to block merging pull requests that don't meet the quality standards of your team. This ensures the quality of the changes to your codebase, preventing the introduction of security issues and untested code.