diff --git a/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md b/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md
index fe7f6d2f64..8ef2b7e65c 100644
--- a/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md
+++ b/website/docs/how-to/how-to-create-and-assign-custom-project-roles.md
@@ -1,10 +1,15 @@
---
title: How to create and assign custom project roles
---
+import VideoThing from './VideoThing.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).
## Creating custom project roles
@@ -27,7 +32,7 @@ To create custom project roles:
Here's a video recording with accompanying explanations of how to create custom project roles:
-
+
@@ -50,4 +55,4 @@ To assign a custom project role to a user:
Here's a video recording with accompanying explanations of how to assign custom project roles:
-
+
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index c348e1f128..8765d438fd 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -10,6 +10,7 @@ module.exports = {
organizationName: 'Unleash', // Usually your GitHub org/user name.
projectName: 'unleash.github.io', // Usually your repo name.
trailingSlash: false,
+ clientModules: ['./client-modules/container-query-polyfill.js'],
themeConfig: {
defaultMode: 'light',
disableSwitch: true,
@@ -44,7 +45,14 @@ module.exports = {
],
},
prism: {
- additionalLanguages: ['java', 'swift', 'ruby', 'csharp', 'kotlin', 'php'],
+ additionalLanguages: [
+ 'java',
+ 'swift',
+ 'ruby',
+ 'csharp',
+ 'kotlin',
+ 'php',
+ ],
},
footer: {
style: 'dark',
@@ -71,13 +79,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',
@@ -108,8 +114,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 +162,7 @@ module.exports = {
from: '/user_guide/control_rollout',
},
],
- createRedirects: function(toPath) {
+ createRedirects: function (toPath) {
if (
toPath.indexOf('/docs/') === -1 &&
toPath.indexOf('index.html') === -1
diff --git a/website/package.json b/website/package.json
index 72e87cd358..d35bc1d4ed 100644
--- a/website/package.json
+++ b/website/package.json
@@ -21,6 +21,7 @@
"@mdx-js/react": "1.6.22",
"@svgr/webpack": "6.2.0",
"clsx": "1.1.1",
+ "container-query-polyfill": "^0.1.2",
"file-loader": "6.2.0",
"react": "17.0.2",
"react-dom": "17.0.2",
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index c00de0f93b..029c5a3b28 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -62,3 +62,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;
}
+
+.unleash-video-wrapper {
+ /* container: inline-size / video-wrapper; */
+
+ /* resize: both; */
+ overflow: hidden;
+}
+
+/* @container video-wrapper size(max-width: 700px) { */
+/* .unleash-video-container { */
+/* background: red; */
+/* } */
+/* } */
+
+
+.unleash-video-container {
+ display: grid;
+ /* when it is wider than 400px */
+ grid-template-columns: 1fr min(250px, 25%);
+
+ /* otherwise no template-columns. Use a single column. */
+
+ --gap: .5em;
+ --border-radius: var(--ifm-alert-border-radius);
+ gap: var(--gap)
+}
+
+.unleash-video-container p {
+
+ background: var(--ifm-color-success-contrast-background);
+ border-radius: var(--border-radius);
+}
+
+.unleash-video-container > .videos {
+ padding: 1em;
+ border-radius: var(--border-radius);
+ background: var(--ifm-color-info-contrast-background);
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap);
+}