The rendering happens in these steps (for LandingPage):
LandingPage.duck.js defines that it needs page asset called content/pages/landing-page.json
src/ducks/hostedAssets.duck.js fetches that asset and saves it to Redux store
It also calls src/util/data.js, which has code to denormalize the asset data
(assetImage entities are by default in included part of the returned asset).
LandingPage.js gets pageAssetsData as props and passes the rendering to a new component: PageBuilder
PageBuilder reads the content of the page asset: sections and meta
"sections" (data that goes inside <body>)
"meta" (which is data that goes inside <head>)
"meta" information is passed to <StaticPage> component, which is moved under PageBuilder directory.
SectionsBuilder takes "sections" as props and continues rendering the UI components.
Different types of section components
Block components (block could also contain fields)
Field components
In addition to the landing page, there are similar renderings made for TermsOfServicePage and PrivacyPolicyPage
For generic page assets, the routing now contains CMSPage component (with route: /p/<page-asset-id>/)
Markdown
Block component can contain a key text, which has markdown content.
This solution uses Unified and it's plugin ecosystem to render that markdown as React components.
Unified/rehype is also used by references like Gatsby.
We use these versions at this point:
"rehype-react": "^6.2.1",
"rehype-sanitize": "^4.0.0",
"remark-parse": "^9.0.0",
"remark-rehype": "^8.1.0",
"unified": "^9.2.2",
Taking an update from upstream
This is causing a major version change - and you need to check the code in this PR if you experience merge conflicts. You also need to make choices about whether or not you keep your current pages (e.g. LandingPage) or start using Pages for that too.
Most of the new code changes of this PR are inside:
src/containers/PageBuilder/
The content of src/containers/LandingPage/ is swapped to use the Pages feature
You need to decide if you want to keep your existing LandingPage design or start using PageBuilder (and Page Editor in Console)
The same applies to
src/containers/TermsOfSerivcePage/
src/containers/PrivacyPolicyPage/
src/containers/AboutPage/
There are a couple of other components that also were modified a bit. E.g. Page, Footer
AspectRatioWrapper component was added to FTW-daily too
Util files updated or added:
data.js
sanitize.js
seo.js
string.js
types.js
AuthenticationPage was refactored and it had to read Terms of Service data from the new page asset.
Server: fetching of page asset data was taken into account there.
The related pull request containing the changes: https://github.com/sharetribe/ftw-daily/pull/1520
This adds rendering for page assets.
Rendering flow
The rendering happens in these steps (for LandingPage):
content/pages/landing-page.json<body>)<head>)<StaticPage>component, which is moved under PageBuilder directory.In addition to the landing page, there are similar renderings made for TermsOfServicePage and PrivacyPolicyPage For generic page assets, the routing now contains CMSPage component (with route:
/p/<page-asset-id>/)Markdown
Block component can contain a key text, which has markdown content. This solution uses Unified and it's plugin ecosystem to render that markdown as React components. Unified/rehype is also used by references like Gatsby. We use these versions at this point: "rehype-react": "^6.2.1", "rehype-sanitize": "^4.0.0", "remark-parse": "^9.0.0", "remark-rehype": "^8.1.0", "unified": "^9.2.2",
Taking an update from upstream
This is causing a major version change - and you need to check the code in this PR if you experience merge conflicts. You also need to make choices about whether or not you keep your current pages (e.g. LandingPage) or start using Pages for that too.
Most of the new code changes of this PR are inside:
src/containers/PageBuilder/src/containers/LandingPage/is swapped to use the Pages featuresrc/containers/TermsOfSerivcePage/src/containers/PrivacyPolicyPage/src/containers/AboutPage/