📝 put readme in docs website

docs/astro.config.mjs

@@ -1,27 +1,40 @@
-import { defineConfig } from 'astro/config';
-import starlight from '@astrojs/starlight';
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [
-		starlight({
-			title: 'My Docs',
-			social: {
-				github: 'https://github.com/withastro/starlight',
-			},
-			sidebar: [
-				{
-					label: 'Guides',
-					items: [
-						// Each item here is one entry in the navigation menu.
-						{ label: 'Example Guide', slug: 'guides/example' },
-					],
-				},
-				{
-					label: 'Reference',
-					autogenerate: { directory: 'reference' },
-				},
-			],
-		}),
-	],
+  integrations: [
+    starlight({
+      title: "FeatureManagement",
+      social: {
+        github: "https://github.com/Odonno/FeatureManagement.UI",
+      },
+      sidebar: [
+        {
+          label: "Introduction",
+          autogenerate: { directory: "introduction" },
+        },
+        {
+          label: "Data storage",
+          autogenerate: { directory: "storage" },
+        },
+        {
+          label: "Feature types",
+          autogenerate: { directory: "features" },
+        },
+        {
+          label: "User Interface",
+          autogenerate: { directory: "ui" },
+        },
+        {
+          label: "Feature consumption",
+          autogenerate: { directory: "api" },
+        },
+        {
+          label: "Reference",
+          autogenerate: { directory: "reference" },
+        },
+      ],
+    }),
+  ],
 });

docs/src/content/docs/api/code.md

@@ -0,0 +1,20 @@
+---
+title: C# API
+description: Features can be consumed directly in C#.
+sidebar:
+  order: 1
+---
+
+Inside your ASP.NET Web API, you can inject the `IFeaturesService`.
+
+```cs
+public interface IFeaturesService
+{
+    Task<List<Feature>> GetAll();
+    Task<Feature> Get(string featureName);
+    Task<T> GetValue<T>(string featureName, string? clientId = null);
+    Task<Feature> SetValue<T>(string featureName, T value, string? clientId = null);
+}
+```
+
+You can get and use all features at once, detect if a feature is valid or not and even update the value of a feature based on your needs.

docs/src/content/docs/api/graphql.md

@@ -0,0 +1,11 @@
+---
+title: GraphQL API
+description: Features can be consumed via a GraphQL server.
+sidebar:
+  order: 3
+  badge:
+    text: WIP
+    variant: note
+---
+
+Work in progress...

docs/src/content/docs/api/index.md

