diff --git a/docs/en/getting-started.md b/docs/en/getting-started.md new file mode 100644 index 0000000000..39d2d1f9d1 --- /dev/null +++ b/docs/en/getting-started.md @@ -0,0 +1,194 @@ +--- +id: getting-started +title: Docusaurus +layout: docs +category: Docusaurus +permalink: docs/en/doc1.html +next: translation +--- + +## Getting Started + +### Project Structure + +In your project repo, all of your documentation files should be placed inside a `docs` folder. Any blog posts should be inside a `blog` folder. Create a `website` folder inside which you will install and run docusaurus. + +### Installation + +Inside of your `website` folder, create a `package.json` file with the following scripts for Docusaurus: + +```json +{ + "scripts": { + "start": "docusaurus-start", + "build": "docusaurus-build", + "publish-gh-pages": "docusaurus-publish", + "examples": "docusaurus-examples" + } +} +``` + +Install Docusaurus using `npm` or `yarn`: + +``` +npm install --save-dev docusaurus +``` + +or + +``` +yarn add docusaurus -dev +``` + +## Configuration + +### Generate Examples + +To create example files for configuration, run `examples` using `npm` or `yarn`: + +``` +npm run examples +``` + +or + +``` +yarn run examples +``` + + +This will create the following files/folders in your website folder: + +``` +core/Footer.js +example-blog/... +example-docs/... +pages/... +static/img/... +siteConfig.js +``` + +`examples` will not overwrite any existing files of the same name in your website folder. + +The provided example files contain configurations for an example site. +The `core/Footer.js` file is a React component that acts as the footer for the site generated by Docusaurus and should be customized by the user. +The `example-blog` folder contains examples of blog posts written in markdown. +The `example-docs` folder contains example documentation files written in markdown. +The `pages` folder contains example top-level pages for the site. +The `static` folder contains static assets used by the example site. +The `siteConfig.js` file is the main configuration file used by Docusaurus. + +### How to Configure Your Site + +Configure the `siteConfig.js` file which has comments guiding you through what needs to be done and how each configuration affects your website. + +Customize `core/Footer.js` which will serve as the footer for each page on your website. + +Include your own top-level pages as React components in `pages`. +- These components should just be the body sections of the pages you want, and they will be included with the header and footer that the rest of Docusaurus uses. +- Currently, if you want to add other React components to your pages, you must include all of it inside that file due to how `require` paths are set-up. +- You may also include `.html` files directly, but this is not recommended, and these will just be served as is and will not have any of the header/footer/styles shared by the rest of Docusaurus. + +All images and other static assets you wish to include should be placed inside the `static` folder. Any `.css` files provided in `static` will be concatenated to the standard styles provided by Docusaurus and used site-wide. + +### Document and Blog Front Matters + +Documentation should contain front matter that follows this example: +``` +--- +id: doc1 +title: Document Title +layout: docs1 +category: Sidebar Category 1 +permalink: docs/en/doc1.html +previous: doc0 +next: doc2 + +--- +``` + +Blog posts should be written as markdown files with the following front matter: +``` +--- +title: Blog Post Title +author: Author Name +authorURL: http://twitter.com/author +authorFBID: 21315325 +--- +``` +In the blog post you should include a line ``. This will determine under which point text will be ignored when generating the preview of your blog post. Blog posts should have the file name format: `yyyy-mm-dd-your-file-name.md`. + + +## Using Docusaurus + +### Run the Server + +To run your website locally run the script: + +``` +npm run start +``` + +or + +``` +yarn run start +``` + + +This will start a server hosting your website locally at `localhost:3000`. This server will ignore any occurences `siteConfig.baseUrl` in URLs, e.g. `localhost:3000/your-site/index.html` will be the same as `localhost:3000/index.html`. Any changes to configured files will be reflected by refreshing the page, i.e. the server does not need to be restarted to show changes. You may also specify a different port to start your server on as a command line argument, e.g. `npm run start 9000`. + + +### Build Static Pages + +To create a static build of your website, run the script: + +``` +npm run build +``` + +or + +``` +yarn run build +``` + +This will generate `.html` files from all of your docs and other pages included in `pages`. This allows you to check whether or not all your files are being generated correctly. The build folder is inside Docusaurus's directory inside `node_modules`. + +### Publishing Your Website + +Use CircleCI to publish your website whenever your project repo is updated. Configure your circle.yml file in your project repo to run commands to publish to GitHub Pages. An example is shown here: + +```yaml +machine: + node: + version: 6.10.3 + npm: + version: 3.10.10 + +test: + override: + - "true" + +deployment: + website: + branch: master + commands: + - git config --global user.email "test-site-bot@users.noreply.github.com" + - git config --global user.name "Website Deployment Script" + - echo "machine github.com login test-site-bot password $GITHUB_TOKEN" > ~/.netrc + - cd website && npm install && GIT_USER=test-site-bot npm run publish-gh-pages +``` + +Note that in this case a GitHub user `test-site-bot` is created to use just for publishing. Make sure to give your Git user push permissions for your project and to set a GITHUB_TOKEN environment variable in Circle if you choose to publish this way. + +If you wish to manually publish your website with the `publish-gh-pages` script, run the following example command with the appropriate variables for your project: + +``` +DEPLOY_USER=deltice GIT_USER=test-site-bot CIRCLE_PROJECT_USERNAME=deltice CIRCLE_PROJECT_REPONAME=test-site CIRCLE_BRANCH=master npm run publish-gh-pages +``` + +## More Information + +For details on how to set up translation support, read here. +For more details on how Docusaurus functions, read here. diff --git a/docs/en/search.md b/docs/en/search.md new file mode 100644 index 0000000000..23f4237e44 --- /dev/null +++ b/docs/en/search.md @@ -0,0 +1,26 @@ +--- +id: search +title: Documentation Search +layout: docs +category: Docusaurus +permalink: docs/en/search.html +previous: translation +--- + +## Algolia Search Integration + +Docusaurus supports search using [Algolia DocSearch](https://community.algolia.com/docsearch/). Once you have set up your site, you can use the link above to have Algolia crawl your website's documentation pages. Algolia will then send you an API key and index name for your site. + +Enter your search-only API key and index name into `siteConfig.js` in the `algolia` section to enable search for your site. The search bar will be in the header navigation bar in between internal links and external links. To disable the search bar, delete the `algolia` section in the `siteConfig.js` file. + +```js +const siteConfig = { + ... + algolia: { + apiKey: "my-search-only-api-key-1234", + indexName: "my-index-name" + }, + ... +} +``` + diff --git a/docs/en/translation.md b/docs/en/translation.md new file mode 100644 index 0000000000..3c87aabee2 --- /dev/null +++ b/docs/en/translation.md @@ -0,0 +1,115 @@ +--- +id: translation +title: Translations with Docusaurus +layout: docs +category: Docusaurus +permalink: docs/en/translation.html +previous: getting-started +next: search +--- + +## Overview + +Docusaurus allows for easy translation functionality using Crowdin. Documentation files written in English are uploaded to Crowdin for translation by users. Top-level pages written with English strings can be easily translated by wrapping any strings you want to translate in a `` tag. Strings found in the site header and in documentation front matter will also be found by Docusaurus and properly translated. Read on for more details. + +## Docusaurus Translation Configurations + +To generate example files for translations with Docusuaurus, run the `examples` script with the command line argument `translations`: + +``` +npm run examples translations +``` + +This will create the following files in your website folder: + +``` +pages/en/help-with-translations.js +languages.js +crowdin.yaml +``` + +The `pages/en/help-with-translations.js` file is the same example help page generated by the `examples` script but now using translations tags that are described below. +The `languages.js` file tells Docusaurus what languages you want to enable for your site. +The `crowdin.yaml` file is used to configure crowdin integration, and should be moved out one level into your project repo. + + +## How Docusaurus Finds Strings to Translate + +Add the following script to your package.json file: +```json +... +"scripts": { + ... + "write-translations": "docusaurus-write-translations" +}, +... +``` + +Running the script will generate an `i18n/en.json` file containing all the strings that will be translated from English into other languages. + +The script will include text from the following places: + - title strings and category strings in documentation front matter + - tagline in `siteConfig.js` + - internal and external header link text strings in `siteConfig.js` + +It will also include any strings in any `.js` files in the `pages` folder that are wrapped in a `` tag. You can also include an optional description attribute to give more context to a translator about how to translate the string. + +In addition to these strings in the `i18n/en.json` file, the whole documentation files themselves will be translated. + +## How Docusaurus Translates Strings + +Docusaurus itself does not do any translation from one language to another. Instead, it uses Crowdin to manage translations and then downloads appropriately translated files from Crowdin. More information on how to set up Crowdin translations later. + +## How Docusaurus Uses String Translations + +This section provides some more context for how translation works, but is not necessary information for the user to know. + +For things like the strings found in the headers and sidebars of pages, Docusaurus references a translated version of `i18n/en.json` (for example, a `i18n/fr.json` file downloaded from Crowdin). + +For documentation text itself, fully translated markdown files will be compiled in the same way English documentation markdown files would be. + +For other pages, Docusaurus will automatically transform all `` tags into function calls that will return appropriately translated strings. For each language that is enabled with `languages.js`, Docusaurus will build translated pages using the files in `pages/en` and the language's respective `.json` file in `i18n`. + +## Crowdin Set-Up + +Create your translation project on [Crowdin](https://www.crowdin.com/). You can use [Crowdin's guides](https://support.crowdin.com/translation-process-overview/) to learn more about the translations work flow. + +To automatically get the translations for your files, update the `circle.yml` file in your project directory to include steps to upload English files to be translated and download translated files using the Crowdin CLI. Here is an example `circle.yml` file: + +```yaml +machine: + node: + version: 6.10.3 + npm: + version: 3.10.10 + +test: + override: + - "true" + +deployment: + website: + branch: master + commands: + # configure git user + - git config --global user.email "test-site-bot@users.noreply.github.com" + - git config --global user.name "Website Deployment Script" + - echo "machine github.com login test-site-bot password $GITHUB_TOKEN" > ~/.netrc + # install Docusaurus and generate file of English strings + - cd website && npm install && npm run write-translations && cd .. + # crowdin install + - sudo apt-get install default-jre + - wget https://artifacts.crowdin.com/repo/deb/crowdin.deb -O crowdin.deb + - sudo dpkg -i crowdin.deb + # translations upload/download + - crowdin --config crowdin.yaml upload sources --auto-update -b master + - crowdin --config crowdin.yaml download -b master + # build and publish website + - cd website && GIT_USER=test-site-bot npm run publish-gh-pages +``` + +The `crowdin` command uses the `crowdin.yaml` file generated with the `examples` script. It should be placed in your project directory to configure how and what files are uploaded/downloaded. + +Note that in the `crowdin.yaml` file, `CROWDIN_PROJECT_ID` and `CROWDIN_API_KEY` are environment variables set-up in Circle for your Crowdin project. They can be found in your Crowdin project settings. + +Now, Circle will help you automatically get translations prior to building your website. If you wish to use crowdin on your machine locally, you can install the [Crowdin CLI tool](https://support.crowdin.com/cli-tool/) and run the same commands found in the `circle.yaml` file, making sure you actually set the `project_identifier` and `api_key`. diff --git a/examples-translations/crowdin.yaml b/examples-translations/crowdin.yaml new file mode 100644 index 0000000000..e3bd756a7d --- /dev/null +++ b/examples-translations/crowdin.yaml @@ -0,0 +1,49 @@ +project_identifier_env: CROWDIN_PROJECT_ID +api_key_env: CROWDIN_API_KEY +base_path: "./" +preserve_hierarchy: true + +files: + - + source: '/docs/en/*.md' + translation: '/docs/%locale%/%original_file_name%' + languages_mapping: &anchor + locale: + 'af': 'af' + 'ar': 'ar' + 'bs-BA': 'bs-BA' + 'ca': 'ca' + 'cs': 'cs' + 'da': 'da' + 'de': 'de' + 'el': 'el' + 'es-ES': 'es-ES' + 'fa': 'fa-IR' + 'fi': 'fi' + 'fr': 'fr' + 'he': 'he' + 'hu': 'hu' + 'id': 'id-ID' + 'it': 'it' + 'ja': 'ja' + 'ko': 'ko' + 'mr': 'mr-IN' + 'nl': 'nl' + 'no': 'no-NO' + 'pl': 'pl' + 'pt-BR': 'pt-BR' + 'pt-PT': 'pt-PT' + 'ro': 'ro' + 'ru': 'ru' + 'sk': 'sk-SK' + 'sr': 'sr' + 'sv-SE': 'sv-SE' + 'tr': 'tr' + 'uk': 'uk' + 'vi': 'vi' + 'zh-CN': 'zh-Hans' + 'zh-TW': 'zh-Hant' + - + source: '/website/i18n/en.json' + translation: '/website/i18n/%locale%.json' + languages_mapping: *anchor diff --git a/examples/languages.js b/examples-translations/languages.js similarity index 100% rename from examples/languages.js rename to examples-translations/languages.js diff --git a/examples-translations/pages/en/help-with-translations.js b/examples-translations/pages/en/help-with-translations.js new file mode 100644 index 0000000000..fa29a4c9d0 --- /dev/null +++ b/examples-translations/pages/en/help-with-translations.js @@ -0,0 +1,71 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +const React = require("react"); + +const CompLibrary = require("../../core/CompLibrary.js"); +const Container = CompLibrary.Container; +const GridBlock = CompLibrary.GridBlock; + +const translate = require("../../server/translate.js").translate; + +const siteConfig = require(process.cwd() + "/siteConfig.js"); + +class Help extends React.Component { + render() { + const supportLinks = [ + { + content: ( + + Learn more using the [documentation on this site.](/test-site/docs/en/doc1.html) + + ), + title: Browse Docs + }, + { + content: ( + + Ask questions about the documentation and project + + ), + title: Join the community + }, + { + content: Find out what's new with this project, + title: Stay up to date + } + ]; + + return ( +
+ +
+
+

