Skip to content

Commit 2c8a136

Browse files
thomaspoignantkodiakhq[bot]
thomaspoignant
and
kodiakhq[bot]
committed
docs(home): Add a better using list bar (#3101)
* Add a better using bar Signed-off-by: Thomas Poignant <[email protected]> * fix Signed-off-by: Thomas Poignant <[email protected]> * use darkmode by default Signed-off-by: Thomas Poignant <[email protected]> --------- Signed-off-by: Thomas Poignant <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 60d39dc commit 2c8a136

28 files changed

+286
-335
lines changed

‎website/docs/sdk/server_providers/openfeature_javascript.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ This code block shows you how you can create a client that you can use in your a
4141
<TabItem value="javascript" label="JavaScript">
4242

4343
```javascript
44-
const {OpenFeature} = require("@openfeature/server-sdk");
44+
const {Sdk} = require("@openfeature/server-sdk");
4545
const {GoFeatureFlagProvider} = require("@openfeature/go-feature-flag-provider");
4646

4747

‎website/docusaurus.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -509,6 +509,9 @@ const config = {
509509
'ruby',
510510
],
511511
},
512+
colorMode: {
513+
defaultMode: 'dark',
514+
},
512515
}),
513516
};
514517

‎website/src/components/home/benefit/index.js

+12-25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import styles from './styles.module.css';
3-
import clsx from 'clsx';
43
import PropTypes from 'prop-types';
54

65
BenefitCard.propTypes = {
@@ -11,37 +10,25 @@ BenefitCard.propTypes = {
1110

1211
function BenefitCard({img, title, description}) {
1312
return (
14-
<div className="col-1-5 mobile-col-1-1">
15-
<article className={styles.benefitsPostItem}>
16-
<div className={styles.benefitsPostItemRow}>
17-
<img src={img} alt="post-thumb" />
18-
</div>
19-
<div className={styles.benefitsPostItemRow}>
20-
<h2>{title}</h2>
21-
<p>{description}</p>
22-
</div>
23-
</article>
13+
<div className="w-fit bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
14+
<img className="rounded-t-lg p-3" src={img} alt={title} />
15+
<div className="p-5">
16+
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
17+
{title}
18+
</h5>
19+
<p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
20+
{description}
21+
</p>
22+
</div>
2423
</div>
2524
);
2625
}
2726

2827
export function Benefit() {
2928
return (
3029
<section className={styles.benefits}>
31-
<div className="container">
32-
<div className="row">
33-
<div className={clsx('col-1-1', styles.title)}>
34-
<div>
35-
<span className="goffMainTitle">Why use feature flags?</span>
36-
<br />
37-
<p>
38-
Feature flags is a modern software engineering technique that
39-
configure select functionality during runtime, without deploying
40-
new code.
41-
</p>
42-
</div>
43-
</div>
44-
</div>
30+
<div className={'text-center mb-5'}>
31+
<span className="goffMainTitle">The Benefits of Feature Flags</span>
4532
</div>
4633
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-2 px-3">
4734
<BenefitCard

‎website/src/components/home/benefit/styles.module.css

+20-35
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,32 @@
11
.benefits {
2-
margin: 1rem 2.5rem 1rem 2.5rem;
3-
background: var(--goff-benif-bg);
4-
padding: 70px 0 120px;
5-
border-radius: 1.5rem;
2+
margin: 1rem 2.5rem 1rem 2.5rem;
3+
background: var(--goff-benif-bg);
4+
padding: 70px 0 120px;
5+
border-radius: 1.5rem;
66
}
77

88
.benefitsPostItem {
9-
background-color: var(--goff-benefits-postitem-bg);
10-
box-shadow: 0 20px 25px rgba(67, 103, 90, 0.1);
11-
border-radius: 10px;
12-
margin-bottom: 50px;
13-
padding: 15px 15px 20px;
14-
transition: 0.3s ease;
15-
min-height: 30rem;
9+
background-color: var(--goff-benefits-postitem-bg);
10+
box-shadow: 0 20px 25px rgba(67, 103, 90, 0.1);
11+
border-radius: 10px;
12+
margin-bottom: 50px;
13+
padding: 15px 15px 20px;
14+
transition: 0.3s ease;
15+
min-height: 30rem;
1616
}
1717

1818
.benefits h2 {
19-
line-height: 2rem;
20-
margin-bottom: 0.6rem;
21-
font-size: 1.2rem;
22-
display: block;
23-
color: var(--goff-main-title-color);
24-
text-decoration: none;
25-
transition: 0.3s ease;
26-
min-height: 2rem;
19+
line-height: 2rem;
20+
margin-bottom: 0.6rem;
21+
font-size: 1.2rem;
22+
display: block;
23+
color: var(--goff-main-title-color);
24+
text-decoration: none;
25+
transition: 0.3s ease;
26+
min-height: 2rem;
2727
}
2828

2929
.benefitsPostItem p {
30-
color: var(--goff-main-ff-description);
30+
color: var(--goff-main-ff-description);
3131
}
3232

33-
.benefitsPostItemRow {
34-
margin: 0 0.1rem 0 0.1rem;
35-
}
36-
37-
.benefitsPostItemRow img {
38-
border-radius: 10px;
39-
}
40-
41-
.title {
42-
text-align: center;
43-
}
44-
45-
.title p {
46-
margin-top: 2rem;
47-
}

‎website/src/components/home/features/index.js

+112-69
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import styles from './styles.module.css';
33
import clsx from 'clsx';
44
import Link from '@docusaurus/Link';
55
import PropTypes from 'prop-types';
6-
import {Headline} from '../headline';
76
import {integrations} from '@site/data/integrations';
87
import {sdk} from '@site/data/sdk';
98

@@ -31,73 +30,82 @@ function SocialIcon(props) {
3130
);
3231
}
3332

34-
function Rollout() {
33+
export function Rollout() {
3534
return (
36-
<div className="grid xl:grid-cols-2">
37-
<div className={clsx(styles.featureContent, 'mr-25')}>
38-
<h2>Advanced rollout capabilities</h2>
39-
<p>
40-
Feature flags allows to unlink deploy and release, this means that you
41-
can decide how to release a feature without thinking about
42-
architecture and complex deployments.
43-
</p>
44-
<p>
45-
These capabilities will give you more control on your rollout changes
46-
and will ensure that everything happened as expected.
47-
</p>
48-
<div className={styles.featureContentList}>
49-
<ul>
50-
<li>
51-
<i className="fa-solid fa-circle-arrow-right"></i>
52-
<p>Rules: Impact only the users you want to target.</p>
53-
</li>
54-
<li>
55-
<i className="fa-solid fa-circle-arrow-right"></i>
56-
<p>
57-
Canary release: Enable the feature only to a subset of your
58-
users.
59-
</p>
60-
</li>
61-
<li>
62-
<i className="fa-solid fa-circle-arrow-right"></i>
63-
<p>
64-
Progressive rollout: Affect from 0% to 100% of users within a
65-
time frame, you can monitor while releasing the change.
66-
</p>
67-
</li>
68-
<li>
69-
<i className="fa-solid fa-circle-arrow-right"></i>
70-
<p>
71-
Scheduled Workflows: Modify your flag at a specific time to
72-
impact more/less users.
73-
</p>
74-
</li>
75-
<li>
76-
<i className="fa-solid fa-circle-arrow-right"></i>
77-
<p>
78-
A/B testing: Split your audience in multiple groups and track
79-
their usage.
80-
</p>
81-
</li>
82-
</ul>
35+
<div className="container my-8">
36+
<div className="row">
37+
<div className={'col col--6'}>
38+
<div className={clsx(styles.featureContent, 'mr-25')}>
39+
<h2>Advanced rollout capabilities</h2>
40+
<p>
41+
Feature flags allows to unlink deploy and release, this means that
42+
you can decide how to release a feature without thinking about
43+
architecture and complex deployments.
44+
</p>
45+
<p>
46+
These capabilities will give you more control on your rollout
47+
changes and will ensure that everything happened as expected.
48+
</p>
49+
<div className={styles.featureContentList}>
50+
<ul>
51+
<li>
52+
<i className="fa-solid fa-circle-arrow-right"></i>
53+
<p>Rules: Impact only the users you want to target.</p>
54+
</li>
55+
<li>
56+
<i className="fa-solid fa-circle-arrow-right"></i>
57+
<p>
58+
Canary release: Enable the feature only to a subset of your
59+
users.
60+
</p>
61+
</li>
62+
<li>
63+
<i className="fa-solid fa-circle-arrow-right"></i>
64+
<p>
65+
Progressive rollout: Affect from 0% to 100% of users within
66+
a time frame, you can monitor while releasing the change.
67+
</p>
68+
</li>
69+
<li>
70+
<i className="fa-solid fa-circle-arrow-right"></i>
71+
<p>
72+
Scheduled Workflows: Modify your flag at a specific time to
73+
impact more/less users.
74+
</p>
75+
</li>
76+
<li>
77+
<i className="fa-solid fa-circle-arrow-right"></i>
78+
<p>
79+
A/B testing: Split your audience in multiple groups and
80+
track their usage.
81+
</p>
82+
</li>
83+
</ul>
84+
</div>
85+
<p className={'mt-3'}>
86+
<Link to={'/docs/configure_flag/rollout-strategies'}>
87+
{' '}
88+
See our rollout capabilites{' '}
89+
<i className="fa-solid fa-arrow-right"></i>
90+
</Link>
91+
</p>
92+
</div>
8393
</div>
84-
</div>
85-
<div className={clsx(styles.imgRollout, 'max-md:hidden')}>
86-
<div className={styles.featureImage}>
87-
<img
88-
src="img/features/rollout.png"
89-
alt="feature-image"
90-
id="shape-01"
91-
/>
94+
<div className={'col col--6'}>
95+
<div className={clsx(styles.imgRollout, 'max-md:hidden')}>
96+
<div className={styles.featureImage}>
97+
<img src="img/features/rollout.png" alt="feature-image" />
98+
</div>
99+
</div>
92100
</div>
93101
</div>
94102
</div>
95103
);
96104
}
97105

98-
function OpenFeature() {
106+
export function Sdk() {
99107
return (
100-
<div className="container">
108+
<div className="container my-8">
101109
<div className="row">
102110
<div className={'col col--6'}>
103111
<div className={'grid grid-cols-4'}>
@@ -136,7 +144,7 @@ function OpenFeature() {
136144
);
137145
}
138146

139-
function Integration() {
147+
export function Integration() {
140148
const allIntegrations = [
141149
...integrations.retrievers,
142150
...integrations.exporters,
@@ -158,7 +166,7 @@ function Integration() {
158166
);
159167

160168
return (
161-
<div className="container">
169+
<div className="container my-8">
162170
<div className="row">
163171
<div className={'col col--6'}>
164172
<div className={clsx(styles.featureContent, 'mr-25')}>
@@ -230,15 +238,50 @@ function Integration() {
230238
);
231239
}
232240

233-
export function Features() {
241+
export function OpenFeatureEcosystem() {
242+
// how to know if we are in dark mode
234243
return (
235-
<section className={styles.feature}>
236-
<div className="container">
237-
<OpenFeature />
238-
<Integration />
239-
<Headline />
240-
<Rollout />
244+
<div className="container my-8">
245+
<div className="row">
246+
<div className={'col col--6'}>
247+
<div className={clsx(styles.openfeaturelogo, 'text-center xl:mt-16')}>
248+
<img
249+
src={'img/features/openfeature.svg'}
250+
alt="openfeature-logo"
251+
className={styles.openfeaturelogo}
252+
/>
253+
</div>
254+
</div>
255+
<div className={'col col--6'}>
256+
<div className={clsx(styles.featureContent, 'mr-25')}>
257+
<h2>Part of the OpenFeature Ecosystem</h2>
258+
<p>
259+
At GO Feature Flag, we believe in the power of open standards and,
260+
the importance of vendor neutrality. That's why we've chosen to
261+
rely on Open Feature for our SDKs.
262+
<br />
263+
By adopting GO Feature Flag you embrace the OpenFeature standard
264+
and you get all the benefits of the ecosystem.
265+
</p>
266+
<div className={styles.featureContentList}>
267+
<ul>
268+
<li>
269+
<i className="fa-solid fa-circle-arrow-right"></i>
270+
<p>Open-Source SDKs</p>
271+
</li>
272+
<li>
273+
<i className="fa-solid fa-circle-arrow-right"></i>
274+
<p>No Vendor Lock-In</p>
275+
</li>
276+
<li>
277+
<i className="fa-solid fa-circle-arrow-right"></i>
278+
<p>OpenFeature community based support for SDKs</p>
279+
</li>
280+
</ul>
281+
</div>
282+
</div>
283+
</div>
241284
</div>
242-
</section>
285+
</div>
243286
);
244287
}

‎website/src/components/home/features/styles.module.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@
141141
font-size: 1.05rem;
142142
line-height: 2rem;
143143
font-weight: 400;
144-
margin-bottom: 3rem;
144+
margin-bottom: 2rem;
145145
color: var(--goff-main-ff-description);
146146
}
147147

@@ -160,3 +160,7 @@
160160
bottom: 0;
161161
right: 0;
162162
}
163+
164+
.openfeaturelogo {
165+
fill: var(--goff-main-title-color);
166+
}

0 commit comments

Comments
 (0)