Refresh CloudCannon CMS guide

src/content/docs/en/guides/cms/cloudcannon.mdx

@@ -9,27 +9,127 @@ service: CloudCannon
 i18nReady: true
 ---
 
-import Grid from '~/components/FluidGrid.astro'
-import Card from '~/components/ShowcaseCard.astro'
+import Grid from '~/components/FluidGrid.astro';
+import Card from '~/components/ShowcaseCard.astro';
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
-[CloudCannon](https://cloudcannon.com) is a Git-based headless content management system that provides a visual editor for your content.
+[CloudCannon](https://cloudcannon.com) is a Git-based headless content management system that provides a visual editor for your content and UI components locally, providing a rich, live editing experience.
+
+## Integrating with Astro
+
+This guide will describe the the process of configuring CloudCannon as a CMS for Astro using the CloudCannon Site Dashboard.
+
+This provides you with:
+
+- a [Data Editor](https://cloudcannon.com/documentation/articles/the-data-editor/) for managing structured data files and markup
+- a [Content Editor](https://cloudcannon.com/documentation/articles/the-content-editor/) for WYSIWYG rich text editing in a minimal view
+- a [Visual Editor](https://cloudcannon.com/documentation/articles/the-visual-editor/) for an an interactive preview of your site, allowing you to edit directly on the page.
+
+You can also configure role-based access to a minimal [Source Editor](https://cloudcannon.com/documentation/articles/the-source-editor/), an in-browser code editor for making minor changes to the source code of your files.
+
+## Prerequisites
+
+{/* TODO: Does CloudCannon want a particular UTM link? */}
+
+1. A CloudCannon account. If you don’t have an account, you can [sign up with CloudCannon](https://app.cloudcannon.com/register).
+2. An existing Astro project stored locally, or on one of CloudCannon's supported Git providers: GitHub, GitLab, or Bitbucket. If you do not have an existing project, you can start with CloudCannon's [Astro Starter Template](https://cloudcannon.com/templates/astro-starter/).
+
+## Configure a new Site
+
+The following steps will configure a new Astro Site that allows you to manage your content in your CloudCannon Site dashboard and use CloudCannon's WYSIWYG text editor.
+
+<Steps>
+
+1. In your CloudCannon Organization Home page, create a new Site.
+2. Authenticate your Git provider and select the Astro repository you want to connect to.
+3. Choose a name for your Site, then CloudCannon will create and start syncing your files.
+4. Follow CloudCannon's guided tasks in your Site dashboard for completing your site setup, including creating a CloudCannon configuration file.
+5. Save your configuration file to commmit it and your CloudCannon preferences to your Git repository.
+
+</Steps>
+
+For more detailed instructions, see [CloudCannon's Getting Started Guide](https://cloudcannon.com/documentation/guides/getting-started-with-cloudcannon/).
+
+## Configure Visual Editing
+
+CloudCannon's [Visual Editor](https://cloudcannon.com/documentation/articles/the-visual-editor/) allows you to see and edit text, images, and other content in a live, interactive preview of your site. These updates can be made using editable regions, data panels, and the sidebar.
+
+Follow [CloudCannon's guide to set up visual editing](https://cloudcannon.com/documentation/guides/set-up-visual-editing/) (also available in your Site Dashboard). This will show you how to define [editable regions](https://cloudcannon.com/documentation/guides/set-up-visual-editing/an-overview-of-editable-regions/) of your live preview by setting HTML `data-` attributes on DOM elements, or by inserting web components.
+
+For example, the following template creates an editable `author` value that can be updated in the live preview:
+
+```html
+<p>By: <editable-text data-prop="author">{author}</editable-text></p>
+```
+
+### Visual Editing with components
+
+CloudCannon allows you to [define Component Editable Regions](https://cloudcannon.com/documentation/guides/set-up-visual-editing/visual-editing-for-components/) for live re-rendering of Astro components in the Visual Editor. This gives you the same interactive editing experience for your Astro components.
+
+<Steps>
+1. Install the [`@cloudcannon/editable-regions`](https://github.com/CloudCannon/editable-regions) package.
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install @cloudcannon/editable-regions
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add @cloudcannon/editable-regions
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add @cloudcannon/editable-regions
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+2. Add the `editableRegions` integration to your Astro config:
+
+    ```js title="astro.config.mjs" ins={2} ins="editableRegions()"
+    import { defineConfig } from 'astro/config';
+    import editableRegions from "@cloudcannon/editable-regions/astro-integration";
+
+    export default defineConfig({
+      // ...
+      integrations: [editableRegions()],
+      // ...
+    });
+    ```
+
+3. Follow [CloudCannon's instructions to register your components](https://cloudcannon.com/documentation/guides/set-up-visual-editing/visual-editing-for-components/#register-your-components). Registering your components tells CloudCannon that those components should be bundled for client-side use in the Visual Editor.
+
+4. Add the appropriate attributes to your components for visual editing. For example, the following `CTA.astro` component properties such as description and button color can be updated in CloudCannon's Visual Editor:
+
+    ```astro title="src/components/CTA.astro"
+    ---
+    const { description, link, buttonText, buttonColor } = Astro.props;
+    ---
+
+    <p data-editable="text" data-prop="description">{description}</p>
+    <a href={link}>
+        <button data-editable="text" data-prop="buttonText" style={`background-color: ${buttonColor}`}>{buttonText}</button>
+    </a>
+
+    ```
+</Steps>
+
+:::tip
+Also see CloudCannon's [Bookshop](https://cloudcannon.com/blog/how-cloudcannons-live-editing-works-with-astro-and-bookshop/) which provides a component development workflow for static websites that supports live visual editing and page-building with Astro.
+:::
 
 ## Official Resources
 
-- [Astro Starter Template](https://cloudcannon.com/templates/astro-starter/)
-- [Astro Multilingual Starter Template](https://cloudcannon.com/templates/astro-multilingual-starter/)
-- [Astro Starter Guide](https://cloudcannon.com/documentation/guides/astro-starter-guide/)
-- [Bookshop & Astro Guide](https://cloudcannon.com/documentation/guides/bookshop-astro-guide/)
 - [Astro Beginner Tutorial Series](https://cloudcannon.com/tutorials/astro-beginners-tutorial-series/)
+- [Astro Starter Template](https://cloudcannon.com/templates/astro-starter/)
+- Video: [Getting started with Astro and CloudCannon CMS: WYSIWYG blogging](https://www.youtube.com/watch?v=VCbZV-SCr20)
 - Blog: [How CloudCannon’s live editing works with Astro and Bookshop](https://cloudcannon.com/blog/how-cloudcannons-live-editing-works-with-astro-and-bookshop/)
-- Blog: [Out-of-this-world support for all Astro users](https://cloudcannon.com/blog/out-of-this-world-support-for-all-astro-users/)
+- [Bookshop & Astro Guide](https://cloudcannon.com/documentation/guides/bookshop-astro-guide/)
 
 ## Community Resources 
 
-- [CloudCannon announces official support for Astro](https://astro.build/blog/astro-cloudcannon-support/)
-
-## Themes
-
-<Grid>
-    <Card title="Sendit" href="https://astro.build/themes/details/sendit/" thumbnail="sendit.png"/>
-</Grid>
+- Video: [Astro CMS for Visual Editing: Getting Started with CloudCannon](https://www.youtube.com/watch?v=YcH53e1YamE)