From 445d22f8e72349140da6635d193ff1ec1c1f2bc5 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 25 Feb 2026 01:18:51 +0000 Subject: [PATCH 01/28] minor copy updates --- .../your-organization-on-cloudcannon.mdx | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx b/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx index 95c88c350..03b7068a5 100755 --- a/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx +++ b/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx @@ -1,23 +1,23 @@ --- _schema: default _uuid: 11fd1ae8-9277-43a6-a5a6-6e6e31630912 -_created_at: 2025-07-18T09:59:15.000Z +_created_at: 2025-07-18T09:59:15Z details: title: Your Organization on CloudCannon order: 3 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: >- - Learn about Organizations on CloudCannon and familiarize yourself with - Organization Navigation. - start_nav_group: null - related_articles: null + Learn about Organizations on CloudCannon and familiarize yourself with the + App Sidebar. + start_nav_group: + related_articles: author_notes: - docshots: null + docshots: Added! --- After you create your account, CloudCannon will open your *Organization Home* page. -*Organizations* are the highest level of content management on CloudCannon, containing all your websites, team members, and resources in CloudCannon. When you sign up, CloudCannon will automatically create an *Organization* for you. +Organizations are the highest level of content management on CloudCannon, containing all your websites, team members, and resources in CloudCannon. When you sign up, CloudCannon will automatically create an *Organization* for you. @@ -32,7 +32,13 @@ We'll cover the first few tasks in this guide: *Welcome Tour*, *Create a Site*, Each task has a heading, description, and documentation link. -

A quick note about Documentation...

CloudCannon links to helpful documentation in multiple places throughout the App. When you see the open book symbol next to a link, or on its own next to a title, clicking on it will open the relevant page on the CloudCannon Documentation website in a modal.

