3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-06 10:20:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Enable Translations for docusaurus.io (#548)

Browse source 
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? 😄
This commit is contained in:
Joel Marcey 2018-04-12 08:10:41 -07:00 • committed by GitHub
parent 2779bf3d0f
commit 4f669ccca2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

2
website/languages.js
View file

@ -52,7 +52,7 @@ const languages = [
tag: "el" tag: "el"
}, },
{ {
enabled: false, enabled: true,
name: "Español", name: "Español",
tag: "es-ES" tag: "es-ES"
}, },

4
website/package.json
View file

@ -8,8 +8,8 @@
"write-translations": "node ../lib/write-translations.js", "write-translations": "node ../lib/write-translations.js",
"version": "node ../lib/version.js", "version": "node ../lib/version.js",
"rename-version": "node ../lib/rename-version.js", "rename-version": "node ../lib/rename-version.js",
"crowdin-upload": "crowdin-cli --config ../crowdin.yaml upload sources --auto-update -b master", "crowdin-upload": "crowdin --config ../crowdin.yaml upload sources --auto-update -b master",
"crowdin-download": "crowdin-cli --config ../crowdin.yaml download -b master" "crowdin-download": "crowdin --config ../crowdin.yaml download -b master"
}, },
"dependencies": { "dependencies": {
"async": "^2.5.0", "async": "^2.5.0",

7
website/pages/en/about-slash.js
View file

@ -6,26 +6,25 @@
*/ */
const React = require("react"); const React = require("react");
const CompLibrary = require("../../core/CompLibrary.js"); const CompLibrary = require("../../core/CompLibrary.js");
const Container = CompLibrary.Container; const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock; const GridBlock = CompLibrary.GridBlock;
const siteConfig = require(process.cwd() + "/siteConfig.js"); const siteConfig = require(process.cwd() + "/siteConfig.js");
const translate = require("../../server/translate.js").translate;
class AboutSlash extends React.Component { class AboutSlash extends React.Component {
render() { render() {
return ( return (
<div className="pageContainer"> <div className="pageContainer">
<Container className="mainContainer documentContainer postContainer"> <Container className="mainContainer documentContainer postContainer">
<h1>About Slash</h1> <h1><translate>About Slash</translate></h1>
<img src={`${siteConfig.baseUrl}img/docusaurus.svg`} alt="Docusaurus"/> <img src={`${siteConfig.baseUrl}img/docusaurus.svg`} alt="Docusaurus"/>
<p> <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. 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> </p>
</Container> </Container>
<Container className="mainContainer"> <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"/> <img src={`${siteConfig.baseUrl}img/slash-birth.png`} alt="Birth of Slash"/>
<p> <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. 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.

35
website/pages/en/help.js
View file

@ -10,29 +10,34 @@ const CompLibrary = require("../../core/CompLibrary.js");
const Container = CompLibrary.Container; const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock; const GridBlock = CompLibrary.GridBlock;
const siteConfig = require(process.cwd() + "/siteConfig.js"); const siteConfig = require(process.cwd() + "/siteConfig.js");
const translate = require("../../server/translate.js").translate;
class Help extends React.Component { class Help extends React.Component {
render() { render() {
const supportLinks = [ const supportLinks = [
{ {
title: "Browse the docs", title: <translate>Browse the docs</translate>,
content: content: (
`Learn more about Docusaurus using the [official documentation](${siteConfig.baseUrl}docs/${this.props.language}/installation.html).`, `Learn more about Docusaurus using the [official documentation](${siteConfig.baseUrl}docs/${this.props.language}/installation.html).`
),
}, },
{ {
title: "Discord", title: <translate>Discord</translate>,
content: 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." "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", title: <translate>Twitter</translate>,
content: content: (
"You can follow and contact us on [Twitter](https://twitter.com/docusaurus)." "You can follow and contact us on [Twitter](https://twitter.com/docusaurus)."
),
}, },
{ {
title: "GitHub", title: <translate>GitHub</translate>,
content: 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)." "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)."
),
} }
]; ];
@ -41,10 +46,12 @@ class Help extends React.Component {
<Container className="mainContainer documentContainer postContainer"> <Container className="mainContainer documentContainer postContainer">
<div className="post"> <div className="post">
<header className="postHeader"> <header className="postHeader">
<h2>Need help?</h2> <h2><translate>Need help?</translate></h2>
</header> </header>
<p> <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> </p>
<GridBlock contents={supportLinks} layout="fourColumn" /> <GridBlock contents={supportLinks} layout="fourColumn" />
</div> </div>

69
website/pages/en/index.js
View file

@ -6,14 +6,11 @@
*/ */
const React = require("react"); const React = require("react");
const CompLibrary = require("../../core/CompLibrary.js"); const CompLibrary = require("../../core/CompLibrary.js");
const Container = CompLibrary.Container; const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock; const GridBlock = CompLibrary.GridBlock;
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
const siteConfig = require(process.cwd() + "/siteConfig.js"); const siteConfig = require(process.cwd() + "/siteConfig.js");
const translate = require("../../server/translate.js").translate; const translate = require("../../server/translate.js").translate;
class Button extends React.Component { class Button extends React.Component {
@ -53,10 +50,10 @@ class HomeSplash extends React.Component {
href={` href={`
${siteConfig.baseUrl}docs/${this.props.language}/installation.html ${siteConfig.baseUrl}docs/${this.props.language}/installation.html
`}> `}>
Get Started <translate>Get Started</translate>
</Button> </Button>
<Button href='https://github.com/facebook/Docusaurus'> <Button href='https://github.com/facebook/Docusaurus'>
GitHub <translate>GitHub</translate>
</Button> </Button>
</div> </div>
</div> </div>
@ -93,35 +90,38 @@ class Index extends React.Component {
align="center" align="center"
contents={[ contents={[
{ {
content: content: (
`Save time and focus on your project's documentation. Simply `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) 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 and Docusaurus will publish a set of static html files ready
to serve.`, to serve.`
),
image: `${siteConfig.baseUrl}img/markdown.png`, image: `${siteConfig.baseUrl}img/markdown.png`,
imageAlign: "top", imageAlign: "top",
imageAlt: "Markdown", 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) `[Extend or customize](${siteConfig.baseUrl}docs/${this.props.language}/api-pages.html)
your project's layout by reusing React. Docusaurus can be 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`, image: `${siteConfig.baseUrl}img/react.svg`,
imageAlign: "top", imageAlign: "top",
imageAlt: "React", imageAlt: "React",
title: "Built Using React" title: <translate>Built Using React</translate>
}, },
{ {
content: content: (
`[Localization](${siteConfig.baseUrl}docs/${this.props.language}/translation.html) `[Localization](${siteConfig.baseUrl}docs/${this.props.language}/translation.html)
comes pre-configured. Use [Crowdin](https://crowdin.com/) to translate your docs 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`, image: `${siteConfig.baseUrl}img/translation.svg`,
imageAlign: "top", imageAlign: "top",
imageAlt: "Translation", imageAlt: "Translation",
title: "Ready for Translations" title: <translate>Ready for Translations</translate>
} }
]} ]}
layout="threeColumn" layout="threeColumn"
@ -132,23 +132,25 @@ class Index extends React.Component {
align="center" align="center"
contents={[ contents={[
{ {
content: content: (
`Support users on all versions of your project. Document `Support users on all versions of your project. Document
[versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning.html) [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`, image: `${siteConfig.baseUrl}img/versioning.svg`,
imageAlign: "top", imageAlign: "top",
imageAlt: "Document Versioning", 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. `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`, image: `${siteConfig.baseUrl}img/search.svg`,
imageAlign: "top", imageAlign: "top",
imageAlt: "Document Search", imageAlt: "Document Search",
title: "Document Search" title: <translate>Document Search</translate>
} }
]} ]}
layout="twoColumn" layout="twoColumn"
@ -158,13 +160,14 @@ class Index extends React.Component {
<GridBlock <GridBlock
contents={[ contents={[
{ {
content: content: (
`Get [up and running](${siteConfig.baseUrl}docs/${this.props.language}/site-creation.html) `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", imageAlign: "right",
image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`, image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`,
imageAlt: "Docusaurus on a Scooter", imageAlt: "Docusaurus on a Scooter",
title: "Quick Setup" title: <translate>Quick Setup</translate>
} }
]} ]}
layout="twoColumn" layout="twoColumn"
@ -174,17 +177,18 @@ class Index extends React.Component {
<GridBlock <GridBlock
contents={[ contents={[
{ {
content: content: (
`Make design and documentation changes by using the included `Make design and documentation changes by using the included
[live server](${siteConfig.baseUrl}docs/${this.props.language}/site-preparation#verifying-installation). [live server](${siteConfig.baseUrl}docs/${this.props.language}/site-preparation#verifying-installation).
[Publish](${siteConfig.baseUrl}docs/${this.props.language}/publishing.html) [Publish](${siteConfig.baseUrl}docs/${this.props.language}/publishing.html)
your site to GitHub pages or other static file hosts your site to GitHub pages or other static file hosts
manually, using a script, or with continuous integration manually, using a script, or with continuous integration
like CircleCI.`, like CircleCI.`
),
imageAlign: "left", imageAlign: "left",
image: `${siteConfig.baseUrl}img/docusaurus_live.gif`, image: `${siteConfig.baseUrl}img/docusaurus_live.gif`,
imageAlt: "Docusaurus Demo", imageAlt: "Docusaurus Demo",
title: "Develop and Deploy" title: <translate>Develop and Deploy</translate>
} }
]} ]}
layout="twoColumn" layout="twoColumn"
@ -194,32 +198,33 @@ class Index extends React.Component {
<GridBlock <GridBlock
contents={[ contents={[
{ {
content: content: (
`Docusaurus currently provides support to help your website `Docusaurus currently provides support to help your website
use [translations](${siteConfig.baseUrl}docs/${this.props.language}/translation.html), use [translations](${siteConfig.baseUrl}docs/${this.props.language}/translation.html),
[search](${siteConfig.baseUrl}docs/${this.props.language}/search.html), [search](${siteConfig.baseUrl}docs/${this.props.language}/search.html),
and [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning.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). 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 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", imageAlign: "right",
image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`, image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`,
imageAlt: "Monochromatic Docusaurus", imageAlt: "Monochromatic Docusaurus",
title: "Website Features" title: <translate>Website Features</translate>
} }
]} ]}
layout="twoColumn" layout="twoColumn"
/> />
</Container> </Container>
<div className="productShowcaseSection paddingBottom"> <div className="productShowcaseSection paddingBottom">
<h2>{"Who's Using Docusaurus?"}</h2> <h2><translate>Who's Using Docusaurus?</translate></h2>
<p>Docusaurus is building websites for these projects...</p> <p><translate>Docusaurus is building websites for these projects...</translate></p>
<div className="logos">{showcase}</div> <div className="logos">{showcase}</div>
<div className="more-users"> <div className="more-users">
<a <a
className="button" className="button"
href={`${siteConfig.baseUrl}${this.props.language}/users.html`}> href={`${siteConfig.baseUrl}${this.props.language}/users.html`}>
All Docusaurus Users <translate>All Docusaurus Users</translate>
</a> </a>
</div> </div>
</div> </div>

11
website/pages/en/users.js
View file

@ -6,11 +6,10 @@
*/ */
const React = require('react'); const React = require('react');
const CompLibrary = require('../../core/CompLibrary.js'); const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container; const Container = CompLibrary.Container;
const siteConfig = require(process.cwd() + '/siteConfig.js'); const siteConfig = require(process.cwd() + '/siteConfig.js');
const translate = require("../../server/translate.js").translate;
class Users extends React.Component { class Users extends React.Component {
render() { render() {
@ -43,23 +42,25 @@ class Users extends React.Component {
<Container padding={['bottom', 'top']}> <Container padding={['bottom', 'top']}>
<div className="showcaseSection"> <div className="showcaseSection">
<div className="prose"> <div className="prose">
<h1>Who is using Docusaurus?</h1> <h1><translate>Who is using Docusaurus?</translate></h1>
<p> <p>
<translate>
Docusaurus powers some of Facebook's popular{' '} Docusaurus powers some of Facebook's popular{' '}
<a href="https://code.facebook.com/projects/"> <a href="https://code.facebook.com/projects/">
open source projects open source projects
</a>. </a>.
</translate>
</p> </p>
</div> </div>
<div className="logos">{fbShowcase}</div> <div className="logos">{fbShowcase}</div>
<div className="prose"> <div className="prose">
<p> <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> </p>
</div> </div>
<div className="logos">{showcase}</div> <div className="logos">{showcase}</div>
<div className="prose"> <div className="prose">
<p>Is your project using Docusaurus?</p> <p><translate>Is your project using Docusaurus?</translate></p>
<p> <p>
Edit this page with a{' '} Edit this page with a{' '}
<a href="https://github.com/facebook/docusaurus/edit/master/website/siteConfig.js"> <a href="https://github.com/facebook/docusaurus/edit/master/website/siteConfig.js">