Merge pull request #1308 from Unleash/docs/add-video-component

Docs: Add a new video component

website/docs/how-to/how-to-create-and-assign-custom-project-roles.md

@@ -1,18 +1,24 @@
 ---
 title: How to create and assign custom project roles
 ---
+import VideoContent from '@site/src/components/VideoContent.jsx'
+
 :::info availability
 Custom project roles were introduced in **Unleash 4.6** and are only available in Unleash Enterprise.
 :::
 
-This guide takes you through [how to create](#creating-custom-project-roles "how to create custom project roles") and [assign](#assigning-custom-project-roles "how to assign custom project roles") [custom project roles](../user_guide/rbac.md#custom-project-roles).
+
+This guide takes you through [how to create](#creating-custom-project-roles "how to create custom project roles") and [assign](#assigning-custom-project-roles "how to assign custom project roles") [custom project roles](../user_guide/rbac.md#custom-project-roles). Custom project roles allow you to fine-tune access rights and permissions within your projects.
+
+<VideoContent videoUrls={["https://www.youtube.com/embed/2BlckVMHxgE" , "https://www.youtube.com/embed/IqaD8iGxkwk"]}>
+
+The guides on this page are also available in video format! Does a minute or two of watching someone walk through the steps sound better to you than following steps with static screenshots? If so, check out these video walkthroughs instead 🍿
+
+</VideoContent>
 
 ## Creating custom project roles
 
-
+It takes about three steps to create custom project roles:
-It takes about three steps to create custom project roles. You can either follow the steps in writing below or watch [the accompanying video](#video-create).
-
-To create custom project roles:
 
 1. Navigate to the custom project roles page by using the admin menu (the gear symbol) and navigating to users.
     ![A visual representation of the current step: the Unleash Admin UI with the steps highlighted.](/img/create-cpr-step-1.png)
@@ -23,17 +29,9 @@ To create custom project roles:
 4. Give the role a name, an optional description, and the set of permissions you'd like it to have. For a full overview of all the options, consult the [custom project roles reference documentation](../user_guide/rbac.md#custom-project-roles).
     ![The project role creation form filled in with details for a "developer" role. To the left is the equivalent cURL command you could run if you wanted to use the API instead of the form.](/img/create-cpr-step-4.png)
 
-### How to create custom project roles (video) {#video-create}
-
-Here's a video recording with accompanying explanations of how to create custom project roles:
-
-<iframe width="100%" height="auto" style={{  aspectRatio: "16/9"  }} src="https://www.youtube.com/embed/2BlckVMHxgE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-
-
 ## Assigning custom project roles
 
-Custom project role creation is a pretty straightforward process and requires around three steps, outlined below. There's also a [video version](#video-assign) available.
+Custom project role creation is a pretty straightforward process and requires around three steps, outlined below.
 
 To assign a custom project role to a user:
 1. Navigate to the project you want to assign the user a role in.
@@ -45,9 +43,3 @@ To assign a custom project role to a user:
         ![A list of users with access to the current project. To the right of each user is a dropdown input labeled role.](/img/assign-cpr-step-3a.png)
     - If the user _hasn't_ been added to the project, add them via the 'add user' form. Select the role you want to give them from the role field.
         ![Adding a user to a project. The add user form is filled out with data for an "Alexis". The Role input is open and the custom "Developer" role is highlighted.](/img/assign-cpr-step-3b.png)
-
-### How to assign custom project roles (video) {#video-assign}
-
-Here's a video recording with accompanying explanations of how to assign custom project roles:
-
-<iframe width="100%" height="auto" style={{  aspectRatio: "16/9"  }} src="https://www.youtube.com/embed/IqaD8iGxkwk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

website/docusaurus.config.js

@@ -44,7 +44,14 @@ module.exports = {
             ],
         },
         prism: {
-            additionalLanguages: ['java', 'swift', 'ruby', 'csharp', 'kotlin', 'php'],
+            additionalLanguages: [
+                'java',
+                'swift',
+                'ruby',
+                'csharp',
+                'kotlin',
+                'php',
+            ],
         },
         footer: {
             style: 'dark',
@@ -71,13 +78,11 @@ module.exports = {
                     items: [
                         {
                             label: 'Stack Overflow',
-                            href:
+                            href: 'https://stackoverflow.com/questions/tagged/unleash',
-                                'https://stackoverflow.com/questions/tagged/unleash',
                         },
                         {
                             label: 'Slack',
-                            href:
+                            href: 'https://join.slack.com/t/unleash-community/shared_invite/zt-8b6l1uut-LL67kLpIXm9bcN3~6RVaRQ',
-                                'https://join.slack.com/t/unleash-community/shared_invite/zt-8b6l1uut-LL67kLpIXm9bcN3~6RVaRQ',
                         },
                         {
                             label: 'Twitter',
@@ -105,8 +110,11 @@ module.exports = {
                         'https://github.com/Unleash/unleash/edit/main/website/',
                     routeBasePath: '/',
                     remarkPlugins: [
-                        [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}]
+                        [
-                    ]
+                            require('@docusaurus/remark-plugin-npm2yarn'),
+                            { sync: true },
+                        ],
+                    ],
                 },
                 theme: {
                     customCss: require.resolve('./src/css/custom.css'),
@@ -153,7 +161,7 @@ module.exports = {
                         from: '/user_guide/control_rollout',
                     },
                 ],
-                createRedirects: function(toPath) {
+                createRedirects: function (toPath) {
                     if (
                         toPath.indexOf('/docs/') === -1 &&
                         toPath.indexOf('index.html') === -1

website/src/components/VideoContent.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import Admonition from '@theme/Admonition';
+
+const icons = {
+    tip: (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="16"
+            viewBox="0 0 12 16"
+            ariaHidden="true"
+        >
+            <path
+                fillRule="evenodd"
+                d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+            />
+        </svg>
+    ),
+};
+
+const Component = ({ title = 'video content', videoUrls, children }) => {
+    return (
+        <article className="unleash-video-container">
+            <Admonition icon={icons.tip} title={title} type="note">
+                {children}
+            </Admonition>
+
+            <div className="videos">
+                {videoUrls ? (
+                    videoUrls.map((url) => (
+                        <iframe
+                            key={url}
+                            width="100%"
+                            height="auto"
+                            src={url}
+                            title="YouTube video player"
+                            frameBorder="0"
+                            allowFullScreen
+                        ></iframe>
+                    ))
+                ) : (
+                    <Admonition type="danger">
+                        You need to provide YouTube video URLs for this
+                        component to work properly.
+                    </Admonition>
+                )}
+            </div>
+        </article>
+    );
+};
+
+export default Component;

website/src/css/custom.css

@@ -7,7 +7,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-    --color-unleash-purple: #635dc5;
+    --unleash-color-purple: #635dc5;
+    --unleash-color-gray: #ecebeb;
+
+    --unleash-color-admonition-background: var(--unleash-color-gray);
+    --unleash-color-admonition-border: #999;
+    --unleash-color-admonition-text: #2b2b2b;
+
     --ifm-color-primary: #39535b;
     --ifm-color-primary-dark: #334b52;
     --ifm-color-primary-darker: #30474d;
@@ -17,10 +23,13 @@
     --ifm-color-primary-lightest: #4a6c76;
     --ifm-code-font-size: 90%;
     --ifm-font-size-base: 15px;
-    --ifm-link-color: var(--color-unleash-purple);
+    --ifm-link-color: var(--unleash-color-purple);
+    --ifm-menu-color-background-active: var(--unleash-color-gray);
+    --ifm-menu-color-background-hover: var(--unleash-color-gray);
     --navbar-link-color: #122d33;
 }
 
+
 footer {
     --ifm-footer-link-hover-color: var(--ifm-footer-link-color);
 }
@@ -33,7 +42,7 @@ li.theme-doc-sidebar-item-category-level-1 > div::before {
     width: 0.3em;
     height: 100%;
     content: ' ';
-    background-color: var(--color-unleash-purple);
+    background-color: var(--unleash-color-purple);
     border-radius: 2px;
     position: absolute;
 }
@@ -62,3 +71,44 @@ html[data-theme='dark'] .header-github-link:before {
     background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
         no-repeat;
 }
+
+/* Video content container */
+
+.unleash-video-container {
+    display: grid;
+    --gap: 0.5em;
+    --border-radius: var(--ifm-alert-border-radius);
+    gap: var(--gap);
+    margin-bottom: 1em;
+}
+
+.unleash-video-container > .videos {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: var(--gap);
+}
+
+.unleash-video-container > .admonition {
+    box-shadow: none;
+    background-color: var(--unleash-color-admonition-background);
+    color: var(--unleash-color-admonition-text);
+    border-color: var(--unleash-color-admonition-border);
+    margin: 0;
+}
+
+.unleash-video-container iframe {
+    aspect-ratio: 16/9;
+}
+
+@media screen and (min-width: 450px) {
+    .unleash-video-container {
+        grid-template-columns: 1fr min(250px, 25%);
+    }
+    .unleash-video-container > .videos {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap);
+    }
+}
+
+/* end video content container */