Use header nav, page hero, site footer from blog

[jessicaschilling]

Use the following elements from the new IPFS blog/news site as repeatable elements for this site:

• Header nav
  
• Page hero (for internal pages only, e.g. legal)
  
• Site footer
  

As these elements will appear across at minimum 3 sites (ipfs.io, blog, ecosystem directory), let's investigate the best way to make these repeatable: Is this the right time to establish an MVP atomic components library (probably including CSS a la https://github.com/ipfs-shipyard/ipfs-css )?

[jessicaschilling]

@zebateira is scheduling a kickoff discussion 19 April 😊

[zebateira]

Here are the notes from the kickoff discussion 19 Apr 2021.

IPFS sites that could use components in the future (most would use header and/or footer, but not all)

• Main ipfs.io site
• Docs
• Blog & News
• Ecosystem Directory (work in progress)
• IPFS Gateway Checker
• IPFS Directory Listing (dir-index-html)
• IPLD Explorer
• CID Tool
• IPFS Share
• DAG Builder
• (maybe) IPFS Companion welcome screen and prefs page

Components

• Components that we need for sure(as seen above in the issue description):
  • Header nav
  • Hero (including variants)
  • Footer
• Ideas for components that might make sense in this initial PoC work:
  • Breadcrumbs
  • Newsletter form
  • Header/Hero integration

Header nav

• Customizable links per instantiation
• Allow for the following on a per-instantiation basis:
  • "Install" button or similar primary CTA
  • Submenus
  • Github Link (could only use gh logo)
  • Search

Hero

• Includes h1, h2 and image (opt-in)
• Option for "heavy" visual treatment (i.e. dark blue background, feels like an extension of the header nav) vs "light" (no heavy background, feels like an extension of the content underneath it)
• Open question: Where do breadcrumbs fit in? Are they part of the header nav, the hero, or their own component?

Footer

• Newsletter form should be opt-in (to avoid salesy feel on sites like the DAG Builder)

Other Parts

• ipfs-css usage? It is important for branding, but how will we intersect this with the components?
• Metadata single source of truth for PL — not a priority, but we could spin off a very simple version to kick off the effort as proof of its value
  • Projects metadata (ipfs, libp2p, filecoin, etc) of PL in a single place (e.g. package or airtable). Each project could have the following information: name, website link, svg logo, other links (blog, docs, etc), community links (facebook, twitter, discourse, etc), codes of conduct (there could be a general one for PL, with overrides), code licenses.
  • Should be in an universal format (json) so that it could be published and consumed by any environment.

[jessicaschilling]

Thanks, @zebateira! I added a few more sites that might be impacted, and a few other additional notes from our meeting. Feel free to edit my edits if I've misrepresented anything. 😊

Also summoning @orvn here, in case he wants to watch the progress of a header/footer to include in the ecosystem directory.

[jessicaschilling]

@zebateira - when you start to actually build out the header nav, can we please have a quick check-in about adding two things that are present on the scratchpad at https://ipfs-ia-scratchpad.netlify.app/ ?

• "Install" button
• Submenu capability (in the case of the scratchpad, it's a "Resources" menu with a submenu, but we may want different text/links for the real thing - the scratchpad is a bit old)

Thank you!

[zebateira]

@jessicaschilling sounds good 👍
at a first glance the install button will be supported out of the box since we will enable a custom render that will enable the header to render whatever we want in which ever position we want.
taking note of the submenu feature 👍

[zebateira]

Update

Until we push this to a new repo, here is the progress so far:

• Monorepo setup with dev and build flows
• Storybook initial setup
  • Each component will be showcased in a series of examples on storybook.
• Initial structure setup
  • packages/components <- reusable components
  • packages/themes <- reusable themes that can be applied to components and/or to any html element
• Coming soon:
  • Create first component: footer
  • Publish flow to allow websites to use the UI Kit as a dependency

[jessicaschilling]

@zebateira Thanks for the update. Let me know if you need me to set up a new repo in the PL org - not sure if you have permissions.

[zebateira]

@jessicaschilling yeah I don't. Could you create it for me? I'd say name it protocol/web-ui-kit?

[jessicaschilling]

@zebateira I'm going to close this issue - can we have future discussion in https://github.com/protocol/website-ui-kit please?