diff --git a/website/plugins/remark-snackplayer/README.md b/website/plugins/remark-snackplayer/README.md index d16c21ff51c..6224617fc2e 100644 --- a/website/plugins/remark-snackplayer/README.md +++ b/website/plugins/remark-snackplayer/README.md @@ -4,14 +4,25 @@ Remark plugin to embed Expo Snack's using Code Blocks

+## Installation + +```shell +yarn add remark-snackplayer +``` + +Add Snack Player embedded script to your website: + +```html + +``` + ## Usage This plugin parses codeblocks with language set as `SnackPlayer` and replaces them with embedded Expo's SnackPlayers, you can also provide parameters along with the codeblock to set some basic details. -Example Code Block: +### Example Code Block ```` - ```SnackPlayer name=Hello%20World description=This%20is%20a%20description import React from 'react'; import { Text, View } from 'react-native'; @@ -26,23 +37,28 @@ const YourApp = () => { ); } -export default YourApp;``` - - +export default YourApp; +``` ```` The above code snippet would look like this on your page Screenshot 2020-10-03 at 1 11 19 AM -Parameters: +### Parameters + +| Name | Description | Default | +| ------------------ | ---------------------------------------- | ------------------- | +| name | SnackPlayer name | `"Example"` | +| description | Description of the example | `"Example usage"` | +| platform | Example platform | `"web"` | +| supportedPlatforms | Supported platforms | `"ios,android,web"` | +| theme | SnackPlayer theme, `"light"` or `"dark"` | `"light"` | +| preview | Preview visible, `"true"` or `"false"` | `"true"` | + +## Styling -| Name | Description | Default | -| ------------------ | -------------------------- | ----------------- | -| name | SnackPlayer Name | "Example" | -| description | Description of the example | "Example usage" | -| platform | Example Platform | "ios" | -| supportedPlatforms | Supported Platforms | "ios,android,web" | +To style the Snack Player wrapper you can use `.snack-player` class. ## To Do diff --git a/website/plugins/remark-snackplayer/package.json b/website/plugins/remark-snackplayer/package.json index f83d93c7b39..4f589c07bf7 100644 --- a/website/plugins/remark-snackplayer/package.json +++ b/website/plugins/remark-snackplayer/package.json @@ -1,6 +1,6 @@ { "name": "remark-snackplayer", - "version": "0.0.3", + "version": "0.0.4", "description": "Remark SnackPlayer Plugin", "main": "src/index.js", "author": "Darsh ", diff --git a/website/plugins/remark-snackplayer/src/index.js b/website/plugins/remark-snackplayer/src/index.js index bb5e27a5677..09968f818e4 100644 --- a/website/plugins/remark-snackplayer/src/index.js +++ b/website/plugins/remark-snackplayer/src/index.js @@ -43,26 +43,26 @@ function SnackPlayer() { : 'Example usage'; const sampleCode = node.value; const encodedSampleCode = encodeURIComponent(sampleCode); - const platform = params.platform ? params.platform : 'ios'; + const platform = params.platform ? params.platform : 'web'; const supportedPlatforms = params.supportedPlatforms ? params.supportedPlatforms : 'ios,android,web'; + const theme = params.theme ? params.theme : 'light'; + const preview = params.preview ? params.preview : 'true'; // Generate Node for SnackPlayer const snackPlayerDiv = u('html', { value: dedent` -
-
-
-
+
`, }); @@ -78,17 +78,6 @@ function SnackPlayer() { } }); - // If there is one or more snackplayer(s) present - if (nodesToProcess.length) { - // To embed.js script - const snackPlayerEmbed = u('html', { - value: dedent` - - `, - }); - - tree.children.push(snackPlayerEmbed); - } // Wait for all promises to be resolved Promise.all(nodesToProcess) .then(resolve()) diff --git a/website/plugins/remark-snackplayer/tests/markdown/test2.md b/website/plugins/remark-snackplayer/tests/markdown/test2.md index ed4f11ccf1d..ae1a343d38b 100644 --- a/website/plugins/remark-snackplayer/tests/markdown/test2.md +++ b/website/plugins/remark-snackplayer/tests/markdown/test2.md @@ -15,7 +15,7 @@ const YourApp = () => { export default YourApp; ``` -```SnackPlayer name=SecondPlayer +```SnackPlayer name=SecondPlayer&theme=dark&preview=false&supportedPlatforms=ios import React from 'react'; import { Text, View } from 'react-native'; diff --git a/website/plugins/remark-snackplayer/tests/output/output1.html b/website/plugins/remark-snackplayer/tests/output/output1.html index e650aa6bee9..a64739fe018 100644 --- a/website/plugins/remark-snackplayer/tests/output/output1.html +++ b/website/plugins/remark-snackplayer/tests/output/output1.html @@ -1,13 +1,10 @@ -
-
-
- - +
diff --git a/website/plugins/remark-snackplayer/tests/output/output2.html b/website/plugins/remark-snackplayer/tests/output/output2.html index b86c489d53b..cd120721d92 100644 --- a/website/plugins/remark-snackplayer/tests/output/output2.html +++ b/website/plugins/remark-snackplayer/tests/output/output2.html @@ -1,25 +1,21 @@ -
-
-
+
-
-
-
- - +
diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index c984ab5b21e..5b4b70ff119 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -1118,3 +1118,14 @@ html[data-theme="dark"] .docsRating { border: 0; } } + +/* Snack Player */ + +.snack-player { + height: 505px; + width: 100%; + overflow: hidden; + margin-bottom: 24px; + border: 1px solid var(--ifm-table-border-color); + border-radius: var(--ifm-global-radius); +} diff --git a/website/yarn.lock b/website/yarn.lock index d6dab1aa68e..b8bcda0ee1e 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -9114,7 +9114,7 @@ prism-react-renderer@^1.1.0: resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44" integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug== -prismjs@^1.20.0, prismjs@^1.21.0: +prismjs@^1.20.0: version "1.21.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3" integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw== @@ -9860,10 +9860,9 @@ remark-retext@^3.0.0: mdast-util-to-nlcst "^3.2.0" remark-snackplayer@./plugins/remark-snackplayer: - version "0.0.2" + version "0.0.4" dependencies: dedent "^0.7.0" - prismjs "^1.21.0" unist-builder "^2.0.3" unist-util-visit-parents "^3.1.0"