Skip to content

Commit

Permalink
docs(home): Add a better using list bar (#3101)
Browse files Browse the repository at this point in the history 
* Add a better using bar

Signed-off-by: Thomas Poignant <thomas.poignant@gofeatureflag.org>

* fix

Signed-off-by: Thomas Poignant <thomas.poignant@gofeatureflag.org>

* use darkmode by default

Signed-off-by: Thomas Poignant <thomas.poignant@gofeatureflag.org>

---------

Signed-off-by: Thomas Poignant <thomas.poignant@gofeatureflag.org>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@thomaspoignant @kodiakhq
thomaspoignant and kodiakhq[bot] committed Feb 17, 2025
1 parent 60d39dc commit 2c8a136
Show file tree
Hide file tree
Showing 28 changed files with 286 additions and 335 deletions.
2 changes: 1 addition & 1 deletion website/docs/sdk/server_providers/openfeature_javascript.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ This code block shows you how you can create a client that you can use in your a
<TabItem value="javascript" label="JavaScript">

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


Expand Down
3 changes: 3 additions & 0 deletions website/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,6 +509,9 @@ const config = {
'ruby',
],
},
colorMode: {
defaultMode: 'dark',
},
}),
};

Expand Down
37 changes: 12 additions & 25 deletions website/src/components/home/benefit/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import styles from './styles.module.css';
import clsx from 'clsx';
import PropTypes from 'prop-types';

