Skip to content

Commit

Permalink
Publish v1.0.12 (#581)
Browse files Browse the repository at this point in the history
  • Loading branch information
JoelMarcey authored Apr 18, 2018
1 parent 57cddb4 commit 40a9047
Show file tree
Hide file tree
Showing 9 changed files with 780 additions and 3 deletions.
40 changes: 39 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,43 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

## [1.0.12] - 2018-04-18

This is a general release with additions and documentation updates. We would also like to welcome [React Native Elements](https://react-native-training.github.io/react-native-elements/) as a user of Docusaurus.

https://docusaurus.io has turned on versioning. There are other documentation updates as well.

> We turned on translations, but found a bug. So we turned it off until we fix it.
Thank you to the following contributors who helped with this release:

- @yangshun
- @amyrlam
- @SleepWalker
- @InternetExplorer7
- @zkochan
- @iRoachie
- @limonte

### Breaking changes

- While not officially breaking, `authorImage` will be [deprecated](https://github.com/facebook/Docusaurus/pull/577) for [`authorImageURL`](https://github.com/facebook/Docusaurus/commit/57cddb4d0897e7d9a62305c6b2b8a04e824e0941) in blog posts.

### Added

- [`twitterImage`](https://github.com/facebook/Docusaurus/commit/e738bbd99e80596f7280c2a131600600c083fc68) has been added to site configuration options for use in Twitter cards.
- Support for [non-latin characters](https://github.com/facebook/Docusaurus/commit/1642c078a723487d922b80f6d112c989b98e8bd3) have been added in heading anchors.
- [`<doctype HTML>`](https://github.com/facebook/Docusaurus/commit/946e2cef907a37290bfdf831dedc072de596f927) has been added to all HTML pages.
- `cssnano` is used to [minify](https://github.com/facebook/Docusaurus/commit/159b80df942ba4d7c422ecb6d4b57aa34fd7b5e3) the main CSS file.

### Fixed/Changed

- [Search bar width in mobile navigation](https://github.com/facebook/Docusaurus/commit/ba024a25c7cf37cdaecafb8d805a49505f461785).

### Removed

N/A

## [1.0.11] - 2018-04-12

This is a general release with additions and documentation updates (which are already live on docusaurus.io). We would also like to welcome [BlueWhale](https://facebookresearch.github.io/BlueWhale) as a new user of Docusaurus.
Expand Down Expand Up @@ -232,7 +269,8 @@ N/A
- Blog
- Documentation

[Unreleased]: https://github.com/facebook/Docusaurus/compare/v1.0.11...HEAD
[Unreleased]: https://github.com/facebook/Docusaurus/compare/v1.0.12...HEAD
[1.0.12]: https://github.com/facebook/Docusaurus/compare/v1.0.11...v1.0.12
[1.0.11]: https://github.com/facebook/Docusaurus/compare/v1.0.10...v1.0.11
[1.0.10]: https://github.com/facebook/Docusaurus/compare/v1.0.9...v1.0.10
[1.0.9]: https://github.com/facebook/Docusaurus/compare/v1.0.8...v1.0.9
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "docusaurus",
"description": "Easy to Maintain Open Source Documentation Websites",
"version": "1.0.11",
"version": "1.0.12",
"license": "MIT",
"keywords": [
"documentation",
Expand Down
157 changes: 157 additions & 0 deletions website/versioned_docs/version-1.0.12/api-pages.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
---
id: version-1.0.12-api-pages
title: Pages and Styles
original_id: api-pages
---

Docusaurus provides support for writing pages as React components inside the `website/pages` folder which will share the same header, footer, and styles as the rest of the site.

## Urls for Pages

Any `.js` files in `website/pages` will be rendered to static html using the path of the file after "pages". Files in `website/pages/en` will also get copied out into `pages` and will OVERRIDE any files of the same name in `pages`. For example, the page for the `website/pages/en/help.js` file will be found at the url `${baseUrl}en/help.js` as well as the url `${baseUrl}help.js`, where `${baseUrl}` is the `baseUrl` field set in your [siteConfig.js file](api-site-config.md).

## Page Require Paths

Docusaurus provides a few useful React components for users to write their own pages, found in the `CompLibrary` module. This module is provided as part of Docusaurus in `node_modules/docusaurus`, so to access it, pages in the `pages` folder are temporarily copied into `node_modules/docusaurus` when rendering to static html. As seen in the example files, this means that a user page at `pages/en/index.js` uses a require path to `"../../core/CompLibrary.js"` to import the provided components.

What this means to the user is that if you wish to use the `CompLibrary` module, make sure the require path is set correctly. For example, a page at `page/mypage.js` would use a path `"../core/CompLibrary.js"`.

If you wish to use your own components inside the website folder, use `process.cwd()` which will refer to the `website` folder to construct require paths. For example, if you add a component to `website/core/mycomponent.js`, you can use the require path, `"process.cwd() + /core/mycomponent.js"`.

## Provided Components

Docusaurus provides the following components in `CompLibrary`:

### `CompLibrary.MarkdownBlock`

A React component that parses markdown and renders to HTML.

Example:

```jsx
const MarkdownBlock = CompLibrary.MarkdownBlock;

<MarkdownBlock>
[Markdown syntax for a link](http://www.example.com)
</MarkdownBlock>;
```
### `CompLibrary.Container`
A React container component using Docusaurus styles. Has optional padding and background color props that you can configure.
**Props**
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `padding` | Array of `'all'`, `'bottom'`, `'left'`, `'right'`, `'top'` | `[]` | Positions of the padding. |
| `background` | One of `'dark'`, `'highlight'`, `'light'` | `null` | Background styling of the element. |
| `className` | String | - | Custom class to add to the element. |
**Example**
```jsx
<Container
padding={['bottom', 'top']}
background="light"
className="myCustomClass">
...
</Container>
```
### `CompLibrary.GridBlock`
A React component to organize text and images.
**Props**
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | One of `'left'`, `'center'`, `'right'` | `'left'` | Text alignment of content. |
| `layout` | One of `'twoColumn'`, `'threeColumn'`, `'fourColumn'` | `'twoColumn'` | Number of column sections in the `GridBlock`. |
| `className` | String | - | Custom class to add to the element. |
| `contents` | Array of content objects | `[]` | Contents of each section of the GridBlock. Refer to the next table for the fields available on a content object. |
**Content Object**
| Key | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | String | - | The display title of this section, which is parsed using Markdown |
| `content` | String | - | The text of this section, which is parsed using Markdown |
| `image` | String | - | The path of the display image |
| `imageAlt` | String | - | The text that will be shown in case the image is not available |
| `imageAlign` | One of `'top'`, `'left'`, `'bottom'`, `'right'` | `'left'` | Image alignment relative to the text |
| `imageLink` | String | - | Link destination from clicking the image |
**Example**
```
<GridBlock
align="center"
layout="threeColumn"
className="myCustomClass"
contents={[
{
title: `[Learn](${siteConfig.baseUrl}docs/tutorial.html)`,
content: 'Learn how to use this project',
image: siteConfig.baseUrl + 'img/learn.png',
imageAlt: 'Learn how to use this project',
imageLink: siteConfig.baseUrl + 'docs/tutorial.html',
},
{
title: 'Frequently Asked Questions',
content: 'Questions gathered from the community',
image: siteConfig.baseUrl + 'img/faq.png',
imageAlign: 'top',
},
{
title: 'More',
content: 'Lots of documentation is on this site',
},
]}
/>
```
More examples of how these components are used can be found in the [generated example files](getting-started-preparation.md) as well as in Docusaurus' own repo for its website set-up.
## Translating Strings
When translations are enabled, any pages inside `website/pages/en` will be translated for all enabled languages. Urls for non-English pages will use their language tags as specified in the `languages.js` file. E.g. The url for a French page of `website/pages/en/help.js` would be found at `${baseUrl}fr/help.html`.
When writing pages that you wish to translate, wrap any strings to be translated inside a `<translate>` tag. e.g.,
```jsx
<p>
<translate>I like translations</translate>
</p>
```
You can also provide an optional description attribute to provide context for translators. e.g,
```jsx
<a href="/community">
<translate desc="Footer link to page referring to community GitHub and Slack">
Community
</translate>
</a>
```
Add the following require statement as well:
```js
const translate = require('../../server/translate.js').translate;
```
Note that this path is valid for files inside `pages/en` and should be adjusted accordingly if files are in different locations, as discussed [above](#page-require-paths).
## Using Static Assets
Static assets should be placed into the `website/static` folder. They can be accessed by their paths, excluding "static". For example, if the site's `baseUrl` is "/docusaurus/", an image in `website/static/img/logo.png` is available at `/docusaurus/img/logo.png`.
## Styles
You should configure your site's primary, secondary, and code block colors using the `colors` field in `siteConfig` as specified [here](api-site-config.md). You can also configure other colors in the same way as described in the `siteConfig` doc.
You can provide your own custom styles by adding them anywhere in the `website/static` folder. Any `.css` files you provide in the `static` folder will get concatenated to the end of Docusaurus' provided styles, allowing you to add to or override Docusaurus default styles as you wish.
An easy way to figure out what classes you wish to override or add to is to [start your server locally](api-commands.md) and use your browser's inspect element tool.
Loading

0 comments on commit 40a9047

Please sign in to comment.