[docs] Link between sections

mui · Apr 2, 2017 · d6d09bc · d6d09bc
1 parent 567a35e
commit d6d09bc
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -12,7 +12,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="../build/dll.bundle.js"></script>
-    <script src="build/bundle.js"></script>
+    <script src="/build/dll.bundle.js"></script>
+    <script src="/build/bundle.js"></script>
   </body>
 </html>
diff --git a/docs/src/components/AppRouter.js b/docs/src/components/AppRouter.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import {
   applyRouterMiddleware,
-  hashHistory,
+  browserHistory,
   Router,
   Route,
   IndexRoute,
@@ -20,7 +20,7 @@ import { componentAPIs, requireMarkdown, demos, requireDemo } from 'docs/src/com
 export default function AppRouter() {
   return (
     <Router
-      history={hashHistory}
+      history={browserHistory}
       render={applyRouterMiddleware(useScroll())}
     >
       <Route title="Material UI" path="/" component={AppFrame}>

diff --git a/docs/src/components/MarkdownElement.js b/docs/src/components/MarkdownElement.js
@@ -7,6 +7,22 @@ import marked from 'marked';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import prism from 'docs/src/utils/prism';
 
+const renderer = new marked.Renderer();
+
+renderer.heading = (text, level) => {
+  const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
+
+  return `
+    <h${level}>
+      <a class="anchor-link" id="${escapedText}"></a>${
+      text
+      }<a class="anchor-link-style" href="#${escapedText}">${
+        '#'
+      }</a>
+    </h${level}>
+  `;
+};
+
 marked.setOptions({
   gfm: true,
   tables: true,
@@ -18,13 +34,31 @@ marked.setOptions({
   highlight(code) {
     return prism.highlight(code, prism.languages.jsx);
   },
+  renderer,
+});
+
+const anchorLinkStyle = (theme) => ({
+  '& .anchor-link-style': {
+    display: 'none',
+  },
+  '&:hover .anchor-link-style': {
+    display: 'inline',
+    fontSize: '0.8em',
+    lineHeight: '1',
+    paddingLeft: theme.spacing.unit,
+    color: theme.palette.text.hint,
+  },
 });
 
 const styleSheet = createStyleSheet('MarkdownElement', (theme) => ({
   root: {
     marginTop: theme.spacing.unit * 2,
     marginBottom: theme.spacing.unit * 2,
     padding: '0 10px',
+    '& .anchor-link': {
+      marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
+      position: 'absolute',
+    },
     '& pre': {
       margin: '25px 0',
       padding: '12px 18px',
@@ -44,16 +78,19 @@ const styleSheet = createStyleSheet('MarkdownElement', (theme) => ({
       ...theme.typography.display2,
       color: theme.palette.text.secondary,
       margin: '0.7em 0',
+      ...anchorLinkStyle(theme),
     },
     '& h2': {
       ...theme.typography.display1,
       color: theme.palette.text.secondary,
       margin: '1em 0 0.7em',
+      ...anchorLinkStyle(theme),
     },
     '& h3': {
       ...theme.typography.headline,
       color: theme.palette.text.secondary,
       margin: '1em 0 0.7em',
+      ...anchorLinkStyle(theme),
     },
     '& p, & ul, & ol': {
       lineHeight: 1.6,

diff --git a/docs/webpack.prod.config.js b/docs/webpack.prod.config.js
@@ -15,7 +15,7 @@ module.exports = Object.assign({}, webpackBaseConfig, {
   output: {
     path: path.join(__dirname, 'build'),
     filename: 'bundle.js',
-    publicPath: 'build/',
+    publicPath: '/build/',
   },
   module: {
     rules: [