feat: add link component and update theme config

packages/example/src/pages/components/markdown.mdx

@@ -81,11 +81,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 ## Links
 
-[I'm an inline-style link](https://www.google.com)
+[I'm a local link](/components/demo)
 
-[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
+[I'm a markdown link](https://www.carbondesignsystem.com)
 
-[I'm a relative reference to a repository file](../blob/master/LICENSE)
+[I'm a markdown link with title](https://www.carbondesignsystem.com "Carbon's Homepage")
 
 URLs and URLs in angle brackets will automatically get turned into links.
 http://www.example.com or <http://www.example.com> and sometimes
@@ -94,11 +94,11 @@ example.com (but not on Github, for example).
 #### Code
 
 ```
-[I'm an inline-style link](https://www.google.com)
+[I'm a markdown link](https://www.carbondesignsystem.com)
 
-[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
+[I'm a markdown link with title](https://www.carbondesignsystem.com "Google's Homepage")
 
-[I'm a relative reference to a repository file](../blob/master/LICENSE)
+[I'm a local link](/components/demo)
 
 URLs and URLs in angle brackets will automatically get turned into links.
 http://www.example.com or <http://www.example.com> and sometimes

packages/gatsby-theme-carbon/gatsby-config.js

@@ -2,17 +2,7 @@ const path = require('path');
 const colors = require('@carbon/themes');
 
 module.exports = themeOptions => {
-  const {
-    name = 'Gatsby Carbon Theme',
-    shortName = 'Carbon',
-    startUrl = '/',
-    backgroundColor = colors.uiBackground,
-    themeColor = colors.interactive01,
-    display = 'browser',
-    additionalFontWeights = [],
-    isSearchEnabled = false,
-    favicon = require.resolve('./src/images/light.png'),
-  } = themeOptions;
+  const { additionalFontWeights = [], isSearchEnabled = false } = themeOptions;
 
   return {
     siteMetadata: {
@@ -23,6 +13,7 @@ module.exports = themeOptions => {
     plugins: [
       `gatsby-plugin-sharp`,
       `gatsby-transformer-yaml`,
+      `gatsby-plugin-catch-links`,
       {
         resolve: `gatsby-plugin-prefetch-google-fonts`,
         options: {
@@ -102,13 +93,13 @@ module.exports = themeOptions => {
       {
         resolve: 'gatsby-plugin-manifest',
         options: {
-          name,
-          short_name: shortName,
-          start_url: startUrl,
-          background_color: backgroundColor,
-          theme_color: themeColor,
-          display,
-          favicon,
+          name: 'Carbon Design Gatsby Theme',
+          short_name: 'Gatsby Theme Carbon',
+          start_url: '/',
+          background_color: colors.uiBackground,
+          theme_color: colors.interactive01,
+          display: 'browser',
+          icon: require.resolve('./src/images/favicon.png'),
         },
       },
       `gatsby-plugin-react-helmet`,

packages/gatsby-theme-carbon/package.json

@@ -37,6 +37,7 @@
     "classnames": "^2.2.6",
     "emotion-theming": "^10.0.10",
     "gatsby-mdx": "^0.6.3",
+    "gatsby-plugin-catch-links": "^2.0.15",
     "gatsby-plugin-compile-es6-packages": "^1.1.0",
     "gatsby-plugin-emotion": "^4.0.7",
     "gatsby-plugin-manifest": "^2.1.1",

packages/gatsby-theme-carbon/src/components/Link/Link.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link as CarbonLink } from 'carbon-components-react';
+import cx from 'classnames';
+import { link } from './Link.module.scss';
+
+const Link = ({ className, ...rest }) => (
+  <CarbonLink {...rest} className={cx(className, link)} />
+);
+
+export default Link;

packages/gatsby-theme-carbon/src/components/Link/Link.module.scss

@@ -0,0 +1,7 @@
+:global {
+  @import '~carbon-components/scss/components/link/link';
+}
+
+.link {
+  font-size: inherit;
+}

packages/gatsby-theme-carbon/src/components/Link/index.js

@@ -0,0 +1,3 @@
+import Link from './Link';
+
+export default Link;

packages/gatsby-theme-carbon/src/components/MDXProvider.js

@@ -15,6 +15,7 @@ import ImageCard from './ImageCard';
 import { Row, Column, Grid } from './Grid';
 import { AnchorLink, AnchorLinks } from './AnchorLinks';
 import { Tab, Tabs } from './Tabs';
+import Link from './Link';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -30,6 +31,7 @@ const components = {
   ul: Ul,
   pre: Code,
   table: PageTable,
+  a: Link,
   PageDescription,
   Video,
   DoDontExample,
@@ -45,7 +47,7 @@ const components = {
   AnchorLink,
   AnchorLinks,
   Tab,
-  Tabs
+  Tabs,
 };
 
 const MDXProvider = ({ children }) => (

packages/gatsby-theme-carbon/src/templates/Homepage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { WebsiteBackToTopBtn } from '@carbon/addons-website';
 import Layout from '../components/Layout';
 import { HomepageBanner, HomepageCallout } from '../components/Homepage';
-import Light from '../images/blossom.jpg';
+import Carbon from '../images/carbon.jpg';
 import Main from '../components/Main';
 
 import NextPrevious from '../components/NextPrevious';
@@ -35,7 +35,7 @@ Homepage.defaultProps = {
           Design System
         </h1>
       )}
-      image={Light}
+      image={Carbon}
     />
   ),
   FirstCallout: <HomepageCallout />,

yarn.lock

@@ -6471,6 +6471,14 @@ gatsby-mdx@^0.6.3:
     unist-util-remove "^1.0.1"
     unist-util-visit "^1.4.0"
 
+gatsby-plugin-catch-links@^2.0.15:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.0.15.tgz#f7ebef483280f6c4fcc19f8fa317c18b49944a97"
+  integrity sha512-JJms4zSzLrRSu2RKYWHED71TWWRImortYN3wkpgmQ/k9Gb25CEZUgQhDagEgLI9rMbVnp1pV/G2YC+quCGsuEQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    escape-string-regexp "^1.0.5"
+
 gatsby-plugin-compile-es6-packages@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-compile-es6-packages/-/gatsby-plugin-compile-es6-packages-1.1.0.tgz#5045c3bbf408c6d639b317ebffd8e9128073c4f9"