Merge pull request #745 from openziti/myzrok-funnel

add pricing and account to top nav

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 className='text--center getting-started-cards'> 
+  <Column style={{paddingBottom: 20}}>
+    <Card shadow='tl'>
+      <CardHeader>
+        <h3>Self-Hosted zrok</h3>
+      </CardHeader>
+      <CardBody>
+        Run a zrok instance on Linux, Docker, or Kubernetes.
+      </CardBody>
+      <CardFooter>
+        <a href="/docs/category/self-hosting/">
+        <button className='button button--secondary button--block'>Guides</button>
+        </a>
+      </CardFooter>
+    </Card>
+  </Column>
+  <Column style={{paddingBottom: 20}}>
+    <Card shadow='tl'>
+      <CardHeader>
+        <h3>Hosted zrokNet</h3>
+      </CardHeader>
+      <CardBody>
+        Use NetFoundry's public zrok instance.
+      </CardBody>
+      <CardFooter>
+        <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/docusaurus.config.js

@@ -113,20 +113,31 @@ const config = {
         },
         items: [
           {
-            type: 'doc',
-            docId: 'getting-started',
+            href: 'https://zrok.io/pricing/',
             position: 'right',
-            label: 'Docs',
+            label: 'pricing',
+          },
+          {
+            href: 'https://myzrok.io/',
+            position: 'right',
+            label: 'account',
           },
           {
             href: 'https://github.com/orgs/openziti/projects/16',
-            label: 'Roadmap',
+            label: 'roadmap',
             position: 'right',
           },
           {
             href: 'https://github.com/openziti/zrok',
-            label: 'GitHub',
             position: 'right',
+            className: 'header-github-link',
+            title: 'GitHub'
+          },
+          {
+            href: 'https://openziti.discourse.group/',
+            position: 'right',
+            className: 'header-discourse-link',
+            title: 'Discourse'
           },
         ],
       },

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/css/custom.css

@@ -183,3 +183,71 @@ a code {
 .language-buttonless div > button {
   display: none;
 }
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+.header-github-link::before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(60, 74, 94)' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+  no-repeat;
+  content: "";
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+[data-theme="dark"] .header-github-link::before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(148, 163, 184)' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+  no-repeat;
+}
+
+.header-discourse-link:hover {
+  opacity: 0.6;
+}
+.header-discourse-link::before {
+  background: url('/img/discourse_icon.svg') no-repeat;
+  content: "";
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+[data-theme="dark"] .header-discourse-link::before {
+  background: url('/img/discourse_icon.svg') no-repeat;
+  content: "";
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+/* getting started cards */
+
+:root {
+  --contrasting-background: #c4b7f5;
+  --container-border: 1px solid #adadad; /* Light gray border */
+  --button-background-hover: #9c84f9;
+}
+
+[data-theme="dark"] {
+  --contrasting-background: #4b359f;
+  --container-border: 1px solid #6d6d6d; /* Light gray border */
+  --button-background-hover: #251463;
+}
+
+.getting-started-cards .card {
+  background-color: var(--sidebar-selected);
+}
+
+.getting-started-cards .button {
+  background-color: var(--contrasting-background);
+  border: 1px var(--container-border);
+  color: var(--ifm-link-color);
+  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.getting-started-cards .button:hover {
+    background-color: var(--button-background-hover);
+    outline: none; /* Removes the outline on focus for a clean look */
+}
+
+.getting-started-cards a:hover {
+    text-decoration: none; /* Removes the underline from links */
+}

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,
+};

website/static/img/discourse_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 104 106"><defs><style>.cls-1{fill:#231f20;}.cls-2{fill:#fff9ae;}.cls-3{fill:#00aeef;}.cls-4{fill:#00a94f;}.cls-5{fill:#f15d22;}.cls-6{fill:#e31b23;}</style></defs><title>Discourse_logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><path class="cls-1" d="M51.87,0C23.71,0,0,22.83,0,51c0,.91,0,52.81,0,52.81l51.86-.05c28.16,0,51-23.71,51-51.87S80,0,51.87,0Z"/><path class="cls-2" d="M52.37,19.74A31.62,31.62,0,0,0,24.58,66.41l-5.72,18.4L39.4,80.17a31.61,31.61,0,1,0,13-60.43Z"/><path class="cls-3" d="M77.45,32.12a31.6,31.6,0,0,1-38.05,48L18.86,84.82l20.91-2.47A31.6,31.6,0,0,0,77.45,32.12Z"/><path class="cls-4" d="M71.63,26.29A31.6,31.6,0,0,1,38.8,78L18.86,84.82,39.4,80.17A31.6,31.6,0,0,0,71.63,26.29Z"/><path class="cls-5" d="M26.47,67.11a31.61,31.61,0,0,1,51-35A31.61,31.61,0,0,0,24.58,66.41l-5.72,18.4Z"/><path class="cls-6" d="M24.58,66.41A31.61,31.61,0,0,1,71.63,26.29a31.61,31.61,0,0,0-49,39.63l-3.76,18.9Z"/></g></g></svg>