feat(docs): edit on github (#1735)

documentation-site/components/layout.js

@@ -10,14 +10,38 @@ import * as React from 'react';
 import {styled} from 'baseui';
 import {MDXProvider} from '@mdx-js/tag';
 import {Block} from 'baseui/block';
+import {Button, KIND, SIZE} from 'baseui/button';
+
 import MarkdownElements from './markdown-elements';
 import Sidebar from './sidebar';
 import HeaderNavigation from './header-navigation';
 import Footer from './footer';
+import PencilIcon from './pencil-icon';
+import Routes from '../routes';
+
+const GH_URL =
+  'https://github.com/uber-web/baseui/blob/master/documentation-site/pages';
+
+function findByPath(o, path) {
+  if (!path) return;
+  if (o.itemId === path) {
+    return o;
+  }
+  var result, p;
+  for (p in o) {
+    if (o[p] && typeof o[p] === 'object') {
+      result = findByPath(o[p], path);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return result;
+}
 
 type PropsT = {
   children: React.Node,
-  path?: {},
+  path?: string,
   toggleTheme: () => void,
   toggleDirection: () => void,
 };
@@ -39,6 +63,7 @@ const SidebarWrapper = styled<{$isOpen: boolean}>(
 const ContentWrapper = styled<{$isSidebarOpen: boolean}>(
   'div',
   ({$theme, $isSidebarOpen}) => ({
+    position: 'relative',
     boxSizing: 'border-box',
     display: $isSidebarOpen ? 'none' : 'block',
     paddingLeft: $theme.sizing.scale800,
@@ -62,7 +87,23 @@ class Layout extends React.Component<PropsT, {sidebarOpen: boolean}> {
   }
   render() {
     const {sidebarOpen} = this.state;
-    const {path, toggleTheme, toggleDirection, children} = this.props;
+    const {toggleTheme, toggleDirection, children} = this.props;
+    let {path} = this.props;
+
+    if (path && path.endsWith('/')) {
+      path = path.slice(0, -1);
+    }
+
+    const route = findByPath(Routes, path);
+    let isGitHubEditDisabled;
+    let githubUrl;
+    if (!path || !route) {
+      isGitHubEditDisabled = true;
+    } else {
+      isGitHubEditDisabled = route.isGitHubEditDisabled;
+      githubUrl = `${GH_URL}${path}.mdx`;
+    }
+
     return (
       <React.Fragment>
         <HeaderNavigation
@@ -91,6 +132,25 @@ class Layout extends React.Component<PropsT, {sidebarOpen: boolean}> {
             role="main"
             $isSidebarOpen={sidebarOpen}
           >
+            {isGitHubEditDisabled ? null : (
+              <Block
+                display={['none', 'block']}
+                position="absolute"
+                right="0px"
+                top="-10px"
+              >
+                <Button
+                  startEnhancer={() => <PencilIcon size={16} color="#666666" />}
+                  $as="a"
+                  href={githubUrl}
+                  target="_blank"
+                  size={SIZE.compact}
+                  kind={KIND.tertiary}
+                >
+                  Edit this page
+                </Button>
+              </Block>
+            )}
             <MDXProvider components={MarkdownElements}>{children}</MDXProvider>
           </ContentWrapper>
         </Block>

documentation-site/components/pencil-icon.js

@@ -0,0 +1,31 @@
+/*
+Copyright (c) 2018-2019 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+type PropT = {
+  size: number,
+  color: string,
+};
+
+const PencilIcon = (props: PropT) => (
+  <svg
+    width={props.size}
+    height={props.size}
+    viewBox="0 0 20 18"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      fill={props.color}
+      d="M0,14.2 L0,18 L3.8,18 L14.8,6.9 L11,3.1 L0,14.2 L0,14.2 Z M17.7,4 C18.1,3.6 18.1,3 17.7,2.6 L15.4,0.3 C15,-0.1 14.4,-0.1 14,0.3 L12.2,2.1 L16,5.9 L17.7,4 L17.7,4 Z M9,16 L7,18 L20,18 L20,16 L9,16 L9,16 Z"
+    />
+  </svg>
+);
+
+export default PencilIcon;

documentation-site/helpers/polyfills.js

@@ -12,9 +12,11 @@ LICENSE file in the root directory of this source tree.
 import includes from 'core-js/library/fn/string/virtual/includes';
 import repeat from 'core-js/library/fn/string/virtual/repeat';
 import startsWith from 'core-js/library/fn/string/virtual/starts-with';
+import endsWith from 'core-js/library/fn/string/virtual/ends-with';
 import assign from 'core-js/library/fn/object/assign';
 
 String.prototype.includes = includes;
 String.prototype.repeat = repeat;
 String.prototype.startsWith = startsWith;
+String.prototype.endsWith = endsWith;
 Object.assign = assign;

documentation-site/pages/_app.js

@@ -16,6 +16,7 @@ import {
   LightTheme,
   LightThemeMove,
 } from 'baseui';
+import {getMediaQuery} from 'baseui/helpers/responsive-helpers';
 
 import App, {Container} from 'next/app';
 import {Provider as StyletronProvider} from 'styletron-react';
@@ -26,11 +27,43 @@ import {styletron, debug} from '../helpers/styletron';
 import {trackPageView} from '../helpers/ga';
 import DirectionContext from '../components/direction-context';
 
+const Breakpoints = {
+  small: 670,
+  medium: 920,
+  large: 1280,
+};
+
+const ResponsiveTheme = Object.keys(Breakpoints).reduce(
+  (acc, key) => {
+    acc.breakpoints[key] = Breakpoints[key];
+    acc.media[key] = getMediaQuery({
+      'min-width': `${Breakpoints[key]}px`,
+    });
+    return acc;
+  },
+  {
+    breakpoints: {},
+    media: {},
+  },
+);
+
 const themes = {
-  LightTheme,
-  LightThemeMove,
-  DarkTheme,
-  DarkThemeMove,
+  LightTheme: {
+    ...LightTheme,
+    ...ResponsiveTheme,
+  },
+  LightThemeMove: {
+    ...LightThemeMove,
+    ...ResponsiveTheme,
+  },
+  DarkTheme: {
+    ...DarkTheme,
+    ...ResponsiveTheme,
+  },
+  DarkThemeMove: {
+    ...DarkThemeMove,
+    ...ResponsiveTheme,
+  },
 };
 
 const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';

documentation-site/routes.js

@@ -15,6 +15,7 @@ const routes = [
       {
         title: 'Welcome',
         itemId: '/',
+        isGitHubEditDisabled: true,
       },
       {
         title: 'Installation',
@@ -311,6 +312,7 @@ const routes = [
   {
     title: 'Blog',
     itemId: '/blog',
+    isGitHubEditDisabled: true,
   },
 ];