diff --git a/website/docs/how-to/how-to-add-sso-azure-saml.mdx b/website/docs/how-to/how-to-add-sso-azure-saml.mdx
index 60d6c36487..7d88d6502a 100644
--- a/website/docs/how-to/how-to-add-sso-azure-saml.mdx
+++ b/website/docs/how-to/how-to-add-sso-azure-saml.mdx
@@ -3,8 +3,6 @@ title: How to add SSO with SAML 2.0 and Microsoft Entra ID
description: 'Configure Microsoft Entra ID SSO with SAML 2.0 for your Unleash instance.'
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
:::note Availability
**Plan**: [Enterprise](https://www.getunleash.io/pricing)
@@ -49,8 +47,7 @@ To configure attributes and claims for the new application, do the following:
To populate the first and last names of users in Unleash, configure two additional claims with attributes `user.givenname` and `user.surname` with no namespace.
-
-
+
### Save SAML certificate, identifier, and login URL
@@ -62,7 +59,7 @@ Save the following information from the single sign-on settings of your applicat
#### SAML certificate
To save the SAML certificate, go to the single sign-on settings of your application. In **SAML Certificates > Federation Metadata XML**, click **Download**. Open the file and copy the contents between the `X509Certificate` tag.
-
+
#### Login URL
To find your login URL, go to the single sign-on settings of your application. In the **Set up ``** section, copy and save **Login URL**. For example: `https://login.microsoftonline.com//saml2`.
@@ -83,7 +80,7 @@ To finalize the configuration, do the following:
5. Optional: To automatically create users for first-time sign-ins, select **Auto-create users**. Select a default root role new users should have, and configure the list of valid email domains.
6. Click **Save**.
-
+
## Test your configuration
diff --git a/website/docs/how-to/how-to-environment-import-export.mdx b/website/docs/how-to/how-to-environment-import-export.mdx
index 6300720d7a..fa27850774 100644
--- a/website/docs/how-to/how-to-environment-import-export.mdx
+++ b/website/docs/how-to/how-to-environment-import-export.mdx
@@ -4,7 +4,6 @@ title: Environment Import & Export
import VideoContent from '@site/src/components/VideoContent.jsx'
-import Figure from '@site/src/components/Figure/Figure.tsx'
:::note Availability
@@ -47,7 +46,7 @@ Importantly, while references to [segments](/reference/segments) are exported, t
You can export features either from a project search or the global feature search. Use the search functionality to narrow the results to the list of features you want to export and use the export button to select environment. All features included in your search results will be included in the export.
-
+
## Import
diff --git a/website/docs/reference/applications.mdx b/website/docs/reference/applications.mdx
index 97dea949c8..0e4a88dfea 100644
--- a/website/docs/reference/applications.mdx
+++ b/website/docs/reference/applications.mdx
@@ -3,8 +3,6 @@ title: Applications
pagination_next: reference/service-accounts
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
:::note Availability
**Version**: `5.11+`
@@ -28,16 +26,16 @@ For detected issues, there are three different possible issues:
The application is also illustrated as a diagram, showing the application node, where the environment count and feature flag count are displayed. Under the application, it is possible to see which environments the application is using. Under each environment, data about the application is shown, including how many instances are connected, which SDKs the application is using, and when the application was last seen in that environment.
-
+
## Connected instances
Connected instances display a list of instances that the application has in a selected environment. It shows the instance name, SDK version, last seen, and the IP address from which the instance connected.
-
+
## Project applications
In the project view, there is a tab named "Applications." In this view, it is possible to see all the applications that are consuming the project's features. The applications are displayed in a list, showing the application name, environments the application is consuming in the current project, instances, and SDKs.
-
+
diff --git a/website/docs/reference/insights.mdx b/website/docs/reference/insights.mdx
index ad5d989512..ce9d38c060 100644
--- a/website/docs/reference/insights.mdx
+++ b/website/docs/reference/insights.mdx
@@ -2,8 +2,6 @@
title: Insights
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
:::note Availability
**Plan**: [Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) | **Version**: `6.0+`
@@ -27,34 +25,34 @@ In total, there are 6 different charts available that show information over time
The Total users chart provides information about the total number of current users in your Unleash instance. This chart helps you understand how the user base is growing or changing over time. Additionally, it shows the number of users in selected projects and how the user distribution varies among them.
-
+
### Flags
The flags chart displays the total number of active (not archived) feature flags across all projects. It provides insights into how the number of flags has changed over time, helping you track the growth and usage of feature flags. You can also view the data for specific projects.
-
+
### Health
The health chart represents the percentage of flags in the selected projects that are not stale or potentially stale. This chart helps you monitor the overall health of your feature flags, ensuring that they are actively maintained and relevant. The chart also shows how the overall health changes over time, allowing you to identify potential issues early and take corrective actions.
-
+
### Median time to production
The median time to production chart measures the average time from when a feature flag is created until it is enabled in a "production" type environment. This metric is calculated only for feature flags of the type "release" and is the median across the selected projects. Understanding this metric helps in assessing the efficiency of your development and deployment processes. It also highlights areas where you can improve to reduce time to market for new features.
-
+
### Flag evaluation metrics
The flag evaluation metrics chart provides a summary of all flag evaluations reported by SDKs across all projects. This chart helps you understand how often feature flags are being evaluated and used within your applications. It can indicate the performance impact and the effectiveness of your feature flag implementations. By analyzing these metrics per project, you can gain deeper insights into the usage patterns and optimize accordingly.
-
+
### Updates per environment type
The updates per environment type chart summarizes all feature configuration updates per environment type. This chart is crucial for understanding how configuration changes propagate across different environments, such as development, testing, and production. It helps in tracking the frequency and impact of updates, ensuring that changes are consistently and safely deployed. Monitoring updates per environment type can also help identify potential bottlenecks or issues in the deployment pipeline.
-
+
diff --git a/website/docs/reference/integrations/jira-cloud-plugin-installation.mdx b/website/docs/reference/integrations/jira-cloud-plugin-installation.mdx
index 14b8b8d70e..faca997cb9 100644
--- a/website/docs/reference/integrations/jira-cloud-plugin-installation.mdx
+++ b/website/docs/reference/integrations/jira-cloud-plugin-installation.mdx
@@ -1,7 +1,6 @@
---
title: Jira Cloud Integration - Installation
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
:::note Availability
diff --git a/website/docs/reference/integrations/jira-cloud-plugin-usage.mdx b/website/docs/reference/integrations/jira-cloud-plugin-usage.mdx
index 50e5e399fa..f44ec1bd17 100644
--- a/website/docs/reference/integrations/jira-cloud-plugin-usage.mdx
+++ b/website/docs/reference/integrations/jira-cloud-plugin-usage.mdx
@@ -2,8 +2,6 @@
title: Jira Cloud Integration - Usage
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
With the Unleash Jira Cloud Plugin you can create, view and manage Unleash feature flags directly from a Jira issue.
The plugin also shows you current status of connected flags.
@@ -12,11 +10,11 @@ The plugin also shows you current status of connected flags.
To use the plugin, you'll need to create an issue or use an existing one. Once the issue is saved and you open up the issue panel, you'll be greeted with a button to activate the Unleash plugin for that issue.
-
+
### Connecting a flag to an issue
-
+
Use the issue's "connect toggle" button to open a dialog.
@@ -30,9 +28,9 @@ There are a few steps to connect a flag:
2. Use the "create new toggle" option to choose whether you want to add an existing flag or create a new one.
-
+
-
+
### Flag status as part of Issue view
@@ -40,7 +38,7 @@ Once you've connected at least one flag to an issue, the Unleash plugin will lis
that flag. If the current user is allowed to edit the issue, they can also enable or disable environments directly
from Jira.
-
+
### Change Requests
@@ -51,7 +49,7 @@ If you already have an active change request for that project and that environme
If you confirm that you would like to open a change request, then the plugin will create one for you and present a confirmation dialog.
-
+
When the Change Request has been reviewed and applied in Unleash, the flag will show the requested state after the next refresh
of the issue and flag status page.
diff --git a/website/docs/reference/integrations/slack-app.mdx b/website/docs/reference/integrations/slack-app.mdx
index 0df3c09bcb..d3ae29a6df 100644
--- a/website/docs/reference/integrations/slack-app.mdx
+++ b/website/docs/reference/integrations/slack-app.mdx
@@ -2,8 +2,6 @@
title: Slack App
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
:::note Availability
**Version**: `5.5+`
@@ -97,4 +95,4 @@ Besides the configured channels, you can choose to notify other channels by tagg
To exclusively use tags for determining notification channels, you can leave the "channels" field blank in the integration configuration. Since you can have multiple configurations for the integration, you're free to mix and match settings to meet your precise needs. Before posting a message, all channels for that event, both configured and tagged, are combined and duplicates are removed.
-
+
diff --git a/website/docs/reference/network-view.mdx b/website/docs/reference/network-view.mdx
index 13f34553cb..101684f2ce 100644
--- a/website/docs/reference/network-view.mdx
+++ b/website/docs/reference/network-view.mdx
@@ -2,8 +2,6 @@
title: Network View
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
:::note Availability
**Plan**: [Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) | **Version**: `4.21+`
@@ -38,7 +36,7 @@ Each application shown on the diagram has:
- An application name
- the average number of requests per second (_req/s_) that we have registered over the last five minutes.
-
+
## Network traffic
@@ -50,7 +48,7 @@ Unleash aggregates requests by **client** (using application name) and **base UR
2. Within each of these groups, group all requests by their next URL path segment. For instance: `/client/features` and `/client/features/feature-a` are grouped together, while `/client/register` and `/admin/features` are separate groups.
-
+
## Data source
diff --git a/website/docs/reference/playground.mdx b/website/docs/reference/playground.mdx
index db5f155508..0953afdea2 100644
--- a/website/docs/reference/playground.mdx
+++ b/website/docs/reference/playground.mdx
@@ -1,7 +1,6 @@
---
title: Playground
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
import VideoContent from '@site/src/components/VideoContent.jsx'
:::note Availability
@@ -66,11 +65,11 @@ The playground's response contains a list of all the feature flags that have bee
In the UI, the playground displays the features in a table. Each row of the table corresponds to a single feature. The table has a separate column for each of the environments that you selected for your query.
-
+
Because you can add multiple values for each context field, each feature-environment cell contains the number of combinations that evaluated to `true` and `false` for the feature in the given environment. This can be expanded into a more detailed overview over what combinations of context fields evaluated to `true` and `false` along with any [variants](../reference/feature-toggle-variants).
-
+
As with all of Unleash's client SDKs, the playground respects [stickiness](../reference/stickiness). The [stickiness algorithm](../reference/stickiness#calculation) guarantees that you'll always get the same variants and the same gradual rollout results if you provide the same context, as long as you provide the context field used for calculating stickiness.
@@ -78,7 +77,7 @@ As with all of Unleash's client SDKs, the playground respects [stickiness](../re
You can compare how a feature evaluates in different environments. If you select more than one environment for your playground query, the table will have an additional "Diff" column in each row. Using the "preview diff" button, you can open a table that gives an overview over how the feature evaluated for each context combination in each environment.
-
+
### Detailed evaluation results
diff --git a/website/docs/reference/projects.mdx b/website/docs/reference/projects.mdx
index 4be0f719b1..b8fde132c9 100644
--- a/website/docs/reference/projects.mdx
+++ b/website/docs/reference/projects.mdx
@@ -94,8 +94,6 @@ To move a feature flag between projects:
## Project default strategy
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
:::note Availability
**Version**: `5.2+`.
@@ -113,7 +111,7 @@ To change the default strategy for an environment in a project:
3. Configure the strategy values, such as the rollout percentage, stickiness, segments, constraints, and variants.
4. Click **Save strategy**.
-
+
## View project insights
diff --git a/website/docs/reference/resource-limits.mdx b/website/docs/reference/resource-limits.mdx
index 8aaffbc99e..1f1d088ee8 100644
--- a/website/docs/reference/resource-limits.mdx
+++ b/website/docs/reference/resource-limits.mdx
@@ -1,7 +1,6 @@
---
title: Resource Limits
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
:::note Availability
@@ -9,7 +8,7 @@ import Figure from '@site/src/components/Figure/Figure.tsx'
:::
-
+
To ensure that Unleash operates smoothly, it includes resource limits for some of the key resources that you can create. The limit for each resource can vary between the different Unleash plans.
diff --git a/website/docs/topics/concepts/what-is-a-feature-flag.mdx b/website/docs/topics/concepts/what-is-a-feature-flag.mdx
index 6434659be4..2f02f55730 100644
--- a/website/docs/topics/concepts/what-is-a-feature-flag.mdx
+++ b/website/docs/topics/concepts/what-is-a-feature-flag.mdx
@@ -4,8 +4,6 @@ slug: /what-is-a-feature-flag
description: Feature flags let you control software features in real time, enabling safer deployments, better testing, and faster innovation.
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
Feature flags allow you to release, test, and manage features and functionality across your application without changing the source code. Organizations use added control and flexibility to deliver more and higher quality features with reduced cost, time, and risk.
In this guide, we’ll introduce you to the basics of feature flags and why so many development teams choose them.
@@ -87,7 +85,7 @@ However, feature flags can still provide significant benefits even if your organ
Feature flags enable development teams to manage features in a dynamic, flexible, and controlled manner. Like any tool, you need to use them the right way—you don’t want to build a spaceship out of bricks.
-
+
Feature flags are integrated into the software development lifecycle, allowing developers to introduce code conditionality. This conditionality determines whether specific code blocks execute, enabling or disabling features without requiring code deployments.
@@ -104,7 +102,7 @@ Let’s take a look at the different types of feature flags, including their pur
- [Operational flags](#operational-flags)
- [Permission flags](#permission-flags)
-
+
### Release flags
diff --git a/website/docs/topics/feature-flags/best-practices-using-feature-flags-at-scale.mdx b/website/docs/topics/feature-flags/best-practices-using-feature-flags-at-scale.mdx
index 1805caf585..3d1ad42dc5 100644
--- a/website/docs/topics/feature-flags/best-practices-using-feature-flags-at-scale.mdx
+++ b/website/docs/topics/feature-flags/best-practices-using-feature-flags-at-scale.mdx
@@ -3,8 +3,6 @@ title: 'Feature flag management: Best practices for using feature flags at scale
description: 'A feature flag is just an if statement, you say. When your organization has thousands of developers, those if statements can quickly become complex.'
---
-import Figure from '@site/src/components/Figure/Figure.tsx'
-
“A feature flag is just an if statement,” you say. This is true in a way, but when your organization has thousands of developers, each managing dozens or hundreds of flags with complex targeting rules and audit trails across dozens of microservices-based applications, those if statements can quickly become complex. This is especially true if you don’t set up your system correctly in the first place.
This guide to using feature flag systems at scale is based on lessons learned working with some of the largest feature flag deployments in the world through the [Unleash Open-Source](https://github.com/Unleash/unleash) and [Enterprise Feature Management platform](https://www.getunleash.io/enterprise-feature-management-platform). However, the principles outlined do not apply only to Unleash. They apply to any large-scale feature flag system, including one you build yourself or another commercial solution. For tips on how to stand up and run a feature flag system, see our [principles for building and scaling feature flags](./feature-flag-best-practices).
@@ -45,7 +43,7 @@ Before you add your first feature flag, you need to think about how organization
– Melvin Conway
-
+
There is no getting around [Conway’s law](https://martinfowler.com/bliki/ConwaysLaw.html). Applications tend to resemble the organizations that create them, and your feature flag system is no exception. Rather than fighting this law, acknowledge and embrace it, and pick a way to organize your feature flags that reflects your organization.
@@ -131,7 +129,7 @@ Users who are added or removed from your main SSO directory should be added or r
### 6. Implement flag approval workflows early.
-
+
Depending on the industry and legal framework you’re operating in, you’ll need varying approvals for a feature flag change to go into production. You may be able to just roll something out on a whim, or you might need to get it approved by specific stakeholders before releasing it. Your feature flag tool should help you do this, regardless of how much oversight you need.
@@ -157,7 +155,7 @@ Flags live in code, and hundreds of small choices go into instrumenting flags in
### 7. Define flags in your code at the highest level of abstraction.
-
+
Defining your flag at the highest level in your code is important for both user-facing and backend changes.
@@ -188,7 +186,7 @@ Here are a few examples of functionality managed by feature flags and where you
### 8. Evaluate a feature flag only once.
-
+
When building new (often complex) features for users, systems require changes across multiple parts – modules within an application or services in a microservices architecture. While it's tempting to use a single feature flag to control all these changes and evaluate it locally in each module, we recommend against it for a few reasons:
diff --git a/website/docs/understanding-unleash/the-anatomy-of-unleash.mdx b/website/docs/understanding-unleash/the-anatomy-of-unleash.mdx
index a11ad168db..12fb15b0c8 100644
--- a/website/docs/understanding-unleash/the-anatomy-of-unleash.mdx
+++ b/website/docs/understanding-unleash/the-anatomy-of-unleash.mdx
@@ -2,8 +2,6 @@
title: The Anatomy of Unleash
---
-import Figure from "@site/src/components/Figure/Figure.tsx";
-
This guide's purpose is to give you a conceptual overview of how Unleash works. It covers the various components that exist within our system and how they interact with each other and with external applications. The diagrams help you understand the fundamental building blocks, such as [projects](../reference/projects), [environments](../reference/environments), [variants](../reference/strategy-variants) and of course, [feature flags](../reference/feature-toggles).
The end of this guide presents a [short use case, explaining how you might configure Unleash](#use-case) to start working with feature flags.
@@ -28,18 +26,11 @@ All Unleash instances must have at least one project at any given time. New inst
[Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) customers can create, rename, and delete projects. [Open Source](https://www.getunleash.io/pricing) users have a single project called 'Default'.
-
+
## Environments and project environments
-
+
[**Environments**](../reference/environments) in Unleash let you change how a feature flag works in your application’s different environments. For instance, while you are developing a feature, it’s likely that you’ll want it to be available in your development environment, but not in your production environment: environments let you do that. You might also want to enable a feature for only some users in your development environment, but no users in your production environment: environments let you do that.
@@ -51,10 +42,7 @@ Each project must always have **at least one** active environment.
Environments are adjacent to [feature flags](../reference/feature-toggles) in Unleash: neither one contains the other, but they come together to let you define activation strategies.
-
+
:::info Environments and API keys
@@ -68,19 +56,11 @@ When connecting an SDK to Unleash, it's the **API key that decides which environ
When creating a feature flag, you must assign a unique (across your Unleash instance) name, a [feature flag type](../reference/feature-toggles#feature-flag-types), a [project](../reference/projects) it belongs to, and an optional description. Everything except for the name can be changed later.
-
+
## Activation strategies
-
+
[**Activation strategies**](../reference/activation-strategies) (or just **strategies** for short) are the part of feature flags that tell Unleash **who should get a feature**. An activation strategy is assigned to **one **feature flag in **one **environment.
@@ -93,15 +73,9 @@ Activation strategies tie feature flags and [environments](../reference/environm
Unleash comes with a number of [built-in strategies](../reference/activation-strategies). All strategies can be further augmented by [**strategy constraints**](../reference/activation-strategies#constraints).
-
+
-
+
## Strategy constraints
@@ -130,11 +104,7 @@ You can define constraints on whatever properties you want in your [Unleash cont
Constraints are applied to individual strategies and do not stay in sync with each other. When you need to have the same constraints applied to multiple strategies and need those constraints to stay in sync, use [**segments**](../reference/segments).
-
+
## Segments
@@ -146,10 +116,7 @@ You can apply multiple segments to a strategy. Much like with constraints, **eve
Segments are only available to [Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) users.
-
+
## Variants and feature flag payloads
@@ -167,17 +134,11 @@ A feature flag can have as many variants as you want.
Prior to 4.21, variants were independent of [environments](../reference/environments). In other words: if you're on 4.19 or lower, you’ll always have the exact same variants with the exact same weightings and the exact same payloads in all environments.
-
+
As of version 4.21, a feature can have different variants in different environments. For instance, a development environment might have no variants, while a production environment has 2 variants. Payloads, weightings, and anything else can also differ between environments.
-
+
## Use case: changing website colors {#use-case}
diff --git a/website/docs/unleash-academy/academy.mdx b/website/docs/unleash-academy/academy.mdx
index cbf0151742..e51881afcb 100644
--- a/website/docs/unleash-academy/academy.mdx
+++ b/website/docs/unleash-academy/academy.mdx
@@ -4,7 +4,6 @@ title: Unleash Academy
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-import Figure from '@site/src/components/Figure/Figure.tsx'
import LearningLinks from '@site/src/components/unleash-academy/Links.jsx'
import Banner from '@site/src/components/unleash-academy/Banner.jsx'
@@ -83,9 +82,8 @@ Select the tab that corresponds to your persona. A course list is shown - plan t
:::info
See also the following visualization of the learning paths
:::
-
-
+
---
### Directory by Course
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 274a289888..4fbc0c96ab 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -43,17 +43,22 @@ const addDocsRoutePrefix = ({ from, ...rest }) => {
};
const getUnleashRepoStars = async () => {
- const response = await fetch(
- `https://api.github.com/repos/unleash/unleash`,
- );
- const data = await response.json();
+ try {
+ const response = await fetch(
+ `https://api.github.com/repos/unleash/unleash`,
+ );
+ const data = await response.json();
- const unleashRepoStars = data.stargazers_count;
- const formattedStars =
- unleashRepoStars >= 1000
- ? `${(unleashRepoStars / 1000).toFixed(1)}k`
- : unleashRepoStars?.toString() || '';
- return formattedStars;
+ const unleashRepoStars = data.stargazers_count;
+ const formattedStars =
+ unleashRepoStars >= 1000
+ ? `${(unleashRepoStars / 1000).toFixed(1)}k`
+ : unleashRepoStars?.toString() || '';
+ return formattedStars;
+ } catch (e) {
+ console.error('Error fetching Unleash repo stars', e);
+ return '';
+ }
};
export default async function createConfigAsync(): Promise {
diff --git a/website/src/components/Figure/Figure.tsx b/website/src/components/Figure/Figure.tsx
deleted file mode 100644
index 95624e2e69..0000000000
--- a/website/src/components/Figure/Figure.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- This component displays a figure with an accompanying figure caption. Use it
- to display diagrams, charts, and other images that have an explanatory
- caption that should be visible to everyone.
-
- For some info regarding alt text vs fig captions, see this stack overflow
- response from a blind user (available at
- https://stackoverflow.com/questions/58447538/accessibility-difference-between-img-alt-and-figcaption):
-
- I'm a blind user. I would say that there are two big categories of images on the web:
-
- 1. Functional images
- 2. Illustrative images a.k.a. figures
-
- AS the name says, figcaption is a caption for a figure. The caption is
- always visible by everybody, not only blind people. Figures are images that
- can be found in a book, an article, or whatever more or less long paragraphs
- of text. Most of the time, figures are purely illustrative.
-
- When you use figcaption, the alt attribute should probably be empty:
-
- - Copying the text of the figcaption into the alt attribute, or any
- shortened version, is almost always useless: the screen reader will read
- twice the same or almost the same information, and it's worth absolutely
- nothing
-
- - You may think that the alt attribute could be useful for a longer
- description of the image, that wouldn't fit in the figcaption; for example
- a detailed description of a chart or a diagram. But in fact, this kind of
- description is better below the image or in another page (then available
- for everybody), rather than in the alt attribute. The alt attribute should
- normally remain short.
-
- - You may think that the figcaption is useless and only set the alt
- attribute to something. Example: "Photo with Alice on the left, Bob on the
- right". But in fact sighted people could as well find this information
- useful, if they don't know Alice and Bob for example. So it could be
- interesting to move this description to the figcaption, so that everybody
- benefits from it and not only blind people.
-
- Now, the biggest case when you won't use figure/figcaption is when images
- are functional: a button taht can be clicked, an icon with a precise
- meaning, etc. The basic rules for alt texts of functional images are:
-
- - If you can interact with the image to perform actions (click, etc.), or if
- the icon conveys an information, then you must set a non-empty alt. It
- must be a function description, not a objective description of the image.
-
- Example 1: "Go back" is good, while "Blue left arrow" is bad.
- Example 2: "Unread message" is good, while "Closed enveloppe" is bad
-
- - Otherwise, if the image provide no interaction and if it doesn't convey
- any information, then it is illustrative; the alt should be empty in that
- case.
-
- ------
-
- However, even when using fig captions, there **may** be times when also
- using an alt is appropriate, which is why it's an optional attribute on
- this component. However, if you do use it, make sure it conveys
- **separate** information to what the fig caption does.
-
-
- **/
-
-// biome-ignore lint/style/useImportType:
-import React from 'react';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import styles from './styles.module.css';
-
-type Props = {
- // An optional alt text, if the caption does not already convey all relevant
- // information.
- alt?: string;
- // The figure caption, visible to everyone
- caption: string;
- // the path to the image, starting with `/img/`. Example: /img/image.png
- img: string;
-};
-
-const Component: React.FC = ({ img, alt, caption }) => {
- return (
-
-
- {caption}
-
- );
-};
-
-export default Component;
diff --git a/website/src/components/Figure/styles.module.css b/website/src/components/Figure/styles.module.css
deleted file mode 100644
index 6b0db0a661..0000000000
--- a/website/src/components/Figure/styles.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/* Figures (with captions) */
-.figure {
- box-shadow: var(--ifm-global-shadow-lw);
- border-radius: var(--ifm-global-radius);
- border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
- padding: var(--ifm-pre-padding);
- margin-inline: 0;
-}
-
-.figure img {
- box-shadow: none;
- border: none;
-}
-
-.figure * + * {
- margin-block-start: var(--ifm-pre-padding);
-}
-
-.figure figcaption {
- font-size: var(--unleash-font-size-smaller);
- padding-inline: var(--ifm-pre-padding);
- border-inline-start: 5px solid var(--ifm-color-primary);
-}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e79a5459a3..97d6591f3f 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -270,6 +270,11 @@ main img {
box-shadow: var(--ifm-global-shadow-lw);
}
+.medium-zoom-image--opened {
+ /* ensure images appear on top when zoomed in */
+ z-index: 9999;
+}
+
main
p
> img:not(
diff --git a/website/static/img/unleash-architecture-edge.png b/website/static/img/unleash-architecture-edge.png
index 9620f0335e..ffe0ab2015 100644
Binary files a/website/static/img/unleash-architecture-edge.png and b/website/static/img/unleash-architecture-edge.png differ