diff --git a/.cloudcannon/routing.json b/.cloudcannon/routing.json index 77420ed19..a64767f37 100644 --- a/.cloudcannon/routing.json +++ b/.cloudcannon/routing.json @@ -61,6 +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/_data/docshots.yml b/_data/docshots.yml index bfd223916..b47b3a6cd 100644 --- a/_data/docshots.yml +++ b/_data/docshots.yml @@ -1 +1 @@ -source: main_7a98e60ce3b2b5dbd1380b21963584b2ed20198a +source: main_d67e3d9186386148d8317261eba1bdd9bab5a306 diff --git a/_includes/styles/shortcodes.scss b/_includes/styles/shortcodes.scss index 7d2982b31..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,7 +16,9 @@ } &--type-ui-snippet { + display: block; max-width: 1000px; + max-height: 600px; padding: 20px; border: 2px solid var(--border-subtle); border-radius: var(--border-radius); @@ -20,7 +27,10 @@ background: var(--color-cloud); #{$c}__image { + display: block; width: auto; + height: auto; + max-height: 560px; margin: 0 auto; } } @@ -47,7 +57,9 @@ } #{$c}__image { + display: block; width: 100%; + max-height: 80vh; margin: 0; border-radius: var(--border-radius-inner); } 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/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/create-a-site.mdx b/developer/guides/getting-started-with-cloudcannon/create-a-site.mdx index dd74f2cc6..2dab12c1d 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. @@ -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. @@ -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, 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. - + 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 67e0f3bf0..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 @@ -1,56 +1,115 @@ --- _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*. - + 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*. 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. + +## Select your *Static Site Generator* + + + +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. + +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 *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. + +## 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. Alternatively, you can deselect any folders you don't want to edit in CloudCannon using the checkbox. + + + **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*. -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. + Let's walk through an example. - + -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. + 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*. -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. + 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*. -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. + 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. + -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. +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*. -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. +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`. + + -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. +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 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 5e54635de..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:46.000Z -details: - title: Group files into Collections - order: 7 - 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 -author_notes: - docshots: null ---- -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 diff --git a/developer/guides/getting-started-with-cloudcannon/more-resources.mdx b/developer/guides/getting-started-with-cloudcannon/more-resources.mdx index f0f8c8f81..c41c240ee 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: >- @@ -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 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..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 @@ -1,38 +1,34 @@ --- _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 + Repository. + 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. -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. - + 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: @@ -42,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. 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 6819f0731..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:46.000Z -details: - title: Tour a Collection Browser - order: 8 - 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 -author_notes: - docshots: null ---- -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 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..1c09d5cc2 100755 --- a/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx +++ b/developer/guides/getting-started-with-cloudcannon/tour-your-site.mdx @@ -1,53 +1,61 @@ --- _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. - +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*. -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*. + -Try clicking the link to your *File Browser*. As you can see, CloudCannon has synced all your files from your Git repository. +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*). - + -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*. +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. -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* -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 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*. + + + +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*. -

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: @@ -55,20 +63,60 @@ On the *Activity* tab of your *Site Dashboard*, CloudCannon will show you a list * 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. +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*. -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. +## 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.* + +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* 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* + +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*. + + -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 +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 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..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 @@ -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. @@ -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. @@ -32,11 +34,19 @@ 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. +## 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. 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 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.