feat: add shurcuts, table of contents and anchors

examples/basic/docs/Alert.mdx

@@ -3,8 +3,6 @@ menu: Components
 status: development
 ---
 
-import { Playground } from '@papyrum/ui-docs';
-
 # Alert
 
 Hello, I'm a mdx file!

examples/basic/docs/Button.mdx

@@ -3,18 +3,17 @@ menu: Components
 status: ready
 ---
 
-import { Props, Playground, Link } from '@papyrum/ui-docs';
 import Button from '../src/Button';
 
 # Button
 ___
 
-### Basic usage
+## Basic usage
 
 <Playground name="default">
   <Button>My Button</Button>
 </Playground>
 
-### Props
+## Props
 
 <Props of={Button} />

examples/basic/docs/Colors.mdx

@@ -1,5 +1,3 @@
-import { Palette } from '@papyrum/ui-docs';
-
 # Palette colors
 
 <Palette colors={[

examples/basic/docs/Fonts.mdx

@@ -2,8 +2,6 @@
 name: Fonts
 ---
 
-import { Fonts } from '@papyrum/ui-docs';
-
 # Fonts
 
 <Fonts

examples/basic/docs/Introduction.mdx

@@ -2,9 +2,9 @@
 route: /
 ---
 
-import { Components } from '@papyrum/ui-docs';
-
 # List components
 ___
 
-<Components />
+<Components />
+
+<Shortcut />

examples/basic/papyrum.config.js

@@ -9,4 +9,5 @@ export default {
     'Components'
   ],
   template: './static/index.html',
+  disableShortcuts: false
 };

examples/basic/src/Shortcut.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Shortcut = () => {
+  return <>Shortcut.jsx!</>
+};

packages/papyrum-cli/package.json

@@ -30,6 +30,7 @@
     "@mdx-js/react": "1.5.0",
     "@papyrum/core": "^1.5.0-alpha.0",
     "@papyrum/ui": "^1.5.0-alpha.0",
+    "@papyrum/ui-docs": "^1.5.0-alpha.0",
     "@sindresorhus/slugify": "0.9.1",
     "cpx": "1.5.0",
     "fs-extra": "8.1.0",

packages/papyrum-cli/src/components/Panel.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
 import { MDXProvider } from '@mdx-js/react';
 import { Route, Switch } from 'react-router-dom';
+import { Components, Playground, Fonts, Palette, Props, Link } from '@papyrum/ui-docs';
+
 import {
   components,
   contextDB,
@@ -12,7 +13,16 @@ import {
   BoxProvider,
 } from './styled';
 
-const providerComponents = {
+const shortcuts = {
+  Components,
+  Playground,
+  Fonts,
+  Palette,
+  Props,
+  Link
+};
+
+let providerComponents = {
   h1: components.H1,
   h2: components.H2,
   h3: components.H3,
@@ -38,12 +48,28 @@ const providerComponents = {
 
 const NoMatch = () => <CenterWrapper>Not Found</CenterWrapper>
 
-const Panel = ({ componentsAsync, isDark }) => {
+const Panel = ({ componentsAsync }) => {
   const { db } = (React.useContext as any)(contextDB);
 
+  let map = {
+    ...providerComponents
+  };
+
+  if(!db.config.disableShortcuts) {
+    map = {
+      ...map,
+      ...shortcuts
+    };
+  }
+
+  map = {
+    ...map,
+    ...db.components
+  };
+
   return (
     <div style={{overflowY: 'auto'}}>
-      <MDXProvider components={providerComponents}>
+      <MDXProvider components={map}>
         <React.Suspense fallback={<CenterWrapper>Loading...</CenterWrapper>}>
           <Switch>
             {Object.keys(db.plain).map((entry, i) => (
@@ -63,10 +89,4 @@ const Panel = ({ componentsAsync, isDark }) => {
   )
 };
 
-const mapStateToProps = (state) => ({
-  isDark: state.app.darkmode
-});
-
-const PanelHoc = connect(mapStateToProps)(Panel);
-
-export { PanelHoc as Panel };
+export { Panel };

packages/papyrum-cli/src/components/Root.tsx

@@ -6,9 +6,9 @@ import { Provider, store } from '@papyrum/ui';
 import { Helmet} from "react-helmet";
 import { Main } from './Main';
 
-const Root = ({ db, imports }) => {
+const Root = ({ db, imports, components }) => {
   return (
-    <Provider db={db}>
+    <Provider db={{...db, components}}>
       <Helmet>
         <link rel="shortcut icon" href={db.config.favicon} />
       </Helmet>

packages/papyrum-core/package.json

@@ -60,6 +60,8 @@
     "remark-emoji": "^2.0.2",
     "remark-frontmatter": "1.3.1",
     "remark-parse": "6.0.3",
+    "remark-slug": "5.1.2",
+    "remark-toc": "6.0.0",
     "strip-indent": "3.0.0",
     "style-loader": "0.23.1",
     "to-vfile": "5.0.2",

packages/papyrum-core/src/init.ts

@@ -133,13 +133,19 @@ export const init = (argv: any) => {
       return 0;
     };
 
-
     const imports = templateFn({
       planEntries: Object.values(planEntries).sort(compare)
     });
     fs.writeFileSync(pathClient + '/imports.js', imports);
-    fs.writeFileSync(path.resolve(pathClient, './root.js'), rootFile);
-    fs.writeFileSync(path.resolve(pathClient, './App.js'), appFile);
+
+    if(!fs.existsSync(path.resolve(pathClient, './root.js'))) {
+      fs.writeFileSync(path.resolve(pathClient, './root.js'), rootFile);
+    }
+
+    if(!fs.existsSync(path.resolve(pathClient, './App.js'))) {
+      fs.writeFileSync(path.resolve(pathClient, './App.js'), appFile);
+    }
+
     // create db
     let entries = createEntries(planEntries);
     let entriesOrder = orderChildrenEntries(entries);

packages/papyrum-core/src/webpack/loaders.ts

@@ -1,5 +1,7 @@
 import * as matter from 'remark-frontmatter';
 import { rehype } from '../utils/rehype';
+import * as slug from 'remark-slug';
+import * as toc from 'remark-toc';
 import * as emoji from 'remark-emoji';
 import { merge } from 'lodash/fp'
 import { loadFileConfig } from '../utils/fs';
@@ -53,7 +55,9 @@ export const mdx = argv => ({
           [
             matter, { type: 'yaml', marker: '-' }
           ],
-          emoji
+          emoji,
+          slug,
+          toc
         ],
         rehypePlugins: [rehype]
       }

packages/papyrum-ui-docs/src/components/Components/Components.tsx

@@ -36,7 +36,6 @@ const Components = ({ handleChangeRoute }) => {
               <TableRow key={key}>
                 <Name>
                   <NavLink exact to={route} onClick={() => {
-                    console.log('click', handleChangeRoute);
                     handleChangeRoute(route);
                   }}>
                     {name}

packages/papyrum-ui/src/components/A/styled.ts

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 export const styles = css`
   color: ${props => props.theme.colors.skyblue};
   text-decoration: none;
-  font-weight: 700;
+  font-weight: 400;
   font-size: 18px;
   &:hover {
     text-decoration: underline;
@@ -12,4 +12,7 @@ export const styles = css`
 
 export const A =styled.a`
   ${styles}
+  > code {
+    color: ${props => props.theme.colors.skyblue};
+  }
 `;

packages/papyrum-ui/src/components/H/styled.tsx

@@ -1,50 +1,88 @@
+import * as React from 'react';
 import styled, { css } from 'styled-components';
 
-const font = css`
+const Hash = styled.a`
+  color: ${props => props.theme.colors.skyblue};
+  text-decoration: none;
+  position: absolute;
+  left: -22px;
+  padding-right: 22px;
+  display: none;
+`;
 
+const styles = css`
+  position: relative;
   font-family: "Nunito Sans", sans-serif;
   color: ${props => props.theme.colors.darkGray};
+  font-weight: 700;
+  &:hover > ${Hash} {
+    display: block;
+  }
 `;
 
 export const H1 = styled.h1`
   margin: 40px 0 24px;
-  ${font}
+  ${styles}
   font-size: 48px;
-  font-weight: 700;
-  line-height: 65px;
+  > code {
+    font-size: 48px;
+  }
 `;
 
-export const H2 = styled.h2`
+export const H2Styled= styled.h2`
   margin: 40px 0 12px;
-  ${font}
-  font-size: 40px;
-  font-weight: 700;
+  ${styles}
+  font-size: 24px;
+  > code {
+    font-size: 24px;
+  }
 `;
 
-export const H3 = styled.h3`
+export const H3Styled = styled.h3`
   margin: 40px 0 12px;
-  ${font}
-  font-size: 32px;
-  font-weight: 700;
+  ${styles}
+  font-size: 20px;
+  > code {
+    font-size: 20px;
+  }
 `;
 
-export const H4 = styled.h4`
+export const H4Styled = styled.h4`
   margin: 40px 0 12px;
-  ${font}
-  font-size: 24px;
-  font-weight: 700;
+  ${styles}
+  font-size: 16px;
+  > code {
+    font-size: 16px;
+  }
 `;
 
-export const H5 = styled.h5`
+export const H5Styled = styled.h5`
   margin: 40px 0 12px;
-  ${font}
-  font-size: 20px;
-  font-weight: 700;
+  ${styles}
+  font-size: 14px;
+  > code {
+    font-size: 14px;
+  }
 `;
 
-export const H6 = styled.h6`
+export const H6Styled = styled.h6`
   margin: 40px 0 12px;
-  ${font}
-  font-size: 18px;
-  font-weight: 700;
+  ${styles}
+  font-size: 13.5px;
+  > code {
+    font-size: 12px;
+  }
 `;
+
+const buildH = (HStyled, { children, ...nextProps}) => (
+  <HStyled {...nextProps}>
+    <Hash href={`#${nextProps.id}`}>#</Hash>
+    {children}
+  </HStyled>
+);
+
+export const H2 = props => buildH(H2Styled, props);
+export const H3 = props => buildH(H3Styled, props);
+export const H4 = props => buildH(H4Styled, props);
+export const H5 = props => buildH(H5Styled, props);
+export const H6 = props => buildH(H6Styled, props);