docs: styling, concepts cleanup (#2643)

* Architecture Scenarios B2B B2C * b2b b2c * cleanup concepts * homepage links, b2c docs * b2c, new homepage, custom components * more content * fix rxjs * temp remove architecture scenarios * temp remove architecture scenarios * Update docs/src/pages/index.js Co-authored-by: Florian Forster <florian@caos.ch> * update docusaurus & review scenarios * refactor user login guide (#2921) * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: mffap <mpa@caos.ch> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: mffap <mpa@caos.ch> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: mffap <mpa@caos.ch> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: mffap <mpa@caos.ch> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: mffap <mpa@caos.ch> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * user-login splitup * files * organize files * cleanup authmethods * solution scenarios * add link to authz * Update docs/docs/guides/authentication/authmethods/implicit.mdx Co-authored-by: Livio Amstutz <livio.a@gmail.com> * Update docs/docs/guides/authentication/authmethods/implicit.mdx Co-authored-by: Livio Amstutz <livio.a@gmail.com> * fix broken links * Update docs/docs/guides/solution-scenarios/b2c.mdx Co-authored-by: Florian Forster <florian@caos.ch> * c for consumer Co-authored-by: Florian Forster <florian@caos.ch> Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> Co-authored-by: mffap <mpa@caos.ch> Co-authored-by: Livio Amstutz <livio.a@gmail.com>
2025-08-11 23:57:31 +00:00 · 2022-01-11 20:48:13 +01:00
parent 41ec3321b0
commit 68827dfdcd
44 changed files with 1434 additions and 539 deletions
--- a/docs/src/components/b2b.jsx
+++ b/docs/src/components/b2b.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+export function B2B() {
+  return (
+    <div className="flexrowbetween">
+      <div className="b2borg">
+        <span>Octagon <small>(owner)</small></span>
+        <div className="b2bproject">
+          <span>Portal Project</span>
+
+          <div className="b2bapp">
+            <strong>WEBAPP</strong>
+          </div>
+
+          <span className="b2bprojectrole">reader, writer, admin</span>
+        </div>
+
+        <div className="b2buser">
+          Bill <small>(admin)</small>
+        </div>
+      </div>
+
+      <svg className="arrowright" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
+      
+      <div className="b2borg">
+        <span>Pentagon</span>
+        <div className="b2bproject">
+          <span>Portal Project <small>(grant)</small></span>
+
+          <div className="b2bapp">
+            <strong>WEBAPP</strong>
+          </div>
+
+          <span className="b2bprojectrole">reader, writer</span>
+        </div>
+
+        <div className="b2buser">
+          Dimitri <small>(writer)</small>
+        </div>
+
+        <div className="b2buser">
+          Michael <small>(reader)</small>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/docs/src/components/list.jsx
+++ b/docs/src/components/list.jsx
@@ -6,6 +6,12 @@ export const ICONTYPE = {
  START: <div className="rounded rounded-start">
    <i className={`las la-play-circle`}></i>
  </div>,
+  TASKS: <div className="rounded rounded-start">
+  <i className={`las la-tasks`}></i>
+</div>,
+  ARCHITECTURE: <div className="rounded rounded-architecture">
+  <i className={`las la-sitemap`}></i>
+</div>,
  LOGIN: <div className="rounded rounded-login">
    <i className={`las la-sign-in-alt`}></i>
  </div>,
@@ -21,6 +27,15 @@ export const ICONTYPE = {
  SERVICE: <div className="rounded rounded-service">
  <i className={`las la-concierge-bell`}></i>
  </div>,
+  STORAGE: <div className="rounded rounded-storage">
+  <i className={`las la-database`}></i>
+  </div>,
+  FOLDER: <div className="rounded rounded-storage">
+  <i className={`las la-folder`}></i>
+  </div>,
+  FILE: <div className="rounded rounded-storage">
+  <i className={`las la-file-alt`}></i>
+  </div>,
  SYSTEM: <div className="rounded rounded-system">
    <i className={`las la-server`}></i>
  </div>,
@@ -58,11 +73,13 @@ export const ICONTYPE = {
  </div>,
 };

-export function ListElement({ link, iconClasses, type, title, description}) {
+export function ListElement({ link, iconClasses,roundClasses, label, type, title, description}) {
  return (
    <a className={styles.listelement} href={link}>
      {type ? type : 
-        iconClasses && <div><i className={`${styles.icon} ${iconClasses}`}></i></div>
+        iconClasses && <div className={roundClasses}>
+          { label ? <span className={styles.listlabel}>{label}</span>: <i className={`${iconClasses}`}></i> }
+        </div>
      }
      <div>
        <h3>{title}</h3>
@@ -75,8 +92,19 @@ export function ListElement({ link, iconClasses, type, title, description}) {
 export function ListWrapper({children, title, columns}) {
  return (
    <div className={styles.listWrapper}>
-      <span className={styles.listWrapperTitle}>{title}</span>
+      {title && <span className={styles.listWrapperTitle}>{title}</span>}
      {children}
    </div>
  )
+}
+
+export function HomeListWrapper({children, image}) {
+  return (
+    <div className={styles.homerow}>
+      {image}
+      <div className={styles.homecontent}>
+        {children}
+      </div>
+    </div>
+  )
 }
--- 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;
 }
--- 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;
 }
--- 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: (
+      <ListWrapper>
+        <Column>
+          <div>
+            <ListElement
+              link="docs/guides/basics/get-started"
+              type={ICONTYPE.START}
+              title="Get started"
+              description=""
+            />
+            <ListElement
+              link="docs/guides/authentication/login-users"
+              type={ICONTYPE.LOGIN}
+              title="Authentication"
+              description=""
+            />
+            <ListElement
+              link="docs/guides/authorization/oauth-recommended-flows"
+              type={ICONTYPE.LOGIN}
+              title="Authorization"
+              description=""
+            />
+            <ListElement
+              link="docs/guides/api/access-zitadel-apis"
+              type={ICONTYPE.APIS}
+              title="Access APIs"
+              description=""
+            />
+          </div>
+          <div>
+            <ListElement
+              link="docs/guides/solution-scenarios/introduction"
+              iconClasses="las la-paragraph"
+              roundClasses="rounded rounded-split"
+              label="B2C"
+              title="Solution Scenarios"
+              description=""
+            />
+            <ListElement
+              link="docs/guides/customization/branding"
+              type={ICONTYPE.PRIVATELABELING}
+              title="Customization"
+              description=""
+            />
+            <ListElement
+              link="docs/guides/installation/shared-cloud"
+              type={ICONTYPE.STORAGE}
+              title="Installation"
+              description=""
+            />
+            <ListElement
+              link="docs/guides/trainings/introduction"
+              type={ICONTYPE.STORAGE}
+              title="Trainings"
+              description=""
+            />
+          </div>
+        </Column>
+      </ListWrapper>
+    ),
  },
  {
-    title: 'Quickstarts',
-    darkImageUrl: 'img/index/Quickstarts-dark.svg',
-    lightImageUrl: 'img/index/Quickstarts-light.svg',
-    link: 'docs/quickstarts/introduction',
+    title: "Quickstarts",
+    darkImageUrl: "img/index/Quickstarts-dark.svg",
+    lightImageUrl: "img/index/Quickstarts-light.svg",
+    link: "docs/quickstarts/introduction",
    description: (
-        <>
-          Learn how to integrate your applications and build secure workflows and APIs with ZITADEL
-        </>
+      <>
+        Learn how to integrate your applications and build secure workflows and
+        APIs with ZITADEL
+      </>
+    ),
+    content: (
+      <div className={styles.quickstartcontainer}>
+        <QuickstartLink
+          link="/docs/quickstarts/login/angular"
+          imageSource="/img/tech/angular.svg"
+          title="Angular"
+          description="Add the user login to your application and query some data from the userinfo endpoint"
+        />
+        <QuickstartLink
+          link="/docs/quickstarts/login/react"
+          imageSource="/img/tech/react.png"
+          title="React"
+          description="Logs into your application and queries some data from the userinfo endpoint"
+        />
+        <QuickstartLink
+          link="/docs/quickstarts/login/flutter"
+          imageSource="/img/tech/flutter.svg"
+          title="Flutter"
+          description="Mobile Application working for iOS and Android that authenticates your user."
+        />
+        <QuickstartLink
+          link="/docs/quickstarts/login/nextjs"
+          imageSource="/img/tech/nextjslight.svg"
+          lightImageSource="/img/tech/nextjs.svg"
+          title="NextJS"
+          description="A simple application to log into your user account and query some data from User endpoint."
+        />
+      </div>
    ),
  },
  {
-    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: (
+      <div className={styles.apilinks}>
+        <ListWrapper>
+          <ListElement
+            link="./docs/apis/proto/auth"
+            type={ICONTYPE.APIS}
+            title="Proto Definitions"
+            description=""
+          />
+          <ListElement
+            link="./docs/apis/openidoauth/endpoints"
+            type={ICONTYPE.APIS}
+            title="OpenID Connect and OAuth"
+            description="Scopes, Claims, Authentication Methods, Grant Types"
+          />
+        </ListWrapper>
+      </div>
    ),
  },
  {
-    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: (
+      <ListWrapper>
+        <ListElement
+          link="./docs/concepts/principles"
+          type={ICONTYPE.TASKS}
+          title="Principles"
+          description="Design and engineering principles"
+        />
+        <ListElement
+          link="./docs/concepts/eventstore"
+          type={ICONTYPE.STORAGE}
+          title="Eventstore"
+          description="Learn how ZITADEL stores data"
+        />
+        <ListElement
+          link="./docs/concepts/architecture"
+          type={ICONTYPE.ARCHITECTURE}
+          title="Architecture"
+          description="Sotware-, Cluster- and Multi Cluster Architecture"
+        />
+        <ListElement
+          link="./docs/concepts/structure/overview"
+          type={ICONTYPE.ARCHITECTURE}
+          title="Structure"
+          description="Object structure of ZITADEL"
+        />
+      </ListWrapper>
+    ),
  },
 ];

-function Feature({darkImageUrl, lightImageUrl, title, description, link}) {
+function QuickstartLink({ link, title, imageSource, lightImageSource }) {
+  return (
+    <Link href={link} className={clsx("", styles.quickstart)}>
+      {/* <img className={styles.quickstartlinkimg} src={imageSource} alt={`${title}`}/> */}
+      <ThemedImage
+        className={styles.quickstartlinkimg}
+        alt={title}
+        sources={{
+          light: lightImageSource ? lightImageSource : imageSource,
+          dark: imageSource,
+        }}
+      />
+      <p>{title}</p>
+    </Link>
+  );
+}
+
+function Feature({
+  darkImageUrl,
+  lightImageUrl,
+  title,
+  description,
+  link,
+  content,
+}) {
  const darkImgUrl = useBaseUrl(darkImageUrl);
  const lightImgUrl = useBaseUrl(lightImageUrl);
+
+  const themedImage = (
+    <ThemedImage
+      className={styles.featureImage}
+      alt={title}
+      sources={{
+        light: lightImgUrl,
+        dark: darkImgUrl,
+      }}
+    />
+  );
  return (
-        <div className={clsx('col col--4 docs-link', styles.feature)}>
-          <Link to={useBaseUrl(link)}>
-          {darkImgUrl && lightImgUrl && (
-              <div className="text--center">
-                <ThemedImage
-                    className={styles.featureImage}
-                    alt={title}
-                    sources={{
-                      light: lightImgUrl,
-                      dark: darkImgUrl,
-                    }}
-                />
-              </div>
-          )}
-          <h3 className="text--center">{title}</h3>
-          <p className="text--center">{description}</p>
-          </Link>
+    <div className={clsx("col col--6 docs-link", styles.feature)}>
+      {darkImgUrl && lightImgUrl && (
+        <div className="">
+          <HomeListWrapper image={themedImage}>
+            <Link to={useBaseUrl(link)}>
+              <h3 className={styles.homelink}>
+                {title}
+                <i
+                  className={clsx("las la-angle-right", styles.homelinkicon)}
+                ></i>
+              </h3>
+            </Link>
+            <p className="">{description}</p>
+
+            {content}
+          </HomeListWrapper>
        </div>
+      )}
+    </div>
  );
 }

 export default function Home() {
  const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
+  const { siteConfig = {} } = context;
  return (
    <Layout
      title={`${siteConfig.title}`}
-      description="This site bundles ZITADELs Documentations">
-      <header className={clsx('hero', styles.heroBanner)}>
+      description="This site bundles ZITADELs Documentations"
+    >
+      <header className={clsx("hero", styles.heroBanner)}>
        <div className="container">
          <h1 className="hero__title">{siteConfig.title}</h1>
          <p className="hero__subtitle">{siteConfig.tagline}</p>
          <div className={styles.buttons}>
            <Link
              className={clsx(
-                'button button--outline button--lg get-started',
-                styles.getStarted,
+                "button button--outline button--lg get-started",
+                styles.getStarted
              )}
-              to={useBaseUrl('docs/guides/basics/get-started')}>
+              to={useBaseUrl("docs/guides/basics/get-started")}
+            >
              Get Started
            </Link>
          </div>
--- 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;
+}