docs: add initial video component idea (+ cq polyfill)

note: polyfill is currently broken for some reason 🤷

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.
 :::
 
+<VideoThing videoUrls={["https://www.youtube.com/embed/2BlckVMHxgE" , "https://www.youtube.com/embed/IqaD8iGxkwk"]}>
+</VideoThing>
+
 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:
 
-<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>
+<!-- <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> -->
 
 
 
@@ -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:
 
-<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>
+<!-- <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

@@ -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:
+                            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',
@@ -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'),

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",

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);
+}