Pages

Dashboard

1. In Components, press New › Page. The builder opens on a page component that already holds the SEO group.
2. Name it, such as landing-page. Press Add field, choose the type Block list, and pick its Allowed components ("Up to 20. A block is one of these, and says which in _component."). Add a Text field for the title if you want one.
3. Press Save, then Publish. Until the component has a block list and an SEO group, a notice above the form says which one is missing.
4. In Content, press New › Page. Choose the Component, a Folder and a Key (the key is the page's address), give the page a Title and press Create instance.
5. The page opens as a form. Under the block list, Add block offers the allowed components.
6. Open Preview › Content preview to see the page drawn beside the form and redrawn as you type. Press a block in the preview to jump to it in the form. Once the environment has a Website preview URL, Preview › On website opens the draft on your own site instead.
7. Press Save, then Publish.

API

This example uses the hero and cta components from Components and the builder, published. Set the variables once:

export QUILLET_API_URL=<cms-url> QUILLET_PROJECT=<project> QUILLET_ENV=<environment>
export QUILLET_MANAGEMENT_KEY=<keyId>:<secret>
E="$QUILLET_API_URL/api/v1/projects/$QUILLET_PROJECT/envs/$QUILLET_ENV"

Write the page component: a heading, an SEO group, and a block list of the two components.

curl -s -X PUT "$E/documents/_schemas/landing-page" -u "$QUILLET_MANAGEMENT_KEY" \
  -H 'Content-Type: application/json' \
  -d '{"type":"json","title":"Landing page","content":{
       "type":"object","title":"Landing page","required":["title","blocks"],"additionalProperties":false,
       "properties":{
         "title":{"type":"string","maxLength":80,"x-quillet":{"role":"heading"}},
         "seo":{"type":"object","additionalProperties":false,
           "x-quillet":{"role":"seo","order":["title","description","noIndex"]},
           "properties":{
             "title":{"type":"string","maxLength":70},
             "description":{"type":"string","maxLength":160,"x-quillet":{"widget":"textarea"}},
             "noIndex":{"type":"boolean"}}},
         "blocks":{"type":"array","maxItems":20,"items":{"oneOf":[{"$ref":"hero"},{"$ref":"cta"}]}}},
       "x-quillet":{"page":true,"preview":"title","order":["title","seo","blocks"]}}}'

A block that does not say what it is gets refused:

curl -s -X PUT "$E/documents/pages/about" -u "$QUILLET_MANAGEMENT_KEY" \
  -H 'Content-Type: application/json' \
  -d '{"type":"json","schema":"landing-page","title":"About",
       "content":{"title":"About us","blocks":[{"headline":"Who we are"}]}}'

{"error":"validation_failed","message":"Could not save the document.",
 "fields":{"content.blocks.0":"Say which component this block is.",…}}

With _component on each block, the page saves. Publish it together with its component:

curl -s -X PUT "$E/documents/pages/about" -u "$QUILLET_MANAGEMENT_KEY" \
  -H 'Content-Type: application/json' \
  -d '{"type":"json","schema":"landing-page","title":"About","content":{"title":"About us",
       "seo":{"title":"About us","description":"Who we are and what we make."},
       "blocks":[{"_component":"hero","headline":"Who we are"},
                 {"_component":"cta","label":"Write to us","link":{"href":"mailto:hello@example.com"}}]}}'

curl -s -X POST "$E/publish" -u "$QUILLET_MANAGEMENT_KEY" -H 'Content-Type: application/json' \
  -d '{"documents":[{"key":"_schemas/landing-page"},{"key":"pages/about"}]}'

A page published before its component is refused with Publish the schema "landing-page" first.; one request that carries both is one decision, and it goes through. Delivery serves pages/about exactly as it serves any document, with each block carrying its _component.

CLI

With the same variables set, a page is a body file plus a component name:

cat > about.json <<'EOF'
{
  "title": "About us",
  "seo": { "title": "About us", "description": "Who we are and what we make." },
  "blocks": [
    { "_component": "hero", "headline": "Who we are" },
    { "_component": "cta", "label": "Write to us", "link": { "href": "mailto:hello@example.com" } }
  ]
}
EOF
npx quillet content put pages/about --file about.json --schema landing-page --title "About"
npx quillet publish pages/about --yes

In a synced repository, the body is pages/about.en-US.json, and the binding lives in its sidecar, pages/about.en-US.meta.json: { "title": "About", "schema": "landing-page" }.