+ Need help? +

+
+

+ + This project is maintained by a dedicated group of people. + +

+ +
+ +
+ ); + } +} + +Help.defaultProps = { + language: "en" +}; + +module.exports = Help; diff --git a/examples/i18n/en.json b/examples/i18n/en.json deleted file mode 100644 index f7b3e9735e..0000000000 --- a/examples/i18n/en.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "localized-strings": { - "doc1": "Docusaurus", - "doc2": "The Second in a Series of Documents", - "doc3": "The Third in a Series of Documents", - "doc4": "Separate Sidebar Document 1", - "doc5": "Separate Sidebar Document 2", - "Docusaurus": "Docusaurus Guide", - "First Category": "Example Category 1", - "Second Category": "Example Category 2", - "previous": "Previous", - "next": "Continue Reading", - "Docs": "Docs", - "API": "API", - "GitHub": "GitHub", - "Help": "Help", - "Blog": "Blog" - }, - "tagline": "Tagline", - "pages-strings": { - "index": { - "My Tagline": "My Tagline", - "Try It Out": "Try It Out", - "Example Link": "Example Link", - "Example Link 2": "Example Link 2", - "This is the content of my feature": "This is the content of my feature", - "The content of my second feature": "The content of my second feature", - "These are features of this project": "These are features of this project", - "Talk about learning how to use this": "Talk about learning how to use this", - "Talk about trying this out": "Talk about trying this out", - "This is another description of how this project is useful": "This is another description of how this project is useful", - "This project is used by all these people": "This project is used by all these people", - "More \"Docusaurus\" Users": "More \"Docusaurus\" Users", - "Feature One": "Feature One", - "Feature Two": "Feature Two", - "Feature Callout": "Feature Callout", - "Learn How": "Learn How", - "Try it Out": "Try it Out", - "Description": "Description", - "Who's Using This?": "Who's Using This?" - }, - "help": { - "Learn more using the [documentation on this site.](/test-site/docs/en/doc1.html)": "Learn more using the [documentation on this site.](/test-site/docs/en/doc1.html)", - "Browse Docs": "Browse Docs", - "Ask questions about the documentation and project": "Ask questions about the documentation and project", - "Join the community": "Join the community", - "Find out what's new with this project": "Find out what's new with this project", - "Stay up to date": "Stay up to date", - "Need help?": "Need help?", - "This project is maintained by a dedicated group of people.": "This project is maintained by a dedicated group of people." - }, - "users": { - "Who's Using This?": "Who's Using This?", - "This project is used by many folks": "This project is used by many folks", - "Are you using this project?": "Are you using this project?", - "Add your company": "Add your company" - } - } -} diff --git a/examples/pages/en/help.js b/examples/pages/en/help.js index 354660daad..002c46f78c 100755 --- a/examples/pages/en/help.js +++ b/examples/pages/en/help.js @@ -20,32 +20,30 @@ class Help extends React.Component { const supportLinks = [ { content: - "Learn more using the [documentation on this site.](/test-site/docs/en/doc1.html)\n", + "Learn more using the [documentation on this site.](/test-site/docs/en/doc1.html)", title: "Browse Docs" }, { - content: "Ask questions about the documentation and project\n", + content: "Ask questions about the documentation and project", title: "Join the community" }, { - content: "Find out what's new with this project\n", + content: "Find out what's new with this project", title: "Stay up to date" } ]; return ( -
-
- -
-
-

Need help?

-
-

This project is maintained by a dedicated group of people.

- -
- -
+
+ +
+
+

Need help?

+
+

This project is maintained by a dedicated group of people.

+ +
+
); } diff --git a/examples/pages/en/users.js b/examples/pages/en/users.js index 683b77e1d4..b4c8eff31c 100644 --- a/examples/pages/en/users.js +++ b/examples/pages/en/users.js @@ -25,27 +25,25 @@ class Users extends React.Component { }); return ( -
-
- -
-
-

Who's Using This?

-

This project is used by many folks

-
-
- {showcase} -
-

Are you using this project?

- - Add your company - +
+ +
+
+

Who's Using This?

+

This project is used by many folks

- -
+
+ {showcase} +
+

Are you using this project?

+ + Add your company + +
+
); } diff --git a/examples/siteConfig.js b/examples/siteConfig.js index d8fdaf3373..f5dcc7f1cf 100644 --- a/examples/siteConfig.js +++ b/examples/siteConfig.js @@ -7,8 +7,6 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const fs = require("fs"); - /* List of projects/orgs using your project for the users page */ const users = [ { @@ -66,35 +64,16 @@ const siteConfig = { "rgba(46, 133, 85, 0.03)" /* primaryColor in rgba form, with 0.03 alpha */ }, tagline: "My Tagline", - recruitingLink: "https://crowdin.com/project/test-site" /* translation site "help translate" link */, + recruitingLink: + "https://crowdin.com/project/test-site" /* translation site "help translate" link */, /* remove this section to disable search bar */ algolia: { - apiKey: "0f9f28b9ab9efae89810921a351753b5", /* use your search-only api key */ + apiKey: + "0f9f28b9ab9efae89810921a351753b5" /* use your search-only api key */, indexName: "github" - }, + } /* remove this to disable google analytics tracking */ /* gaTrackingId: "" */ }; -let languages; -if (fs.existsSync("./languages.js")) { - languages = require("./languages.js"); - siteConfig["en"] = require("./i18n/en.json"); -} else { - languages = [ - { - enabled: true, - name: "English", - tag: "en" - } - ]; -} - -const enabledLanguages = languages.filter(lang => lang.enabled); - -siteConfig["languages"] = enabledLanguages; - -/* INJECT LOCALIZED FILES BEGIN */ -/* INJECT LOCALIZED FILES END */ - module.exports = siteConfig; diff --git a/lib/build-files.js b/lib/build-files.js index 0b4a623595..bcc149e8b6 100644 --- a/lib/build-files.js +++ b/lib/build-files.js @@ -9,10 +9,11 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -require('babel-register') ({ +require("babel-register")({ ignore: false, - "presets": ["react"] + plugins: [require("./server/translate-plugin.js")], + presets: ["react"] }); -const generate = require('./server/generate.js'); +const generate = require("./server/generate.js"); generate(); diff --git a/lib/copy-examples.js b/lib/copy-examples.js index ba54b12657..d4f7f2fd15 100644 --- a/lib/copy-examples.js +++ b/lib/copy-examples.js @@ -10,6 +10,12 @@ */ const CWD = process.cwd(); -const fs = require('fs-extra'); +const fs = require("fs-extra"); -fs.copySync(__dirname + '/../examples/', CWD, {overwrite: false}); +if (process.argv.indexOf("translations") !== -1) { + fs.copySync(__dirname + "/../examples-translations/", CWD, { + overwrite: false + }); +} else { + fs.copySync(__dirname + "/../examples/", CWD, { overwrite: false }); +} diff --git a/lib/core/BlogPageLayout.js b/lib/core/BlogPageLayout.js index f8f644380f..771e4fc5ed 100644 --- a/lib/core/BlogPageLayout.js +++ b/lib/core/BlogPageLayout.js @@ -7,44 +7,53 @@ * of patent rights can be found in the PATENTS file in the same directory. */ - const BlogPost = require('./BlogPost.js'); -const BlogSidebar = require('./BlogSidebar.js'); -const Container = require('./Container.js'); -const MetadataBlog = require('./MetadataBlog.js'); -const React = require('react'); -const Site = require('./Site.js'); +const BlogPost = require("./BlogPost.js"); +const BlogSidebar = require("./BlogSidebar.js"); +const Container = require("./Container.js"); +const MetadataBlog = require("./MetadataBlog.js"); +const React = require("react"); +const Site = require("./Site.js"); const BlogPageLayout = React.createClass({ getPageURL(page) { - let url = this.props.config.baseUrl + 'blog/'; + let url = this.props.config.baseUrl + "blog/"; if (page > 0) { - url += 'page' + (page + 1) + '/'; + url += "page" + (page + 1) + "/"; } - return url + '#content'; + return url + "#content"; }, render() { const perPage = this.props.metadata.perPage; const page = this.props.metadata.page; return ( - +
- +
- {MetadataBlog - .slice(page * perPage, (page + 1) * perPage) - .map(post => { - return ( - - ); - })} + {MetadataBlog.slice( + page * perPage, + (page + 1) * perPage + ).map(post => { + return ( + + ); + })} ); - }, + } }); module.exports = BlogPageLayout; diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js index 3f92f32024..71da9c3e3c 100644 --- a/lib/core/BlogPost.js +++ b/lib/core/BlogPost.js @@ -7,26 +7,35 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const Marked = require('./Marked.js'); -const React = require('react'); +const Marked = require("./Marked.js"); +const React = require("react"); class BlogPost extends React.Component { renderContent() { let content = this.props.content; if (this.props.truncate) { - content = content.split('')[0]; + content = content.split("")[0]; return ( ); } - return {content}; + return ( + + {content} + + ); } renderAuthorPhoto() { @@ -37,9 +46,9 @@ class BlogPost extends React.Component { @@ -54,7 +63,9 @@ class BlogPost extends React.Component { const post = this.props.post; return (

- {post.title} + + {post.title} +

); } @@ -65,18 +76,18 @@ class BlogPost extends React.Component { // Because JavaScript sucks at date handling :( const year = match[1]; const month = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December" ][parseInt(match[2], 10) - 1]; const day = parseInt(match[3], 10); @@ -84,7 +95,9 @@ class BlogPost extends React.Component {
{this.renderAuthorPhoto()}

- {post.author} + + {post.author} +

{this.renderTitle()}

diff --git a/lib/core/BlogPostLayout.js b/lib/core/BlogPostLayout.js index dab0433f20..fe713e4030 100644 --- a/lib/core/BlogPostLayout.js +++ b/lib/core/BlogPostLayout.js @@ -7,11 +7,11 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const React = require('react'); -const BlogPost = require('./BlogPost.js'); -const BlogSidebar = require('./BlogSidebar.js'); -const Container = require('./Container.js'); -const Site = require('./Site.js'); +const React = require("react"); +const BlogPost = require("./BlogPost.js"); +const BlogSidebar = require("./BlogSidebar.js"); +const Container = require("./Container.js"); +const Site = require("./Site.js"); class BlogPostLayout extends React.Component { render() { @@ -19,20 +19,24 @@ class BlogPostLayout extends React.Component {

- +
diff --git a/lib/core/BlogSidebar.js b/lib/core/BlogSidebar.js index c4311dfba3..978a2017d1 100644 --- a/lib/core/BlogSidebar.js +++ b/lib/core/BlogSidebar.js @@ -7,22 +7,24 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const React = require('react'); -const Container = require('./Container.js'); -const SideNav = require('./nav/SideNav.js'); +const React = require("react"); +const Container = require("./Container.js"); +const SideNav = require("./nav/SideNav.js"); -const MetadataBlog = require('./MetadataBlog.js'); +const MetadataBlog = require("./MetadataBlog.js"); class BlogSidebar extends React.Component { render() { - const contents = [{ - name: 'Recent Posts', - links: MetadataBlog, - }]; + const contents = [ + { + name: "Recent Posts", + links: MetadataBlog + } + ]; const title = this.props.current && this.props.current.title; const current = { - id: title || '', - category: 'Recent Posts', + id: title || "", + category: "Recent Posts" }; return ( diff --git a/lib/core/CompLibrary.js b/lib/core/CompLibrary.js index 1e6f3bee71..c138962b88 100644 --- a/lib/core/CompLibrary.js +++ b/lib/core/CompLibrary.js @@ -7,12 +7,12 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const Marked = require('./Marked.js'); -const Container = require('./Container.js'); -const GridBlock = require('./GridBlock.js'); +const Marked = require("./Marked.js"); +const Container = require("./Container.js"); +const GridBlock = require("./GridBlock.js"); module.exports = { Marked: Marked, Container: Container, GridBlock: GridBlock -} +}; diff --git a/lib/core/Container.js b/lib/core/Container.js index 6dca6d8ca1..ae8573cc06 100644 --- a/lib/core/Container.js +++ b/lib/core/Container.js @@ -7,26 +7,29 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const React = require('react'); -const classNames = require('classnames'); +const React = require("react"); +const classNames = require("classnames"); class Container extends React.Component { render() { - const containerClasses = classNames('container', this.props.className, { - 'darkBackground': this.props.background === 'dark', - 'highlightBackground': this.props.background === 'highlight', - 'lightBackground': this.props.background === 'light', - 'paddingAll': this.props.padding.indexOf('all') >= 0, - 'paddingBottom': this.props.padding.indexOf('bottom') >= 0, - 'paddingLeft': this.props.padding.indexOf('left') >= 0, - 'paddingRight': this.props.padding.indexOf('right') >= 0, - 'paddingTop': this.props.padding.indexOf('top') >= 0, + const containerClasses = classNames("container", this.props.className, { + darkBackground: this.props.background === "dark", + highlightBackground: this.props.background === "highlight", + lightBackground: this.props.background === "light", + paddingAll: this.props.padding.indexOf("all") >= 0, + paddingBottom: this.props.padding.indexOf("bottom") >= 0, + paddingLeft: this.props.padding.indexOf("left") >= 0, + paddingRight: this.props.padding.indexOf("right") >= 0, + paddingTop: this.props.padding.indexOf("top") >= 0 }); let wrappedChildren; if (this.props.wrapper) { - wrappedChildren = -
{this.props.children}
; + wrappedChildren = ( +
+ {this.props.children} +
+ ); } else { wrappedChildren = this.props.children; } @@ -39,9 +42,9 @@ class Container extends React.Component { } Container.defaultProps = { - background: 'transparent', + background: "transparent", padding: [], - wrapper: true, + wrapper: true }; module.exports = Container; diff --git a/lib/core/Doc.js b/lib/core/Doc.js index 97022dfd9c..4832a8a295 100644 --- a/lib/core/Doc.js +++ b/lib/core/Doc.js @@ -7,8 +7,8 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const React = require('react'); -const Marked = require('./Marked.js'); +const React = require("react"); +const Marked = require("./Marked.js"); class Doc extends React.Component { render() { @@ -17,9 +17,9 @@ class Doc extends React.Component { className="edit-page-link button" href={ this.props.config.editUrl + - this.props.language + - '/' + - this.props.source + this.props.language + + "/" + + this.props.source } target="_blank" > @@ -30,10 +30,14 @@ class Doc extends React.Component {
{editLink} -

{this.props.title}

+

+ {this.props.title} +

- {this.props.content} + + {this.props.content} +
); diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js index ba846a5448..f6e62e445c 100644 --- a/lib/core/DocsLayout.js +++ b/lib/core/DocsLayout.js @@ -7,28 +7,31 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const React = require('react'); -const Container = require('./Container.js'); -const Doc = require('./Doc.js'); -const DocsSidebar = require('./DocsSidebar.js'); -const Site = require('./Site.js'); +const React = require("react"); +const Container = require("./Container.js"); +const Doc = require("./Doc.js"); +const DocsSidebar = require("./DocsSidebar.js"); +const Site = require("./Site.js"); +const translation = require("../server/translation.js"); class DocsLayout extends React.Component { render() { const metadata = this.props.metadata; const content = this.props.children; - const i18n = this.props.config[this.props.metadata.language]; + const i18n = translation[this.props.metadata.language]; return (
@@ -39,9 +42,12 @@ class DocsLayout extends React.Component { config={this.props.config} source={metadata.source} title={ - i18n ? this.props.config[this.props.metadata.language]['localized-strings'][ - this.props.metadata.localized_id - ] || this.props.metadata.title : this.props.metadata.title + i18n + ? translation[this.props.metadata.language][ + "localized-strings" + ][this.props.metadata.localized_id] || + this.props.metadata.title + : this.props.metadata.title } language={metadata.language} /> @@ -49,27 +55,25 @@ class DocsLayout extends React.Component { {metadata.previous_id && - ← - {' '} - { - i18n ? this.props.config[this.props.metadata.language][ - 'localized-strings' - ]['previous'] || 'Previous' : 'Previous' - } + ←{" "} + {i18n + ? translation[this.props.metadata.language][ + "localized-strings" + ]["previous"] || "Previous" + : "Previous"} } {metadata.next_id && - { - i18n ? this.props.config[this.props.metadata.language][ - 'localized-strings' - ]['next'] || 'Next' : 'Next' - } - {' '} + {i18n + ? translation[this.props.metadata.language][ + "localized-strings" + ]["next"] || "Next" + : "Next"}{" "} → }
diff --git a/lib/core/DocsSidebar.js b/lib/core/DocsSidebar.js index 9c6024d4b1..43883a9a9c 100644 --- a/lib/core/DocsSidebar.js +++ b/lib/core/DocsSidebar.js @@ -7,16 +7,16 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const Metadata = require('./metadata.js'); -const React = require('react'); -const Container = require('./Container.js'); -const SideNav = require('./nav/SideNav.js'); -const siteConfig = require(process.cwd() + '/siteConfig.js'); +const Metadata = require("./metadata.js"); +const React = require("react"); +const Container = require("./Container.js"); +const SideNav = require("./nav/SideNav.js"); +const siteConfig = require(process.cwd() + "/siteConfig.js"); class DocsSidebar extends React.Component { render() { let layout = this.props.metadata.layout; - let docsCategories = require('./' + layout + 'Categories.js'); + let docsCategories = require("./" + layout + "Categories.js"); return ( + aria-label="Star this project on GitHub" + > Star ); @@ -40,21 +41,30 @@ class Footer extends React.Component {
Docs
Getting Started (or other categories) Guides (or other categories) API Reference (or other categories) @@ -62,7 +72,11 @@ class Footer extends React.Component {
More
@@ -106,6 +118,4 @@ class Footer extends React.Component { } } - - module.exports = Footer; diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js index 30820def69..aeb6c212a7 100755 --- a/lib/core/GridBlock.js +++ b/lib/core/GridBlock.js @@ -7,31 +7,32 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const React = require('react'); -const classNames = require('classnames'); +const React = require("react"); +const classNames = require("classnames"); -const Marked = require('./Marked.js'); +const Marked = require("./Marked.js"); class GridBlock extends React.Component { renderBlock(block) { - const blockClasses = classNames('blockElement', this.props.className, { - 'alignCenter': this.props.align === 'center', - 'alignRight': this.props.align === 'right', - 'fourByGridBlock': this.props.layout === 'fourColumn', - 'imageAlignBottom': (block.image && block.imageAlign === 'bottom'), - 'imageAlignSide': (block.image && (block.imageAlign === 'left' || - block.imageAlign === 'right')), - 'imageAlignTop': (block.image && block.imageAlign === 'top'), - 'threeByGridBlock': this.props.layout === 'threeColumn', - 'twoByGridBlock': this.props.layout === 'twoColumn', + const blockClasses = classNames("blockElement", this.props.className, { + alignCenter: this.props.align === "center", + alignRight: this.props.align === "right", + fourByGridBlock: this.props.layout === "fourColumn", + imageAlignBottom: block.image && block.imageAlign === "bottom", + imageAlignSide: + block.image && + (block.imageAlign === "left" || block.imageAlign === "right"), + imageAlignTop: block.image && block.imageAlign === "top", + threeByGridBlock: this.props.layout === "threeColumn", + twoByGridBlock: this.props.layout === "twoColumn" }); - const topLeftImage = (block.imageAlign === 'top' || - block.imageAlign === 'left') && + const topLeftImage = + (block.imageAlign === "top" || block.imageAlign === "left") && this.renderBlockImage(block.image); - const bottomRightImage = (block.imageAlign === 'bottom' || - block.imageAlign === 'right') && + const bottomRightImage = + (block.imageAlign === "bottom" || block.imageAlign === "right") && this.renderBlockImage(block.image); return ( @@ -39,7 +40,9 @@ class GridBlock extends React.Component { {topLeftImage}
{this.renderBlockTitle(block.title)} - {block.content} + + {block.content} +
{bottomRightImage}
@@ -49,7 +52,9 @@ class GridBlock extends React.Component { renderBlockImage(image) { if (image) { return ( -
+
+ +
); } else { return null; @@ -58,7 +63,11 @@ class GridBlock extends React.Component { renderBlockTitle(title) { if (title) { - return

{title}

; + return ( +

+ {title} +

+ ); } else { return null; } @@ -74,10 +83,10 @@ class GridBlock extends React.Component { } GridBlock.defaultProps = { - align: 'left', + align: "left", contents: [], - imagealign: 'top', - layout: 'twoColumn', + imagealign: "top", + layout: "twoColumn" }; module.exports = GridBlock; diff --git a/lib/core/Head.js b/lib/core/Head.js index 41c0849730..1860b83863 100644 --- a/lib/core/Head.js +++ b/lib/core/Head.js @@ -7,7 +7,7 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -const React = require('react'); +const React = require("react"); class Head extends React.Component { render() { @@ -29,19 +29,29 @@ class Head extends React.Component { - {this.props.title} + + {this.props.title} + - + {this.props.config.algolia && - - } - - + } + +