New Component for Runtimes

apps/docs/content/features/access.mdx

@@ -4,6 +4,18 @@ description: Explore how you can work with subdomains, custom domains and ip acc
 ---
 
 import Image from '/src/components/Image';
+import GroupCards from '../../src/components/GroupCards'
+
+export const languages = [
+    { name: "Node.js", link: "/nodejs/how-to/build-pipeline#ports" },
+    { name: "Go", link: "/go/how-to/build-pipeline#ports" },
+    { name: "Java", link: "/java/how-to/build-pipeline#ports" },
+    { name: "PHP", link: "/php/how-to/build-pipeline#ports" },
+    { name: ".NET", link: "/dotnet/how-to/build-pipeline#ports" },
+    { name: "Rust", link: "/rust/how-to/build-pipeline#ports" },
+    { name: "Python", link: "/python/how-to/build-pipeline#ports" },
+]
+
 
 Zerops offers 3 different ways how to access your application from the internet:
 
@@ -14,15 +26,9 @@ Zerops offers 3 different ways how to access your application from the internet:
 ## Public access through zerops.app subdomain
 
 By default, your runtime service is not publicly accessible.
-To test your application, you can enable public access through zerops.app subdomain. Go to the service detail page in Zerops GUI and select **Public access & internal ports** in the left menu. Then toggle the **Zerops subdomain access** switch. Zerops will assign the unique zerops.app subdomain for your application. If you have defined more internal ports with http support in your zerops.yml, Zerops will create the unique zerops.app subdomain for each port. Learn more about how to define internal ports for your runtime:
-
-- [Node.js](/nodejs/how-to/build-pipeline#ports)
-- [PHP](/php/how-to/build-pipeline#ports)
-- [Python](/python/how-to/build-pipeline#ports)
-- [Go](/go/how-to/build-pipeline#ports)
-- [.NET](/dotnet/how-to/build-pipeline#ports)
-- [Rust](/rust/how-to/build-pipeline#ports)
-- [Java](/java/how-to/build-pipeline#ports)
+To test your application, you can enable public access through zerops.app subdomain. Go to the service detail page in Zerops GUI and select **Public access & internal ports** in the left menu. Then toggle the **Zerops subdomain access** switch. Zerops will assign the unique zerops.app subdomain for your application. If you have defined more internal ports with http support in your zerops.yml, Zerops will create the unique zerops.app subdomain for each port.
+
+<GroupCards emoji="🚀" heading="Configure internal ports for your Runtime" items={languages} />
 
 <p align="center">
   <Image

apps/docs/content/features/env-variables.mdx

@@ -4,6 +4,16 @@ description: Learn how to use and manage environment variables in Zerops
 ---
 
 import Image from '/src/components/Image';
+import GroupCards from '@site/src/components/GroupCards';
+
+export const languages = [
+    { name: "Node.js", link: "/nodejs/how-to/env-variables#how-to-read-env-variables-from-your-nodejs-app" },
+    { name: "PHP", link: "/php/how-to/env-variables#how-to-read-env-variables-from-your-php-app" },
+    { name: "Python", link: "/python/how-to/env-variables#how-to-read-env-variables-from-your-python-app" },
+    { name: "Go", link: "/go/how-to/env-variables#how-to-read-env-variables-from-your-go-app" },
+    { name: ".NET", link: "/dotnet/how-to/env-variables#how-to-read-env-variables-from-your-dotnet-app" },
+    { name: "Rust", link: "/rust/how-to/env-variables#how-to-read-env-variables-from-your-rust-app" }
+]
 
 Environment variables are specific to each environment and can only be accessed within the environment they belong to.
 
@@ -143,14 +153,7 @@ run:
 
 Zerops automatically generates several variables when a runtime service is created, such as `hostname` and `PATH`. Some of these variables (like `hostname`) are read-only, while others (like `PATH`) can be edited. These variables cannot be deleted and are always listed at the bottom of the **Environment Variables** page.
 
-## Runetime specific tutorials
-
-- [Node.js](/nodejs/how-to/env-variables#how-to-read-env-variables-from-your-nodejs-app)
-- [PHP](/php/how-to/env-variables#how-to-read-env-variables-from-your-php-app)
-- [Python](/python/how-to/env-variables#how-to-read-env-variables-from-your-python-app)
-- [Go](/go/how-to/env-variables#how-to-read-env-variables-from-your-go-app)
-- [.NET](/dotnet/how-to/env-variables#how-to-read-env-variables-from-your-dotnet-app)
-- [Rust](/rust/how-to/env-variables#how-to-read-env-variables-from-your-rust-app)
+<GroupCards emoji="🙌" heading="Quick Links to Runtime-Specific Guides" items={languages} />
 
 ## Environment variables with the same key
 

apps/docs/content/features/pipeline.mdx

@@ -3,8 +3,48 @@ title: Build & deploy pipeline
 description: Learn how to setup a build & deploy pipeline at Zerops.
 ---
 
+import GroupCards from '../../src/components/GroupCards';
 import Image from '/src/components/Image';
 
+export const languages = [
+    { name: "Node.js", link: "/nodejs/how-to/env-variables#how-to-read-env-variables-from-your-nodejs-app" },
+    { name: "PHP", link: "/php/how-to/env-variables#how-to-read-env-variables-from-your-php-app" },
+    { name: "Python", link: "/python/how-to/env-variables#how-to-read-env-variables-from-your-python-app" },
+    { name: "Go", link: "/go/how-to/env-variables#how-to-read-env-variables-from-your-go-app" },
+    { name: ".NET", link: "/dotnet/how-to/env-variables#how-to-read-env-variables-from-your-dotnet-app" },
+    { name: "Rust", link: "/rust/how-to/env-variables#how-to-read-env-variables-from-your-rust-app" }
+]
+
+export const builds = [
+    { name: "Node.js", link: "/nodejs/how-to/build-process##nodejs-build-hardware-resources" },
+    { name: "PHP", link: "/php/how-to/build-process#php-build-hardware-resources" },
+    { name: "Python", link: "/python/how-to/build-process#python-build-hardware-resources" },
+    { name: "Go", link: "/go/how-to/build-process#go-build-hardware-resources" },
+    { name: ".NET", link: "/dotnet/how-to/build-process#dotnet-build-hardware-resources" },
+    { name: "Rust", link: "/rust/how-to/build-process#rust-build-hardware-resources" },
+    { name: "Java", link: "/java/how-to/build-process#java-build-hardware-resources" },
+]
+
+export const customiseBuild = [
+    { name: "Node.js", link: "/nodejs/how-to/build-process#customise-nodejs-build-environment" },
+    { name: "PHP", link: "/php/how-to/build-process#customise-php-build-environment" },
+    { name: "Python", link: "/python/how-to/build-process#customise-python-build-environment" },
+    { name: "Go", link: "/go/how-to/build-process#customise-go-build-environment" },
+    { name: ".NET", link: "/dotnet/how-to/build-process#customise-dotnet-build-environment" },
+    { name: "Rust", link: "/rust/how-to/build-process#customise-rust-build-environment" },
+    { name: "Java", link: "/java/how-to/build-process#customise-java-build-environment" },
+]
+
+export const customiseRuntime = [
+    { name: "Node.js", link: "/nodejs/how-to/customize-runtime" },
+    { name: "PHP", link: "/php/how-to/customize-runtime" },
+    { name: "Python", link: "/python/how-to/customize-runtime" },
+    { name: "Go", link: "/go/how-to/customize-runtime" },
+    { name: ".NET", link: "/dotnet/how-to/customize-runtime" },
+    { name: "Rust", link: "/rust/how-to/customize-runtime" },
+    { name: "Java", link: "/java/how-to/customize-runtime" },
+]
+
 ## Configure the pipeline
 
 Zerops provides a customizable build and runtime environment for your application.
@@ -40,13 +80,7 @@ Zerops will follow these instruction when the build & deploy pipeline is trigger
 
 Learn more about all `zerops.yml` parameters for your runtime:
 
-- [Node.js](/nodejs/how-to/build-pipeline)
-- [PHP](/php/how-to/build-pipeline)
-- [Python](/python/how-to/build-pipeline)
-- [Go](/go/how-to/build-pipeline)
-- [.NET](/dotnet/how-to/build-pipeline)
-- [Rust](/rust/how-to/build-pipeline)
-- [Java](/java/how-to/build-pipeline)
+<GroupCards emoji="🚀" heading="Know more about Zerops.yml for your Runtime" items={languages} />
 
 ## Trigger the pipeline
 
@@ -132,13 +166,8 @@ The build container is automatically deleted after the build has finished or fai
 
 Each runtime service have different HW resources for build containers:
 
-- [Node.js](/nodejs/how-to/build-process##nodejs-build-hardware-resources)
-- [PHP](/php/how-to/build-process#php-build-hardware-resources)
-- [Python](/python/how-to/build-process#python-build-hardware-resources)
-- [Go](/go/how-to/build-process#go-build-hardware-resources)
-- [.NET](/dotnet/how-to/build-process#dotnet-build-hardware-resources)
-- [Rust](/rust/how-to/build-process#rust-build-hardware-resources)
-- [Java](/java/how-to/build-process#java-build-hardware-resources)
+
+<GroupCards emoji="🚀" heading="Explore build hardware resources for your runtime" items={builds} />
 
 The build container is always started with the minimum hardware resources and scales vertically up to the maximum resources.
 
@@ -157,13 +186,7 @@ To install additional packages or tools add one or more [build.prepareCommands](
 
 Learn more about what is included in the default build environment:
 
-- [Node.js](/nodejs/how-to/build-process#customise-nodejs-build-environment)
-- [PHP](/php/how-to/build-process#customise-php-build-environment)
-- [Python](/python/how-to/build-process#customise-python-build-environment)
-- [Go](/go/how-to/build-process#customise-go-build-environment)
-- [.NET](/dotnet/how-to/build-process#customise-dotnet-build-environment)
-- [Rust](/rust/how-to/build-process#customise-rust-build-environment)
-- [Java](/java/how-to/build-process#customise-java-build-environment)
+<GroupCards emoji="🚀" heading="Customise your build environment of your Runtime" items={customiseBuild} />
 
 ## Deploy phase
 
@@ -248,13 +271,7 @@ To install additional packages or tools add one or more [run.prepareCommands](/r
 
 Learn more about what is included in the default runtime environment:
 
-- [Node.js](/nodejs/how-to/customize-runtime)
-- [PHP](/php/how-to/customize-runtime)
-- [Python](/python/how-to/customize-runtime)
-- [Go](/go/how-to/customize-runtime)
-- [.NET](/dotnet/how-to/customize-runtime)
-- [Rust](/rust/how-to/customize-runtime)
-- [Java](/java/how-to/customize-runtime)
+<GroupCards emoji="🚀" heading="Customise your runtime environment with zerops.yml" items={customiseRuntime} />
 
 <p align="center">
   <Image

apps/docs/content/nginx/how-to/build-pipeline.mdx

@@ -5,18 +5,23 @@ description: Learn more about how you can configure your nginx service for build
 
 import data from '@site/static/data.json';
 import UnorderedCodeList from '@site/src/components/UnorderedCodeList';
+import GroupCards from '@site/src/components/GroupCards';
+
+export const languages = [
+    { name: "Node.js", link: "/nodejs/how-to/build-pipeline" },
+    { name: "PHP", link: "/php/how-to/build-pipeline" },
+    { name: "Python", link: "/python/how-to/build-pipeline" },
+    { name: "Go", link: "/go/how-to/build-pipeline" },
+    { name: ".NET", link: "/dotnet/how-to/build-pipeline" },
+    { name: "Rust", link: "/rust/how-to/build-pipeline" },
+    { name: "Java", link: "/java/how-to/build-pipeline" },
+]
 
 Zerops provides a customizable build and runtime environment for your static content.
 
 Zerops supports different build environments:
 
-- [Node.js](/nodejs/how-to/build-pipeline)
-- [PHP](/php/how-to/build-pipeline)
-- [Python](/python/how-to/build-pipeline)
-- [Go](/go/how-to/build-pipeline)
-- [.NET](/dotnet/how-to/build-pipeline)
-- [Rust](/rust/how-to/build-pipeline)
-- [Java](/java/how-to/build-pipeline)
+<GroupCards emoji="🚀" heading="Know more about build environments for your Runtime" items={languages} />
 
 If you just need to deploy your static content, use the [manual deploy](/nginx/how-to/trigger-pipeline#manual-deploy-using-zerops-cli) via Zerops CLI.
 
@@ -106,20 +111,6 @@ zerops:
 
 Each service configuration contains at least two sections: **build** and **run**. Both sections are required to build and deploy your Nginx application in Zerops. If you'd like to use a readiness check, add an optional **deploy** section.
 
-## Build pipeline configuration
-
-Zerops supports different build environments:
-
-- [Node.js](/nodejs/how-to/build-pipeline)
-- [PHP](/php/how-to/build-pipeline)
-- [Python](/python/how-to/build-pipeline)
-- [Go](/go/how-to/build-pipeline)
-- [.NET](/dotnet/how-to/build-pipeline)
-- [Rust](/rust/how-to/build-pipeline)
-- [Java](/java/how-to/build-pipeline)
-
-If you just need to deploy your static content, use the [manual deploy](/nginx/how-to/trigger-pipeline#manual-deploy-using-zerops-cli) via Zerops CLI.
-
 ## Runtime configuration
 
 ### base

apps/docs/content/references/zeropsyml.mdx

@@ -5,22 +5,25 @@ description: Learn how you can configure your zerops yaml and use the available
 
 import data from '@site/static/data.json';
 import UnorderedCodeList from '@site/src/components/UnorderedCodeList';
+import GroupCards from '@site/src/components/GroupCards';
+
+export const languages = [
+    { name: "Node.js", link: "/nodejs/how-to/build-pipeline" },
+    { name: "PHP", link: "/php/how-to/build-pipeline" },
+    { name: "Python", link: "/python/how-to/build-pipeline" },
+    { name: "Go", link: "/go/how-to/build-pipeline" },
+    { name: ".NET", link: "/dotnet/how-to/build-pipeline" },
+    { name: "Rust", link: "/rust/how-to/build-pipeline" },
+    { name: "Java", link: "/java/how-to/build-pipeline" },
+    { name: "Nginx", link: "/nginx/how-to/build-pipeline" }
+]
 
 The `zerops.yml` file is crucial for defining how Zerops should [build and deploy](/features/pipeline) your application.
 Add the `zerops.yml` file to the **root of your repository** and customize it to suit your application's needs.
 
 ---
 
-## Quick Links to Runtime-Specific Guides
-
-- [Node.js](/nodejs/how-to/build-pipeline)
-- [PHP](/php/how-to/build-pipeline)
-- [Python](/python/how-to/build-pipeline)
-- [Go](/go/how-to/build-pipeline)
-- [.NET](/dotnet/how-to/build-pipeline)
-- [Rust](/rust/how-to/build-pipeline)
-- [Java](/java/how-to/build-pipeline)
-- [nginx static](/nginx/how-to/build-pipeline)
+<GroupCards emoji="🙌" heading="Quick Links to Runtime-Specific Guides" items={languages} />
 
 ## Basic Structure
 

apps/docs/src/components/GroupCards/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface CardItem {
+    name: string;
+    link: string;
+}
+
+interface GroupCardsProps {
+    emoji?: string;
+    heading: string;
+    items: CardItem[];
+}
+
+const GroupCards: React.FC<GroupCardsProps> = ({ items, heading, emoji }) => {
+    return (
+        <div className="pt-1.5 pb-2 px-3 rounded-md my-2 bg-[#F2F5F7] dark:bg-medusa-bg-base py-1 px-0.5 flex flex-col ">
+            <div className="flex items-center space-x-0.5 -ml-1.5">
+                <span>{emoji}</span>
+                <span className="text-xl font-medium text-[#3B3D40] dark:text-gray-200">{heading}</span>
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-1 pt-1.5">
+                {items.map((item, index) => (
+                    <a
+                        key={index}
+                        href={item.link}
+                        className="flex items-center justify-center py-0.5 px-2.5 rounded-lg border border-solid border-medusa-border-base bg-medusa-bg-subtle hover:bg-medusa-bg-base active:bg-[#EEF0F2] duration-300"
+                    >
+                        <span className="text-md font-medium text-center text-[#3B3D40] dark:text-gray-300">{item.name}</span>
+                    </a>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default GroupCards;