Add a CMS Starter example

[triozer]

Description

This pull request introduces a new CMS starter example, including updates to various configuration files, data sources, and UI components. The changes aim to set up a basic CMS plugin for Framer, providing a template for further development.

QA

• Clone the repository.
• Navigate to the examples/cms directory.
• Install dependencies and start the plugin locally.
• Adding a new Collection
  • Create a new collection.
  • Open the CMS plugin.
    • Confirm a prompt appears asking to select a collection to sync.
    • Verify you can select from the available collections.
• Managing an existing Collection
  • Open an existing collection that has been set up previously.
  • Click the "Manage" button.
    • Confirm the "Field Mapping UI" is displayed.
    • Verify you can:
      • Change the slug field to a valid string field.
      • Rename fields.
      • Toggle fields on/off by clicking them.
• Syncing an existing Collection
  • Open an existing, pre-configured collection.
  • Click the "Sync" button.
    • Confirm the sync process starts immediately.
    • Verify the collection syncs with the configured data source without further setup.

Additional Checks

• Ensure all UI elements are properly styled and responsive.
• Confirm error states are handled gracefully.
• Verify field changes persist after saving.
• Ensure sync operations display appropriate loading states.

[huntercaron]

Lets call the actual folder "cms" instead of "cms-starter" since its already in a folder called "examples"

[huntercaron]

Why am I getting this?

[huntercaron]

Trying to actually swap in my own cms source (bluesky) its not the most clear process still.

In theory it should be pretty simple, to get the data this is enough, but then I run into complexity of not sure how to set things up

import { AtpAgent } from "@atproto/api"

  const agent = new AtpAgent({
    service: "https://public.api.bsky.app",
  })
  const profile = await agent.getProfile({ actor: "framer.com" })

  const { data } = await agent.getAuthorFeed({
    actor: profile.data.did,
    filter: "posts_and_author_threads",
    limit: 30,
  })
  

[huntercaron]

nit: lets split this on a few lines, its a bit weird to deconstruct directly from the fetch like that on the same line I think

[huntercaron]

I also think keeping the DataSource type separate is easier to read rather than inline like this

[huntercaron]

ohhh I see now its a bit different as DataSource means it has the ID? but I want an inline type here without the ID?

[triozer]

ohhh I see now its a bit different as DataSource means it has the ID? but I want an inline type here without the ID?

Yes, we can do that but I think it's better if we re-use the types we already defined right?