The document outlines the steps to create a Volto site, including bootstrapping projects, theming, internationalization, and customization of components and views. It provides code snippets for setting up static resources, themes, custom widgets, and actions and reducers, alongside instructions for managing content and translations. The content is intended for attendees of the Plone Conference 2019, presenting practical development insights and examples for building with Volto.

1. Create your own Volto site!Create your own Volto site!
Plone Conference 2019, FerraraPlone Conference 2019, Ferrara
-
“the most dangerous guy in the world”
Rob Gietema @robgietema

2. What will we cover?What will we cover?
Bootstrapping
Static Resources
Theming
Override Components
i18n
Override Views
Custom Views
Custom Widgets
Rich Text Editor Settings
Actions & Reducers

3. Bootstrapping a ProjectBootstrapping a Project
$ npx @plone/create-volto-app my-volto-app

4. Running the ProjectRunning the Project
$ cd my-volto-app
$ yarn start

5. Running the ProjectRunning the Project

6. Code WalkthroughCode Walkthrough
my-volto-app
├── README.md
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ └── robots.txt
├── theme
│ └── theme.config
├── locales
│ ├── de
│ ├── en
│ │ └── LC_MESSAGES
│ │ └── volto.po
│ ├── nl
│ ├── de.json
│ ├ j

7. Static ResourcesStatic Resources
$ ls public
favicon.ico robots.txt

8. ThemingTheming

9. ThemingTheming
$ cat theme.config
/* Global */
@site : 'pastanaga';
@reset : 'pastanaga';
/* Elements */
@button : 'pastanaga';
@container : 'pastanaga';
@divider : 'pastanaga';
@flag : 'pastanaga';
@header : 'pastanaga';
@icon : 'pastanaga';
@image : 'pastanaga';
@input : 'pastanaga';
...

10. ThemingTheming
theme
└─ themes
└─ pastanaga
└─ elements
└─ button.overrides
└─ button.variables
└─ container.overrides
└─ container.variables
...

11. ThemingTheming
$ cat button.variables
/* Button */
@verticalMargin: 0em;
@horizontalMargin: 0.25em;
@backgroundColor: #E0E1E2;
@backgroundImage: none;
@background: @backgroundColor @backgroundImage;
@lineHeight: 1em;
/* Button defaults to using same height as input globally */
@verticalPadding: @inputVerticalPadding;
@horizontalPadding: 1.5em;
...

12. ThemingTheming
$ cat button.overrides
/*******************************
Theme Overrides
*******************************/
.ui.circular.icon.button {
padding: 0.75em 0.25em 0;
.icon {
font-size: 2em;
}
}
...

13. Override ComponentsOverride Components
customizations
└─ components
└─ theme
└─ Logo
└─ Logo.svg

14. InternationalizationInternationalization
react-intl

15. Extracting i18n StringsExtracting i18n Strings
$ yarn i18n
Extracting messages from source files...
Synchronizing messages to pot file...
Synchronizing messages to po files...
Generating the json files...
done!

16. Making Text TranslatableMaking Text Translatable
import { FormattedMessage } from 'react-intl';
<FormattedMessage
id="Some string"
defaultMessage="Some string"
/>

17. Translate AttributesTranslate Attributes
import { defineMessages, injectIntl, intlShape } from 'react-intl';
const messages = defineMessages({
site: {
id: 'Site',
defaultMessage: 'Site',
},
});
...
export default injectIntl(Logo);
PropTypesPropTypes
intl: intlShape.isRequired
UsageUsage
<Link to="/" title={intl.formatMessage(messages.site)}>

18. Override ViewsOverride Views
customizations
└─ components
└─ theme
└─ View
└─ SummaryView.jsx

19. Custom ViewsCustom Views

