docs(usage): Add usage section to docs #759
Conversation
Current coverage is 99.48% (diff: 100%)@@ master #759 diff @@
==========================================
Files 134 134
Lines 2157 2152 -5
Methods 0 0
Messages 0 0
Branches 0 0
==========================================
- Hits 2146 2141 -5
Misses 11 11
Partials 0 0
|
| The Semantic UI React package can be installed via NPM: | ||
| </p> | ||
| <Segment> | ||
| <pre>$ npm install {pkg.name}</pre> |
There was a problem hiding this comment.
Can we add the --save flag here to remind users to persist the install to their deps?
Since this new page exists, we can also remove the installation instructions from the Introduction page. Do you think we should replace that one with a Setup section that just links to this Usage section?
| </p> | ||
| <Segment> | ||
| <pre> | ||
| {'<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css"></link>'} |
There was a problem hiding this comment.
The doc site uses semantic-ui-css, so we can inject the version number from the package.json here:
// top of the file
const suiCSSVersion = pkg.devDependencies['semantic-ui-css'].replace(/[~^]/, '')
// update template string
{`<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/${suiCSSVersion}/semantic.min.css"></link>`}This way the instructions always show the same version the doc site itself is running.
| * Semantic-UI-CSS package | ||
| * -------------------------------------- */} | ||
| <Segment basic padded> | ||
| <Header as='h2' dividing>Semantic UI CSS package</Header> |
There was a problem hiding this comment.
This is great. Can we update the headers to have some nesting? Here's an example where I've made JavaScript and CSS as h2s and the three CSS options as h3 and non-dividing:
| </p> | ||
| <Segment> | ||
| <pre> | ||
| $ npm install semantic-ui-css |
There was a problem hiding this comment.
Let's also add --save here.
| </p> | ||
| <Segment> | ||
| <pre> | ||
| $ npm install semantic-ui |
There was a problem hiding this comment.
This one should probably be --save-dev given it installs a build system and the final stylesheet is a product of that build.
|
Awesome stuff, thanks! Left a few comments and questions. |
|
Thanks for the comments 👍 I've moved the introduction section around slightly. I wanted to maintain the flow of the feature list and corresponding sections. Let me know if you'd prefer the link to Usage under a separate sub-heading. |
|
Perfect. 😸 |
levithomason
changed the title
This PR includes a 'Usage' section in the documentation, detailing the installation steps for Semantic UI React and the necessary stylesheet to use the project.
For those unfamiliar with component frameworks such as Semantic UI, it would be handy to have this information upfront in the docs. It would allow new users to get started with the React integration as quickly as possible.
I recently joined the Gitter chat to ask a question around this, and saw that a similar question had already been asked a few hours earlier. @levithomason provided some really useful info, which has formed the basis of this page. He also mentioned PRs for new docs were welcome.
Apologies if I've missed anything around contributing - let me know and I'll fix up.