New experiment quickstart guide, small css updates (#492)

* rewrote experiment allocation quick start

* update toc backgroun

* update toc background

* final copy edits

Author: lukasgoetzweiss

docs/home.md

@@ -6,7 +6,7 @@ slug: /
 
 import FeatureCard from '../src/components/FeatureCard';
 
-# What is Eppo?
+# Welcome to the Eppo Docs
 
 Eppo is a composable next-generation feature flagging and experimentation platform focused on tightly integrating with your existing tech stack. 
 

docs/quick-starts/experiment-allocation-quickstart.md

@@ -184,7 +184,7 @@ import * as EppoSdk from "@eppo/js-client-sdk";
 const eppoClient = EppoSdk.getInstance();
 
 const variation = eppoClient.getBooleanAssignment(
-  "new-checkout-page", // flag key
+  "new-user-onboarding", // flag key
   user.id, // subject key
   {}, // userProperties
   false, // default value
@@ -203,7 +203,7 @@ import * as EppoSdk from "@eppo/node-server-sdk";
 const eppoClient = EppoSdk.getInstance();
 
 const variation = eppoClient.getBooleanAssignment(
-  "new-checkout-page", // flag key
+  "new-user-onboarding", // flag key
   user.id, // subject key
   {}, // userProperties
   false, // default value
@@ -221,10 +221,10 @@ Task {
     do {
         try await EppoClient.initialize(sdkKey: "YOUR_EPPO_API_KEY");
         self.assignment = try EppoClient.shared().getBooleanAssignment(
-            flagKey: "ios-test-app-treatment",
-            subjectKey: "test-user",
-            subjectAttributes: ["country": "US"],
-            defaultVariation: "control"
+            flagKey: "new-user-onboarding", // flag key
+            subjectKey: "test-user", // subject key
+            subjectAttributes: [], // subject attributes
+            defaultVariation: "control" // default value
         );
     } catch {
         self.assignment = nil;
@@ -244,7 +244,11 @@ It is recommended to wrap initialization in a `Task` block in order to perform n
 import cloud.eppo.android.EppoClient;
 
 EppoClient eppoClient = EppoClient.getInstance(); // requires the SDK to have already been initialized
-String variation = eppoClient.getStringAssignment("<FLAG KEY>", "<SUBJECT KEY>", "<DEFAULT VALUE>");
+String variation = eppoClient.getStringAssignment(
+  "new-user-onboarding", // flag key
+  "test-user", // subject key
+  "control" // default value
+);
 ```
 
 </TabItem>
@@ -257,7 +261,7 @@ import eppo_client
 client = eppo_client.get_instance()
 
 variation = eppoClient.get_boolean_assignment(
-  "new-checkout-page", # flag key
+  "new-user-onboarding", # flag key
   user.id, # subject key
   {}, # user properties
   false, # default value

docs/quick-starts/feature-flag-quickstart.md

@@ -72,6 +72,11 @@ html {
   --card-shadow: rgba(0, 0, 0, 0.1);
   --inline-code-bg: #f0f0f0;
   --inline-code-color: #171717;
+  --toc-background-color: #FCFAF7;
+  --toc-border-color: #e0e0e0;
+  --toc-text-color: #333;
+  --toc-hover-color: #7964d3;
+  --toc-font-family: 'Cofosans', Arial, sans-serif;
   --ifm-font-family-base: 'Cofosans', Arial, sans-serif;
   --ifm-font-family-monospace: 'Cofosansmono', Menlo, monospace;
   --ifm-h1-font-size: 2.25 rem;
@@ -96,6 +101,10 @@ html {
   --card-shadow: rgba(0, 0, 0, 0.3);
   --inline-code-bg: #2d2d2d;
   --inline-code-color: #e0e0e0;
+  --toc-background-color: #282a36;
+  --toc-border-color: #3d3d3d;
+  --toc-text-color: #e0e0e0;
+  --toc-hover-color: #7964d3;
 }
 
 [data-theme='light'] .navbar {
@@ -105,6 +114,7 @@ html {
   background-color: #FCFAF7;
 }
 
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;
@@ -177,7 +187,7 @@ sup {
 .theme-doc-sidebar-menu > .theme-doc-sidebar-item-category {
   margin-bottom: 1rem;
   padding-bottom: 0.3rem;
-  border-bottom: 1px solid var(--ifm-sidebar-border-color);
+  border-bottom: 0px solid var(--ifm-sidebar-border-color);
 }
 
 .theme-doc-sidebar-menu > .theme-doc-sidebar-item-category:last-child {
@@ -231,20 +241,32 @@ sup {
   color: var(--ifm-color-gray-600);
 
   /* Make the text a bit smaller */
-  font-size: 0.7rem;
+  font-size: 0.75rem;
 
   /* Optional: Add some additional styling */
   font-weight: 600;
   text-transform: uppercase;
   padding-top: 0.1rem;
   padding-bottom: 0.1rem;
+
+  /* Remove hover effects */
+  background-color: transparent !important;
 }
 
-/* Ensure the color doesn't change on hover or when active */
-.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible > .menu__link:hover,
-.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible > .menu__link--active {
-  color: var(--ifm-color-gray-600);
-  background: none;
+.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible > .menu__link,
+.theme-doc-sidebar-item-link-level-2 > .menu__link {
+  padding-left: 0;
+}
+
+
+/* Remove hover effects for the parent element as well */
+.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible:hover {
+  background-color: transparent !important;
+}
+
+/* Ensure the text color doesn't change on hover */
+.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible > .menu__link:hover {
+  color: var(--ifm-color-gray-600) !important;
 }
 
 /* For dark mode */
@@ -327,3 +349,46 @@ code {
     font-size: 0.7em; /* Adjust this value as needed */
   }
 }
+
+/* Adjust these values as needed */
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.25rem; 
+}
+
+h4 {
+  font-size: 1rem; 
+}
+
+/* Style the Table of Contents */
+.table-of-contents {
+  border-left: none !important;
+  background-color: var(--toc-background-color);
+  border-radius: 8px; /* Rounded corners */
+  padding: 16px; /* Add some padding inside the box */
+}
+
+/* Style the TOC links */
+.table-of-contents__link {
+  color: var(--toc-text-color);
+}
+
+.table-of-contents__link--active {
+  font-weight: bold;
+  color: var(--toc-hover-color)
+}
+
+.theme-doc-sidebar-container {
+  border-right: none !important;
+}
+
+img {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}