diff --git a/crowdin-v2.yaml b/crowdin-v2.yaml index 75b99181b757..a055f2ebe8c8 100644 --- a/crowdin-v2.yaml +++ b/crowdin-v2.yaml @@ -2,9 +2,9 @@ # Your Crowdin credentials # project_id: '428890' -api_token_env: 'CROWDIN_PERSONAL_TOKEN' +api_token_env: CROWDIN_PERSONAL_TOKEN # base_path: '.' -# base_url: 'https://api.crowdin.com' +# base_url: https://api.crowdin.com # # Choose file structure in Crowdin @@ -18,45 +18,31 @@ preserve_hierarchy: true # Note: &/* is Yaml anchor syntax: https://support.atlassian.com/bitbucket-cloud/docs/yaml-anchors/ languages_mapping: &languages_mapping two_letters_code: - 'pt-BR': 'pt-BR' + pt-BR: pt-BR # # Files configuration # files: - [ - { - source: '/website/i18n/en/**/*', - translation: '/website/i18n/%two_letters_code%/**/%original_file_name%', - languages_mapping: *languages_mapping, - }, - { - source: '/website/docs/**/*', - translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%', - languages_mapping: *languages_mapping, - }, - { - source: '/website/community/**/*', - translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs-community/current/**/%original_file_name%', - languages_mapping: *languages_mapping, - }, - { - source: '/website/versioned_docs/**/*', - translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/**/%original_file_name%', - languages_mapping: *languages_mapping, - }, - { - source: '/website/blog/**/*', - translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%', - languages_mapping: *languages_mapping, - }, - { - source: '/website/src/pages/**/*', - translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-pages/**/%original_file_name%', - ignore: ['/**/*.js', '/**/*.jsx', '/**/*.ts', '/**/*.tsx', '/**/*.css'], - languages_mapping: *languages_mapping, - }, - ] + - source: /website/i18n/en/**/* + translation: /website/i18n/%two_letters_code%/**/%original_file_name% + languages_mapping: *languages_mapping + - source: /website/docs/**/* + translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% + languages_mapping: *languages_mapping + - source: /website/community/**/* + translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-docs-community/current/**/%original_file_name% + languages_mapping: *languages_mapping + - source: /website/versioned_docs/**/* + translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/**/%original_file_name% + languages_mapping: *languages_mapping + - source: /website/blog/**/* + translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name% + languages_mapping: *languages_mapping + - source: /website/src/pages/**/* + translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-pages/**/%original_file_name% + ignore: [/**/*.js, /**/*.jsx, /**/*.ts, /**/*.tsx, /**/*.css] + languages_mapping: *languages_mapping # # Source files filter # e.g. "/resources/en/*.json" diff --git a/website/docs/guides/creating-pages.md b/website/docs/guides/creating-pages.md index a2c0cef4c7c1..5d1f0f13cbc9 100644 --- a/website/docs/guides/creating-pages.md +++ b/website/docs/guides/creating-pages.md @@ -125,7 +125,7 @@ my-website │ └── pages │ ├── styles.module.css │ ├── index.js -| ├──_ignored.js +│ ├──_ignored.js │ └── support │ ├── index.js │ └── styles.module.css diff --git a/website/docs/guides/markdown-features/markdown-features-assets.mdx b/website/docs/guides/markdown-features/markdown-features-assets.mdx index 07b0f2c8a86f..79bd5accba68 100644 --- a/website/docs/guides/markdown-features/markdown-features-assets.mdx +++ b/website/docs/guides/markdown-features/markdown-features-assets.mdx @@ -26,13 +26,13 @@ You can display images in three different ways: Markdown syntax, CJS require, or Display images using simple Markdown syntax: -```mdx +```md ![Example banner](./assets/docusaurus-asset-example-banner.png) ``` Display images using inline CommonJS `require` in JSX image tag: -```mdx +```jsx Example banner +Example banner; ``` This results in displaying the image: @@ -65,14 +65,10 @@ If you are using [@docusaurus/plugin-ideal-image](../../api/plugins/plugin-ideal In the same way, you can link to existing assets by requiring them and using the returned url in videos, links, etc. -```mdx +```md # My Markdown page - - Download this docx - + Download this docx or diff --git a/website/docs/i18n/i18n-crowdin.mdx b/website/docs/i18n/i18n-crowdin.mdx index fe23e712a744..7d0c01bd12b5 100644 --- a/website/docs/i18n/i18n-crowdin.mdx +++ b/website/docs/i18n/i18n-crowdin.mdx @@ -120,25 +120,18 @@ Create `crowdin.yml` in `website`: ```yml title="crowdin.yml" project_id: '123456' -api_token_env: 'CROWDIN_PERSONAL_TOKEN' +api_token_env: CROWDIN_PERSONAL_TOKEN preserve_hierarchy: true -files: [ - # JSON translation files - { - source: '/i18n/en/**/*', - translation: '/i18n/%two_letters_code%/**/%original_file_name%', - }, - # Docs Markdown files - { - source: '/docs/**/*', - translation: '/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%', - }, - # Blog Markdown files - { - source: '/blog/**/*', - translation: '/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%', - }, - ] +files: + # JSON translation files + - source: /i18n/en/**/* + translation: /i18n/%two_letters_code%/**/%original_file_name% + # Docs Markdown files + - source: /docs/**/* + translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% + # Blog Markdown files + - source: /blog/**/* + translation: /i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name% ``` Crowdin has its own syntax for declaring source/translation paths: diff --git a/website/docs/i18n/i18n-git.md b/website/docs/i18n/i18n-git.md index 95ba9e104f7b..e7828dc2bfe7 100644 --- a/website/docs/i18n/i18n-git.md +++ b/website/docs/i18n/i18n-git.md @@ -109,7 +109,7 @@ Use the `--messagePrefix '(fr) '` option to make the untranslated strings stand Copy your untranslated Markdown files to the French folder: -``` +```bash mkdir -p i18n/fr/docusaurus-plugin-content-docs/current cp -r docs/** i18n/fr/docusaurus-plugin-content-docs/current diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md index 8386b6e6a25d..9cfefeb0b9c2 100644 --- a/website/docs/styling-layout.md +++ b/website/docs/styling-layout.md @@ -172,7 +172,7 @@ npm install --save docusaurus-plugin-sass sass 2. Include the plugin in your `docusaurus.config.js` file: -```jsx {3} title="docusaurus.config.js" +```js {3} title="docusaurus.config.js" module.exports = { // ... plugins: ['docusaurus-plugin-sass'], @@ -186,7 +186,7 @@ module.exports = { You can now set the `customCss` property of `@docusaurus/preset-classic` to point to your Sass/SCSS file: -```jsx {8} title="docusaurus.config.js" +```js {8} title="docusaurus.config.js" module.exports = { presets: [ [ diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 8a9d388209d6..97fa7cb81e49 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -15,10 +15,8 @@ const {dogfoodingPluginInstances} = require('./_dogfooding/dogfooding.config'); const FeatureRequestsPlugin = require('./src/featureRequests/FeatureRequestsPlugin'); const npm2yarn = require('@docusaurus/remark-plugin-npm2yarn'); const configTabs = require('./src/remark/configTabs'); -// eslint-disable-next-line import/no-extraneous-dependencies -const lightTheme = require('prism-react-renderer/themes/github'); -// eslint-disable-next-line import/no-extraneous-dependencies -const darkTheme = require('prism-react-renderer/themes/dracula'); +const lightTheme = require('./src/utils/prismLight'); +const darkTheme = require('./src/utils/prismDark'); const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice( 0, diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 9d2236c41824..38afeb295fc0 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -50,7 +50,7 @@ html[data-theme='dark'] { } html[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(66, 66, 66, 0.3); } .header-github-link:hover { diff --git a/website/src/utils/prismDark.js b/website/src/utils/prismDark.js new file mode 100644 index 000000000000..45b365e7e51f --- /dev/null +++ b/website/src/utils/prismDark.js @@ -0,0 +1,80 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// eslint-disable-next-line import/no-extraneous-dependencies +const darkTheme = require('prism-react-renderer/themes/vsDark'); + +module.exports = { + plain: { + color: '#D4D4D4', + backgroundColor: '#1E1E1E', + }, + styles: [ + ...darkTheme.styles, + { + types: ['title'], + style: { + color: '#569CD6', + fontWeight: 'bold', + }, + }, + { + types: ['property', 'parameter'], + style: { + color: '#9CDCFE', + }, + }, + { + types: ['script'], + style: { + color: '#D4D4D4', + }, + }, + { + types: ['boolean', 'arrow', 'atrule', 'tag'], + style: { + color: '#569CD6', + }, + }, + { + types: ['number', 'color', 'unit'], + style: { + color: '#B5CEA8', + }, + }, + { + types: ['font-matter'], + style: { + color: '#CE9178', + }, + }, + { + types: ['keyword', 'rule'], + style: { + color: '#C586C0', + }, + }, + { + types: ['regex'], + style: { + color: '#D16969', + }, + }, + { + types: ['maybe-class-name'], + style: { + color: '#4EC9B0', + }, + }, + { + types: ['constant'], + style: { + color: '#4FC1FF', + }, + }, + ], +}; diff --git a/website/src/utils/prismLight.js b/website/src/utils/prismLight.js new file mode 100644 index 000000000000..a34030a8d910 --- /dev/null +++ b/website/src/utils/prismLight.js @@ -0,0 +1,95 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// eslint-disable-next-line import/no-extraneous-dependencies +const lightTheme = require('prism-react-renderer/themes/github'); + +module.exports = { + ...lightTheme, + styles: [ + ...lightTheme.styles, + { + types: ['title'], + style: { + color: '#0550AE', + fontWeight: 'bold', + }, + }, + { + types: ['parameter'], + style: { + color: '#953800', + }, + }, + { + types: ['boolean', 'rule', 'color', 'number', 'constant', 'property'], + style: { + color: '#005CC5', + }, + }, + { + types: ['atrule', 'tag'], + style: { + color: '#22863A', + }, + }, + { + types: ['script'], + style: { + color: '#24292E', + }, + }, + { + types: ['operator', 'unit', 'rule'], + style: { + color: '#D73A49', + }, + }, + { + types: ['font-matter', 'string', 'attr-value'], + style: { + color: '#E3116C', + }, + }, + { + types: ['class-name'], + style: { + color: '#116329', + }, + }, + { + types: ['attr-name'], + style: { + color: '#0550AE', + }, + }, + { + types: ['keyword'], + style: { + color: '#CF222E', + }, + }, + { + types: ['function'], + style: { + color: '#8250DF', + }, + }, + { + types: ['selector'], + style: { + color: '#6F42C1', + }, + }, + { + types: ['variable'], + style: { + color: '#E36209', + }, + }, + ], +};