DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Tweak documentation

Browse Source 
Reviewed By: danielbuechele

Differential Revision: D7009695

fbshipit-source-id: 145eca292e5cf95413caf5bc81b033419adb67a1
This commit is contained in:
Emil Sjölander
2018-02-16 06:42:01 -08:00
committed by Facebook Github Bot
parent c84ed90272
commit 056b75858c
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
website/contents/contributing/writing-documentation.md
View File

@@ -6,7 +6,10 @@ hasPlayground: false
## Writing Documentation ## Writing Documentation
Documentation pages are generated from the Markdown files in `contents/`. The files are organized in 4 sections/folders (getting-started, properties, examples, contributing) which are dynamically listed on the docs overview page. The Markdown files can have some header files containing metadata. Documentation pages are generated from Markdown files in `contents/`.
The files are organized in 4 sections/folders (getting-started, properties,
examples, contributing) which are dynamically listed on the docs overview page.
The Markdown files should contain a header with metadata.
```markdown ```markdown
--- ---
@@ -17,19 +20,20 @@ initialPlayground: eyJ3aWR0aCI6IjYwMCIsImhlaWdodCI6NTAwLCJjaGlsZHJlbiI6W3t9LHt9L
--- ---
``` ```
The `path` can be any URL this page should be available at. The `title` is used as the page's HTML-title and when referencing the file from the documentation overview. There are two kinds of templates for a page: with and without playground. `hasPlayground` selects the corresponding template (`src/templates/{with|without}Playground.js`). With `hasPlayground: true`, one can add a flex control which can be placed inline with the text in markdown. For example you can do the following, - The `path` indicates the URL path this page will be available at.
- The `title` is used as the page's HTML-title and when referencing
the file from the documentation overview.
- The `hasPlayground` property indicates whether this documentation
has an associated playground to test out the documented feature.
- The `initialPlayground` property is only relevant for documentation
pages with playgrounds and contains the initial playground state.
This base64 string is a reference to the hash (content after #)
of a [playground](/playground) url.
Within the markdown of a documentation page which has an associated
playground you can add controls to let the user play around with the feature
directly from the documenation page.
```markdown ```markdown
## Align Content
The property defines the distribution of lines along the cross-axis. This only
has effect when items are wrapped to multiple lines (see [flexWrap](flex-wrap)).
<controls prop="alignContent"></controls> <controls prop="alignContent"></controls>
``` ```
There is one more metadata property called `initialPlayground` which allows to provide the custom playground for the documentation. For getting the playground id, create custom yoga layout in [playground](/playground) and copy the string after # from playground URL. For example if playground URL looks like this `https://yogalayout.com/playground#<PLAYGROUND_ID>`, then playground id is the string after `#`. If it isn't the one like in the previous format then actually its default playground, so one can skip this field.