docs(v2): i18n doc + polish

crowdin-v2.yaml

@@ -1,65 +1,46 @@
 #
 # Your Crowdin credentials
 #
-'project_id': '428890'
-'api_token_env': 'CROWDIN_PERSONAL_TOKEN'
-'base_path': '.'
-'base_url': 'https://api.crowdin.com'
+project_id: '428890'
+api_token_env: 'CROWDIN_PERSONAL_TOKEN'
+# base_path: '.'
+# base_url: 'https://api.crowdin.com'
 
 #
 # Choose file structure in Crowdin
 # e.g. true or false
 #
-'preserve_hierarchy': true
-
-settings: {
- # Ignore files like .DS_Store etc...
- # https://github.com/crowdin/crowdin-cli/wiki/Ignoring-hidden-files-during-upload-sources
- "ignore_hidden_files": true
-}
+preserve_hierarchy: true
 
 #
 # Files configuration
 #
 files:
  [
  {
- 'source': '/website/i18n/en/**/*',
- 'translation': '/website/i18n/%two_letters_code%/**/%original_file_name%',
- 'ignore': ['/**/.DS_Store'],
+ source: '/website/i18n/en/**/*',
+ translation: '/website/i18n/%two_letters_code%/**/%original_file_name%',
  },
  {
- 'source': '/website/docs/**/*',
- 'translation': '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%',
- 'ignore': ['/**/.DS_Store'],
+ source: '/website/docs/**/*',
+ translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%',
  },
  {
- 'source': '/website/community/**/*',
- 'translation': '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs-community/current/**/%original_file_name%',
- 'ignore': ['/**/.DS_Store'],
+ source: '/website/community/**/*',
+ translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs-community/current/**/%original_file_name%',
  },
  {
- 'source': '/website/versioned_docs/**/*',
- 'translation': '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/**/%original_file_name%',
- 'ignore': ['/**/.DS_Store'],
+ source: '/website/versioned_docs/**/*',
+ translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/**/%original_file_name%',
  },
  {
- 'source': '/website-1.x/blog/**/*',
- 'translation': '/website/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%',
- 'ignore': ['/**/.DS_Store'],
+ source: '/website-1.x/blog/**/*',
+ translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%',
  },
  {
- 'source': '/website/src/pages/**/*',
- 'translation': '/website/i18n/%two_letters_code%/docusaurus-plugin-content-pages/**/%original_file_name%',
- 'ignore':
- [
- '/**/*.js',
- '/**/*.jsx',
- '/**/*.ts',
- '/**/*.tsx',
- '/**/*.css',
- '/**/.DS_Store',
- ],
+ source: '/website/src/pages/**/*',
+ translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-pages/**/%original_file_name%',
+ ignore: ['/**/*.js', '/**/*.jsx', '/**/*.ts', '/**/*.tsx', '/**/*.css'],
  },
  ]
 #

examples/classic/src/pages/index.js

@@ -54,7 +54,7 @@ function Feature({imageUrl, title, description}) {
  );
 }
 
