Skip to content

Conversation

@redallen
Copy link
Contributor

@redallen redallen commented Mar 28, 2019

What: Rewrite of React-docs. Still using Gatsby so v2 website development can continue.
A few key points for doc writers:

  1. Docs now use *.md files transformed by gatsby-transformer-remark. This encourages writing more documentation and allows for a single source of truth of where doc pages come from (no having to import and link examples/*.js files to our custom *.docs.js files).
  2. Using class fields in examples is no longer supported until this PR is merged. On the bright side, we probably should not assume consumers are using proposal language features like class properties and I've already converted all the examples in the meantime.

Key points for contributors:

  1. Doc build times take 2 minutes for previews (down from ~25 minutes)!!! Hopefully this makes them less flaky too.
  2. Time to first load for yarn start:pf4 slightly decreased, and with clearer warning messages as to why resources or property tables might not be loading.

Technical changes:

  1. Use custom plugin react-docgen-typescript to replace build-time task gen-ts-docs to allow hot reloading.
  2. Ignore unused source files.
  3. Better manage example resource injection (for examples/*.(js|svg) files as well as entire modules). This is the hardest part of the docs to understand and is handled in helpers/dynamicImports.js. No more components are injected than need to be to keep page sizes smaller.
  4. Treat JS and TS the same when it comes to docs.
  5. Rewrite all doc components to consume new GraphQL data flow. Data is structured completely differently.
  6. Using @patternfly/react components in our docs is done safely by using "@patternfly/react-core": "2.9.2" in our package.json, but importing doing live code example imports via require("../../../react-core/dist/js"). This means if you break a component used in the docs (ie. Title) the whole doc website will not break but the components/title page examples will break.

Additional issues: Still a a day or two of features to tackle:

- [ ] Exclude inherited TS props Future work.

  • Axe
  • Nav menu on mobile
  • CoreJS warning
  • Live edit styling + dropdown
  • Background component breaks nav
  • Style so it looks decent. I can't CSS for my life.
  • Document how to write a *.md file.

@patternfly-build
Copy link
Collaborator

PatternFly-React preview: https://1656-pr-patternfly-react-patternfly.surge.sh

@redallen
Copy link
Contributor Author

redallen commented Apr 1, 2019

Finished howto docs + styles. This is ready to merge once tests pass.

@redallen redallen changed the title [WIP] feat(gatsby): Refactor Gatsby feat(gatsby): Refactor Gatsby Apr 1, 2019
Copy link
Collaborator

@jschuler jschuler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome first step in redoing this @redallen . Couple things we can iterate on:

  • Fix font size (html should be set to 16px so that rem units can pick it up)
  • Font family should be Overpass everywhere
  • Some components are not rendering (LoginPage, Background)
  • Layouts should be in their own nav category
  • Layouts don't have visual borders anymore
  • Dark theme toggle button is missing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants