From 348c486a9fae75ffa8d8b648b63a676b8243f510 Mon Sep 17 00:00:00 2001
From: Filip Grebowski <filip@permit.io>
Date: Mon, 27 Jan 2025 13:28:08 +0000
Subject: [PATCH 1/5] Added Access Request and Approval Example in the docs

---
 .../access-requests-and-approvals.mdx         | 117 ++++++++++++++++++
 src/components/video/Video.js                 |  30 ++++-
 2 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 docs/modeling/access-requests-and-approvals.mdx

diff --git a/docs/modeling/access-requests-and-approvals.mdx b/docs/modeling/access-requests-and-approvals.mdx
new file mode 100644
index 00000000..c1af8d66
--- /dev/null
+++ b/docs/modeling/access-requests-and-approvals.mdx
@@ -0,0 +1,117 @@
+---
+sidebar_position: 6
+title: Implementing Access Requests & Approvals
+---
+
+In this tutorial, you will learn how to integrate an access request and approval system into your app using Permit.io. We’ll
+cover how users can **[request access](https://docs.permit.io/embeddable-uis/element/access-request)** to specific areas of your
+application, while admins **review, [approve](https://docs.permit.io/embeddable-uis/element/operation-approval) or deny** those requests effortlessly.
+
+<br />
+
+---
+
+import TimelineStep from "../../src/components/timeline/TimelineStep";
+import TimelineWrapper from "../../src/components/timeline/TimelineWrapper";
+import Video from "../../src/components/video/Video";
+
+## What are Permit Elements?
+
+In this tutorial, we’ll explore **[Permit Elements](https://docs.permit.io/embeddable-uis/overview)** — secure, embeddable UI
+components that revolutionize access management for modern applications. These components empower your users to handle **[access
+requests](https://docs.permit.io/embeddable-uis/element/access-request)** and approvals directly within your app, delivering a
+seamless and user-friendly experience without compromising on security.
+
+With Permit Elements, you can effortlessly integrate permission management into your app, enabling you to streamline workflows
+and maintain robust control over access policies.
+
+### A demo of Permit Elements
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=3g20HqYmGDs"} controls />
+
+<br />
+<br />
+
+<TimelineWrapper>
+<TimelineStep>
+
+## Configuring your JWKS
+
+In this section, we’ll explore **[JSON Web Key Sets](https://docs.permit.io/embeddable-uis/embedding-elements#configuring-jwks-for-your-environment)** (JWKS) —
+a critical component for ensuring the integrity of your JSON Web Tokens (JWTs). JWKS is essentially a collection of public keys
+that your application uses to validate incoming tokens, confirming they are legitimate and originate from a trusted source.
+
+By configuring JWKS in your app, you enable it to automatically fetch the public keys needed for secure token verification.
+This adds an **essential layer of security** to your authentication process, ensuring that only properly authenticated users can
+access your resources.
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=dtJ_R2L8W5A"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Setting up Permit and Elements
+
+Now that you’re familiar with the basics, it’s time to dive into integrating Permit into your app. In this section, we’ll
+guide you through the essential steps, including installing dependencies, setting up the **[Policy Decision Point](https://docs.permit.io/overview/glossary/#pdp)** (PDP), and
+configuring your app for a seamless integration. By the end, you’ll have a **fully operational access control system**, ready to
+manage permissions efficiently and securely.
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=-seLiGBx7Ek"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Building the Authorization Policy
+
+This is where the real magic of **authorization** happens—deciding exactly what your users can do within your app. In this
+section, we’ll guide you through **creating resources, defining roles, and specifying actions** users can take on those resources.
+Once everything is set up, you’ll **assign these roles and permissions** to your users, ensuring everyone has the right level of
+access for their needs.
+
+<br />
+
+<Video src={"https://www.youtube.com/watch?v=Z49Rpj4ygzk"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Configuring Elements
+
+In this section, we’ll explore how to customize **[Permit Elements](https://docs.permit.io/embeddable-uis/overview)** to fit
+perfectly within your app’s design and workflows. Permit Elements are built with flexibility in mind, allowing you to tweak
+both their behavior and appearance to match your app’s unique style.
+
+We’ll walk through the key customization options step by step—covering how to adjust workflows, modify visual elements, and
+ensure everything blends seamlessly with your app’s user interface. By the end, you’ll have a polished, secure, and fully
+integrated solution that enhances both functionality and design.
+
+<Video src={"https://www.youtube.com/watch?v=YROeDW0bBzo"} controls />
+
+</TimelineStep>
+<TimelineStep>
+
+## Embedding the Elements in our App
+
+In this section, we’re diving into the technical side by **embedding the Permit Elements** directly into your app. First, we’ll take
+the generated **[iframe](https://docs.permit.io/embeddable-uis/element/access-request#creating-an-iframe)** snippet and
+seamlessly integrate it into your app’s codebase.
+
+Next, we’ll cover how to log users into the element, ensuring everything works together smoothly.
+
+<Video src={"https://www.youtube.com/watch?v=h1kB_8ZKSmE"} controls />
+
+</TimelineStep>
+</TimelineWrapper>
+
+With these steps completed, you’ve successfully **installed the dependencies**, set up the **Policy Decision Point** (PDP),
+and **configured [Permit](https://app.permit.io) for your app**.
+
+You’re now ready to embed Permit Elements, giving your users the ability to handle access
+requests and approvals seamlessly. With everything in place, your app is equipped for **secure, efficient access management**.
diff --git a/src/components/video/Video.js b/src/components/video/Video.js
index f9bd4c0f..e8a85382 100644
--- a/src/components/video/Video.js
+++ b/src/components/video/Video.js
@@ -5,9 +5,37 @@ const VideoPlayer = ({
   autoPlay = true,
   loop = true,
   controls = true,
-  className = "w-full h-auto block",
+  className = "w-full h-full block",
   ...props
 }) => {
+  const isYouTubeLink = (url) => {
+    try {
+      const parsedUrl = new URL(url);
+      return parsedUrl.hostname.includes("youtube.com") || parsedUrl.hostname.includes("youtu.be");
+    } catch (e) {
+      return false;
+    }
+  };
+
+  if (isYouTubeLink(src)) {
+    const embedUrl = src.includes("youtube.com")
+      ? src.replace("watch?v=", "embed/")
+      : src.replace("youtu.be/", "youtube.com/embed/");
+
+    return (
+      <div className={`relative ${className}`} style={{ paddingTop: "56.25%" }}>
+        <iframe
+          src={embedUrl}
+          title="YouTube video"
+          className="absolute top-0 left-0 w-full h-full"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          {...props}
+        ></iframe>
+      </div>
+    );
+  }
+
   return (
     <video controls={controls} autoPlay={autoPlay} loop={loop} className={className} {...props}>
       <source src={src} type="video/mp4" />

From e9136181b65bccbb5902c6dc4b2e6bf4883a02ff Mon Sep 17 00:00:00 2001
From: Filip Grebowski <filip@permit.io>
Date: Mon, 27 Jan 2025 13:29:59 +0000
Subject: [PATCH 2/5] Added line break

---
 docs/modeling/access-requests-and-approvals.mdx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/modeling/access-requests-and-approvals.mdx b/docs/modeling/access-requests-and-approvals.mdx
index c1af8d66..ed78cbc1 100644
--- a/docs/modeling/access-requests-and-approvals.mdx
+++ b/docs/modeling/access-requests-and-approvals.mdx
@@ -34,6 +34,11 @@ and maintain robust control over access policies.
 <br />
 <br />
 
+---
+
+<br />
+<br />
+
 <TimelineWrapper>
 <TimelineStep>
 

From aa6e7702fee37153388dee14af7cf261e479533d Mon Sep 17 00:00:00 2001
From: Filip Grebowski <filip@permit.io>
Date: Mon, 27 Jan 2025 14:44:35 +0000
Subject: [PATCH 3/5] Fixed links

---
 docs/modeling/access-requests-and-approvals.mdx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/modeling/access-requests-and-approvals.mdx b/docs/modeling/access-requests-and-approvals.mdx
index ed78cbc1..c6f7b89a 100644
--- a/docs/modeling/access-requests-and-approvals.mdx
+++ b/docs/modeling/access-requests-and-approvals.mdx
@@ -4,8 +4,8 @@ title: Implementing Access Requests & Approvals
 ---
 
 In this tutorial, you will learn how to integrate an access request and approval system into your app using Permit.io. We’ll
-cover how users can **[request access](https://docs.permit.io/embeddable-uis/element/access-request)** to specific areas of your
-application, while admins **review, [approve](https://docs.permit.io/embeddable-uis/element/operation-approval) or deny** those requests effortlessly.
+cover how users can **[request access](/embeddable-uis/element/access-request)** to specific areas of your
+application, while admins **review, [approve](/embeddable-uis/element/operation-approval) or deny** those requests effortlessly.
 
 <br />
 
@@ -17,9 +17,9 @@ import Video from "../../src/components/video/Video";
 
 ## What are Permit Elements?
 
-In this tutorial, we’ll explore **[Permit Elements](https://docs.permit.io/embeddable-uis/overview)** — secure, embeddable UI
+In this tutorial, we’ll explore **[Permit Elements](/embeddable-uis/overview)** — secure, embeddable UI
 components that revolutionize access management for modern applications. These components empower your users to handle **[access
-requests](https://docs.permit.io/embeddable-uis/element/access-request)** and approvals directly within your app, delivering a
+requests](/embeddable-uis/element/access-request)** and approvals directly within your app, delivering a
 seamless and user-friendly experience without compromising on security.
 
 With Permit Elements, you can effortlessly integrate permission management into your app, enabling you to streamline workflows
@@ -44,7 +44,7 @@ and maintain robust control over access policies.
 
 ## Configuring your JWKS
 
-In this section, we’ll explore **[JSON Web Key Sets](https://docs.permit.io/embeddable-uis/embedding-elements#configuring-jwks-for-your-environment)** (JWKS) —
+In this section, we’ll explore **[JSON Web Key Sets](/embeddable-uis/embedding-elements#configuring-jwks-for-your-environment)** (JWKS) —
 a critical component for ensuring the integrity of your JSON Web Tokens (JWTs). JWKS is essentially a collection of public keys
 that your application uses to validate incoming tokens, confirming they are legitimate and originate from a trusted source.
 
@@ -62,7 +62,7 @@ access your resources.
 ## Setting up Permit and Elements
 
 Now that you’re familiar with the basics, it’s time to dive into integrating Permit into your app. In this section, we’ll
-guide you through the essential steps, including installing dependencies, setting up the **[Policy Decision Point](https://docs.permit.io/overview/glossary/#pdp)** (PDP), and
+guide you through the essential steps, including installing dependencies, setting up the **[Policy Decision Point](/overview/glossary/#pdp)** (PDP), and
 configuring your app for a seamless integration. By the end, you’ll have a **fully operational access control system**, ready to
 manage permissions efficiently and securely.
 
@@ -89,7 +89,7 @@ access for their needs.
 
 ## Configuring Elements
 
-In this section, we’ll explore how to customize **[Permit Elements](https://docs.permit.io/embeddable-uis/overview)** to fit
+In this section, we’ll explore how to customize **[Permit Elements](/embeddable-uis/overview)** to fit
 perfectly within your app’s design and workflows. Permit Elements are built with flexibility in mind, allowing you to tweak
 both their behavior and appearance to match your app’s unique style.
 
@@ -105,7 +105,7 @@ integrated solution that enhances both functionality and design.
 ## Embedding the Elements in our App
 
 In this section, we’re diving into the technical side by **embedding the Permit Elements** directly into your app. First, we’ll take
-the generated **[iframe](https://docs.permit.io/embeddable-uis/element/access-request#creating-an-iframe)** snippet and
+the generated **[iframe](/embeddable-uis/element/access-request#creating-an-iframe)** snippet and
 seamlessly integrate it into your app’s codebase.
 
 Next, we’ll cover how to log users into the element, ensuring everything works together smoothly.

From ac6fdcb8eabdbc511a59f6d72243ba779273435c Mon Sep 17 00:00:00 2001
From: Filip Grebowski <filip@permit.io>
Date: Tue, 28 Jan 2025 11:26:59 +0000
Subject: [PATCH 4/5] Moved under walkthroughs

---
 .../access-requests-and-approvals.mdx         |  4 ++--
 sidebars.js                                   | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)
 rename docs/{modeling => overview}/access-requests-and-approvals.mdx (98%)

diff --git a/docs/modeling/access-requests-and-approvals.mdx b/docs/overview/access-requests-and-approvals.mdx
similarity index 98%
rename from docs/modeling/access-requests-and-approvals.mdx
rename to docs/overview/access-requests-and-approvals.mdx
index c6f7b89a..cb552033 100644
--- a/docs/modeling/access-requests-and-approvals.mdx
+++ b/docs/overview/access-requests-and-approvals.mdx
@@ -1,6 +1,6 @@
 ---
-sidebar_position: 6
-title: Implementing Access Requests & Approvals
+sidebar_position: 9
+title: Access Requests & Approvals
 ---
 
 In this tutorial, you will learn how to integrate an access request and approval system into your app using Permit.io. We’ll
diff --git a/sidebars.js b/sidebars.js
index 07de8705..073ee77b 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -92,6 +92,7 @@ const sidebars = {
             // "overview/setup-relationship-based-access-control",
             // "overview/sync-application-data-into-permit",
             // "overview/perform-a-local-policy-check",
+            "overview/access-requests-and-approvals",
             {
               type: "category",
               label: "Manage Your Account",
@@ -126,7 +127,12 @@ const sidebars = {
             type: "doc",
             id: "overview/best-practices",
           },
-          items: ["how-to/ownership", "overview/how-does-it-work", "concepts/multitenancy", "how-to/build-policies/abac/time-based-role"],
+          items: [
+            "how-to/ownership",
+            "overview/how-does-it-work",
+            "concepts/multitenancy",
+            "how-to/build-policies/abac/time-based-role",
+          ],
         },
       ],
     },
@@ -366,13 +372,10 @@ const sidebars = {
           ],
         },
         {
-            type: "category",
-            label: "Policy Guard",
-            items: [
-              "how-to/policy-guard/policy_guard",
-                "how-to/policy-guard/policy_guard_api",
-              ],
-        }
+          type: "category",
+          label: "Policy Guard",
+          items: ["how-to/policy-guard/policy_guard", "how-to/policy-guard/policy_guard_api"],
+        },
       ],
     },
     {

From 7e110c97aa0c2d2bbd21af58217b4383bf909981 Mon Sep 17 00:00:00 2001
From: Filip Grebowski <filip@permit.io>
Date: Tue, 28 Jan 2025 11:58:46 +0000
Subject: [PATCH 5/5] What did you learn & fun facts

---
 docs/overview/access-requests-and-approvals.mdx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/overview/access-requests-and-approvals.mdx b/docs/overview/access-requests-and-approvals.mdx
index cb552033..c08ad9cb 100644
--- a/docs/overview/access-requests-and-approvals.mdx
+++ b/docs/overview/access-requests-and-approvals.mdx
@@ -120,3 +120,17 @@ and **configured [Permit](https://app.permit.io) for your app**.
 
 You’re now ready to embed Permit Elements, giving your users the ability to handle access
 requests and approvals seamlessly. With everything in place, your app is equipped for **secure, efficient access management**.
+
+## What did you learn?
+
+You should have learned how to:
+
+- Integrate **access requests and approvals** into your app with **Permit Elements**.
+- Configure key components like **JWKS** and the **Policy Decision Point** for secure workflows.
+- **Customize** and **embed Permit Elements** to match your app’s design and functionality.
+
+:::tip FUN FACT
+The concept of access requests and approvals dates back to ancient Egypt! In the time of the pharaohs, scribes used clay seals
+as "approvals" to access royal documents or treasure rooms. These seals acted as both a request and an authorization tool, much
+like modern-day digital workflows.
+:::