Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New Release: v10.0.0 #1586

Merged
merged 1 commit into from
Feb 14, 2023
Merged

New Release: v10.0.0 #1586

merged 1 commit into from
Feb 14, 2023

Conversation

Gnito
Copy link
Contributor

@Gnito Gnito commented Feb 14, 2023 •
edited
Loading

The related pull request containing the changes: #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",

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.

@Gnito Gnito merged commit 0b1d904 into master Feb 14, 2023
@Gnito Gnito deleted the v10.0.0 branch February 14, 2023 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@Gnito