Define a new composition

Uniform's Canvas and project map provide visual assembly of content and components, making it easy to re-use of your front-end components, design system, and style guide. The Canvas UI can guide a business and content team to create rich digital experiences (such as web pages) based upon assets you have created without relying on developers for routine tasks.

For this exercise you will configure your project to add a "JavaDrip articles" section to your site. During the lesson you will:

Goals

  1. Add a node for articles in the project map.
  2. Define a new composition that represents an article.
  3. Add new components to the composition.

The project map makes it easier for people to find compositions within the Uniform dashboard. You will add nodes that represent the composition you are creating.

  1. In Uniform, navigate to the Project Map.

  2. Add a new child node under the Home node:

    FieldValue
    NameArticles
    Path segmentStatic [no changes necessary]
    Node typePlaceholder
    articles-node
    Add a node for articles.
  3. Click Save.

  4. Add a new child node under the Articles node:

    FieldValue
    NameThe Golden Ratio of Coffee
    Path segmentStatic [no changes necessary]
    Node typeComposition
    CompositionPage
  5. Click Save & open Canvas.

    save-and-open-canvas
    Your new composition on opening Canvas
  6. Enter "The Golden Ratio of Coffee" in the page title parameter in the page component in Canvas. This is a required field.

    enter-page-title
    The page title parameter field.
  7. Save the composition.

Now that you have your composition created, you will update the component in the slot defined on the composition. This component represents a hero, a component that typically appears "above the fold" on a website.

  1. In the slot PAGE CONTENT, select the Hero component.

  2. Set the following parameter values:

    NameValue
    Display VariantImage Right
    TitleThe Golden Ratio of Coffee
    DescriptionLike all fine things in life, complex flavors rely on balance to really bring to life all the amazing tastes and sensations.
    Imagehttps://res.cloudinary.com/uniformdev/image/upload/v1685477686/JavaDrip/Flavor_Ratios.jpg
    Presentation Settings > Background Type[Select the dark option]
  3. Select the breadcrumbs component and set the following parameters:

    • Display Root Node [true]
    • Display Placeholder Notes [true]
    • Separator [Chevron]
  4. Save the composition

Now you will add another component to the composition's slot. This component represents a block of text.

  1. Under the Breadcrumb component, add a new Content component.
  2. For the Text parameter set the following value:
    Water is essential for all life on earth, however we rely on a balance of water to sustain life. Too little and we dry up, too much and we flood. Now, I know what you are asking, what does WATER have to do with my COFFEE? Like all fine things in life, complex flavors rely on balance to really bring to life all the amazing tastes and sensations. The same applies to coffee, with its inability to cope with unbalanced or over balanced dosing. I tend to refer to coffee as being allergic to the 21st century, and if you thought hipsters were fussy about their coffee, you’ll be surprised to know that their coffee is WAY more fussy than they are! Here is a sneaky tip to help get the most out of your espresso shot! Lets focus on RATIOs. Specifically the WATER:COFFEE ratio in both your BASKET and your CUP! The Golden Ratios for Espresso are: * Basket - 2:1 * Cup - 7:1

Finally, publish the composition so visitors can access it.

note

Notice that no code changes were required to create a new composition or to control its layout.

  1. Publish the composition.
  2. In a new browser tab, open http://localhost:3000/articles/the-golden-ratio-of-coffee
    defined-composition
    The new, completed composition.