+ **A quick note about Documentation...** + + CloudCannon links to helpful documentation in multiple places throughout the App. When you see the question mark symbol next to a link, or on its own next to a title, clicking on it will open the relevant page on the CloudCannon Documentation website in a modal. + + + + The first task in the in-app guide is *Welcome Tour*. You can click the *Start your tour* button or, if you would rather go straight to configuring your first *Site*, skip this step of the guide. From 71acc8131d398c062af71d2e61a90827d9680223 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 25 Feb 2026 02:08:58 +0000 Subject: [PATCH 02/28] shuffle guide order --- .../create-your-cloudcannon-configuration-file.mdx | 10 +++++----- .../group-files-into-collections.mdx | 10 +++++----- .../more-resources.mdx | 2 +- .../save-your-configuration-file.mdx | 10 +++++----- .../tour-a-collection-browser.mdx | 10 +++++----- .../tour-your-site.mdx | 10 +++++----- 6 files changed, 26 insertions(+), 26 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx index 67e0f3bf0..e56650d39 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx @@ -1,19 +1,19 @@ --- _schema: default _uuid: 64f7c038-a63e-4a95-bd1e-f72f3bd92db6 -_created_at: 2025-07-18T10:13:36.000Z +_created_at: 2025-07-18T10:13:36Z details: title: Create your CloudCannon Configuration File - order: 6 + order: 5 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: >- Learn about the CloudCannon Configuration File, including what it does and how to make one. - start_nav_group: null - related_articles: null + start_nav_group: + related_articles: author_notes: - docshots: null + docshots: Added! --- The next task in the *Getting Started with Editing* in-app guide is to *Create your CloudCannon Configuration File*. diff --git a/developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx b/developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx index 5e54635de..cc4234154 100755 --- a/developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx +++ b/developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx @@ -1,19 +1,19 @@ --- _schema: default _uuid: a42eeb19-f82a-4adc-9a63-4d7849e52104 -_created_at: 2025-07-22T01:39:46.000Z +_created_at: 2025-07-22T01:39:46Z details: title: Group files into Collections - order: 7 + order: 14 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: >- Learn about Collections in CloudCannon, including what they are and how to add them. - start_nav_group: null - related_articles: null + start_nav_group: + related_articles: author_notes: - docshots: null + docshots: Added! --- A major benefit of using a CMS is the ability to organize your files in a user-friendly interface for easy browsing. diff --git a/developer/guides/getting-started-with-cloudcannon/more-resources.mdx b/developer/guides/getting-started-with-cloudcannon/more-resources.mdx index f0f8c8f81..f8ed6ab28 100755 --- a/developer/guides/getting-started-with-cloudcannon/more-resources.mdx +++ b/developer/guides/getting-started-with-cloudcannon/more-resources.mdx @@ -4,7 +4,7 @@ _uuid: e7b5b408-cdfd-4e5e-a841-ee20bb6393e0 _created_at: 2025-07-21T21:44:55Z details: title: More resources - order: 10 + order: 8 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: >- diff --git a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx index 85d190f64..6e7488136 100755 --- a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx @@ -1,19 +1,19 @@ --- _schema: default _uuid: a5cc2aca-433b-4589-94b5-706b977a9d95 -_created_at: 2025-07-22T01:33:57.000Z +_created_at: 2025-07-22T01:33:57Z details: title: Save your Configuration File - order: 9 + order: 7 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: >- Learn how to save the changes to your Configuration File back to your Git repository. - start_nav_group: null - related_articles: null + start_nav_group: + related_articles: author_notes: - docshots: null + docshots: Added! --- Over the course of this guide, we have added content to the *CloudCannon Configuration File* several times. CloudCannon will live update every time you add the *Configuration File*, but it is still important to save your changes back to your Git repository. diff --git a/developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx b/developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx index 6819f0731..ddba4efdb 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx @@ -1,19 +1,19 @@ --- _schema: default _uuid: 9bc3e30b-feb8-40ab-9c58-49400fcd537f -_created_at: 2025-10-02T22:16:46.000Z +_created_at: 2025-10-02T22:16:46Z details: title: Tour a Collection Browser - order: 8 + order: 14 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: >- Take a guided tour of the new Collection Browser and explore the tools for managing your files in CloudCannon. - start_nav_group: null - related_articles: null + start_nav_group: + related_articles: author_notes: - docshots: null + docshots: Added! --- The next task in the *Getting Started with Editing* in-app guide is *Tour a Collection Browser*, which will point out important UI in the *Collection Browser*. If you would rather continue configuring CloudCannon, feel free to skip this task. diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index c52d3e67a..45189cd51 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -1,17 +1,17 @@ --- _schema: default _uuid: f9bb9f93-ba95-4ee8-945f-984a6be80a47 -_created_at: 2025-10-02T22:14:41.000Z +_created_at: 2025-10-02T22:14:41Z details: title: Tour your Site - order: 5 + order: 6 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: Take a guided tour around the new Site you have made in CloudCannon. - start_nav_group: null - related_articles: null + start_nav_group: + related_articles: author_notes: - docshots: null + docshots: Added! --- The next task in the *Getting Started with Editing* in-app guide is *Tour your new Site*, which points out important UI on your new *Site*. If you would rather continue configuring CloudCannon, feel free to skip this task. From 6ffa33cd902442b0f4981746b4c796876d7045f7 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 25 Feb 2026 20:17:54 +0000 Subject: [PATCH 03/28] update docshots id --- _data/docshots.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/docshots.yml b/_data/docshots.yml index bfd223916..7616c32a0 100644 --- a/_data/docshots.yml +++ b/_data/docshots.yml @@ -1 +1 @@ -source: main_7a98e60ce3b2b5dbd1380b21963584b2ed20198a +source: main_a8385b557eec9ee194f4e9a5824db94f49bbf59b From 1ef884c1ab1513195eb6a180e2f7a34b2c182f2a Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 25 Feb 2026 21:16:46 +0000 Subject: [PATCH 04/28] update config file copy --- .../create-a-site.mdx | 10 ++--- ...te-your-cloudcannon-configuration-file.mdx | 44 ++++++++++++++----- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx index dd74f2cc6..984fd8afd 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx @@ -1,17 +1,17 @@ --- _schema: default _uuid: 1f1d14c4-4ab6-4495-88fe-9ec1850c3a74 -_created_at: 2025-07-18T10:09:31.000Z +_created_at: 2025-07-18T10:09:31Z details: title: Create a Site order: 4 image: >- https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: Learn about Sites on CloudCannon and how to create your first Site. - start_nav_group: null - related_articles: null + start_nav_group: + related_articles: author_notes: - docshots: null + docshots: Added! --- A *Site* is where you see, edit, and review all your website files. *Sites* are core to your CloudCannon experience and are where you and your content teams will spend the majority of your time. @@ -108,7 +108,7 @@ On your *Site Dashboard*, you'll see another in-app guide: *Getting Started with The first task in the *Getting Started with Editing* in-app guide is to *Add your files*. As CloudCannon is already syncing your files from your Git repository, you should see an in progress message under this step. This process is usually quick, but it may take a few minutes for larger repositories. -Once CloudCannon has finished syncing, this step of the guide will update and allow you to mark the task as complete. +Once CloudCannon has finished syncing, you can click the *Next* button. diff --git a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx index e56650d39..8b6f6c936 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx @@ -23,29 +23,51 @@ The *CloudCannon Configuration File* is the heart of your CloudCannon experience As we go through the later steps of this guide, we'll add more to our *Configuration File*. Let's create one. -## Initial content for the *CloudCannon Configuration File* - Click the *\+ Create my Configuration File* button in your in-app guide under the *Create your CloudCannon Configuration File* task. CloudCannon will open the *Create my Configuration File* modal. -The *CloudCannon Configuration File* is stored at the root of your website directory by default and can be YAML (or JSON). When you answer the questions in this modal, CloudCannon will create the `/cloudcannon.config.yml` file in the root of your repository. - - +The *CloudCannon Configuration File* is stored at the root of your website directory by default and can be YAML or JSON. When you answer the questions in this modal, CloudCannon will create the `/cloudcannon.config.yml` file in the root of your repository. -To start with, CloudCannon needs to know two key pieces of information about your *Site*: which Static Site Generator (SSG) you are using and where your *Source Folder* is in your repository. +## Select your *Static Site Generator* -An SSG is a tool for generating a static HTML website from your files. CloudCannon supports various SSGs, from Astro, Eleventy, and Hugo to Jekyll, MkDocs, and Lume. You can choose whichever SSG is appropriate for your website files. + -CloudCannon will use the information found in your files to suggest an SSG. You can click on the *Use* button next to the suggested SSG to select it, or use an option from the *Static Site Generator* dropdown. +To start with, CloudCannon needs to know which Static Site Generator your *Site* uses. An SSG is a tool for generating a static HTML website from your files. CloudCannon supports various SSGs, from Astro, Eleventy, and Hugo to Jekyll, MkDocs, and Lume. You can choose whichever SSG is appropriate for your website files. -The *Source Folder* defines the base path for your SSG source files relative to the root of your directory. Most websites use the root of their repository as the *Source Folder*. However, if your source folder is nested in your repository (such as if you have a mono-repo), you should check the *Use custom source* box and enter the file path in the *Source Folder* text field. +CloudCannon will use the information found in your files to suggest an *SSG*. You can click on the *Use* button under the right side of the *Static Site Generator* dropdown to populate it with CloudCannon's suggestion, or select an option from the list of CloudCannon's supported *SSGs*. -At the bottom of the *Create my Configuration File* modal is the *Show changes* button. Clicking this button will show you a preview of the initial content of your *CloudCannon Configuration File*. This content is based on your answers to the above questions and converted to YAML. +At the bottom of the *Create my Configuration File* modal is the *Preview* button. Clicking this button will show you a preview of the initial content of your *CloudCannon Configuration File*. -Click the *Create my Configuration File* button at the bottom of the modal. CloudCannon will add `cloudcannon.config.yml` to the root of your repository. Once you have returned to your *Site Dashboard*, you can mark the *Create your CloudCannon Configuration File* task as complete. +## Select your *Source Folder* (optional) + +CloudCannon needs to know the base path for your SSG source files relative to the root of your directory, called the *Source Folder*. Most websites use the root of their repository as the *Source Folder*. + +However, if your source is nested in your repository (such as if you have a mono-repo), you should check the *Use a custom source* box and enter the file path in the *Source Folder* text field. + +## Select your *Collections* + +Click the *Next* button on the bottom right of the *Create my Configuration File* modal. + + + +On the next page of the modal, CloudCannon asks you to select your *Collections*. A Collection is a group of files you want to edit in CloudCannon, and will match a folder in your *Git Repository* (e.g., a folder of pages, blog posts, product descriptions, or data files). + +Once you select your *Collections,* they will appear in your *Site Navigation* for easy access. On the right of the modal, you can see a preview of the default name and icon CloudCannon will assign to each *Collection* (you can change these later), along with the number of content files each *Collection* will contain. + + + +CloudCannon will automatically detect which folders in your *Git Repository* contain content files and suggest that you turn these into *Collections*. By default, suggested *Collections* are checked in the *Create my Configuration File* modal. If you are happy with these *Collections*, click the *Create my Configuration File* button at the bottom of the modal, and CloudCannon will add `cloudcannon.config.yml` to the root of your repository. + +Alternatively, you can deselect any folders you don't want to edit in CloudCannon using the checkbox before clicking the *Create my Configuration File* button. + +  + +  + +  Congratulations! You've made your first change to your website content: adding a file. You might notice that the *Save* button in the top right now has a red "1" notification. This indicates that you have made a change to one file. Don't click the *Save* button just yet—we'll talk about saving changes to your *Site* in the [save your Configuration File](/documentation/developer-guides/getting-started-with-cloudcannon/save-your-configuration-file/) step of this guide. From 9555abc6d3a36c56c4dffd57ba246bb8c085e5c1 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 25 Feb 2026 22:40:13 +0000 Subject: [PATCH 05/28] Update copy for config step --- ...te-your-cloudcannon-configuration-file.mdx | 49 ++++++++++++++++--- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx index 8b6f6c936..bce5763d7 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx @@ -59,20 +59,55 @@ Once you select your *Collections,* they will appear in your *Site Navigation* f -CloudCannon will automatically detect which folders in your *Git Repository* contain content files and suggest that you turn these into *Collections*. By default, suggested *Collections* are checked in the *Create my Configuration File* modal. If you are happy with these *Collections*, click the *Create my Configuration File* button at the bottom of the modal, and CloudCannon will add `cloudcannon.config.yml` to the root of your repository. +CloudCannon will automatically detect which folders in your *Git Repository* contain content files and suggest that you turn these into *Collections*. By default, suggested *Collections* are checked in the *Create my Configuration File* modal. Alternatively, you can deselect any folders you don't want to edit in CloudCannon using the checkbox. -Alternatively, you can deselect any folders you don't want to edit in CloudCannon using the checkbox before clicking the *Create my Configuration File* button. + + **What happens when you select one** ***Collection*** **nested inside of another?** -  + Files can only belong to one *Collection* at a time. If you select two *Collections*, one nested inside another, the files will appear in the *Collection* with the most specific *Path*. -  + Let's walk through an example. -  + + + Assume you have an `authors` folder nested in your `blog` folder (i.e., `/blog/authors/`). The `authors` folder contains non-output data files with profile information about your various blog authors. In addition to the `authors` folder, the `blog` folder also contains all your output blog files. In this case, both the `authors` and `blog` folders could be *Collections*. + + If you only add the "Blog" *Collection* with the path `/blog/`, all your output blog files will belong to this *Collection*, but so will all the data files inside `/blog/authors/`. All these files will appear as a sub-folder in your Blog *Collection Browser*. + + Adding the "Blog" *Collection* and the "Authors" *Collection* will separate these files, keeping your output blog files in one *Collection Browser* and your non-output data files in another. + + +Like the previous section of the *Create my Configuration File* modal, you can click the *Preview* button in the bottom right to preview the contents you are adding to your *CloudCannon Configuration File*. + +Here's an example of what that configuration code might look like for a *Collection*: + + +`````````` +collections_config___1___: + news___2___: + path___3___: /blog/news/ + icon___4___: breaking_news +`````````` + + All *Collections* are defined under the `collections_config` key in your *CloudCannon Configuration File*. + + + The *Key* for this *Collection* is `news`. All the configuration for this *Collection* is stored nder this *Key*. + + + The *Path* for this *Collection* is `/blog/news/`, telling CloudCannon where to find the *Collection* files in your repository. + + + The *Icon* for this *Collection* is `breaking_news`. + + + +When you are happy with your selection, click the *Create my Configuration File* button at the bottom of the modal, and CloudCannon will add `cloudcannon.config.yml` to the root of your repository. Your *Collections* will appear in the *Site Navigation.* Congratulations! You've made your first change to your website content: adding a file. You might notice that the *Save* button in the top right now has a red "1" notification. This indicates that you have made a change to one file. Don't click the *Save* button just yet—we'll talk about saving changes to your *Site* in the [save your Configuration File](/documentation/developer-guides/getting-started-with-cloudcannon/save-your-configuration-file/) step of this guide. - + You might also notice a new UI element next to the *Save* button. This is the *Configuration Mode switch*. Now that we have a *Configuration File*, we can use *Configuration Mode* to customize our *Site* and store our preferences. -In the next step of this guide, we'll use *Configuration Mode* to group our files into user-friendly *Collections*. \ No newline at end of file +In the next step of this guide, we'll look at your new *Site* and introduce you to some important UI. \ No newline at end of file From 1dcb096654c8cf34106756906e6ed459ddfb8db1 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 25 Feb 2026 23:23:47 +0000 Subject: [PATCH 06/28] delete file and reroute --- .cloudcannon/routing.json | 6 + .../group-files-into-collections.mdx | 125 ------------------ 2 files changed, 6 insertions(+), 125 deletions(-) delete mode 100755 developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx diff --git a/.cloudcannon/routing.json b/.cloudcannon/routing.json index 77420ed19..20b703d7a 100644 --- a/.cloudcannon/routing.json +++ b/.cloudcannon/routing.json @@ -61,6 +61,12 @@ "to": "/contact/", "status": 301 }, + + { + "from": "/documentation/developer-guides/getting-started-with-cloudcannon/group-files-into-collections/", + "to": "/documentation/developer-guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file/", + "status": 301 + }, { "from": "/documentation/articles/astro-starter-guide/", "to": "/documentation/guides/getting-started-with-cloudcannon/", diff --git a/developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx b/developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx deleted file mode 100755 index cc4234154..000000000 --- a/developer/guides/getting-started-with-cloudcannon/group-files-into-collections.mdx +++ /dev/null @@ -1,125 +0,0 @@ ---- -_schema: default -_uuid: a42eeb19-f82a-4adc-9a63-4d7849e52104 -_created_at: 2025-07-22T01:39:46Z -details: - title: Group files into Collections - order: 14 - image: >- - https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png - description: >- - Learn about Collections in CloudCannon, including what they are and how to - add them. - start_nav_group: - related_articles: -author_notes: - docshots: Added! ---- -A major benefit of using a CMS is the ability to organize your files in a user-friendly interface for easy browsing. - -In CloudCannon, you can group the files you want to edit into *Collections* (groups of similar files stored in the same folder of your website, e.g., a folder of pages, blog posts, product descriptions, or data files). Then, you can view, sort, filter, and scroll through all your files in a *Collection browser* by clicking on the name of a *Collection* in your *Site Navigation*. - -Let's complete the next task in the *Getting Started with Editing* in-app guide: *Group your files into Collections*. As part of this task, we'll also learn about *Configuration Mode*. - - - -## What is *Configuration Mode*? - -*Configuration Mode* is a tool for updating the configuration of your *Site*. The *Configuration Mode switch* on the right of your *Site Header* allows you to toggle *Configuration Mode* on and off. - - - -When *Configuration Mode* is on, CloudCannon will display *Edit configuration* buttons next to each element of the app you can configure. These *Edit configuration* buttons are all in purple, making them easy to find and visually distinct from other UI elements. - - - -Clicking on one of the *Edit configuration* buttons will open a modal or data panel with fields for configuring the UI element. You will be able to see any visual changes in CloudCannon in real time, and all your changes will be added to your *CloudCannon Configuration File*. - -When *Configuration Mode* is off, CloudCannon hides all the *Edit configuration* buttons, creating an uncluttered interface for content creators. We recommend spending most of your time with *Configuration Mode* off for a better editing experience, but you can always turn it on to make a quick change your *Site* configuration. - - -

Who can use Configuration Mode?

Turning on Configuration Mode only affects the way your Site looks for you; the purple Edit configuration buttons do not appear for other users of your Site.

You can restrict the capacity to use Configuration Mode to specific team members using permissions. We recommend you check out this guide after you have finished Getting Started.

- - -## Editing your *Collections* using *Configuration Mode* - -*Collections* appear in your *Site Navigation* for easy access; the *Edit Collections* button is also in your *Site Navigation* and is visible when you turn on *Configuration Mode*. - -Click the *Configuration Mode switch* on the right of the *Site Header* to turn it on. Purple *Edit configuration* buttons will appear in several places across the CloudCannon UI, including the *Edit Collections* button in the *Site Navigation.* - -Click on the *Edit Collections* button to open the *Edit Collections* modal. - - - -The *Edit Collections* modal displays all the folders from your repository in a tree structure. You can click on any folders highlighted in blue to expand them further. - -When you synced your files to your *Site*, CloudCannon also detected which folders contain files you might want to edit as a *Collection*. These folders are marked with the blue *Suggested* badge. - -Each folder has the following details: - -* A unique *Path*, defining the location of the folder in your repository, relative to the *Source Folder*. -* An *Icon* from [Google's Material Symbols and Icons](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Rounded), which is the one with the most similar name to the *Collection* *Key*, by default. -* A unique *Key*, derived from your *Collection Path*, which is used to store all your *Collection* configuration options in the *CloudCannon Configuration File*. - -The name of each *Collection* is the *Key* in title case form (i.e., `travel_blog` becomes "Travel Blog"). You can override this by configuring a *Display Name* later . - - - -Select the *Collections* you want using the checkboxes next to each folder. When you select a folder, CloudCannon will show you how many files are in each *Collection*. - - - - - **What happens when you select one** ***Collection*** **nested inside of another?** - - Files can only belong to one *Collection* at a time. If you select two *Collections*, one nested inside another, the files will appear in the *Collection* with the most specific *Path*. - - Let's walk through an example. - - - - Assume you have an `authors` folder nested in your `blog` folder (i.e., `/blog/authors/`). The `authors` folder contains non-output data files with profile information about your various blog authors. In addition to the `authors` folder, the `blog` folder also contains all your output blog files. In this case, both the `authors` and `blog` folders could be *Collections*. - - If you only add the "Blog" *Collection* with the path `/blog/`, all your output blog files will belong to this *Collection*, but so will all the data files inside `/blog/authors/`. All these files will appear as a sub-folder in your Blog *Collection Browser*. - - Adding the "Blog" *Collection* and the "Authors" *Collection* will separate these files, keeping your output blog files in one *Collection Browser* and your non-output data files in another. - - -Like the *Create my Configuration File* modal in the previous step, you can click on the *Show changes* button in the bottom left to preview the contents you are adding to your *CloudCannon Configuration File*. - -Here's an example of what that configuration code might look like: - - -`````````` - -collections_config___1___: - news___2___: - path___3___: /blog/news/ - icon___4___: breaking_news - -`````````` - - All *Collections* are defined under the `collections_config` key in your *CloudCannon Configuration File*. - - - The *Key* for this *Collection* is `news`. All the configuration for this *Collection* is stored nder this *Key*. - - - The *Path* for this *Collection* is `/blog/news/`, telling CloudCannon where to find the *Collection* files in your repository. - - - The *Icon* for this *Collection* is `breaking_news`. - - - -When you are happy with your selection, click the *\+ Add Collection* button at the bottom of the modal. Your *Collections* will appear in the *Site Navigation.* - - - - -

If you need to add or remove Collections in the future, the Edit Collections button will appear in the Site Navigation whenever you turn on Configuration Mode. Use the checkboxes to select or deselect Collections.

- - -Mark the *Group your files into Collections* task as complete when you are ready to move on. - -In the next step of this guide, we'll look at a *Collection Browser* and introduce you to some important UI for managing your files in CloudCannon. \ No newline at end of file From 70fd2d0d13b3f611d621ff197ebfd3a8b7482eea Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 26 Feb 2026 02:38:05 +0000 Subject: [PATCH 07/28] delete step and reroute --- .cloudcannon/routing.json | 6 +- .../tour-a-collection-browser.mdx | 76 ------------------- 2 files changed, 5 insertions(+), 77 deletions(-) delete mode 100755 developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx diff --git a/.cloudcannon/routing.json b/.cloudcannon/routing.json index 20b703d7a..a64767f37 100644 --- a/.cloudcannon/routing.json +++ b/.cloudcannon/routing.json @@ -61,12 +61,16 @@ "to": "/contact/", "status": 301 }, - { "from": "/documentation/developer-guides/getting-started-with-cloudcannon/group-files-into-collections/", "to": "/documentation/developer-guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file/", "status": 301 }, + { + "from": "/documentation/developer-guides/getting-started-with-cloudcannon/tour-a-collection-browser/", + "to": "/documentation/developer-guides/getting-started-with-cloudcannon/tour-your-site/", + "status": 301 + }, { "from": "/documentation/articles/astro-starter-guide/", "to": "/documentation/guides/getting-started-with-cloudcannon/", diff --git a/developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx b/developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx deleted file mode 100755 index ddba4efdb..000000000 --- a/developer/guides/getting-started-with-cloudcannon/tour-a-collection-browser.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -_schema: default -_uuid: 9bc3e30b-feb8-40ab-9c58-49400fcd537f -_created_at: 2025-10-02T22:16:46Z -details: - title: Tour a Collection Browser - order: 14 - image: >- - https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png - description: >- - Take a guided tour of the new Collection Browser and explore the tools for - managing your files in CloudCannon. - start_nav_group: - related_articles: -author_notes: - docshots: Added! ---- -The next task in the *Getting Started with Editing* in-app guide is *Tour a Collection Browser*, which will point out important UI in the *Collection Browser*. If you would rather continue configuring CloudCannon, feel free to skip this task. - - - -The *Collections* you selected in the *Edit Collections* modal are visible in your *Site Navigation*. Click on a *Collection* to open the *Collection Browser*. - - - -You may notice that several UI elements in your *Collections Browser* are purple. That's because these elements are all configurable, allowing you to customize your CloudCannon experience using *Configuration Mode*. - - - -For now, let's hide this UI by clicking on the purple *Configuration Mode switch* on the right of your *Site Header* to turn it off. - - - -Your *Collection Browser* allows you to browse, sort, and filter your *Collection* files, add new ones, and perform file actions like cloning or deleting. - - - -At the top of your *Collection Browser*, underneath your *Site Header*, is the *Collection Header*. This section contains important identifying information about your *Collection*, such as the *Name*, and *Documentation Link* or *Description* (if configured). - -Under the *Collection Header* are the *Collection Browser Controls*: the *Sort* *menu*, *View* *menu*, *Filter* text field, and the *\+ Add menu*. - - - -The *Sort* *menu* allows you to change how CloudCannon sorts your Collection files. By default, you can sort your files alphabetically by file path, or numerically by file size, date and time of file creation, or date and time the file was last modified. - - - -The *View* *menu* allows you to change how your files appear in the *Collection Browser*. You can switch between three view options: *List*, *Card*, and *Gallery*. - - - -The default view in your *Collection Browser* is the *Gallery* view. When the *Gallery* view option is selected, the *Collection Browser* displays the file name, file path (if it is an output *Collection*), the icon for the *Collection*, and has a gallery section for each file in a rectangular *Card*. The gallery section of the *Card* can display an image from within the file or a preview screenshot of the webpage. - - - - -

The gallery section of your File Card can also display a "No preview available" or "Failed to load image" warning.

"No preview available" indicates that the preview screenshot has not been configured. This will be the case for Sites that have not been built. We'll cover screenshots more in the Set up Visual Editing guide.

"Failed to load image" indicates that an error has occurred, and CloudCannon could not load the preview screenshot. Refreshing your browser may fix this.

- - -When the *Card* view option is selected, the *Collection Browser* displays the file name, file path, and the icon for the Collection for each file in a rectangular *Card*. This is similar to the *Gallery* view, except without a section for an image. - - - -When the *List* view option is selected, the *Collection Browser* displays the file name, file path, and the icon for the Collection for each file in a horizontal *Card*. - - - -By typing in the *Filter* text field, you can filter your Collection files to show file paths that match a given string. - - - -The *\+ Add* button allows you to add new files and folders to a Collection, which you can save back to your Git repository. - - - -In the next step of this guide, we'll cover how to save your *Configuration File* back to your Git repository. \ No newline at end of file From 61974ce3ee14d9430b004a9cceaf57083d5752d4 Mon Sep 17 00:00:00 2001 From: Ella <141297015+EllaCloudCannon@users.noreply.github.com> Date: Fri, 27 Feb 2026 15:22:25 +1300 Subject: [PATCH 08/28] update replaced screenshots --- user/articles/what-is-the-site-header.mdx | 2 +- user/guides/editing-in-cloudcannon/saving-your-changes.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/user/articles/what-is-the-site-header.mdx b/user/articles/what-is-the-site-header.mdx index 19ad4b734..56055f211 100755 --- a/user/articles/what-is-the-site-header.mdx +++ b/user/articles/what-is-the-site-header.mdx @@ -21,7 +21,7 @@ author_notes: --- At the top of your Site is your Site Header in gray. This UI element displays key information about your Site on the left, such as Site icon, name, branch, and project, and important tools on the right, including the *Avatar* list, Testing Domain link, Configuration Mode switch, and Save button. - + Some of these sections may not appear depending on your *Site's* configuration. diff --git a/user/guides/editing-in-cloudcannon/saving-your-changes.mdx b/user/guides/editing-in-cloudcannon/saving-your-changes.mdx index d44e29367..35e2a2d20 100644 --- a/user/guides/editing-in-cloudcannon/saving-your-changes.mdx +++ b/user/guides/editing-in-cloudcannon/saving-your-changes.mdx @@ -81,6 +81,6 @@ A *Testing Domain* is a free preview website that CloudCannon gives to every *Si You can open your *Testing Domain* or *Custom Domain* in a new tab by clicking the URL on the right of your *Site Header*. CloudCannon will open your live website in a new tab. - + If your developer has set up a publishing workflow for your *Site*, the *Testing Domain* allows you to see your changes live on the Internet without affecting your public website. We'll cover what you need to know about publishing workflows in the next step of this guide. \ No newline at end of file From a66f00e5c581b88d70edbe28bf40c7404db84c9d Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 27 Feb 2026 02:26:58 +0000 Subject: [PATCH 09/28] draft copy update --- .../tour-your-site.mdx | 104 ++++++++++++++---- 1 file changed, 82 insertions(+), 22 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 45189cd51..e9da00b3b 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -15,60 +15,120 @@ author_notes: --- The next task in the *Getting Started with Editing* in-app guide is *Tour your new Site*, which points out important UI on your new *Site*. If you would rather continue configuring CloudCannon, feel free to skip this task. - +Click the *Start your tour* button and let CloudCannon show you around. -Your *Site Dashboard* is the homepage for your *Site*. At this stage, your *Site* might look a little empty. Don't worry, we'll walk through how to configure each element, allowing you to craft an experience that works best for you and your team. + -On the left, you can see the *App sidebar* in blue. This is the same as in the previous step of this guide (when we showed you the *Organization Home* page). If you ever navigate away from your *Site* and need to find it again, click the *Sites* button in your *App sidebar* to open your *Sites Browser*. This page will list all the *Sites* in your *Organization*, and includes filtering and sorting options to help you find specific *Sites*. +## General *Site* UI -At the top of your screen is the *Site Header* This section displays key information about your *Site* in the top left, such as your *Site* icon, name, and branch, and important tools in the top right, such as the *Avatars* of all the team members viewing a *Site* and the *Save* button. +At the top of your *Site* is the *Site Header*, and on the left is the *Site Navigation* and *App Sidebar*. -More tools will appear in your *Site Header* as you set up your *Site*. We'll go through what all these tools do in the later steps of this guide. +The *Site Header* displays key information about your *Site* in the top left, such as your *Site* icon, name, and branch, and important tools in the top right, such as the *Avatars* of all the team members viewing a *Site* and the *Save* button. More tools will appear in your *Site Header* as you set up your *Site*. - +The *Site Navigation*... -On the left of your screen, just in from the *App sidebar*, is your *Site Navigation*. For now, your *Site Navigation* will just have a link to your *Dashboard* at the top, and two *Developer* links at the bottom for your *File Browser* and *Site Settings*. Once we have configured your *Site* further, more links will appear in the *Site Navigation*. +We introduced the *App Sidebar* in a [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon/). If you ever navigate away from your *Site* and need to find it again, you can click the *Sites* button in your *App sidebar* and use the *Sites Browser* to find it again. -Try clicking the link to your *File Browser*. As you can see, CloudCannon has synced all your files from your Git repository. +## The *Site Dashboard* - +The majority of your screen is taken up by your current *Site* page: in this case, the *Site Dashboard*. Your *Site Dashboard* is the homepage for your *Site*. -When you are ready to return to your *Dashboard*, click the *Dashboard* link in your *Site Navigation*. You can always tell which page you are on by which link is highlighted in the *Site Navigation*. + -Next to the *Dashboard* link in your *Site Navigation* are the *Status* indicator and the *Guide progress* indicator. The *Status* indicator shows whether your most recent sync and build were successful, while the *Guide progress* indicator shows how far you have progressed through your active in-app guide. +The *Site Dashboard* is the first link in your *Site Navigation*. Next to this link are the *Status* indicator and the *Guide progress* indicator, which show the status of your most recent sync and build and how far you have progressed through your active in-app guide. -Your *Dashboard* is the hub for key information about your *Site*. It is broken down into several tabs, including *Summary*, *Activity*, *Syncs*, and *Guides*. You can click on these tabs to navigate between them. + + +The *Site Dashboard* is broken down into several tabs, including *Summary*, *Activity*, *Syncs*, and *Guides*. -

Depending on the configuration of your Site, more tabs, like Builds and Build Deploys, can appear on your Site Dashboard.

+ Depending on how you configure your *Site*, additional tabs, such as *Builds* and *Build Deploys*, can appear on your *Site Dashboard*. On the *Summary* tab of your *Site Dashboard*, CloudCannon will display summary information about your *Site*. For new *Sites*, CloudCannon has the *Getting Started with Editing* in-app guide in the center, with suggested tasks for configuring your *Site*. Underneath the in-app guide is a list of your recent activity. On the right, the *Summary* tab also gives a preview of your most recent sync. - - On the *Activity* tab of your *Site Dashboard*, CloudCannon will show you a list of recent activity on your *Site* in reverse chronological order. This list refreshes every time you sync your *Site* or update your *Site Settings*. This list includes: * Every change made to your files from within CloudCannon or your Git provider (including the author, date, time, and commit message, if applicable). * When your *Site* has Syncing or Output errors. * Any changes made to your *Site Settings*, or *Branch* and *Publish Branch* settings. -For now, the *Activity* tab will only have two items: creating your *Site* and syncing your files. - -On the *Syncs* tab of your *Site Dashboard*, CloudCannon will show you a list of syncing logs for your *Site* in reverse chronological order. Right now, there is only one Sync log. +On the *Syncs* tab of your *Site Dashboard*, CloudCannon will show you a list of syncing logs for your *Site* in reverse chronological order. On the *Guides* tab of your *Site Dashboard*, CloudCannon will show you a list of in-app guides. You can see the number of available guides in a notification by the name of the tab. -Right now, we are working through *Getting Started with Editing*. There are several other guides you can follow to configure other features in CloudCannon after you have finished *Getting Started with Editing*. We'll talk about those guides later in the [More resources](/documentation/developer-guides/getting-started-with-cloudcannon/more-resources/) step of this guide. - -If you don't want to see your active in-app Guide on the *Summary* tab of your *Dashboard*, the available guides notification next to the *Guides* tab name, and the *Guide progress* indicator in your *Site Navigation*, you can click the *Disable Guides* button to hide that UI. +Right now, we are working through *Getting Started with Editing*. There are several other guides you can follow to configure other features in CloudCannon after you have finished *Getting Started with Editing*. -In the next step of this guide, we'll start working on the *Getting started with Editing* in-app guide for your *Site*, including creating your *CloudCannon Configuration File*. \ No newline at end of file +## The *Collection Browser* + +When you selected your *Collections* in the [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file/), CloudCannon added them to your *Site Navigation*. Click on one to open your *Collection Browser.* + +## Using *Configuration Mode* + +  + +  + +The *Collections* you selected in the *Edit Collections* modal are visible in your *Site Navigation*. Click on a *Collection* to open the *Collection Browser*. + + + +You may notice that several UI elements in your *Collections Browser* are purple. That's because these elements are all configurable, allowing you to customize your CloudCannon experience using *Configuration Mode*. + + + +For now, let's hide this UI by clicking on the purple *Configuration Mode switch* on the right of your *Site Header* to turn it off. + + + +Your *Collection Browser* allows you to browse, sort, and filter your *Collection* files, add new ones, and perform file actions like cloning or deleting. + + + +At the top of your *Collection Browser*, underneath your *Site Header*, is the *Collection Header*. This section contains important identifying information about your *Collection*, such as the *Name*, and *Documentation Link* or *Description* (if configured). + +Under the *Collection Header* are the *Collection Browser Controls*: the *Sort* *menu*, *View* *menu*, *Filter* text field, and the *\+ Add menu*. + + + +The *Sort* *menu* allows you to change how CloudCannon sorts your Collection files. By default, you can sort your files alphabetically by file path, or numerically by file size, date and time of file creation, or date and time the file was last modified. + + + +The *View* *menu* allows you to change how your files appear in the *Collection Browser*. You can switch between three view options: *List*, *Card*, and *Gallery*. + + + +The default view in your *Collection Browser* is the *Gallery* view. When the *Gallery* view option is selected, the *Collection Browser* displays the file name, file path (if it is an output *Collection*), the icon for the *Collection*, and has a gallery section for each file in a rectangular *Card*. The gallery section of the *Card* can display an image from within the file or a preview screenshot of the webpage. + + + + +

The gallery section of your File Card can also display a "No preview available" or "Failed to load image" warning.

"No preview available" indicates that the preview screenshot has not been configured. This will be the case for Sites that have not been built. We'll cover screenshots more in the Set up Visual Editing guide.

"Failed to load image" indicates that an error has occurred, and CloudCannon could not load the preview screenshot. Refreshing your browser may fix this.

+ + +When the *Card* view option is selected, the *Collection Browser* displays the file name, file path, and the icon for the Collection for each file in a rectangular *Card*. This is similar to the *Gallery* view, except without a section for an image. + + + +When the *List* view option is selected, the *Collection Browser* displays the file name, file path, and the icon for the Collection for each file in a horizontal *Card*. + + + +By typing in the *Filter* text field, you can filter your Collection files to show file paths that match a given string. + + + +The *\+ Add* button allows you to add new files and folders to a Collection, which you can save back to your Git repository. + + + +In the next step of this guide, we'll cover how to save your *Configuration File* back to your Git repository. \ No newline at end of file From 71ca88417ff76016c94dca4c23e10dde2828a3fc Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 27 Feb 2026 02:46:03 +0000 Subject: [PATCH 10/28] update draft --- .../tour-your-site.mdx | 38 ++++++++++--------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index e9da00b3b..5c992d8c2 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -71,24 +71,8 @@ Right now, we are working through *Getting Started with Editing*. There are seve When you selected your *Collections* in the [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file/), CloudCannon added them to your *Site Navigation*. Click on one to open your *Collection Browser.* -## Using *Configuration Mode* - -  -   -The *Collections* you selected in the *Edit Collections* modal are visible in your *Site Navigation*. Click on a *Collection* to open the *Collection Browser*. - - - -You may notice that several UI elements in your *Collections Browser* are purple. That's because these elements are all configurable, allowing you to customize your CloudCannon experience using *Configuration Mode*. - - - -For now, let's hide this UI by clicking on the purple *Configuration Mode switch* on the right of your *Site Header* to turn it off. - - - Your *Collection Browser* allows you to browse, sort, and filter your *Collection* files, add new ones, and perform file actions like cloning or deleting. @@ -131,4 +115,24 @@ The *\+ Add* button allows you to add new files and folders to a Collection, whi -In the next step of this guide, we'll cover how to save your *Configuration File* back to your Git repository. \ No newline at end of file +  + +  + +## Using *Configuration Mode* + +CloudCannon allows you to customize almost everything about your *Site* to create the best editing experience for your team. Turn on *Configuration Mode* to configure your *Site* using the switch on the right of the *Site Header*. + + + +When *Configuration Mode* is on, CloudCannon displays purple *Edit Configuration* buttons throughout the app. Each of these buttons allows you to configure a different UI element. + +Let's take a look at the *Collection Browser*. Using *Configuration Mode*, you can update the name, icon, and description, the default file sorting, the appearance of your *File Cards*, and more. + + + +You can also change your *Collections*. If you decide you want to add or remove a *Collection* from CloudCannon, you can return to the *Edit Collections* modal by clicking the *Edit Collections* button in the *Site Navigation*. + + + +Go ahead and try configuring your *Collection*, or open a *Collection* file in an *Editing Interface* by clicking on the *File Card*. When you are ready, we'll cover saving your *Configuration File* back to your *Git Repository* in the next step of this guide. \ No newline at end of file From ae96c1699fb7378f4a43c03462f0f10a67d425f1 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 19:43:56 +0000 Subject: [PATCH 11/28] update more resources --- .../more-resources.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/more-resources.mdx b/developer/guides/getting-started-with-cloudcannon/more-resources.mdx index f8ed6ab28..c41c240ee 100755 --- a/developer/guides/getting-started-with-cloudcannon/more-resources.mdx +++ b/developer/guides/getting-started-with-cloudcannon/more-resources.mdx @@ -21,6 +21,12 @@ By following each step in this guide so far, you have set up basic WYSIWYG editi Thanks for finishing the *Getting Started with CloudCannon* guide! If you have any questions, please reach out to our friendly [support team](/support/) or check out the [CloudCannon Community](https://community.cloudcannon.com/). We're always here to help. +## User guides + +Now that you have basic WYSIWYG editing set up on your *Site*, you can start using CloudCannon to manage your content. Here are a few guides to help you and your team learn important skills for working in CloudCannon. + +* [Editing in CloudCannon](/documentation/user-guides/editing-in-cloudcannon/)— Learn how to edit your files in CloudCannon's Content, Data, or Source Editors and save those changes back to your *Git Repository*. + ## Developer guides There are so many more features you can configure in CloudCannon. While technically optional, we highly recommend reading through these other guides to figure out which configuration you need. @@ -31,10 +37,4 @@ You can complete these guides in any order, but here's the order we suggest: Most of these guides have in-app counterparts. You can find a complete list of guides that configure your *Site* (rather than your *Organization*) under the *Guides* tab on your *Dashboard*. You can also see your current in-app guide on the *Summary* tab by marking it as active. - - -## User guides - -Now that you have basic WYSIWYG editing set up on your *Site*, you can start using CloudCannon to manage your content. Here are a few guides to help you and your team learn important skills for working in CloudCannon. - -* [Editing in CloudCannon](/documentation/user-guides/editing-in-cloudcannon/)— Learn how to edit your files in CloudCannon's Content, Data, or Source Editors and save those changes back to your Git repository. \ No newline at end of file + \ No newline at end of file From 4ea87bac1fe7a07d3bbf1633eb63a6960f80ee48 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 19:44:37 +0000 Subject: [PATCH 12/28] update save config --- .../save-your-configuration-file.mdx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx index 6e7488136..5a9d65714 100755 --- a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx @@ -9,7 +9,7 @@ details: https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png description: >- Learn how to save the changes to your Configuration File back to your Git - repository. + Repository. start_nav_group: related_articles: author_notes: @@ -17,7 +17,7 @@ author_notes: --- Over the course of this guide, we have added content to the *CloudCannon Configuration File* several times. CloudCannon will live update every time you add the *Configuration File*, but it is still important to save your changes back to your Git repository. -Let's commit the *CloudCannon Configuration File* and your CloudCannon preferences to your Git repository. +Let's commit the *CloudCannon Configuration File* and your CloudCannon preferences to your *Git Repository*. The *Save* button is on the right of your *Site Header*, and will show a red notification with the number of files that have unsaved changes. In this case, the *CloudCannon Configuration File* is the only file with unsaved changes. @@ -29,10 +29,6 @@ Click the *Save* button. CloudCannon will open the *Save changes* modal. The *Save changes* modal allows you to review a summary of all unsaved changes on a *Site*. Each file with unsaved changes is represented by a *File Card*, including the name of the file, the *Collection* it belongs to, when it was last updated and by whom. - -

If you have multiple people working on the same Site, the Save changes modal will separate the files into the My changes and Other changes sections. By default, only files where you have contributed to the unsaved changes are selected, but you can save changes made by your team members if you need to.

- - When you look at the files in the *Save changes* modal, you can see a three-dot icon at the top right of each *File Card*. This is the file *Context Menu*, containing a set of file actions that may be useful before you save your changes. Depending on your *Site* configuration, the *Context Menu* will contain different options. For this guide, your *CloudCannon Configuration File* should have the following options: From f84b287e7c8a310f1057a77dcaba78602e0f1420 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 19:46:15 +0000 Subject: [PATCH 13/28] update docshots id --- _data/docshots.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/docshots.yml b/_data/docshots.yml index 7616c32a0..e6a1a9236 100644 --- a/_data/docshots.yml +++ b/_data/docshots.yml @@ -1 +1 @@ -source: main_a8385b557eec9ee194f4e9a5824db94f49bbf59b +source: main_9ad6e7e6e88c269ea9d4188ecd46a251741b99af From c16a7de9288d17d05a3f7025ab83e996e7202e6d Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 19:47:37 +0000 Subject: [PATCH 14/28] update tour --- .../tour-your-site.mdx | 40 +++---------------- 1 file changed, 5 insertions(+), 35 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 5c992d8c2..89459aafa 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -37,7 +37,7 @@ The majority of your screen is taken up by your current *Site* page: in this cas The *Site Dashboard* is the first link in your *Site Navigation*. Next to this link are the *Status* indicator and the *Guide progress* indicator, which show the status of your most recent sync and build and how far you have progressed through your active in-app guide. - + The *Site Dashboard* is broken down into several tabs, including *Summary*, *Activity*, *Syncs*, and *Guides*. @@ -71,53 +71,23 @@ Right now, we are working through *Getting Started with Editing*. There are seve When you selected your *Collections* in the [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file/), CloudCannon added them to your *Site Navigation*. Click on one to open your *Collection Browser.* -  - -Your *Collection Browser* allows you to browse, sort, and filter your *Collection* files, add new ones, and perform file actions like cloning or deleting. +The *Collection Browser* allows you to browse, sort, and filter your *Collection* files, add new ones, and perform file actions like cloning or deleting. Each *Collection Browser* shows all the files in a single *Collection*, with each file represented by a customizable *File Card*. -At the top of your *Collection Browser*, underneath your *Site Header*, is the *Collection Header*. This section contains important identifying information about your *Collection*, such as the *Name*, and *Documentation Link* or *Description* (if configured). - -Under the *Collection Header* are the *Collection Browser Controls*: the *Sort* *menu*, *View* *menu*, *Filter* text field, and the *\+ Add menu*. - - - -The *Sort* *menu* allows you to change how CloudCannon sorts your Collection files. By default, you can sort your files alphabetically by file path, or numerically by file size, date and time of file creation, or date and time the file was last modified. - - - -The *View* *menu* allows you to change how your files appear in the *Collection Browser*. You can switch between three view options: *List*, *Card*, and *Gallery*. - - - The default view in your *Collection Browser* is the *Gallery* view. When the *Gallery* view option is selected, the *Collection Browser* displays the file name, file path (if it is an output *Collection*), the icon for the *Collection*, and has a gallery section for each file in a rectangular *Card*. The gallery section of the *Card* can display an image from within the file or a preview screenshot of the webpage. - -

The gallery section of your File Card can also display a "No preview available" or "Failed to load image" warning.

"No preview available" indicates that the preview screenshot has not been configured. This will be the case for Sites that have not been built. We'll cover screenshots more in the Set up Visual Editing guide.

"Failed to load image" indicates that an error has occurred, and CloudCannon could not load the preview screenshot. Refreshing your browser may fix this.

 -When the *Card* view option is selected, the *Collection Browser* displays the file name, file path, and the icon for the Collection for each file in a rectangular *Card*. This is similar to the *Gallery* view, except without a section for an image. - - - -When the *List* view option is selected, the *Collection Browser* displays the file name, file path, and the icon for the Collection for each file in a horizontal *Card*. - - - -By typing in the *Filter* text field, you can filter your Collection files to show file paths that match a given string. - - +At the top of your *Collection Browser*, underneath your *Site Header*, is the *Collection Header*. This section contains important identifying information about your *Collection*, such as the *Name*, and *Documentation Link* or *Description* (if configured). -The *\+ Add* button allows you to add new files and folders to a Collection, which you can save back to your Git repository. +Under the *Collection Header* are the *Collection Browser Controls*: the *Sort* *menu*, *View* *menu*, *Filter* text field, and the *\+ Add menu*. -  - -  +... ## Using *Configuration Mode* From 84dada84870d5394c2fb6fe57cd067ca0029de27 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 20:13:41 +0000 Subject: [PATCH 15/28] update tour --- .../tour-your-site.mdx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 89459aafa..47af886e5 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -25,9 +25,9 @@ At the top of your *Site* is the *Site Header*, and on the left is the *Site Nav The *Site Header* displays key information about your *Site* in the top left, such as your *Site* icon, name, and branch, and important tools in the top right, such as the *Avatars* of all the team members viewing a *Site* and the *Save* button. More tools will appear in your *Site Header* as you set up your *Site*. -The *Site Navigation*... +The *Site Navigation* lists important pages on your *Site*, such as your *Site Dashboard*, *Collections*, *File Browser*, and *Site Settings*. More links can appear in your *Site Navigation* depending on the CloudCannon features you configure (e.g., *Publishing* or *Inbox*). -We introduced the *App Sidebar* in a [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon/). If you ever navigate away from your *Site* and need to find it again, you can click the *Sites* button in your *App sidebar* and use the *Sites Browser* to find it again. +Finally, we introduced the *App Sidebar* in a [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon/) (the blue navigation bar on the far left). If you ever navigate away from your *Site* and need to find it again, you can click the *Sites* button in your *App sidebar* and use the *Sites Browser* to find it again. ## The *Site Dashboard* @@ -75,19 +75,27 @@ The *Collection Browser* allows you to browse, sort, and filter your *Collection -The default view in your *Collection Browser* is the *Gallery* view. When the *Gallery* view option is selected, the *Collection Browser* displays the file name, file path (if it is an output *Collection*), the icon for the *Collection*, and has a gallery section for each file in a rectangular *Card*. The gallery section of the *Card* can display an image from within the file or a preview screenshot of the webpage. - - -

The gallery section of your File Card can also display a "No preview available" or "Failed to load image" warning.

"No preview available" indicates that the preview screenshot has not been configured. This will be the case for Sites that have not been built. We'll cover screenshots more in the Set up Visual Editing guide.

"Failed to load image" indicates that an error has occurred, and CloudCannon could not load the preview screenshot. Refreshing your browser may fix this.

- - At the top of your *Collection Browser*, underneath your *Site Header*, is the *Collection Header*. This section contains important identifying information about your *Collection*, such as the *Name*, and *Documentation Link* or *Description* (if configured). Under the *Collection Header* are the *Collection Browser Controls*: the *Sort* *menu*, *View* *menu*, *Filter* text field, and the *\+ Add menu*. -... +The *Sort* *menu* lets you change how CloudCannon sorts your files in the *Collection Browser* (e.g., alphabetically by file path, numerically by file size, by date and time of file creation, or by date and time of last modification). + +The *View* *menu* allows you to change how your files appear in the *Collection Browser*. You can switch between three view options: *List*, *Card*, and *Gallery*. By default, your *Collection Browser* uses the *Gallery* view. The gallery section of the *Card* can display an image from within the file or a preview screenshot of the webpage. + + + The gallery section of your *File* *Card* can also display a "No preview available" or "Failed to load image" warning. + + "No preview available" indicates that the preview screenshot has not been configured. This will be the case for *Sites* that have not been built. We'll cover screenshots more in the [Set up Visual Editing](/documentation/developer-guides/set-up-visual-editing/) guide. + + "Failed to load image" indicates that an error has occurred, and CloudCannon could not load the preview screenshot. Refreshing your browser may fix this. + + +The *Filter* text field allows you to filter your *Collection* files to show file paths that match a given string. + +The *\+ Add* button allows you to add new files and folders to a Collection, which you can save back to your Git repository. ## Using *Configuration Mode* From 73372941bcbceb07f57967f333c865c11136362a Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 20:33:11 +0000 Subject: [PATCH 16/28] minor copy updates --- cloudcannon.config.yml | 2 +- .../getting-started-with-cloudcannon/tour-your-site.mdx | 8 +++++++- .../your-organization-on-cloudcannon.mdx | 4 ++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/cloudcannon.config.yml b/cloudcannon.config.yml index f9f2b7fff..58547b3de 100644 --- a/cloudcannon.config.yml +++ b/cloudcannon.config.yml @@ -110,7 +110,7 @@ _editables: bulletedlist: true code: true embed: true - format: "p h1 h2 h3 h4 h5 h6" + format: "p h2 h3" horizontalrule: true image_size_attributes: true italic: true diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 47af886e5..98aef563b 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -23,10 +23,16 @@ Click the *Start your tour* button and let CloudCannon show you around. At the top of your *Site* is the *Site Header*, and on the left is the *Site Navigation* and *App Sidebar*. + + The *Site Header* displays key information about your *Site* in the top left, such as your *Site* icon, name, and branch, and important tools in the top right, such as the *Avatars* of all the team members viewing a *Site* and the *Save* button. More tools will appear in your *Site Header* as you set up your *Site*. + + The *Site Navigation* lists important pages on your *Site*, such as your *Site Dashboard*, *Collections*, *File Browser*, and *Site Settings*. More links can appear in your *Site Navigation* depending on the CloudCannon features you configure (e.g., *Publishing* or *Inbox*). + + Finally, we introduced the *App Sidebar* in a [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon/) (the blue navigation bar on the far left). If you ever navigate away from your *Site* and need to find it again, you can click the *Sites* button in your *App sidebar* and use the *Sites Browser* to find it again. ## The *Site Dashboard* @@ -35,7 +41,7 @@ The majority of your screen is taken up by your current *Site* page: in this cas -The *Site Dashboard* is the first link in your *Site Navigation*. Next to this link are the *Status* indicator and the *Guide progress* indicator, which show the status of your most recent sync and build and how far you have progressed through your active in-app guide. +The *Site Dashboard* is the first link in your *Site Navigation*. Next to this link are the *Status* indicator and the *Guide progress* indicator, which show the status of your most recent sync or build, and how far you have progressed through your active in-app guide. diff --git a/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx b/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx index 03b7068a5..ba7fec0e8 100755 --- a/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx +++ b/developer/guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon.mdx @@ -25,6 +25,8 @@ After you create your account, CloudCannon will open your *Organization Home* pa

You can also join other people's Organizations by invitation, which will allow you to manage their content.

+## Organization Guide + To help you get started on CloudCannon, the *Home* page of your *Organization* has an in-app guide called *Getting Started: Setting up your Organization*. These tasks provide a list of goals for optimally setting up CloudCannon. We'll cover the first few tasks in this guide: *Welcome Tour*, *Create a Site*, *Authenticate with a Git provider*, and *Create a Site from a Git repository*. The remaining optional *Organization* tasks are covered in other guides. @@ -43,6 +45,8 @@ Each task has a heading, description, and documentation link. The first task in the in-app guide is *Welcome Tour*. You can click the *Start your tour* button or, if you would rather go straight to configuring your first *Site*, skip this step of the guide. +## General *Organization* UI + Let's take a look at some of the UI for your *Organization*. On the left is the *App Sidebar*. This contains several tools for managing your *Organization* and *Account*. At the top are links to your *Home*, *Sites*, *Projects*, *Domains*, and *Org Settings* pages. We'll cover each of these in greater detail later, or in other guides relevant to those sections. For now, it's important to note the link to the *Home* page at the top of the *App Sidebar*. If you get stuck, return to this page for more guidance. From 74aefa85526e0528a38a1ec0032d9136e940916b Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 22:10:19 +0000 Subject: [PATCH 17/28] Update docshots --- .../create-a-site.mdx | 2 +- .../create-your-cloudcannon-configuration-file.mdx | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx index 984fd8afd..a809919c8 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx @@ -34,7 +34,7 @@ When you create a *Site*, CloudCannon first needs to sync your website files fro This guide will cover how to create a *Site* from files stored in a Git repository. -## Create your first Site +## Create your first *Site* Let's walk through how to authenticate your Git provider, select a repository and branch, name your *Site*, and sync your files. If you already have at least one *Site* on CloudCannon and are using this guide to create another, most of the instructions will be the same; however, some pages or UI may look different. diff --git a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx index bce5763d7..c10cee655 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx @@ -17,7 +17,7 @@ author_notes: --- The next task in the *Getting Started with Editing* in-app guide is to *Create your CloudCannon Configuration File*. - + The *CloudCannon Configuration File* is the heart of your CloudCannon experience, allowing you to customize the functionality and appearance of your *Site*. You can configure your *Site Navigation*, Editing Interfaces, file appearance in the app, how CloudCannon adds new files, and more by adding formatted content to your *Configuration File*. @@ -25,7 +25,7 @@ As we go through the later steps of this guide, we'll add more to our *Configura Click the *\+ Create my Configuration File* button in your in-app guide under the *Create your CloudCannon Configuration File* task. CloudCannon will open the *Create my Configuration File* modal. - + The *CloudCannon Configuration File* is stored at the root of your website directory by default and can be YAML or JSON. When you answer the questions in this modal, CloudCannon will create the `/cloudcannon.config.yml` file in the root of your repository. @@ -39,10 +39,12 @@ CloudCannon will use the information found in your files to suggest an *SSG*. Yo At the bottom of the *Create my Configuration File* modal is the *Preview* button. Clicking this button will show you a preview of the initial content of your *CloudCannon Configuration File*. - + ## Select your *Source Folder* (optional) + + CloudCannon needs to know the base path for your SSG source files relative to the root of your directory, called the *Source Folder*. Most websites use the root of their repository as the *Source Folder*. However, if your source is nested in your repository (such as if you have a mono-repo), you should check the *Use a custom source* box and enter the file path in the *Source Folder* text field. @@ -51,13 +53,13 @@ However, if your source is nested in your repository (such as if you have a mono Click the *Next* button on the bottom right of the *Create my Configuration File* modal. - + On the next page of the modal, CloudCannon asks you to select your *Collections*. A Collection is a group of files you want to edit in CloudCannon, and will match a folder in your *Git Repository* (e.g., a folder of pages, blog posts, product descriptions, or data files). Once you select your *Collections,* they will appear in your *Site Navigation* for easy access. On the right of the modal, you can see a preview of the default name and icon CloudCannon will assign to each *Collection* (you can change these later), along with the number of content files each *Collection* will contain. - + CloudCannon will automatically detect which folders in your *Git Repository* contain content files and suggest that you turn these into *Collections*. By default, suggested *Collections* are checked in the *Create my Configuration File* modal. Alternatively, you can deselect any folders you don't want to edit in CloudCannon using the checkbox. From 4c78d3f1cacbe40c2056f93d05eef2829ba950ef Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 2 Mar 2026 22:34:19 +0000 Subject: [PATCH 18/28] update docshots --- .../getting-started-with-cloudcannon/tour-your-site.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 98aef563b..22d379a00 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -23,15 +23,15 @@ Click the *Start your tour* button and let CloudCannon show you around. At the top of your *Site* is the *Site Header*, and on the left is the *Site Navigation* and *App Sidebar*. - + The *Site Header* displays key information about your *Site* in the top left, such as your *Site* icon, name, and branch, and important tools in the top right, such as the *Avatars* of all the team members viewing a *Site* and the *Save* button. More tools will appear in your *Site Header* as you set up your *Site*. - + The *Site Navigation* lists important pages on your *Site*, such as your *Site Dashboard*, *Collections*, *File Browser*, and *Site Settings*. More links can appear in your *Site Navigation* depending on the CloudCannon features you configure (e.g., *Publishing* or *Inbox*). - + Finally, we introduced the *App Sidebar* in a [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/your-organization-on-cloudcannon/) (the blue navigation bar on the far left). If you ever navigate away from your *Site* and need to find it again, you can click the *Sites* button in your *App sidebar* and use the *Sites Browser* to find it again. From 527afd1fa7c8a3891303d7a405b25c78525b30eb Mon Sep 17 00:00:00 2001 From: Ella <141297015+EllaCloudCannon@users.noreply.github.com> Date: Tue, 3 Mar 2026 11:40:02 +1300 Subject: [PATCH 19/28] update height for uisnippet docshots --- _includes/styles/shortcodes.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_includes/styles/shortcodes.scss b/_includes/styles/shortcodes.scss index 7d2982b31..7326a427d 100644 --- a/_includes/styles/shortcodes.scss +++ b/_includes/styles/shortcodes.scss @@ -12,6 +12,7 @@ &--type-ui-snippet { max-width: 1000px; + max-height: 1000px; padding: 20px; border: 2px solid var(--border-subtle); border-radius: var(--border-radius); From 03e28a47a394de332fff1340636c4e844eaa9c68 Mon Sep 17 00:00:00 2001 From: Ella <141297015+EllaCloudCannon@users.noreply.github.com> Date: Tue, 3 Mar 2026 11:54:06 +1300 Subject: [PATCH 20/28] update docshots css --- _includes/styles/shortcodes.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/_includes/styles/shortcodes.scss b/_includes/styles/shortcodes.scss index 7326a427d..e16ec5cbc 100644 --- a/_includes/styles/shortcodes.scss +++ b/_includes/styles/shortcodes.scss @@ -1,5 +1,10 @@ .c-docs-image { $c: &; + display: block; + + &__wrapper { + display: block; + } &__image { max-height: 100%; @@ -11,8 +16,9 @@ } &--type-ui-snippet { + display: block; max-width: 1000px; - max-height: 1000px; + max-height: 600px; padding: 20px; border: 2px solid var(--border-subtle); border-radius: var(--border-radius); @@ -21,7 +27,10 @@ background: var(--color-cloud); #{$c}__image { + display: block; width: auto; + height: auto; + max-height: 560px; margin: 0 auto; } } @@ -48,7 +57,9 @@ } #{$c}__image { + display: block; width: 100%; + max-height: 80vh; margin: 0; border-radius: var(--border-radius-inner); } From 32dd3826ee45692ea85ab27acb62d033ff51df71 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 3 Mar 2026 00:58:16 +0000 Subject: [PATCH 21/28] update docshots --- .../tour-your-site.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 22d379a00..99e2e4c7a 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -55,24 +55,24 @@ The *Site Dashboard* is broken down into several tabs, including *Summary*, *Act On the *Summary* tab of your *Site Dashboard*, CloudCannon will display summary information about your *Site*. For new *Sites*, CloudCannon has the *Getting Started with Editing* in-app guide in the center, with suggested tasks for configuring your *Site*. Underneath the in-app guide is a list of your recent activity. On the right, the *Summary* tab also gives a preview of your most recent sync. + + On the *Activity* tab of your *Site Dashboard*, CloudCannon will show you a list of recent activity on your *Site* in reverse chronological order. This list refreshes every time you sync your *Site* or update your *Site Settings*. This list includes: * Every change made to your files from within CloudCannon or your Git provider (including the author, date, time, and commit message, if applicable). * When your *Site* has Syncing or Output errors. * Any changes made to your *Site Settings*, or *Branch* and *Publish Branch* settings. - + On the *Syncs* tab of your *Site Dashboard*, CloudCannon will show you a list of syncing logs for your *Site* in reverse chronological order. - + On the *Guides* tab of your *Site Dashboard*, CloudCannon will show you a list of in-app guides. You can see the number of available guides in a notification by the name of the tab. Right now, we are working through *Getting Started with Editing*. There are several other guides you can follow to configure other features in CloudCannon after you have finished *Getting Started with Editing*. - - ## The *Collection Browser* When you selected your *Collections* in the [previous step of this guide](/documentation/developer-guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file/), CloudCannon added them to your *Site Navigation*. Click on one to open your *Collection Browser.* @@ -107,7 +107,7 @@ The *\+ Add* button allows you to add new files and folders to a Collection, whi CloudCannon allows you to customize almost everything about your *Site* to create the best editing experience for your team. Turn on *Configuration Mode* to configure your *Site* using the switch on the right of the *Site Header*. - + When *Configuration Mode* is on, CloudCannon displays purple *Edit Configuration* buttons throughout the app. Each of these buttons allows you to configure a different UI element. From 499fe03d1d5f666d41025431c6d165e6c916e5e5 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 3 Mar 2026 20:37:53 +0000 Subject: [PATCH 22/28] update docshots id --- _data/docshots.yml | 2 +- .../save-your-configuration-file.mdx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_data/docshots.yml b/_data/docshots.yml index e6a1a9236..45b24757e 100644 --- a/_data/docshots.yml +++ b/_data/docshots.yml @@ -1 +1 @@ -source: main_9ad6e7e6e88c269ea9d4188ecd46a251741b99af +source: main_79b32955aa089d9709e285dd908cb47599faa99f diff --git a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx index 5a9d65714..7c5b7a9d4 100755 --- a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx @@ -21,7 +21,7 @@ Let's commit the *CloudCannon Configuration File* and your CloudCannon preferenc The *Save* button is on the right of your *Site Header*, and will show a red notification with the number of files that have unsaved changes. In this case, the *CloudCannon Configuration File* is the only file with unsaved changes. - + Click the *Save* button. CloudCannon will open the *Save changes* modal. @@ -38,7 +38,7 @@ Depending on your *Site* configuration, the *Context Menu* will contain differen * *View diff* — Review unsaved changes for a file in text format, with deleted content highlighted in red and new content highlighted in green. * *Discard unsaved changes* — Discard all unsaved changes to a file. - + At the top left of each file Card is a checkbox, which controls whether the *Save* button will save changes to that file back to your Git repository. If you don't want to affect a particular file, you can untick the checkbox. From 20d520f287dec89966b733a2c36f103dbd88f668 Mon Sep 17 00:00:00 2001 From: Ella <141297015+EllaCloudCannon@users.noreply.github.com> Date: Wed, 4 Mar 2026 10:18:29 +1300 Subject: [PATCH 23/28] update docshot name --- .../guides/getting-started-with-cloudcannon/tour-your-site.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 22d379a00..19e9ef6b4 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -79,7 +79,7 @@ When you selected your *Collections* in the [previous step of this guide](/docum The *Collection Browser* allows you to browse, sort, and filter your *Collection* files, add new ones, and perform file actions like cloning or deleting. Each *Collection Browser* shows all the files in a single *Collection*, with each file represented by a customizable *File Card*. - + At the top of your *Collection Browser*, underneath your *Site Header*, is the *Collection Header*. This section contains important identifying information about your *Collection*, such as the *Name*, and *Documentation Link* or *Description* (if configured). From 0e89f8943013c3fd72ea1608bf00c5cd8c34ef3c Mon Sep 17 00:00:00 2001 From: Ella <141297015+EllaCloudCannon@users.noreply.github.com> Date: Wed, 4 Mar 2026 11:32:19 +1300 Subject: [PATCH 24/28] update docshot names --- developer/articles/configure-your-first-build.mdx | 2 +- .../guides/getting-started-with-cloudcannon/tour-your-site.mdx | 2 +- .../set-up-visual-editing/configure-your-build-settings.mdx | 2 +- .../guides/set-up-visual-editing/confirm-your-output-urls.mdx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/developer/articles/configure-your-first-build.mdx b/developer/articles/configure-your-first-build.mdx index 11de4d633..a026e0f57 100644 --- a/developer/articles/configure-your-first-build.mdx +++ b/developer/articles/configure-your-first-build.mdx @@ -21,7 +21,7 @@ Building on CloudCannon is optional; however, it is required for web hosting and To build through CloudCannon, you must configure any command line options and build system options required for your Site. You can do this by starting the *Set up Visual Editing* or *Host your website on the Internet* in-app guides. - + To configure your first Site build: diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 2ae6ba63d..48b1d6672 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -85,7 +85,7 @@ At the top of your *Collection Browser*, underneath your *Site Header*, is the * Under the *Collection Header* are the *Collection Browser Controls*: the *Sort* *menu*, *View* *menu*, *Filter* text field, and the *\+ Add menu*. - + The *Sort* *menu* lets you change how CloudCannon sorts your files in the *Collection Browser* (e.g., alphabetically by file path, numerically by file size, by date and time of file creation, or by date and time of last modification). diff --git a/developer/guides/set-up-visual-editing/configure-your-build-settings.mdx b/developer/guides/set-up-visual-editing/configure-your-build-settings.mdx index 32f602959..caac97cdb 100755 --- a/developer/guides/set-up-visual-editing/configure-your-build-settings.mdx +++ b/developer/guides/set-up-visual-editing/configure-your-build-settings.mdx @@ -25,7 +25,7 @@ To build your *Site*, CloudCannon needs to know a few details about how your web Click the *Configure your build* button in your in-app guide under the *Configure your Site's build settings* task. - + CloudCannon will open the *Configure your build* modal. diff --git a/developer/guides/set-up-visual-editing/confirm-your-output-urls.mdx b/developer/guides/set-up-visual-editing/confirm-your-output-urls.mdx index 156eba81d..1a4aeb160 100755 --- a/developer/guides/set-up-visual-editing/confirm-your-output-urls.mdx +++ b/developer/guides/set-up-visual-editing/confirm-your-output-urls.mdx @@ -25,7 +25,7 @@ However, most modern websites do not have a one-to-one relationship between sour Whenever you finish a successful build, CloudCannon will automatically determine the likely output URL for each source file. The next task in the *Set up Visual Editing* in-app guide asks you to *Confirm your output URLs*, ensuring that CloudCannon is opening the correct output file for each source file in your *Collection Browser*. - + ## Confirm CloudCannon matched your files correctly From e9b24a7bd143a8746571c870ae1b71c520e7b1cc Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 4 Mar 2026 20:36:37 +0000 Subject: [PATCH 25/28] update docshots id --- _data/docshots.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/docshots.yml b/_data/docshots.yml index 45b24757e..b47b3a6cd 100644 --- a/_data/docshots.yml +++ b/_data/docshots.yml @@ -1 +1 @@ -source: main_79b32955aa089d9709e285dd908cb47599faa99f +source: main_d67e3d9186386148d8317261eba1bdd9bab5a306 From d6c841eac1a509902464243f2ce67034a735d7b1 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 4 Mar 2026 20:42:15 +0000 Subject: [PATCH 26/28] update docshots --- .../guides/getting-started-with-cloudcannon/create-a-site.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx index a809919c8..8dd8fcc76 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx @@ -104,12 +104,12 @@ CloudCannon will begin syncing your files from your Git provider and open your * On your *Site Dashboard*, you'll see another in-app guide: *Getting Started with Editing*. This guide focuses on setting up the basics of your *Site.* - + The first task in the *Getting Started with Editing* in-app guide is to *Add your files*. As CloudCannon is already syncing your files from your Git repository, you should see an in progress message under this step. This process is usually quick, but it may take a few minutes for larger repositories. Once CloudCannon has finished syncing, you can click the *Next* button. - + In the next step of this guide, we'll look at your new *Site* and introduce you to some important UI. \ No newline at end of file From 85266b3817ca37ae82f481efc9c4790f951b58b6 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 4 Mar 2026 20:47:07 +0000 Subject: [PATCH 27/28] update docshots --- .../getting-started-with-cloudcannon/create-a-site.mdx | 2 +- .../create-your-cloudcannon-configuration-file.mdx | 6 +++--- .../save-your-configuration-file.mdx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx index 8dd8fcc76..2dab12c1d 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx @@ -110,6 +110,6 @@ The first task in the *Getting Started with Editing* in-app guide is to *Add you Once CloudCannon has finished syncing, you can click the *Next* button. - + In the next step of this guide, we'll look at your new *Site* and introduce you to some important UI. \ No newline at end of file diff --git a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx index c10cee655..575e4d1bf 100755 --- a/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/create-your-cloudcannon-configuration-file.mdx @@ -39,11 +39,11 @@ CloudCannon will use the information found in your files to suggest an *SSG*. Yo At the bottom of the *Create my Configuration File* modal is the *Preview* button. Clicking this button will show you a preview of the initial content of your *CloudCannon Configuration File*. - + ## Select your *Source Folder* (optional) - + CloudCannon needs to know the base path for your SSG source files relative to the root of your directory, called the *Source Folder*. Most websites use the root of their repository as the *Source Folder*. @@ -53,7 +53,7 @@ However, if your source is nested in your repository (such as if you have a mono Click the *Next* button on the bottom right of the *Create my Configuration File* modal. - + On the next page of the modal, CloudCannon asks you to select your *Collections*. A Collection is a group of files you want to edit in CloudCannon, and will match a folder in your *Git Repository* (e.g., a folder of pages, blog posts, product descriptions, or data files). diff --git a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx index 7c5b7a9d4..3a7bc5e7b 100755 --- a/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx +++ b/developer/guides/getting-started-with-cloudcannon/save-your-configuration-file.mdx @@ -25,7 +25,7 @@ The *Save* button is on the right of your *Site Header*, and will show a red not Click the *Save* button. CloudCannon will open the *Save changes* modal. - + The *Save changes* modal allows you to review a summary of all unsaved changes on a *Site*. Each file with unsaved changes is represented by a *File Card*, including the name of the file, the *Collection* it belongs to, when it was last updated and by whom. From 4d8fb30b527612749d4d60d88b7abe7e960437bb Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 4 Mar 2026 20:48:21 +0000 Subject: [PATCH 28/28] fix docshot --- .../guides/getting-started-with-cloudcannon/tour-your-site.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx index 48b1d6672..1c09d5cc2 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -43,7 +43,7 @@ The majority of your screen is taken up by your current *Site* page: in this cas The *Site Dashboard* is the first link in your *Site Navigation*. Next to this link are the *Status* indicator and the *Guide progress* indicator, which show the status of your most recent sync or build, and how far you have progressed through your active in-app guide. - + The *Site Dashboard* is broken down into several tabs, including *Summary*, *Activity*, *Syncs*, and *Guides*.