add getting started cards for hosted and self-hosted

docs/getting-started.mdx

@@ -6,7 +6,44 @@ sidebar_position: 10
 
 import { AssetsProvider } from '@site/src/components/assets-context';
 import DownloadCard from '@site/src/components/download-card';
-import styles from '@site/src/css/download-card.module.css';
+import DownloadCardStyles from '@site/src/css/download-card.module.css';
+
+
+## Choose Your Path
+
+<Columns> 
+  <Column className='text--center'>
+    <Card shadow='tl'>
+      <CardHeader style={{textAlign: "center"}}>
+        <h3>Self-Hosted zrok</h3>
+      </CardHeader>
+      <CardBody style={{textAlign: "center"}}>
+        Run your own public zrok instance with Linux, Docker, or Kubernetes.
+      </CardBody>
+      <CardFooter style={{textAlign: "center"}}>
+        <a href="/docs/category/self-hosting/">
+        <button className='button button--secondary button--block'>Guides</button>
+        </a>
+      </CardFooter>
+    </Card>
+  </Column>
+  <Column className='text--justify'> 
+    <Card shadow='tl'>
+      <CardHeader style={{textAlign: "center"}}>
+        <h3>Hosted zrokNet</h3>
+      </CardHeader>
+      <CardBody style={{textAlign: "center"}}>
+        Use NetFoundry's public zrok instance.
+      </CardBody>
+      <CardFooter style={{textAlign: "center"}}>
+        <a href="https://myzrok.io/">
+        <button className='button button--secondary button--block'>Get an Account</button>
+        </a>
+      </CardFooter>
+    </Card>
+  </Column>
+</Columns>
+
 
 ## What's a zrok?
 
@@ -37,7 +74,7 @@ If [sharing privately](./concepts/sharing-private.md), only users with the share
 ## Installing the zrok Command
 
 <AssetsProvider>
-  <div className={styles.downloadContainer}>
+  <div className={DownloadCardStyles.downloadContainer}>
     <DownloadCard
       osName="Windows"
       osLogo="/img/logo-windows.svg"
@@ -104,6 +141,8 @@ Congratulations! Your `zrok` account is ready to go!
 
 ## Enabling Your zrok Environment
 
+A zrok environment usually refers to an enabled device where shares and accesses can be created, .e.g., `~/.zrok` on a Unix machine. It can be a specific user's environment or a system-wide agent's environment owned by the administrator.
+
 When your `zrok` account was created, the service generated a _secret token_ that identifies and authenticates in a single step. Protect your secret token as if it were a password, or an important account number; it's a _secret_, protect it.
 
 When we left off you had downloaded, extracted, and configured your `zrok` environment. In order to use that environment with your account, you'll need to `enable` it. Enabling an environment generates a secure identity and the necessary underlying security policies with the OpenZiti network hosting the `zrok` service.

docs/guides/docker-share/docker_public_share_guide.md

