Use Header/Footer

[julien51]

Now that we have Header and Footer let's add them:

Header:

• https://unlock-protocol.com/
• https://docs.unlock-protocol.com/
• https://unlock-protocol.com/guides
• https://showcase.unlock-protocol.com/

Footer:

• https://unlock-protocol.com/
• https://app.unlock-protocol.com/
• https://docs.unlock-protocol.com/
• https://unlock-protocol.com/guides
• https://showcase.unlock-protocol.com/

[kalidiagne]

@julien51 for now we can not integrate for docs, react 18 not supported yet in docusaurus

• Migrate to React 18 facebook/docusaurus#7264
• Update react monorepo to v18 (major) trussworks/Engineering-Playbook#293 (comment)

[julien51]

Is there any reason why we need React 18 for our UI library?

I think we could make React a sibling dependency?

[julien51]

So it looks like some tailwin library require the use of React 18... so for now it is probably more reasonable to wait for Docusaurus to support React 18.

Please focus on the guides!

[julien51]

Related #10715

[julien51]

@searchableguy would you be able to help here so we ship or header/footer components in a way that could allow them to be embedded in guides? (WordPress site)

[julien51]

Adding @searchableguy so we can add the UI package to Wordpress.

There is more work involved. Please @searchableguy provide a detailed update of the underlying stacks. We should also list dependencies to ensure they are required (for example do we need to import unlock-js and if not, let's do things "natively").

[searchableguy]

I opened a PR to add cdn build. There is an example inside it which you can copy to add import and mount react components directly from our UI library.

[julien51]

@kalidiagne Thisis back on your plate. Please take of it ASAP.

[kalidiagne]

Header/Footer are now added in showcase and guides website.

We need more steps:

• Add notion documentation that includes the details about how we can change the menu and how to set it
• Include the showcase/guides menu in the ui package to prevent losing the menu configuration

[kalidiagne]

@julien51

An update on the implementation for guides/showcase that i checked with Chris.
it's all now set and works fine with Chrome/Brave, but we have to consider these issues:

• Cross-browser support: for example, not all versions of Safari/Firefox are not supporting importmaps which makes not possible to show the footer/header components

• First loading can be very slow, about 8/10sec to load the header/footer

I suggest pausing the implementation for showcase/guides and considering the Headless CMS approach.