feat: add /how-to/detect-ipfs-on-web

[lidel]

This PR:

• tweaks mermaid diagrams config to match IPFS brand book color guide and render a readable size, even on mobile
• adds /how-to/detect-ipfs-on-web page with some best practices around detecting IPFS resources on the web, based on recent discussions with Brave team and our effort to streamline implementation there.
  • Based on my experience with IPFS Companion browser extension and Brave, I aimed at a healthy balance between low level details and end user experience, but lmk if this is hard to follow or could be improved.
  • cc @cypt4 @autonome @SgtPooki @meandavejustice @rangermauve @fabricedesre @juliaxbow for visibility and additional feedback

As per usual, apologies for any grammar errors ;-)

PR preview

👉️ https://github.com/ipfs/ipfs-docs/blob/feat/how-to-implement-support-in-a-web-browser.md/docs/how-to/detect-ipfs-on-web.md

Website preview (static)

👉️ https://bafybeicp2oota2okffb4u6ta6gzx46jnpyyzxdrrzpzivtbo4xv6sfefim.on.fleek.co/how-to/detect-ipfs-on-web/

To see how the final docs.ipfs.tech version would look, see Fleek preview link in the CI section below.

[filecorgi]

• Image optimization came back clean!
• Vuepress build was successful!

[ElPaisano]

@lidel @SgtPooki @autonome is this PR still needed? Cleaning out some old PRs now.

[lidel]

@ElPaisano Yes, this is still needed, just had no bandwidth to land it :(

FYSA had some related discussions during IPFS Thing and alternative long term home for things like this could be "Integrations" section at https://specs.ipfs.tech (to be added), where we would have this flow, and also have things like https://github.com/ipfs/specs/pull/360. Then, on docs.ipfs.tech we would have a simplified version, without caching details, as noted by @SgtPooki above.

We could merge this as-is, so at least we have something, and then move to specs, once we have “integrations” section there, and only have a simplified diagram in docs.

[BigLep]

+1 on merging so we have something, and the moving to specs when it's ready to house it. Can you tackle this please @ElPaisano ?

[aschmahmann]

from @lidel: This is fine to merge, but also ok to keep as a draft until we have time to move this to the specs repo.

[ElPaisano]

@lidel this is ready for review. Made some adjustments

Main thing that is not clear to me is this section https://bafybeiblvih4yq6cbkxd7tauokc6qaxvvsvraftj7wa6sza6qyt5ggdbha.on.fleek.co/how-to/detect-ipfs-on-web/#what-to-do-with-detected-paths (starting on line 88)

Given that "The goal of this page is to provide some suggestions and best practices for Web 2 web browsers and other user agents that are interested in adding support for content-addressed resources.", do you mean that any browsers supporting IPFS should implement an "Open via IPFS" button that displays one of the various path types listed? I think SgtPooki had similar comments.

Also, https://github.com/ipfs/ipfs-docs/pull/1295#discussion_r1019539221 is still not clear to me