Rewrite doc images links for Github & Web (visgl#197)

apercu · gnavvy · commit 1dd2b3754e0b · 2016-11-09T14:14:16.000-08:00
Related to visgl#195.
diff --git a/demo/src/javascripts/components/markdown-page.js b/demo/src/javascripts/components/markdown-page.js
@@ -22,6 +22,11 @@ const urlRewrites = {
   '/docs/64-bits.md': '#/documentation/advanced-topics/64-layers'
 };
 
+/**
+ * Same as above, but for image src's
+ */
+const imageRewrites = {};
+
 export default class MarkdownPage extends Component {
 
   render() {
@@ -43,9 +48,19 @@ export default class MarkdownPage extends Component {
       return `<a href=${to} title=${title}>${text}</a>`;
     };
 
+    renderer.image = (href, title, text) => {
+      const src = imageRewrites[href] || href;
+      return `<img src=${src} title=${title} alt=${text} />`;
+    };
+
+    // Since some images are embedded as html, it won't be processed by
+    // the renderer image override. So hard replace it globally.
+    const __html = marked(content, {renderer})
+      .replace(/\/demo\/src\/static\/images/g, 'images');
+
     return (
       <div className="markdown">
-        <div className="markdown-body" dangerouslySetInnerHTML={{__html: marked(content, {renderer})}} />
+        <div className="markdown-body" dangerouslySetInnerHTML={{__html}} />
       </div>
     );
   }
diff --git a/docs/layers/arc-layer-64.md b/docs/layers/arc-layer-64.md
@@ -4,7 +4,7 @@ The Arc Layer takes in paired latitude and longitude coordinated points and
 render them as arcs that links the starting and ending points.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-arc.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-arc.jpg" />
 </div>
 
 Check out the [64 bit about page](/docs/64-bits.md) for more info.
diff --git a/docs/layers/arc-layer.md b/docs/layers/arc-layer.md
@@ -4,7 +4,7 @@ The Arc Layer takes in paired latitude and longitude coordinated points and
 render them as arcs that links the starting and ending points.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-arc.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-arc.jpg" />
 </div>
 
     import {ArcLayer} from 'deck.gl';
diff --git a/docs/layers/choropleth-layer-64.md b/docs/layers/choropleth-layer-64.md
@@ -4,7 +4,7 @@ The Choropleth Layer takes in [GeoJson](http://geojson.org/) formatted data and
 renders it as interactive choropleths.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-choropleth.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-choropleth.jpg" />
 </div>
 
 Check out the [64 bit about page](/docs/64-bits.md) for more info.
diff --git a/docs/layers/choropleth-layer.md b/docs/layers/choropleth-layer.md
@@ -4,7 +4,7 @@ The Choropleth Layer takes in [GeoJson](http://geojson.org/) formatted data and
 renders it as interactive choropleths.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-choropleth.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-choropleth.jpg" />
 </div>
 
     import {ChoroplethLayer} from 'deck.gl';
diff --git a/docs/layers/line-layer-64.md b/docs/layers/line-layer-64.md
@@ -4,7 +4,7 @@ The Line Layer takes in paired latitude and longitude coordinated points and
 render them as arcs that links the starting and ending points.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-line.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-line.jpg" />
 </div>
 
 Check out the [64 bit about page](/docs/64-bits.md) for more info.
diff --git a/docs/layers/line-layer.md b/docs/layers/line-layer.md
@@ -4,7 +4,7 @@ The Line Layer takes in paired latitude and longitude coordinated points and
 render them as arcs that links the starting and ending points.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-line.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-line.jpg" />
 </div>
 
     import {LineLayer} from 'deck.gl';
diff --git a/docs/layers/scatterplot-layer-64.md b/docs/layers/scatterplot-layer-64.md
@@ -4,7 +4,7 @@ The Scatterplot Layer takes in paride latitude and longitude coordinated
 points and render them as circles with a certain radius.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-scatterplot.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-scatterplot.jpg" />
 </div>
 
 Check out the [64 bit about page](/docs/64-bits.md) for more info.
diff --git a/docs/layers/scatterplot-layer.md b/docs/layers/scatterplot-layer.md
@@ -4,7 +4,7 @@ The Scatterplot Layer takes in paired latitude and longitude coordinated
 points and renders them as circles with a certain radius.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-scatterplot.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-scatterplot.jpg" />
 </div>
 
     import {ScatterplotLayer} from 'deck.gl';
diff --git a/docs/layers/screen-grid-layer.md b/docs/layers/screen-grid-layer.md
@@ -10,7 +10,7 @@ This means that this layer is best used with small data set, however the
 visuals when used with the right data set can be quite effective.
 
 <div align="center">
-  <img height="300" src="images/demo-thumb-screengrid.jpg" />
+  <img height="300" src="/demo/src/static/images/demo-thumb-screengrid.jpg" />
 </div>
 
     import {ScreenGridLayer} from 'deck.gl';