20. Custom ViewsCustom Views
/**
* Full view component.
* @module components/FullView/FullView
*/
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { Link } from 'react-router-dom';
import { Container, Image } from 'semantic-ui-react';
import { FormattedMessage } from 'react-intl';
/**
* Full view component class.
* @function FullView
* @param {Object} content Content object.
i

21. Custom ViewsCustom Views
components/index.js
import FullView from './FullView/FullView';
export { FullView };

22. Custom ViewsCustom Views
config.js
import { FullView } from './components';
export const views = {
...defaultViews,
layoutViews: {
...defaultViews.layoutViews,
full_view: FullView,
},
};

23. Custom WidgetsCustom Widgets

24. Custom WidgetsCustom Widgets
components/RatingWidget/RatingWidget.jsx
/**
* RatingWidget component.
* @module components/RatingWidget/RatingWidget
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Form, Grid, Icon, Label, Rating } from 'semantic-ui-react';
import { map } from 'lodash';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
const messages = defineMessages({
default: {
id: 'Default',
defaultMessage: 'Default',
},
i i

25. Custom WidgetsCustom Widgets
components/index.js
import RatingWidget from './RatingWidget/RatingWidget';
export { RatingWidget };

26. Custom WidgetsCustom Widgets
config.js
import { RatingWidget } from './components';
export const widgets = {
...defaultWidgets,
id: {
...defaultWidgets.id,
rating: RatingWidget,
},
};

27. Pastanaga Icon SystemPastanaga Icon System

28. Pastanaga Icon SystemPastanaga Icon System
Injects SVG icons in the markup
import myCustomSVG from '~/icons/my-svg.svg';
import { Icon } from '@plone/volto/components';
<Icon name={myCustomSVG} />

29. Rich Text Editor SettingsRich Text Editor Settings

30. Rich Text Editor SettingsRich Text Editor Settings
config.js
import React from 'react';
import createInlineStyleButton from 'draft-js-buttons/lib/utils/creat
import Icon from '@plone/volto/components/theme/Icon/Icon';
import underlineSVG from '@plone/volto/icons/underline.svg';
const UnderlineButton = createInlineStyleButton({
style: 'UNDERLINE',
children: ,
});

31. Rich Text Editor SettingsRich Text Editor Settings
config.js
export const settings = {
...defaultSettings,
richTextEditorInlineToolbarButtons: [
UnderlineButton,
...defaultSettings.richTextEditorInlineToolbarButtons,
],
};

32. Actions & ReducersActions & Reducers

33. Actions & ReducersActions & Reducers
constants/ActionTypes.js
export const GET_FAQ = 'GET_FAQ';

34. Actions & ReducersActions & Reducers
actions/faq/faq.js
import { GET_FAQ } from '../../constants/ActionTypes';
export function getFaq() {
return {
type: GET_FAQ,
request: {
op: 'get',
path: `/@search?portal_type=faq`,
},
};
}

35. Actions & ReducersActions & Reducers
actions/index.js
import { getFaq } from './faq/faq';
export { getFaq };

36. Actions & ReducersActions & Reducers
reducers/faq/faq.js
import { GET_FAQ } from '../../constants/ActionTypes';
const initialState = {
error: null,
items: [],
loaded: false,
loading: false,
};
export default function faq(state = initialState, action = {}) {
switch (action.type) {
case `${GET_FAQ}_PENDING`:
return {
...state,
error: null,
loading: true,

37. Actions & ReducersActions & Reducers
reducers/index.js
import defaultReducers from '@plone/volto/reducers';
import faq from './faq/faq';
const reducers = {
...defaultReducers,
faq,
};
export default reducers;

38. Actions & ReducersActions & Reducers
components/FaqView/FaqView.jsx
/**
* Faq view.
* @module components/FaqView/FaqView
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Helmet from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { Container } from 'semantic-ui-react';
import { getFaq } from '../../actions';
/**
i

39. training.plone.org/5/volto/training.plone.org/5/volto/

40. Join the Sprint!Join the Sprint!

41. Questions?Questions?
slideshare.net/robgietema