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 0995afe2e0..e0805a4a0a 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 692a480f48..93f5577926 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 ea2baa9b05..6dbca3a60f 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 0000000000..2c1b4b73bf --- /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 38ac4bba88..5083c842e9 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 e935d3adf4..a42d5b908f 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"