The Recipe component takes a recipe object, and if it is in a list, also a key prop.
lang: jsx
---
<Recipe key={recipe.id} recipe={recipe} />
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Recipe Catalog</title> | |
</head> | |
<body> | |
<div id="catalog" /> | |
<script src="https://interactivethings.github.io/catalog/catalog.min.js"></script> | |
<script> | |
Catalog.render({ | |
title: 'Recipe Catalog', | |
pages: [ | |
{ | |
path: '/', // The path where the page can be accessed | |
title: 'Introduction', // The page title | |
src: 'intro.md' // Path to the Markdown document | |
}, | |
{ | |
path: '/components', // The path where the page can be accessed | |
title: 'Components', // The page title | |
src: 'components.md' // Path to the Markdown document | |
}, | |
// Other pages … | |
] | |
}, document.getElementById('catalog')); | |
</script> | |
</body> | |
</html> |