Do you want to create your own Plone site using Volto? This talk will guide you through the whole process. From generating the boilerplate with create-volto-app to theming and creating your own views.

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