linaria icon indicating copy to clipboard operation
linaria copied to clipboard

WIP: Documentation site using component-docs

Open trongthanh opened this issue 5 years ago • 1 comments

Motivation

As per discussion in #320, here's my initial PR follow up what's left in #320 and it is still a WIP.

Summary

Here's my list of features that I think needed to done (details in RFC below):

  • [ ] 1. Syntax highlight of CSS-in-JS
  • [ ] 2. Port MDX components from flow to typescript
  • [ ] 3. Generate docs site into main website and serve as static
  • [ ] 4. CI config for Docs site and as a step of website build
  • [ ] 5. Write up home page
  • [ ] 6. Improve component-docs filter function to some simple text search

Details and RFC

  1. Syntax highlighting of CSS in string literals is fixed in https://github.com/callstack/component-docs/pull/45 but then it's blocked by https://github.com/callstack/component-docs/issues/49. I'm pending for component-docs author to clear the blocking issue first.

  2. Currently, some React components in the docs folder which is used by the MDX document are written with Flow type. I want to port them to TypeScript but also need to check if component-docs has already support TS.

  3. My initial intention is to generate the docs site to website/docs folder and add a static serving middleware to Koa server. However when I try to output the component-docs site into website/docs, I get some React runtime mismatch error. So, currently, the documentation site is generated to docs-public folder. I'll look into how website is built right now and will suggest a patch so that docs site will be served at linaria.dev/docs

  4. With whatever Linaria repo CI/CD solution currently is, add a step to generate docs site and serve it to website at /docs

  5. Pick some sections in README, for e.g.: Features, Setup, Syntax, Demo, Trade-off... and copy them to docs site Home Page.

  6. Use a client-side text search solution for example lunr.js to provide better documentation browsing. This might be too complicated and should be in another PR.

Test plan

I have created a Netlify deployment automatically built upon new commits pushed to this branch. Everyone can preview it here: https://linaria-docs-preview.netlify.app

Contributors can check out the branch, re-run yarn install and execute yarn docs to build and serve the site at http//localhost:3031

trongthanh avatar Nov 04 '20 17:11 trongthanh

Hey @trongthanh, thank you for your pull request 🤗. The coverage report for this branch can be viewed here.

callstack-bot avatar Nov 04 '20 18:11 callstack-bot