updated cli and cms pages

Author: pavanpodila

src/content/docs/intro/cli.mdx

@@ -7,9 +7,9 @@ import { Aside, Tabs, TabItem, Badge } from '@astrojs/starlight/components'
 import { PubBadge } from '@/components/PubBadge'
 
 The Vyuh CLI is a new tool that allows you to quickly scaffold projects,
-features, and schemas for the Vyuh framework. It is built on top of the `Mason`
-package and includes a few other utilities to make it easier to generate
-projects and features.
+features, schemas and content-items for the Vyuh framework. It is built on top
+of the `Mason` package and includes a few other utilities to make it easier to
+generate projects and features.
 
 <Aside type={'note'} title={'PNPM and Melos'}>
 
@@ -66,7 +66,7 @@ A similar setup is required for those running on **Windows**.
 
 </Aside>
 
-### Create your new project
+## Create your new project
 
 <Aside type={'note'} title={'Prerequisites'}>
 
@@ -178,6 +178,41 @@ Run "vyuh help" to see global options.
 
 ```
 
+## Add a new content item
+
+The `vyuh create item <item-name>` command is used to create a new content item
+within your Vyuh project. Content items represent individual pieces of content,
+such as articles, blog posts, or product descriptions.
+
+```text title="Create Item" {3}
+Create a new Vyuh ContentItem.
+
+Usage: vyuh create item <item-name> [arguments]
+-h, --help                Print this usage information.
+-o, --output-directory    The desired output directory when creating a new item.
+-f, --feature             The feature to add the content item to. If not specified, the item will be created without a feature context.
+
+Run "vyuh help" to see global options.
+```
+
+The `<item-name>` argument specifies the name of the content item to be created.
+The name should be a valid Dart identifier.
+
+The `-o` or `--output-directory` option allows you to specify the directory
+where the content item will be created. If not specified, the content item will
+be created in the current directory.
+
+The `-f` or `--feature` option allows you to specify the feature to which the
+content item belongs. If specified, the content item will be created within the
+`lib/content` directory of the specified feature. If not specified, the content
+item will be created in the `lib/content` directory of the current project.
+
+After creating the content item, you will need to:
+
+1.  Run `dart run build_runner build` to generate the JSON serialization code.
+2.  Register the `ContentBuilder` in your `FeatureDescriptor` with the
+    `ContentExtensionDescriptor()`.
+
 ## Environment checks with Doctor <Badge text="New" />
 
 The `vyuh doctor` command helps you verify that your development environment is

src/content/docs/intro/images/refresh-button.png

@@ -4,7 +4,9 @@ description: Simple integration of Vyuh with Sanity.io, the default CMS
 ---
 
 import { PubBadge } from '@/components/PubBadge'
-import { Aside } from '@astrojs/starlight/components'
+import { Image } from 'astro:assets'
+import { Aside, Badge } from '@astrojs/starlight/components'
+import refreshButtonImage from './images/refresh-button.png'
 
 Now that we know how to setup a feature in Vyuh, let's see how we can integrate
 it with a CMS. We will be using [Sanity.io](https://sanity.io) for this example,
@@ -282,6 +284,134 @@ launches on the correct port.
 
 </Aside>
 
+## 6. Enable Live Content Editing <sup><Badge text="New" /></sup>
+
+One of the most powerful features of Vyuh is the ability to see content changes
+in real-time without having to restart your app or manually refresh. This
+feature, called Live Content Editing, significantly improves your development
+workflow.
+
+### How to Enable Live Routes
+
+Enabling Live Content Editing is as simple as setting the `useLiveRoute` flag to
+`true` on the `DefaultContentPlugin`. Here's how you can modify your main.dart
+file:
+
+```dart {13} title="lib/main.dart"
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  vc.runApp(
+    initialLocation: '/blog',
+    features: () => [
+      system.feature,
+      developer.feature,
+      blog.feature,
+    ],
+    plugins: PluginDescriptor(
+      content: DefaultContentPlugin(
+        useLiveRoute: true, // Enable live routes
+        provider: SanityContentProvider(
+          SanityClient(
+            SanityConfig(
+              dataset: 'your_dataset',
+              projectId: 'your_project_id',
+              token:'your_token',
+              perspective: Perspective.previewDrafts, // To see draft content
+              useCdn: false, // Required for live updates
+            ),
+          ),
+        ),
+      )
+    ),
+  );
+}
+```
+
+### Important Configuration Notes
+
+For Live Content Editing to work properly, make sure to:
+
+1. Set `useLiveRoute: true` on the `DefaultContentPlugin`
+2. Set `perspective: Perspective.previewDrafts` to see draft content before
+   publishing
+3. Set `useCdn: false` as we want to work with draft content
+4. Provide a valid Sanity token with appropriate permissions. Without a valid
+   token this will fail.
+
+### How It Works
+
+Behind the scenes, Vyuh leverages Sanity's Live Content API to establish a
+real-time connection between your app and the CMS. When content changes are made
+in the Sanity Studio, the API sends those changes to your app, which then
+updates the UI accordingly.
+
+This works in both development and production environments. In production, you
+would typically need to publish your content before it appears on customer
+devices, unless you specifically configure your app to show draft content.
+
+<Aside type="tip" title="Development vs. Production">
+
+In development, it's useful to see draft content immediately using
+`Perspective.previewDrafts`.
+
+For production apps, you might want to switch to `Perspective.published` to
+ensure only published content is visible to users.
+
+</Aside>
+
+### Manual Route Refreshing
+
+In addition to live updates, Vyuh also provides a way to manually refresh routes
+through the `allowRouteRefresh` parameter. This is useful when you want to give
+users the ability to pull-to-refresh content or when you need a refresh button
+in your UI.
+
+```dart {14} title="lib/main.dart"
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  vc.runApp(
+    initialLocation: '/blog',
+    features: () => [
+      system.feature,
+      developer.feature,
+      blog.feature,
+    ],
+    plugins: PluginDescriptor(
+      content: DefaultContentPlugin(
+        useLiveRoute: true,
+        allowRouteRefresh: true, // Enable manual refreshing
+        provider: SanityContentProvider(
+          SanityClient(
+            SanityConfig(
+              dataset: 'your_dataset',
+              projectId: 'your_project_id',
+              token:'your_token',
+              perspective: Perspective.previewDrafts,
+              useCdn: false,
+            ),
+          ),
+        ),
+      )
+    ),
+  );
+}
+```
+
+<Image src={refreshButtonImage} alt={'Manual Refresh Button'} />
+
+This parameter works with both live routes and static routes, giving you
+flexibility in how content updates are handled in your application.
+
+<Aside type="note">
+
+Even when `useLiveRoute` is enabled, manual refreshing can still be useful in
+certain scenarios, such as when you want to force an immediate refresh rather
+than waiting for the next live update.
+
+</Aside>
+
 ## Summary
 
 This guide gave you a quick way of creating content on Sanity and seeing it live