Path Aliasing

- add babel-plugin-module-resolver pkg
- add path aliasing via babelrc
- update all components to use path aliasing

docs/.babelrc

@@ -1,4 +1,20 @@
 {
   "presets": ["next/babel"],
-  "plugins": [["styled-components", { "ssr": true }]]
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["./src"],
+        "alias": {
+          "@components": "./components",
+          "@page-content": "./page-content",
+          "@assets": "./assets",
+          "@public": "./public",
+          "@pages": "./pages",
+          "@theme": "./theme"
+        }
+      }
+    ],
+    ["styled-components", { "ssr": true }]
+  ]
 }

docs/components/Global/index.tsx

@@ -0,0 +1,11 @@
+export { Brand } from './Brand';
+export { Footer } from './Footer';
+export { Header } from './Header';
+export { NavTop } from './NavTop';
+export { Tagline } from './Tagline';
+export { Container } from './Container';
+export { GlobalStyles } from './GlobalStyles';
+export { HR } from './HR';
+export { HTMLhead } from './HTMLhead';
+export { Layout } from './Layout';
+export { Spinner, DottedSpinner } from './Loader';

docs/components/Nav/index.tsx

@@ -1 +1,2 @@
 export { DesktopNav } from './Desktop/DesktopNav';
+export { MobileNav } from './Mobile/MobileNav';

docs/components/index.tsx

@@ -0,0 +1,29 @@
+export { AnchorLink } from './AnchorLink';
+export { APIheading } from './APIheading';
+export { FlexTable } from './FlexTable';
+export { List } from './List';
+export { Section } from './Section';
+export { SectionTitle } from './SectionTitle';
+export * from './Typography';
+export { Param, Params, ParamsDescription, ParamsTable, Syntax } from './Code';
+
+export { Content, Doc, Title, ArticleSubSectionTitle } from './Article';
+export type { ContentProps, DocProps, TitleProps } from './Article';
+
+export {
+  Brand,
+  Footer,
+  Header,
+  NavTop,
+  Tagline,
+  Container,
+  GlobalStyles,
+  HR,
+  HTMLhead,
+  Layout,
+  Spinner,
+  DottedSpinner
+} from './Global';
+
+export { Logo } from './Logo';
+export { DesktopNav, MobileNav } from './Nav';

docs/package.json

@@ -31,6 +31,7 @@
     "@types/react": "^17.0.0",
     "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-styled-components": "^1.12.0",
     "typescript": "^4.1.3"
   },

docs/page-content/Block/Block.tsx

@@ -1,10 +1,17 @@
-import { Paragraph, Strong, H4 } from '../../components/Typography';
-import { Syntax, Param, ParamsTable } from '../../components/Code';
-import { HR } from '../../components/Global/HR';
+import {
+  Paragraph,
+  Strong,
+  H4,
+  HR,
+  Syntax,
+  Param,
+  ParamsTable,
+  Doc,
+  APIheading,
+  FlexTable
+} from '@components';
+
 import { BlockBaseUsage } from './examples';
-import { Doc } from '../../components/Article';
-import { APIheading } from '../../components/APIheading';
-import { FlexTable } from '../../components/FlexTable';
 
 const createBlocksBaseCells = [
   {