Improve doc "Where to store your configuration flag" (#655)

website/docs/configure_flag/store_your_flags.mdx

@@ -0,0 +1,93 @@
+---
+sidebar_position: 10
+description: Where to store your configuration flag?
+---
+import {Retrievers} from '@site/src/components/doc/retrievers';
+import httplogo from '@site/static/docs/retrievers/http.png';
+import customlogo from '@site/static/docs/retrievers/custom.png';
+import filelogo from '@site/static/docs/retrievers/file.png';
+import githublogo from '@site/static/docs/retrievers/github.png';
+import googlelogo from '@site/static/docs/retrievers/google.png';
+import s3logo from '@site/static/docs/retrievers/s3.png';
+import k8slogo from '@site/static/docs/retrievers/k8s.png';
+
+# Where to store your configuration flag
+**GO Feature Flag** is a tool that makes it easy to implement feature flags in your application. One of the benefits of 
+using GO Feature Flag is that it is designed to be simple and lightweight.  
+To achieve this, the solution uses a file-based approach to configure your flags.
+
+When you use GO Feature Flag, you create one or more file(s) _(`YAML`, `TOML` or `JSON`)_ that contains your feature 
+flags and their values. You can then upload this file(s) where you want, and GO Feature Flag will use it.  
+The way the solution achieves this is through the use of retrievers, which allow you to load your feature flag 
+configuration file from various sources.
+
+**Retrievers** are a core concept in GO Feature Flag. They are responsible for loading your feature flag configuration 
+file from a specified location, such as a file on your local machine or a remote storage service. This allows you to 
+store your configuration file in a location that works best for your workflow.
+
+**GO Feature Flag** supports a variety of retrievers out of the box, including `S3`, `Google Cloud Storage`, `Github`, 
+`HTTP`, `Kubernetes config maps`, `Local file` ...  
+But you can also implement your own custom retriever if needed.
+
+Using retrievers in GO Feature Flag is straightforward. You simply specify which retriever to use in your configuration 
+file, along with any required configuration options. GO Feature Flag will then use the specified retriever to load your 
+configuration file and will evaluate your feature flags based on this configuration.
+
+## Available retrievers
+
+<Retrievers test={
+  [
+    {
+      name:"Kubernetes Configmap",
+      logo: k8slogo,
+      relayproxy: '/docs/relay_proxy/configure_relay_proxy#kubernetes-configmap',
+      gomodule: '/docs/go_module/store_file/kubernetes_configmaps'
+    },
+    {
+      name:"AWS S3",
+      logo: s3logo,
+      relayproxy: '/docs/relay_proxy/configure_relay_proxy#s3',
+      gomodule: '/docs/go_module/store_file/s3'
+    },
+    {
+      name:"Google Storage",
+      logo: googlelogo,
+      relayproxy: '/docs/relay_proxy/configure_relay_proxy#google-storage',
+      gomodule: '/docs/go_module/store_file/google_cloud_storage'
+    },
+    {
+      name:"HTTP/HTTPS",
+      logo: httplogo,
+      relayproxy: '/docs/relay_proxy/configure_relay_proxy#http',
+      gomodule: '/docs/go_module/store_file/http'
+    },
+    {
+      name:"GitHub",
+      logo: githublogo,
+      relayproxy: '/docs/relay_proxy/configure_relay_proxy#github',
+      gomodule: '/docs/go_module/store_file/github'
+    },
+    {
+      name:"Local File",
+      logo: filelogo,
+      relayproxy: '/docs/relay_proxy/configure_relay_proxy#file',
+      gomodule: '/docs/go_module/store_file/file'
+    },
+    {
+      name:"Custom retriever",
+      logo: customlogo,
+      gomodule: '/docs/go_module/store_file/custom'
+    }
+  ]}/>
+
+## Use multiple configuration flag files
+Sometimes, you may need to store your feature flags in different locations.
+In such cases, you can configure multiple retrievers to retrieve the flags from different sources within your GO Feature
+Flag instance.
+
+To set this up, you need to configure the [`Retrievers`](../go_module/configuration#configuration-fields) field to
+consume from different retrievers.
+What this does is that it calls all the retrievers in parallel and applies them in the order you have provided.
+
+Keep in mind that if a flag is defined in multiple retrievers, it can be overridden by a later flag. For instance,
+if you have a flag named _`my-feature-flag`_ in the first file and another flag with the same name in the second file, the second configuration will take precedence.

website/docs/go_module/store_file/kubernetes_configmaps.md

@@ -3,10 +3,20 @@ sidebar_position: 4
 ---
 
 # Kubernetes configmaps
+A ConfigMap is an API object used to store non-confidential data in key-value pairs inside kubernetes.  
+GO Feature Flag can read directly in a configmap in your namespace.
+
 The [**Kubernetes Retriever**](https://pkg.go.dev/github.com/thomaspoignant/go-feature-flag/retriever/k8sretriever/#Retriever)
 will access flags in a Kubernetes ConfigMap via the [Kubernetes Go client](https://github.com/kubernetes/client-go)
 
-## Example
+
+## Add your config file as configmap
+
+```shell
+kubectl create configmap goff --from-file=examples/retriever_configmap/flags.yaml
+```
+
+## Configuration Example
 ```go linenums="1"
 import (
     restclient "k8s.io/client-go/rest"

website/docs/index.md

@@ -25,7 +25,7 @@ I've also written an [article](https://medium.com/better-programming/feature-fla
 
 ## What can I do with GO Feature Flag?
 
-- Storing your configuration flags file on various locations (`HTTP`, `S3`, `Kubernetes`, [_see full list_](configure_flag/store_your_flags.md).
+- Storing your configuration flags file on various locations (`HTTP`, `S3`, `Kubernetes`, [_see full list_](configure_flag/store_your_flags).
 - Configuring your flags in various [format](configure_flag/flag_format.mdx) (`JSON`, `TOML` and `YAML`).
 - Adding complex [rules](configure_flag/flag_format.mdx#rule-format) to target your users.
 - Use complex rollout strategy for your flags :

website/docusaurus.config.js

@@ -63,14 +63,16 @@ const config = {
             'https://github.com/thomaspoignant/go-feature-flag/tree/main/website/',
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: [
+            require.resolve('./src/css/custom.css'),
+            require.resolve('./src/css/pushy-buttons.css'), //https://github.com/iRaul/pushy-buttons
+            require.resolve('./src/css/simplegrid.css'), //https://thisisdallas.github.io/Simple-Grid/
+          ],
         },
       }),
     ],
   ],
   stylesheets: [
-    'css/pushy-buttons.css', //https://github.com/iRaul/pushy-buttons
-    'css/simplegrid.css', //https://thisisdallas.github.io/Simple-Grid/
     'https://fonts.googleapis.com/css?family=Poppins:400,500,700',
     'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css',
     'https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css', // https://devicon.dev/

website/src/components/doc/retrievers/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import clsx from "clsx";
+import styles from "@site/src/components/doc/retrievers/styles.module.css";
+import Link from "@docusaurus/Link";
+
+export function Retrievers(props) {
+
+  const listItems = props.test.map((item, index) =>  <Retriever {...item} key={index} />);
+
+  return(
+    <div className="grid grid-pad">
+      {listItems}
+    </div>
+  );
+}
+
+function Retriever(item){
+  return(
+    <div className={clsx("col-1-3 mobile-col-1-2", styles.container)}>
+      <div className={styles.card}>
+        <img src={item.logo} className={styles.cardLogo} />
+          <div className={styles.cardDetails}>
+            <div className={styles.title}>{item.name}</div>
+            <div className={styles.linkBox}>
+              {item.relayproxy && <Link to={item.relayproxy}>
+                <button className={clsx( styles.button)}>
+                  <i className="fa-solid fa-server"></i> Configure the Relay Proxy
+                </button>
+              </Link>}
+              {item.gomodule && <Link to={item.gomodule}>
+                <button className={clsx( styles.button)}>
+                  <i className="devicon-go-original-wordmark"></i> Configure the GO Module
+                </button>
+              </Link>}
+            </div>
+          </div>
+      </div>
+    </div>
+  );
+}

website/src/components/doc/retrievers/styles.module.css

@@ -0,0 +1,65 @@
+.title{
+    font-size: 1.2rem;
+    height: 5rem;
+    max-height: 5rem;
+    font-weight: bold;
+
+}
+
+.description{
+    font-size: 0.8rem;
+}
+
+.cardLogo {
+    width: 100%;
+    border-radius: 12px;
+    height: 125px;
+    object-fit: contain;
+
+}
+
+.container {
+    margin: 0 auto;
+}
+.card {
+    background-color: var(--ifm-card-background-color);
+    border: 1px solid var(--ifm-color-primary);
+    padding: 8px;
+    border-radius: 12px;
+    width: 100%;
+    margin: 0 .5em 0.5rem;
+    /* optional */
+    min-height: 100%;
+}
+
+
+/* Style button element */
+.button {
+    width: 100%;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 50px;
+    font-weight: 600;
+    color: #0077ff;
+    background-color: #e0efff;
+    margin: 0 auto;
+    display: block;
+
+    /* Button is a clickable element, therefore it should have a pointer cursor */
+    cursor: pointer;
+}
+
+.cardDetails {
+    /* Add space around the details */
+    padding: 16px 8px 8px 8px;
+}
+
+button:focus,
+button:hover {
+    background-color: #0077ff;
+    color: #e0efff;
+}
+
+.linkBox button {
+    margin-bottom: 1rem;
+}