Skip to content

Commit

Permalink
feat(website): improve prism themes (#6214)
Browse files Browse the repository at this point in the history
* feat(website): modify Prism dark theme

* update

* Use vsDark

* update crowdin config

* fix light theme as well

* revert comment changes
  • Loading branch information
Josh-Cena authored Dec 29, 2021
1 parent ae9f43f commit 96dbb8e
Show file tree
Hide file tree
Showing 10 changed files with 221 additions and 73 deletions.
58 changes: 22 additions & 36 deletions crowdin-v2.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion website/docs/guides/creating-pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ my-website
│ └── pages
│ ├── styles.module.css
│ ├── index.js
| ├──_ignored.js
├──_ignored.js
│ └── support
│ ├── index.js
│ └── styles.module.css
Expand Down
16 changes: 6 additions & 10 deletions website/docs/guides/markdown-features/markdown-features-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
<img
src={require('./assets/docusaurus-asset-example-banner.png').default}
alt="Example banner"
Expand All @@ -41,10 +41,10 @@ Display images using inline CommonJS `require` in JSX image tag:

Display images using ES `import` syntax and JSX image tag:

```mdx
```jsx
import myImageUrl from './assets/docusaurus-asset-example-banner.png';

<img src={myImageUrl} alt="Example banner" />
<img src={myImageUrl} alt="Example banner" />;
```

This results in displaying the image:
Expand All @@ -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

<a
target="_blank"
href={require('./assets/docusaurus-asset-example.docx').default}>
Download this docx
</a>
<a target="\_blank" href={require('./assets/docusaurus-asset-example.docx').default}> Download this docx </a>

or

Expand Down
29 changes: 11 additions & 18 deletions website/docs/i18n/i18n-crowdin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion website/docs/i18n/i18n-git.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions website/docs/styling-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand All @@ -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: [
[
Expand Down
6 changes: 2 additions & 4 deletions website/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion website/src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
80 changes: 80 additions & 0 deletions website/src/utils/prismDark.js
Original file line number Diff line number Diff line change
@@ -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',
},
},
],
};
95 changes: 95 additions & 0 deletions website/src/utils/prismLight.js
Original file line number Diff line number Diff line change
@@ -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',
},
},
],
};

0 comments on commit 96dbb8e

Please sign in to comment.