A content manager's first day

This page is for content managers: the people who write, check and publish what a site says. It follows one change from start to finish and names every button on the way. Nothing you do here reaches readers until the step called Publish, so you can try each step on a real document.

Before you start

Ask the engineers who run Quillet for three things:

The dashboard's address, such as https://cms.example.com.
How you sign in: with an email and a password, or with a GitHub or Google account.
A place in the project. Once your account exists, the project's owner adds you under Settings → Members. As an editor you can write and publish; as a viewer you can only read.

Open the dashboard's address. The Sign in page asks for your Email and Password. If your team signs in with GitHub or Google, press Continue with GitHub or Continue with Google instead.

No account yet? Press Create one under the form, fill in Name, Email and a Password of at least 12 characters, and press Create account. You are back on Sign in with "Account created — sign in to continue." If there is no Create one link, sign-up with a password is closed on your instance: use Continue with GitHub or Continue with Google if your team has them, or ask the engineers how accounts are made.

After signing in you land on Projects. Each project is one site, with its own documents. Press yours to open it.

Find your way around

Every screen of a project has the same frame, called the shell; The shell describes all of it.

Across the top is the header. From left to right:

The Quillet mark takes you back to all projects.
The project switcher shows the project you are in and lists the others you belong to.
The environment select. A project can hold more than one copy of its content, such as Prod for the live site and Staging for rehearsals. Check that it shows the one your team publishes from before you change anything.
Search content, or ⌘K on a Mac and Ctrl+K elsewhere, finds a document by its title or key, or jumps to a section.
The theme button chooses light, dark, or whatever your computer is set to.
The round button with your initials is the account menu: your name and email, Account and Sign out.

Under the header are the section tabs: Content, Media, Components, Promote and Settings. Your day is mostly in Content and Media.

On the left, in Content, is the panel: the project's documents as a tree, grouped into Pages, Documents, Component instances and Schemas. On a window narrower than 1024 pixels the panel folds away behind a Show Content button at the start of the tabs. On a phone the environment and Search content move into the account menu.

Open a document

Every piece of content is a document, and every document has a key: a path such as guides/welcome. The part before the last slash is its folder. There are three ways to open one:

The tree. Press a folder to go into it and a document to open it. Up one level goes back.
The content index. The Content tab's main page lists every document in the environment: its title and key, its type, its status, its locales and when it was last updated. Press a row to open it.
Search content. Press ⌘K or Ctrl+K, type part of the title or the key, and press Enter.

Edit it

Along the top of the editor is the page bar. From left to right: where the document is (guides / Welcome), its status, the locale you are editing (such as en-US), then History, Preview, Save and Publish. On a window narrower than 1280 pixels, History and Preview show only their icons.

What is under the page bar depends on the document's type.

A Markdown document, such as a guide or an article, opens in the Visual editor. Its toolbar sets paragraphs and headings and applies bold, italic, links, lists, quotes, code, tables and dividers. Image puts in a picture from the media library, or uploads a new one into it. Type # and a space at the start of a line and it becomes a heading as you type. The Source tab beside Visual shows the Markdown that will be stored, with a Preview of it alongside, and Expand gives either one the full width.

A structured document or a page opens on a Form: one box per field, with the field's name above it and Required beside the ones that must be filled. The JSON tab beside Form shows the same content as code; you can ignore it.

Beside the editor, Details holds the document's Title, which is how it appears in lists and search, its Order within its folder, and its Tags.

Save

When the change is ready, write a line about it in Change note under the details, if you like. Your team sees it in the document's history. Then press Save, or ⌘S on a Mac and Ctrl+S elsewhere. "Saved." appears above the editor.

Every save keeps a new version of the document, and the earlier versions stay. A save changes nothing for readers. The status in the page bar tells you where the document stands:

Draft: it has never been published.
Published: the version you are looking at is the one readers get.
Changed since published: you have saved since the last publish, so readers still get an older version. Hover over the status, or move to it with Tab, to see which: "Version 3 · version 2 is published".

If someone else saved the same document while you were editing, Save stops and says so rather than overwriting their work. When two people edit explains what to do next.

Preview

Before you publish, look at the change the way a reader will.

A page opens with Content preview beside its form. It draws the page from its fields as you type, at Desktop, Tablet and Phone widths. It lays the content out by what each field is for, a heading, a body, a picture, so it shows what the page says rather than your site's design. On a window 1024 pixels wide or narrower, the form and the preview become two tabs, Edit and Content preview.

Preview in the page bar opens a menu. Content preview in it shows or hides that preview, for a page or any other document with a component. On website opens the draft on your real site, drawn by the site's own code. It works once an engineer has set the environment's website preview address; until then it is unavailable and says "Set a website preview URL in Settings › Environments."

A Markdown document previews in its own editor: switch to Source and read the Preview beside it.

Publish

Press Publish. A dialog, Publish this document?, names the document and says what will happen before anything does:

"Version 3 goes live for readers." This is the version that will go live.
"Readers in de-DE get this version too: that locale has no published translation of its own." Readers of locales without their own translation see your change as well.
"It also updates 2 live documents that use this one:" followed by a list. Another published document includes this one, such as a page that shows a shared banner, and it changes with it.
"Publishing would be refused:" followed by the reason. Fix it and try again.

Press Publish in the dialog. The status reads Published.

To take a document down again, press ⋮ (Publishing actions) beside Publish and choose Unpublish. The dialog says what readers will get instead: the default locale's version, or nothing at all.

See it live

Your site reads only published content, so the change is now on its way. How soon it appears depends on how the engineers built the site. Some sites show it on the next page load, some within a few minutes, and a site that is rebuilt from the CMS shows it after the next build. Ask your engineers which yours is, so you know how long to wait before you check. Integrating a site describes the three ways.

Undo with History

Press History in the page bar. A sheet lists every version, newest first. Each says who saved it, when, and its change note, and the one readers get is marked Published.

Press View on an older version to read it as it was. The bar above the editor says "Viewing v1 — the current draft is v2" and offers three buttons:

Back to draft returns to the latest version.
Compare with draft shows what changed between the two.
Restore as new draft saves the old content again, as the newest version. Nothing is deleted: the versions in between stay in the history, and the new one reads "Restored v1".

A restore is a save, not a publish. Readers keep the published version until you press Publish again. A restore can be refused when the old version no longer fits the document's component, for example when a field became required after it was written; the message names the field.

Find work

The Content tab's main page is also where you find what needs doing. Above the list:

View narrows it to a queue: All content, Unpublished changes, Missing translations, Partial translations or Needs review.
Search filters by title or key.
Type shows only one kind: Page, Document, Component instance or Schema.
Status shows Any, Published, Changed or Draft.
Sort by orders the list by Updated, Title, Key, Version or Created, and the button beside it turns the order round.

Unpublished changes is the list to check at the end of a day: everything saved and not yet live.

Where next

Writing a document: the Markdown editor in full, with images from the media library.
Pages and preview: blocks, Content preview and preview on the website.
Publishing and history: impact, publishing several documents at once, unpublishing and restoring.
Translations and review: locales, what a translation inherits, and marking a translation reviewed.
Finding work: the content index and the four work queues.
Media: uploading files, describing them and making one private.
Your account: your sign-in and personal access tokens.
The shell: the header, the section tabs, the panel and the page bar.
Glossary: the words these docs use.