@@ -0,0 +1,13 @@
+---
+title: Overview
+description: An overview of the different ways to consume features in FeatureManagement.UI.
+sidebar:
+  order: 0
+---
+
+Once everything is setup, you can now consume the features in two ways:
+
+- Either via self-consumption, inside your Web API. See [via C# code](./code.md),
+- or via an external API so that other services can consume features through API calls
+  - [via a REST API](./rest.md)
+  - [via a GraphQL API](./graphql.md)

docs/src/content/docs/api/realtime.md

@@ -0,0 +1,24 @@
+---
+title: Realtime updates
+description: You can use an event handlers to detect when a feature is updated.
+---
+
+There are event handlers you can use that are triggered when a feature is updated.
+
+When a server feature is updated:
+
+```csharp
+c.OnServerFeatureUpdated = (IFeature feature) =>
+{
+    // Do something when a server feature is updated
+};
+```
+
+When a client feature is updated, we also get the id of the user that updated the feature:
+
+```csharp
+c.OnClientFeatureUpdated = (IFeature feature, string clientId) =>
+{
+    // Do something when a client feature is updated
+};
+```

docs/src/content/docs/api/rest.md

@@ -0,0 +1,29 @@
+---
+title: REST API
+description: Features can be consumed via a GraphQL server.
+sidebar:
+  order: 2
+---
+
+Once you map the features UI, you give everyone the ability to call an API the features. As an example, it can be pretty handy if you write a React application and you want to enable/disable some features dynamically.
+
+The API is defined like this:
+
+### Retrieve all features
+
+```bash
+GET - /features
+```
+
+### Set feature value
+
+```bash
+POST - /features/{featureName}/set
+Payload: { value: boolean | number | string }
+```
+
+### Retrieve authentication schemes
+
+```bash
+GET - /features/auth/schemes
+```

docs/src/content/docs/features/client-rollout.md

@@ -0,0 +1,11 @@
+---
+title: Client Rollout feature
+description: A feature that can be configured for a certain percentage of users.
+sidebar:
+  order: 4
+  badge:
+    text: WIP
+    variant: note
+---
+
+Work in progress...

docs/src/content/docs/features/client-server.md

@@ -0,0 +1,30 @@
+---
+title: Client vs. server feature
+description: A feature can be either server-managed or client-managed.
+sidebar:
+  order: 1
+---
+
+## Client feature
+
+A client feature has a different value for each user of the application. Each user will see the default value but they can update it at anytime (default behavior).
+
+```csharp
+var themes = new List<string>
+{
+    "light",
+    "dark"
+};
+
+configuration.ClientFeature("Theme", themes[0], "Choose a theme for the frontend", themes);
+```
+
+## Server feature
+
+A server feature is defined globally and it will have the same value for every user of the application.
+
+```csharp
+configuration.ServerFeature("Beta", true);
+```
+
+Server features are often only managed by an admin.

docs/src/content/docs/features/group-rollout.md

@@ -0,0 +1,11 @@
+---
+title: Group Rollout feature
+description: A feature that can be configured for a certain percentage of users per group.
+sidebar:
+  order: 4
+  badge:
+    text: WIP
+    variant: note
+---
+
+Work in progress...

docs/src/content/docs/features/group.md

@@ -0,0 +1,30 @@
+---
+title: Group feature
+description: A feature that can be configured differently per each group of users.
+sidebar:
+  order: 2
+---
+
+A group feature give you the ability to set a value based on a user affected group. It can be useful when you give certain rights to users like (Azure AD) roles or when you want to gradually roll out features to some groups of users. If one group matches, the value of the group is applied.
+
+If no group match, the default value will be applied.
+
+In order to use this type of feature, you need to install the [FeatureManagement.UI.Configuration.GroupFeature](https://www.nuget.org/packages/FeatureManagement.UI.Configuration.GroupFeature/) package.
+
+```csharp
+configuration
+    .ClientFeature(
+        "Beta",
+        defaultValue: false,
+        configuration: new GroupFeatureConfiguration<bool>
+        {
+            Groups = new List<GroupFeature<bool>>
+            {
+                new GroupFeature<bool> { Group = "Ring1", Value = true },
+                new GroupFeature<bool> { Group = "Ring2", Value = true },
+                new GroupFeature<bool> { Group = "Ring3", Value = false },
+                new GroupFeature<bool> { Group = "Ring4", Value = false }
+            }
+        }
+    );
+```

docs/src/content/docs/features/index.md

@@ -0,0 +1,12 @@
+---
+title: Overview
+description: An overview of the different feature types provided in FeatureManagement.UI.
+sidebar:
+  order: 0
+---
+
+Here are the different types of features that can be created and used:
+
+- [Client vs. Server features](./client-server.md)
+- [Group features](./group.md)
+- [Time window features](./time-window.md)

docs/src/content/docs/features/time-window.md

@@ -0,0 +1,33 @@
+---
+title: Time window feature
+description: A feature that can be enable for a period of time.
+sidebar:
+  order: 3
+---
+
+A time window feature give you the ability to set a value based on a speicifed date range. It can be useful to apply a different value differs based on the current period of time. Some benefits you can get would be:
+
+- apply feature before or after next month/week/year, to roll out a new feature
+- apply feature only during a day/week/month, to experiment a feature or to set a limited time event
+
+If no time window match, the default value will be applied.
+
+In order to use this type of feature, you need to install the [FeatureManagement.UI.Configuration.TimeWindow](https://www.nuget.org/packages/FeatureManagement.UI.Configuration.TimeWindow/) package.
+
+```csharp
+configuration
+    .ServerFeature(
+        "GameSeasons",
+        defaultValue: "Summer",
+        configuration: new TimeWindowFeatureConfiguration<string>
+        {
+            TimeWindows = new List<TimeWindowFeature<string>>
+            {
+                new TimeWindowFeature<string> { StartDate = new DateTime(2020, 01, 01), EndDate = new DateTime(2020, 04, 01), Value = "Winter" },
+                new TimeWindowFeature<string> { StartDate = new DateTime(2020, 04, 01), EndDate = new DateTime(2020, 07, 01), Value = "Spring" },
+                new TimeWindowFeature<string> { StartDate = new DateTime(2020, 07, 01), EndDate = new DateTime(2020, 10, 01), Value = "Summer" },
+                new TimeWindowFeature<string> { StartDate = new DateTime(2020, 10, 01), EndDate = new DateTime(2021, 01, 01), Value = "Fall" }
+            }
+        }
+    );
+```

docs/src/content/docs/index.mdx

@@ -1,36 +1,36 @@
 ---
-title: Welcome to Starlight
-description: Get started building your docs site with Starlight.
+title: FeatureManagement UI for .NET
+description: Perfectly designed UI for Feature Flags in ASP.NET Web API
 template: splash
 hero:
-  tagline: Congrats on setting up a new Starlight project!
+  tagline: Perfectly designed UI for Feature Flags in ASP.NET Web API!
   image:
     file: ../../assets/houston.webp
   actions:
-    - text: Example Guide
-      link: /guides/example/
+    - text: Get started
+      link: /introduction
       icon: right-arrow
       variant: primary
-    - text: Read the Starlight docs
-      link: https://starlight.astro.build
+    - text: View on GitHub
+      link: https://github.com/Odonno/FeatureManagement.UI
       icon: external
 ---
 
-import { Card, CardGrid } from '@astrojs/starlight/components';
+import { Card, CardGrid } from "@astrojs/starlight/components";
 
 ## Next steps
 
 <CardGrid stagger>
-	<Card title="Update content" icon="pencil">
-		Edit `src/content/docs/index.mdx` to see this page change.
-	</Card>
-	<Card title="Add new content" icon="add-document">
-		Add Markdown or MDX files to `src/content/docs` to create new pages.
-	</Card>
-	<Card title="Configure your site" icon="setting">
-		Edit your `sidebar` and other config in `astro.config.mjs`.
-	</Card>
-	<Card title="Read the docs" icon="open-book">
-		Learn more in [the Starlight Docs](https://starlight.astro.build/).
-	</Card>
+  <Card title="Update content" icon="pencil">
+    Edit `src/content/docs/index.mdx` to see this page change.
+  </Card>
+  <Card title="Add new content" icon="add-document">
+    Add Markdown or MDX files to `src/content/docs` to create new pages.
+  </Card>
+  <Card title="Configure your site" icon="setting">
+    Edit your `sidebar` and other config in `astro.config.mjs`.
+  </Card>
+  <Card title="Read the docs" icon="open-book">
+    Learn more in [the Starlight Docs](https://starlight.astro.build/).
+  </Card>
 </CardGrid>