WIP: SnackPlayer Plugin

.circleci/config.yml

@@ -98,6 +98,7 @@ jobs:
               git config --global user.name "Website Deployment Script"
               echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" > ~/.netrc
               echo "Deploying website..."
+              export NODE_OPTIONS=--max_old_space_size=4096
               GIT_USER=reactjs-bot CIRCLE_PROJECT_REPONAME=react-native yarn run publish-gh-pages
             else
               echo "Skipping deploy."

netlify.toml

@@ -1,4 +1,4 @@
 [build]
   base    = "website"
   publish = "build"
-  command = "sed -i -e \"s|const baseUrl .*|const baseUrl = '/'|g\" docusaurus.config.js && yarn install && yarn build"
+  command = "export NODE_OPTIONS=--max_old_space_size=4096 && sed -i -e \"s|const baseUrl .*|const baseUrl = '/'|g\" docusaurus.config.js && yarn install && yarn build"

website/docusaurus.config.js

@@ -338,7 +338,7 @@ module.exports = {
             'https://github.com/facebook/react-native-website/blob/master/docs/',
           path: '../docs',
           sidebarPath: require.resolve('./sidebars.json'),
-          remarkPlugins: [],
+          remarkPlugins: [require('./plugins/remark-snackplayer')],
         },
         blog: {
           path: 'blog',
@@ -353,7 +353,7 @@ module.exports = {
       },
     ],
   ],
-  plugins: ['docusaurus-plugin-sass'],
+  plugins: ['docusaurus-plugin-sass', './sitePlugin'],
   themeConfig: {
     prism: {
       defaultLanguage: 'jsx',

website/package.json

@@ -51,7 +51,7 @@
     "highlight.js": "^9.18.3",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "remarkable": "^2.0.1"
+    "remark-snackplayer": "./plugins/remark-snackplayer"
   },
   "devDependencies": {
     "@motiz88/react-native-docgen": "0.0.3",

website/plugins/remark-snackplayer/README.md

@@ -0,0 +1,51 @@
+<h1 align="center"> Remark SnackPlayer </h1>
+
+<p align="center"> 
+Remark plugin to embed <a href="https://snack.expo.io/">Expo Snack's</a> using Code Blocks 
+</p>
+
+## 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:
+
+````
+
+```SnackPlayer name=Hello%20World description=This%20is%20a%20description
+import React from 'react';
+import { Text, View } from 'react-native';
+
+const YourApp = () => {
+    return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text>
+        Try editing me! 🎉
+        </Text>
+    </View>
+    );
+}
+
+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:
+
+| 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 Do
+
+- Support Passing Configuration Parameters
+- Fix and Document Mobile Fallback
+- Write Comprehensive tests

website/plugins/remark-snackplayer/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "remark-snackplayer",
+  "version": "0.0.2",
+  "description": "Remark SnackPlayer Plugin",
+  "main": "src/index.js",
+  "author": "Darsh <[email protected]>",
+  "keywords": [
+    "remark",
+    "react-native",
+    "expo",
+    "snackplayer",
+    "preview"
+  ],
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "node_modules/.bin/tape tests/index.js"
+  },
+  "dependencies": {
+    "dedent": "^0.7.0",
+    "prismjs": "^1.21.0",
+    "unist-builder": "^2.0.3",
+    "unist-util-visit-parents": "^3.1.0"
+  },
+  "devDependencies": {
+    "remark": "^12.0.1",
+    "tape": "^5.0.1"
+  }
+}