Introduce our newly revamped website homepage (#401)
* chore: prepare for next version Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: finish <Mesh /> Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: use gsap package instead of script Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * style: optimize the rendering of each screen Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update GitHub link Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update descriptions Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * fix: use mask-image Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: update Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * fix: kill all animations Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * fix: some styles Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * Update custom.css Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: finish all home sections Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * Update index.js Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * style: optimize Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * styles: adapt `color-scheme: dark` Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * Update index.js Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * Update index.js Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * Update CodeGrid.jsx Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * Update index.js Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * fix: styles Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * Update index.js Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> * chore: call injectChaos after page load Signed-off-by: Yue Yang <g1enyy0ung@gmail.com> --------- Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>
This commit is contained in:
Yue Yang
GitHub
parent
ad7dc98e8a
commit
a88e2cee11
|
|
@ -21,3 +21,6 @@ yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
|
||||||
|
# vscode
|
||||||
|
.vscode
|
||||||
|
|
|
||||||
|
|
@ -94,4 +94,4 @@ Mostly you only need to modify the content in the `docs/`, but if you want some
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
Same as [Chaos Mesh](https://github.com/chaos-mesh/chaos-mesh).
|
Distributed under [CC-BY-4.0](https://creativecommons.org/licenses/by/4.0/).
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ Here is an example of how we use Chaos Mesh to locate a TiDB system bug. In this
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> Chaos Mesh discovers downtime recovery exceptions in TiKV</div>
|
<div className="caption"> Chaos Mesh discovers downtime recovery exceptions in TiKV</div>
|
||||||
|
|
||||||
As you can see from the dashboard:
|
As you can see from the dashboard:
|
||||||
|
|
||||||
|
|
@ -129,7 +129,7 @@ With the CRD design settled, let's look at the big picture on how Chaos Mesh wor
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> Chaos Mesh workflow </div>
|
<div className="caption"> Chaos Mesh workflow </div>
|
||||||
|
|
||||||
Here is how these components streamline a chaos experiment:
|
Here is how these components streamline a chaos experiment:
|
||||||
|
|
||||||
|
|
@ -218,7 +218,7 @@ The following chaos experiment simulates the TiKV Pods being frequently killed i
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> Chaos experiment running </div>
|
<div className="caption"> Chaos experiment running </div>
|
||||||
|
|
||||||
We use a sysbench program to monitor the real-time QPS changes in the TiDB cluster. When errors are injected into the cluster, the QPS show a drastic jitter, which means a specific TiKV Pod has been deleted, and Kubernetes then re-creates a new TiKV Pod.
|
We use a sysbench program to monitor the real-time QPS changes in the TiDB cluster. When errors are injected into the cluster, the QPS show a drastic jitter, which means a specific TiKV Pod has been deleted, and Kubernetes then re-creates a new TiKV Pod.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ The following clip shows the process of installing Chaos Mesh, deploying web-sho
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> The whole process of the chaos experiment </div>
|
<div className="caption"> The whole process of the chaos experiment </div>
|
||||||
|
|
||||||
Now it's your turn! It's time to get your hands dirty.
|
Now it's your turn! It's time to get your hands dirty.
|
||||||
|
|
||||||
|
|
@ -150,7 +150,7 @@ To start NetworkChaos, do the following:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> Using Chaos Mesh to insert delays in web-show </div>
|
<div className="caption"> Using Chaos Mesh to insert delays in web-show </div>
|
||||||
|
|
||||||
Congratulations! You just stirred up a little bit of chaos. If you are intrigued and want to try out more chaos experiments with Chaos Mesh, check out [examples/web-show](https://github.com/chaos-mesh/chaos-mesh/tree/master/examples/web-show).
|
Congratulations! You just stirred up a little bit of chaos. If you are intrigued and want to try out more chaos experiments with Chaos Mesh, check out [examples/web-show](https://github.com/chaos-mesh/chaos-mesh/tree/master/examples/web-show).
|
||||||
|
|
||||||
|
|
@ -171,7 +171,7 @@ From the line graph, you can see the network latency level is back to normal.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> Network latency level is back to normal </div>
|
<div className="caption"> Network latency level is back to normal </div>
|
||||||
|
|
||||||
### Delete Kubernetes clusters
|
### Delete Kubernetes clusters
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -88,7 +88,7 @@ We can see that the whole vDSO is like a `.so` file, so we can use an executable
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> TimeChaos workflow </div>
|
<div className="caption"> TimeChaos workflow </div>
|
||||||
|
|
||||||
The chart above is the process of **TimeChaos**, an implementation of clock skew in Chaos Mesh.
|
The chart above is the process of **TimeChaos**, an implementation of clock skew in Chaos Mesh.
|
||||||
|
|
||||||
|
|
@ -172,7 +172,7 @@ That's encouraging. But does TimeChaos affect services other than PD? We can che
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="caption-center"> Chaos Dashboard </div>
|
<div className="caption"> Chaos Dashboard </div>
|
||||||
|
|
||||||
It's clear that in the monitor, TimeChaos was injected every 1 millisecond and the whole duration lasted 10 seconds. What's more, TiDB was not affected by that injection. The bank program ran normally, and performance was not affected.
|
It's clear that in the monitor, TimeChaos was injected every 1 millisecond and the whole duration lasted 10 seconds. What's more, TiDB was not affected by that injection. The bank program ran normally, and performance was not affected.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ The current Chaos Mesh architecture is suited for individual Kubernetes clusters
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">The current Chaos Mesh architecture</p>
|
<p className="caption">The current Chaos Mesh architecture</p>
|
||||||
|
|
||||||
During this refactor, **to allow Chaos Dashboard to manage multiple Kubernetes clusters, we separate Chaos Dashboard from the main architecture**. Now, if you deploy Chaos Dashboard outside of the Kubernetes cluster, you can add the cluster to Chaos Dashboard via the web UI. If you deploy Chaos Dashboard inside the cluster, it automatically obtains the cluster information through environment variables.
|
During this refactor, **to allow Chaos Dashboard to manage multiple Kubernetes clusters, we separate Chaos Dashboard from the main architecture**. Now, if you deploy Chaos Dashboard outside of the Kubernetes cluster, you can add the cluster to Chaos Dashboard via the web UI. If you deploy Chaos Dashboard inside the cluster, it automatically obtains the cluster information through environment variables.
|
||||||
|
|
||||||
|
|
@ -60,7 +60,7 @@ chaosd is a toolkit for running chaos experiments on physical machines. Previous
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Previously, chaosd was a command line tool</p>
|
<p className="caption">Previously, chaosd was a command line tool</p>
|
||||||
|
|
||||||
During the refactoring, **we enabled chaosd to support the RESTful API and enhanced its services so that it can configure chaos experiments by parsing CRD-format JSON or YAML files**.
|
During the refactoring, **we enabled chaosd to support the RESTful API and enhanced its services so that it can configure chaos experiments by parsing CRD-format JSON or YAML files**.
|
||||||
|
|
||||||
|
|
@ -72,7 +72,7 @@ With new Chaos Dashboard and chaosd, the optimized architecture of Chaos Mesh is
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Chaos Mesh's optimized architecture</p>
|
<p className="caption">Chaos Mesh's optimized architecture</p>
|
||||||
|
|
||||||
### Improve observability
|
### Improve observability
|
||||||
|
|
||||||
|
|
@ -107,7 +107,7 @@ A closed loop of Chaos Engineering includes four steps: exploring chaos, discove
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">A closed loop of Chaos Engineering</p>
|
<p className="caption">A closed loop of Chaos Engineering</p>
|
||||||
|
|
||||||
However, **most of the current open source Chaos Engineering tools only focus on exploration and do not provide pragmatic feedback.** Based on the improved observability component, we can monitor chaos experiments in real time and compare and analyze the experiment results.
|
However, **most of the current open source Chaos Engineering tools only focus on exploration and do not provide pragmatic feedback.** Based on the improved observability component, we can monitor chaos experiments in real time and compare and analyze the experiment results.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ Big thanks to the more than 200 of you who joined us! We received so many great
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Project Architecture</p>
|
<p className="caption">Project Architecture</p>
|
||||||
|
|
||||||
**Q: Can I use Chaos Mesh on-premises or do I need Amazon Web Services (AWS) or Google Cloud Platform (GCP)?**
|
**Q: Can I use Chaos Mesh on-premises or do I need Amazon Web Services (AWS) or Google Cloud Platform (GCP)?**
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ So far, Chaos Mesh has brought out 35 releases, received 1,500+ commits from 100
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Chaos Mesh contributors (as of 2021.08.02)</p>
|
<p className="caption">Chaos Mesh contributors (as of 2021.08.02)</p>
|
||||||
|
|
||||||
Here are a few of our favourite contributions to highlight:
|
Here are a few of our favourite contributions to highlight:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ As our community grows, Apache APISIX's features more frequently interact with e
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center"> Apache APISIX architecture </p>
|
<p className="caption"> Apache APISIX architecture </p>
|
||||||
|
|
||||||
In this post, we'll share how we use [Chaos Mesh](https://chaos-mesh.org/) to improve our system stability.
|
In this post, we'll share how we use [Chaos Mesh](https://chaos-mesh.org/) to improve our system stability.
|
||||||
|
|
||||||
|
|
@ -58,7 +58,7 @@ We deployed a Chaos Engineering experiment using the following steps:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center"> High network latency occurs between etcd and Apache APISIX </p>
|
<p className="caption"> High network latency occurs between etcd and Apache APISIX </p>
|
||||||
|
|
||||||
### Scenario #2
|
### Scenario #2
|
||||||
|
|
||||||
|
|
@ -72,7 +72,7 @@ After we fixed this problem, we added a health check to the etcd Lua API to ensu
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center"> An error is reported from one etcd node's interaction with the Apache APISIX admin API </p>
|
<p className="caption"> An error is reported from one etcd node's interaction with the Apache APISIX admin API </p>
|
||||||
|
|
||||||
## Our future plans
|
## Our future plans
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ IEG officially launched its chaos engineering project over a year ago. We wanted
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center"> A comparison of chaos engineering tools </p>
|
<p className="caption"> A comparison of chaos engineering tools </p>
|
||||||
|
|
||||||
> Note: This comparison is outdated and is intended simply to compare fault injection features supported by Chaos Mesh with other well-known chaos engineering platforms. It is not intended to favor or position one project over another. Any corrections are welcome.
|
> Note: This comparison is outdated and is intended simply to compare fault injection features supported by Chaos Mesh with other well-known chaos engineering platforms. It is not intended to favor or position one project over another. Any corrections are welcome.
|
||||||
|
|
||||||
|
|
@ -54,7 +54,7 @@ Our chaos engineering team embedded Chaos Mesh into our continuous integration a
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Chaos Mesh embedded in IEG's operation platform</p>
|
<p className="caption">Chaos Mesh embedded in IEG's operation platform</p>
|
||||||
|
|
||||||
In IEG, **chaos engineering is generally summarized as a closed loop with several key phases**:
|
In IEG, **chaos engineering is generally summarized as a closed loop with several key phases**:
|
||||||
|
|
||||||
|
|
@ -80,7 +80,7 @@ In IEG, **chaos engineering is generally summarized as a closed loop with severa
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Five phases of chaos engineering in IEG</p>
|
<p className="caption">Five phases of chaos engineering in IEG</p>
|
||||||
|
|
||||||
We frequently **test the performance of services under high CPU usage**, for example. We begin by orchestrating and scheduling experiments. Following that, we run experiments and monitor the performance of related services. Multiple monitoring metrics, such as QPS, latency, response success, are immediately visible through the operation platform. The platform then generates reports for us to review, so we can check whether these experiments met our expectations.
|
We frequently **test the performance of services under high CPU usage**, for example. We begin by orchestrating and scheduling experiments. Following that, we run experiments and monitor the performance of related services. Multiple monitoring metrics, such as QPS, latency, response success, are immediately visible through the operation platform. The platform then generates reports for us to review, so we can check whether these experiments met our expectations.
|
||||||
|
|
||||||
|
|
@ -98,7 +98,7 @@ Understandably, our team members grew bored of regular chaos experiments. After
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">The red teaming process in IEG</p>
|
<p className="caption">The red teaming process in IEG</p>
|
||||||
|
|
||||||
### Dependency analysis
|
### Dependency analysis
|
||||||
|
|
||||||
|
|
@ -116,6 +116,6 @@ Gone are the days when performing fault injection requires a handwritten script,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Chaos engineering with DevOps ensures efficient fault injection</p>
|
<p className="caption">Chaos engineering with DevOps ensures efficient fault injection</p>
|
||||||
|
|
||||||
Thanks to full-featured chaos engineering tools and streamlined DevOps processes, we estimate that the efficiency of fault injection and chaos-based optimization at IEG has been improved at least by 10 times in the last six months. If you were unsure about implementing chaos engineering in your business, I hope our experience can be of some help.
|
Thanks to full-featured chaos engineering tools and streamlined DevOps processes, we estimate that the efficiency of fault injection and chaos-based optimization at IEG has been improved at least by 10 times in the last six months. If you were unsure about implementing chaos engineering in your business, I hope our experience can be of some help.
|
||||||
|
|
|
||||||
|
|
@ -109,7 +109,7 @@ We will continue to enhance its usability and implement more functionalities suc
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Chaos Mesh's optimized architecture</p>
|
<p className="caption">Chaos Mesh's optimized architecture</p>
|
||||||
|
|
||||||
For more, check out [Chaos Mesh's optimized architecture](https://pingcap.com/blog/chaos-mesh-remake-one-step-closer-toward-chaos-as-a-service#developing-chaos-mesh-towards-caas).
|
For more, check out [Chaos Mesh's optimized architecture](https://pingcap.com/blog/chaos-mesh-remake-one-step-closer-toward-chaos-as-a-service#developing-chaos-mesh-towards-caas).
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -555,7 +555,7 @@ As shown in the Chaos Mesh workflow below, we need to implement a server that se
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Chaos Mesh's basic workflow</p>
|
<p className="caption">Chaos Mesh's basic workflow</p>
|
||||||
|
|
||||||
Let's take a look at the example on the Chaos Mesh website:
|
Let's take a look at the example on the Chaos Mesh website:
|
||||||
|
|
||||||
|
|
@ -744,7 +744,7 @@ This example uses the manager. This mode prevents the cache mechanism from repet
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">List request</p>
|
<p className="caption">List request</p>
|
||||||
|
|
||||||
### Orchestrate chaos
|
### Orchestrate chaos
|
||||||
|
|
||||||
|
|
@ -758,7 +758,7 @@ The following figure shows Chaos Mesh Dashboard. We need to consider what featur
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p className="caption-center">Chaos Mesh Dashboard</p>
|
<p className="caption">Chaos Mesh Dashboard</p>
|
||||||
|
|
||||||
From the Dashboard, we know that the platform may have these features:
|
From the Dashboard, we know that the platform may have these features:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@ For plotting, I used [gnuplot](http://www.gnuplot.info/), a Linux command-line g
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p class="caption-center">QPS line graph</p>
|
<p class="caption">QPS line graph</p>
|
||||||
|
|
||||||
### Generate the report in PDF
|
### Generate the report in PDF
|
||||||
|
|
||||||
|
|
@ -116,13 +116,13 @@ Below is an example of a web application that I developed for daily reporting. T
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p class="caption-center">Web application for daily reporting</p>
|
<p class="caption">Web application for daily reporting</p>
|
||||||
|
|
||||||
Clicking the red card will open the report, as shown below. I used [pdf.js](https://github.com/mozilla/pdf.js) to view the PDF.
|
Clicking the red card will open the report, as shown below. I used [pdf.js](https://github.com/mozilla/pdf.js) to view the PDF.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<p class="caption-center">Daily report in PDF</p>
|
<p class="caption">Daily report in PDF</p>
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
module.exports = function () {
|
||||||
|
return {
|
||||||
|
name: 'docusaurus-tailwind-v3',
|
||||||
|
configurePostCss(options) {
|
||||||
|
options.plugins.push(require('tailwindcss'), require('autoprefixer'))
|
||||||
|
|
||||||
|
return options
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
const vsLightTheme = require('prism-react-renderer/themes/vsLight')
|
||||||
|
const vsDarkTheme = require('prism-react-renderer/themes/vsDark')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
i18n: {
|
i18n: {
|
||||||
defaultLocale: 'en',
|
defaultLocale: 'en',
|
||||||
|
|
@ -20,6 +23,9 @@ module.exports = {
|
||||||
projectName: 'chaos-mesh.github.io', // Usually your repo name.
|
projectName: 'chaos-mesh.github.io', // Usually your repo name.
|
||||||
trailingSlash: true,
|
trailingSlash: true,
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
|
colorMode: {
|
||||||
|
respectPrefersColorScheme: true,
|
||||||
|
},
|
||||||
image: '/img/chaos-mesh-social-preview.png',
|
image: '/img/chaos-mesh-social-preview.png',
|
||||||
algolia: {
|
algolia: {
|
||||||
appId: '3BY0S3HQX6',
|
appId: '3BY0S3HQX6',
|
||||||
|
|
@ -35,6 +41,16 @@ module.exports = {
|
||||||
srcDark: 'img/logos/logo-mini-white.svg',
|
srcDark: 'img/logos/logo-mini-white.svg',
|
||||||
},
|
},
|
||||||
items: [
|
items: [
|
||||||
|
{ to: 'docs', label: 'Documentation' },
|
||||||
|
{
|
||||||
|
to: 'blog',
|
||||||
|
label: 'Blog',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: 'https://community.cncf.io/chaos-mesh-community/',
|
||||||
|
label: 'Community Group',
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: 'docsVersionDropdown',
|
type: 'docsVersionDropdown',
|
||||||
dropdownItemsAfter: [
|
dropdownItemsAfter: [
|
||||||
|
|
@ -45,15 +61,6 @@ module.exports = {
|
||||||
{ to: '/versions', label: 'All Versions' },
|
{ to: '/versions', label: 'All Versions' },
|
||||||
{ to: '/supported-releases', label: 'Supported Releases' },
|
{ to: '/supported-releases', label: 'Supported Releases' },
|
||||||
],
|
],
|
||||||
},
|
|
||||||
{ to: 'docs', label: 'Documentation' },
|
|
||||||
{
|
|
||||||
href: 'https://community.cncf.io/chaos-mesh-community/',
|
|
||||||
label: 'Events',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
to: 'blog',
|
|
||||||
label: 'Blog',
|
|
||||||
position: 'right',
|
position: 'right',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -95,9 +102,17 @@ module.exports = {
|
||||||
title: 'Community',
|
title: 'Community',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Events',
|
label: 'Blog',
|
||||||
|
to: 'blog',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'CNCF Community Group',
|
||||||
href: 'https://community.cncf.io/chaos-mesh-community/',
|
href: 'https://community.cncf.io/chaos-mesh-community/',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: 'GitHub',
|
||||||
|
href: 'https://github.com/chaos-mesh/chaos-mesh',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Slack (#project-chaos-mesh)',
|
label: 'Slack (#project-chaos-mesh)',
|
||||||
href: 'https://slack.cncf.io/',
|
href: 'https://slack.cncf.io/',
|
||||||
|
|
@ -109,37 +124,55 @@ module.exports = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'More',
|
title: 'Acknowledgements',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Blog',
|
html: `
|
||||||
to: 'blog',
|
<ul>
|
||||||
},
|
<li>
|
||||||
{
|
<p style="font-size: 0.875rem;">Thanks to netlify's Open Source Plan.</p>
|
||||||
label: 'GitHub',
|
<a href="https://www.netlify.com" target="_blank"><img src="https://www.netlify.com/v3/img/components/netlify-color-bg.svg" alt="Deploys by Netlify" /></a>
|
||||||
href: 'https://github.com/chaos-mesh/chaos-mesh',
|
</li>
|
||||||
},
|
<li>
|
||||||
],
|
<p>Thanks for the <a href="https://storyset.com/technology">Technology illustrations by Storyset</a>.</p>
|
||||||
},
|
</li>
|
||||||
{
|
</ul>`,
|
||||||
title: 'Thanks',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
html: '<a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" /></a>',
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
copyright: `
|
copyright: `
|
||||||
<br />
|
<p style="font-weight: 500;">Copyright © Chaos Mesh Authors ${new Date().getFullYear()} | Documentation Distributed under CC-BY-4.0</p>
|
||||||
<strong>© Chaos Mesh Authors ${new Date().getFullYear()} | Documentation Distributed under CC-BY-4.0 </strong>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
© ${new Date().getFullYear()} The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage/"> Trademark Usage</a> page.
|
© ${new Date().getFullYear()} The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage/"> Trademark Usage</a> page.
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
prism: {
|
prism: {
|
||||||
theme: require('prism-react-renderer/themes/dracula'),
|
darkTheme: require('prism-react-renderer/themes/vsDark'),
|
||||||
|
theme: {
|
||||||
|
plain: vsLightTheme.plain,
|
||||||
|
styles: [
|
||||||
|
...vsLightTheme.styles,
|
||||||
|
{
|
||||||
|
types: ['function', 'keyword'],
|
||||||
|
style: {
|
||||||
|
color: '#10a6fa',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
darkTheme: {
|
||||||
|
plain: vsDarkTheme.plain,
|
||||||
|
styles: [
|
||||||
|
...vsDarkTheme.styles,
|
||||||
|
{
|
||||||
|
types: ['function', 'keyword'],
|
||||||
|
style: {
|
||||||
|
color: '#f25c7c',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
additionalLanguages: ['bash'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onBrokenLinks: 'warn',
|
onBrokenLinks: 'warn',
|
||||||
|
|
@ -168,4 +201,5 @@ module.exports = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
|
plugins: ['./docusaurus-tailwind-v3'],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
"description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
|
"description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
|
||||||
},
|
},
|
||||||
"theme.blog.post.readMore": {
|
"theme.blog.post.readMore": {
|
||||||
"message": "Read More",
|
"message": "阅读更多",
|
||||||
"description": "The label used in blog post item excerpts to link to full blog posts"
|
"description": "The label used in blog post item excerpts to link to full blog posts"
|
||||||
},
|
},
|
||||||
"theme.blog.sidebar.navAriaLabel": {
|
"theme.blog.sidebar.navAriaLabel": {
|
||||||
|
|
@ -84,11 +84,11 @@
|
||||||
"description": "The copy button label on code blocks"
|
"description": "The copy button label on code blocks"
|
||||||
},
|
},
|
||||||
"theme.docs.sidebar.expandButtonTitle": {
|
"theme.docs.sidebar.expandButtonTitle": {
|
||||||
"message": "Expand sidebar",
|
"message": "展开侧边栏",
|
||||||
"description": "The ARIA label and title attribute for expand button of doc sidebar"
|
"description": "The ARIA label and title attribute for expand button of doc sidebar"
|
||||||
},
|
},
|
||||||
"theme.docs.sidebar.expandButtonAriaLabel": {
|
"theme.docs.sidebar.expandButtonAriaLabel": {
|
||||||
"message": "Expand sidebar",
|
"message": "展开侧边栏",
|
||||||
"description": "The ARIA label and title attribute for expand button of doc sidebar"
|
"description": "The ARIA label and title attribute for expand button of doc sidebar"
|
||||||
},
|
},
|
||||||
"theme.docs.paginator.navAriaLabel": {
|
"theme.docs.paginator.navAriaLabel": {
|
||||||
|
|
@ -104,11 +104,11 @@
|
||||||
"description": "The label used to navigate to the next doc"
|
"description": "The label used to navigate to the next doc"
|
||||||
},
|
},
|
||||||
"theme.docs.sidebar.collapseButtonTitle": {
|
"theme.docs.sidebar.collapseButtonTitle": {
|
||||||
"message": "Collapse sidebar",
|
"message": "折叠侧边栏",
|
||||||
"description": "The title attribute for collapse button of doc sidebar"
|
"description": "The title attribute for collapse button of doc sidebar"
|
||||||
},
|
},
|
||||||
"theme.docs.sidebar.collapseButtonAriaLabel": {
|
"theme.docs.sidebar.collapseButtonAriaLabel": {
|
||||||
"message": "Collapse sidebar",
|
"message": "折叠侧边栏",
|
||||||
"description": "The title attribute for collapse button of doc sidebar"
|
"description": "The title attribute for collapse button of doc sidebar"
|
||||||
},
|
},
|
||||||
"theme.docs.tagDocListPageTitle.nDocsTagged": {
|
"theme.docs.tagDocListPageTitle.nDocsTagged": {
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
"description": "The label used to tell the user to check the latest version"
|
"description": "The label used to tell the user to check the latest version"
|
||||||
},
|
},
|
||||||
"theme.docs.versions.latestVersionLinkLabel": {
|
"theme.docs.versions.latestVersionLinkLabel": {
|
||||||
"message": "latest version",
|
"message": "最新版本",
|
||||||
"description": "The label used for the latest version suggestion link label"
|
"description": "The label used for the latest version suggestion link label"
|
||||||
},
|
},
|
||||||
"theme.common.editThisPage": {
|
"theme.common.editThisPage": {
|
||||||
|
|
@ -212,14 +212,17 @@
|
||||||
"description": "The ARIA label and placeholder for search button"
|
"description": "The ARIA label and placeholder for search button"
|
||||||
},
|
},
|
||||||
"theme.tags.tagsPageTitle": {
|
"theme.tags.tagsPageTitle": {
|
||||||
"message": "Tags",
|
"message": "标签",
|
||||||
"description": "The title of the tag list page"
|
"description": "The title of the tag list page"
|
||||||
},
|
},
|
||||||
"siteConfig.tagline": {
|
"home.whoisusing": {
|
||||||
"message": "强大的混沌工程平台"
|
"message": "Chaos Mesh 的用户"
|
||||||
},
|
},
|
||||||
"home.quickstart": {
|
"home.k8s": {
|
||||||
"message": "快速试用"
|
"message": "为 Kubernetes 设计"
|
||||||
|
},
|
||||||
|
"home.k8s.1": {
|
||||||
|
"message": "在 Kubernetes 领域，{crd} 是实现自定义资源的成熟解决方案。 Chaos Mesh 借助 CRD 实现了与 Kubernetes 生态系统的自然融合。"
|
||||||
},
|
},
|
||||||
"home.easytouse": {
|
"home.easytouse": {
|
||||||
"message": "易于使用"
|
"message": "易于使用"
|
||||||
|
|
@ -231,36 +234,33 @@
|
||||||
"message": "无需修改应用的部署逻辑，拥有在生产环境中进行混沌实验的能力。"
|
"message": "无需修改应用的部署逻辑，拥有在生产环境中进行混沌实验的能力。"
|
||||||
},
|
},
|
||||||
"home.easytouse.3": {
|
"home.easytouse.3": {
|
||||||
"message": "轻松编排混沌实验的行为，用户可以实时观察实验自身的状态并且能够快速地对注入的故障进行回滚。"
|
"message": "通过仪表盘快速创建混沌实验，允许用户实时观察实验的状态并快速回滚任何注入的故障。"
|
||||||
},
|
},
|
||||||
"home.easytouse.4": {
|
"home.flexiblescope": {
|
||||||
"message": "提供仪表盘。无需手写实验定义，只需点击几步就可以顺利运行一个混沌实验。"
|
"message": "灵活的范围"
|
||||||
},
|
},
|
||||||
"home.k8s": {
|
"home.flexiblescope.1": {
|
||||||
"message": "为 Kubernetes 设计"
|
"message": "Chaos Mesh 提供了多种过滤规则，允许根据标签、注释等选择注入目标。它们统称为选择器。"
|
||||||
},
|
},
|
||||||
"home.k8s.1": {
|
"home.flexiblescope.2": {
|
||||||
"message": "Chaos Mesh 使用 {crd} 来定义混沌实验。"
|
"message": "此外，用户还可以设置命名空间白名单，以更大程度地控制实验的“爆炸半径”。"
|
||||||
},
|
},
|
||||||
"home.k8s.2": {
|
"home.securityfirst": {
|
||||||
"message": "在 Kubernetes 领域，CRD 是实现自定义资源的成熟解决方案。CRD 使 Chaos Mesh 与 Kubernetes 生态系统自然相结合。"
|
"message": "安全至上"
|
||||||
|
},
|
||||||
|
"home.securityfirst.1": {
|
||||||
|
"message": "默认启用基于角色的访问控制（RBAC）以限制恶意操作。用户必须被授予特定权限才能访问仪表板。"
|
||||||
},
|
},
|
||||||
"home.failuretypes": {
|
"home.failuretypes": {
|
||||||
"message": "多种多样的故障类型"
|
"message": "多种多样的故障类型"
|
||||||
},
|
},
|
||||||
"home.failuretypes.1": {
|
"home.failuretypes.1": {
|
||||||
"message": "Chaos Mesh 起初从分布式系统的角度出发，充分考虑了分布式系统可能出现的故障，从而提供更加全面、细粒度的故障类型，全方位地帮助用户对网络、磁盘、文件系统、操作系统等进行故障注入。"
|
"message": "Chaos Mesh 起初从分布式系统的角度出发，充分考虑了其可能出现的故障，从而提供更全面、更细粒度的故障类型来帮助用户对网络、磁盘、文件系统、操作系统等进行故障注入。"
|
||||||
},
|
},
|
||||||
"home.safe": {
|
"home.buildcommunity": {
|
||||||
"message": "安全可控"
|
"message": "共建整个社区"
|
||||||
},
|
},
|
||||||
"home.safe.1": {
|
"home.buildcommunity.1": {
|
||||||
"message": "Chaos Mesh 提供基于角色的访问控制，用户可以根据自己需求创建对应权限的角色，例如游客角色，管理角色等。"
|
"message": "加入社区和维护者及其他用户一起交流，你的建议可以让 Chaos Mesh 变得更好。"
|
||||||
},
|
|
||||||
"home.safe.2": {
|
|
||||||
"message": "此外，Chaos Mesh 支持设置 Namespace 白名单和黑名单，用户可以通过此功能保护重要的 Namespace，以此更大程度控制实验的“爆炸半径”。"
|
|
||||||
},
|
|
||||||
"home.whoisusing": {
|
|
||||||
"message": "Chaos Mesh 的用户"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
20
package.json
20
package.json
|
|
@ -12,12 +12,14 @@
|
||||||
"prepare": "husky install"
|
"prepare": "husky install"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@docusaurus/core": "^2.4.1",
|
"@docusaurus/core": "^2.4.3",
|
||||||
"@docusaurus/preset-classic": "^2.4.1",
|
"@docusaurus/preset-classic": "^2.4.3",
|
||||||
"clsx": "^1.2.1",
|
"clsx": "^2.0.0",
|
||||||
|
"gsap": "^3.12.2",
|
||||||
"react": "17",
|
"react": "17",
|
||||||
"react-dom": "17",
|
"react-dom": "17",
|
||||||
"semver": "^7.3.8"
|
"semver": "^7.5.4",
|
||||||
|
"typewriter-effect": "^2.21.0"
|
||||||
},
|
},
|
||||||
"browserslist": {
|
"browserslist": {
|
||||||
"production": [
|
"production": [
|
||||||
|
|
@ -32,10 +34,14 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
"@trivago/prettier-plugin-sort-imports": "^4.2.0",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"daisyui": "^3.7.7",
|
||||||
"husky": "^8.0.3",
|
"husky": "^8.0.3",
|
||||||
"lint-staged": "^13.2.0",
|
"lint-staged": "^14.0.1",
|
||||||
"prettier": "^2.8.7"
|
"postcss": "^8.4.30",
|
||||||
|
"prettier": "^2.8.7",
|
||||||
|
"tailwindcss": "^3.3.3"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.(js|md)": "prettier --write"
|
"*.(js|md)": "prettier --write"
|
||||||
|
|
|
||||||
3897
pnpm-lock.yaml
3897
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,16 @@
|
||||||
|
import clsx from 'clsx'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default function Card({ children, className, ...props }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'tw-p-6 tw-border-solid tw-border tw-border-base-content tw-border-opacity-[15%] dark:tw-border-opacity-60 tw-rounded-2xl',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Card from './Card'
|
||||||
|
|
||||||
|
import IconDisk from '../../static/img/icons/disk.svg'
|
||||||
|
import IconJava from '../../static/img/icons/java.svg'
|
||||||
|
import IconNetwork from '../../static/img/icons/network.svg'
|
||||||
|
import IconProcess from '../../static/img/icons/process.svg'
|
||||||
|
import IconStress from '../../static/img/icons/stress.svg'
|
||||||
|
import IconTime from '../../static/img/icons/time.svg'
|
||||||
|
|
||||||
|
const iconList = [
|
||||||
|
{
|
||||||
|
name: 'disk',
|
||||||
|
Icon: IconDisk,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'java',
|
||||||
|
Icon: IconJava,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'network',
|
||||||
|
Icon: IconNetwork,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'process',
|
||||||
|
Icon: IconProcess,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'stress',
|
||||||
|
Icon: IconStress,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'time',
|
||||||
|
Icon: IconTime,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function ChaosdFeatures() {
|
||||||
|
return (
|
||||||
|
<div className="tw-grid tw-grid-cols-3 tw-gap-8 tw-z-10">
|
||||||
|
{iconList.map(({ name, Icon }) => (
|
||||||
|
<Card key={name} className="tw-flex tw-bg-[#f2f2f2] dark:tw-bg-black">
|
||||||
|
<Icon className="tw-min-w-8 tw-h-8 tw-select-none dark:tw-fill-white" />
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import CodeBlock from '@theme/CodeBlock'
|
||||||
|
import React from 'react'
|
||||||
|
import Card from './Card'
|
||||||
|
|
||||||
|
export default function CodeGrid() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card className="scroll-to-display-x">
|
||||||
|
<h3>PodChaos / pod-failure</h3>
|
||||||
|
<CodeBlock className="codegrid-block language-yaml !tw-mb-0 !tw-shadow-none [&_code]:tw-p-0">
|
||||||
|
{`
|
||||||
|
apiVersion: chaos-mesh.org/v1alpha1
|
||||||
|
kind: PodChaos
|
||||||
|
metadata:
|
||||||
|
name: pod-failure-example
|
||||||
|
namespace: chaos-mesh
|
||||||
|
spec:
|
||||||
|
selector:
|
||||||
|
labelSelectors:
|
||||||
|
'environment': 'staging'
|
||||||
|
mode: one
|
||||||
|
action: pod-failure
|
||||||
|
duration: 30s
|
||||||
|
`}
|
||||||
|
</CodeBlock>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="scroll-to-display-x lg:tw-relative lg:tw-top-12">
|
||||||
|
<h3>NetworkChaos / delay</h3>
|
||||||
|
<CodeBlock className="codegrid-block language-yaml !tw-mb-0 !tw-shadow-none [&_code]:tw-p-0">
|
||||||
|
{`
|
||||||
|
apiVersion: chaos-mesh.org/v1alpha1
|
||||||
|
kind: NetworkChaos
|
||||||
|
metadata:
|
||||||
|
name: network-delay-example
|
||||||
|
spec:
|
||||||
|
selector:
|
||||||
|
namespaces:
|
||||||
|
- default
|
||||||
|
labelSelectors:
|
||||||
|
'env': 'production'
|
||||||
|
mode: one
|
||||||
|
action: delay
|
||||||
|
delay:
|
||||||
|
latency: '10ms'
|
||||||
|
correlation: '100'
|
||||||
|
jitter: '0ms'
|
||||||
|
`}
|
||||||
|
</CodeBlock>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="scroll-to-display-x">
|
||||||
|
<h3>StressChaos</h3>
|
||||||
|
<CodeBlock className="codegrid-block language-yaml !tw-mb-0 !tw-shadow-none [&_code]:tw-p-0">
|
||||||
|
{`
|
||||||
|
apiVersion: chaos-mesh.org/v1alpha1
|
||||||
|
kind: StressChaos
|
||||||
|
metadata:
|
||||||
|
name: mem-stress
|
||||||
|
namespace: chaos-mesh
|
||||||
|
spec:
|
||||||
|
selector:
|
||||||
|
namespaces:
|
||||||
|
- 'default'
|
||||||
|
labelSelectors:
|
||||||
|
'env': 'test'
|
||||||
|
mode: one
|
||||||
|
stressors:
|
||||||
|
memory:
|
||||||
|
workers: 2
|
||||||
|
size: '128MB'
|
||||||
|
`}
|
||||||
|
</CodeBlock>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
import Link from '@docusaurus/Link'
|
||||||
|
import Translate from '@docusaurus/Translate'
|
||||||
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
import React from 'react'
|
||||||
|
import Card from './Card'
|
||||||
|
|
||||||
|
function Feature({ imgUrl, title, description, className, imageWidth }) {
|
||||||
|
const isKubernetes = imgUrl === 'img/logos/kubernetes.svg'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className={className}>
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'tw-relative tw-flex tw-flex-col lg:tw-flex-row tw-items-center tw-h-full',
|
||||||
|
isKubernetes && 'lg:tw-items-start'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{!isKubernetes ? (
|
||||||
|
<div className="tw-flex-1 max-lg:tw-mb-6 tw-text-center">
|
||||||
|
<img className="scroll-to-display tw-w-[60%]" style={{ width: imageWidth }} src={useBaseUrl(imgUrl)} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
className="scroll-to-display lg:tw-absolute lg:tw-right-6 lg:-tw-bottom-12 max-lg:tw-w-[40%] lg:tw-h-48 max-lg:tw-mb-6"
|
||||||
|
src={useBaseUrl(imgUrl)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="tw-flex-1">
|
||||||
|
<div>
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<div>{description}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Features() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Feature
|
||||||
|
imgUrl="img/logos/kubernetes.svg"
|
||||||
|
title={<Translate id="home.k8s">Design for Kubernetes</Translate>}
|
||||||
|
description={
|
||||||
|
<p>
|
||||||
|
<Translate
|
||||||
|
id="home.k8s.1"
|
||||||
|
values={{
|
||||||
|
crd: (
|
||||||
|
<Link
|
||||||
|
className="tw-underline dark:tw-no-underline"
|
||||||
|
to="https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/custom-resources/"
|
||||||
|
>
|
||||||
|
CustomResourceDefinition (CRD)
|
||||||
|
</Link>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
'In the Kubernetes realm, {crd} is a proven solution for implementing custom resources. Chaos Mesh leverages CRDs for natural integration with the Kubernetes ecosystem.'
|
||||||
|
}
|
||||||
|
</Translate>
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
className="lg:tw-col-span-2"
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
imgUrl="img/features/easy-to-use.svg"
|
||||||
|
title={<Translate id="home.easytouse">Easy to Use</Translate>}
|
||||||
|
description={
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
<Translate
|
||||||
|
id="home.easytouse.1"
|
||||||
|
values={{
|
||||||
|
minikube: (
|
||||||
|
<Link className="tw-underline dark:tw-no-underline" to="https://minikube.sigs.k8s.io/">
|
||||||
|
minikube
|
||||||
|
</Link>
|
||||||
|
),
|
||||||
|
kind: (
|
||||||
|
<Link className="tw-underline dark:tw-no-underline" to="https://kind.sigs.k8s.io/">
|
||||||
|
kind
|
||||||
|
</Link>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
'No special dependencies, Chaos Mesh can be easily deployed on Kubernetes clusters directly, including {minikube} and {kind}.'
|
||||||
|
}
|
||||||
|
</Translate>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<Translate id="home.easytouse.2">
|
||||||
|
Ability to perform chaos experiments in production environments without modifying the deployment logic
|
||||||
|
of applications.
|
||||||
|
</Translate>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Translate id="home.easytouse.3">
|
||||||
|
Quickly create chaos experiments through the dashboard, allowing users to observe the experiment's
|
||||||
|
state in real time and quickly roll back any injected failures.
|
||||||
|
</Translate>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
className="lg:tw-col-span-4"
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
imgUrl="img/features/flexible-scope.svg"
|
||||||
|
title={<Translate id="home.flexiblescope">Flexible Scope</Translate>}
|
||||||
|
description={
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
<Translate id="home.flexiblescope.1">
|
||||||
|
Chaos Mesh provides multiple filtering rules that allow selecting injection targets based on labels,
|
||||||
|
annotations, and so on. They are collectively called selectors.
|
||||||
|
</Translate>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Translate id="home.flexiblescope.2">
|
||||||
|
In addition, users can also set a namespace whitelist to greater control the "blast radius" of the
|
||||||
|
experiment.
|
||||||
|
</Translate>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
className="lg:tw-col-span-3"
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
imgUrl="img/features/security-first.svg"
|
||||||
|
title={<Translate id="home.securityfirst">Security First</Translate>}
|
||||||
|
description={
|
||||||
|
<p>
|
||||||
|
<Translate id="home.securityfirst.1">
|
||||||
|
Role-based access control (RBAC) is enabled by default to restrict malicious operations. Users must be
|
||||||
|
authorized with specific privileges to access the dashboard.
|
||||||
|
</Translate>
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
className="lg:tw-col-span-3"
|
||||||
|
imageWidth="75%"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,347 @@
|
||||||
|
import { useColorMode } from '@docusaurus/theme-common'
|
||||||
|
import { gsap } from 'gsap'
|
||||||
|
import React, { useLayoutEffect, useRef } from 'react'
|
||||||
|
import Typewriter from 'typewriter-effect/dist/core'
|
||||||
|
|
||||||
|
import { useDidMountEffect } from '../utils/hooks'
|
||||||
|
|
||||||
|
const rows = 10
|
||||||
|
const dotsPerRow = 10
|
||||||
|
const dotsNum = rows * dotsPerRow
|
||||||
|
const spacing = 30
|
||||||
|
const dotColor1 = '#f25c7c'
|
||||||
|
const dotColor2 = '#10a6fa'
|
||||||
|
|
||||||
|
function setNeutralDotColor(theme) {
|
||||||
|
return theme !== 'dark' ? '#333' : '#eee'
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDotColor(theme) {
|
||||||
|
return Math.random() > 0.65 ? dotColor1 : Math.random() < 0.35 ? dotColor2 : setNeutralDotColor(theme)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLineColor(theme) {
|
||||||
|
return theme !== 'dark' ? '#eee' : '#333'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Mesh() {
|
||||||
|
const svgEl = useRef()
|
||||||
|
const pathsGroup = useRef()
|
||||||
|
const dotsGroup = useRef()
|
||||||
|
|
||||||
|
const { colorMode } = useColorMode()
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
const ctx = gsap.context(() => {
|
||||||
|
const pts = []
|
||||||
|
let i = 0
|
||||||
|
|
||||||
|
for (let row = 0; row < rows; row++) {
|
||||||
|
for (let dotNum = 0; dotNum < dotsPerRow; dotNum++) {
|
||||||
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
||||||
|
|
||||||
|
gsap.set(path, {
|
||||||
|
attr: { class: 'path path-' + i, fill: 'none', stroke: setLineColor(colorMode), 'stroke-width': 0.3 },
|
||||||
|
})
|
||||||
|
pathsGroup.current.appendChild(path)
|
||||||
|
|
||||||
|
const dotG = document.createElementNS('http://www.w3.org/2000/svg', 'g')
|
||||||
|
const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
|
||||||
|
const position = { x: (row % 2 ? 0 : spacing) + dotNum * spacing * 2, y: row * spacing }
|
||||||
|
pts.push(position)
|
||||||
|
|
||||||
|
gsap.set(dotG, {
|
||||||
|
attr: { class: 'dot dot-' + i },
|
||||||
|
...position,
|
||||||
|
})
|
||||||
|
|
||||||
|
const color = setDotColor(colorMode)
|
||||||
|
gsap.set(dot, {
|
||||||
|
attr: { class: 'dot-inner', r: 1, fill: color, stroke: color, 'stroke-opacity': 0.5, 'stroke-width': 1 },
|
||||||
|
})
|
||||||
|
|
||||||
|
dotG.appendChild(dot)
|
||||||
|
dotsGroup.current.appendChild(dotG)
|
||||||
|
|
||||||
|
i++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
gsap.to('.dot', {
|
||||||
|
duration: 3,
|
||||||
|
x: '+=6',
|
||||||
|
y: '-=12',
|
||||||
|
ease: 'sine.inOut',
|
||||||
|
stagger: { grid: [rows, dotsPerRow], amount: 1, from: 'random', repeat: -1, yoyo: true },
|
||||||
|
onUpdate: reDraw,
|
||||||
|
})
|
||||||
|
|
||||||
|
let scaling = false
|
||||||
|
let percent = 0
|
||||||
|
let curve1 = 5
|
||||||
|
let curve2 = 0
|
||||||
|
let curve2Range = [3, 4, 5]
|
||||||
|
let injectedDot = 64
|
||||||
|
let injectedDots = [64]
|
||||||
|
|
||||||
|
function reDraw() {
|
||||||
|
let row = 0
|
||||||
|
|
||||||
|
for (let i = 0; i < pts.length; i++) {
|
||||||
|
pts[i] = { x: gsap.getProperty('.dot-' + i, 'x'), y: gsap.getProperty('.dot-' + i, 'y') }
|
||||||
|
|
||||||
|
if (i % dotsPerRow === 0) {
|
||||||
|
row++
|
||||||
|
}
|
||||||
|
|
||||||
|
if (row < rows) {
|
||||||
|
if ((i % dotsPerRow === 0 && row % 2 === 0) || (i % dotsPerRow === dotsPerRow - 1 && row % 2 === 1)) {
|
||||||
|
gsap.set('.path-' + i, {
|
||||||
|
attr: {
|
||||||
|
d: 'M' + pts[i].x + ',' + pts[i].y + ' L' + pts[i + dotsPerRow].x + ',' + pts[i + dotsPerRow].y,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (row % 2 === 1) {
|
||||||
|
const start = `M ${pts[i + dotsPerRow].x} ${pts[i + dotsPerRow].y}`
|
||||||
|
let dot = ` L ${pts[i].x} ${pts[i].y}`
|
||||||
|
let end = ` L ${pts[i + dotsPerRow + 1].x} ${pts[i + dotsPerRow + 1].y}`
|
||||||
|
const d = start + dot + end
|
||||||
|
|
||||||
|
if (i === injectedDot && scaling) {
|
||||||
|
dot = ` C ${pts[i + dotsPerRow].x} ${pts[i + dotsPerRow].y - curve1 * percent}, ${pts[i].x} ${
|
||||||
|
pts[i].y + curve2 * percent
|
||||||
|
}, ${pts[i].x} ${pts[i].y}`
|
||||||
|
end = ` C ${pts[i].x + curve2 * percent} ${pts[i].y}, ${
|
||||||
|
pts[i + dotsPerRow + 1].x - curve1 * percent
|
||||||
|
} ${pts[i + dotsPerRow + 1].y}, ${pts[i + dotsPerRow + 1].x} ${pts[i + dotsPerRow + 1].y}`
|
||||||
|
|
||||||
|
gsap.set('.path-' + i, {
|
||||||
|
attr: {
|
||||||
|
d: start + dot + end,
|
||||||
|
'stroke-dasharray': `30 ${10 * percent}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
gsap.set('.path-' + i, {
|
||||||
|
attr: {
|
||||||
|
d,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const start = `M ${pts[i + dotsPerRow - 1].x} ${pts[i + dotsPerRow - 1].y}`
|
||||||
|
let dot = ` L ${pts[i].x} ${pts[i].y}`
|
||||||
|
let end = ` L ${pts[i + dotsPerRow].x} ${pts[i + dotsPerRow].y}`
|
||||||
|
const d = start + dot + end
|
||||||
|
|
||||||
|
if (i === injectedDot - dotsPerRow && scaling) {
|
||||||
|
end = ` C ${pts[i].x + curve1 * percent} ${pts[i].y}, ${pts[i + dotsPerRow].x - curve2 * percent} ${
|
||||||
|
pts[i + dotsPerRow].y
|
||||||
|
}, ${pts[i + dotsPerRow].x} ${pts[i + dotsPerRow].y}`
|
||||||
|
|
||||||
|
gsap.set('.path-' + i, {
|
||||||
|
attr: {
|
||||||
|
d: start + dot + end,
|
||||||
|
'stroke-dasharray': `30 ${10 * percent}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else if (i === injectedDot - dotsPerRow + 1 && scaling) {
|
||||||
|
dot = ` C ${pts[i + dotsPerRow - 1].x} ${pts[i + dotsPerRow - 1].y - curve2 * percent}, ${pts[i].x} ${
|
||||||
|
pts[i].y + curve1 * percent
|
||||||
|
}, ${pts[i].x} ${pts[i].y}`
|
||||||
|
|
||||||
|
gsap.set('.path-' + i, {
|
||||||
|
attr: {
|
||||||
|
d: start + dot + end,
|
||||||
|
'stroke-dasharray': `30 ${10 * percent}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else if ((i === injectedDot + dotsPerRow || i === injectedDot + dotsPerRow + 1) && scaling) {
|
||||||
|
gsap.set('.path-' + i, {
|
||||||
|
attr: {
|
||||||
|
d,
|
||||||
|
'stroke-dasharray': `30 ${10 * percent}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
gsap.set('.path-' + i, {
|
||||||
|
attr: {
|
||||||
|
d,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add rotation animation.
|
||||||
|
svgEl.current.addEventListener('mousemove', (e) => {
|
||||||
|
const rotationX = Math.max((1 - e.clientY / window.innerHeight) * 45, 30)
|
||||||
|
const rotationY = Math.max((1 - e.clientX / window.innerWidth) * -18, -9)
|
||||||
|
|
||||||
|
gsap.to('.mesh', {
|
||||||
|
duration: 1.5,
|
||||||
|
rotationX,
|
||||||
|
rotationY,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function injectChaos() {
|
||||||
|
// Stop in mobile devices.
|
||||||
|
if (!window.matchMedia('(min-width: 768px)').matches) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!scaling) {
|
||||||
|
curve2 = curve2Range[Math.floor(Math.random() * curve2Range.length)]
|
||||||
|
injectedDot = injectedDots[Math.floor(Math.random() * injectedDots.length)]
|
||||||
|
|
||||||
|
scaling = true
|
||||||
|
|
||||||
|
const rect = document.querySelector(`.dot-${injectedDot}`).getBoundingClientRect()
|
||||||
|
const top = rect.top + 100
|
||||||
|
const left = rect.left - 250
|
||||||
|
gsap.fromTo(
|
||||||
|
'.mesh-text',
|
||||||
|
{
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
duration: 1,
|
||||||
|
opacity: 1,
|
||||||
|
top: top - 50,
|
||||||
|
left: left + 25,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
new Typewriter('.mesh-text', { delay: 50 })
|
||||||
|
.typeString('Injecting NetworkChaos/loss...')
|
||||||
|
.pauseFor(500)
|
||||||
|
.deleteAll()
|
||||||
|
.typeString('Simulating packet loss...')
|
||||||
|
.pauseFor(2000)
|
||||||
|
.deleteAll()
|
||||||
|
.typeString('⏳ Recovering...')
|
||||||
|
.pauseFor(1500)
|
||||||
|
.deleteAll()
|
||||||
|
.typeString('✅ Done!')
|
||||||
|
.pauseFor(1000)
|
||||||
|
.callFunction(() => {
|
||||||
|
gsap.fromTo(
|
||||||
|
'.mesh-text',
|
||||||
|
{
|
||||||
|
top: top - 50,
|
||||||
|
left: left + 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
top,
|
||||||
|
left: left + 25,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.start()
|
||||||
|
|
||||||
|
const injected = gsap.to(`.dot-${injectedDot}`, {
|
||||||
|
duration: 2,
|
||||||
|
scale: 5,
|
||||||
|
ease: 'back.inOut(3)',
|
||||||
|
repeat: 7,
|
||||||
|
yoyo: true,
|
||||||
|
onUpdate: function () {
|
||||||
|
percent = injected.time()
|
||||||
|
},
|
||||||
|
onComplete: () => (scaling = false),
|
||||||
|
})
|
||||||
|
const dotG = document.querySelector(`.dot-${injectedDot}`)
|
||||||
|
for (let i = 0; i < 12; i++) {
|
||||||
|
const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
|
||||||
|
|
||||||
|
gsap.set(dot, {
|
||||||
|
attr: {
|
||||||
|
class: `wave wave-${i}`,
|
||||||
|
r: 0,
|
||||||
|
fill: 'none',
|
||||||
|
stroke: gsap.getProperty(`.dot-${injectedDot} > .dot-inner`, 'fill'),
|
||||||
|
'stroke-opacity': 0.5,
|
||||||
|
'stroke-width': 0.3,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
dotG.appendChild(dot)
|
||||||
|
}
|
||||||
|
const tl = gsap.timeline({
|
||||||
|
onComplete: function () {
|
||||||
|
document.querySelectorAll('.wave').forEach((el) => el.remove())
|
||||||
|
},
|
||||||
|
})
|
||||||
|
for (let i = 0; i < 12; i++) {
|
||||||
|
tl.to(`.wave-${i}`, {
|
||||||
|
duration: 1,
|
||||||
|
attr: {
|
||||||
|
r: 10,
|
||||||
|
'stroke-opacity': 0,
|
||||||
|
'stroke-width': 0,
|
||||||
|
},
|
||||||
|
ease: 'sine.inOut',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svgEl.current.addEventListener('click', injectChaos)
|
||||||
|
setTimeout(() => {
|
||||||
|
injectChaos()
|
||||||
|
}, 1500)
|
||||||
|
}, svgEl)
|
||||||
|
|
||||||
|
window.gsapCtx = ctx
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
ctx.kill()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useDidMountEffect(() => {
|
||||||
|
for (let i = 0; i < dotsNum; i++) {
|
||||||
|
const fill = gsap.getProperty(`.dot-${i} > .dot-inner`, 'fill')
|
||||||
|
|
||||||
|
if (fill !== 'rgb(16, 166, 250)' && fill !== 'rgb(242, 92, 124)') {
|
||||||
|
const dotColor = setNeutralDotColor(colorMode)
|
||||||
|
|
||||||
|
gsap.set(`.dot-${i} > .dot-inner`, {
|
||||||
|
attr: {
|
||||||
|
fill: dotColor,
|
||||||
|
stroke: dotColor,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
gsap.set('.path', {
|
||||||
|
attr: {
|
||||||
|
stroke: setLineColor(colorMode),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}, [colorMode])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<svg
|
||||||
|
ref={svgEl}
|
||||||
|
className="mesh tw-absolute tw-top-[-10%] 2xl:tw-left-[-100px] tw-w-[1024px] lg:tw-w-full tw-h-[125%]"
|
||||||
|
style={{
|
||||||
|
transform: 'rotate3d(3, -.6, -1, 30deg)',
|
||||||
|
}}
|
||||||
|
viewBox="0 0 500 250"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g ref={pathsGroup} />
|
||||||
|
<g ref={dotsGroup} />
|
||||||
|
</svg>
|
||||||
|
<div className={`mesh-text tw-absolute tw-px-2 tw-py-1 tw-bg-primary tw-text-white tw-rounded tw-opacity-0`} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -4,7 +4,7 @@ const whoisUsing = [
|
||||||
img: 'img/logos/apisix.svg',
|
img: 'img/logos/apisix.svg',
|
||||||
href: 'https://apisix.apache.org/',
|
href: 'https://apisix.apache.org/',
|
||||||
style: {
|
style: {
|
||||||
height: '80%',
|
height: '50%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -42,7 +42,7 @@ const whoisUsing = [
|
||||||
img: 'img/logos/digitalchina.png',
|
img: 'img/logos/digitalchina.png',
|
||||||
href: 'http://www.digitalchina.com/',
|
href: 'http://www.digitalchina.com/',
|
||||||
style: {
|
style: {
|
||||||
width: '60%',
|
width: '85%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -60,7 +60,7 @@ const whoisUsing = [
|
||||||
img: 'img/logos/kingnet.png',
|
img: 'img/logos/kingnet.png',
|
||||||
href: 'https://www.kingnet.com/',
|
href: 'https://www.kingnet.com/',
|
||||||
style: {
|
style: {
|
||||||
marginBottom: '1rem',
|
marginBottom: '.5rem',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -77,6 +77,9 @@ const whoisUsing = [
|
||||||
name: 'NETSTARS',
|
name: 'NETSTARS',
|
||||||
img: 'img/logos/netstars.png',
|
img: 'img/logos/netstars.png',
|
||||||
href: 'https://www.netstars.co.jp/',
|
href: 'https://www.netstars.co.jp/',
|
||||||
|
style: {
|
||||||
|
transform: 'scale(1.25)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Percona',
|
name: 'Percona',
|
||||||
|
|
@ -118,7 +121,7 @@ const whoisUsing = [
|
||||||
img: 'img/logos/sj.png',
|
img: 'img/logos/sj.png',
|
||||||
href: 'https://www.sjfood.com/',
|
href: 'https://www.sjfood.com/',
|
||||||
style: {
|
style: {
|
||||||
width: '40%',
|
height: '50%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -131,7 +134,7 @@ const whoisUsing = [
|
||||||
img: 'img/logos/vald.svg',
|
img: 'img/logos/vald.svg',
|
||||||
href: 'https://vald.vdaas.org/',
|
href: 'https://vald.vdaas.org/',
|
||||||
style: {
|
style: {
|
||||||
height: '50%',
|
height: '35%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,185 +1,135 @@
|
||||||
|
import BrowserOnly from '@docusaurus/BrowserOnly'
|
||||||
|
import Head from '@docusaurus/Head'
|
||||||
import Link from '@docusaurus/Link'
|
import Link from '@docusaurus/Link'
|
||||||
import Translate from '@docusaurus/Translate'
|
import Translate from '@docusaurus/Translate'
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||||
import Layout from '@theme/Layout'
|
import Layout from '@theme/Layout'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import React from 'react'
|
import { gsap } from 'gsap'
|
||||||
|
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||||
|
import React, { useEffect } from 'react'
|
||||||
|
|
||||||
|
import IconGithub from '../../static/img/icons/github.svg'
|
||||||
|
import IconHelp from '../../static/img/icons/help.svg'
|
||||||
|
import IconLibrary from '../../static/img/icons/library.svg'
|
||||||
|
import IconOctocat from '../../static/img/icons/octocat.svg'
|
||||||
|
import IconPlay from '../../static/img/icons/play.svg'
|
||||||
|
import Card from '../components/Card'
|
||||||
|
import ChaosdFeatures from '../components/ChaosdFeatures'
|
||||||
|
import CodeGrid from '../components/CodeGrid'
|
||||||
|
import Features from '../components/Features'
|
||||||
|
import Mesh from '../components/Mesh'
|
||||||
import PickVersion from '../components/PickVersion'
|
import PickVersion from '../components/PickVersion'
|
||||||
import whoIsUsing from '../data/whoIsUsing'
|
import whoIsUsing from '../data/whoIsUsing'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
|
|
||||||
function Feature({ imgUrl, title, description, reverse }) {
|
gsap.registerPlugin(ScrollTrigger)
|
||||||
return (
|
|
||||||
<div className={clsx('row', styles.feature, reverse && styles.featureReverse)}>
|
const description =
|
||||||
<div className="col col--6 text--center">
|
'Chaos Mesh brings various types of fault simulation to Kubernetes and has an enormous capability to orchestrate fault scenarios. It helps you conveniently simulate various abnormalities that might occur in reality during the development, testing, and production environments and find potential problems in the system.'
|
||||||
<img className={styles.featureImage} src={useBaseUrl(imgUrl)} alt={title} />
|
|
||||||
</div>
|
|
||||||
<div className={clsx('col col--6', styles.featureContent)}>
|
|
||||||
<div>
|
|
||||||
<h3>{title}</h3>
|
|
||||||
<div>{description}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
const { siteConfig } = useDocusaurusContext()
|
const { siteConfig } = useDocusaurusContext()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.querySelector('.navbar__inner').classList.add('tw-container', 'tw-mx-auto')
|
||||||
|
|
||||||
|
gsap.from('.scroll-to-display', {
|
||||||
|
duration: 1,
|
||||||
|
opacity: 0,
|
||||||
|
y: 50,
|
||||||
|
stagger: 0.25,
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroll-to-display',
|
||||||
|
toggleActions: 'restart none none none',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
gsap.from('.scroll-to-display-x', {
|
||||||
|
duration: 1,
|
||||||
|
opacity: 0,
|
||||||
|
x: 0,
|
||||||
|
y: 100,
|
||||||
|
stagger: 0.25,
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroll-to-display-x',
|
||||||
|
toggleActions: 'restart none none none',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout title={siteConfig.tagline} description={siteConfig.tagline}>
|
<Layout description={description}>
|
||||||
|
<Head>
|
||||||
|
<title>Chaos Mesh: {siteConfig.tagline}</title>
|
||||||
|
</Head>
|
||||||
<main>
|
<main>
|
||||||
<div className="hero">
|
<div className="hero tw-relative tw-h-[768px] tw-pt-0 tw-overflow-hidden">
|
||||||
<div className="container text--center">
|
<BrowserOnly>{() => <Mesh />}</BrowserOnly>
|
||||||
<div className={styles.heroLogoWrapper}>
|
<div className="tw-container tw-mx-auto tw-z-10">
|
||||||
<img className={styles.heroLogo} src={useBaseUrl('img/logos/logo-mini.svg')} alt="Chaos Mesh" />
|
<div className="tw-flex tw-flex-col lg:tw-flex-row lg:tw-justify-between lg:tw-items-center">
|
||||||
</div>
|
<div className="tw-flex-[.8] 2xl:tw-flex-[.6] tw-p-6 lg:tw-p-3">
|
||||||
<h1 className={clsx('hero__title', styles.heroTitle)}>{siteConfig.title}</h1>
|
<h1
|
||||||
<p className="hero__subtitle">
|
className={clsx(
|
||||||
<Translate id="siteConfig.tagline">{siteConfig.tagline}</Translate>
|
'tw-inline-block tw-text-5xl xl:tw-text-6xl tw-text-left tw-rounded-2xl tw-backdrop-blur-sm lg:tw-backdrop-blur',
|
||||||
</p>
|
styles.heroTitle
|
||||||
</div>
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hero-divider" />
|
|
||||||
|
|
||||||
<div className="hero">
|
|
||||||
<div className="container text--center">
|
|
||||||
<h2 className="hero__subtitle">
|
|
||||||
<Translate id="home.quickstart">Start By One Line</Translate>
|
|
||||||
</h2>
|
|
||||||
<PickVersion>curl -sSL https://mirrors.chaos-mesh.org/latest/install.sh | bash</PickVersion>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hero-divider" />
|
|
||||||
|
|
||||||
<div className="hero">
|
|
||||||
<div className="container">
|
|
||||||
<Feature
|
|
||||||
imgUrl="img/features/undraw_server_down_s4lk.svg"
|
|
||||||
title={<Translate id="home.easytouse">Easy to Use</Translate>}
|
|
||||||
description={
|
|
||||||
<>
|
|
||||||
<p>
|
|
||||||
<Translate
|
|
||||||
id="home.easytouse.1"
|
|
||||||
values={{
|
|
||||||
minikube: <Link to="https://minikube.sigs.k8s.io/">minikube</Link>,
|
|
||||||
kind: <Link to="https://kind.sigs.k8s.io/">kind</Link>,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{
|
<span>Break</span>
|
||||||
'No special dependencies, Chaos Mesh can be easily deployed on Kubernetes clusters directly, including {minikube} and {kind}.'
|
<br />
|
||||||
}
|
Your System
|
||||||
</Translate>
|
<br />
|
||||||
|
<span>Constructively.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="lg:tw-text-lg tw-font-medium tw-rounded-2xl tw-backdrop-blur-sm lg:tw-backdrop-blur">
|
||||||
|
{/* TODO: add translation. */}
|
||||||
|
<Translate id="home.description">{description}</Translate>
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<div className="tw-flex tw-gap-3">
|
||||||
<li>
|
<Link
|
||||||
<Translate id="home.easytouse.2">
|
to="/docs/production-installation-using-helm"
|
||||||
Ability to perform chaos experiments in production environments without modifying the deployment
|
className="tw-btn tw-btn-primary hover:tw-text-white hover:-tw-translate-y-[3px]"
|
||||||
logic of the application.
|
>
|
||||||
</Translate>
|
Get Started →
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Translate id="home.easytouse.3">
|
|
||||||
Easily orchestrate the behavior of chaos experiments, allowing users to observe the state of the
|
|
||||||
experiment itself in real time and quickly rollback any injected failures.
|
|
||||||
</Translate>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Translate id="home.easytouse.4">
|
|
||||||
Packed with dashboard. No handwritten experiment definitions are required, and a chaos
|
|
||||||
experiment can be run smoothly in just a few clicks.
|
|
||||||
</Translate>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Feature
|
|
||||||
imgUrl="img/logos/kubernetes.svg"
|
|
||||||
title={<Translate id="home.k8s">Design for Kubernetes</Translate>}
|
|
||||||
description={
|
|
||||||
<>
|
|
||||||
<p>
|
|
||||||
<Translate
|
|
||||||
id="home.k8s.1"
|
|
||||||
values={{
|
|
||||||
crd: (
|
|
||||||
<Link to="https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/custom-resources/">
|
|
||||||
CustomResourceDefinition (CRD)
|
|
||||||
</Link>
|
</Link>
|
||||||
),
|
<Link
|
||||||
}}
|
to="https://github.com/chaos-mesh/chaos-mesh"
|
||||||
|
className="tw-btn tw-btn-neutral tw-gap-2 dark:tw-glass hover:tw-text-white hover:-tw-translate-y-[3px]"
|
||||||
>
|
>
|
||||||
{'Chaos Mesh uses {crd} to define chaos experiments.'}
|
<IconOctocat className="tw-w-4 tw-h-4 tw-fill-white" />
|
||||||
</Translate>
|
GitHub
|
||||||
</p>
|
</Link>
|
||||||
<p>
|
|
||||||
<Translate id="home.k8s.2">
|
|
||||||
In the Kubernetes realm, CRD is a proven solution for implementing custom resources. CRD enables
|
|
||||||
the natural integration of Chaos Mesh with the Kubernetes ecosystem.
|
|
||||||
</Translate>
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
reverse={true}
|
|
||||||
/>
|
|
||||||
<Feature
|
|
||||||
imgUrl="img/features/undraw_Operating_system_re_iqsc.svg"
|
|
||||||
title={<Translate id="home.failuretypes">A wide variety of failure types</Translate>}
|
|
||||||
description={
|
|
||||||
<p>
|
|
||||||
<Translate id="home.failuretypes.1">
|
|
||||||
Chaos Mesh initially started from a distributed system perspective, fully considering the possible
|
|
||||||
failures of distributed systems, thus providing a more comprehensive and fine-grained fault type to
|
|
||||||
help users with fault injection for network, disk, file system, operating system, etc. in a
|
|
||||||
comprehensive manner.
|
|
||||||
</Translate>
|
|
||||||
</p>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Feature
|
|
||||||
imgUrl="img/features/undraw_Security_on_re_e491.svg"
|
|
||||||
title={<Translate id="home.safe">Safe and Controllable</Translate>}
|
|
||||||
description={
|
|
||||||
<>
|
|
||||||
<p>
|
|
||||||
<Translate id="home.safe.1">
|
|
||||||
Chaos Mesh provides role-based access control. Users can create roles with corresponding
|
|
||||||
permissions according to their needs, such as visitor roles, administrative roles, etc.
|
|
||||||
</Translate>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<Translate id="home.safe.2">
|
|
||||||
In addition, Chaos Mesh supports setting up Namespace whitelists and blacklists, which allow users
|
|
||||||
to protect important Namespaces and thus gain greater control over the "blast radius" of
|
|
||||||
experiments.
|
|
||||||
</Translate>
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
reverse={true}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hero-divider" />
|
<div className="lg:max-xl:tw-w-[500px] tw-p-6 lg:tw-p-3">
|
||||||
|
<h2 className="tw-inline-block tw-text-base lg:tw-text-lg tw-font-semibold tw-rounded-2xl tw-backdrop-blur-sm lg:tw-backdrop-blur">
|
||||||
|
Try it out with the following command 👇
|
||||||
|
</h2>
|
||||||
|
<PickVersion className="!tw-mb-0">
|
||||||
|
curl -sSL https://mirrors.chaos-mesh.org/latest/install.sh | bash
|
||||||
|
</PickVersion>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="hero">
|
<div className="hero">
|
||||||
<div className="container text--center">
|
<div className="tw-container tw-mx-auto max-lg:tw-px-4 tw-text-center">
|
||||||
<h2 className="hero__subtitle">
|
<h2 className="tw-text-lg">
|
||||||
<Translate id="home.whoisusing">Who is Using Chaos Mesh</Translate>
|
<Translate id="home.whoisusing">Users of Chaos Mesh</Translate>
|
||||||
</h2>
|
</h2>
|
||||||
<div className={styles.whiteboard}>
|
<div className="max-md:tw-overflow-x-auto dark:tw-invert dark:tw-saturate-0">
|
||||||
<div className="row">
|
<div className="row max-md:tw-w-[1280px]">
|
||||||
{whoIsUsing.map((w) => (
|
{whoIsUsing.map((w) => (
|
||||||
<div key={w.name} className={clsx('col col--3', styles.whiteboardCol)}>
|
<div key={w.name} className={clsx('col col--1', styles.whiteboardCol)}>
|
||||||
<a className={styles.logoWrapper} href={w.href} target="_blank">
|
<a
|
||||||
|
className="tw-flex tw-justify-center tw-items-center tw-h-[100px] tw-select-none"
|
||||||
|
href={w.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
<img style={w.style} src={useBaseUrl(w.img)} alt={w.name} />
|
<img style={w.style} src={useBaseUrl(w.img)} alt={w.name} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -189,14 +139,196 @@ function Home() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hero-divider" />
|
<div className="hero">
|
||||||
|
<div className="tw-container tw-mx-auto max-lg:tw-px-4">
|
||||||
|
<div className="tw-max-w-[800px] tw-mb-12 tw-mx-auto tw-text-center">
|
||||||
|
{/* TODO: add translation. */}
|
||||||
|
<h2 className="tw-text-4xl xl:tw-text-5xl">
|
||||||
|
Make <span className={styles.heroTitle}>Cloud Native + Chaos Engineering</span> simple and
|
||||||
|
straightforward.
|
||||||
|
</h2>
|
||||||
|
<p className="lg:tw-text-lg tw-font-medium">
|
||||||
|
Based on the principles of Chaos Engineering, Chaos Mesh abstracts real-world events into objects that
|
||||||
|
can be directly applied, hiding the trivial details.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="tw-grid tw-gap-8 lg:tw-grid-rows-2 lg:tw-grid-cols-6">
|
||||||
|
<Features />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="hero">
|
<div className="hero">
|
||||||
<div className="container text--center">
|
<div className="tw-container tw-mx-auto max-lg:tw-px-4">
|
||||||
<h2 className="hero__subtitle">
|
<div className="tw-max-w-[800px] tw-mx-auto tw-text-center">
|
||||||
Chaos Mesh is a <Link to="https://cncf.io/">Cloud Native Computing Foundation</Link> incubating project
|
{/* TODO: add translation. */}
|
||||||
|
<h2 className="tw-text-4xl xl:tw-text-5xl">
|
||||||
|
<span className={styles.heroTitle}>Wide variety</span> of failure types.
|
||||||
</h2>
|
</h2>
|
||||||
<div className={clsx('cncf-logo', styles.cncfLogo)} />
|
<p className="lg:tw-text-lg tw-font-medium">
|
||||||
|
<Translate id="home.failuretypes.1">
|
||||||
|
Chaos Mesh initially started from a distributed system perspective, fully considering its possible
|
||||||
|
failures, thus providing more comprehensive and fine-grained fault types to help users with fault
|
||||||
|
injection for networks, disks, file systems, operating systems, etc.
|
||||||
|
</Translate>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
className={clsx(
|
||||||
|
'tw-block tw-mx-auto tw-select-none dark:tw-invert-[.85] dark:tw-saturate-0',
|
||||||
|
styles.chaosCategory
|
||||||
|
)}
|
||||||
|
src="img/home/chaos-category.svg"
|
||||||
|
alt="Chaos Category"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="tw-flex tw-justify-center tw-mt-12">
|
||||||
|
<Link
|
||||||
|
to="/docs/simulate-pod-chaos-on-kubernetes"
|
||||||
|
className="tw-btn tw-btn-primary tw-gap-2 hover:tw-text-white hover:-tw-translate-y-[3px]"
|
||||||
|
>
|
||||||
|
<IconLibrary className="tw-w-4 tw-h-4 tw-fill-white" />
|
||||||
|
Explore More
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="tw-grid tw-gap-8 lg:tw-grid-cols-3 tw-my-12">
|
||||||
|
<CodeGrid />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hero tw-relative">
|
||||||
|
<div className="tw-absolute tw-top-[-50px] tw-left-0 md:tw-top-[-100px] xl:tw-top-[-200px] tw-w-full">
|
||||||
|
<img src="/img/home/curve-divider.svg" />
|
||||||
|
</div>
|
||||||
|
<div className="tw-container tw-mx-auto max-lg:tw-px-4">
|
||||||
|
<div className="tw-relative tw-flex tw-flex-col lg:tw-flex-row lg:tw-items-center tw-gap-8">
|
||||||
|
<div className="tw-flex-1">
|
||||||
|
<div className="xl:tw-w-[90%]">
|
||||||
|
{/* TODO: add translation. */}
|
||||||
|
<h2 className="tw-text-4xl xl:tw-text-5xl">
|
||||||
|
Orchestrate complex fault scenarios with <span className={styles.heroTitle}>Workflows</span>.
|
||||||
|
</h2>
|
||||||
|
<p className="lg:tw-text-lg tw-font-medium">
|
||||||
|
Real-world failures are often not isolated causes.Chaos Mesh has built-in workflows that allow you
|
||||||
|
to experiment serially or in parallel at will to build walkthroughs that fit the architecture.
|
||||||
|
</p>
|
||||||
|
<div className="tw-flex tw-gap-4 tw-mb-6">
|
||||||
|
<Card>
|
||||||
|
<h4 className="text-lg">Suspend</h4>
|
||||||
|
<p>You can also use the suspend node to simulate a temporary recovery.</p>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<h4 className="text-lg">Status Check</h4>
|
||||||
|
<p>You can also use customized status checks to inform the cluster status.</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
to="/docs/create-chaos-mesh-workflow/"
|
||||||
|
className="tw-btn tw-btn-primary tw-gap-2 hover:tw-text-white hover:-tw-translate-y-[3px]"
|
||||||
|
>
|
||||||
|
<IconPlay className="tw-w-4 tw-h-4 tw-fill-white" />
|
||||||
|
Start Creating
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx('tw-flex-[1.5] tw-rounded-2xl', styles.workflowsImg)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hero">
|
||||||
|
<div className="tw-container tw-mx-auto max-lg:tw-px-4">
|
||||||
|
<div className="tw-flex tw-flex-col lg:tw-flex-row lg:tw-items-center tw-gap-8">
|
||||||
|
<div className={clsx('tw-relative tw-flex-1 tw-flex tw-items-center tw-overflow-hidden xl:tw-h-[640px]')}>
|
||||||
|
<img className="tw-absolute tw-w-[90%]" src="/img/home/chaosd-bg.svg" />
|
||||||
|
<div className="tw-flex tw-justify-center tw-items-center xl:tw-w-[75%] lg:tw-h-[100%]">
|
||||||
|
<ChaosdFeatures />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="tw-flex-[1.5] tw-z-10">
|
||||||
|
<span className="tw-badge tw-badge-primary">Experimental</span>
|
||||||
|
{/* TODO: add translation. */}
|
||||||
|
<h2 className="tw-text-4xl xl:tw-text-5xl">
|
||||||
|
Meet <span className={styles.heroTitle}>Chaosd</span>: A Chaos Toolkit for Physical Machines.
|
||||||
|
</h2>
|
||||||
|
<p className="lg:tw-text-lg tw-font-medium">
|
||||||
|
Even if you are not using Kubernetes, you can still take advantage of the features offered by Chaos
|
||||||
|
Mesh. One of our experimental tools, Chaosd, is specifically designed to test chaos on physical
|
||||||
|
machines. Moreover, you can use{' '}
|
||||||
|
<Link className="tw-underline dark:tw-no-underline" to="/docs/simulate-physical-machine-chaos">
|
||||||
|
PhysicalMachineChaos
|
||||||
|
</Link>{' '}
|
||||||
|
in Chaos Mesh to remotely invoke Chaosd for conducting experiments on physical machines.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hero">
|
||||||
|
<div className="tw-container tw-mx-auto max-lg:tw-px-4">
|
||||||
|
<div className="tw-max-w-[800px] tw-mb-12 tw-mx-auto tw-text-center">
|
||||||
|
{/* TODO: add translation. */}
|
||||||
|
<h2 className="tw-text-4xl xl:tw-text-5xl">
|
||||||
|
Building the Whole Community <span className={styles.heroTitle}>Together</span>.
|
||||||
|
</h2>
|
||||||
|
<p className="lg:tw-text-lg tw-font-medium">
|
||||||
|
<Translate id="home.buildcommunity.1">
|
||||||
|
Join the community and talk to the maintainers and other users, your suggestions can make Chaos Mesh
|
||||||
|
even better.
|
||||||
|
</Translate>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="tw-grid lg:tw-grid-cols-3 tw-gap-8 tw-mb-12 lg:tw-w-[80%] lg:tw-mx-auto">
|
||||||
|
<Card>
|
||||||
|
<IconGithub className="tw-w-12 tw-h-12 dark:tw-fill-white" />
|
||||||
|
<p>Join our contributors in building the future of Chaos Mesh.</p>
|
||||||
|
<Link
|
||||||
|
to="https://github.com/chaos-mesh/chaos-mesh"
|
||||||
|
className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] dark:tw-text-[#a6adba] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
|
||||||
|
>
|
||||||
|
Star on GitHub
|
||||||
|
</Link>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<IconHelp className="tw-w-12 tw-h-12 dark:tw-fill-white" />
|
||||||
|
<p>Experiencing any issues? Don't hesitate to reach out to us for assistance.</p>
|
||||||
|
<div className="tw-flex tw-gap-3">
|
||||||
|
<Link
|
||||||
|
to="https://github.com/chaos-mesh/chaos-mesh/issues"
|
||||||
|
className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] dark:tw-text-[#a6adba] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
|
||||||
|
>
|
||||||
|
Issues
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="https://github.com/chaos-mesh/chaos-mesh/discussions"
|
||||||
|
className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] dark:tw-text-[#a6adba] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
|
||||||
|
>
|
||||||
|
Discussions
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<img className="tw-w-12 tw-h-12 tw-scale-150" src="/img/icons/slack.svg" alt="Slack" />
|
||||||
|
<p>Connect with other users on our Slack channel (#project-chaos-mesh).</p>
|
||||||
|
<Link
|
||||||
|
to="https://slack.cncf.io"
|
||||||
|
className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] dark:tw-text-[#a6adba] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
|
||||||
|
>
|
||||||
|
Join Slack channel
|
||||||
|
</Link>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<p className="tw-font-medium tw-text-center">
|
||||||
|
Chaos Mesh is a{' '}
|
||||||
|
<Link className="tw-underline dark:tw-no-underline" to="https://cncf.io/">
|
||||||
|
Cloud Native Computing Foundation
|
||||||
|
</Link>{' '}
|
||||||
|
incubating project.
|
||||||
|
</p>
|
||||||
|
<div className="cncf-logo tw-h-16" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -5,127 +5,56 @@
|
||||||
* and scoped locally.
|
* and scoped locally.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.heroLogoWrapper {
|
:global(.navbar) {
|
||||||
position: relative;
|
box-shadow: none;
|
||||||
left: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 192px;
|
|
||||||
height: 192px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 48px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.heroLogoWrapper {
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.heroLogo {
|
|
||||||
width: 80%;
|
|
||||||
height: 80%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.heroTitle {
|
.heroTitle {
|
||||||
padding-left: 1.5rem;
|
background: #10a6fa; /* fallback for old browsers */
|
||||||
|
background: -webkit-linear-gradient(to right, #f25c7c, #10a6fa); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#f25c7c,
|
||||||
|
#10a6fa
|
||||||
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature {
|
@media screen and (max-width: 767px) {
|
||||||
margin-bottom: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.feature {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureReverse {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureImage {
|
|
||||||
height: 256px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.featureImage {
|
|
||||||
height: 192px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureContent {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.whiteboard {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='dark'] .whiteboard {
|
|
||||||
background: #eee;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.whiteboard {
|
|
||||||
width: 80%;
|
|
||||||
margin: 3rem auto 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.whiteboardCol {
|
.whiteboardCol {
|
||||||
--ifm-col-width: calc(6 / 12 * 100%) !important;
|
--ifm-col-width: calc(1 / 12 * 100%) !important;
|
||||||
|
|
||||||
flex: 0 0 var(--ifm-col-width) !important;
|
|
||||||
max-width: var(--ifm-col-width) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 769px) and (max-width: 1023px) {
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
.whiteboardCol {
|
.whiteboardCol {
|
||||||
--ifm-col-width: calc(4 / 12 * 100%) !important;
|
--ifm-col-width: calc(2 / 12 * 100%) !important;
|
||||||
|
|
||||||
flex: 0 0 var(--ifm-col-width) !important;
|
|
||||||
max-width: var(--ifm-col-width) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logoWrapper {
|
.chaosCategory {
|
||||||
display: flex;
|
mask-image: linear-gradient(to top, transparent 1%, #fff 60%, #000 100%);
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 150px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logoWrapper img {
|
@media (min-width: 1024px) {
|
||||||
width: 75%;
|
.workflowsImg {
|
||||||
|
height: 768px;
|
||||||
|
background: url(/img/home/workflows-min.png) top left / cover no-repeat;
|
||||||
|
border: 1px solid hsl(var(--bc) / 0.15);
|
||||||
|
box-shadow: 75px 75px 75px -25px rgba(0, 0, 0, 0.3);
|
||||||
|
transform: perspective(750px) translate3d(0px, 0px, -250px) rotateX(5deg) rotateY(-5deg);
|
||||||
|
transition: 0.3s ease-in-out transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
.workflowsImg:hover {
|
||||||
.logoWrapper {
|
transform: translate3d(0px, 0px, -250px);
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cncfLogo {
|
[data-theme='dark'] .workflowsImg {
|
||||||
height: 96px;
|
background-image: url(/img/home/workflows-dark-min.png);
|
||||||
}
|
border: 1px solid hsl(var(--bc) / 0.6);
|
||||||
|
box-shadow: 75px 75px 75px -25px rgba(255, 255, 255, 0.1);
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.cncfLogo {
|
|
||||||
height: 64px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,13 @@
|
||||||
* work well for content-centric websites.
|
* work well for content-centric websites.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
/* You can override the default Infima variables here. */
|
/* You can override the default Infima variables here. */
|
||||||
:root {
|
:root {
|
||||||
|
--ifm-font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,
|
||||||
|
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||||
|
|
||||||
--ifm-color-primary: #172d72;
|
--ifm-color-primary: #172d72;
|
||||||
--ifm-color-primary-dark: #152967;
|
--ifm-color-primary-dark: #152967;
|
||||||
--ifm-color-primary-darker: #142661;
|
--ifm-color-primary-darker: #142661;
|
||||||
|
|
@ -14,8 +19,6 @@
|
||||||
--ifm-color-primary-light: #19327d;
|
--ifm-color-primary-light: #19327d;
|
||||||
--ifm-color-primary-lighter: #1a3483;
|
--ifm-color-primary-lighter: #1a3483;
|
||||||
--ifm-color-primary-lightest: #1e3b94;
|
--ifm-color-primary-lightest: #1e3b94;
|
||||||
|
|
||||||
--hero-border-color: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme='dark'] {
|
:root[data-theme='dark'] {
|
||||||
|
|
@ -26,19 +29,6 @@
|
||||||
--ifm-color-primary-light: #2ab0fb;
|
--ifm-color-primary-light: #2ab0fb;
|
||||||
--ifm-color-primary-lighter: #37b5fb;
|
--ifm-color-primary-lighter: #37b5fb;
|
||||||
--ifm-color-primary-lightest: #5ec3fc;
|
--ifm-color-primary-lightest: #5ec3fc;
|
||||||
|
|
||||||
--hero-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-divider {
|
|
||||||
border-bottom: 1px solid var(--hero-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.hero {
|
|
||||||
padding-top: 2em;
|
|
||||||
padding-bottom: 2em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* https://github.com/facebook/jest/blob/main/website/src/css/docusaurusTheme.css */
|
/* https://github.com/facebook/jest/blob/main/website/src/css/docusaurusTheme.css */
|
||||||
|
|
@ -55,7 +45,7 @@
|
||||||
no-repeat;
|
no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] .header-github-link:before {
|
[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")
|
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;
|
no-repeat;
|
||||||
}
|
}
|
||||||
|
|
@ -64,27 +54,41 @@ html[data-theme='dark'] .header-github-link:before {
|
||||||
background: center no-repeat url('/img/logos/cncf-color.svg');
|
background: center no-repeat url('/img/logos/cncf-color.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] .cncf-logo {
|
[data-theme='dark'] .cncf-logo {
|
||||||
background: center no-repeat url('/img/logos/cncf-white.svg');
|
background: center no-repeat url('/img/logos/cncf-white.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.youtube-video-wrapper {
|
.caption {
|
||||||
position: relative;
|
color: var(--ifm-color-emphasis-600);
|
||||||
height: 0;
|
|
||||||
padding-bottom: 56.25%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.youtube-video-wrapper iframe {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caption-center {
|
|
||||||
color: grey;
|
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Integrate tailwindcss. */
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
a.tw-btn:hover {
|
||||||
|
@apply tw-no-underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .navbar__item {
|
||||||
|
@apply tw-px-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch.DocSearch-Button {
|
||||||
|
@apply md:tw-w-[200px] tw-rounded-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
@apply tw-py-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codegrid-block.language-yaml {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codegrid-block.language-yaml pre {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
|
export const useDidMountEffect = (func, deps) => {
|
||||||
|
const didMount = useRef(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (didMount.current) {
|
||||||
|
func()
|
||||||
|
} else {
|
||||||
|
didMount.current = true
|
||||||
|
}
|
||||||
|
}, deps)
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 57 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 105 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 33 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 124 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 2400 800" opacity="1"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad"><stop stop-color="#f25c7c" stop-opacity="1" offset="0%"></stop><stop stop-color="#10a6fa" stop-opacity="1" offset="100%"></stop></linearGradient></defs><g stroke-width="1" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round"><path d="M 0 559 Q 600 270 1200 400 Q 1800 530 2400 559" opacity="0.05"></path><path d="M 0 516 Q 600 270 1200 400 Q 1800 530 2400 516" opacity="0.13"></path><path d="M 0 473 Q 600 270 1200 400 Q 1800 530 2400 473" opacity="0.21"></path><path d="M 0 430 Q 600 270 1200 400 Q 1800 530 2400 430" opacity="0.29"></path><path d="M 0 387 Q 600 270 1200 400 Q 1800 530 2400 387" opacity="0.37"></path><path d="M 0 344 Q 600 270 1200 400 Q 1800 530 2400 344" opacity="0.45"></path><path d="M 0 301 Q 600 270 1200 400 Q 1800 530 2400 301" opacity="0.53"></path><path d="M 0 258 Q 600 270 1200 400 Q 1800 530 2400 258" opacity="0.60"></path><path d="M 0 215 Q 600 270 1200 400 Q 1800 530 2400 215" opacity="0.68"></path><path d="M 0 172 Q 600 270 1200 400 Q 1800 530 2400 172" opacity="0.76"></path><path d="M 0 129 Q 600 270 1200 400 Q 1800 530 2400 129" opacity="0.84"></path><path d="M 0 86 Q 600 270 1200 400 Q 1800 530 2400 86" opacity="0.92"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1,63 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 507.908 507.908" style="enable-background:new 0 0 507.908 507.908;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M505.4,297.954c-0.1-0.2-82.4-217.9-82.7-218.4c-7.3-14-21.7-22.7-37.5-22.7H122.8c-15.8,0-30.2,8.7-37.5,22.7
|
||||||
|
c-0.3,0.5-82.7,218.2-82.7,218.4c-1.6,4.5-2.6,9.4-2.6,14.4v96.4c0,23.3,19,42.3,42.3,42.3h423.3c23.3,0,42.3-19,42.3-42.3v-96.4
|
||||||
|
C508,307.254,507.1,302.454,505.4,297.954z M68.8,202.454h40.9c7.8,0,14.1-6.3,14.1-14.1c0-7.8-6.3-14.1-14.1-14.1H79.5l10.7-28.3
|
||||||
|
h61.9c7.8,0,14.1-6.3,14.1-14.1c0-7.8-6.3-14.1-14.1-14.1h-51.2l9.7-25.8c2.5-4.3,7.1-6.9,12.2-6.9h262.5c5,0,9.6,2.6,12.2,7
|
||||||
|
l67.3,178H43.3L68.8,202.454z M465.7,422.854H42.3c-7.8,0-14.1-6.3-14.1-14.1v-96.4c0-7.8,6.3-14.1,14.1-14.1h423.3
|
||||||
|
c7.8,0,14.1,6.3,14.1,14.1v96.4h0.1C479.8,416.554,473.5,422.854,465.7,422.854z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M277,346.454H67.3c-7.8,0-14.1,6.3-14.1,14.1s6.3,14.1,14.1,14.1H277c7.8,0,14.1-6.3,14.1-14.1
|
||||||
|
C291.1,352.754,284.8,346.454,277,346.454z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M440.7,346.454h-21.6c-7.8,0-14.1,6.3-14.1,14.1s6.3,14.1,14.1,14.1h21.6c7.8,0,14.1-6.3,14.1-14.1
|
||||||
|
C454.8,352.754,448.5,346.454,440.7,346.454z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M356,346.454h-21.6c-7.8,0-14.1,6.3-14.1,14.1s6.3,14.1,14.1,14.1H356c7.8,0,14.1-6.3,14.1-14.1
|
||||||
|
C370.1,352.754,363.8,346.454,356,346.454z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/></svg>
|
||||||
|
After Width: | Height: | Size: 876 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64zm-6 304a20 20 0 1120-20 20 20 0 01-20 20zm33.44-102C267.23 276.88 265 286.85 265 296a14 14 0 01-28 0c0-21.91 10.08-39.33 30.82-53.26C287.1 229.8 298 221.6 298 203.57c0-12.26-7-21.57-21.49-28.46-3.41-1.62-11-3.2-20.34-3.09-11.72.15-20.82 2.95-27.83 8.59C215.12 191.25 214 202.83 214 203a14 14 0 11-28-1.35c.11-2.43 1.8-24.32 24.77-42.8 11.91-9.58 27.06-14.56 45-14.78 12.7-.15 24.63 2 32.72 5.82C312.7 161.34 326 180.43 326 203.57c0 33.83-22.61 49.02-42.56 62.43z"/></svg>
|
||||||
|
After Width: | Height: | Size: 631 B |
|
|
@ -0,0 +1,77 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 305.001 305.001" style="enable-background:new 0 0 305.001 305.001;" xml:space="preserve">
|
||||||
|
<g id="XMLID_7_">
|
||||||
|
<path id="XMLID_8_" d="M150.99,56.513c-14.093,9.912-30.066,21.147-38.624,39.734c-14.865,32.426,30.418,67.798,32.353,69.288
|
||||||
|
c0.45,0.347,0.988,0.519,1.525,0.519c0.57,0,1.141-0.195,1.605-0.583c0.899-0.752,1.154-2.029,0.614-3.069
|
||||||
|
c-0.164-0.316-16.418-31.888-15.814-54.539c0.214-7.888,11.254-16.837,22.942-26.312c10.705-8.678,22.839-18.514,29.939-30.02
|
||||||
|
c15.586-25.327-1.737-50.231-1.914-50.479c-0.688-0.966-1.958-1.317-3.044-0.84c-1.085,0.478-1.686,1.652-1.438,2.811
|
||||||
|
c0.035,0.164,3.404,16.633-5.97,33.6C169.301,43.634,160.816,49.603,150.99,56.513z"/>
|
||||||
|
<path id="XMLID_9_" d="M210.365,67.682c0.994-0.749,1.286-2.115,0.684-3.205c-0.602-1.09-1.913-1.571-3.077-1.129
|
||||||
|
c-2.394,0.91-58.627,22.585-58.627,48.776c0,18.053,7.712,27.591,13.343,34.556c2.209,2.731,4.116,5.09,4.744,7.104
|
||||||
|
c1.769,5.804-2.422,16.294-4.184,19.846c-0.508,1.022-0.259,2.259,0.605,3.005c0.467,0.403,1.05,0.607,1.634,0.607
|
||||||
|
c0.497,0,0.996-0.148,1.427-0.448c0.967-0.673,23.63-16.696,19.565-36.001c-1.514-7.337-5.12-12.699-8.302-17.43
|
||||||
|
c-4.929-7.329-8.489-12.624-3.088-22.403C181.419,89.556,210.076,67.899,210.365,67.682z"/>
|
||||||
|
<path id="XMLID_10_" d="M63.99,177.659c-0.964,2.885-0.509,5.75,1.315,8.283c6.096,8.462,27.688,13.123,60.802,13.123
|
||||||
|
c0.002,0,0.003,0,0.004,0c4.487,0,9.224-0.088,14.076-0.262c52.943-1.896,72.58-18.389,73.39-19.09
|
||||||
|
c0.883-0.764,1.119-2.037,0.57-3.067c-0.549-1.029-1.733-1.546-2.864-1.235c-18.645,5.091-53.463,6.898-77.613,6.898
|
||||||
|
c-27.023,0-40.785-1.946-44.154-3.383c1.729-2.374,12.392-6.613,25.605-9.212c1.263-0.248,2.131-1.414,2.006-2.695
|
||||||
|
c-0.125-1.281-1.201-2.258-2.488-2.258C106.893,164.762,68.05,165.384,63.99,177.659z"/>
|
||||||
|
<path id="XMLID_11_" d="M241.148,160.673c-10.92,0-21.275,5.472-21.711,5.705c-1.01,0.541-1.522,1.699-1.245,2.811
|
||||||
|
c0.278,1.111,1.277,1.892,2.423,1.893c0.232,0.001,23.293,0.189,25.382,13.365c1.85,11.367-21.82,29.785-31.097,35.923
|
||||||
|
c-1.002,0.663-1.391,1.945-0.926,3.052c0.395,0.943,1.314,1.533,2.304,1.533c0.173,0,0.348-0.018,0.522-0.056
|
||||||
|
c2.202-0.47,53.855-11.852,48.394-41.927C261.862,164.541,250.278,160.673,241.148,160.673z"/>
|
||||||
|
<path id="XMLID_12_" d="M205.725,216.69c0.18-0.964-0.221-1.944-1.023-2.506l-12.385-8.675c-0.604-0.423-1.367-0.556-2.076-0.368
|
||||||
|
c-0.129,0.034-13.081,3.438-31.885,5.526c-7.463,0.837-15.822,1.279-24.175,1.279c-18.799,0-31.091-2.209-32.881-3.829
|
||||||
|
c-0.237-0.455-0.162-0.662-0.12-0.777c0.325-0.905,2.068-1.98,3.192-2.405c1.241-0.459,1.91-1.807,1.524-3.073
|
||||||
|
c-0.385-1.266-1.69-2.012-2.978-1.702c-12.424,2.998-18.499,7.191-18.057,12.461c0.785,9.343,22.428,14.139,40.725,15.408
|
||||||
|
c2.631,0.18,5.477,0.272,8.456,0.272c0.002,0,0.003,0,0.005,0c30.425,0,69.429-9.546,69.819-9.643
|
||||||
|
C204.818,218.423,205.544,217.654,205.725,216.69z"/>
|
||||||
|
<path id="XMLID_13_" d="M112.351,236.745c0.938-0.611,1.354-1.77,1.021-2.838c-0.332-1.068-1.331-1.769-2.453-1.755
|
||||||
|
c-1.665,0.044-16.292,0.704-17.316,10.017c-0.31,2.783,0.487,5.325,2.37,7.556c5.252,6.224,19.428,9.923,43.332,11.31
|
||||||
|
c2.828,0.169,5.7,0.254,8.539,0.254c30.39,0,50.857-9.515,51.714-9.92c0.831-0.393,1.379-1.209,1.428-2.127
|
||||||
|
c0.049-0.917-0.409-1.788-1.193-2.267l-15.652-9.555c-0.543-0.331-1.193-0.441-1.813-0.314c-0.099,0.021-10.037,2.082-25.035,4.119
|
||||||
|
c-2.838,0.385-6.392,0.581-10.562,0.581c-14.982,0-31.646-2.448-34.842-4.05C111.843,237.455,111.902,237.075,112.351,236.745z"/>
|
||||||
|
<path id="XMLID_14_" d="M133.681,290.018c69.61-0.059,106.971-12.438,114.168-20.228c2.548-2.757,2.823-5.366,2.606-7.07
|
||||||
|
c-0.535-4.194-4.354-6.761-4.788-7.04c-1.045-0.672-2.447-0.496-3.262,0.444c-0.813,0.941-0.832,2.314-0.016,3.253
|
||||||
|
c0.439,0.565,0.693,1.51-0.591,2.795c-2.877,2.687-31.897,10.844-80.215,13.294c-6.619,0.345-13.561,0.519-20.633,0.52
|
||||||
|
c-43.262,0-74.923-5.925-79.079-9.379c1.603-2.301,12.801-5.979,24.711-8.058c1.342-0.234,2.249-1.499,2.041-2.845
|
||||||
|
c-0.208-1.346-1.449-2.273-2.805-2.096c-0.336,0.045-1.475,0.115-2.796,0.195c-19.651,1.2-42.36,3.875-43.545,13.999
|
||||||
|
c-0.36,3.086,0.557,5.886,2.726,8.324c5.307,5.963,20.562,13.891,91.475,13.891C133.68,290.018,133.68,290.018,133.681,290.018z"/>
|
||||||
|
<path id="XMLID_15_" d="M261.522,271.985c-0.984-0.455-2.146-0.225-2.881,0.567c-0.103,0.11-10.568,11.054-42.035,17.48
|
||||||
|
c-12.047,2.414-34.66,3.638-67.211,3.638c-32.612,0-63.643-1.283-63.953-1.296c-1.296-0.063-2.405,0.879-2.581,2.155
|
||||||
|
c-0.177,1.276,0.645,2.477,1.897,2.775c0.323,0.077,32.844,7.696,77.31,7.696c21.327,0,42.08-1.733,61.684-5.151
|
||||||
|
c36.553-6.408,39.112-24.533,39.203-25.301C263.082,273.474,262.504,272.44,261.522,271.985z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M64 480H48a32 32 0 01-32-32V112a32 32 0 0132-32h16a32 32 0 0132 32v336a32 32 0 01-32 32zM240 176a32 32 0 00-32-32h-64a32 32 0 00-32 32v28a4 4 0 004 4h120a4 4 0 004-4zM112 448a32 32 0 0032 32h64a32 32 0 0032-32v-30a2 2 0 00-2-2H114a2 2 0 00-2 2z"/><rect x="112" y="240" width="128" height="144" rx="2" ry="2"/><path d="M320 480h-32a32 32 0 01-32-32V64a32 32 0 0132-32h32a32 32 0 0132 32v384a32 32 0 01-32 32zM495.89 445.45l-32.23-340c-1.48-15.65-16.94-27-34.53-25.31l-31.85 3c-17.59 1.67-30.65 15.71-29.17 31.36l32.23 340c1.48 15.65 16.94 27 34.53 25.31l31.85-3c17.59-1.67 30.65-15.71 29.17-31.36z"/></svg>
|
||||||
|
After Width: | Height: | Size: 692 B |
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!--
|
||||||
|
~ Copyright 2021 Chaos Mesh Authors.
|
||||||
|
~
|
||||||
|
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
~ you may not use this file except in compliance with the License.
|
||||||
|
~ You may obtain a copy of the License at
|
||||||
|
~
|
||||||
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
~
|
||||||
|
~ Unless required by applicable law or agreed to in writing, software
|
||||||
|
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
~ See the License for the specific language governing permissions and
|
||||||
|
~ limitations under the License.
|
||||||
|
~
|
||||||
|
-->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 320.531 320.531" style="enable-background:new 0 0 320.531 320.531;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M149.435,119.164V63.57c13.007-3.342,22.648-15.168,22.648-29.204c0-16.624-13.524-30.148-30.148-30.148
|
||||||
|
c-16.623,0-30.147,13.524-30.147,30.148c0,14.036,9.641,25.861,22.647,29.203v55.594c-15.775,2.374-29.169,12.115-36.556,25.597
|
||||||
|
l-32.99-25.646c0.807-2.271,1.25-4.714,1.25-7.258c0-11.99-9.755-21.745-21.745-21.745s-21.745,9.755-21.745,21.745
|
||||||
|
s9.755,21.745,21.745,21.745c3.972,0,7.695-1.076,10.903-2.943l37.29,28.989c-0.55,2.971-0.852,6.027-0.852,9.155
|
||||||
|
c0,11.14,3.652,21.44,9.815,29.777l-42.163,42.163c-2.929,2.929-2.929,7.678,0,10.606c1.465,1.464,3.385,2.197,5.304,2.197
|
||||||
|
s3.839-0.732,5.304-2.197l42.163-42.163c6.429,4.753,14.026,8.012,22.277,9.254v55.718c-8.306,3.062-14.245,11.056-14.245,20.411
|
||||||
|
c0,11.99,9.755,21.745,21.745,21.745s21.745-9.755,21.745-21.745c0-9.356-5.939-17.35-14.245-20.411v-55.717
|
||||||
|
c24.136-3.631,42.7-24.506,42.7-49.637C192.135,143.67,173.57,122.795,149.435,119.164z M44.394,118.602
|
||||||
|
c-3.72,0-6.745-3.026-6.745-6.745s3.025-6.745,6.745-6.745s6.745,3.026,6.745,6.745S48.113,118.602,44.394,118.602z
|
||||||
|
M126.787,34.366c0-8.353,6.795-15.148,15.147-15.148s15.148,6.795,15.148,15.148c0,8.353-6.796,15.148-15.148,15.148
|
||||||
|
S126.787,42.719,126.787,34.366z M141.935,301.313c-3.72,0-6.745-3.026-6.745-6.745c0-3.255,2.317-5.979,5.389-6.608
|
||||||
|
c0.44,0.081,0.892,0.129,1.356,0.129s0.916-0.048,1.356-0.129c3.072,0.629,5.389,3.353,5.389,6.608
|
||||||
|
C148.68,298.287,145.654,301.313,141.935,301.313z M141.935,204.001c-19.409,0-35.199-15.791-35.199-35.2
|
||||||
|
c0-3.425,0.501-6.734,1.417-9.867c0.049-0.155,0.095-0.309,0.133-0.466c4.425-14.382,17.834-24.867,33.649-24.867
|
||||||
|
c19.409,0,35.2,15.791,35.2,35.2C177.135,188.211,161.344,204.001,141.935,204.001z"/>
|
||||||
|
<path d="M290.384,95.953c-16.624,0-30.148,13.524-30.148,30.148c0,0.775,0.039,1.54,0.097,2.3l-54.238,18.493
|
||||||
|
c-3.921,1.336-6.016,5.599-4.679,9.519c1.063,3.119,3.977,5.082,7.098,5.082c0.803,0,1.619-0.13,2.421-0.403l54.236-18.492
|
||||||
|
c5.392,8.212,14.677,13.65,25.214,13.65c16.623,0,30.147-13.524,30.147-30.148C320.531,109.478,307.007,95.953,290.384,95.953z
|
||||||
|
M290.384,141.25c-8.353,0-15.148-6.795-15.148-15.148c0-8.353,6.796-15.148,15.148-15.148s15.147,6.795,15.147,15.148
|
||||||
|
C305.531,134.454,298.736,141.25,290.384,141.25z"/>
|
||||||
|
<path d="M30.148,250.44C13.524,250.44,0,263.965,0,280.588c0,16.624,13.524,30.148,30.148,30.148
|
||||||
|
c16.623,0,30.147-13.524,30.147-30.148C60.296,263.965,46.771,250.44,30.148,250.44z M30.148,295.737
|
||||||
|
c-8.353,0-15.148-6.795-15.148-15.148c0-8.353,6.796-15.148,15.148-15.148s15.147,6.795,15.147,15.148
|
||||||
|
C45.296,288.941,38.501,295.737,30.148,295.737z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Logo Octocat</title><path d="M172.86 290.12c-9.75 0-18.11 4.56-24.86 13.87s-10.07 20.58-10.07 34 3.43 24.91 10.07 34.12S163 386 172.86 386c9.1 0 17-4.66 23.68-13.87s10.07-20.58 10.07-34.12-3.43-24.81-10.07-34-14.54-13.89-23.68-13.89zM340.32 290.12c-9.64 0-18.11 4.56-24.86 13.87s-10.07 20.58-10.07 34 3.43 24.91 10.07 34.12S330.57 386 340.32 386c9.11 0 17-4.66 23.79-13.87s10.07-20.58 10.07-34.12-3.43-24.81-10.07-34-14.57-13.89-23.79-13.89z"/><path d="M459.36 165c-.11 0 2.89-15.49.32-42.47-2.36-27-8-51.78-17.25-74.53 0 0-4.72.87-13.72 3.14S405 58 384.89 67.18c-19.82 9.2-40.71 21.44-62.46 36.29-14.79-4.23-36.86-6.39-66.43-6.39-28.18 0-50.25 2.16-66.43 6.39Q117.9 53.25 69.46 48q-13.81 34.13-17.14 74.75c-2.57 27 .43 42.58.43 42.58C26.71 193.82 16 234.88 16 268.78c0 26.22.75 49.94 6.54 71 6 20.91 13.6 38 22.6 51.14A147.49 147.49 0 0079 425.43c13.39 10.08 25.71 17.34 36.86 21.89 11.25 4.76 24 8.23 38.57 10.72a279.19 279.19 0 0032.68 4.34s30 1.62 69 1.62 68.89-1.62 68.89-1.62a285.25 285.25 0 0032.68-4.38 178.91 178.91 0 0038.46-10.72c11.15-4.66 23.47-11.81 37-21.89a145 145 0 0033.75-34.55c9-13.11 16.6-30.23 22.6-51.14s6.51-44.81 6.51-71.03c0-32.82-10.71-74.42-36.64-103.67zm-70.07 253.07C359.39 432.26 315.46 438 257.18 438h-2.25c-58.29 0-102.22-5.63-131.57-19.93s-44.25-43.45-44.25-87.43c0-26.32 9.21-47.66 27.32-64 7.93-7 17.57-11.92 29.57-14.84s22.93-3 33.21-2.71c10.08.43 24.22 2.38 42.11 3.79s31.39 3.25 44.79 3.25c12.53 0 29.14-2.17 55.82-4.33s46.61-3.25 59.46-1.09c13.18 2.17 24.65 6.72 34.4 15.93q28.44 25.67 28.5 64c-.11 43.98-15.22 73.24-45 87.43z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z"/></svg>
|
||||||
|
After Width: | Height: | Size: 286 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg id="Layer_1" enable-background="new 0 0 512.268 512.268" viewBox="0 0 512.268 512.268" xmlns="http://www.w3.org/2000/svg"><g><path d="m187.026 150.534 45.121 45.252c2.814 2.822 6.636 4.409 10.622 4.409s7.808-1.586 10.622-4.409l84.407-84.654c8.397-8.421 19.558-13.059 31.427-13.059s23.03 4.638 31.427 13.06c17.363 17.413 17.363 45.747 0 63.16l-84.407 84.654c-5.837 5.854-5.837 15.328 0 21.183l45.121 45.252c2.814 2.822 6.636 4.409 10.622 4.409s7.808-1.586 10.622-4.409l88.473-88.73c53.888-54.046 53.888-141.984 0-196.03-26.12-26.196-60.85-40.622-97.792-40.622-.002 0 .001 0 0 0-36.941 0-71.674 14.428-97.792 40.621l-88.473 88.73c-5.837 5.855-5.837 15.328 0 21.183zm109.717-88.731c20.449-20.509 47.634-31.803 76.548-31.803 28.913 0 56.098 11.294 76.547 31.803 42.242 42.366 42.242 111.3 0 153.665l-77.851 78.078-23.938-24.008 73.847-74.063c29.009-29.093 29.009-76.432 0-105.526-14.067-14.107-32.772-21.876-52.671-21.876-19.898 0-38.604 7.769-52.671 21.876l-73.785 74.001-23.938-24.008z"/><path d="m322.183 364.802-45.121-45.252c-2.814-2.822-6.636-4.409-10.622-4.409s-7.808 1.586-10.622 4.409l-81.348 81.585c-8.396 8.421-19.557 13.059-31.426 13.059s-23.03-4.638-31.427-13.059c-17.363-17.414-17.363-45.748 0-63.161l81.348-81.585c5.837-5.854 5.837-15.328 0-21.183l-45.121-45.252c-2.814-2.822-6.636-4.409-10.622-4.409s-7.808 1.586-10.622 4.409l-85.413 85.662c-53.889 54.046-53.889 141.984 0 196.03 26.119 26.195 60.849 40.621 97.792 40.621s71.673-14.426 97.792-40.621l85.413-85.662c5.836-5.854 5.836-15.328-.001-21.182zm-106.658 85.662c-20.449 20.509-47.634 31.804-76.547 31.804-28.914 0-56.099-11.295-76.548-31.804-42.243-42.366-42.243-111.299 0-153.665l74.791-75.009 23.938 24.008-70.788 70.994c-29.009 29.093-29.009 76.432 0 105.526 14.067 14.107 32.772 21.876 52.671 21.876s38.604-7.77 52.67-21.876l70.726-70.933 23.938 24.008z"/><path d="m15.081 169.598 69.464 17.417c19.92 3.874 25.582-23.994 7.296-29.1l-69.464-17.417c-20.278-3.806-25.329 23.976-7.296 29.1z"/><path d="m119.829 140.675c15.151 13.779 34.116-7.528 21.244-21.183l-53.835-53.992c-15.203-13.632-34.083 7.372-21.244 21.183z"/><path d="m158.154 91.331c6.035 19.623 32.992 11.216 29.109-7.256l-17.366-69.667c-6.183-19.683-33.075-11.067-29.109 7.256z"/><path d="m497.187 342.669-69.464-17.417c-8.037-2.017-16.183 2.866-18.198 10.902-2.015 8.035 2.866 16.183 10.902 18.198l69.464 17.417c19.92 3.874 25.582-23.994 7.296-29.1z"/><path d="m392.439 371.592c-15.203-13.632-34.083 7.372-21.244 21.183l53.835 53.992c15.151 13.779 34.116-7.528 21.244-21.183z"/><path d="m354.114 420.936c-6.184-19.683-33.075-11.067-29.109 7.256l17.366 69.667c6.035 19.623 32.992 11.216 29.109-7.256z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#E01E5A;}
|
||||||
|
.st1{fill:#36C5F0;}
|
||||||
|
.st2{fill:#2EB67D;}
|
||||||
|
.st3{fill:#ECB22E;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
|
||||||
|
<path class="st0" d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9
|
||||||
|
s-12.9-5.8-12.9-12.9V151.2z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st1" d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
|
||||||
|
<path class="st1" d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9
|
||||||
|
s5.8-12.9,12.9-12.9H118.8z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st2" d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
|
||||||
|
<path class="st2" d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
|
||||||
|
c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st3" d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
|
||||||
|
<path class="st3" d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
|
||||||
|
c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!--
|
||||||
|
~ Copyright 2021 Chaos Mesh Authors.
|
||||||
|
~
|
||||||
|
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
~ you may not use this file except in compliance with the License.
|
||||||
|
~ You may obtain a copy of the License at
|
||||||
|
~
|
||||||
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
~
|
||||||
|
~ Unless required by applicable law or agreed to in writing, software
|
||||||
|
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
~ See the License for the specific language governing permissions and
|
||||||
|
~ limitations under the License.
|
||||||
|
~
|
||||||
|
-->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 469.333 469.333" style="enable-background:new 0 0 469.333 469.333;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M458.667,181.333c5.896,0,10.667-4.771,10.667-10.667S464.563,160,458.667,160h-32v-42.667h32
|
||||||
|
c5.896,0,10.667-4.771,10.667-10.667S464.563,96,458.667,96h-32V85.333c0-23.531-19.135-42.667-42.667-42.667h-10.667v-32
|
||||||
|
C373.333,4.771,368.563,0,362.667,0C356.771,0,352,4.771,352,10.667v32h-42.667v-32C309.333,4.771,304.562,0,298.667,0
|
||||||
|
S288,4.771,288,10.667v32h-42.667v-32C245.333,4.771,240.562,0,234.667,0S224,4.771,224,10.667v32h-42.667v-32
|
||||||
|
C181.333,4.771,176.562,0,170.667,0S160,4.771,160,10.667v32h-42.667v-32C117.333,4.771,112.562,0,106.667,0S96,4.771,96,10.667
|
||||||
|
v32H85.333c-23.531,0-42.667,19.135-42.667,42.667V96h-32C4.771,96,0,100.771,0,106.667s4.771,10.667,10.667,10.667h32V160h-32
|
||||||
|
C4.771,160,0,164.771,0,170.667s4.771,10.667,10.667,10.667h32V224h-32C4.771,224,0,228.771,0,234.667
|
||||||
|
s4.771,10.667,10.667,10.667h32V288h-32C4.771,288,0,292.771,0,298.667s4.771,10.667,10.667,10.667h32V352h-32
|
||||||
|
C4.771,352,0,356.771,0,362.667c0,5.896,4.771,10.667,10.667,10.667h32V384c0,23.531,19.135,42.667,42.667,42.667H96v32
|
||||||
|
c0,5.896,4.771,10.667,10.667,10.667s10.667-4.771,10.667-10.667v-32H160v32c0,5.896,4.771,10.667,10.667,10.667
|
||||||
|
s10.667-4.771,10.667-10.667v-32H224v32c0,5.896,4.771,10.667,10.667,10.667s10.667-4.771,10.667-10.667v-32H288v32
|
||||||
|
c0,5.896,4.771,10.667,10.667,10.667s10.667-4.771,10.667-10.667v-32H352v32c0,5.896,4.771,10.667,10.667,10.667
|
||||||
|
c5.896,0,10.667-4.771,10.667-10.667v-32H384c23.531,0,42.667-19.135,42.667-42.667v-10.667h32
|
||||||
|
c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667h-32v-42.667h32c5.896,0,10.667-4.771,10.667-10.667
|
||||||
|
S464.563,288,458.667,288h-32v-42.667h32c5.896,0,10.667-4.771,10.667-10.667S464.563,224,458.667,224h-32v-42.667H458.667z
|
||||||
|
M405.333,384c0,11.76-9.573,21.333-21.333,21.333H85.333C73.573,405.333,64,395.76,64,384V85.333C64,73.573,73.573,64,85.333,64
|
||||||
|
H384c11.76,0,21.333,9.573,21.333,21.333V384z"/>
|
||||||
|
<path d="M373.333,85.333H96c-5.896,0-10.667,4.771-10.667,10.667v277.333C85.333,379.229,90.104,384,96,384h277.333
|
||||||
|
c5.896,0,10.667-4.771,10.667-10.667V96C384,90.104,379.229,85.333,373.333,85.333z M362.667,362.667h-256v-256h256V362.667z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!--
|
||||||
|
~ Copyright 2021 Chaos Mesh Authors.
|
||||||
|
~
|
||||||
|
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
~ you may not use this file except in compliance with the License.
|
||||||
|
~ You may obtain a copy of the License at
|
||||||
|
~
|
||||||
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
~
|
||||||
|
~ Unless required by applicable law or agreed to in writing, software
|
||||||
|
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
~ See the License for the specific language governing permissions and
|
||||||
|
~ limitations under the License.
|
||||||
|
~
|
||||||
|
-->
|
||||||
|
<svg id="Capa_1" viewBox="0 0 551.13 551.13" xmlns="http://www.w3.org/2000/svg"><path d="m275.565 0c-151.944 0-275.565 123.621-275.565 275.565s123.621 275.565 275.565 275.565 275.565-123.621 275.565-275.565-123.621-275.565-275.565-275.565zm0 516.685c-132.955 0-241.119-108.164-241.119-241.119s108.164-241.12 241.119-241.12 241.12 108.164 241.12 241.119-108.165 241.12-241.12 241.12z"/><path d="m292.788 137.783h-34.446v144.914l91.16 91.16 24.354-24.354-81.068-81.068z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,28 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./src/**/*.{js,jsx}'],
|
||||||
|
prefix: 'tw-',
|
||||||
|
darkMode: ['class', '[data-theme="dark"]'],
|
||||||
|
corePlugins: {
|
||||||
|
preflight: false,
|
||||||
|
},
|
||||||
|
plugins: [require('daisyui')],
|
||||||
|
daisyui: {
|
||||||
|
base: false,
|
||||||
|
themes: [
|
||||||
|
{
|
||||||
|
light: {
|
||||||
|
...require('daisyui/src/theming/themes')['[data-theme=light]'],
|
||||||
|
primary: '#10a6fa',
|
||||||
|
'primary-content': '#ffffff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dark: {
|
||||||
|
...require('daisyui/src/theming/themes')['[data-theme=dark]'],
|
||||||
|
primary: '#10a6fa',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue