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:

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.

1. Navigate to Experience > Project Map.

   

   The name of the project map for this site is "Sitemap".

2. In the row for the node Home, click > Add child node.

   

   The Add node dialog appears.

3. Enter the following values:

   Field	Value
   Name	Articles
   Path segment	Static
   Node type	Placeholder

   About this step

   This creates a segment in your URLs that doesn't correspond to a page. There is no "articles" page in the site, but you want all of your article pages to have /articles/ in the URL.

4. Click Save.

   

   You added a node under the "Home" node.

5. Add the following node under the Articles node:

   Field	Value
   Name	The Golden Ratio of Coffee
   Path segment	Static
   Node type	Composition
   Composition	Page

6. Click Save & open Canvas.

   

   A new composition is opened in Canvas. Validation errors appear because the page title is a required value that has not been set.

7. Enter the following value for the parameter Page Title:

   The Golden Ratio of Coffee

   CopyCopied!
   

   When the "Page Title" parameter is set, validation error messages disappear.

8. Save the composition.

Update the Hero component#

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. Click the blue background image to select the Hero component.

   You can also select the component by opening the structure panel. Click and select The Golden Ratio of Coffee > PAGE CONTENT > Page Title.

   

   When the Hero component is selected, the right-hand side of the screen changes to reflect the parameters on the Hero component, rather than the composition.

2. Set the following parameter values:

   Section	Parameter name	Value
   	Display Variant	Image Right
   Content	Title	The Golden Ratio of Coffee
   Presentation Settings	Background Color	Black

   

   The Hero component title is set and visible.

3. For the parameter Description, enter the following value:

   Like all fine things in life, complex flavors rely on balance to really bring to life all the amazing tastes and sensations.

   CopyCopied!
   

   The Hero component description is set and visible.

Change the Hero image#

1. For the parameter Image, click Edit.

   

   By default, a generic background image is selected.

2. Click .

   

   The default image was removed.

3. Click Add New.

4. Click Uniform Asset Library > Custom.

   

   The "Custom" option is available under the "Uniform Asset Library" dropdown.

   About this step

   Selecting a custom image allows you to use an image without having to import it into the Uniform Asset Library.

5. For the field URL, enter the following value:

   https://res.cloudinary.com/uniformdev/image/upload/v1685477686/JavaDrip/Flavor_Ratios.jpg

   CopyCopied!
   

   After you enter the image URL, the image is displayed.

6. Click Done.

   

   The image is now displayed in the component.

7. For the parameter Object Fit under the section Image Settings, select Contain.

   

   This parameter lets you control the CSS settings applied to the image.

Update the Breadcrumbs component#

1. Scroll down the page and select the Breadcrumbs component.

   

   The Breadcrumbs component is located below the Hero component.

2. Set the following parameter values:

   Parameter name	Value
   Display Root Node	checked
   Display Placeholder Nodes	checked
   Separator	Chevron

   

   The "Articles" placeholder now appears in the breadcrumb trail.

3. Save the composition.

Add a content component to the composition#

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

1. Select the Breadcrumbs component.

2. Click .

3. Select the component Content.

   

4. For the parameter Text, enter 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

   CopyCopied!
   

Publish & test the composition#

A new composition is not available to visitors until it is published.

1. Click Publish... to publish the composition.

2. In a new browser tab, open http://localhost:3000/articles/the-golden-ratio-of-coffee

   

   The new, published composition.

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