add next.js-based docs

fbshipit-source-id: d77229e

Author: abi

.babelrc

@@ -0,0 +1,13 @@
+{
+    "presets": [
+      "next/babel"
+    ],
+    "plugins": [
+      [
+        "transform-define",
+        "./env-config.js"
+      ],
+      "markdown-in-js/babel",
+      "babel-plugin-root-import"
+    ]
+}

.dockerignore

@@ -0,0 +1 @@
+Rockerfile

.gitignore

@@ -0,0 +1,6 @@
+.next
+
+# These are generated by mdjs
+pages/versions
+static/images/generated
+navigation-data.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 650 Industries, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,107 @@
+# Expo Documentation
+
+This is the public documentation for **Expo**, its SDK, client and services.
+
+You can access this documentation online at https://docs.expo.io/. It's built using next.js on top of the https://github.com/zeit/docs codebase.
+
+### Running Locally
+
+Download the copy of this repostory.
+
+~~~sh
+git clone https://github.com/expo/expo-docs.git
+~~~
+
+Then `cd` into the downloaded directory and install dependencies with:
+
+~~~sh
+yarn
+~~~
+
+Then you can run the app with:
+
+~~~sh
+yarn run dev
+~~~
+
+This starts two processes: a `next.js` server, and a compiler/watcher that converts markdown files into javascript pages that `next.js` understands.
+
+Now the documentation is running at http://localhost:3000
+
+### Running in production mode
+
+~~~sh
+yarn run build
+yarn run start
+~~~
+
+### Editing Docs Content
+
+[FUTURE]
+
+You can find the source of the documentation inside the `versions` directory. Documentation is mostly written in markdown with the help of some React components (for Snack embeds, etc). The routes and navbar are automatically inferred from the directory structure within `versions`.
+
+### Adding Images and Assets
+
+You can add images and assets in the same directory as the markdown file, and you just need to reference them correctly.
+
+### New Components
+
+Always try to use the existing components and features in markdown. Create a new component or use a component from NPM, unless there is no other option.
+
+### Quirks
+
+* You can can't have curly brace without quotes: '{}' -> `{}`
+* Make sure to leave a empty newline between a table and following content
+
+## Transition from current docs to next.js docs
+
+### Compile process
+
+#### FUTURE
+
+In both `yarn run start` and `yarn run dev`, we initially compile (see `mdjs` dir) all `.md` files in `docs` to `.js` files under `pages/versions` (which is git-ignored, and never commited). At this point, we also generate the json file `navigation-data.json` for the navbar, and move images in `docs` to the `static` folder.
+
+In `yarn run dev`, the watcher watches for changes to files in `docs`, and re-compiles as necessary. Note: navigation changes probably won't live-reload so make sure to restart the server.
+
+#### PRESENT
+
+On `yarn run start` and `yarn run dev`, we first fix all markdown files in `versions` (symlinked to `universe/docs/versions`) and copy them as new files under `docs` (which is git-ignored, and never commited). Then, we "compile" all markdown files in `docs` to javascript files under `pages/versions` (which is git-ignored, and never commited). At this point, we also generate the json file `navigation-data.json` for the navbar, and move images in `docs` to the `static` folder.
+
+### Temporary scripts
+
+At the moment, while we transition from the existing docs server to this next.js server, I have a `fix-markdown.js` that makes a couple of straightforward regex replacements, and moves markdown files in the workflow/distribution/expokit sections into seperate directories.
+
+### Not breaking existing incoming links
+
+`transition/sections.js` is used to figure out which URLs to alias. In order to not break existing URLs such as guides/configuration (the new URL is the more sensible workflow/configuration, automatically inferred from the fact that configuration.md is in the workflow subdir), in next.js, we support both so we need to keep a list of URLs to alias under guides. For future versions, the guides URL for `configuration` won't exist at all so we can slowly phase out this file.
+
+## A note about versioning
+
+Expo's SDK is versioned so that apps made on old SDKs are still supported
+when new SDKs are relased. The website documents previous SDK versions too.
+
+Version names correspond to directory names under `docs`.
+
+`unversioned` is a special version for the next SDK release.
+
+Sometimes you want to make an edit in version `X` and have that edit also
+be applied in versions `Y, Z, ...` (say, when you're fixing documentation for an
+API call that existed in old versions too). You can use the
+`./scripts/versionpatch.sh` utility to apply your `git diff` in one version in
+other versions. For example, to update the docs in `unversioned` then apply it
+on `v8.0.0` and `v7.0.0`, you'd do the following after editing the docs in
+`unversioned` such that it shows up in `git diff`:
+
+```./scripts/versionpatch.sh unversioned v8.0.0 v7.0.0```
+
+Any changes in your `git diff` outside the `unversioned` directory are ignored
+so don't worry if you have code changes or such elsewhere.
+
+### Updating latest version of docs
+
+When we release a new SDK, we copy the `unversioned` directory, and rename it to the new version. Latest version of docs is read from `package.json` so make sure to update the `version` key there as well. However, if you update the `version` key there, you need to `rm -rf node_modules/.cache/` before the change is picked up (why? [read this](https://github.com/zeit/next.js/pull/1747/files)).
+
+That's all you need to do. The `docs` directory is listed on server start to find all available versions. The routes and navbar contents are automatically inferred from the directory structure within `docs`. So, `/versions/v24.0.0/guides/development-mode` refers to `pages/versions/guides/development-mode`.
+
+Because the navbar is automatically generated from the directory structure, the default ordering of the links under each section is alphabetical. However, for many sections, this is not ideal UX. So, if you wish to override the alphabetical ordering, manipulate page titles in `navbarOrder.js`.

Rockerfile

@@ -0,0 +1,32 @@
+FROM gcr.io/exponentjs/node-base-builder:8.2.1-0
+
+MOUNT ../:/root/universe
+
+ENV TERM xterm-256color
+ENV PATH /root/universe/tools/bin/:$PATH
+
+RUN apk add bash tini
+
+ADD ./package.json /root/app/package.json
+ADD ./yarn.lock /root/app/yarn.lock
+
+RUN cd /root/universe/docs && \
+    echo "--- :yarn: Install dependencies" && \
+    yarn && \
+    yarn build && \
+    echo "--- Copying...." && \
+    mkdir -p /app/node_modules && \
+    cp -R ./node_modules /app/node_modules && \
+    echo "--- Cleaning up..." && \
+    rm -rf `yarn cache dir` && \
+    echo "--- Finishing build and pushing..."
+
+ADD . /app
+WORKDIR /app
+
+ENV NODE_ENV production
+
+ENTRYPOINT ["/sbin/tini", "--"]
+CMD ["./node_modules/.bin/cross-env", "NODE_ENV=production", "node", "server.js"]
+
+PUSH {{ .ImageName }}:{{ .ImageTag }}

components/base/button.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import * as Constants from '~/style/constants';
+
+class Button extends React.Component {
+  render() {
+    return (
+      <span
+        onClick={this.props.onClick}
+        style={{
+          backgroundColor: Constants.colors.black,
+          color: 'rgb(255, 255, 255)',
+          height: '30px',
+          paddingLeft: '12px',
+          paddingRight: '12px',
+          borderRadius: '4px',
+          border: '1px solid transparent',
+          fontSize: '16px',
+          cursor: 'pointer',
+          display: 'inline-flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        {this.props.value}
+      </span>
+    );
+  }
+}
+
+export default Button;

components/base/code.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import Prism from 'prismjs';
+
+import * as Constants from '~/style/constants';
+
+/* global tippy */
+
+export class Code extends React.Component {
+  componentDidMount() {
+    this._runTippy();
+  }
+
+  componentDidUpdate() {
+    this._runTippy();
+  }
+
+  _runTippy() {
+    if (process.browser) {
+      tippy('.code-annotation', {
+        theme: 'expo',
+        placement: 'top',
+        arrow: true,
+        arrowType: 'round',
+        interactive: true,
+        distance: 20,
+      });
+    }
+  }
+
+  _escapeHtml(text) {
+    return text.replace(/"/g, '"');
+  }
+
+  _replaceCommentsWithAnnotations(value) {
+    return value
+      .replace(/<span class="token comment">\/\* @info (.*?)\*\/<\/span>\s*/g, (match, content) => {
+        return `<span class="code-annotation" title="${this._escapeHtml(content)}">`;
+      })
+      .replace(/<span class="token comment">\/\* @end \*\/<\/span>(\n *)?/g, '</span>');
+  }
+
+  render() {
+    let code = this.props.children;
+    let { lang } = this.props;
+    let html = code.toString();
+    if (lang && !Prism.languages[lang]) {
+      try {
+        require('prismjs/components/prism-' + lang + '.js');
+      } catch (e) {}
+    }
+    if (lang && Prism.languages[lang]) {
+      html = Prism.highlight(html, Prism.languages[lang]);
+      html = this._replaceCommentsWithAnnotations(html);
+    }
+
+    // Remove leading newline if it exists (because inside <pre> all whitespace is dislayed as is by the browser, and
+    // sometimes, Prism adds a newline before the code)
+    if (html.startsWith('\n')) {
+      html = html.replace('\n', '');
+    }
+
+    return (
+      <pre
+        style={{
+          border: '1px solid #eaeaea',
+          padding: '20px',
+          margin: '10px 0',
+          whiteSpace: 'pre',
+          overflow: 'auto',
+          width: '800px',
+          WebkitOverflowScrolling: 'touch',
+          backgroundColor: 'rgba(0, 1, 31, 0.03)',
+          lineHeight: '1.2rem',
+        }}>
+        <code dangerouslySetInnerHTML={{ __html: html }} />
+        <style jsx>
+          {`
+            code {
+              color: ${Constants.colors.black80};
+              font-family: ${Constants.fontFamilies.mono};
+              font-size: 13px;
+              line-height: 20px;
+              white-space: inherit;
+            }
+          `}
+        </style>
+        <style jsx global>
+          {`
+            /* Code annotation styles */
+            .code-annotation {
+              font-weight: 600;
+            }
+
+            .code-annotation:hover {
+              cursor: pointer;
+              opacity: 0.6;
+              animation: none;
+            }
+
+            .tippy-tooltip.expo-theme {
+              background-color: white;
+              color: black;
+              text-align: left;
+            }
+
+            .tippy-popper[x-placement^='top'] .tippy-tooltip.expo-theme .tippy-roundarrow {
+              fill: white;
+            }
+
+            .tippy-tooltip.expo-theme .tippy-content {
+              padding: 10px 5px;
+              line-height: 1.5em;
+              font-family: ${Constants.fonts.book};
+            }
+          `}
+        </style>
+      </pre>
+    );
+  }
+}
+
+export const InlineCode = ({ children }) => (
+  <code className="inline">
+    {children}
+    <style jsx global>
+      {`
+        code {
+          color: ${Constants.colors.black80};
+          font-family: ${Constants.fontFamilies.mono};
+          font-size: 0.9rem;
+          white-space: pre-wrap;
+          display: inline;
+          padding: 4px;
+          margin: 2px;
+          line-height: 20px;
+          max-width: 100%;
+        }
+
+        code.inline {
+          word-wrap: break-word;
+          background-color: ${Constants.colors.blackRussian};
+          vertical-align: middle;
+          overflow-x: scroll;
+        }
+
+        code::before {
+          content: '';
+          /* content: '\`'; */
+        }
+
+        code::after {
+          /* content: '\`'; */
+          content: '';
+        }
+      `}
+    </style>
+  </code>
+);

components/base/generate-slug.js

@@ -0,0 +1,20 @@
+const slugs = require(`github-slugger`)();
+slugs.reset();
+
+const generateSlug = node => {
+  return slugs.slug(toString(node));
+};
+
+const toString = node => {
+  if (typeof node === 'string') {
+    return node;
+  } else if (Array.isArray(node)) {
+    return node.map(toString).join('');
+  } else if (node.props.children) {
+    return toString(node.props.children);
+  } else {
+    return '';
+  }
+};
+
+export default generateSlug;