docs(vx-marker, vx-network): update to docgen

packages/vx-demo/src/components/PackageList.tsx

@@ -43,7 +43,7 @@ export default function PackageList({
               {!compact && <p>Keys for reading your visual encodings</p>}
             </li>
             <li className={cx(emphasizePackage === 'marker' && 'emphasize')}>
-              <a href="/static/docs/vx-marker.html">@vx/marker</a>
+              <a href="/docs/marker">@vx/marker</a>
               {!compact && <p>Annotation lines with text</p>}
             </li>
             <li className={cx(emphasizePackage === 'scale' && 'emphasize')}>
@@ -84,7 +84,7 @@ export default function PackageList({
               {!compact && <p>Multiple layouts for hierarchical or nested data</p>}
             </li>
             <li className={cx(emphasizePackage === 'network' && 'emphasize')}>
-              <a href="/static/docs/vx-network.html">@vx/network</a>
+              <a href="/docs/network">@vx/network</a>
               {!compact && <p>Visualize nodes and links between them</p>}
             </li>
             <li className={cx(emphasizePackage === 'stats' && 'emphasize')}>

packages/vx-demo/src/pages/docs/Marker.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import MarkerReadme from '!!raw-loader!../../../../vx-marker/Readme.md';
+import Marker from '../../../../vx-marker/src/markers/Marker';
+import DocPage from '../../components/DocPage';
+import { DocGenInfo } from '../../types';
+
+const components = [
+  // @ts-ignore
+  Marker.__docgenInfo,
+] as DocGenInfo[];
+
+export default () => <DocPage components={components} readme={MarkerReadme} vxPackage="marker" />;

packages/vx-demo/src/pages/docs/Network.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import NetworkReadme from '!!raw-loader!../../../../vx-network/Readme.md';
+import Graph from '../../../../vx-network/src/Graph';
+import Nodes from '../../../../vx-network/src/Nodes';
+import Links from '../../../../vx-network/src/Links';
+import DefaultNode from '../../../../vx-network/src/DefaultNode';
+import DefaultLink from '../../../../vx-network/src/DefaultLink';
+import DocPage from '../../components/DocPage';
+import { DocGenInfo } from '../../types';
+
+const components = [Graph, Nodes, Links, DefaultNode, DefaultLink].map(
+  c =>
+    // @ts-ignore
+    c.__docgenInfo,
+) as DocGenInfo[];
+
+export default () => <DocPage components={components} readme={NetworkReadme} vxPackage="network" />;

packages/vx-marker/Readme.md

@@ -4,7 +4,8 @@
   <img src="https://img.shields.io/npm/dm/@vx/marker.svg?style=flat-square" />
 </a>
 
-A Marker is a line with a piece of text attached to it. It's great for highlighting locations in your graph.
+A Marker is a line with a piece of text attached to it. It's great for highlighting locations in
+your graph.
 
 ## Example
 
@@ -22,60 +23,8 @@ A Marker is a line with a piece of text attached to it. It's great for highlight
 />
 ```
 
-
 ## Installation
 
 ```
 npm install --save @vx/marker
 ```
-
-
-## Components
-
-
-
-  - [Marker](#marker-)
-
-## API
-
-
-
-<h3 id="marker-">&lt;Marker /&gt;</h3>
-
-
-
-<a id="#Marker__className" name="Marker__className" href="#Marker__className">#</a> *Marker*.**className**&lt;string&gt;  
-
-<a id="#Marker__from" name="Marker__from" href="#Marker__from">#</a> *Marker*.**from**&lt;object&gt;  
-
-<a id="#Marker__label" name="Marker__label" href="#Marker__label">#</a> *Marker*.**label**&lt;union(string|func)&gt;  
-
-<a id="#Marker__labelAnchor" name="Marker__labelAnchor" href="#Marker__labelAnchor">#</a> *Marker*.**labelAnchor**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>'left'</td></td></table>
-
-<a id="#Marker__labelDx" name="Marker__labelDx" href="#Marker__labelDx">#</a> *Marker*.**labelDx**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
-
-<a id="#Marker__labelDy" name="Marker__labelDy" href="#Marker__labelDy">#</a> *Marker*.**labelDy**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
-
-<a id="#Marker__labelFill" name="Marker__labelFill" href="#Marker__labelFill">#</a> *Marker*.**labelFill**&lt;string&gt;  
-
-<a id="#Marker__labelFontSize" name="Marker__labelFontSize" href="#Marker__labelFontSize">#</a> *Marker*.**labelFontSize**&lt;union(string|number)&gt;  <table><tr><td><strong>Default</strong></td><td>10</td></td></table>
-
-<a id="#Marker__labelPaintOrder" name="Marker__labelPaintOrder" href="#Marker__labelPaintOrder">#</a> *Marker*.**labelPaintOrder**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>'stroke'</td></td></table>
-
-<a id="#Marker__labelStroke" name="Marker__labelStroke" href="#Marker__labelStroke">#</a> *Marker*.**labelStroke**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>'white'</td></td></table>
-
-<a id="#Marker__labelStrokeWidth" name="Marker__labelStrokeWidth" href="#Marker__labelStrokeWidth">#</a> *Marker*.**labelStrokeWidth**&lt;union(string|number)&gt;  <table><tr><td><strong>Default</strong></td><td>3</td></td></table>
-
-<a id="#Marker__left" name="Marker__left" href="#Marker__left">#</a> *Marker*.**left**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
-
-<a id="#Marker__stroke" name="Marker__stroke" href="#Marker__stroke">#</a> *Marker*.**stroke**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>'magenta'</td></td></table>
-
-<a id="#Marker__strokeDasharray" name="Marker__strokeDasharray" href="#Marker__strokeDasharray">#</a> *Marker*.**strokeDasharray**&lt;string&gt;  
-
-<a id="#Marker__strokeWidth" name="Marker__strokeWidth" href="#Marker__strokeWidth">#</a> *Marker*.**strokeWidth**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>2</td></td></table>
-
-<a id="#Marker__to" name="Marker__to" href="#Marker__to">#</a> *Marker*.**to**&lt;object&gt;  
-
-<a id="#Marker__top" name="Marker__top" href="#Marker__top">#</a> *Marker*.**top**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
-
-<a id="#Marker__transform" name="Marker__transform" href="#Marker__transform">#</a> *Marker*.**transform**&lt;string&gt;