Skip to content

Commit

Permalink
Enable Translations for docusaurus.io (#548)
Browse files Browse the repository at this point in the history 
There are some translations for Spanish for Docusaurus -- not complete, but still a good start to enable for our site.
I figure it is time to enable all the crucial features that the project provides for its main site, huh? 😄
  • Loading branch information
@JoelMarcey
JoelMarcey authored Apr 12, 2018
1 parent 2779bf3 commit 4f669cc
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 58 deletions.
2 changes: 1 addition & 1 deletion website/languages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const languages = [
tag: "el"
},
{
enabled: false,
enabled: true,
name: "Español",
tag: "es-ES"
},
Expand Down
4 changes: 2 additions & 2 deletions website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"write-translations": "node ../lib/write-translations.js",
"version": "node ../lib/version.js",
"rename-version": "node ../lib/rename-version.js",
"crowdin-upload": "crowdin-cli --config ../crowdin.yaml upload sources --auto-update -b master",
"crowdin-download": "crowdin-cli --config ../crowdin.yaml download -b master"
"crowdin-upload": "crowdin --config ../crowdin.yaml upload sources --auto-update -b master",
"crowdin-download": "crowdin --config ../crowdin.yaml download -b master"
},
"dependencies": {
"async": "^2.5.0",
Expand Down
7 changes: 3 additions & 4 deletions website/pages/en/about-slash.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,25 @@
*/

const React = require("react");

const CompLibrary = require("../../core/CompLibrary.js");
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;

const siteConfig = require(process.cwd() + "/siteConfig.js");
const translate = require("../../server/translate.js").translate;

class AboutSlash extends React.Component {
render() {
return (
<div className="pageContainer">
<Container className="mainContainer documentContainer postContainer">
<h1>About Slash</h1>
<h1><translate>About Slash</translate></h1>
<img src={`${siteConfig.baseUrl}img/docusaurus.svg`} alt="Docusaurus"/>
<p>
Slash is the official mascot of Docusaurus. You will find different variations of her throughout the <a href="https://docusaurus.io">website</a>, whether she is moving fast on her scooter or writing documentation at her standing desk. At Facebook, we have actual Slash plushies -- and you never know, you may see these plushies at various events and conferences in the future.
</p>
</Container>
<Container className="mainContainer">
<h2>Birth of Slash</h2>
<h2><translate>Birth of Slash</translate></h2>
<img src={`${siteConfig.baseUrl}img/slash-birth.png`} alt="Birth of Slash"/>
<p>
The team sat in a conference room trying to come up with a name for the project. Dinosaurs became a theme, finally landing on Docusaurus, combining documentation with those many dinosaurs that end in "saurus". Of course, we needed a logo for our new project. Eric sat down and designed a logo that was quite beyond the norm of our normal open source project logos, but yet was just so awesome, we had to use it. We needed a name for this cute Docusaur. "Marky" for markdown? "Docky" for documentation? No, "Slash" for the normal way someone starts code documentation in many programming languages <code>//</code> or <code>/*</code> or <code>///</code>. And Slash was born.
Expand Down
35 changes: 21 additions & 14 deletions website/pages/en/help.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,34 @@ const CompLibrary = require("../../core/CompLibrary.js");
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;
const siteConfig = require(process.cwd() + "/siteConfig.js");
const translate = require("../../server/translate.js").translate;

class Help extends React.Component {
render() {
const supportLinks = [
{
title: "Browse the docs",
content:
`Learn more about Docusaurus using the [official documentation](${siteConfig.baseUrl}docs/${this.props.language}/installation.html).`,
title: <translate>Browse the docs</translate>,
content: (
`Learn more about Docusaurus using the [official documentation](${siteConfig.baseUrl}docs/${this.props.language}/installation.html).`
),
},
{
title: "Discord",
content:
"You can join the conversation on [Discord](https://discord.gg/docusaurus) on one of our two text channels: #docusaurus-users for user help and #docusaurus-dev for contributing help."
title: <translate>Discord</translate>,
content: (
"You can join the conversation on [Discord](https://discord.gg/docusaurus) on one of our two text channels: #docusaurus-users for user help and #docusaurus-dev for contributing help."
),
},
{
title: "Twitter",
content:
"You can follow and contact us on [Twitter](https://twitter.com/docusaurus)."
title: <translate>Twitter</translate>,
content: (
"You can follow and contact us on [Twitter](https://twitter.com/docusaurus)."
),
},
{
title: "GitHub",
content:
"At our [GitHub repo](https://github.com/facebook/docusaurus) Browse and submit [issues](https://github.com/facebook/Docusaurus/issues) or [pull requests](https://github.com/facebook/Docusaurus/pulls) for bugs you find or any new features you may want implemented. Be sure to also check out our [contributing information](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md)."
title: <translate>GitHub</translate>,
content: (
"At our [GitHub repo](https://github.com/facebook/docusaurus) Browse and submit [issues](https://github.com/facebook/Docusaurus/issues) or [pull requests](https://github.com/facebook/Docusaurus/pulls) for bugs you find or any new features you may want implemented. Be sure to also check out our [contributing information](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md)."
),
}
];

Expand All @@ -41,10 +46,12 @@ class Help extends React.Component {
<Container className="mainContainer documentContainer postContainer">
<div className="post">
<header className="postHeader">
<h2>Need help?</h2>
<h2><translate>Need help?</translate></h2>
</header>
<p>
If you need help with Docusaurus, you can try one of the mechanisms below.
<translate desc="statement made to reader">
If you need help with Docusaurus, you can try one of the mechanisms below.
</translate>
</p>
<GridBlock contents={supportLinks} layout="fourColumn" />
</div>
Expand Down
69 changes: 37 additions & 32 deletions website/pages/en/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,11 @@
*/

const React = require("react");

const CompLibrary = require("../../core/CompLibrary.js");
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */

const siteConfig = require(process.cwd() + "/siteConfig.js");

const translate = require("../../server/translate.js").translate;

class Button extends React.Component {
Expand Down Expand Up @@ -53,10 +50,10 @@ class HomeSplash extends React.Component {
href={`
${siteConfig.baseUrl}docs/${this.props.language}/installation.html
`}>
Get Started
<translate>Get Started</translate>
</Button>
<Button href='https://github.com/facebook/Docusaurus'>
GitHub
<translate>GitHub</translate>
</Button>
</div>
</div>
Expand Down Expand Up @@ -93,35 +90,38 @@ class Index extends React.Component {
align="center"
contents={[
{
content:
content: (
`Save time and focus on your project's documentation. Simply
write docs and blog posts with [Markdown](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown.html)
and Docusaurus will publish a set of static html files ready
to serve.`,
to serve.`
),
image: `${siteConfig.baseUrl}img/markdown.png`,
imageAlign: "top",
imageAlt: "Markdown",
title: "Powered by Markdown"
title: <translate>Powered by Markdown</translate>
},
{
content:
content: (
`[Extend or customize](${siteConfig.baseUrl}docs/${this.props.language}/api-pages.html)
your project's layout by reusing React. Docusaurus can be
extended while reusing the same header and footer.`,
extended while reusing the same header and footer.`
),
image: `${siteConfig.baseUrl}img/react.svg`,
imageAlign: "top",
imageAlt: "React",
title: "Built Using React"
title: <translate>Built Using React</translate>
},
{
content:
content: (
`[Localization](${siteConfig.baseUrl}docs/${this.props.language}/translation.html)
comes pre-configured. Use [Crowdin](https://crowdin.com/) to translate your docs
into over 70 languages.`,
into over 70 languages.`
),
image: `${siteConfig.baseUrl}img/translation.svg`,
imageAlign: "top",
imageAlt: "Translation",
title: "Ready for Translations"
title: <translate>Ready for Translations</translate>
}
]}
layout="threeColumn"
Expand All @@ -132,23 +132,25 @@ class Index extends React.Component {
align="center"
contents={[
{
content:
content: (
`Support users on all versions of your project. Document
[versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning.html)
helps you keep documentation in sync with project releases.`,
helps you keep documentation in sync with project releases.`
),
image: `${siteConfig.baseUrl}img/versioning.svg`,
imageAlign: "top",
imageAlt: "Document Versioning",
title: "Document Versioning"
title: <translate>Document Versioning</translate>
},
{
content:
content: (
`Make it easy for your community to [find](${siteConfig.baseUrl}docs/${this.props.language}/search.html) what they need in your documentation.
We proudly support [Algolia documentation search](https://www.algolia.com/).`,
We proudly support [Algolia documentation search](https://www.algolia.com/).`
),
image: `${siteConfig.baseUrl}img/search.svg`,
imageAlign: "top",
imageAlt: "Document Search",
title: "Document Search"
title: <translate>Document Search</translate>
}
]}
layout="twoColumn"
Expand All @@ -158,13 +160,14 @@ class Index extends React.Component {
<GridBlock
contents={[
{
content:
content: (
`Get [up and running](${siteConfig.baseUrl}docs/${this.props.language}/site-creation.html)
quickly without having to worry about site design.`,
quickly without having to worry about site design.`
),
imageAlign: "right",
image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`,
imageAlt: "Docusaurus on a Scooter",
title: "Quick Setup"
title: <translate>Quick Setup</translate>
}
]}
layout="twoColumn"
Expand All @@ -174,17 +177,18 @@ class Index extends React.Component {
<GridBlock
contents={[
{
content:
content: (
`Make design and documentation changes by using the included
[live server](${siteConfig.baseUrl}docs/${this.props.language}/site-preparation#verifying-installation).
[Publish](${siteConfig.baseUrl}docs/${this.props.language}/publishing.html)
your site to GitHub pages or other static file hosts
manually, using a script, or with continuous integration
like CircleCI.`,
like CircleCI.`
),
imageAlign: "left",
image: `${siteConfig.baseUrl}img/docusaurus_live.gif`,
imageAlt: "Docusaurus Demo",
title: "Develop and Deploy"
title: <translate>Develop and Deploy</translate>
}
]}
layout="twoColumn"
Expand All @@ -194,32 +198,33 @@ class Index extends React.Component {
<GridBlock
contents={[
{
content:
content: (
`Docusaurus currently provides support to help your website
use [translations](${siteConfig.baseUrl}docs/${this.props.language}/translation.html),
[search](${siteConfig.baseUrl}docs/${this.props.language}/search.html),
and [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning.html),
along with some other special [documentation markdown features](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown.html).
If you have ideas for useful features, feel free to
contribute on [GitHub](https://github.com/facebook/docusaurus)!`,
contribute on [GitHub](https://github.com/facebook/docusaurus)!`
),
imageAlign: "right",
image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`,
imageAlt: "Monochromatic Docusaurus",
title: "Website Features"
title: <translate>Website Features</translate>
}
]}
layout="twoColumn"
/>
</Container>
<div className="productShowcaseSection paddingBottom">
<h2>{"Who's Using Docusaurus?"}</h2>
<p>Docusaurus is building websites for these projects...</p>
<h2><translate>Who's Using Docusaurus?</translate></h2>
<p><translate>Docusaurus is building websites for these projects...</translate></p>
<div className="logos">{showcase}</div>
<div className="more-users">
<a
className="button"
href={`${siteConfig.baseUrl}${this.props.language}/users.html`}>
All Docusaurus Users
<translate>All Docusaurus Users</translate>
</a>
</div>
</div>
Expand Down
11 changes: 6 additions & 5 deletions website/pages/en/users.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@
*/

const React = require('react');

const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container;

const siteConfig = require(process.cwd() + '/siteConfig.js');
const translate = require("../../server/translate.js").translate;

class Users extends React.Component {
render() {
Expand Down Expand Up @@ -43,23 +42,25 @@ class Users extends React.Component {
<Container padding={['bottom', 'top']}>
<div className="showcaseSection">
<div className="prose">
<h1>Who is using Docusaurus?</h1>
<h1><translate>Who is using Docusaurus?</translate></h1>
<p>
<translate>
Docusaurus powers some of Facebook's popular{' '}
<a href="https://code.facebook.com/projects/">
open source projects
</a>.
</translate>
</p>
</div>
<div className="logos">{fbShowcase}</div>
<div className="prose">
<p>
Docusaurus is also used by open source projects of all sizes.
<translate>Docusaurus is also used by open source projects of all sizes.</translate>
</p>
</div>
<div className="logos">{showcase}</div>
<div className="prose">
<p>Is your project using Docusaurus?</p>
<p><translate>Is your project using Docusaurus?</translate></p>
<p>
Edit this page with a{' '}
<a href="https://github.com/facebook/docusaurus/edit/master/website/siteConfig.js">
Expand Down

0 comments on commit 4f669cc

Please sign in to comment.