Fixed demo links to enable crawlers.

Author: Hyperkid123

packages/react-renderer-demo/src/app/.eslintrc

@@ -11,7 +11,7 @@
     },
     "settings": {
       "react": {
-        "version": 16.6
+        "version": "16.6"
       }
     },
     "globals": {

packages/react-renderer-demo/src/app/package.json

@@ -10,7 +10,8 @@
     "start": "next start",
     "vendor": "webpack --env vendor --config ./config/webpack.config.js --progress",
     "deploy": "firebase deploy --only functions",
-    "analyze": "ANALYZE=true next build"
+    "analyze": "ANALYZE=true next build",
+    "lint": "eslint ./src"
   },
   "repository": {
     "type": "git",

packages/react-renderer-demo/src/app/src/components/layout.js

@@ -209,14 +209,16 @@ const Layout = ({ children }) => {
               [classes.contentShift]: open,
               [classes.mainGradient]: router.pathname === '/',
               [classes.mainGradientShift]: router.pathname === '/' && open,
-              'DocSearch-content': true,
             }) }
           >
             <div className={ classes.contentWrapper }>
-              <div style={{
-                paddingRight: 32,
-                paddingLeft: 32,
-              }}>
+              <div
+                className="DocSearch-content"
+                style={{
+                  paddingRight: 32,
+                  paddingLeft: 32,
+
+                }}>
                 { children }
               </div>
               <ConnectedLinks />

packages/react-renderer-demo/src/app/src/components/mdx/mdx-components.js

@@ -13,6 +13,7 @@ import Paper from '@material-ui/core/Paper';
 import { headerToId } from '../../helpers/list-of-contents';
 import ShareButton from './share-button';
 import { makeStyles } from '@material-ui/core/styles';
+import { useRouter } from 'next/router';
 
 import dynamic from 'next/dynamic';
 const CodeEditor = dynamic(import('../code-editor'), {
@@ -21,13 +22,14 @@ const CodeEditor = dynamic(import('../code-editor'), {
 
 const useHeadingStyles = makeStyles(() => ({
   anchorOffset: {
+    textDecoration: 'none',
+    color: 'inherit',
+    paddingTop: 92, // compensate for fixed header size and spacing
+    marginTop: -92,  // compensate for fixed header size and spacing
     position: 'relative',
-    top: -92, // compensate for fixed header size and spacing
-    display: 'block',
+    display: 'inline-block',
   },
   heading: {
-    marginBottom: 10,
-    marginTop: 10,
     '& button': {
       visibility: 'hidden',
     },
@@ -38,21 +40,22 @@ const useHeadingStyles = makeStyles(() => ({
 }));
 
 const Heading = ({ level, children, variant, component, ...rest }) => {
+  const router = useRouter();
   const classes = useHeadingStyles();
   const id = headerToId(children);
+  const path = `${router.pathname}#${id}`;
   return (
-    <React.Fragment>
-      <a id={ id } className={ classes.anchorOffset } data-mdlink="md-heading" />
+    <a id={ id } href={ path } className={ classes.anchorOffset } data-mdlink="md-heading">
       <Typography
         id={ `heading-${id}` }
         className={ classes.heading }
         variant={ `h${level}` }
         component={ component }
       >
         { children }
-        <ShareButton text={ id }/>
+        <ShareButton path={ path }/>
       </Typography>
-    </React.Fragment>
+    </a>
   );
 };
 

packages/react-renderer-demo/src/app/src/components/mdx/share-button.js

@@ -3,30 +3,25 @@ import PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import SvgIcon from '@material-ui/core/SvgIcon';
-import { useRouter } from 'next/router';
 
 const HashTagSvg = (props) => (
   <path width="16px" height="16px" { ...props } d="M46.9 13.9c-.5-.6-1.2-.94-2.07-.94h-6.67l1.86-8.98c.17-.85 0-1.7-.52-2.3-.48-.6-1.2-.94-2.07-.94-1.6 0-3.2 1.27-3.54 2.93l-.5 2.42c0 .07-.07.13-.07.2l-1.37 6.62H20.7l1.88-8.96c.16-.85 0-1.7-.53-2.3-.48-.6-1.2-.94-2.07-.94-1.65 0-3.2 1.27-3.56 2.93l-.52 2.58v.08l-1.37 6.64H7.3c-1.67 0-3.22 1.3-3.58 2.96-.16.86 0 1.7.52 2.3.48.6 1.2.93 2.07.93h6.97l-2 9.65H4c-1.67 0-3.22 1.27-3.56 2.94-.2.8 0 1.67.5 2.27.5.6 1.2.93 2.08.93H10l-1.84 9.05c-.2.84 0 1.67.52 2.3.5.6 1.25.92 2.08.92 1.66 0 3.2-1.3 3.55-2.94l1.94-9.33h11.22l-1.87 9.05c-.15.84.03 1.67.53 2.3.5.6 1.2.92 2.07.92 1.65 0 3.22-1.3 3.56-2.94l1.9-9.33h7c1.6 0 3.2-1.28 3.53-2.93.2-.87 0-1.7-.52-2.3-.48-.62-1.2-.96-2.05-.96h-6.7l2.02-9.65h6.93c1.67 0 3.22-1.27 3.56-2.92.2-.85 0-1.7-.5-2.3l-.04.03zM17.53 28.77l1.95-9.65H30.7l-1.97 9.66H17.5h.03z"></path>
 );
 
-const ShareButton = ({ text }) => {
-  const router = useRouter();
-  const path = `${router.pathname}#${text}`;
-  return (
-    <CopyToClipboard text={ `${router.pathname}#${text}` }>
-      <a href={ path }>
-        <IconButton size="medium">
-          <SvgIcon fontSize="small" viewBox="0 0 48 48">
-            <HashTagSvg />
-          </SvgIcon>
-        </IconButton>
-      </a>
-    </CopyToClipboard>
-  );
-};
+const ShareButton = ({ path }) => (
+  <CopyToClipboard text={ path }>
+    <a href={ path }>
+      <IconButton size="medium">
+        <SvgIcon fontSize="small" viewBox="0 0 48 48">
+          <HashTagSvg />
+        </SvgIcon>
+      </IconButton>
+    </a>
+  </CopyToClipboard>
+);
 
 ShareButton.propTypes = {
-  text: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
 };
 
 export default ShareButton;

packages/react-renderer-demo/src/app/src/helpers/list-of-contents.js

@@ -84,28 +84,11 @@ const useStyles = makeStyles(theme => ({
     paddingLeft: 16,
     paddingRight: 16,
   },
-  listItemActive: {
-    position: 'relative',
-    background: theme.palette.common.white,
-    '&::before': {
-      position: 'absolute',
-      left: -0,
-      display: 'block',
-      content: '""',
-      width: 2,
-      height: '100%',
-      background: theme.palette.grey[700],
-    },
-  },
-  contentHeader: {
-    paddingLeft: 16,
-    paddingRight: 16,
-  },
 }));
 
 const scrollListener = (setActive) => {
-  const min = 120;
-  const max = 150;
+  const min = -10;
+  const max = 20;
   const elem = Array.from(document.querySelectorAll('[data-mdlink]'))
   .find(elem => {
     const { top } = elem.getBoundingClientRect();