rewrite snackplayer with remark plugin

docs/getting-started.md

@@ -3,24 +3,19 @@ id: environment-setup
 title: Setting up the development environment
 ---
 
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
+
 This page will help you install and build your first React Native app.
 
 <strong>If you are new to mobile development</strong>, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native and, while it has many [features](https://expo.io/features), the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator. If you'd like to try out React Native directly in your web browser before installing any tools, you can try out [Snack](https://snack.expo.io/).
 
 <strong>If you are already familiar with mobile development</strong>, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.
 
-<div className="toggler">
-  <ul role="tablist" id="toggle-guide">
-    <li id="quickstart" className="button-quickstart" aria-selected="false" role="tab" tabIndex={0} aria-controls="quickstarttab" onClick="displayTab('guide', 'quickstart')">
-      Expo CLI Quickstart
-    </li>
-    <li id="native" className="button-native" aria-selected="false" role="tab" tabIndex={0} aria-controls="nativetab" onClick="displayTab('guide', 'native')">
-      React Native CLI Quickstart
-    </li>
-  </ul>
-</div>
+<Tabs defaultValue="expo" values={[ {label: 'Expo CLI Quickstart', value: 'expo'}, {label: 'React Native CLI Quickstart', value: 'rn'}]}>
+
+  <TabItem value="expo">
 
-<block className="quickstart mac windows linux ios android" />
+<!-- expo CLI -->
 
 Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility:
 
@@ -82,28 +77,101 @@ Expo CLI configures your project to use the most recent React Native version tha
 
 If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.
 
-<block className="native mac windows linux ios android" />
+  </TabItem>
+
+  <TabItem value="rn">
+
+<!-- react native CLI -->
 
 <p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="environment-setup" onclick="displayTab('guide', 'quickstart')">Expo</a>, you'll need this section.</p>
 
 The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different.
 
-<div className="toggler">
-  <span>Development OS:</span>
-  <span role="tablist" id="toggle-os">
-    <button role="tab" className="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
-    <button role="tab" className="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
-    <button role="tab" className="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
-  </span>
-</div>
-
-<div className="toggler">
-  <span>Target OS:</span>
-  <span role="tablist" id="toggle-platform">
-    <button role="tab" className="button-ios" onclick="displayTab('platform', 'ios')">iOS</button>
-    <button role="tab" className="button-android" onclick="displayTab('platform', 'android')">Android</button>
-  </span>
-</div>
+<!-- doubly nested tabs -->
+
+<Tabs defaultValue="macos" values={[ {label: 'macOS', value: 'macos'}, {label: 'Windows', value: 'windows'}, {label: 'Linux', value: 'linux'}, ]}>
+
+  <TabItem value="macos">
+
+<Tabs defaultValue="ios" values={[ {label: 'IOS', value: 'ios'}, {label: 'Android', value: 'android'}]}>
+
+  <TabItem value="ios">
+
+<!-- macos and ios -->
+
+<h2>Installing dependencies</h2>
+
+You will need Node, Watchman, the React Native command line interface, and Xcode.
+
+While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.
+
+  </TabItem>
+
+  <TabItem value="android">
+
+<!-- macos and android -->
+
+> Android developers may be familiar with this concept.
+
+  </TabItem>
+</Tabs>
+
+  </TabItem>
+
+  <TabItem value="windows">
+
+<Tabs defaultValue="ios" values={[ {label: 'IOS', value: 'ios'}, {label: 'Android', value: 'android'}]}>
+
+  <TabItem value="ios">
+
+<!-- windows and ios -->
+
+<h2>Unsupported</h2>
+
+<blockquote><p>A Mac is required to build projects with native code for iOS. You can follow the <a href="environment-setup" onclick="displayTab('guide', 'quickstart')">Quick Start</a> to learn how to build your app using Expo instead.</p></blockquote>
+
+  </TabItem>
+
+  <TabItem value="android">
+
+<!-- windows and android -->
+
+> Android developers may be familiar with this concept.
+
+  </TabItem>
+</Tabs>
+
+  </TabItem>
+
+  <TabItem value="linux">
+
+<Tabs defaultValue="ios" values={[ {label: 'IOS', value: 'ios'}, {label: 'Android', value: 'android'}]}>
+
+  <TabItem value="ios">
+
+<!-- linux and ios -->
+
+<h2>Unsupported</h2>
+
+<blockquote><p>A Mac is required to build projects with native code for iOS. You can follow the <a href="environment-setup" onclick="displayTab('guide', 'quickstart')">Quick Start</a> to learn how to build your app using Expo instead.</p></blockquote>
+
+  </TabItem>
+
+  <TabItem value="android">
+
+<!-- linux and android -->
+
+> Android developers may be familiar with this concept.
+
+  </TabItem>
+</Tabs>
+
+  </TabItem>
+
+</Tabs>
+
+  </TabItem>
+</Tabs>
 
 <block className="native linux windows ios" />
 

docs/introduction.md

@@ -4,6 +4,8 @@ title: Introduction
 description: This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment.
 ---
 
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
+
 <div class="content-banner">
   <p>
     Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
@@ -54,18 +56,9 @@ With React, you can make components using either classes or functions. Originall
 
 [Hooks were introduced in React Native 0.58.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so:
 
-<div class="toggler">
-  <ul role="tablist" class="toggle-syntax">
-    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
-    </li>
-    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
-    </li>
-  </ul>
-</div>
+<Tabs defaultValue="func" values={[ {label: 'Functional Component Example', value: 'func'}, {label: 'Class Component Example', value: 'class'}, ]}>
 
-<block class="functional syntax" />
+<TabItem value="func">
 
 ```SnackPlayer name=Hello%20World%20Function%20Component
 import React from 'react';
@@ -86,7 +79,9 @@ const HelloWorldApp = () => {
 export default HelloWorldApp;
 ```
 
-<block class="classical syntax" />
+</TabItem>
+
+<TabItem value="class">
 
 ```SnackPlayer name=Hello%20World%20Class%20Component
 import React, { Component } from 'react';
@@ -109,36 +104,37 @@ class HelloWorldApp extends Component {
 export default HelloWorldApp;
 ```
 
-<block class="endBlock syntax" />
+</TabItem>
+
+</Tabs>
 
 You can find more examples of class components in [previous versions of this documentation](/versions).
 
 ## Developer Notes
 
 People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so:
 
-<div class="toggler">
-  <span>Developer Notes</span>
-  <span role="tablist" class="toggle-devNotes">
-    <button role="tab" class="button-webNote" onclick="displayTabs('devNotes', 'webNote')">Web</button>
-    <button role="tab" class="button-androidNote" onclick="displayTabs('devNotes', 'androidNote')">Android</button>
-    <button role="tab" class="button-iosNote" onclick="displayTabs('devNotes', 'iosNote')">iOS</button>
-  </span>
-</div>
+<Tabs defaultValue="web" values={[ {label: 'Web', value: 'web'}, {label: 'Android', value: 'android'}, {label: 'IOS', value: 'ios'}, ]}>
 
-<block class="webNote devNotes" />
+  <TabItem value="web">
 
 > Web developers may be familiar with this concept.
 
-<block class="androidNote devNotes" />
+  </TabItem>
+
+  <TabItem value="android">
 
 > Android developers may be familiar with this concept.
 
-<block class="iosNote devNotes" />
+  </TabItem>
+
+  <TabItem value="ios">
 
 > iOS developers may be familiar with this concept.
 
-<block class="endBlock devNotes" />
+  </TabItem>
+
+</Tabs>
 
 ## Formatting
 

website/core/RemarkPlugins.js

@@ -0,0 +1,128 @@
+'use strict';
+
+const hljs = require('highlight.js');
+const visit = require('unist-util-visit-parents');
+const u = require('unist-builder');
+
+function parseParams(paramString) {
+  var params = {};
+
+  if (paramString) {
+    var pairs = paramString.split('&');
+    for (var i = 0; i < pairs.length; i++) {
+      var pair = pairs[i].split('=');
+      params[pair[0]] = pair[1];
+    }
+  }
+
+  if (!params.platform) {
+    params.platform = 'web';
+  }
+
+  return params;
+}
+
+function htmlForCodeBlock(code) {
+  return (
+    '<pre><code class="hljs css javascript">' +
+    hljs.highlight('javascript', code).value +
+    '</code></pre>'
+  );
+}
+
+/**
+ * Use the SnackPlayer by including a ```SnackPlayer``` block in markdown.
+ *
+ * Optionally, include url parameters directly after the block's language.
+ * Valid options are name, description, and platform.
+ *
+ * E.g.
+ * ```SnackPlayer platform=android&name=Hello%20world!
+ * import React from 'react';
+ * import { Text } from 'react-native';
+ *
+ * export default class App extends React.Component {
+ *   render() {
+ *     return <Text>Hello World!</Text>;
+ *   }
+ * }
+ * ```
+ */
+function SnackPlayer() {
+  return tree =>
+    new Promise(async (resolve, reject) => {
+      const nodesToProcess = [];
+      // Parse all CodeBlocks
+      visit(tree, 'code', (node, parent) => {
+        //Add SnackPlayer CodeBlocks to processing queue
+        if (node.lang == 'SnackPlayer') {
+          nodesToProcess.push(
+            new Promise(async (resolve, reject) => {
+              try {
+                let params = parseParams(node.meta);
+
+                // Gather necessary Params
+                const name = params.name
+                  ? decodeURIComponent(params.name)
+                  : 'Example';
+                const description = params.description
+                  ? decodeURIComponent(params.description)
+                  : 'Example usage';
+                const sampleCode = node.value;
+                const encodedSampleCode = encodeURIComponent(sampleCode);
+                const platform = params.platform ? params.platform : 'ios';
+                const supportedPlatforms = params.supportedPlatforms
+                  ? params.supportedPlatforms
+                  : 'ios,android,web';
+
+                // Generate Node for SnackPlayer
+                const snackPlayerDiv = u('html', {
+                  value: `<div class="snack-player">
+                              <div class="mobile-friendly-snack" style="display: none">
+                              ${htmlForCodeBlock(sampleCode)}</div>
+                              <div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px">
+                              <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,.16);
+                                  border-radius: 4px;
+                                  height: 514px;
+                                  width: 100%;
+                                "
+                              >
+                              </div>
+                              </div>
+                              </div>`,
+                });
+
+                // Replace code block with SnackPlayer Node
+                const index = parent[0].children.indexOf(node);
+                parent[0].children.splice(index, 1, snackPlayerDiv);
+              } catch (e) {
+                return reject(e);
+              }
+              resolve();
+            })
+          );
+        }
+      });
+
+      // Wait for all promises to be resolved
+      Promise.all(nodesToProcess)
+        .then(resolve())
+        .catch(reject());
+    });
+}
+
+function ReactNativeWebPlayer() {
+  return function transformer(tree, file) {};
+}
+
+module.exports = {ReactNativeWebPlayer, SnackPlayer};