mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-31 01:16:01 +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.
|
||||
@ -56,7 +52,7 @@ Once a change is added to a draft, the draft needs to be completed before anothe
|
||||
* **Approved** - The change request has been approved by the required number of users.
|
||||
* **Applied** - The change request has been applied to the environment. The feature toggle configuration is updated.
|
||||
* **Cancelled** - The change request has been cancelled by the change request author or by an admin.
|
||||
* **Rejected** - The change request has been rejected by the reviewer or by an admin.
|
||||
* **Rejected** - The change request has been rejected by the reviewer or by an admin.
|
||||
|
||||
|
||||
|
||||
@ -101,4 +97,4 @@ Changes to project [segments](segments.mdx) (as opposed to global segments) also
|
||||
Since projects segments are not environment specific and change requests are always environment specific we allow to attach segment change to any environment with change requests enabled.
|
||||
When you make changes though the Change Request UI it will automatically select first environment with change requests enabled, giving priority to [production](environments.md#environment-types) environments.
|
||||
|
||||
Changes to segments can be only circumvented by admin users through the API calls.
|
||||
Changes to segments can be only circumvented by admin users through the API calls.
|
||||
|
||||
@ -8,14 +8,10 @@ In order to connect your application to Unleash you will need a client SDK (soft
|
||||
|
||||
Unleash provides official client SDKs for a number of programming language. Additionally, our community have developed and contributed SDKs for other languages. So if you can't find your favorite language in the list of official SDKs, check out the [list of clients written by our fantastic community](#community-sdks).
|
||||
|
||||
## Official SDKs
|
||||
## 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:
|
||||
|
||||
|
||||
@ -6,16 +6,12 @@ import VideoContent from '@site/src/components/VideoContent.jsx'
|
||||
|
||||
:::info Availability
|
||||
|
||||
Segments are available to Unleash Pro and Unleash Enterprise users since **Unleash 4.13** and
|
||||
Segments are available to Unleash Pro and Unleash Enterprise users since **Unleash 4.13** and
|
||||
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).
|
||||
|
||||
|
||||
@ -6,24 +6,20 @@ import VideoContent from '@site/src/components/VideoContent.jsx'
|
||||
|
||||
:::info Availability
|
||||
|
||||
**Strategy variants** were first introduced in Unleash 5.4.
|
||||
**Strategy variants** were first introduced in Unleash 5.4.
|
||||
:::
|
||||
|
||||
|
||||
<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.
|
||||
also attach any custom data or even multiple data items.
|
||||
|
||||
## What are strategy variants?
|
||||
|
||||
Whenever you create a feature activation strategy, you can assign it one or more values called _variants_.
|
||||
This is commonly done in cases where you want to serve your users additional information related to the matching strategy.
|
||||
Also it's possible to assign multiple variants to one strategy to see which performs better.
|
||||
Also it's possible to assign multiple variants to one strategy to see which performs better.
|
||||
|
||||
A variant has four components that define it:
|
||||
- a **name**:
|
||||
@ -82,7 +78,7 @@ Strategy stickiness is calculated on the received user and context, as described
|
||||
### Strategy variants vs feature toggle variants
|
||||
|
||||
Strategy variants take precedence over the [feature toggle variants](./feature-toggle-variants.md). If your matching activation strategy doesn't have any variants configured you will fall back to the [feature toggle variants](./feature-toggle-variants.md).
|
||||
Since strategy variants are part of activation strategies they have full access to constraints and segments. Feature variants are much more limited since they only allow simple overrides.
|
||||
Since strategy variants are part of activation strategies they have full access to constraints and segments. Feature variants are much more limited since they only allow simple overrides.
|
||||
|
||||
## How do I configure strategy variants
|
||||
|
||||
@ -108,11 +104,11 @@ Note: The actual representation of the built-in fallback variant in the client S
|
||||
## Strategy variants and strategies order
|
||||
|
||||
When you add multiple activation strategies, each having its own variants defined, the order of strategies matters. Unleash chooses the first matching strategy.
|
||||
It is common to define your specific activation strategies with explicit constraints and segments first. The specific strategies can be followed by a
|
||||
broad activation strategy with multiple percentage based variants.
|
||||
It is common to define your specific activation strategies with explicit constraints and segments first. The specific strategies can be followed by a
|
||||
broad activation strategy with multiple percentage based variants.
|
||||
|
||||
In the example below we configure fixed title for the internal users based on the `clientId` constraint. In the second strategy we split titles between all other users
|
||||
based on the 50%/50% split.
|
||||
based on the 50%/50% split.
|
||||
|
||||
|
||||
## Client SDK Support {#client-sdk-support}
|
||||
@ -126,7 +122,7 @@ To make use of strategy variants, you need to use a compatible client. Client SD
|
||||
- [unleash-client-ruby](https://github.com/Unleash/unleash-client-ruby) (from v4.5.0)
|
||||
- [unleash-client-dotnet](https://github.com/Unleash/unleash-client-dotnet) (from v3.3.0)
|
||||
- [unleash-client-php](https://github.com/Unleash/unleash-client-php) (from v1.13.0)
|
||||
- Client SDKs talking to [unleash-proxy](https://github.com/Unleash/unleash-proxy) (from v0.17.0)
|
||||
- Client SDKs talking to [unleash-proxy](https://github.com/Unleash/unleash-proxy) (from v0.17.0)
|
||||
- Client SDKs talking to Frontend API in [unleash-server](https://github.com/Unleash/unleash) (from v5.4.0)
|
||||
- Unleash Playground in [unleash-server](https://github.com/Unleash/unleash) (from v5.4.0)
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -41,9 +37,9 @@ Hosting Edge requires a little more setup the Unleash-hosted frontend API does,
|
||||
- A key benefit of Edge is its ability to dynamically update new tokens while running. This greatly simplifies scaling up additional application workloads that leverage new tokens without the need to restart the instance or make large changes to infra, as was the prior requirement with the proxy.
|
||||
- You can arrange for Edge to be close to your applications, minimizing response times.
|
||||
- You have full control of all your user data. None of the data that Edge receives is ever sent to the Unleash API. This keeps _your_ data in _your_ hands.
|
||||
- You can easily add more Edge instances in different regions, as described in the [multi-region](#multi-region) section.
|
||||
- You can easily add more Edge instances in different regions, as described in the [multi-region](#multi-region) section.
|
||||
|
||||
|
||||
|
||||
|
||||
## Unleash hosts everything
|
||||
|
||||
@ -51,9 +47,9 @@ Hosting Edge requires a little more setup the Unleash-hosted frontend API does,
|
||||
|
||||
This setup is only available to Pro and Enterprise customers.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Unleash no longer hosts instances of the proxy, but makes the [Frontend API](../reference/front-end-api) available to all Pro and Enterprise customers. The API is backed by an Amazon RDS database. Your applications can connect to the frontend API from your own cloud or from other hosting solutions.
|
||||
|
||||
In order to access the frontend API you'll need
|
||||
@ -62,9 +58,9 @@ In order to access the frontend API you'll need
|
||||
|
||||
This is the simplest, but also most limited (by far) way to use Unleash client SDKs. In this setup, Unleash hosts both the Unleash API and the Unleash frontend API. With Unleash hosting, you'll only need to worry about the Frontend API keys and the URL to access the endpoint.
|
||||
|
||||
While this is easy to get started with, it comes with the limitations described in the [section on tradeoffs between self-hosted and Unleash-hosted setups](#unleash-hosted-or-self-hosted).
|
||||
While this is easy to get started with, it comes with the limitations described in the [section on tradeoffs between self-hosted and Unleash-hosted setups](#unleash-hosted-or-self-hosted).
|
||||
|
||||
|
||||
|
||||
|
||||
## Unleash hosts the API, you host Edge
|
||||
|
||||
@ -80,7 +76,7 @@ This setup is only available to Pro and Enterprise customers.
|
||||
|
||||
You host Edge yourself. It runs in a standalone container alongside your other applications in your cloud or hosting setup. Unleash manages the Unleash API, the admin UI, and the backing database in our AWS setup: the API and the UI run together in a Kubernetes deployment and connect to an Amazon RDS database.
|
||||
|
||||
You'll need to configure Edge and the SDKs.
|
||||
You'll need to configure Edge and the SDKs.
|
||||
|
||||
### On Unleash
|
||||
|
||||
@ -91,9 +87,9 @@ You'll need to configure Edge and the SDKs.
|
||||
|
||||
Edge will fetch feature toggles from the specified upstream Unleash instance for every client API key it has been made aware of, either during startup (recommended) or separate endpoint requests. It will then periodically sync features with upstream.
|
||||
|
||||
It will then accept frontend / backend tokens from application SDKs.
|
||||
It will then accept frontend / backend tokens from application SDKs.
|
||||
|
||||
:::info Warning
|
||||
:::info Warning
|
||||
|
||||
Make sure to use the correct token type for the use case:
|
||||
Frontend API: Frontend facing apps only, Edge returns app specific context
|
||||
@ -113,8 +109,8 @@ The following can be used to pass new tokens to Edge for different project/envir
|
||||
|
||||
- Point frontend/client SDKs to Edge endpoints
|
||||
- **Backend SDKs:** /api/client
|
||||
- **Frontend SDKs:** /api/frontend, /api/proxy
|
||||
|
||||
- **Frontend SDKs:** /api/frontend, /api/proxy
|
||||
|
||||
|
||||
## You host everything
|
||||
|
||||
@ -132,8 +128,8 @@ You host everything yourself. Everything runs where and how you configure it to.
|
||||
|
||||
As you might expect, doing everything yourself _is_ going to give you the most flexibility, but it's also going to be the most work. If you're already hosting Unleash yourself, though, this shouldn't be any more difficult than the previous section.
|
||||
|
||||
As described in the [section on tradeoffs between self-hosted and Unleash-hosted setups](#unleash-hosted-or-self-hosted), running Edge yourself gives you a number of benefits.
|
||||
|
||||
As described in the [section on tradeoffs between self-hosted and Unleash-hosted setups](#unleash-hosted-or-self-hosted), running Edge yourself gives you a number of benefits.
|
||||
|
||||
|
||||
## Multi-region
|
||||
|
||||
@ -141,13 +137,13 @@ As described in the [section on tradeoffs between self-hosted and Unleash-hosted
|
||||
|
||||
You can also use Edge for a multi-region setup. You can run Edge in a different region to the API and still connect to the API. Because Edge runs closer to your applications it still provides you benefits in terms of quicker response times. Everything should be configured as described in the [you host everything section](#you-host-everything) or the [Unleash hosts the API, you host Edge section](#unleash-hosts-the-api-you-host-edge). You can add as many Edge instances in as many extra regions as you want.
|
||||
|
||||
|
||||
|
||||
|
||||
## Legacy: Unleash hosts the API, you host the Proxy
|
||||
|
||||
:::info Recommendation
|
||||
|
||||
This approach is no longer recommended. You should use [Unleash Edge](../reference/unleash-edge) instead of the Unleash proxy.
|
||||
This approach is no longer recommended. You should use [Unleash Edge](../reference/unleash-edge) instead of the Unleash proxy.
|
||||
If you are an existing Proxy user, see our [Edge migration guide](https://github.com/Unleash/unleash-edge/blob/main/migration-guide.md) for a guide on how to migrate.
|
||||
Please take note of the section covering features Edge does not currently support in the same linked document before planning a migration.
|
||||
:::
|
||||
@ -175,4 +171,4 @@ For the proxy client SDK, configure:
|
||||
- One of the proxy client keys that you configured for the proxy.
|
||||
- The proxy's endpoint. This will depend on where and how you're hosting the proxy, but will typically end in "/proxy"
|
||||
|
||||
This setup requires a little more setup on your part than the Unleash-hosted proxy does, but it offers all the benefits described in the [section on tradeoffs between self-hosted and Unleash-hosted setups](#unleash-hosted-or-self-hosted).
|
||||
This setup requires a little more setup on your part than the Unleash-hosted proxy does, but it offers all the benefits described in the [section on tradeoffs between self-hosted and Unleash-hosted setups](#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">
|
||||
{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 className='unleash-video-container'>
|
||||
{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>
|
||||
)}
|
||||
</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