diff --git a/website/src/app/features/platform-integration/platform-integration.component.html b/website/src/app/features/platform-integration/platform-integration.component.html index 2b7bdae1..e97f63cd 100644 --- a/website/src/app/features/platform-integration/platform-integration.component.html +++ b/website/src/app/features/platform-integration/platform-integration.component.html @@ -35,58 +35,64 @@

Integrate {{ platform.
-
- -
-

- - Quick Start -

-
-
-
1
-
-
Add the OpenTofu snippet
-
Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.
+ +
+
+ +
+

+ + Quick Start with Code + Recommended +

+
+
+
1
+
+
Add the OpenTofu snippet
+
Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.
+
-
-
-
2
-
-
Provider setup and configure variables
-
- Ensure you enter your API key in the provider block and update the required variables in the locals block as needed for your environment. +
+
2
+
+
Provider setup and configure variables
+
+ Ensure you enter your API key in the provider block and update the required variables in the locals block as needed for your environment. +
-
-
-
3
-
-
Deploy with OpenTofu
-
Run tofu init, tofu plan, and tofu apply to provision the integration.
+
+
3
+
+
Deploy with OpenTofu
+
Run tofu init, tofu plan, and tofu apply to provision the integration.
+
-
-
-
✓
-
-
Success!
-
The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.
+
+
✓
+
+
Success!
+
The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.
+
+ + +
+ + 
{{ platform?.terraformSnippet }}
+
- -
- - 
{{ platform?.terraformSnippet }}
-
+
diff --git a/website/src/app/features/template-details/template-details.component.html b/website/src/app/features/template-details/template-details.component.html index 04127a35..84f5cfa0 100644 --- a/website/src/app/features/template-details/template-details.component.html +++ b/website/src/app/features/template-details/template-details.component.html @@ -28,19 +28,29 @@

{{ template.name }}

{{ template.description }}

-
- -
- - View Source Code - + class="inline-block text-sm text-slate-600 hover:text-slate-900 mt-3 transition-colors"> + View source on GitHub
+ +
+ + +
@@ -53,23 +63,6 @@

{{ template.name }}

- - -
-
-

- - Prefer UI over code? You can also import this building block via the meshStack UI instead of using Terraform. -

- -
-
@@ -79,135 +72,91 @@

{{ template.name }}
-
- -
-

- - Setup with OpenTofu/Terraform -

-

- Use this Terraform configuration to create the building block definition directly in meshStack. -

-
-
-
1
-
-
Add the OpenTofu snippet
-
Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.
+ +
+
+ +
+

+ + Setup as code + Recommended +

+

+ Use this Terraform configuration to create the building block definition directly in meshStack. +

+
+
+
1
+
+
Add the OpenTofu snippet
+
Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.
+
-
-
-
2
-
-
Configure variables
-
- Update the required variables in the locals block and configure your meshStack provider credentials. You can create an API Key by following these instructions. +
+
2
+
+
Configure variables
+
+ Update the required variables in the locals block and configure your meshStack provider credentials. You can create an API Key by following these instructions. +
-
-
-
3
-
-
Deploy with OpenTofu
-
Run tofu init, tofu plan, and tofu apply to create the building block definition.
+
+
3
+
+
Deploy with OpenTofu
+
Run tofu init, tofu plan, and tofu apply to create the building block definition.
+
-
-
-
✓
-
-
Success!
-
The building block definition is now available in your meshStack.
+
+
✓
+
+
Success!
+
The building block definition is now available in your meshStack.
+
+ + +
+ + 
{{ template.terraformSnippet }}
+
- -
- - 
{{ template.terraformSnippet }}
-
+
- -
-
-

- - Import via UI -

-

Quick and easy setup directly from meshStack

-
- -
-
-
1
-
-
Click the "Add to meshStack" button
-
This will open the import wizard to guide you through the setup process.
-
-
-
-
2
-
-
Run through the wizard in your meshStack
-
Follow the import wizard in your meshStack to set up the building block definition.
-
-
-
-
3
-
-
- Optional - Apply the backplane Terraform files -
-
- Run the - backplane Terraform files - to prepare all necessary resources in your cloud platform. -
-
-
-
-
✓
-
-
Success!
-
The building block definition is now available in your meshStack and ready to use.
-
-
-
- - - +
+ -
- - Don't have meshStack yet? - -
+
+ + Don't have meshStack yet? +
- +
diff --git a/website/src/app/features/template-details/template-details.component.ts b/website/src/app/features/template-details/template-details.component.ts index 6e9d2444..7d044bd6 100644 --- a/website/src/app/features/template-details/template-details.component.ts +++ b/website/src/app/features/template-details/template-details.component.ts @@ -97,6 +97,13 @@ export class TemplateDetailsComponent implements OnInit, OnDestroy { }); } + public scrollToTerraform(): void { + const terraformCard = document.querySelector('mst-card'); + if (terraformCard) { + terraformCard.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + } + public open(template: TemplateDetailsVm): void { const modulePath = this.extractModulePath(template.source); diff --git a/website/src/app/shared/header/header.component.html b/website/src/app/shared/header/header.component.html index 5277e3d9..9bd69262 100644 --- a/website/src/app/shared/header/header.component.html +++ b/website/src/app/shared/header/header.component.html @@ -25,7 +25,7 @@

meshStack Hub< GitHub Discover meshStack