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
- Add a node for articles in the project map.
- Define a new composition that represents an article.
- Add new components to the composition.
Add nodes to project map#
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.
In Uniform, navigate to the Project Map.
Add a new child node under the
Home
node:Field Value Name Articles
Path segment Static [no changes necessary] Node type Placeholder
Add a new child node under the
Articles
node:Field Value Name The Golden Ratio of Coffee
Path segment Static [no changes necessary] Node type Composition
Composition Page
Click Save & open Canvas.
Your new composition on opening CanvasEnter "The Golden Ration of Coffee" in Canvas. This is a required field.
The page title parameter field
Update Hero component to 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.
In the slot
PAGE CONTENT
, select the Hero component.Set the following parameter values:
Name Value Title The Golden Ratio of Coffee
Display Variant Image Right
For the parameter Description, set the following value:
For the parameter Image, set the following value:
Select the breadcrumb component and select the following items in the parameter panel. Set the following parameters to:
- Display Root Node [true]
- Display Placeholder Notes [true]
- Separator [Chevron]
Add Content component to the composition#
Now you will add another component to the composition's slot. This component represents a block of text.
- Under the Breadcrumb component, add a new Content component.
- For the parameter Text, set the following value:
Publish & test the composition#
Finally, you will publish the composition so visitors can access it.
note
Notice that no code changes were required to create a new composition and to control its layout.
- Publish the composition.
- In a new browser tab, open http://localhost:3000/articles/the-golden-ratio-of-coffeeThe new, completed composition.