From a88ad2ff68fedfba94ff9d7f4712348d962a14f1 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Fri, 29 May 2020 22:15:45 +0200 Subject: [PATCH 1/8] Add initial documentation --- docs/mkdocs.yml | 2 ++ docs/source/slots/anatomy.md | 45 ++++++++++++++++++++++++++++++++++++ src/config/index.js | 10 ++++++++ 3 files changed, 57 insertions(+) create mode 100644 docs/source/slots/anatomy.md diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 395f373daa..41fc5bc045 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -47,6 +47,8 @@ nav: - Anatomy: 'blocks/anatomy.md' - Settings: 'blocks/settings.md' - Edit components: 'blocks/editcomponent.md' + - Slots: + - Anatomy: 'slots/anatomy.md' - Recipes: - App component insertion point: 'recipes/appextras.md' - Lazy loading and code splitting: 'recipes/lazyload.md' diff --git a/docs/source/slots/anatomy.md b/docs/source/slots/anatomy.md new file mode 100644 index 0000000000..f54bcb6901 --- /dev/null +++ b/docs/source/slots/anatomy.md @@ -0,0 +1,45 @@ +# Slots anatomy + +The slots are insertion points in the Volto rendering tree structure. You can add a +component, along with its configuration, if any and it will be rendered in that +insertion point. You can control in which route do you want that element appear as well +as the order (position) of the items that you add in the in the slots. Slots are named, +so you can add in the configuration object: + +```js +export const slots = { + aboveDocumentTitle: [ + // List of components (might have config too, maybe in `data` property) + { path: '/', component: 'Component', data: {} }, + // It can include blocks too (makes sense when we will be able to save them) + { path: '/', '@type': 'text' }, + { path: '/', '@type': 'image' }, + ], +}; +``` + +## Slots + +- aboveDocumentTitle +- ... + +### Slots definition + +You can define new slots anywhere in the tree, then define them in the configuraion +object. This is how you define them in JSX: + +```jsx +import {SlotRenderer} from '@plone/volto/components'; +... + + + +``` + +### Slots in addons + +You can define slots also in addons: + +```js +config.slots.aboveDocumentTitle.push({path:'/', component: ExtraComponent}) +``` diff --git a/src/config/index.js b/src/config/index.js index 4f3189c2be..d57ef74279 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -92,3 +92,13 @@ export const blocks = { }; export const addonReducers = {}; + +export const slots = { + aboveDocumentTitle: [ + // List of components (might have config too, maybe in `data` property) + { path: '/', component: 'Component', data: {} }, + // It can include blocks too (makes sense when we will be able to save them) + { path: '/', '@type': 'text' }, + { path: '/', '@type': 'image' }, + ], +}; From a7aa0a886029c62f93188a4f0c4e4825419a8433 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Sat, 30 May 2020 11:13:31 +0200 Subject: [PATCH 2/8] Fist implementation for the slots renderers --- docs/source/slots/anatomy.md | 8 +- .../theme/SlotRenderer/SlotRenderer.jsx | 21 ++++ .../theme/SlotRenderer/SlotRenderer.test.jsx | 109 ++++++++++++++++++ 3 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 src/components/theme/SlotRenderer/SlotRenderer.jsx create mode 100644 src/components/theme/SlotRenderer/SlotRenderer.test.jsx diff --git a/docs/source/slots/anatomy.md b/docs/source/slots/anatomy.md index f54bcb6901..b786b4fc10 100644 --- a/docs/source/slots/anatomy.md +++ b/docs/source/slots/anatomy.md @@ -8,7 +8,7 @@ so you can add in the configuration object: ```js export const slots = { - aboveDocumentTitle: [ + aboveContentTitle: [ // List of components (might have config too, maybe in `data` property) { path: '/', component: 'Component', data: {} }, // It can include blocks too (makes sense when we will be able to save them) @@ -20,7 +20,7 @@ export const slots = { ## Slots -- aboveDocumentTitle +- aboveContentTitle - ... ### Slots definition @@ -32,7 +32,7 @@ object. This is how you define them in JSX: import {SlotRenderer} from '@plone/volto/components'; ... - + ``` @@ -41,5 +41,5 @@ import {SlotRenderer} from '@plone/volto/components'; You can define slots also in addons: ```js -config.slots.aboveDocumentTitle.push({path:'/', component: ExtraComponent}) +config.slots.aboveContentTitle.push({path:'/', component: ExtraComponent}) ``` diff --git a/src/components/theme/SlotRenderer/SlotRenderer.jsx b/src/components/theme/SlotRenderer/SlotRenderer.jsx new file mode 100644 index 0000000000..35e83454f3 --- /dev/null +++ b/src/components/theme/SlotRenderer/SlotRenderer.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { matchPath, useLocation } from 'react-router-dom'; +import { v4 as uuid } from 'uuid'; +import { slots } from '~/config'; + +export default ({ name }) => { + const pathname = useLocation().pathname; + + if (!slots[name]) { + return null; + } + + const currentSlot = slots[name]; + const active = currentSlot.filter((slot) => matchPath(pathname, slot.path)); + + return active.map(({ component, props }) => { + const id = uuid(); + const Slot = component; + return ; + }); +}; diff --git a/src/components/theme/SlotRenderer/SlotRenderer.test.jsx b/src/components/theme/SlotRenderer/SlotRenderer.test.jsx new file mode 100644 index 0000000000..ca46d60a96 --- /dev/null +++ b/src/components/theme/SlotRenderer/SlotRenderer.test.jsx @@ -0,0 +1,109 @@ +import React from 'react'; +import '@testing-library/jest-dom/extend-expect'; +import { render } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; +import SlotRenderer from './SlotRenderer'; +import { slots } from '~/config'; + +describe('SlotRenderer Component', () => { + test('renders a SlotRenderer component for the aboveContentTitle with two slots in the root', () => { + slots.aboveContentTitle = [ + { + path: '/', + component: (props) =>
, + props: { className: 'slot-component' }, + }, + { + path: '/', + component: (props) =>