[docs] Link between sections

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

Hide file tree

Showing 7 changed files with 53 additions and 16 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/src/pages/component-api/IconButton/IconButton.md b/docs/src/pages/component-api/IconButton/IconButton.md
@@ -5,7 +5,7 @@ IconButton
 <IconButton>account_circle</IconButton>
 ```
 
-You can refer to the [Icons](#/style/icons) section of the documentation
+You can refer to the [Icons](/style/icons) section of the documentation
 regarding the available icons.
 
 Props

diff --git a/docs/src/pages/getting-started/supported-components.md b/docs/src/pages/getting-started/supported-components.md
@@ -1,16 +1,16 @@
 # Supported Components
 
-The following is a list of Material Design components & features. 
-Those currently supported by Material-UI are **highlighted ✓**. 
+The following is a list of Material Design components & features.
+Those currently supported by Material-UI are **highlighted ✓**.
 
-While we strive to follow the guidelines where practical (applying 
-common sense where guidelines contadict - a more common occurence than 
-one might expect), we do not expect to support every component, or every 
-feature of every component, but rather to provide the building blocks to 
+While we strive to follow the guidelines where practical (applying
+common sense where guidelines contadict - a more common occurence than
+one might expect), we do not expect to support every component, or every
+feature of every component, but rather to provide the building blocks to
 allow developers to create compelling user interfaces and experiences.
 
-If you wish to add support for a component or feature not highlighted 
-here, please search for the relevant [GitHub Issue](https://github.com/callemall/material-ui/issues), or create a new one 
+If you wish to add support for a component or feature not highlighted
+here, please search for the relevant [GitHub Issue](https://github.com/callemall/material-ui/issues), or create a new one
 to discuss the approach before submitting a PR.
 
 - **[App Bar](https://material.io/guidelines/layout/structure.html#structure-app-bar) ✓**
@@ -20,7 +20,7 @@ to discuss the approach before submitting a PR.
   - Group avatar
 - **[Bottom navigation](https://www.google.com/design/spec/components/bottom-navigation.html) ✓**
 - [Bottom sheets](https://www.google.com/design/spec/components/bottom-sheets.html)
-- **[Buttons](http://www.material-ui.com/#/components/buttons) ✓**
+- **[Buttons](https://material.io/guidelines/components/buttons.html) ✓**
   - **[Flat & raised buttons](https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons) ✓**
   - [Toggle buttons](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
   - **[Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons) (Custom Checkbox) ✓**

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: [

diff --git a/src/IconButton/IconButton.js b/src/IconButton/IconButton.js
@@ -59,7 +59,7 @@ export const styleSheet = createStyleSheet('MuiIconButton', (theme) => {
  * <IconButton>account_circle</IconButton>
  * ```
  *
- * You can refer to the [Icons](#/style/icons) section of the documentation
+ * You can refer to the [Icons](/style/icons) section of the documentation
  * regarding the available icons.
  */
 export default function IconButton(props, context) {