zitadel

1
import Link from "@docusaurus/Link";
2
import useBaseUrl from "@docusaurus/useBaseUrl";
3
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
4
import Layout from "@theme/Layout";
5
import ThemedImage from "@theme/ThemedImage";
6
import clsx from "clsx";
7
import React from "react";
8

9
import Column from "../components/column";
10
import {
11
  HomeListWrapper,
12
  ICONTYPE,
13
  ListElement,
14
  ListWrapper,
15
} from "../components/list";
16
import styles from "./styles.module.css";
17

18
const features = [
19
  {
20
    title: "Documentation", // TODO: Plausible
21
    darkImageUrl: "img/index/Guides-dark.svg",
22
    lightImageUrl: "img/index/Guides-light.svg",
23
    link: "guides/overview",
24
    description: (
25
      <>
26
        Read our documentation and learn how you can setup, customize, and
27
        integrate authentication and authorization to your project.
28
      </>
29
    ),
30
    content: (
31
      <ListWrapper>
32
        <Column>
33
          <div>
34
            <ListElement
35
              link="/docs/guides/start/quickstart"
36
              type={ICONTYPE.START}
37
              title="Get started"
38
              description=""
39
            />
40
            <ListElement
41
              link="/docs/sdk-examples/introduction"
42
              type={ICONTYPE.APIS}
43
              title="SDKs"
44
              description=""
45
            />
46
            <ListElement
47
              link="/docs/sdk-examples/introduction"
48
              type={ICONTYPE.APIS}
49
              title="Example Apps"
50
              description=""
51
            />
52
            <ListElement
53
              link="/docs/guides/manage/console/overview"
54
              type={ICONTYPE.LOGIN}
55
              title="Manage"
56
              description="All about Console"
57
            />
58
            <ListElement
59
              link="/docs/guides/integrate"
60
              type={ICONTYPE.LOGIN}
61
              title="Integrate"
62
              description="Access our APIs and configure services and tools"
63
            />
64
          </div>
65
          <div>
66
            <ListElement
67
              link="/docs/guides/solution-scenarios/introduction"
68
              iconClasses="las la-paragraph"
69
              roundClasses="custom-rounded custom-rounded-split"
70
              label="B2C"
71
              title="Solution Scenarios"
72
              description=""
73
            />
74
            <ListElement
75
              link="/docs/concepts"
76
              type={ICONTYPE.TASKS}
77
              title="Concepts"
78
              description=""
79
            />
80
            <ListElement
81
              link="/docs/concepts/architecture/software"
82
              type={ICONTYPE.ARCHITECTURE}
83
              title="Architecture"
84
              description=""
85
            />
86
            <ListElement
87
              link="/docs/guides/manage/customize/branding"
88
              type={ICONTYPE.PRIVATELABELING}
89
              title="Customization"
90
              description=""
91
            />
92
            <ListElement
93
              link="/docs/support/troubleshooting"
94
              type={ICONTYPE.HELP}
95
              title="Support"
96
              description=""
97
            />
98
          </div>
99
        </Column>
100
      </ListWrapper>
101
    ),
102
  },
103
  {
104
    title: "Get Started",
105
    darkImageUrl: "/docs/img/index/Quickstarts-dark.svg",
106
    lightImageUrl: "img/index/Quickstarts-light.svg",
107
    link: "/docs/sdk-examples/introduction",
108
    description: (
109
      <>
110
        Learn how to integrate your applications and build secure workflows and
111
        APIs with ZITADEL.
112
      </>
113
    ),
114
    content: (
115
      <div className={styles.apilinks}>
116
        <ListWrapper>
117
          <ListElement
118
            link="/docs/guides/start/quickstart"
119
            type={ICONTYPE.START}
120
            title="Quick Start Guide"
121
            description="The ultimate guide to get started with ZITADEL."
122
          />
123
          <ListElement
124
            link="/docs/examples/login/angular"
125
            type={ICONTYPE.APIS}
126
            title="Frontend Quickstart Guides"
127
            description=""
128
          />
129
          <ListElement
130
            link="/docs/examples/secure-api/go"
131
            type={ICONTYPE.APIS}
132
            title="Backend Quickstart Guides"
133
            description=""
134
          />
135
          <ListElement
136
            link="/docs/sdk-examples/introduction"
137
            type={ICONTYPE.APIS}
138
            title="Examples"
139
            description="Clone an existing example application."
140
          />
141
        </ListWrapper>
142
      </div>
143
    ),
144
  },
145
  {
146
    title: "APIs",
147
    darkImageUrl: "/docs/img/index/APIs-dark.svg",
148
    lightImageUrl: "/docs/img/index/APIs-light.svg",
149
    link: "/apis/introduction",
150
    description: (
151
      <>Learn more about our APIs and how to integrate them in your apps.</>
152
    ),
153
    content: (
154
      <div className={styles.apilinks}>
155
        <ListWrapper>
156
          <ListElement
157
            link="/docs/apis/resources/auth/authentication-api-aka-auth"
158
            type={ICONTYPE.APIS}
159
            title="Authenticated User"
160
            description="All operations on the currently authenticated user."
161
          />
162
          <ListElement
163
            link="/docs/apis/resources/mgmt/management-api"
164
            type={ICONTYPE.APIS}
165
            title="Organization Objects"
166
            description="Mutate IAM objects like organizations, projects, clients, users etc."
167
          />
168
          <ListElement
169
            link="/docs/apis/resources/admin/administration-api-aka-admin"
170
            type={ICONTYPE.APIS}
171
            title="Instance Objects"
172
            description="Configure and manage the IAM instance."
173
          />
174
          <ListElement
175
            link="/docs/apis/openidoauth/endpoints"
176
            type={ICONTYPE.APIS}
177
            title="OIDC Endpoints"
178
            description=""
179
          />
180
          <ListElement
181
            link="/docs/apis/saml/endpoints"
182
            type={ICONTYPE.APIS}
183
            title="SAML Endpoints"
184
            description=""
185
          />
186
          <ListElement
187
            link="/docs/apis/actions/introduction"
188
            type={ICONTYPE.APIS}
189
            title="Actions"
190
            description="Customize and integrate ZITADEL into your landscape"
191
          />
192
        </ListWrapper>
193
      </div>
194
    ),
195
  },
196
  {
197
    title: "Self-hosting",
198
    darkImageUrl: "img/index/Concepts-dark.svg",
199
    lightImageUrl: "img/index/Concepts-light.svg",
200
    link: "/docs/self-hosting/deploy/overview",
201
    description: <>Everything you need to know about self-hosting ZITADEL.</>,
202
    content: (
203
      <ListWrapper>
204
        <ListElement
205
          link="/docs/self-hosting/deploy/overview"
206
          type={ICONTYPE.SYSTEM}
207
          title="Deploy"
208
          description=""
209
        />
210
        <ListElement
211
          link="/docs/self-hosting/manage/production"
212
          type={ICONTYPE.TASKS}
213
          title="Production Setup"
214
          description=""
215
        />
216
        <ListElement
217
          link="/docs/self-hosting/manage/configure"
218
          type={ICONTYPE.APIS}
219
          title="Configuration"
220
          description=""
221
        />
222
        <ListElement
223
          link="/docs/self-hosting/manage/updating_scaling"
224
          type={ICONTYPE.APIS}
225
          title="Update and Scaling"
226
          description=""
227
        />
228
      </ListWrapper>
229
    ),
230
  },
231
];
232

