/assets/homepage.css

`css
main {
background: rebeccapurple;
}

aside {
background: hotpink;
}
`


↑ back to Usage

$3

The layout are all react components. You have to assign a layout to each page and partial. Each component will have a
bunch of props exposed to it.


#### A page layout

A typical component for a page might look like this:

`jsx
import React from "react";

export default ({ title, partials }) => (







`jsx
import React from "react";

export default ({ _body, title }) => (


_(_ 💡 _You can access the page your partial was called in via: props._pages[ props._ID ].)_


#### Props

A file will receive the following props:

| prop name | description | Example |
|----------------|---------------------------------------------------------------------------------------|-----------------------------------------------|
| _ID | The ID of the current page | props._ID |
| _self | The relative path to the content file; can be md or yaml file | props._self |
| _isDocs | A boolean value, true in docs context only | props._isDocs |
| _parents | An array of all parent pages IDs | props._parents |
| _body | The body of your markdown file (empty for index.yml files) | props._body |
| _pages | An object of all pages and their props; with ID as key | props._pages.map() |
| _nav | A nested object of your site structure | Object.keys( props._nav ).map() |
| _globalProp | A prop that can be set globally from the package.json | props._globalProp |
| _storeSet | You can set data to persist between react components by setting them with this helper | props._storeSet({ variable: "value" }) |
| _store | To get that data just call this prop function | props._store() |
| _relativeURL | A helper function to make an absolute URL relative | props._relativeURL( URL, yourLocation ) |
| _parseMD | A helper function to parse markdown into HTML | props._parseMD('Your markdown!') |
| _parseYaml | A helper function to parse yaml into an object | props._parseYaml('test:\n - one\n - two') |
| _parseReact | A helper function to parse a react component into a string | props._parseReact( ) |

Plus all other variables declared inside the file either as frontmatter or in the yaml files.


#### Async data fetching

If you require data from an API or some other async operations you can use the static getInitialProps method in your component:

`jsx
import React, { Component } from 'react';

class GetData extends Component {
static async getInitialProps( props ) {
const data = await FetchMyDataFromSomewhere( props._ID );
return { data };
}

render() {
return (


export default GetData;
`

getInitialProps will be executed before we render the HTML and whatever you return from it will be passed into your react component as a prop.
The function will have access to all props of that partial as well.

_(_ 💡 _Make sure you return an object so that you can find your prop again.)_


↑ back to Usage

$3

Cuttlebelle can be customized via your own package.json file.

_(_ 💡 _You can generate it via npm init if you don’t have package.json.)_

See below all configuration with default values:

`diff
{
"name": "your name",
"version": "1.0.0",
"description": "Your description",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
+ "cuttlebelle": {
+ "folder": {
+ "content": "/content/",
+ "code": "/code/",
+ "site": "/site/",
+ "docs": "/docs/",
+ "assets": "/assets/",
+ "index": "index",
+ "homepage": "index"
+ },
+ "layouts": {
+ "page": "page",
+ "partial": "partial"
+ },
+ "site": {
+ "root": "/",
+ "doctype": "",
+ "redirectReact": true,
+ "markdownRenderer": "",
+ "watchTimeout": 400,
+ "browserSync": {},
+ "globalProp": {},
+ },
+ "docs": {
+ "root": "files/",
+ "index": ".template/docs/layout/index.js",
+ "category": ".template/docs/layout/category.js",
+ "IDProp": "page2",
+ "navProp": {},
+ "pagesProp": {}
+ }
+ },
"keywords": [],
"author": "",
"license": "ISC"
}
`

A breakdown:

`js
"cuttlebelle": { // The cuttlebelle object
"folder": { // Where we can adjust folder/file names
"content": "content/", // Where does your content live?
"code": "code/", // Where do your react layouts live?
"assets": "assets/", // Where do your assets live?
"site": "site/", // Where do you want to generate your static site to?
"docs": "docs", // Where do you want to generate the docs to?
"index": "index", // What is the name of the file we look for to generate pages?
"homepage": "index" // What should the index folder be named?
},
"layouts": { // Your layout settings
"page": "page", // What is the default layout for pages?
"partial": "partial" // What is the default layout for partials?
},
"site": { // General settings
"root": "/", // What should cuttlebelle append to links?
"doctype": "", // What doctype string do you want to add?
"redirectReact": true, // You can disable redirecting import calls to the locally
// installed react instance of cuttlebelle rather than your
// local folder.
"markdownRenderer": "", // A path to a file that module.exports an Marked.Renderer()
// object. Learn more about it here:
// https://github.com/chjj/marked#renderer
// The only addition is the preparse key that will be run
// before we go into the markdown parsing
"watchTimeout": 400, // This is the time in milliseconds the watch waits
// to detect a double saves action
"browserSync": {}, // You can overwrite the browserSync options here
// https://www.browsersync.io/docs/options
"globalProp": {} // A global prop that can be set here accessible for all pages
},
"docs": { // Docs settings
"root": "files/", // What is the root folder called where all
// categories are generated in
"index": ".template/docs/layout/index.js", // The path to the index layout file
"category": ".template/docs/layout/category.js", // The path to the category layout file
// All following settings are the default props
// each component is given for the example

// The following props are important so we
// can generate the docs example:
"IDProp": "page2", // The _ID prop
"selfProp": "body.md", // The _self prop
"navProp": { // The _nav prop
"index": {
"page1": "page1",
"page2": {
"page2/nested": "page2/nested"
},
"page3": "page3"
}
},
"pagesProp": { // The _pages prop
"page1": {
"_url": "/page1",
"title": "Page 1"
},
"page2": {
"_url": "/page2",
"title": "Page 2"
},
"page2/nested": {
"_url": "/page2/nested",
"title": "Nested in page 2"
},
"page3": {
"_url": "/page3",
"title": "Page 3"
},
"index": {
"_url": "/",
"title": "Homepage"
}
}
}
}
`


⬆ back to top


----------------------------------------------------------------------------------------------------------------------------------------------------------------

Self-documenting

Because you now can separate the content flow from the development flow you will still need to communicate what partials and layouts the content authors have
to their disposal and how they might use it.

Cuttlebelle has a built in feature that will generate documentation for your components automatically as long as you use
PropTypes and a comment above them that reflects the yaml.

`jsx
Cards.propTypes = {
/**
* level: "2"
*/
level: PropTypes.oneOf([ '1', '2', '3', '4', '5', '6' ]).isRequired,

/**
* hero: true
*/
hero: PropTypes.bool,

/**
* cards:
* - title: Card 1
* content: Content for card 1
* href: http://link/to
* - title: Card 2
* content: Content for card 2
* href: http://link/to
* - title: Card 3
* content: Content for card 3
* href: http://link/to
* - title: Card 4
* content: Content for card 4
* href: http://link/to
*/
cards: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
href: PropTypes.string,
})
).isRequired,
};
`

You can also hide a component from the docs by adding the @disable-docs to the main comment before declaring your component:

`jsx
import PropTypes from 'prop-types';
import React from "react";

/**
* Hiding this component from the docs
*
* @disable-docs
*/
const Hidden = ({ _body, title }) => (