Cleaning up formatting

Author: mohitkhatri89

src/content/docs/api-reference/1fe-server-reference.mdx

@@ -6,18 +6,19 @@ description: 1fe Server Reference
 The 1fe/server package exposes a function `oneFEServer` that returns an express server instance. This reference page will list the configuration options available.
 
 ### Simple Usage Example
+
 ```tsx
-import oneFEServer from '@devhub/1fe-server';
+import oneFEServer from "@devhub/1fe-server";
 
 const app = oneFEServer({
-  mode: 'production',
-  environment: 'production',
-  orgName: 'My Organization',
+  mode: "production",
+  environment: "production",
+  orgName: "My Organization",
   configManagement: {
-    url: 'https://my-cdn.net/production/live-configuration.json',
-    refreshMs: 30 * 1000
+    url: "https://my-cdn.net/production/live-configuration.json",
+    refreshMs: 30 * 1000,
   },
-  shellBundleUrl: 'https://my-cdn.net/production/shell.js',
+  shellBundleUrl: "https://my-cdn.net/production/shell.js",
 });
 
 app.listen(3001, () => {
@@ -33,19 +34,20 @@ What type of environment is this? The 1fe runtime will use this information to d
 
 ### `environment`
 
-**Type**: string
+**Type**: `string`
 
 What is the name of your environment? This is used for certain capabilities such as fetching a widget's runtime configurations.
 
 ### `orgName`
 
-**Type**: string
+**Type**: `string`
 
 The name of your organization. This will be used as the default page title and for the `X-Powered-By` header.
 
 ### `configManagement`
 
 **Type**
+
 ```tsx
 type OneFEConfigManagement = {
   getDynamicConfigs?: () => Promise<OneFEDynamicConfigs>;
@@ -54,35 +56,34 @@ type OneFEConfigManagement = {
 };
 ```
 
-`**getDynamicConfigs**`: A function that returns a promise that resolves to your live configurations. This function will be called every time the server starts to hydrate the 1fe in memory cache. This will be called on an interval afterwards as defined by `refreshMs`. Use only one of this or `url` option.
-
-`**url**`: The URL to fetch the live configurations from. This should be used if `getDynamicConfigs` is not provided.
-
-`**refreshMs**`: The interval in milliseconds to refresh the live configurations.
+- `getDynamicConfigs`: A function that returns a promise that resolves to your live configurations. This function will be called every time the server starts to hydrate the 1fe in memory cache. This will be called on an interval afterwards as defined by `refreshMs`. Use only one of this or `url` option.
+- `url`: The URL to fetch the live configurations from. This should be used if `getDynamicConfigs` is not provided.
+- `refreshMs`: The interval in milliseconds to refresh the live configurations.
 
 ### `shellBundleUrl`
 
-**Type**: string
+**Type**: `string`
 
 The URL to fetch the shell bundle from. This should be a URL to the bundle that consumes 1fe/shell.
 
 ### `server`
 
 **Type**
+
 ```tsx
 type OneFEServer = {
-    playground?: boolean;
-    knownRoutes: string[];
+  playground?: boolean;
+  knownRoutes: string[];
 };
 ```
 
-`**playground**` (optional): Whether or not to enable the playground. Defaults to false.
-
-`**knownRoutes**`: An array of known routes that 1fe/server will use for plugin and 404 detection.
+- `playground` (optional): Whether or not to enable the playground. Defaults to false.
+- `knownRoutes`: An array of known routes that 1fe/server will use for plugin and 404 detection.
 
 ### `csp` (optional)
 
 **Type**
+
 ```tsx
 type CSPPerEnvironment = {
   scriptSrc?: string[];
@@ -106,14 +107,5 @@ type OneFECSP = {
 };
 ```
 
-`**csp.defaultCSP.enforced**` (optional): Content-Security-Policy to enforce in runtime.
-
-`**csp.defaultCSP.reportOnly**` (optional): report-only Content-Security-Policy.
-
-
-
-
-
-
-
-
+- `csp.defaultCSP.enforced` (optional): Content-Security-Policy to enforce in runtime.
+- `csp.defaultCSP.reportOnly` (optional): report-only Content-Security-Policy.

src/content/docs/api-reference/1fe-shell-reference.mdx

@@ -58,9 +58,8 @@ type OneFEAuth = {
 };
 ```
 
-`isAuthedCallback` will be invoked by 1fe/shell when a plugin is being loaded. It should return a boolean indicating whether the user is authenticated or not.
-
-`unauthedCallback` will be invoked by 1fe/shell when a plugin is being loaded and the user is not authenticated. This should always be defined if `isAuthedCallback` is defined.
+- `isAuthedCallback` will be invoked by 1fe/shell when a plugin is being loaded. It should return a boolean indicating whether the user is authenticated or not.
+- `unauthedCallback` will be invoked by 1fe/shell when a plugin is being loaded and the user is not authenticated. This should always be defined if `isAuthedCallback` is defined.
 
 ### `shellLogger` (optional)
 
@@ -75,13 +74,10 @@ type OneFEShellLogger = {
 };
 ```
 
-`log` This will be invoked when a log is emitted from the shell.
-
-`error` This will be invoked when an error is emitted from the shell.
-
-`logPlatformUtilUsage` (optional): Whether or not to log the usage of platform utilities. Defaults to false.
-
-`redactSensitiveData` (optional): Whether or not to redact sensitive data from the logs. Defaults to false.
+- `log` This will be invoked when a log is emitted from the shell.
+- `error` This will be invoked when an error is emitted from the shell.
+- `logPlatformUtilUsage` (optional): Whether or not to log the usage of platform utilities. Defaults to false.
+- `redactSensitiveData` (optional): Whether or not to redact sensitive data from the logs. Defaults to false.
 
 ### `routes` (optional)
 
@@ -93,7 +89,7 @@ type OneFERoutes = {
 };
 ```
 
-`defaultRoute`: The default route to load when no route is provided. Playground will be the default route if enabled. Otherwise, this will be the default route.
+- `defaultRoute`: The default route to load when no route is provided. Playground will be the default route if enabled. Otherwise, this will be the default route.
 
 ### `components` (optional)
 
@@ -106,6 +102,5 @@ type OneFEComponents = {
 };
 ```
 
-`getLoader` (optional): Custom loader component to be shown when a widget is being loaded.
-
-`getError` (optional): Custom error component to be shown when in an error state (e.g a widget fails to load)
+- `getLoader` (optional): Custom loader component to be shown when a widget is being loaded.
+- `getError` (optional): Custom error component to be shown when in an error state (e.g a widget fails to load)

src/content/docs/development/Platform Utilities/Context.mdx

@@ -1,9 +1,9 @@
 ---
 title: Context
-description: 'Context utils API'
+description: "Context utils API"
 ---
 
-## `platform.context.self`
+### `platform.context.self`
 
 Answers the question about who you are.
 
@@ -19,7 +19,7 @@ Answers the question about who you are.
 #### Example
 
 ```tsx
-import { platformProps } from '@1fe/shell';
+import { platformProps } from "@1fe/shell";
 
 function MySimpleComponent(props: WidgetProps) {
   return (
@@ -32,16 +32,14 @@ function MySimpleComponent(props: WidgetProps) {
 }
 ```
 
----
-
-## `platform.context.getHost`
+### `platform.context.getHost`
 
 Answers the question about who is hosting you.
 
 This is only offered for insights and logging purposes.
 
 :::danger
-Writing logic depending on the host is **NOT** okay. It is highly recommended to write functionality in a way that can be toggled on/off by prop-driven configuration.
+Writing logic depending on the host is **NOT** okay. It is highly recommended to write functionality in a way that it can be toggled on/off by prop-driven configuration.
 
 It is better to write your widget in a way that it can be hosted by any widget.
 :::
@@ -57,7 +55,7 @@ function getHost(): {
 #### Example
 
 ```tsx
-import { platformProps } from '@1fe/shell';
+import { platformProps } from "@1fe/shell";
 
 function MySimpleComponent(props: WidgetProps) {
   return (

src/content/docs/development/Platform Utilities/Overview.mdx

@@ -1,7 +1,7 @@
 ---
-title: 'Overview'
-iconName: 'flat-color-icons:electricity' # Icon browser at https://icon-sets.iconify.design/
-description: 'Utils shared and used by all Plugins & Widgets'
+title: "Overview"
+iconName: "flat-color-icons:electricity" # Icon browser at https://icon-sets.iconify.design/
+description: "Utils shared and used by all Plugins & Widgets"
 sidebar:
   order: 1
   badge:
@@ -12,7 +12,7 @@ sidebar:
 ### Importing 1fe Platform Utils
 
 ```tsx
-import { platformProps } from '@1fe/shell';
+import { platformProps } from "@1fe/shell";
 ```
 
 :::note
@@ -25,7 +25,7 @@ The above approach is also known as **shell import syntax** or **1fe contextual
 
 ```tsx
 // The 1fe shell provided the platform utils to all widgets loaded in 1fe
-import { PlatformPropsType, platformProps } from '@1fe/shell';
+import { PlatformPropsType, platformProps } from "@1fe/shell";
 
 // This type is for reference and is included out of box in the widget-starter-kit
 interface WidgetProps {
@@ -36,7 +36,7 @@ interface WidgetProps {
 const MyWidget = (props: WidgetProps) => {
   useEffect(() => {
     // this is how you access all utils, use these docs for examples
-    platformProps.utils.experience.setTitle('foo bar');
+    platformProps.utils.experience.setTitle("foo bar");
   }, []);
 
   return <>{/* ... */}</>;
@@ -53,9 +53,9 @@ Using the contextual injection, you can access the `platformProps` from anywhere
 
 #### Why contextual injection?
 
-1. No more prop drilling through the code.
-2. Stability of references for things like Widgets.get etc.
-3. No need for folks to work around by defining React contexts.
-4. We can now pass hooks from platformProps with a stable reference and not having to worry about react rule of hooks being voided.
-5. Access utils like logger etc outside of React lifecycle.
-6. Syntax sugar.
+- **No Prop Drilling**: No more prop drilling through the code.
+- **Stability of References**: Stability of references for things like Widgets.get etc.
+- **No Need for React Contexts**: No need for a shared context between widgets.
+- **Platform Hooks**: We can now pass hooks from platformProps with a stable reference and not having to worry about react rule of hooks being voided.
+- **Access Outside of React Lifecycle**: Access utils like logger etc outside of React lifecycle.
+- **Syntax Sugar**: The syntax is concise and easy to use.

src/content/docs/development/Platform Utilities/Widget.mdx

@@ -1,9 +1,9 @@
 ---
-title: 'Widgets'
-description: 'Easily load other widgets into your widget'
+title: "Widgets"
+description: "Easily load other widgets into your widget"
 ---
 
-## `get`
+### `get`
 
 The `platformProps.utils.widget.get` function is used to load a widget inside another widget. This function has a built-in retry mechanism. If the first request for your widget fails, it will try 2 more times.
 
@@ -12,20 +12,20 @@ The `platformProps.utils.widget.get` function is used to load a widget inside an
 ```ts
 function get(
   widgetId: string,
-  options?: { variantId: string; Loader: React.ReactNode },
+  options?: { variantId: string; Loader: React.ReactNode }
 ): React.FC;
 ```
 
 ### Basic usage
 
 ```tsx
-import { platformProps } from '@1fe/shell';
+import { platformProps } from "@1fe/shell";
 
 const App = (props: WidgetProps) => {
   // It's REQUIRED that you invoke widgets.get at the top of your component
-  const WidgetB = platformProps.utils.widgets.get('@namespace/widget-b');
+  const WidgetB = platformProps.utils.widgets.get("@namespace/widget-b");
 
-  return <WidgetB foo='bar' />;
+  return <WidgetB foo="bar" />;
 };
 ```
 
@@ -34,31 +34,31 @@ const App = (props: WidgetProps) => {
 You can replace the default by passing in a `ReactNode`. Below is an example of passing a fragment so the widget loads with no UI.
 
 ```tsx
-import { platformProps } from '@1fe/shell';
+import { platformProps } from "@1fe/shell";
 
 const App = (props: WidgetProps) => {
   // It's REQUIRED that you invoke widgets.get at the top of your component
-  const WidgetB = platformProps.utils.widgets.get('@namespace/widget-b', {
-    Loader: {<></>},
+  const WidgetB = platformProps.utils.widgets.get("@namespace/widget-b", {
+    Loader: <></>,
   });
 
-  return <WidgetB foo='bar' />;
+  return <WidgetB foo="bar" />;
 };
 ```
 
 ### Conditional rendering
 
 ```tsx
-import { platformProps } from '@1fe/shell';
-import { checkIfWidgetBShouldRender } from './utils';
+import { platformProps } from "@1fe/shell";
+import { checkIfWidgetBShouldRender } from "./utils";
 
 const App = (props: WidgetProps) => {
   // It's REQUIRED that you invoke widgets.get at the top of your component
-  const WidgetB = platformProps.utils.widgets.get('@namespace/widget-b');
+  const WidgetB = platformProps.utils.widgets.get("@namespace/widget-b");
 
   const shouldRenderWidgetB = checkIfWidgetBShouldRender();
 
-  return shouldRenderWidgetB ? <WidgetB foo='bar' /> : null;
+  return shouldRenderWidgetB ? <WidgetB foo="bar" /> : null;
 };
 ```
 
@@ -67,11 +67,11 @@ const App = (props: WidgetProps) => {
 While the `widgets.get` function has a built-in retry mechanism & error boundary, it is still possible for the widget to fail to load. The internal error boundary is set in place to handle errors and log them to our error tracking system, without influencing the UI or the parent error boundary. To provide a graceful fallback UI, you can use the `ErrorBoundary` component from `react-error-boundary`.
 
 ```tsx
-import { platformProps } from '@1fe/shell';
-import { ErrorBoundary } from 'react-error-boundary';
+import { platformProps } from "@1fe/shell";
+import { ErrorBoundary } from "react-error-boundary";
 
 const ErrorFallback = ({ error, resetErrorBoundary }) => (
-  <div role='alert'>
+  <div role="alert">
     <p>Something went wrong:</p>
     <pre>{error.message}</pre>
     <button onClick={resetErrorBoundary}>Try again</button>
@@ -80,24 +80,24 @@ const ErrorFallback = ({ error, resetErrorBoundary }) => (
 
 const App = (props: WidgetProps) => {
   // It's REQUIRED that you invoke widgets.get at the top of your component
-  const WidgetB = platformProps.utils.widgets.get('@namespace/widget-b');
+  const WidgetB = platformProps.utils.widgets.get("@namespace/widget-b");
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <WidgetB foo='bar' />
+      <WidgetB foo="bar" />
     </ErrorBoundary>
   );
 };
 ```
 
-## Lifecycle
+### Lifecycle
 
 The `widgets.get` function will return a React Suspense component, which when mounted will trigger the loading of the widget. If the suspense isn't mounted, the widget will not be loaded. If the widget is already loaded, the widget will be rendered immediately.
 
-## Anti-patterns
+### Anti-patterns
 
 Due to the fact that `widgets.get` leverages React hooks internally, it is important to avoid the following anti-patterns:
 
-1. Conditionally invoke widgets.get by either wrapping it inside of IF/ELSE statements, TRY/CATCH blocks or Null Coalescing operators.
-2. Invoke widgets.get from inside of useEffect or useCallback etc. We make a special adjustment for useMemo, yet we urge you to move away from memoizing widgets.get
-3. Return early before widgets.get is invoked in your React component.
+1.  Conditionally invoke widgets.get by either wrapping it inside of IF/ELSE statements, TRY/CATCH blocks or Null Coalescing operators.
+2.  Invoke widgets.get from inside of useEffect or useCallback etc. We make a special adjustment for useMemo, yet we urge you to move away from memoizing widgets.get
+3.  Return early before widgets.get is invoked in your React component.