mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-29 10:32:15 +00:00
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 <[email protected]> * update docusaurus & review scenarios * refactor user login guide (#2921) * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: Fabi <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: Fabi <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: Fabi <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: mffap <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: mffap <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2b.mdx Co-authored-by: mffap <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: mffap <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: mffap <[email protected]> * Update docs/docs/guides/architecture-scenarios/b2c.mdx Co-authored-by: Fabi <[email protected]> * 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 <[email protected]> * Update docs/docs/guides/authentication/authmethods/implicit.mdx Co-authored-by: Livio Amstutz <[email protected]> * fix broken links * Update docs/docs/guides/solution-scenarios/b2c.mdx Co-authored-by: Florian Forster <[email protected]> * c for consumer Co-authored-by: Florian Forster <[email protected]> Co-authored-by: Fabi <[email protected]> Co-authored-by: mffap <[email protected]> Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Florian Forster
Fabi
mffap
Livio Amstutz
Florian Forster
Fabi
mffap
Livio Amstutz
parent
41ec3321b0
commit
68827dfdcd
+224
-48
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user