BenefitCard.propTypes = {
Expand All @@ -11,37 +10,25 @@ BenefitCard.propTypes = {

function BenefitCard({img, title, description}) {
return (
<div className="col-1-5 mobile-col-1-1">
<article className={styles.benefitsPostItem}>
<div className={styles.benefitsPostItemRow}>
<img src={img} alt="post-thumb" />
</div>
<div className={styles.benefitsPostItemRow}>
<h2>{title}</h2>
<p>{description}</p>
</div>
</article>
<div className="w-fit bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
<img className="rounded-t-lg p-3" src={img} alt={title} />
<div className="p-5">
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
{title}
</h5>
<p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
{description}
</p>
</div>
</div>
);
}

export function Benefit() {
return (
<section className={styles.benefits}>
<div className="container">
<div className="row">
<div className={clsx('col-1-1', styles.title)}>
<div>
<span className="goffMainTitle">Why use feature flags?</span>
<br />
<p>
Feature flags is a modern software engineering technique that
configure select functionality during runtime, without deploying
new code.
</p>
</div>
</div>
</div>
<div className={'text-center mb-5'}>
<span className="goffMainTitle">The Benefits of Feature Flags</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-2 px-3">
<BenefitCard
Expand Down
55 changes: 20 additions & 35 deletions website/src/components/home/benefit/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,32 @@
.benefits {
margin: 1rem 2.5rem 1rem 2.5rem;
background: var(--goff-benif-bg);
padding: 70px 0 120px;
border-radius: 1.5rem;
margin: 1rem 2.5rem 1rem 2.5rem;
background: var(--goff-benif-bg);
padding: 70px 0 120px;
border-radius: 1.5rem;
}

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

.benefits h2 {
line-height: 2rem;
margin-bottom: 0.6rem;
font-size: 1.2rem;
display: block;
color: var(--goff-main-title-color);
text-decoration: none;
transition: 0.3s ease;
min-height: 2rem;
line-height: 2rem;
margin-bottom: 0.6rem;
font-size: 1.2rem;
display: block;
color: var(--goff-main-title-color);
text-decoration: none;
transition: 0.3s ease;
min-height: 2rem;
}

.benefitsPostItem p {
color: var(--goff-main-ff-description);
color: var(--goff-main-ff-description);
}

.benefitsPostItemRow {
margin: 0 0.1rem 0 0.1rem;
}

.benefitsPostItemRow img {
border-radius: 10px;
}

.title {
text-align: center;
}

.title p {
margin-top: 2rem;
}
181 changes: 112 additions & 69 deletions website/src/components/home/features/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import styles from './styles.module.css';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import PropTypes from 'prop-types';
import {Headline} from '../headline';
import {integrations} from '@site/data/integrations';
import {sdk} from '@site/data/sdk';

Expand Down Expand Up @@ -31,73 +30,82 @@ function SocialIcon(props) {
);
}

function Rollout() {
export function Rollout() {
return (
<div className="grid xl:grid-cols-2">
<div className={clsx(styles.featureContent, 'mr-25')}>
<h2>Advanced rollout capabilities</h2>
<p>
Feature flags allows to unlink deploy and release, this means that you
can decide how to release a feature without thinking about
architecture and complex deployments.
</p>
<p>
These capabilities will give you more control on your rollout changes
and will ensure that everything happened as expected.
</p>
<div className={styles.featureContentList}>
<ul>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>Rules: Impact only the users you want to target.</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
Canary release: Enable the feature only to a subset of your
users.
</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
Progressive rollout: Affect from 0% to 100% of users within a
time frame, you can monitor while releasing the change.
</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
Scheduled Workflows: Modify your flag at a specific time to
impact more/less users.
</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
A/B testing: Split your audience in multiple groups and track
their usage.
</p>
</li>
</ul>
<div className="container my-8">
<div className="row">
<div className={'col col--6'}>
<div className={clsx(styles.featureContent, 'mr-25')}>
<h2>Advanced rollout capabilities</h2>
<p>
Feature flags allows to unlink deploy and release, this means that
you can decide how to release a feature without thinking about
architecture and complex deployments.
</p>
<p>
These capabilities will give you more control on your rollout
changes and will ensure that everything happened as expected.
</p>
<div className={styles.featureContentList}>
<ul>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>Rules: Impact only the users you want to target.</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
Canary release: Enable the feature only to a subset of your
users.
</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
Progressive rollout: Affect from 0% to 100% of users within
a time frame, you can monitor while releasing the change.
</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
Scheduled Workflows: Modify your flag at a specific time to
impact more/less users.
</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>
A/B testing: Split your audience in multiple groups and
track their usage.
</p>
</li>
</ul>
</div>
<p className={'mt-3'}>
<Link to={'/docs/configure_flag/rollout-strategies'}>
{' '}
See our rollout capabilites{' '}
<i className="fa-solid fa-arrow-right"></i>
</Link>
</p>
</div>
</div>
</div>
<div className={clsx(styles.imgRollout, 'max-md:hidden')}>
<div className={styles.featureImage}>
<img
src="img/features/rollout.png"
alt="feature-image"
id="shape-01"
/>
<div className={'col col--6'}>
<div className={clsx(styles.imgRollout, 'max-md:hidden')}>
<div className={styles.featureImage}>
<img src="img/features/rollout.png" alt="feature-image" />
</div>
</div>
</div>
</div>
</div>
);
}

function OpenFeature() {
export function Sdk() {
return (
<div className="container">
<div className="container my-8">
<div className="row">
<div className={'col col--6'}>
<div className={'grid grid-cols-4'}>
Expand Down Expand Up @@ -136,7 +144,7 @@ function OpenFeature() {
);
}

function Integration() {
export function Integration() {
const allIntegrations = [
...integrations.retrievers,
...integrations.exporters,
Expand All @@ -158,7 +166,7 @@ function Integration() {
);

return (
<div className="container">
<div className="container my-8">
<div className="row">
<div className={'col col--6'}>
<div className={clsx(styles.featureContent, 'mr-25')}>
Expand Down Expand Up @@ -230,15 +238,50 @@ function Integration() {
);
}

export function Features() {
export function OpenFeatureEcosystem() {
// how to know if we are in dark mode
return (
<section className={styles.feature}>
<div className="container">
<OpenFeature />
<Integration />
<Headline />
<Rollout />
<div className="container my-8">
<div className="row">
<div className={'col col--6'}>
<div className={clsx(styles.openfeaturelogo, 'text-center xl:mt-16')}>
<img
src={'img/features/openfeature.svg'}
alt="openfeature-logo"
className={styles.openfeaturelogo}
/>
</div>
</div>
<div className={'col col--6'}>
<div className={clsx(styles.featureContent, 'mr-25')}>
<h2>Part of the OpenFeature Ecosystem</h2>
<p>
At GO Feature Flag, we believe in the power of open standards and,
the importance of vendor neutrality. That's why we've chosen to
rely on Open Feature for our SDKs.
<br />
By adopting GO Feature Flag you embrace the OpenFeature standard
and you get all the benefits of the ecosystem.
</p>
<div className={styles.featureContentList}>
<ul>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>Open-Source SDKs</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>No Vendor Lock-In</p>
</li>
<li>
<i className="fa-solid fa-circle-arrow-right"></i>
<p>OpenFeature community based support for SDKs</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
6 changes: 5 additions & 1 deletion website/src/components/home/features/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
font-size: 1.05rem;
line-height: 2rem;
font-weight: 400;
margin-bottom: 3rem;
margin-bottom: 2rem;
color: var(--goff-main-ff-description);
}

Expand All @@ -160,3 +160,7 @@
bottom: 0;
right: 0;
}

.openfeaturelogo {
fill: var(--goff-main-title-color);
}
Loading

0 comments on commit 2c8a136

Please # to comment.