233
function QuickstartLink({ link, title, imageSource, lightImageSource }) {
234
  return (
235
    <Link href={link} className={clsx("", styles.quickstart)}>
236
      {/* <img className={styles.quickstartlinkimg} src={imageSource} alt={`${title}`}/> */}
237
      <ThemedImage
238
        className={styles.quickstartlinkimg}
239
        alt={title}
240
        sources={{
241
          light: lightImageSource ? lightImageSource : imageSource,
242
          dark: imageSource,
243
        }}
244
      />
245
      <p>{title}</p>
246
    </Link>
247
  );
248
}
249

250
function Feature({
251
  darkImageUrl,
252
  lightImageUrl,
253
  title,
254
  description,
255
  link,
256
  content,
257
}) {
258
  const darkImgUrl = useBaseUrl(darkImageUrl);
259
  const lightImgUrl = useBaseUrl(lightImageUrl);
260

261
  const themedImage = (
262
    <ThemedImage
263
      className={styles.featureImage}
264
      alt={title}
265
      sources={{
266
        light: lightImgUrl,
267
        dark: darkImgUrl,
268
      }}
269
    />
270
  );
271
  return (
272
    <div className={clsx("col col--6 docs-link", styles.feature)}>
273
      {darkImgUrl && lightImgUrl && (
274
        <div className="">
275
          <HomeListWrapper image={themedImage}>
276
            <Link to={useBaseUrl(link)}>
277
              <h3 className={styles.homelink}>
278
                {title}
279
                <i
280
                  className={clsx("las la-angle-right", styles.homelinkicon)}
281
                ></i>
282
              </h3>
283
            </Link>
284
            <p className="">{description}</p>
285

286
            {content}
287
          </HomeListWrapper>
288
        </div>
289
      )}
290
    </div>
291
  );
292
}
293

294
const Gigi = () => {
295
  return (
296
    <div className={styles.gigiwrapper}>
297
      <div className={styles.gigiwrapperrelative}>
298
        <img height="151px" width="256px" src="/docs/img/gigi.svg" />
299
        <div className={styles.gigibanner}>Try ZITADEL Cloud for FREE 🚀</div>
300
      </div>
301
    </div>
302
  );
303
};
304

305
export default function Home() {
306
  const context = useDocusaurusContext();
307
  const { siteConfig = {} } = context;
308
  return (
309
    <Layout description={`${siteConfig.customFields.description}`}>
310
      <header className={clsx("hero", styles.heroBanner)}>
311
        <div className="container">
312
          <h1 className="hero__title">{siteConfig.title}</h1>
313
          <p className="hero__subtitle">{siteConfig.tagline}</p>
314
          <div className={styles.buttons}>
315
            <Link
316
              className={clsx(
317
                "button button--outline button--lg get-started",
318
                styles.getStarted
319
              )}
320
              to={useBaseUrl("guides/start/quickstart")}
321
            >
322
              Get Started
323
            </Link>
324
          </div>
325
        </div>
326
        <Link to="https://zitadel.com">
327
          <Gigi />
328
        </Link>
329
      </header>
330
      <main>
331
        {features && features.length > 0 && (
332
          <section className={styles.features}>
333
            <div className="container">
334
              <div className="row">
335
                {features.map((props, idx) => (
336
                  <Feature key={idx} {...props} />
337
                ))}
338
              </div>
339
            </div>
340
          </section>
341
        )}
342
      </main>
343
    </Layout>
344
  );
345
}
346