From 383b68b48f3b8416e8d4487c55943227c6d59bb1 Mon Sep 17 00:00:00 2001 From: mffap Date: Wed, 6 Mar 2024 20:31:49 +0200 Subject: [PATCH] docs: add video to quickstart (#7512) --- docs/docs/guides/start/quickstart.mdx | 4 +++- docs/docusaurus.config.js | 6 ++++++ docs/package.json | 1 + docs/src/components/player.jsx | 17 +++++++++++++++ docs/src/css/custom.css | 13 +++++++++++ docs/yarn.lock | 31 +++++++++++++++++++++++++++ 6 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 docs/src/components/player.jsx diff --git a/docs/docs/guides/start/quickstart.mdx b/docs/docs/guides/start/quickstart.mdx index 0995afe2e..e0805a4a0 100644 --- a/docs/docs/guides/start/quickstart.mdx +++ b/docs/docs/guides/start/quickstart.mdx @@ -3,10 +3,12 @@ title: The ZITADEL Quick Start Guide sidebar_label: Quick Start Guide --- -## Introduction +import { ResponsivePlayer } from "../../../src/components/player"; In this quick start guide, we will be learning some fundamentals on how to set up ZITADEL for user management and application security. Thereafter, we will secure a React-based Single Page Application (SPA) using ZITADEL. + + The sample application allows users to securely log in to ZITADEL using the OIDC Proof Key for Code Exchange (PKCE) flow. This flow ensures that the authentication process is secure by using a code verifier and a code challenge, which are sent to ZITADEL to obtain an access token. The access token is then used by the app to access the userinfo endpoint to retrieve and display information about the logged-in user. The app also has a logout feature that allows users to end their session and clear their access token. Overall, the app provides a simple and secure way for users to authenticate and access protected resources within ZITADEL. ## ZITADEL terminology: instances, organizations, projects, users, roles, authorizations and apps diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 692a480f4..93f557792 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -65,6 +65,12 @@ module.exports = { target: "_blank", }, items: [ + { + type: "doc", + label: "🚀 Quick Start", + docId: "guides/start/quickstart", + position: "left", + }, { type: "doc", label: "Documentation", diff --git a/docs/package.json b/docs/package.json index ea2baa9b0..6dbca3a60 100644 --- a/docs/package.json +++ b/docs/package.json @@ -38,6 +38,7 @@ "react": "17.0.2", "react-copy-to-clipboard": "^5.1.0", "react-dom": "17.0.2", + "react-player": "^2.15.1", "sitemap": "7.1.1", "swc-loader": "^0.2.3", "wait-on": "6.0.1" diff --git a/docs/src/components/player.jsx b/docs/src/components/player.jsx new file mode 100644 index 000000000..2c1b4b73b --- /dev/null +++ b/docs/src/components/player.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import ReactPlayer from 'react-player' + +export function ResponsivePlayer({ url, ...props }) { + +return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 38ac4bba8..5083c842e 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -600,3 +600,16 @@ p strong { :root[data-theme="dark"] .hideonlight { display: block !important; } + + +.player-wrapper { + position: relative; + padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */ + margin-bottom: 2rem; +} + +.react-player { + position: absolute; + top: 0; + left: 0; +} \ No newline at end of file diff --git a/docs/yarn.lock b/docs/yarn.lock index e935d3adf..a42d5b908 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -4630,6 +4630,11 @@ deep-extend@^0.6.0: resolved "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz" integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== +deepmerge@^4.0.0: + version "4.3.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" + integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== + deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz" @@ -6643,6 +6648,11 @@ liquid-json@0.3.1: resolved "https://registry.npmjs.org/liquid-json/-/liquid-json-0.3.1.tgz" integrity sha512-wUayTU8MS827Dam6MxgD72Ui+KOSF+u/eIqpatOtjnvgJ0+mnDq33uC2M7J0tPK+upe/DpUAuK4JUU89iBoNKQ== +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA== + loader-runner@^4.2.0: version "4.3.0" resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz" @@ -6896,6 +6906,11 @@ memfs@^3.1.2, memfs@^3.4.1: dependencies: fs-monkey "^1.0.4" +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz" @@ -8464,6 +8479,11 @@ react-error-overlay@^6.0.11: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-fast-compare@^3.0.1: + version "3.2.2" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" + integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== + react-fast-compare@^3.2.0: version "3.2.0" resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz" @@ -8562,6 +8582,17 @@ react-modal@^3.15.1: react-lifecycles-compat "^3.0.0" warning "^4.0.3" +react-player@^2.15.1: + version "2.15.1" + resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.15.1.tgz#a5905126a6c5ba2667391a0d72da9f3a1ab57d54" + integrity sha512-ni1XFuYZuhIKKdeFII+KRLmIPcvCYlyXvtSMhNOgssdfnSovmakBtBTW2bxowPvmpKy5BTR4jC4CF79ucgHT+g== + dependencies: + deepmerge "^4.0.0" + load-script "^1.0.0" + memoize-one "^5.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.0.1" + react-redux@^7.2.0: version "7.2.9" resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"