Upgrade PortalJS website to Flowershow latest with nice theme

[rufuspollock]

We want PortalJS site updated so it looks better and is ready fro further updates

Acceptance

• [x] Running off latest Flowershow (do we try using markdowndb like DataHub) :heavy_check_mark: 2023-04-10 FIXED. Using MarkdownDB. PR: https://github.com/datopian/portaljs/pull/752
  • [x] We could basically copy setup of DataHub for now as that is cleaner setup probably
• [x] Theme: can use Flowershow latest plus stuff from tailwindui (plus a smidgeon of DataHub styles) :construction: 2023-04-11 In progress, wrote some notes about the home page on comments
• [x] What happens with existing code and examples? :heavy_check_mark: 2023-04-10 will still be compatible, old rendering pipeline was kept on the /data-literate route
• [x] Site is building again (currently not building in vercel) :heavy_check_mark: 2023-04-12 FIXED. See https://github.com/datopian/portaljs/pull/755

Tasks

• [ ] Integrate Flowershow into the Portal.JS site, similar to datahub-next
• [ ] Do some theming

[demenech]

Updates 2023-04-10

Changes

• Draft PR: #750
• Integrated Flowershow and MarkdownDB similar to datahub-next

[demenech]

Updates 2023-04-11

Homepage mock up

• Hero section
  • Heading that explains what Portal.JS is about in a few words
  • Button link to the Learn page (something like "Get started") and to the examples (which would be the gallery)
  • (possibly) a visual showcase e.g gif or image
  • https://datahub.io/ - Final results
  • https://flowershow.app/ - Before and after
  • https://mui.com/ - Available components
  • https://ionicframework.com/ - No showcase
• Features section
  • Nice looking cards with the features listed at https://portaljs.org/docs
  • e.g Ionic
  • Button link to /docs
• (possibly) trusted by or used by section
• Featured examples
  • Something like next.js has:
  • 
• Quick start
  • Steps to bootstrap a Portal.JS project
  • Explanation on the left, code on the right
  • Content can be found at https://portaljs.org/learn
• Stats and community
  • Amount of stars, contributors, installs (?)
  • Link to Discord, link to GitHub

Future

• Rethink the site's structure
  • Homepage
  • About
  • Components -> which just links to the index of docs/components
  • An example I really like is this one: https://material.angular.io/components/categories
  • GitHub link + stars
  • Move the data literate stuff and Excel Viewer to Docs
  • Examples
  • Docs
  • Left side menu
    • Seems like a convention between component libraries
    • Makes it very handy to find information about different components, I usually just CTRL+F what I'm looking for on the docs when I'm using UI libs and the link on the left side menu get highlighted
    • e.g:
    • https://tailwindcss.com/docs/width
    • https://mui.com/material-ui/react-autocomplete/
  • Structure could be:
    • Documentation
    • What is Portal.JS?
    • Getting started
    • Contribute
    • Components
    • UI
      • Nav
      • Footer
      • ...
    • Dataset
      • ...
    • Search
      • ...
    • ...

References

• https://flowershow.app/
• https://datahub.io/
• https://ionicframework.com/
• https://nextjs.org/
• https://tailwindcss.com/
• https://material.angular.io/
• https://mui.com/

[rufuspollock]

Updates 2023-04-11

Great stuff. I've copied this into the dedicated issue for new home page #754 - this issue can just focus on upgrade to Flowershow (without any change to home page really for now, or whatever stub stuff you want).

[rufuspollock]

Reopening - needs the build to work /cc @demenech

[demenech]

Reopening - needs the build to work /cc @demenech

@rufuspollock the site build was fixed on https://github.com/datopian/portaljs/pull/755

[rufuspollock]

@demenech 🎉 do you want to update acceptance and close ...

[demenech]

FIXED. Flowershow is integrated (https://github.com/datopian/portaljs/pull/752) and site build is working (https://github.com/datopian/portaljs/pull/755)