Skip to content

v10.0.0
Compare
Choose a tag to compare
@Gnito Gnito released this 14 Feb 13:07
· 13 commits to master since this release
v10.0.0
0b1d904
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Changes v10.0.0

  • [add] This adds support for page asset files that can be created in Console. These asset files are
    taken into use for

    • LandingPage
    • TermsOfServicePage
    • PrivacyPolicyPage
    • AboutPage
    • and other static pages can also be created through Console (they'll be visible in route:
      /p/:asset-name/)

    #1520

This adds rendering for page assets.

Rendering flow

The rendering happens in these steps (for LandingPage):

  1. LandingPage.duck.js defines that it needs page asset called content/pages/landing-page.json
  2. 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).
  1. LandingPage.js gets pageAssetsData as props and passes the rendering to a new component: PageBuilder
  2. 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>)
  1. "meta" information is passed to <StaticPage> component, which is moved under PageBuilder directory.
  2. 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",

More Docs

Learn more about Pages:

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.
Assets 2
Loading