react-native-website-migration · Simek · Oct 9, 2020 · Oct 8, 2020 · Oct 8, 2020 · Oct 8, 2020
diff --git a/website/plugins/remark-snackplayer/README.md b/website/plugins/remark-snackplayer/README.md
@@ -4,14 +4,25 @@
 Remark plugin to embed <a href="https://snack.expo.io/">Expo Snack's</a> using Code Blocks 
 </p>
 
+## Installation
+
+```shell
+yarn add remark-snackplayer
+```
+
+Add Snack Player embedded script to your website:
+
+```html
+<script async src="https://snack.expo.io/embed.js"></script>
+```
+
 ## 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
 
 <img width="783" alt="Screenshot 2020-10-03 at 1 11 19 AM" src="https://user-images.githubusercontent.com/11258286/94963203-67de3500-0515-11eb-974a-a2289c0bfdc8.png">
 
-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
@@ -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 <darshkpatel@gmail.com>",

diff --git 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`
-                <div class="snack-player">
-                  <div
-                    data-snack-name="${name}"
-                    data-snack-description="${description}"
-                    data-snack-code="${encodedSampleCode}"
-                    data-snack-platform="${platform}"
-                    data-snack-supported-platforms="${supportedPlatforms}"
-                    data-snack-preview="true"
-                    style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
-                    >
-                  </div>
-                </div>
+                <div
+                  class="snack-player"
+                  data-snack-name="${name}"
+                  data-snack-description="${description}"
+                  data-snack-code="${encodedSampleCode}"
+                  data-snack-platform="${platform}"
+                  data-snack-supported-platforms="${supportedPlatforms}"
+                  data-snack-theme="${theme}"
+                  data-snack-preview="${preview}"
+                ></div>
                 `,
                 });
 
@@ -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`
-          <script async src="https://snack.expo.io/embed.js"></script>
-          `,
-        });
-
-        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
@@ -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
@@ -1,13 +1,10 @@
-<div class="snack-player">
-  <div
-    data-snack-name="Hello World"
-    data-snack-description="Example usage"
-    data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B"
-    data-snack-platform="web"
-    data-snack-supported-platforms="ios,android,web"
-    data-snack-preview="true"
-    style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
-  ></div>
-</div>
-
-<script async src="https://snack.expo.io/embed.js"></script>
+<div
+  class="snack-player"
+  data-snack-name="Hello World"
+  data-snack-description="Example usage"
+  data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B"
+  data-snack-platform="web"
+  data-snack-supported-platforms="ios,android,web"
+  data-snack-theme="light"
+  data-snack-preview="true"
+></div>
diff --git a/website/plugins/remark-snackplayer/tests/output/output2.html b/website/plugins/remark-snackplayer/tests/output/output2.html
@@ -1,25 +1,21 @@
-<div class="snack-player">
-  <div
-    data-snack-name="FirstPlayer"
-    data-snack-description="Example usage"
-    data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B"
-    data-snack-platform="web"
-    data-snack-supported-platforms="ios,android,web"
-    data-snack-preview="true"
-    style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
-  ></div>
-</div>
+<div
+  class="snack-player"
+  data-snack-name="FirstPlayer"
+  data-snack-description="Example usage"
+  data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B"
+  data-snack-platform="web"
+  data-snack-supported-platforms="ios,android,web"
+  data-snack-theme="light"
+  data-snack-preview="true"
+></div>
 
-<div class="snack-player">
-  <div
-    data-snack-name="SecondPlayer"
-    data-snack-description="Example usage"
-    data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B"
-    data-snack-platform="web"
-    data-snack-supported-platforms="ios,android,web"
-    data-snack-preview="true"
-    style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"
-  ></div>
-</div>
-
-<script async src="https://snack.expo.io/embed.js"></script>
+<div
+  class="snack-player"
+  data-snack-name="SecondPlayer"
+  data-snack-description="Example usage"
+  data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20YourApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20Try%20editing%20me!%20%F0%9F%8E%89%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A%0Aexport%20default%20YourApp%3B"
+  data-snack-platform="web"
+  data-snack-supported-platforms="ios"
+  data-snack-theme="dark"
+  data-snack-preview="false"
+></div>
diff --git 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
@@ -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"