mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-04 01:18:20 +02:00
docs: make videos bigger (#4980)
This PR changes the `VideoContent` component to: - remove the extra text; keeps only videos - makes videos take up the full article width - multiple videos stack vertically (this may or may not be the best way to handle it, but we don't have any instances of using multiple videos as of right now, so we shouldn't touch this until we do). By chance, it also removes a lot of trailing whitespace in files. I suggest checking out the diff with whitespace hidden. Before (single video):  Before (if there were multiple videos):  After (single video):  After (if there are multiple videos): 
This commit is contained in:
Thomas Heartman
GitHub
parent
13c794e3f2
commit
fa4d6b211a
@ -12,9 +12,7 @@ Unleash allows you to gather [**impression data**](../reference/impression-data.
|
||||
|
||||
This guide will take you through everything you need to do in Unleash to facilitate such a workflow. It will show you how to send data to Posthog as an example sink, but the exact same principles will apply to any other service of the same kind.
|
||||
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/bxYdeMb9ffw"]}>
|
||||
This content in this guide is also available in video format.
|
||||
</VideoContent>
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/bxYdeMb9ffw"]}/>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
@ -13,11 +13,7 @@ Custom project roles were introduced in **Unleash 4.6** and are only available i
|
||||
|
||||
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](../reference/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>
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/2BlckVMHxgE" , "https://www.youtube.com/embed/IqaD8iGxkwk"]}/>
|
||||
|
||||
## Creating custom project roles
|
||||
|
||||
|
||||
@ -12,11 +12,7 @@ The change requests for segments was introduced in **Unleash 5.4.0**.
|
||||
:::
|
||||
|
||||
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/ENUqFVcdr-w"]} title="Change requests in 5 minutes">
|
||||
|
||||
This article contains all the details about how change requests work in Unleash; but if you're only looking for a brief explanation and a demo, how about this 5 minute explainer video? 🍿
|
||||
|
||||
</VideoContent>
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/ENUqFVcdr-w"]}/>
|
||||
|
||||
|
||||
Feature flagging is a powerful tool, and because it's so powerful, you sometimes need to practice caution. The ability to have complete control over your production environment comes at the cost of the potential to make mistakes in production. Change requests were introduced in version 4.19.0 to alleviate this fear. Change requests allow you to group changes together and apply them to production at the same time, instead of applying changes directly to production. This allows you to make multiple changes to feature toggles and their configuration and status (on/off) all at once, reducing the risk of errors in production.
|
||||
|
||||
@ -11,11 +11,7 @@ Unleash provides official client SDKs for a number of programming language. Addi
|
||||
## Official SDKs
|
||||
|
||||
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/mCXSAWzdn3I"]}>
|
||||
|
||||
In addition to the written reference below, the following video walks through the various client and server-side SDK offerings, how they are used as well as their differences.
|
||||
|
||||
</VideoContent>
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/mCXSAWzdn3I"]}/>
|
||||
|
||||
### Server-side SDKs:
|
||||
|
||||
|
||||
@ -11,11 +11,7 @@ was made available for Open Source from Unleash v5.5.
|
||||
|
||||
:::
|
||||
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/LWMCCFcRic0"]}>
|
||||
|
||||
Want a quick overview of what segments are and what they're used for? Well, then you're in luck: we've got this short segment explainer video to help you out 📽️
|
||||
|
||||
</VideoContent>
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/LWMCCFcRic0"]}/>
|
||||
|
||||
A **segment** is a reusable collection of [strategy constraints](../reference/strategy-constraints.md). Like with strategy constraints, you apply segments to [feature toggle activation strategies](../reference/activation-strategies.md).
|
||||
|
||||
|
||||
@ -10,11 +10,7 @@ import VideoContent from '@site/src/components/VideoContent.jsx'
|
||||
:::
|
||||
|
||||
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/M0oyGHtva0o"]}>
|
||||
|
||||
In addition to the written reference below, the following video provides for details on Strategy Variants, including setup, migration tips and use cases. 🍿
|
||||
|
||||
</VideoContent>
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/M0oyGHtva0o"]}/>
|
||||
|
||||
Gradual rollout strategies in Unleash can have _strategy variants_. _Strategy variants_ allow each matching activation strategy to return not just simple enabled/disabled status, but
|
||||
also attach any custom data or even multiple data items.
|
||||
|
||||
@ -13,11 +13,7 @@ Whether you're hosting Unleash yourself or have a managed solution will be a key
|
||||
Edge is the next-gen replacement of the Unleash proxy and is recommended to be used over the proxy in most cases, with the exception of the scenario where custom strategies are being used as Edge does not support these.
|
||||
:::
|
||||
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/6uIdF-yByWs"]}>
|
||||
|
||||
In addition to the written reference below, the following video provides for details on the Edge architecture, setup and demo 🍿
|
||||
|
||||
</VideoContent>
|
||||
<VideoContent videoUrls={["https://www.youtube.com/embed/6uIdF-yByWs"]}/>
|
||||
|
||||
## Unleash-hosted Frontend API vs self-hosted Edge/Proxy {#unleash-hosted-or-self-hosted}
|
||||
|
||||
|
||||
@ -1,50 +1,27 @@
|
||||
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 }) => {
|
||||
const Component = ({ videoUrls }) => {
|
||||
return (
|
||||
<article className="unleash-video-container">
|
||||
<Admonition icon={icons.tip} title={title} type="note">
|
||||
{children}
|
||||
</Admonition>
|
||||
|
||||
<div className="videos">
|
||||
<article className='unleash-video-container'>
|
||||
{videoUrls ? (
|
||||
videoUrls.map((url) => (
|
||||
<iframe
|
||||
key={url}
|
||||
width="100%"
|
||||
height="auto"
|
||||
width='100%'
|
||||
height='auto'
|
||||
src={url}
|
||||
title="YouTube video player"
|
||||
frameBorder="0"
|
||||
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 type='danger'>
|
||||
You need to provide YouTube video URLs for this component to
|
||||
work properly.
|
||||
</Admonition>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
@ -160,42 +160,16 @@ html[data-theme='dark'] .header-github-link:before {
|
||||
/* Video content container */
|
||||
|
||||
.unleash-video-container {
|
||||
display: grid;
|
||||
--gap: 0.5em;
|
||||
--border-radius: var(--ifm-alert-border-radius);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
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;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.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 */
|
||||
|
||||
/* docusaurus-plugin-openapi-docs styling
|
||||
|
||||
Loading…
Reference in New Issue
Block a user