mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
Merge pull request #1308 from Unleash/docs/add-video-component
Docs: Add a new video component
This commit is contained in:
Thomas Heartman
GitHub
commit
b26869fec7
@ -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. You can either follow the steps in writing below or watch [the accompanying video](#video-create).
|
||||
|
||||
To create custom project roles:
|
||||
It takes about three steps 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.
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
### 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:
|
||||
|
||||
- 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.
|
||||
|
||||
|
||||
### 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>
|
||||
|
||||
@ -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:
|
||||
'https://stackoverflow.com/questions/tagged/unleash',
|
||||
href: 'https://stackoverflow.com/questions/tagged/unleash',
|
||||
},
|
||||
{
|
||||
label: 'Slack',
|
||||
href:
|
||||
'https://join.slack.com/t/unleash-community/shared_invite/zt-8b6l1uut-LL67kLpIXm9bcN3~6RVaRQ',
|
||||
href: '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
|
||||
|
||||
52
website/src/components/VideoContent.jsx
Normal file
52
website/src/components/VideoContent.jsx
Normal file
@ -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;
|
||||
@ -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 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user