@@ -118,9 +118,11 @@ With Caddy, you can balance the workload for websites or web services or share s
     ```yaml title="compose.override.yml"
     services:
       httpbin1:
-        image: mccutchen/go-httpbin  # 8080/tcp
+        image: mccutchen/go-httpbin
+        expose: 8080
       httpbin2:
-        image: mccutchen/go-httpbin  # 8080/tcp
+        image: mccutchen/go-httpbin
+        expose: 8080
       zrok-share:
         volumes:
           - ./Caddyfile:/mnt/.zrok/Caddyfile

docs/guides/self-hosting/kubernetes.mdx

@@ -0,0 +1,9 @@
+---
+title: Self-host a zrok Instance in Kubernetes
+sidebar_label: Kubernetes
+sidebar_position: 55
+---
+
+The Helm chart for zrok is available from the main OpenZiti charts repo.
+
+[Link to README in GitHub](https://github.com/openziti/helm-charts/tree/main/charts/zrok#readme)

ui/package-lock.json

@@ -6277,9 +6277,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001587",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
-      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "funding": [
         {
           "type": "opencollective",
@@ -6293,7 +6293,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/canvas-color-tracker": {
       "version": "1.1.6",
@@ -24373,9 +24374,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001587",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
-      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA=="
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg=="
     },
     "canvas-color-tracker": {
       "version": "1.1.6",

website/package.json

@@ -14,9 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.3.2",
-    "@docusaurus/plugin-client-redirects": "^3.3.2",
-    "@docusaurus/preset-classic": "^3.3.2",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/plugin-client-redirects": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
@@ -26,7 +26,7 @@
     "remark-math": "^5.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.3.2",
+    "@docusaurus/module-type-aliases": "^3.5.2",
     "yaml-loader": "^0.8.0"
   },
   "browserslist": {

website/src/components/Card/CardBody/index.js

@@ -0,0 +1,44 @@
+import React,  { CSSProperties } from 'react';
+import clsx from 'clsx';
+const CardBody = ({
+  className, // classNamees for the container card
+  style, // Custom styles for the container card
+  children, // Content to be included within the card 
+  textAlign, 
+  variant,
+  italic = false , 
+  noDecoration = false, 
+  transform, 
+  breakWord = false, 
+  truncate = false, 
+  weight,
+}) => {   
+  const text = textAlign ? `text--${textAlign}` :'';
+  const textColor = variant ? `text--${variant}` : '';
+  const textItalic = italic ? 'text--italic' : '';
+  const textDecoration = noDecoration ? 'text-no-decoration' : '';
+  const textType = transform ? `text--${transform}` : '';
+  const textBreak = breakWord ? 'text--break' : '';
+  const textTruncate = truncate ? 'text--truncate' : '';
+  const textWeight = weight ? `text--${weight}` : '';
+  return (
+    <div
+      className={clsx(
+        'card__body',
+        className,
+        text,
+        textType,
+        textColor,
+        textItalic,
+        textDecoration,
+        textBreak,
+        textTruncate,
+        textWeight
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+export default CardBody;

website/src/components/Card/CardFooter/index.js

@@ -0,0 +1,44 @@
+import React,  { CSSProperties } from 'react';
+import clsx from 'clsx'; 
+const CardFooter = ({
+  className, 
+  style, 
+  children, 
+  textAlign, 
+  variant,
+  italic = false , 
+  noDecoration = false, 
+  transform, 
+  breakWord = false, 
+  truncate = false, 
+  weight,
+}) => {   
+  const text = textAlign ? `text--${textAlign}` :'';
+  const textColor = variant ? `text--${variant}` : '';
+  const textItalic = italic ? 'text--italic' : '';
+  const textDecoration = noDecoration ? 'text-no-decoration' : '';
+  const textType = transform ? `text--${transform}` : '';
+  const textBreak = breakWord ? 'text--break' : '';
+  const textTruncate = truncate ? 'text--truncate' : '';
+  const textWeight = weight ? `text--${weight}` : '';
+  return (
+    <div
+      className={clsx(
+        'card__footer',
+        className,
+        text,
+        textType,
+        textColor,
+        textItalic,
+        textDecoration,
+        textBreak,
+        textTruncate,
+        textWeight
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+export default CardFooter;

website/src/components/Card/CardHeader/index.js

@@ -0,0 +1,44 @@
+  import React,  { CSSProperties } from 'react'; // CSSProperties allows inline styling with better type checking.
+  import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner.
+  const CardHeader = ({
+    className, // classNamees for the container card
+    style, // Custom styles for the container card
+    children, // Content to be included within the card
+    textAlign, 
+    variant, 
+    italic = false , 
+    noDecoration = false, 
+    transform, 
+    breakWord = false, 
+    truncate = false, 
+    weight,
+  }) => {   
+    const text = textAlign ? `text--${textAlign}` :'';
+    const textColor = variant ? `text--${variant}` : '';
+    const textItalic = italic ? 'text--italic' : '';
+    const textDecoration = noDecoration ? 'text-no-decoration' : '';
+    const textType = transform ? `text--${transform}` : '';
+    const textBreak = breakWord ? 'text--break' : '';
+    const textTruncate = truncate ? 'text--truncate' : '';
+    const textWeight = weight ? `text--${weight}` : '';
+    return (
+      <div
+        className={clsx(
+          'card__header',
+          className,
+          text,
+          textType,
+          textColor,
+          textItalic,
+          textDecoration,
+          textBreak,
+          textTruncate,
+          textWeight
+        )} 
+        style={style}
+      >
+        {children}
+      </div>
+    );
+  }
+  export default CardHeader;

website/src/components/Card/CardImage/index.js

@@ -0,0 +1,20 @@
+import React,  { CSSProperties } from 'react';
+import clsx from 'clsx'; 
+import useBaseUrl from '@docusaurus/useBaseUrl'; // Import the useBaseUrl function from Docusaurus
+const CardImage = ({
+  className, 
+  style,
+  cardImageUrl,
+  alt,
+  title,
+}) => {   
+  const generatedCardImageUrl = useBaseUrl(cardImageUrl);
+  return (
+    <img
+      className={clsx('card__image', className)}
+      style={style}
+      src={generatedCardImageUrl} alt={alt} title={title}
+    />
+  )
+}
+export default CardImage;

website/src/components/Card/index.js

@@ -0,0 +1,16 @@
+import React, { CSSProperties } from 'react'; // CSSProperties allows inline styling with better type checking.
+import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner.
+const Card = ({
+  className, // Custom classes for the container card
+  style, // Custom styles for the container card
+  children, // Content to be included within the card
+  shadow, // Used to add shadow under your card. Expected values are: low (lw), medium (md), tall (tl)
+}) => {
+  const cardShadow = shadow ? `item shadow--${shadow}` : '';
+  return (
+    <div className={clsx('card', className, cardShadow)} style={style}>
+      {children}
+    </div>
+  );
+};
+export default Card;

website/src/components/Column/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+// Import clsx library for conditional classes.
+import clsx from 'clsx'; 
+
+// Define the Column component as a function 
+// with children, className, style as properties
+// Look https://infima.dev/docs/ for learn more
+// Style only affects the element inside the column, but we could have also made the same distinction as for the classes.
+export default function Column({ children , className, style  }) {
+  return (
+  
+      <div className={clsx('col' , className)} style={style}>
+        {children}
+      </div>
+  
+  );
+}

website/src/components/Columns/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+// Import clsx library for conditional classes.
+import clsx from 'clsx'; 
+// Define the Columns component as a function 
+// with children, className, and style as properties
+// className will allow you to pass either your custom classes or the native infima classes https://infima.dev/docs/layout/grid.
+// Style" will allow you to either pass your custom styles directly, which can be an alternative to the "styles.module.css" file in certain cases.
+export default function Columns({ children , className , style }) {
+  return (
+    // This section encompasses the columns that we will integrate with children from a dedicated component to allow the addition of columns as needed 
+    <div className="container center">
+          <div className={clsx('row' , className)} style={style} >
+            {children}
+        </div>
+    </div>
+  );
+}

website/src/theme/MDXComponents.js

@@ -0,0 +1,21 @@
+import React from 'react';
+// Importing the original mapper + our components according to the Docusaurus doc
+import MDXComponents from '@theme-original/MDXComponents';
+import Card from '@site/src/components/Card';
+import CardBody from '@site/src/components/Card/CardBody';
+import CardFooter from '@site/src/components/Card/CardFooter';
+import CardHeader from '@site/src/components/Card/CardHeader';
+import CardImage from '@site/src/components/Card/CardImage';
+import Columns from '@site/src/components/Columns';
+import Column from '@site/src/components/Column';
+export default {
+  // Reusing the default mapping
+  ...MDXComponents,
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  CardImage,
+  Columns,
+  Column,
+};