feat(demo): visx rebrand, move to github pages

packages/visx-demo/next.config.js

@@ -1,27 +1,31 @@
 /* eslint-disable no-undef */
-const path = require('path');
+const path = require("path");
+
+const isProd = process.env.NODE_ENV === "production";
 
 module.exports = {
+  basePath: isProd ? "/visx" : "",
+  assetPrefix: isProd ? "/visx/" : "",
   typescript: {
     // enable rendering when there are type errors
     ignoreDevErrors: true,
     ignoreBuildErrors: true,
   },
-  webpack: config => {
+  webpack: (config) => {
     config.module.rules.push({
       test: /\.tsx?$/,
       use: [
         {
-          loader: 'react-docgen-typescript-loader',
+          loader: "react-docgen-typescript-loader",
           options: {
             // display types from outside a component's source even tho
             // we hide these with the propFilter below, if we don't do
             // this the component's own props become any
-            tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
+            tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
             // filter props like React.HTMLProps/React.SVGProps
             propFilter(prop) {
               if (prop.parent) {
-                return !prop.parent.fileName.includes('node_modules');
+                return !prop.parent.fileName.includes("node_modules");
               }
               return true;
             },

packages/visx-demo/package.json

@@ -7,7 +7,8 @@
     "dev": "next",
     "build": "next build && next export",
     "start": "next start",
-    "preview": "yarn build && cd ./out && npx serve"
+    "preview": "yarn build && cd ./out && npx serve",
+    "deploy": "rm -rf out && yarn build && cd out && touch .nojekyll && git init && git add . && git commit -m \"Deploy commit\" && git remote add origin git@github.com:airbnb/visx.git && git push -f origin master:gh-pages"
   },
   "keywords": [
     "visx",
@@ -77,14 +78,13 @@
     "d3-shape": "^1.0.6",
     "d3-time-format": "^2.0.5",
     "markdown-loader": "^5.1.0",
-    "next": "9.4.4",
+    "next": "9.5.3",
     "nprogress": "^0.2.0",
     "prismjs": "^1.19.0",
     "raw-loader": "^4.0.0",
     "react": "^16.9.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "^16.9.0",
-    "react-ga": "^2.1.2",
     "react-github-button": "^0.1.10",
     "react-markdown": "^4.3.1",
     "react-spring": "^8.0.27",

packages/visx-demo/public/static/prism/prism-line-numbers.css

@@ -190,7 +190,7 @@ pre.line-numbers > code {
   pointer-events: none;
   top: 0;
   font-size: 100%;
-  left: -0.8em;
+  left: -0.1em;
   width: 2em; /* works for line-numbers below 1000 lines */
   letter-spacing: -1px;
 

packages/visx-demo/src/components/ApiTable.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import Markdown from 'react-markdown/with-html';
 import { DocGenInfo, PropInfo } from '../types';
+import { toExportName } from './util/format';
 
 type Props = {
   docgenInfo: DocGenInfo;
@@ -11,7 +12,6 @@ const alphaSort = (a: PropInfo, b: PropInfo) => a.name.localeCompare(b.name);
 /** Renders a list of props for the passed docgenInfo */
 export default function ApiTable({ docgenInfo }: Props) {
   const { displayName = '' } = docgenInfo;
-  const isComponent = displayName && displayName[0].toLowerCase() !== displayName[0];
   const anchorId = displayName;
 
   // required first, then abc order
@@ -33,27 +33,29 @@ export default function ApiTable({ docgenInfo }: Props) {
   return (
     <div className="api">
       <h3>
-        <a id={anchorId} href={`#${anchorId}`}>
+        <a id={anchorId} href={`#${anchorId}`} className="export-name-anchor">
           #
         </a>
-        {isComponent && <>&lt;</>}
-        {displayName}
-        {isComponent && <>&nbsp;/&gt;</>}
+        {toExportName(displayName)}
       </h3>
       {props.map(prop => {
         const id = `${displayName}_${prop.name}`;
         return (
           <div key={prop.name} className="prop">
             <div className="title">
               <span className="name">
-                <a id={id} href={`#${id}`}>
+                <a id={id} href={`#${id}`} className="api-anchor">
                   #
                 </a>{' '}
-                <em>{displayName}</em>.<strong>{prop.name}</strong>
+                <strong>{prop.name}</strong>
               </span>
-              {prop.type && <code>{prop.type.name}</code>}
+              {prop.type && (
+                <span className="typedef">
+                  <code>{prop.type.name}</code>
+                </span>
+              )}
               <span className={prop.required ? 'required' : 'optional'}>
-                {prop.required ? 'required' : 'optional'}
+                {prop.required ? 'required' : ''}
               </span>{' '}
             </div>
             <div className="description">
@@ -69,23 +71,54 @@ export default function ApiTable({ docgenInfo }: Props) {
         );
       })}
       <style jsx>{`
-        h3 + .prop {
-          border-top: 1px solid #eaeaea;
+        h3 {
+          margin-bottom: 0.5rem;
+          margin-left: -29px;
+          font-weight: 400;
         }
         .prop:last-child {
           border-bottom: 1px solid #eaeaea;
         }
         .prop {
-          padding: 1em 0.5em 1em 0;
+          padding: 0.5em 0.5em 0.5em 0;
           line-height: 1.2em;
           vertical-align: middle;
         }
-        .title > :not(:last-child) {
+        .export-name-anchor,
+        .api-anchor {
+          opacity: 0;
+          scroll-margin-top: 88px;
+        }
+        .export-name-anchor {
+          display: inline-block;
           margin-right: 12px;
         }
+        .title:hover .api-anchor,
+        h3:hover .export-name-anchor {
+          opacity: 1;
+        }
+        .title {
+          font-size: 18px;
+          margin-left: -16px;
+        }
+        .title > :not(:last-child) {
+          margin-right: 6px;
+        }
+        .description {
+          max-width: 720px;
+        }
         .description > :global(p) {
-          font-size: 15px;
-          margin: 0;
+          font-size: 18px;
+          margin: 0.25rem 0 0 0;
+        }
+        .typedef code {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu',
+            'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+          background-color: transparent;
+          font-weight: 400;
+          color: grey;
+          padding: 0;
+          font-size: 16px;
         }
         .required {
           color: #fc2e1c;