feat(website): website changelogs (#70)

* feat(website): changelog compontent, add anchor changelog

* fix(website): ignore public website folder during lint, fix lint error

* feat(website): add html parser, adjust changelog query

* feat(website): add changelog to anchor and button

* feat(website): fix lint error

* feat(website): add website changelog page, nav item

* feat(website): remove unnecessary code

* fix(website): update filesystems, remove changelog comp

* fix(website): add box to anchor doc page fixes changelog margin

packages/paste-website/gatsby-config.js

@@ -25,6 +25,8 @@ module.exports = {
           '**/__snapshots__/**',
           '**/__fixtures__/**',
           '**/__tests__/**',
+          '**/paste-website/**/*',
+          '**/README.md',
         ],
       },
     },
@@ -33,6 +35,9 @@ module.exports = {
       options: {
         name: 'pages',
         path: `${__dirname}/src/pages`,
+        ignore: [
+          '**/components/**/*',
+        ],
       },
     },
     {
@@ -42,6 +47,20 @@ module.exports = {
         path: `${__dirname}/src/pages/components`,
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'websiteCore',
+        path: `${__dirname}/src/../`,
+        ignore: [
+          '**/.cache/**',
+          '**/public/**',
+          '**/src/**/*',
+          '**/static/**',
+          '**/types/**',
+        ],
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {
@@ -59,8 +78,11 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
+        extensions: [`.mdx`, `.md`],
         defaultLayouts: {
           default: require.resolve('./src/layouts/DefaultLayout.tsx'),
+          packages: require.resolve('./src/layouts/GenericLayout.tsx'),
+          websiteCore: require.resolve('./src/layouts/GenericLayout.tsx'),
         },
         gatsbyRemarkPlugins: [{
           resolve: `gatsby-remark-images`,

packages/paste-website/package.json

@@ -41,7 +41,7 @@
     "gatsby-plugin-typescript": "^2.1.0",
     "gatsby-source-filesystem": "^2.1.2",
     "gatsby-transformer-json": "^2.2.0",
-    "gatsby-transformer-remark": "^2.6.14",
+    "gatsby-transformer-remark": "^2.6.19",
     "gatsby-transformer-sharp": "^2.2.6",
     "lodash": "^4.17.15",
     "prism-react-renderer": "^0.1.7",

packages/paste-website/src/components/sidebar/Navigation.tsx

@@ -156,6 +156,9 @@ const Navigation: React.FC<NavigationProps> = () => {
         <SiteNavItem>
           <SiteNavAnchor to="/migrate">Migration Guide</SiteNavAnchor>
         </SiteNavItem>
+        <SiteNavItem>
+          <SiteNavAnchor to="/changelog">Changelog</SiteNavAnchor>
+        </SiteNavItem>
       </SiteNavList>
     </SiteNav>
   );

packages/paste-website/src/layouts/DefaultLayout.tsx

@@ -20,7 +20,7 @@ interface DefaultLayoutProps {
 
 const DefaultLayout: React.FC<DefaultLayoutProps> = ({children, pageContext, location}) => {
   const pageTitle = pageContext.frontmatter.title
-    ? `${pageContext.frontmatter.title} -  ${SiteMetaDefaults.TITLE}`
+    ? `${pageContext.frontmatter.title} - ${SiteMetaDefaults.TITLE}`
     : SiteMetaDefaults.TITLE;
   const pageDescription = pageContext.frontmatter.description || SiteMetaDefaults.DESCRIPTION;
   return (

packages/paste-website/src/layouts/GenericLayout.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {PasteMDXProvider} from '../components/paste-mdx-provider';
+
+interface ChangelogLayoutProps {
+  children?: React.ReactElement;
+}
+
+const ChangelogLayout: React.FC<ChangelogLayoutProps> = ({children}) => {
+  return <PasteMDXProvider>{children}</PasteMDXProvider>;
+};
+
+export default ChangelogLayout;

packages/paste-website/src/pages/changelog/index.mdx

@@ -0,0 +1,12 @@
+---
+title: Changelog
+---
+
+import Changelog from '../../../CHANGELOG.md';
+
+
+<content>
+
+<Changelog />
+
+</content>

packages/paste-website/src/pages/components/anchor/index.mdx

@@ -6,6 +6,8 @@ description: The anchor can be used to hyperlink to another URL. It accepts both
 
 import {graphql} from 'gatsby';
 import {Anchor} from '@twilio-paste/anchor';
+import {Box} from '@twilio-paste/box';
+import Changelog from '@twilio-paste/anchor/CHANGELOG.md';
 import {DoDont, Do, Dont} from '../../../components/DoDont';
 import {SidebarCategoryRoutes} from '../../../constants';
 import {P} from '../../../components/Typography.tsx';
@@ -147,4 +149,8 @@ import {Anchor} from '@twilio-paste/anchor';
 | onFocus?       | `(event: React.FocusEvent<HTMLElement>)` |                                                                                                          | null      |
 | onBlur?        | `(event: React.FocusEvent<HTMLElement>)` |                                                                                                          | null      |
 
+<Box marginTop={30}>
+  <Changelog />
+</Box>
+
 </content>

packages/paste-website/src/pages/components/button/index.mdx

@@ -7,6 +7,7 @@ description: Buttons are hot
 import {graphql} from 'gatsby';
 import {Box} from '@twilio-paste/box';
 import {Button} from '@twilio-paste/button';
+import Changelog from '@twilio-paste/button/CHANGELOG.md';
 import {DoDont, Do, Dont} from '../../../components/DoDont';
 import {Callout, CalloutTitle, CalloutText} from '../../../components/callout';
 import {SidebarCategoryRoutes} from '../../../constants';
@@ -413,4 +414,8 @@ import {Button} from '@twilio-paste/button';
 | aria-controls? | string                                   | A11y: For modals and menus                                                          | null      |
 | data-test?     | string                                   | To detect the element to run tests against.                                         | null      |
 
+<Box marginTop={30}>
+  <Changelog />
+</Box>
+
 </content>