diff --git a/docs/docs/guides/basics/get-started.md b/docs/docs/guides/basics/get-started.mdx similarity index 87% rename from docs/docs/guides/basics/get-started.md rename to docs/docs/guides/basics/get-started.mdx index 026720424d..d838a726fe 100644 --- a/docs/docs/guides/basics/get-started.md +++ b/docs/docs/guides/basics/get-started.mdx @@ -2,6 +2,8 @@ title: Get started --- +import Column from '../../../src/components/column'; + Most applications need to know the identity of a user allowing to securely store user data in the cloud and provide the same personalised experience across all of the user's devices. ZITADEL's authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users in your application. It supports authentication using passwords and applies additional security with the help of a second factor, for example OTP, to ensure a safe and secure access. @@ -11,27 +13,33 @@ This provides a quick start guide on how to register your organization as well a ## Trying out ZITADEL on zitadel.ch + +
+ To create a ZITADEL project, you have to register as an organization first. Click [here](https://accounts.zitadel.ch/register/org) to register. You will receive an email prompting you to verify your mail. Then go to your [Console Projects](https://console.zitadel.ch/projects) view and create a new project. -![Organisation Register](/img/accounts_org_register_light.png) - Now you can proceed adding users to your organization as well as integrating your applications. We refer to our guides as well as our [Quickstarts](../../quickstarts/introduction) to do so. -#### Verify your domain name (optional) +
+register view + + +### Verify your domain name (optional) If you verify a domain you get the benefit that your organisations users can use this domain as the **preferred logonname**. -#### Elect Managers +### Elect Managers ZITADEL allows you to give other users control over ZITADEL Console itself. This can be restricted to some kind of write and/or read. This can be especially useful for directing administration over several users. You can have managers able to edit project settings and others able to create/add users only. -Read the [guides](../introduction) for more information. +Read the [guides](../overview) for more information. > Note: ZITADEL Managers are always located on the right sidepanel of console. -#### Integrating an application +### Integrating an application After creating your project you can start integrating your applications. After choosing your [project](https://console.zitadel.ch/projects) add a client application on the top of the page. The wizard should provide some guidance what client is the proper for you. If you are still unsure consult our [Guide Project](projects). + diff --git a/docs/docs/guides/basics/organizations.md b/docs/docs/guides/basics/organizations.mdx similarity index 93% rename from docs/docs/guides/basics/organizations.md rename to docs/docs/guides/basics/organizations.mdx index f1c02ab67a..65eee89e81 100644 --- a/docs/docs/guides/basics/organizations.md +++ b/docs/docs/guides/basics/organizations.mdx @@ -12,6 +12,7 @@ title: Organizations ## What is an organization? import OrgDescription from '../../concepts/zitadel/objects/_org_description.mdx'; +import Column from '../../../src/components/column'; @@ -23,9 +24,13 @@ To register your organization and create a user for ZITADEL, visit zitadel.ch or ![Register new Organization](/img/console_org_register.png) -If you already have an existing login for zitadel.ch, you need to visit the console, then click on your organization’s name in the upper left corner, and then select “New organization”. + +
+ If you already have an existing login for zitadel.ch, you need to visit the console, then click on your organization’s name in the upper left corner, and then select “New organization”. +
-![Select Organization](/img/console_org_select.png) +Select Organization + ## How ZITADEL handles usernames diff --git a/docs/docs/guides/introduction.md b/docs/docs/guides/introduction.md deleted file mode 100644 index dbf02aa76f..0000000000 --- a/docs/docs/guides/introduction.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Introduction ---- - -With our guides you will learn everything you need to know about specific topics. You get step-by-step instructions for certain tasks and have a knowledge check at the end. - -You can either use our cloud-instance [zitadel.ch](https://zitadel.ch) or deploy a dedicated **ZITADEL** instance. To get started, we recommend you to try out our free tier first. Jump directly to the [get started](./basics/get-started) docs. - -When you are familiar with the ZITADEL usage, you can choose to stay on [zitadel.ch](./installation/shared-cloud), order your own [dedicated instance](./installation/shared-cloud) which is also availabe on premise, or install ZITADEL easily on your own using [Custom Kubernetes Resources](./installation/crd), [GitOps](./installation/gitops) or [ORBOS](./installation/orbos). diff --git a/docs/docs/guides/overview.mdx b/docs/docs/guides/overview.mdx new file mode 100644 index 0000000000..cc5f76d315 --- /dev/null +++ b/docs/docs/guides/overview.mdx @@ -0,0 +1,34 @@ +--- +title: Overview +--- + +import {ListElement, ListWrapper, ICONTYPE} from '../../src/components/list'; +import Column from '../../src/components/column'; + +With our guides you will learn everything you need to know about specific topics. You get step-by-step instructions for certain tasks and have a knowledge check at the end. + +You can either use our cloud-instance [zitadel.ch](https://zitadel.ch) or deploy a dedicated **ZITADEL** instance. To get started, we recommend you to try out our free tier first. Jump directly to the [get started](./basics/get-started) docs. + +When you are familiar with the ZITADEL usage, you can choose to stay on [zitadel.ch](./installation/shared-cloud), order your own [dedicated instance](./installation/shared-cloud) which is also availabe on premise, or install ZITADEL easily on your own using [Custom Kubernetes Resources](./installation/crd), [GitOps](./installation/gitops) or [ORBOS](./installation/orbos). + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/docs/quickstarts/introduction.md b/docs/docs/quickstarts/introduction.md deleted file mode 100644 index 0fa28528df..0000000000 --- a/docs/docs/quickstarts/introduction.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Introduction ---- - -Start with ZITADEL quickly by choosing your language. - -You can find some example applications [here](https://github.com/caos/zitadel-examples) \ No newline at end of file diff --git a/docs/docs/quickstarts/introduction.mdx b/docs/docs/quickstarts/introduction.mdx new file mode 100644 index 0000000000..3d46b30449 --- /dev/null +++ b/docs/docs/quickstarts/introduction.mdx @@ -0,0 +1,49 @@ +--- +title: Overview +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import {Card, CardWrapper} from '../../src/components/card'; + +Get started with ZITADEL quickly by reading a quickstart or by cloning an example from our [ZITADEL examples](https://github.com/caos/zitadel-examples) repo. + + + + + + + + + + + + + + + + + + + + + + + +## Clone a sample project + + + + + + + +## Libraries + + +| Language | Description | Link | +| ------------ | ---------------------|-------------| +| Go | Go client library for ZITADEL. | [https://github.com/caos/zitadel-go](https://github.com/caos/zitadel-go) +| .Net | Authentication / Authorization library written in dotnet for the asp.net web application package. | [https://github.com/caos/zitadel-net](https://github.com/caos/zitadel-net) +| Dart | Dart library for ZITADEL, contains gRPC and API access elements. | [https://github.com/caos/zitadel-dart](https://github.com/caos/zitadel-dart) | +| Elixir | API Client for the ZITADEL API. | [https://github.com/jshmrtn/zitadel_api](https://github.com/jshmrtn/zitadel_api) | diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 58e2db11dd..a75f9c510a 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -21,7 +21,7 @@ module.exports = { { type: 'doc', label: 'Guides', - docId: 'guides/introduction', + docId: 'guides/overview', position: 'left', }, { @@ -148,4 +148,7 @@ module.exports = { ], require.resolve('plugin-image-zoom'), ], + stylesheets: [ + "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" + ] }; diff --git a/docs/sidebars.js b/docs/sidebars.js index b74e29f5de..6698a0c432 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -19,7 +19,6 @@ module.exports = { items: ['quickstarts/call-zitadel-api/go', 'quickstarts/call-zitadel-api/dot-net'], collapsed: false, }, - 'quickstarts/libs', { type: 'category', label: 'Identity Aware Proxy', @@ -28,7 +27,7 @@ module.exports = { } ], guides: [ - 'guides/introduction', + 'guides/overview', { type: 'category', label: 'Get to know ZITADEL', diff --git a/docs/src/components/card.jsx b/docs/src/components/card.jsx new file mode 100644 index 0000000000..60ea9e6559 --- /dev/null +++ b/docs/src/components/card.jsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import styles from '../css/card.module.css'; + +export function Card({ link, githubLink, imageSource, title, description, label}) { + if (githubLink) { + return ( + +

{title}

+ {description &&

{description}

} + +
+ github + {label} +
+ + ) + } else if (link){ + return ( + + {imageSource && {`image} +

{title}

+

{description}

+ + ) + }; +} + +export function CardWrapper({children}) { + return ( +
+ {children} +
+ ) +} \ No newline at end of file diff --git a/docs/src/components/column.jsx b/docs/src/components/column.jsx new file mode 100644 index 0000000000..b44be4a174 --- /dev/null +++ b/docs/src/components/column.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import styles from '../css/column.module.css'; + +export default function Column({children}) { + return ( +
+ {children} +
+ ) +} \ No newline at end of file diff --git a/docs/src/components/list.jsx b/docs/src/components/list.jsx new file mode 100644 index 0000000000..1b268cd13b --- /dev/null +++ b/docs/src/components/list.jsx @@ -0,0 +1,47 @@ +import React from 'react'; + +import styles from '../css/list.module.css'; + +export const ICONTYPE = { + START:
+ +
, + LOGIN:
+ +
, + PRIVATELABELING:
+ +
, + TEXTS:
+ +
, + SYSTEM:
+ +
, + APIS:
+ +
+}; + +export function ListElement({ link, iconClasses, type, title, description}) { + return ( + + {type ? type : + iconClasses &&
+ } +
+

{title}

+

{description}

+
+ + ) +} + +export function ListWrapper({children, title}) { + return ( +
+ {title} + {children} +
+ ) +} \ No newline at end of file diff --git a/docs/src/css/card.module.css b/docs/src/css/card.module.css new file mode 100644 index 0000000000..c13dec5823 --- /dev/null +++ b/docs/src/css/card.module.css @@ -0,0 +1,71 @@ +.card { + border-radius: .5rem; + display: flex; + flex-direction: column; + min-width: 200px; + background: var(--card-background); + padding: 1rem; + text-decoration: none; + transition: all .2 ease-in-out; +} + +.card:hover { + text-decoration: none; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.card p { + font-size: 14px; + margin: 0; + color: var(--ifm-font-color-base); +} + +.cardimg { + height: 100px; + background-size: cover; + object-fit: contain; + background-position: center; + padding: .5rem 0; + pointer-events: none; +} + +.fillspace { + flex: 1; +} + +.bottom { + display: flex; + align-items: center; +} + +.bottomicon { + width: 24px; + margin-right: .5rem; + color: var(--ifm-font-color-base); +} + +.bottomspan { + font-size: 12px; + font-weight: 600; + color: var(--ifm-font-color-base); + text-transform: uppercase; + margin: 0; +} + +.cardWrapper { + display: grid; + grid-template-columns: 1fr; + grid-gap: 1rem; +} + +@media (min-width: 769px) { + .cardWrapper { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 1180px) { + .cardWrapper { + grid-template-columns: 1fr 1fr 1fr; + } +} \ No newline at end of file diff --git a/docs/src/css/column.module.css b/docs/src/css/column.module.css new file mode 100644 index 0000000000..64bc9e4b8f --- /dev/null +++ b/docs/src/css/column.module.css @@ -0,0 +1,11 @@ +.column { + display: grid; + grid-template-columns: 1fr; + grid-gap: 1rem; +} + +@media (min-width: 1180px) { + .column { + grid-template-columns: 1fr 1fr; + } +} diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 203990db78..dee4895a06 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -13,6 +13,9 @@ --ifm-footer-background-color: #f4f4f4; --ifm-menu-color-background-active: #f2f5ff; --ifm-menu-color-active: #5469d4; + --ifm-menu-color-background-hover: #f7fafc; + --ifm-font-color-base: #6b7280; + --ifm-link-color: #5469d4; --ifm-menu-color: #697386; --ifm-footer-link-color: #000000; --ifm-color-primary: #5469d4; @@ -48,6 +51,21 @@ --ifm-color-warning-dark: #ffc1c1; --ifm-color-warning-contrast-background: #ffc1c1; --ifm-color-warning-contrast-foreground: #620e0e; + --card-background: #fafafa; + --list-background: #f7fafc; + --ifm-spacing-horizontal: 1.5rem; +} + +.padding-top--md { + padding-top: 3rem !important; +} + +.menu { + padding: 3rem .5rem !important; +} + +.menu__link--active { + font-weight: 600; } .react-toggle-track { @@ -138,7 +156,10 @@ h2 { --ifm-footer-background-color: #121430; --ifm-menu-color-background-active: #ffffff10; --ifm-menu-color-active: #ffffff; + --ifm-menu-color-background-hover: #3c405850; + --ifm-font-color-base: #c1c9d2; --ifm-menu-color: #a3acb9; + --ifm-link-color: #ff2069; --docsearch-searchbox-background: #454a66; --docsearch-searchbox-focus-background: #454a66; --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color); @@ -175,6 +196,8 @@ h2 { --ifm-color-warning-dark: #4f566b; --ifm-color-warning-contrast-background: #4f566b; --ifm-color-warning-contrast-foreground: #ffc1c1; + --card-background: #454a66; + --list-background: #3c405850; } .menu li li a { @@ -182,6 +205,48 @@ h2 { /* padding: 2px 14px; */ } +i { + font-size: 1.5rem; + color: var(--ifm-heading-color); +} + +main .container img { + border-radius: .5rem; +} + +.rounded { + display: flex; + align-items: center; + justify-content: center; + padding: .5rem; + margin-right: 1rem; + border-radius: 50%; +} + +.rounded i { + color: white; +} + +.rounded-start { + background: linear-gradient(40deg, #059669 30%, #047857); +} + +.rounded-login { + background: linear-gradient(40deg, #059669 30%, #047857); +} + +.rounded-privatelabel { + background: linear-gradient(40deg, #3b82f6 30%, #4f46e5); +} + +.rounded-texts { + background: linear-gradient(40deg, #dc2626 30%, #db2777); +} + +.rounded-system, .rounded-apis { + background: linear-gradient(40deg, #1f2937, #111827); +} + .docusaurus-highlight-code-line { background-color: rgb(72, 77, 91); display: block; diff --git a/docs/src/css/list.module.css b/docs/src/css/list.module.css new file mode 100644 index 0000000000..d6117ffaa4 --- /dev/null +++ b/docs/src/css/list.module.css @@ -0,0 +1,47 @@ +.listelement { + display: flex; + flex-direction: row; + align-items: center; + padding: .5rem 0; + text-decoration: none; + transition: all .2 ease-in-out; + margin: .5rem 0; +} + +.listelement:hover { + text-decoration: none; +} + +.listelement h3 { + margin: 0; + font-size: 14px; +} + +.listelement p { + font-size: 14px; + margin: 0; + color: var(--ifm-font-color-base); +} + +.fillspace { + flex: 1; +} + +.icon { + padding: .5rem 1rem .5rem .5rem; +} + +.listWrapper { + display: flex; + flex-direction: column; + background: var(--list-background); + border-radius: .5rem; + padding: 1rem; +} + +.listWrapperTitle { + color: var(--ifm-heading-color); + font-size: 16px; + margin-bottom: .5rem; + display: block; +} \ No newline at end of file diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 82c33b965c..29b109dd70 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -1,18 +1,19 @@ -import React from 'react'; -import clsx from 'clsx'; -import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './styles.module.css'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; import ThemedImage from '@theme/ThemedImage'; +import clsx from 'clsx'; +import React from 'react'; + +import styles from './styles.module.css'; const features = [ { title: 'Guides', darkImageUrl: 'img/index/Guides-dark.svg', lightImageUrl: 'img/index/Guides-light.svg', - link: 'docs/guides/introduction', + link: 'docs/guides/overview', description: ( <> Read our guides on how to manage your data and role associations in ZITADEL and on what we recommend. diff --git a/docs/static/img/tech/android.svg b/docs/static/img/tech/android.svg new file mode 100644 index 0000000000..3eb806f93b --- /dev/null +++ b/docs/static/img/tech/android.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/tech/angular.svg b/docs/static/img/tech/angular.svg new file mode 100644 index 0000000000..96301efe1b --- /dev/null +++ b/docs/static/img/tech/angular.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/docs/static/img/tech/aspnet.png b/docs/static/img/tech/aspnet.png new file mode 100644 index 0000000000..274660b1e1 Binary files /dev/null and b/docs/static/img/tech/aspnet.png differ diff --git a/docs/static/img/tech/dart.svg b/docs/static/img/tech/dart.svg new file mode 100644 index 0000000000..bdb580ec2b --- /dev/null +++ b/docs/static/img/tech/dart.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/static/img/tech/dotnet.svg b/docs/static/img/tech/dotnet.svg new file mode 100644 index 0000000000..d204a09042 --- /dev/null +++ b/docs/static/img/tech/dotnet.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/docs/static/img/tech/flutter.svg b/docs/static/img/tech/flutter.svg new file mode 100644 index 0000000000..b65f8527ee --- /dev/null +++ b/docs/static/img/tech/flutter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/tech/github.svg b/docs/static/img/tech/github.svg new file mode 100644 index 0000000000..fa7c25ae5d --- /dev/null +++ b/docs/static/img/tech/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/tech/golang.svg b/docs/static/img/tech/golang.svg new file mode 100644 index 0000000000..8164d5589e --- /dev/null +++ b/docs/static/img/tech/golang.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/static/img/tech/net.svg b/docs/static/img/tech/net.svg new file mode 100644 index 0000000000..2bea1985a9 --- /dev/null +++ b/docs/static/img/tech/net.svg @@ -0,0 +1 @@ +layer1 \ No newline at end of file diff --git a/docs/static/img/tech/nextjs.svg b/docs/static/img/tech/nextjs.svg new file mode 100644 index 0000000000..312dc61b92 --- /dev/null +++ b/docs/static/img/tech/nextjs.svg @@ -0,0 +1,18 @@ + + + + next-black + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/static/img/tech/oauth.svg b/docs/static/img/tech/oauth.svg new file mode 100644 index 0000000000..00d25690e0 --- /dev/null +++ b/docs/static/img/tech/oauth.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/static/img/tech/oauth2-proxy.svg b/docs/static/img/tech/oauth2-proxy.svg new file mode 100644 index 0000000000..4df740f6d3 --- /dev/null +++ b/docs/static/img/tech/oauth2-proxy.svg @@ -0,0 +1 @@ +OAuth2_Proxy_logo_v3 \ No newline at end of file diff --git a/docs/static/img/tech/react.png b/docs/static/img/tech/react.png new file mode 100644 index 0000000000..430e213a0f Binary files /dev/null and b/docs/static/img/tech/react.png differ diff --git a/docs/static/img/tech/vue.svg b/docs/static/img/tech/vue.svg new file mode 100644 index 0000000000..a1d285eb2a --- /dev/null +++ b/docs/static/img/tech/vue.svg @@ -0,0 +1,2 @@ + +