From 2259cc4e6872ef311d3663e634ab7400c3be79d4 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 25 Jan 2022 15:19:32 +0100 Subject: [PATCH] docs: add initial video component idea (+ cq polyfill) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit note: polyfill is currently broken for some reason 🤷 --- ...-create-and-assign-custom-project-roles.md | 9 +++- website/docusaurus.config.js | 25 +++++++---- website/package.json | 1 + website/src/css/custom.css | 41 +++++++++++++++++++ 4 files changed, 66 insertions(+), 10 deletions(-) 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 fe7f6d2f641..8ef2b7e65ca 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 c348e1f1284..8765d438fd8 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 72e87cd3581..d35bc1d4edd 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 c00de0f93b7..029c5a3b28b 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); +}