add instruqt labs in netpol, postresql, and getting-started

Author: vfiftyfive

docs/features/network-mapping-network-policies/index.mdx

@@ -5,6 +5,11 @@ title: Network mapping & network policies
 import DocsLinkCard from "@site/src/components/LinkCard";
 
 export const network_access_tutorials = [
+    {
+        title: '🧪 Self-paced labs: Network Policy automation',
+        description: 'Preconfigured labs to learn how to use Otterize with guided examples',
+        url: 'https://otterize.instruqt.com/pages/docs-netpols'
+    },
     {
         title: 'Visualizing a Kubernetes Network',
         description: 'Map network traffic in a cluster and view the connections',

docs/features/postgresql/index.mdx

@@ -7,6 +7,11 @@ hide_title: true
 import DocsLinkCard from "@site/src/components/LinkCard";
 
 export const postgres_tutorials = [
+    {
+        title: '🧪 Self-paced labs: just-in-time credentials for PostgreSQL',
+        description: 'Preconfigured labs to learn how to use Otterize with guided examples',
+        url: 'https://otterize.instruqt.com/pages/docs-postgresql'
+    },
     {
         title: 'Just-in-time PostgreSQL Access',
         description: 'Learn how to manage just-in-time users and SQL GRANTs',

docs/getting-started/README.mdx

@@ -19,6 +19,11 @@ export const introduction = [
 ];
 
 export const features = [
+    {
+        title: 'Self-Paced Labs',
+        icon: '/img/instruqt-logo.jpg',
+        url: 'https://otterize.com/resources?categories=Lab&page=1&search='
+    },
     {
         title: 'Network mapping & network policies',
         icon: '/img/icons/networking.png',

src/components/LinkCard/index.js

@@ -1,35 +1,35 @@
 import React from 'react';
 
-export default function DocsLinkCard({items, colSize}) {
-    let colClasses = "lg:tw-grid-cols-2 tw-gap-4 xs:tw-grid-cols-1 ";
-    if (colSize === "lg") {
-        colClasses = "lg:tw-grid-cols-4 tw-gap-2 xs:tw-grid-cols-2"
-    }else if (colSize === "md") {
-        colClasses = "lg:tw-grid-cols-3 tw-gap-2 xs:tw-grid-cols-1 md:tw-grid-cols-2"
-    }
-    return (
-        <div className={`tw-grid ${colClasses}`}>
-            {items.map((item) => (
-                <div
-                    key={item.title}
-                    className="tw-relative tw-flex tw-items-center tw-space-x-3 tw-rounded-lg tw-border tw-border-solid tw-border-primary-500 tw-bg-white tw-px-6 tw-py-5 tw-shadow-sm focus-within:tw-ring-2 focus-within:tw-ring-indigo-500 focus-within:tw-ring-offset-2 hover:tw-border-primary-600 hover:tw-shadow-md"
-                >
-                    {item.icon &&
-                        <div className="tw-flex-shrink-0">
-                            <img width="40px" className="tw-max-h-10 tw-max-w-10" src={item.icon} alt=""/>
-                        </div>
-                    }
-                    <div className="tw-min-w-0 tw-flex-1">
-                        <a href={item.url} className="focus:tw-outline-none hover:tw-no-underline">
-                            <span className="tw-absolute tw-inset-0" aria-hidden="true"/>
-                            <div className="tw-text-md tw-font-medium tw-text-gray-900 tw-break-keep">{item.title}</div>
-                            {item.description &&
-                                <div className="tw-text-sm tw-text-gray-500">{item.description}</div>
-                            }
-                        </a>
-                    </div>
-                </div>
-            ))}
+export default function DocsLinkCard({ items, colSize }) {
+  let colClasses = "lg:tw-grid-cols-2 tw-gap-4 xs:tw-grid-cols-1 ";
+  if (colSize === "lg") {
+    colClasses = "lg:tw-grid-cols-4 tw-gap-2 xs:tw-grid-cols-2"
+  } else if (colSize === "md") {
+    colClasses = "lg:tw-grid-cols-3 tw-gap-2 xs:tw-grid-cols-1 md:tw-grid-cols-2"
+  }
+  return (
+    <div className={`tw-grid ${colClasses}`}>
+      {items.map((item) => (
+        <div
+          key={item.title}
+          className="tw-relative tw-flex tw-items-center tw-space-x-3 tw-rounded-lg tw-border tw-border-solid tw-border-primary-500 tw-bg-white tw-px-6 tw-py-5 tw-shadow-sm focus-within:tw-ring-2 focus-within:tw-ring-indigo-500 focus-within:tw-ring-offset-2 hover:tw-border-primary-600 hover:tw-shadow-md"
+        >
+          {item.icon &&
+            <div className="tw-flex-shrink-0">
+              <img width="40px" className="tw-max-h-10 tw-max-w-10" src={item.icon} alt="" />
+            </div>
+          }
+          <div className="tw-min-w-0 tw-flex-1">
+            <a href={item.url} className="focus:tw-outline-none hover:tw-no-underline">
+              <span className="tw-absolute tw-inset-0" aria-hidden="true" />
+              <div className="tw-text-md tw-font-medium tw-text-gray-900 tw-break-keep">{item.title}</div>
+              {item.description &&
+                <div className="tw-text-sm tw-text-gray-500">{item.description}</div>
+              }
+            </a>
+          </div>
         </div>
-    )
+      ))}
+    </div>
+  )
 }