Merge branch 'v1_0_0' into daemon_mode

This commit is contained in:
Michael Quigley 2024-09-04 12:01:37 -04:00
commit 2699e0d59a
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
18 changed files with 917 additions and 445 deletions

View File

@ -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.

View File

@ -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

View File

@ -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)

View File

@ -154,7 +154,7 @@
<li>If you are using a zrok instance hosted elsewhere, contact the administrator of your instance for
options to have this page removed.</li>
<li>If you are operating a self-hosted zrok instance, see the
<a href="https://docs.zrok.io/" target="_">documentation</a> for configuration options
<a href="https://docs.zrok.io/docs/guides/self-hosting/interstitial-page/" target="_">documentation</a> for configuration options
to remove the interstitial page.</li>
</ul>
</div>

15
ui/package-lock.json generated
View File

@ -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",

View File

@ -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'
},
],
},

File diff suppressed because it is too large Load Diff

View File

@ -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": {

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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 */
}

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 1017 B