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

PageBuilder for page assets retrieved from Asset Delivery API (created in Console) #1520

Merged
merged 98 commits into from Feb 14, 2023
Merged

PageBuilder for page assets retrieved from Asset Delivery API (created in Console) #1520

merged 98 commits into from Feb 14, 2023

Conversation

Gnito
Copy link
Contributor

@Gnito Gnito commented Jun 3, 2022 •
edited

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 rendering 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 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 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 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 force-pushed the cms-page branch 9 times, most recently from ba8891d to daf966f Compare June 7, 2022 11:56
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 9, 2022 12:06 Inactive
@Gnito Gnito force-pushed the cms-page branch 3 times, most recently from aa18141 to 51003be Compare June 13, 2022 16:47
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 17, 2022 10:35 Inactive
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 20, 2022 12:27 Inactive
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 20, 2022 13:17 Inactive
@Gnito Gnito force-pushed the cms-page branch 3 times, most recently from e394680 to 5773992 Compare July 14, 2022 22:25
@Gnito Gnito temporarily deployed to sharetribe-starter-app July 14, 2022 22:28 Inactive
@Gnito Gnito force-pushed the cms-page branch 3 times, most recently from d8a9020 to 85afdda Compare July 19, 2022 11:01
@Gnito Gnito temporarily deployed to sharetribe-starter-app July 19, 2022 11:03 Inactive
@Gnito Gnito force-pushed the cms-page branch 2 times, most recently from 5c91dd0 to d7c40a3 Compare August 4, 2022 09:58
@OtterleyW OtterleyW temporarily deployed to ca-sandbox-ftw August 23, 2022 06:35 Inactive
@Gnito Gnito temporarily deployed to ca-sandbox-ftw August 23, 2022 08:46 Inactive
@Gnito
Field type customAppearance: rename color as backgroundColor
9c6bad3
@Gnito
Omit invalid props warning from field types: headings, paragraph, mar…
3f771f3 
…kdown

Removing content input results as empty string in the saved asset.
@Gnito
Change in page asset schema: ingress -> description
c3587d9
@Gnito
Prepare CMSPage, LandingPage, PrivacyPage, TermsOfServicePage for 'meta'
162bed8 
All the 'meta' data comes from page asset file and it's handled inside PageBuilder.
@Gnito
Page: rename contentType as openGraphType
bdce95d
@Gnito
Page: tiny refactoring
be8d481
@Gnito
util/data.js: omit exposed image resolver configs
9a8accc
@Gnito
util/seo.js: OpenGraph and Twitter should use socialSharingTitle and …
2cd1eea 
…socialSharingDescription
@Gnito
Page: add prop: socialSharing
6cf6aae
@Gnito
Field: handle field types in 'meta' data
d2ebb98
@Gnito
PageBuilder: extract field data inside 'meta' object of page asset
77d2348
@Gnito
Page: publisher seemed to confuse Google's structured data
a2e2697
@Gnito Gnito temporarily deployed to ca-sandbox-ftw February 7, 2023 15:00 Inactive
@Gnito Gnito temporarily deployed to sharetribe-starter-app February 7, 2023 15:02 Inactive
@Gnito Gnito temporarily deployed to ca-sandbox-ftw February 9, 2023 13:07 Inactive
@Gnito Gnito temporarily deployed to sharetribe-starter-app February 9, 2023 13:28 Inactive
@Gnito Gnito temporarily deployed to ca-sandbox-ftw February 10, 2023 11:17 Inactive
@Gnito Gnito temporarily deployed to ca-sandbox-ftw February 14, 2023 11:30 Inactive
@Gnito Gnito changed the title WiP: PageBuilder PageBuilder for page assets retrieved from Asset Delivery API (created in Console) Feb 14, 2023
@Gnito Gnito merged commit 548222f into master Feb 14, 2023
@Gnito Gnito deleted the cms-page branch February 14, 2023 12:58
This was referenced Feb 14, 2023
Merged
Merged
Merged
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.

None yet
3 participants
@Gnito @OtterleyW @jannekoivistoinen