mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-12 03:17:33 +00:00
docs: rework documentation site (#1589)
* initial commit * inital changes * commit WIP Information Architecture * commit a working state * add static assets and project * add org and fix img names * add plausible * remove img * change sidebar to easier mgmt * add openid oauth and domains * lint md * quickstarts * add auth flow * identity brokering * remove site * fix broken links * extend footer * extend readme * fix: styling * fix: zitadel logo on index * styling * border * fix: nav * fix: nav * fix: index * fix: rename architecture to concepts * fix: introductions * fix: introductions * fix: introductions * fix: get started * fix: user manual * fix: zitadel architecture * fix: dead links * add favicon Co-authored-by: fabi <fabienne.gerschwiler@gmail.com> Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Florian Forster
49
docs/src/css/custom.css
Normal file
49
docs/src/css/custom.css
Normal file
@@ -0,0 +1,49 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat');
|
||||
|
||||
:root {
|
||||
--ifm-color-primary: #556cd1;
|
||||
--ifm-color-primary-dark: #3e58cb;
|
||||
--ifm-color-primary-darker: #3550c5;
|
||||
--ifm-color-primary-darkest: #2c42a2;
|
||||
--ifm-color-primary-light: #6c80d7;
|
||||
--ifm-color-primary-lighter: #788ada;
|
||||
--ifm-color-primary-lightest: #9aa8e4;
|
||||
--ifm-code-font-size: 95%;
|
||||
--ifm-font-family-base: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgb(72, 77, 91);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
.get-started {
|
||||
border: 1px solid;
|
||||
background-color: var(--ifm-font-color-base-inverse);
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.get-started:hover {
|
||||
background-color: var(--ifm-color-primary);
|
||||
color: var(--ifm-font-color-base-inverse);
|
||||
}
|
||||
|
||||
.docs-link a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.docs-link a:hover {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
117
docs/src/pages/index.js
Normal file
117
docs/src/pages/index.js
Normal file
@@ -0,0 +1,117 @@
|
||||
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';
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: 'Manuals',
|
||||
imageUrl: 'img/zitadel-logo-solo-light.png',
|
||||
link: 'docs/manuals/introduction',
|
||||
description: (
|
||||
<>
|
||||
Follow this guide to get started with ZITADEL as a user.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Quickstarts',
|
||||
imageUrl: 'img/zitadel-logo-solo-light.png',
|
||||
link: 'docs/quickstarts/introduction',
|
||||
description: (
|
||||
<>
|
||||
Learn how to integrate your applications and build secure workflows and APIs with ZITADEL
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Guides',
|
||||
imageUrl: 'img/zitadel-logo-solo-light.png',
|
||||
link: 'docs/guides/introduction',
|
||||
description: (
|
||||
<>
|
||||
Read our guides on how to manage your data and role associations in ZITADEL and on what we recommend.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'APIs',
|
||||
imageUrl: 'img/zitadel-logo-solo-light.png',
|
||||
link: '/docs/apis/introduction',
|
||||
description: (
|
||||
<>
|
||||
Learn more about our APIs and how to integrate them in your apps.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Concepts',
|
||||
imageUrl: 'img/zitadel-logo-solo-light.png',
|
||||
link: 'docs/concepts/introduction',
|
||||
description: (
|
||||
<>
|
||||
Learn more about engineering and design principles, ZITADELs architecture and used technologies.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({imageUrl, title, description, link}) {
|
||||
const imgUrl = useBaseUrl(imageUrl);
|
||||
return (
|
||||
<div className={clsx('col col--4 docs-link', styles.feature)}>
|
||||
<Link to={useBaseUrl(link)}>
|
||||
{imgUrl && (
|
||||
<div className="text--center">
|
||||
<img className={styles.featureImage} src={imgUrl} alt={title} />
|
||||
</div>
|
||||
)}
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const context = useDocusaurusContext();
|
||||
const {siteConfig = {}} = context;
|
||||
return (
|
||||
<Layout
|
||||
title={`${siteConfig.title}`}
|
||||
description="This site bundles ZITADELs Documentations">
|
||||
<header className={clsx('hero hero--primary', 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,
|
||||
)}
|
||||
to={useBaseUrl('docs/guides/get-started')}>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{features && features.length > 0 && (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{features.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
37
docs/src/pages/styles.module.css
Normal file
37
docs/src/pages/styles.module.css
Normal file
@@ -0,0 +1,37 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureImage {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
Reference in New Issue
Block a user