+
+Branding and customization is a very important part of your application.
+With ZITADEL you can modify colors, logos, icons as well as configure your typography styles, such that you can provide a consistent design throughout your applications.
+In addition to visual modifications, you can edit notification texts for your users.
+ZITADEL gives you handlebar similar templating for variables. Of course you can define texts for any language.
+We'd appreciate if you could contribute to our repo with translations of your language. Read on how to contribute [here](../../guides/customization/texts).
+
+> Note that your console design changes to your design too
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/list.jsx b/docs/src/components/list.jsx
index ebd98d22b4f..3facf81787f 100644
--- a/docs/src/components/list.jsx
+++ b/docs/src/components/list.jsx
@@ -6,6 +6,12 @@ export const ICONTYPE = {
START:
+ Octagon (owner)
+
+
+
+
+
+ Portal Project
+
+
+
+
+ WEBAPP
+
+
+ reader, writer, admin
+
+ Bill (admin)
+
+
+ Pentagon
+
+
+ Portal Project (grant)
+
+
+
+
+ WEBAPP
+
+
+ reader, writer
+
+ Dimitri (writer)
+
+
+
+ Michael (reader)
+
+
+
+
,
+ ARCHITECTURE:
+
+
,
LOGIN:
+
+
,
+ FOLDER:
+
+
,
+ FILE:
+
+
,
SYSTEM:
+ iconClasses &&
+ { label ? {label}: }
+
}
{title}
@@ -75,8 +92,19 @@ export function ListElement({ link, iconClasses, type, title, description}) { export function ListWrapper({children, title, columns}) { return (
- {title}
+ {title && {title}}
{children}
)
+}
+
+export function HomeListWrapper({children, image}) {
+ return (
+
+ {image}
+
+ )
}
\ No newline at end of file
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 4f1e3975ca4..6bafa4177fa 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -58,6 +58,12 @@
--apimgmtbackground: linear-gradient(40deg, #c6d7f3 30%, #c7c6e3);
--apiadminbackground: linear-gradient(40deg, #c192c790, #c192c790);
--apiassetbackground: linear-gradient(40deg, #e4eaf1, #eef2f9);
+ --overlaycolor: #6c90b420;
+ --ifm-hero-text-color: #ffffff;
+}
+
+.get-started {
+ border-radius: 50vw;
}
.apicard-right {
@@ -211,6 +217,12 @@ h2 {
--apimgmtbackground: linear-gradient(40deg, #595d8090 30%, #595d8090);
--apiadminbackground: linear-gradient(40deg, #6a506e90, #6a506e90);
--apiassetbackground: linear-gradient(40deg, #3c4257, #3c4257);
+ --overlaycolor: #ffffff15;
+ --ifm-hero-text-color: #023c2a;
+}
+
+.get-started:hover {
+ color: #ffffff !important;
}
.menu li li a {
@@ -234,6 +246,8 @@ main .container img {
padding: .5rem;
margin-right: 1rem;
border-radius: 50%;
+ width: 40px;
+ height: 40px;
}
.rounded svg {
@@ -262,12 +276,18 @@ main .container img {
.rounded-privatelabel,
.rounded-phone,
.rounded-email,
+.rounded-storage,
.rounded-service {
background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
}
+.rounded-split {
+ background: linear-gradient(40deg, #3b82f6, #4f46e5);
+}
+
.rounded-texts,
-.rounded-help {
+.rounded-help,
+.rounded-architecture {
background: linear-gradient(40deg, #dc2626 30%, #db2777);
}
@@ -284,6 +304,10 @@ main .container img {
padding: 0 var(--ifm-pre-padding);
}
+.hero__title {
+ color: white;
+}
+
.get-started {
border: 2px solid var(--get-started);
background-color: var(--get-started);
@@ -295,6 +319,10 @@ main .container img {
color: var(--ifm-hero-text-color);
}
+.docs-link {
+ margin-bottom: 2rem;
+}
+
.docs-link a {
text-decoration: none;
color: inherit;
@@ -306,4 +334,51 @@ main .container img {
.docs-link img {
margin: 40px;
+}
+
+.b2borg,
+.b2bproject,
+.b2bapp,
+.b2buser {
+ border-radius: 1rem;
+ background: var(--overlaycolor);
+ padding: 1rem;
+}
+
+.b2buser {
+ margin-top: 1rem;
+}
+
+.b2borg span,
+.b2bproject span,
+.b2bapp span,
+.b2buser span {
+ margin-left: 1rem;
+ margin-bottom: 1rem;
+ display: block;
+}
+
+.flexrowbetween {
+ display: flex;
+ justify-content: space-around;
+ margin: 2rem 0;
+}
+
+.arrowright {
+ height: 2rem;
+ width: auto;
+ align-self: center;
+ min-width: 2rem;
+}
+
+.b2bprojectrole {
+ margin: 1rem 0 0 1rem !important;
+}
+
+.footer__link-item {
+ font-size: 14px;
+}
+
+.footer__link-item svg {
+ margin-left: .5rem;
}
\ No newline at end of file
diff --git a/docs/src/css/list.module.css b/docs/src/css/list.module.css
index d6117ffaa43..459286fe7a2 100644
--- a/docs/src/css/list.module.css
+++ b/docs/src/css/list.module.css
@@ -31,11 +31,15 @@
padding: .5rem 1rem .5rem .5rem;
}
+.listlabel {
+ color: white;
+}
+
.listWrapper {
display: flex;
flex-direction: column;
background: var(--list-background);
- border-radius: .5rem;
+ border-radius: 1rem;
padding: 1rem;
}
@@ -44,4 +48,18 @@
font-size: 16px;
margin-bottom: .5rem;
display: block;
+}
+
+.homerow {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+}
+
+.homecontent {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ padding: 1rem 0;
}
\ No newline at end of file
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 29b109dd701..da555daadef 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -6,98 +6,274 @@ import ThemedImage from '@theme/ThemedImage';
import clsx from 'clsx';
import React from 'react';
+import Column from '../components/column';
+import { HomeListWrapper, ICONTYPE, ListElement, ListWrapper } from '../components/list';
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/overview',
+ title: "Guides",
+ darkImageUrl: "img/index/Guides-dark.svg",
+ lightImageUrl: "img/index/Guides-light.svg",
+ link: "docs/guides/overview",
description: (
<>
- Read our guides on how to manage your data and role associations in ZITADEL and on what we recommend.
+ Read our guides on how to manage your data and role associations in
+ ZITADEL and on what we recommend.
),
+ content: (
+
+ {children}
+
+
+
+
+
+
+
),
},
{
- title: 'APIs',
- darkImageUrl: 'img/index/APIs-dark.svg',
- lightImageUrl: 'img/index/APIs-light.svg',
- link: '/docs/apis/introduction',
+ title: "APIs",
+ darkImageUrl: "img/index/APIs-dark.svg",
+ lightImageUrl: "img/index/APIs-light.svg",
+ link: "/docs/apis/introduction",
description: (
- <>
- Learn more about our APIs and how to integrate them in your apps.
-
+ <>Learn more about our APIs and how to integrate them in your apps.
+ ),
+ content: (
+
+
+
+
),
},
{
- title: 'Concepts',
- darkImageUrl: 'img/index/Concepts-dark.svg',
- lightImageUrl: 'img/index/Concepts-light.svg',
- link: 'docs/concepts/introduction',
+ title: "Concepts",
+ darkImageUrl: "img/index/Concepts-dark.svg",
+ lightImageUrl: "img/index/Concepts-light.svg",
+ link: "docs/concepts/introduction",
description: (
<>
- Learn more about engineering and design principles, ZITADELs architecture and used technologies.
+ Learn more about engineering and design principles, ZITADELs
+ architecture and used technologies.
),
+ content: (
+ {title}
+ + ); +} + +function Feature({ + darkImageUrl, + lightImageUrl, + title, + description, + link, + content, +}) { const darkImgUrl = useBaseUrl(darkImageUrl); const lightImgUrl = useBaseUrl(lightImageUrl); + + const themedImage = ( +
-
- {darkImgUrl && lightImgUrl && (
-
-
+ description="This site bundles ZITADELs Documentations"
+ >
+
-
- )}
- {title}
-{description}
- +
+ {darkImgUrl && lightImgUrl && (
+
);
}
export default function Home() {
const context = useDocusaurusContext();
- const {siteConfig = {}} = context;
+ const { siteConfig = {} } = context;
return (
+
+
+
+ )}
+ + {title} + +
+ +{description}
+ + {content} +{siteConfig.title}
{siteConfig.tagline}
+ to={useBaseUrl("docs/guides/basics/get-started")}
+ >
Get Started
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css
index c1aa85121c9..01d9ca39012 100644
--- a/docs/src/pages/styles.module.css
+++ b/docs/src/pages/styles.module.css
@@ -32,6 +32,72 @@
}
.featureImage {
- height: 200px;
- width: 200px;
+ height: 70px;
+ width: 70px;
+ margin: 1rem 1rem 1rem 0 !important;
}
+
+.homelink:hover,
+.homelink:hover i {
+ color: var(--ifm-link-color);
+}
+
+.homelinkicon {
+ font-size: 1.2rem;
+}
+
+.quickstartcontainer {
+ padding: 0;
+ border-radius: 1rem;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ margin: -0.5rem;
+}
+
+.quickstart {
+ flex: 1;
+ padding: 1rem;
+ margin: 0.5rem;
+ min-width: 200px;
+ display: flex;
+ align-items: center;
+ background: var(--list-background);
+ border-radius: 1rem;
+}
+
+.quickstart p {
+ margin: 0;
+ font-size: 1.5rem;
+}
+
+.quickstartlinkimg {
+ height: 80px;
+ width: 80px;
+ margin: 1rem 1rem 1rem 0 !important;
+ border-radius: 1rem;
+ background-size: cover;
+ object-fit: contain;
+ background-position: center;
+}
+
+
+@media screen and (max-width: 600px) {
+ .quickstartcontainer {
+ flex-direction: column;
+ }
+
+ .quickstartlinkimg {
+ height: 60px;
+ width: 60px;
+ }
+
+ .featureImage {
+ height: 50px;
+ width: 50px;
+ }
+}
+
+.apilinks h2 {
+ font-size: 1rem;
+}
\ No newline at end of file
diff --git a/docs/static/img/guides/branding.jpeg b/docs/static/img/guides/branding.jpeg
new file mode 100644
index 00000000000..dd87c5e87a5
Binary files /dev/null and b/docs/static/img/guides/branding.jpeg differ
diff --git a/docs/static/img/tech/nextjslight.svg b/docs/static/img/tech/nextjslight.svg
new file mode 100644
index 00000000000..803afe1d4b3
--- /dev/null
+++ b/docs/static/img/tech/nextjslight.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file