-function Home() {
+export default function Home() {
  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
  return (
@@ -93,5 +93,3 @@ function Home() {
  </Layout>
  );
 }
-
-export default Home;

packages/docusaurus-init/templates/bootstrap/docs/doc1.md

@@ -29,9 +29,9 @@ To serve as an example page when styling markdown based Docusaurus sites.
 
 ## Emphasis
 
-Emphasis, aka italics, with *asterisks* or _underscores_.
+Emphasis, aka italics, with _asterisks_ or _underscores_.
 
-Strong emphasis, aka bold, with **asterisks** or __underscores__.
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
 
 Combined emphasis with **asterisks and _underscores_**.
 
@@ -43,16 +43,18 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 1. Another item
- - Unordered sub-list.
+
+- Unordered sub-list.
+
 1. Actual numbers don't matter, just that it's a number
- 1. Ordered sub-list
+1. Ordered sub-list
 1. And another item.
 
-* Unordered list can use asterisks
+- Unordered list can use asterisks
 
-- Or minuses
+* Or minuses
 
-+ Or pluses
+- Or pluses
 
 ---
 
@@ -88,10 +90,9 @@ Reference-style: ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
 
-Images from any folder can be used by providing path to file. Path should be relative to markdown file.
-
-![img](../static/img/logo.svg)
+Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
 
+![img](/img/logo.svg)
 
 ---
 

packages/docusaurus-init/templates/bootstrap/docs/mdx.md → packages/docusaurus-init/templates/bootstrap/docs/interactiveDoc.mdx

@@ -5,13 +5,23 @@ title: Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 
-export const Highlight = ({children, color}) => ( <span style={{
+The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
+
+export const Highlight = ({children, color}) => (
+ <span
+ style={{
  backgroundColor: color,
  borderRadius: '2px',
  color: '#fff',
  padding: '0.2rem',
- }}>{children}</span> );
+ }}
+ onClick={() => alert('Highlight pressed!')}>
+ {children}
+ </span>
+);
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
+ Facebook blue
+</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!

packages/docusaurus-init/templates/bootstrap/package.json

@@ -8,7 +8,9 @@
  "build": "docusaurus build",
  "swizzle": "docusaurus swizzle",
  "deploy": "docusaurus deploy",
- "serve": "docusaurus serve"
+ "serve": "docusaurus serve",
+ "clear": "docusaurus clear",
+ "write-translations": "write-translations"
  },
  "dependencies": {
  "@docusaurus/core": "2.0.0-alpha.70",

packages/docusaurus-init/templates/bootstrap/src/pages/index.js

@@ -55,7 +55,7 @@ function Feature({imageUrl, title, description}) {
  );
 }
 
-function Home() {
+export default function Home() {
  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
 
@@ -86,5 +86,3 @@ function Home() {
  </Layout>
  );
 }
-
-export default Home;

packages/docusaurus-init/templates/bootstrap/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

packages/docusaurus-init/templates/classic/docs/doc1.md

@@ -88,9 +88,9 @@ Reference-style: ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
 
-Images from any folder can be used by providing path to file. Path should be relative to markdown file.
+Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
 
-![img](../static/img/logo.svg)
+![img](/img/logo.svg)
 
 ---
 

packages/docusaurus-init/templates/classic/docs/mdx.md → packages/docusaurus-init/templates/classic/docs/interactiveDoc.mdx

@@ -5,13 +5,23 @@ title: Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 
-export const Highlight = ({children, color}) => ( <span style={{
+The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
+
+export const Highlight = ({children, color}) => (
+ <span
+ style={{
  backgroundColor: color,
  borderRadius: '2px',
  color: '#fff',
  padding: '0.2rem',
- }}>{children}</span> );
+ }}
+ onClick={() => alert('Highlight pressed!')}>
+ {children}
+ </span>
+);
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
+ Facebook blue
+</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!

packages/docusaurus-init/templates/classic/package.json

@@ -9,7 +9,8 @@
  "swizzle": "docusaurus swizzle",
  "deploy": "docusaurus deploy",
  "serve": "docusaurus serve",
- "clear": "docusaurus clear"
+ "clear": "docusaurus clear",
+ "write-translations": "write-translations"
  },
  "dependencies": {
  "@docusaurus/core": "2.0.0-alpha.70",

packages/docusaurus-init/templates/classic/src/pages/index.js

@@ -54,7 +54,7 @@ function Feature({imageUrl, title, description}) {
  );
 }
 
-function Home() {
+export default function Home() {
  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
  return (
@@ -93,5 +93,3 @@ function Home() {
  </Layout>
  );
 }
-
-export default Home;

packages/docusaurus-init/templates/classic/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

packages/docusaurus-init/templates/facebook/docs/doc1.md

@@ -29,9 +29,9 @@ To serve as an example page when styling markdown based Docusaurus sites.
 
 ## Emphasis
 
-Emphasis, aka italics, with *asterisks* or _underscores_.
+Emphasis, aka italics, with _asterisks_ or _underscores_.
 
-Strong emphasis, aka bold, with **asterisks** or __underscores__.
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
 
 Combined emphasis with **asterisks and _underscores_**.
 
@@ -43,16 +43,18 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 1. Another item
- - Unordered sub-list.
+
+- Unordered sub-list.
+
 1. Actual numbers don't matter, just that it's a number
- 1. Ordered sub-list
+1. Ordered sub-list
 1. And another item.
 
-* Unordered list can use asterisks
+- Unordered list can use asterisks
 
-- Or minuses
+* Or minuses
 
-+ Or pluses
+- Or pluses
 
 ---
 
@@ -88,9 +90,9 @@ Reference-style: ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
 
-Images from any folder can be used by providing path to file. Path should be relative to markdown file.
+Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
 
-![img](../static/img/logo.svg)
+![img](/img/logo.svg)
 
 ---
 

packages/docusaurus-init/templates/facebook/docs/mdx.md → packages/docusaurus-init/templates/facebook/docs/interactiveDoc.mdx

@@ -5,13 +5,23 @@ title: Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 
-export const Highlight = ({children, color}) => ( <span style={{
+The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
+
+export const Highlight = ({children, color}) => (
+ <span
+ style={{
  backgroundColor: color,
  borderRadius: '2px',
  color: '#fff',
  padding: '0.2rem',
- }}>{children}</span> );
+ }}
+ onClick={() => alert('Highlight pressed!')}>
+ {children}
+ </span>
+);
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
+ Facebook blue
+</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!

packages/docusaurus-init/templates/facebook/package.json

@@ -10,10 +10,11 @@
  "deploy": "docusaurus deploy",
  "serve": "docusaurus serve",
  "clear": "docusaurus clear",
+ "write-translations": "write-translations",
  "ci": "yarn lint && yarn prettier:diff",
  "lint": "eslint --cache \"**/*.js\" && stylelint \"**/*.css\"",
- "prettier": "prettier --config .prettierrc --write \"**/*.{js,md}\"",
- "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.{js,md}\""
+ "prettier": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
+ "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,md,mdx}\""
  },
  "dependencies": {
  "@docusaurus/core": "2.0.0-alpha.70",

packages/docusaurus-init/templates/facebook/src/pages/index.js

@@ -63,7 +63,7 @@ function Feature({imageUrl, title, description}) {
  );
 }
 
-function Home() {
+export default function Home() {
  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
  return (
@@ -107,5 +107,3 @@ function Home() {
  </Layout>
  );
 }
-
-export default Home;

packages/docusaurus-init/templates/facebook/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.