feat(editlink): add to default template, style updates, associated docs

[tay1orjones]

Just took a quick shot here, let me know your feedback and I can revise as necessary

• Migrated the previous emotion styles to the scss module
• Added the component to the default template
• Updated config to accept params for baseUrl and subDirectory
• Added documentation to the example site

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://gatsby-theme-carbon-git-fork-tay1orjones-edit-link.carbon-design-system.now.sh

[tay1orjones]

Closes #162

[vpicone]

Awesome!!! I'll dive more into this tomorrow, but looks solid at first glance.

[tay1orjones]

@vpicone updated with requested changes

[vpicone]

@tay1orjones Great work. You nailed it!

One last thing: you're correctly using the theme options object in the implementation, but in the docs you have them put the repository info into site metadata.

It's fine if you want to throw it in the site metadata object now to make querying easier. I'd just switch the docs to pass the repository as a theme option:

module.exports = {
  __experimentalThemes: [
    {
      resolve: 'gatsby-theme-carbon',
      options: {
        repository: {
          baseUrl:
            'https://github.com/carbon-design-system/gatsby-theme-carbon',
          subDirectory: '/packages/example',
        },
      },
    },
  ],
};

[tay1orjones]

@vpicone great point, thanks for the catch. I just pushed an update with that change.

[vpicone]

@tay1orjones aw dang just realized this doesn't work if the site is an index.mdx inside of a directory (like the demo page). I think the solution is a page query that shares the file name. Unfortunately page queries are kind of a PITA for gatsby-mdx. We might need to do this in gatsby-node.

EDIT: I'm working on this, I'll just push to your branch.

[vpicone]

For the index.mdx fix, I added a hook to gatsby-node so we can provide templates with additional page context (like like the page's file path).

// We need to provide the actual file that created a specific page to append links for EditLink.
// We can't do page queries from MDX templates, so we'll add the page's relative path to context after it's created.
// The context object **is** supplied to MDX templates through the pageContext prop.
exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions;
  const [relativePagePath] = page.componentPath.split('src/pages').splice('-1');
  deletePage(page);
  createPage({
    ...page,
    context: {
      ...page.context,
      relativePagePath,
    },
  });
};

[vpicone]

Moved this to it's own query. Ideally data fetching would be separate from the component itself but we definitely don't want them sharing queries in case one gets shadowed.

[tay1orjones]

Looks good to me, thanks!

[alisonjoseph]

This LGTM!

Just wanted to confirm this wouldn't add this link automatically to anyone upgrading correct? They would have to add the repository object to their config file first?

[vpicone]

@alisonjoseph yeah it doesn't render unless a url is provided as a theme option.