Create, style, and populate the Tutorials section (#2689)

* chore: Attempting to create the Tutorials navbar item

* docs: Move tutorial over to the new directort and finish basic setup

* docs: Styling for the tutorials sidebar

* chore: Fix gitleaks

* chore: Finish styling the tutorials sidebar

* chore: Remove non-getting-started tutorials from the docs and fix broken links

* chore: Fix the sidebar styles based on team feedback

* docs: add tutorials landing page

* docs: conditionally hide index on simple card

* Update docs/docs-content/tutorials/tutorials.md

Co-authored-by: Karl Cardenas <[email protected]>

* docs: fix formatting

* Update docs/docs-content/tutorials/tutorials.md

Co-authored-by: Karl Cardenas <[email protected]>

* docs: fix formatting

* docs: reword landing page

* docs: fix gap on hideNumber cards

* Doc 951 tutorial side bar (#3180)

* tutorial side bar refactor

* chore: Fix code formatting

---------

Co-authored-by: Yuliia Horbenko <[email protected]>

* fix side bar

* remove svg reference

* add border to privacy settings

* Update sidebars.js

* chore: Resolve rebase

* chore: Add more margin to the Privacy Settings in Docs

* chore: Add redirects for the deleted tutorials

* chore: Clean up old privacy settings from docusaurus.config

* fa import issue

* fix import issue

* Update light-mode.scss

* docs: Update README

* chore: Update the package-lock.json file

* docs: Rename Profiles > Profiles and Packs, move Deploy a Custom Pack to Profiles, fix broken links

* chore: Resolve the strange merge situation

* chore: Comment out empty categories

* chore: Fix broken links

---------

Co-authored-by: addetz <[email protected]>
Co-authored-by: Karl Cardenas <[email protected]>
Co-authored-by: nageshsairam1610 <[email protected]>

.gitleaksignore

@@ -110,3 +110,6 @@ e4040084011d4d7935a589959b96ebc5cfba7a94:docs/docs-content/integrations/kubernet
 e4040084011d4d7935a589959b96ebc5cfba7a94:docs/docs-content/integrations/kubernetes.md:generic-api-key:1125
 e4040084011d4d7935a589959b96ebc5cfba7a94:docs/docs-content/integrations/kubernetes.md:generic-api-key:391
 87bf9f7353f94ac2ecf85da3be3412202de7b72f:docusaurus.config.js:generic-api-key:363
+969ac609f82bacb36093c429adfc096c5a97e10f:docs/docs-content/tutorials/cluster-deployment/pde/deploy-app.md:generic-api-key:1195
+969ac609f82bacb36093c429adfc096c5a97e10f:docs/docs-content/tutorials/cluster-deployment/pde/deploy-app.md:generic-api-key:1232
+969ac609f82bacb36093c429adfc096c5a97e10f:docs/docs-content/tutorials/edge/deploy-cluster.md:generic-api-key:240

README.md

@@ -555,6 +555,75 @@ scheme. The rows of cards are dynamically created according to the list of speci
 />
 ```
 
+## Tutorials Sidebar
+
+This section describes how to publish new tutorials and add new categories to the Tutorials sidebar.
+
+### Add a New Category
+
+To add a new sidebar category to Tutorials, create a new directory under `docs/docs-content/tutorials`. For example,
+let's add a directory called `new-tutorials`.
+
+> [!NOTE]  
+> Each category directory must have at least one **.md** file to render in the sidebar. If you add an empty directory to
+> `sidebars.js`, the build will break.
+
+```shell
+.
+├── _category_.json
+├── cluster-deployment
+│   ├── _category_.json
+│   ├── pcg
+│   │   ├── _category_.json
+│   └── └── deploy-app-pcg.md
+└── new-tutorials
+    ├── _category_.json
+    └── new-tutorial
+```
+
+Then, add the following code to the `tutorialSidebar` array in the `sidebars.js` file.
+
+```js
+tutorialSidebar: [
+  {
+    type: "category",
+    label: string,
+    className: "category",
+    collapsed: false,
+    collapsible: false,
+    items: [{ type: "autogenerated", dirName: "tutorials/new-tutorials" }],
+    customProps: {
+      icon: string,
+    },
+  },
+  ...
+];
+```
+
+Consider the following example for reference.
+
+```js
+tutorialSidebar: [
+    {
+      type: "category",
+      label: "Edge",
+      className: "category",
+      collapsible: false,
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "tutorials/edge" }],
+      customProps: {
+        icon: "microchip",
+      },
+    },
+  ...
+];
+```
+
+### Publish New Tutorials
+
+To add tutorials to an existing category, create a new **.md** file in the respective directory under
+`docs-content/tutorials` and follow the guidance outlined in [Creating Pages](#creating-pages).
+
 ## Partials Component
 
 This is a custom component that allows you to create and use

docs/docs-content/clusters/edge/edgeforge-workflow/palette-canvos/palette-canvos.md

@@ -894,6 +894,6 @@ After building the Edge artifacts and creating an Edge cluster profile, the next
 image to prepare your Edge host. To learn more about utilizing Edge artifacts to prepare Edge hosts and deploy
 Palette-managed Edge clusters, we encourage you to check out the reference resources below.
 
-- [Deploy an Edge Cluster on VMware](../../site-deployment/virtual-deployment/deploy-cluster.md)
+- [Deploy an Edge Cluster on VMware](../../../../tutorials/edge/deploy-cluster.md)
 
 - [Installation](../../site-deployment/stage.md)

docs/docs-content/clusters/edge/site-deployment/site-deployment.md

@@ -41,8 +41,8 @@ particularly useful in testing and learning environments. Refer to
 [Create Edge OVF Templates](./virtual-deployment/create-ovf-template.md) and
 [Provision Edge Host VMs](./virtual-deployment/vm-edge-host.md) to learn how to create Open Virtualization Format (OVF)
 templates and provision Edge hosts using the templates. Or check out the
-[Deploy Edge Cluster on VMware](./virtual-deployment/deploy-cluster.md) for an end-to-end tutorial to learn the Palette
-Edge deployment lifecycle using VMs.
+[Deploy Edge Cluster on VMware](../../../tutorials/edge/deploy-cluster.md) for an end-to-end tutorial to learn the
+Palette Edge deployment lifecycle using VMs.
 
 ## Resources
 

docs/docs-content/clusters/edge/site-deployment/virtual-deployment/virtual-deployment.md

@@ -12,14 +12,14 @@ Palette and deploy clusters on it just like a physical Edge host. This allows yo
 before devoting physical resources.
 
 In addition, thanks to the flexibility of virtual environments, deployment to VMs can also be a way of learning how to
-work with Palette Edge. Check out the [Deploy an Edge Cluster on VMware](./deploy-cluster.md) tutorial, which guides you
-through the entire lifecycle of Edge deployment using virtual machines on VMware.
+work with Palette Edge. Check out the [Deploy an Edge Cluster on VMware](../../../../tutorials/edge/deploy-cluster.md)
+tutorial, which guides you through the entire lifecycle of Edge deployment using virtual machines on VMware.
 
 Once an Edge host is registered with Palette, you can then proceed to allocate the Edge host to a cluster. For more
 information, refer to [Create Cluster Definition](../cluster-deployment.md).
 
 ## Resources
 
-- [Deploy an Edge Cluster on VMware](./deploy-cluster.md)
+- [Deploy an Edge Cluster on VMware](../../../../tutorials/edge/deploy-cluster.md)
 - [Create an Edge OVF Template](./create-ovf-template.md)
 - [Provision an Edge Host VM](./vm-edge-host.md)

docs/docs-content/clusters/pcg/pcg.md

@@ -41,4 +41,4 @@ existing Kubernetes cluster. Refer to the table below to learn more about the su
 
 - [Manage a PCG](./manage-pcg/manage-pcg.md)
 
-- [Deploy App Workloads with a PCG](./deploy-app-pcg.md)
+- [Deploy App Workloads with a PCG](../../tutorials/cluster-deployment/pcg/deploy-app-pcg.md)

docs/docs-content/clusters/public-cloud/deploy-k8s-cluster.md

@@ -1380,8 +1380,9 @@ Palette assures consistency across cluster deployments through cluster profiles.
 deploy applications to a Kubernetes environment with little or no prior Kubernetes knowledge. In a matter of minutes,
 you were able to provision a new Kubernetes cluster and deploy an application.
 
-We encourage you to check out the [Deploy an Application using Palette Dev Engine](/devx/apps/deploy-app) tutorial to
-learn more about Palette. Palette Dev Engine can help you deploy applications more quickly through the usage of
+We encourage you to check out the
+[Deploy an Application using Palette Dev Engine](/tutorials/cluster-deployment/pde/deploy-app) tutorial to learn more
+about Palette. Palette Dev Engine can help you deploy applications more quickly through the usage of
 [virtual clusters](../../glossary-all.md#palette-virtual-cluster). Feel free to check out the reference links below to
 learn more about Palette.
 

docs/docs-content/devx/apps/apps.md

@@ -19,4 +19,4 @@ Check out the resource links below to learn more about Apps.
 
 - [App Logs](logs.md)
 
-- [Deploy an Application using the Palette Dev Engine](deploy-app.md)
+- [Deploy an Application using the Palette Dev Engine](../../tutorials/cluster-deployment/pde/deploy-app.md)

docs/docs-content/devx/apps/create-app.md

@@ -18,7 +18,8 @@ Use the following steps to create and deploy an app to a virtual cluster.
 :::info
 
 A tutorial is available to help you learn how to use Palette Dev Engine by deploying an application. Check out
-[Deploy an Application using Palette Dev Engine](deploy-app.md) to get started with Palette Dev Engine.
+[Deploy an Application using Palette Dev Engine](../../tutorials/cluster-deployment/pde/deploy-app.md) to get started
+with Palette Dev Engine.
 
 :::
 

docs/docs-content/devx/devx.md

@@ -26,8 +26,9 @@ each mode.
 
 ## Get Started
 
-To get started with App Mode, give the tutorial [Deploy an Application using Palette Dev Engine](apps/deploy-app.md) a
-try so that you can learn how to use App Mode with Palette Dev Engine.
+To get started with App Mode, give the tutorial
+[Deploy an Application using Palette Dev Engine](../tutorials/cluster-deployment/pde/deploy-app.md) a try so that you
+can learn how to use App Mode with Palette Dev Engine.
 
 ## Supported Platforms
 

docs/docs-content/devx/enterprise-user.md

@@ -41,7 +41,7 @@ started. Create your application profiles and deploy your applications to Palett
 
 Use the following resource to get started with PDE today.
 
-- [Tutorial](./apps/deploy-app.md).
+- [Tutorial](../tutorials/cluster-deployment/pde/deploy-app.md).
 
 - Learn about [App Mode versus Cluster Mode](../introduction/palette-modes.md).
 

docs/docs-content/devx/services/service-listings/cockroach-db.md

@@ -69,7 +69,7 @@ Palette users can deploy CockroachDB to a virtual cluster by using the following
 7. Deploy the app profile to a Palette Virtual Cluster. Use the
    [Deploy a Virtual Cluster](../../../clusters/palette-virtual-clusters/deploy-virtual-cluster.md#deploy-a-virtual-cluster)
    guide for additional guidance or check out the
-   [Deploy an Application using Palette Dev Engine](../../apps/deploy-app.md) tutorial.
+   [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) tutorial.
 
 ### Validate
 

docs/docs-content/devx/services/service-listings/vault.md

@@ -80,7 +80,8 @@ Use the following steps to learn how to deploy Vault to your virtual cluster.
 
 7. Deploy the app profile to a Palette Virtual Cluster. Use the
    [Deploy a Virtual Cluster](../../../clusters/palette-virtual-clusters/deploy-virtual-cluster.md) guide for additional
-   guidance or check out the [Deploy an Application using Palette Dev Engine](../../apps/deploy-app.md) tutorial.
+   guidance or check out the
+   [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) tutorial.
 
 ### Validate
 

docs/docs-content/getting-started/deploy-k8s-cluster.md

@@ -350,5 +350,6 @@ In this tutorial, you used the cluster profile you created in the previous
 [Create a Cluster Profile](./create-cluster-profile.md) tutorial to deploy a host cluster onto your preferred cloud
 service provider. After the cluster deployed, you verified the Hello Universe application was successfully deployed.
 
-We recommend that you continue to the [Deploy Cluster Profile Updates](./update-k8s-cluster.md) tutorial to learn how to
-update your host cluster.
+We recommend that you continue to the
+[Deploy Cluster Profile Updates](../tutorials/cluster-management/update-maintain/update-k8s-cluster.md) tutorial to
+learn how to update your host cluster.

docs/docs-content/getting-started/getting-started.md

@@ -4,7 +4,7 @@ title: "Getting Started"
 description: "Spectro Cloud Getting Started"
 hide_table_of_contents: true
 sidebar_custom_props:
-  icon: "overview"
+  icon: "flag-checkered"
 tags: ["getting-started"]
 ---
 

docs/docs-content/getting-started/terraform.md

@@ -554,8 +554,9 @@ podman rmi --force ghcr.io/spectrocloud/tutorials:1.1.3
 In this tutorial, you created a cluster profile, which is a template that contains the core layers required to deploy a
 host cluster. You then deployed a host cluster onto your preferred cloud service provider using Terraform.
 
-We encourage you to check out the [Deploy an Application using Palette Dev Engine](../devx/apps/deploy-app.md) tutorial
-to learn more about Palette. Palette Dev Engine can help you deploy applications more quickly through the usage of
+We encourage you to check out the
+[Deploy an Application using Palette Dev Engine](../tutorials/cluster-deployment/pde/deploy-app.md) tutorial to learn
+more about Palette. Palette Dev Engine can help you deploy applications more quickly through the usage of
 [virtual clusters](../glossary-all.md#palette-virtual-cluster). Feel free to check out the reference links below to
 learn more about Palette.
 

docs/docs-content/integrations/community_packs.md

@@ -14,7 +14,7 @@ integrations with Spectro Cloud Palette.
 We welcome all contributions to the Spectro Cloud community packs, either by adding new packs or updating existing
 packs. You can read our
 [Contribution Guidelines](https://github.com/spectrocloud/pack-central?tab=readme-ov-file#contributing) in the community
-packs repository. Check out the [Deploy a Custom Pack](../registries-and-packs/deploy-pack.md) tutorial to learn more
+packs repository. Check out the [Deploy a Custom Pack](../tutorials/profiles/deploy-pack.md) tutorial to learn more
 about how to build and deploy your own custom pack.
 
 :::warning

docs/docs-content/integrations/hello-universe.md

@@ -174,6 +174,6 @@ data "spectrocloud_pack" "hellouniverse" {
 
 - [Hello Universe GitHub Repository](https://github.com/spectrocloud/hello-universe)
 
-- [Deploy a Custom Pack Tutorial](../registries-and-packs/deploy-pack.md)
+- [Deploy a Custom Pack Tutorial](../tutorials/profiles/deploy-pack.md)
 
 - [Registries and Packs](../registries-and-packs/registries-and-packs.md)

docs/docs-content/integrations/kubernetes-support.md

@@ -86,5 +86,6 @@ To learn more about upgrading your cluster and cluster profiles, check out the r
 - [Update a Cluster](../clusters/cluster-management/cluster-updates.md)
 - [Version a Cluster Profile](../profiles/cluster-profiles/modify-cluster-profiles/version-cluster-profile.md)
 
-We also recommend you check out [Deploy Cluster Profile Updates](../clusters/cluster-management/update-k8s-cluster.md)
-tutorial to learn how to update your cluster profile.
+We also recommend you check out
+[Deploy Cluster Profile Updates](../tutorials/cluster-management/update-maintain/update-k8s-cluster.md) tutorial to
+learn how to update your cluster profile.

docs/docs-content/kubernetes-knowlege-hub/how-to/how-to-retrieve-images-from-private-registry.md

@@ -222,8 +222,8 @@ use it in a Kubernetes deployment configuration. This allows you to pull images
 restrictions or limitations.
 
 To learn more about Kubernetes and how to use it to deploy your application, check out
-[Palette's Dev Engine](../../devx/apps/deploy-app.md) and how it can reduce the challenges often encountered with
-deploying apps to Kubernetes. You can also read about
+[Palette's Dev Engine](../../tutorials/cluster-deployment/pde/deploy-app.md) and how it can reduce the challenges often
+encountered with deploying apps to Kubernetes. You can also read about
 [how to deploy a stateless frontend application](/kubernetes-knowlege-hub/tutorials/deploy-stateless-frontend-app) on
 Kubernetes or join our
 [slack channel](https://join.slack.com/t/spectrocloudcommunity/shared_invite/zt-1mw0cgosi-hZJDF_1QU77vF~qNJoPNUQ). Learn

docs/docs-content/profiles/app-profiles/create-app-profiles/create-helm-app-profile.md

@@ -13,8 +13,8 @@ create an app profile that contains a Helm chart.
 :::info
 
 A tutorial is available to help you learn how to use Palette Dev Engine by deploying an application. Check out
-[Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md) to get started with Palette Dev
-Engine.
+[Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) to get started
+with Palette Dev Engine.
 
 :::
 
@@ -98,8 +98,9 @@ Use the following steps to validate that your app profile is available and ready
 
 5. Deploy your application to a virtual cluster to verify all the required configurations and dependencies are correct.
    Review [Create and Manage Apps](../../../devx/apps/create-app.md) to learn how to deploy an app to a virtual cluster.
-   Check out the [Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md) tutorial for a more
-   in-depth guide.
+   Check out the
+   [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) tutorial
+   for a more in-depth guide.
 
 ## Next Steps
 
@@ -113,4 +114,4 @@ common third-party services such as databases, message queues, and more.
 
 - [Create and Manage Apps](../../../devx/apps/create-app.md)
 
-- [Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md)
+- [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md)

docs/docs-content/profiles/app-profiles/create-app-profiles/create-manifest-app-profile.md

@@ -18,8 +18,8 @@ Use the following steps to create an app profile that contains a custom manifest
 :::info
 
 A tutorial is available to help you learn how to use Palette Dev Engine by deploying an application. Check out
-[Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md) to get started with Palette Dev
-Engine.
+[Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) to get started
+with Palette Dev Engine.
 
 :::
 
@@ -101,8 +101,9 @@ Use the following steps to validate that your app profile is available and ready
 
 5. Deploy your application to a virtual cluster to verify all the required configurations and dependencies are correct.
    Review [Create and Manage Apps](../../../devx/apps/create-app.md) to learn how to deploy an app to a virtual cluster.
-   Check out the [Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md) tutorial for a more
-   in-depth guide.
+   Check out the
+   [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) tutorial
+   for a more in-depth guide.
 
 ## Next Steps
 
@@ -116,4 +117,4 @@ common third-party services such as databases, message queues, and more.
 
 - [Create and Manage Apps](../../../devx/apps/create-app.md)
 
-- [Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md)
+- [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md)

docs/docs-content/profiles/app-profiles/create-app-profiles/create-out-of-box-app-profile.md

@@ -14,8 +14,8 @@ object storage, database, and security services. Review the
 :::info
 
 A tutorial is available to help you learn how to use Palette Dev Engine by deploying an application. Check out
-[Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md) to get started with Palette Dev
-Engine.
+[Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) to get started
+with Palette Dev Engine.
 
 :::
 
@@ -82,8 +82,9 @@ Use the following steps to validate that your app profile is available and ready
 
 5. Deploy your application to a virtual cluster to verify all the required configurations and dependencies are correct.
    Review [Create and Manage Apps](../../../devx/apps/create-app.md) to learn how to deploy an app to a virtual cluster.
-   Check out the [Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md) tutorial for a more
-   in-depth guide.
+   Check out the
+   [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md) tutorial
+   for a more in-depth guide.
 
 ## Next Steps
 
@@ -97,4 +98,4 @@ required for common third-party services such as databases, message queues, and
 
 - [Create and Manage Apps](../../../devx/apps/create-app.md)
 
-- [Deploy an Application using Palette Dev Engine](../../../devx/apps/deploy-app.md)
+- [Deploy an Application using Palette Dev Engine](../../../tutorials/cluster-deployment/pde/deploy-app.md)

docs/docs-content/profiles/cluster-profiles/create-cluster-profiles/create-addon-profile/create-helm-addon.md

@@ -63,7 +63,7 @@ Use the following steps to create a cluster profile by adding layers using Helm
    [Profile Customization](../../../profile-customization.md).
 
    For examples of pack structure for a Helm chart-based pack, review
-   [Build a Pack](../../../../registries-and-packs/deploy-pack.md#build-a-pack), and select the appropriate tab.
+   [Build a Pack](../../../../tutorials/profiles/deploy-pack.md#build-a-pack), and select the appropriate tab.
 
    :::
 

docs/docs-content/profiles/cluster-profiles/create-cluster-profiles/create-addon-profile/create-manifest-addon.md

@@ -56,7 +56,7 @@ create a cluster profile by adding layers using manifests.
    [Profile Customization](../../../profile-customization.md).
 
    For examples of pack structure for a manifest-based pack, review
-   [Build a Pack](../../../../registries-and-packs/deploy-pack.md#build-a-pack), and select the appropriate tab.
+   [Build a Pack](../../../../tutorials/profiles/deploy-pack.md#build-a-pack), and select the appropriate tab.
 
    :::
 

docs/docs-content/registries-and-packs/registries/oci-registry/add-oci-packs.md

@@ -14,7 +14,7 @@ different from the legacy Pack registries. To interact with an OCI Pack registry
 :::tip
 
 For guidance on how to add a custom pack to an OCI pack registry, check out the
-[Deploy a Custom Pack](../../deploy-pack.md) tutorial.
+[Deploy a Custom Pack](../../../tutorials/profiles/deploy-pack.md) tutorial.
 
 :::
 

docs/docs-content/tutorials/_category_.json

@@ -0,0 +1,4 @@
+{
+  "position": 1000,
+  "className": "hidden-category"
+}

docs/docs-content/tutorials/cluster-deployment/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Cluster Deployment",
+  "position": 30
+}

docs/docs-content/tutorials/cluster-deployment/data-center/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Data Center",
+  "position": 10
+}

docs/docs-content/tutorials/cluster-deployment/pcg/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Private Cloud Gateway",
+  "position": 20
+}