Fix GFM features in mdx

Also turn on linting for mdx files and fix errors

Author: lukekarrys

.eslintrc.js

@@ -1,3 +1,5 @@
+const {getGlobals} = require('eslint-plugin-mdx/lib/helpers')
+
 module.exports = {
   root: true,
   ignorePatterns: ['.cache/', 'public/'],
@@ -10,7 +12,6 @@ module.exports = {
     'plugin:github/react',
     'plugin:primer-react/recommended',
     'plugin:react-hooks/recommended',
-    'plugin:import/recommended',
     'prettier',
   ],
   rules: {
@@ -19,11 +20,32 @@ module.exports = {
     'primer-react/no-system-props': ['error', {includeUtilityComponents: true}],
   },
   overrides: [
+    {
+      files: ['*.js'],
+      extends: ['plugin:import/recommended'],
+    },
     {
       files: ['src/shared.js'],
       rules: {
         'react/no-unescaped-entities': 'off',
       },
     },
+    {
+      files: ['*.mdx'],
+      plugins: ['mdx', 'prettier'],
+      extends: ['plugin:mdx/recommended'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+      globals: getGlobals(['Index', 'Note', 'Prompt', 'PromptReply', 'Screenshot', 'Link', 'YouTube']),
+      settings: {
+        'import/resolver': 'webpack',
+      },
+      rules: {
+        'no-irregular-whitespace': 'off',
+        'jsx-a11y/anchor-has-content': 'off',
+        'react/jsx-no-target-blank': 'off',
+      },
+    },
   ],
 }

.gitignore

@@ -23,7 +23,7 @@
 !/content/
 !/CONTRIBUTING.md
 !/docs/
-!/gatsby-*.js
+!/gatsby-*
 !/jest*.js
 !/lib/
 !/LICENSE*
@@ -38,4 +38,5 @@
 !/static/
 !/tap-snapshots/
 !/test/
+!/webpack.config.js
 !/cli/

.reuse/dep5

@@ -7,6 +7,6 @@ Files: content/* static/*
 Copyright: 2020 GitHub
 License: CC-BY-4.0
 
-Files: scripts/* cli/* theme/* src/* .github/* *.md *.js *.json .*
+Files: scripts/* cli/* theme/* src/* .github/* *.md *.js *.mjs *.json .*
 Copyright: 2020 GitHub
 License: MIT

cli/lib/extract.js

@@ -12,7 +12,7 @@ const whackAMoleReplace = (s, replacements) => {
   // a bit of whack-a-mole but is necessary since markdown in the CLI is
   // different from the mdx v2 we parse for the docs site
   for (const rep of replacements) {
-    s = s.replace(rep, rep.replace(/([<>])/g, '\\$1').replace(/([{}])/g, '\\$1'))
+    s = s.replace(rep, rep.replace(/([<>{}])/g, '\\$1'))
   }
   return s
 }
@@ -29,6 +29,7 @@ const unpackTarball = async ({release, cwd, dir}) => {
     return (
       whackAMoleReplace(s, [
         '{npm-version} node/{node-version} {platform} {arch} workspaces/{workspaces} {ci}',
+        'node/{process.version} {process.platform} {process.arch}',
         'Default: {prefix}/etc/npmrc',
       ])
         // we cant remove all emails since all except this one are in code blocks

content/cli/v6/using-npm/config.mdx

@@ -1068,7 +1068,7 @@ Folders and executables are given a mode which is `0777` masked against this val
 
 #### user-agent
 
-- Default: node/{process.version} {process.platform} {process.arch}
+- Default: node/\{process.version\} \{process.platform\} \{process.arch\}
 - Type: String
 
 Sets a User-Agent to the request header

content/getting-started/managing-your-npm-user-account/changing-your-npm-username.mdx

@@ -1,7 +1,6 @@
 ---
 title: Changing your npm username
 ---
-import shared from '~/shared.js'
 
 It is not currently possible to change your npm username.  You'll need to
 create a new account and migrate the data to the new account manually.

content/getting-started/troubleshooting/generating-and-locating-npm-debug.log-files.mdx

@@ -3,7 +3,6 @@ title: Generating and locating npm-debug.log files
 redirect_from:
   - /generating-and-locating-npm-debug-log-files
 ---
-import shared from '~/shared.js'
 
 When a package fails to install or publish, the npm CLI will generate an `npm-debug.log` file. This log file can help you figure out what went wrong.
 

content/organizations/managing-organization-packages/configuring-your-npm-client-with-your-organization-settings.mdx

@@ -3,7 +3,6 @@ title: Configuring your npm client with your organization settings
 redirect_from:
   - /configuring-your-npm-client-with-your-org-settings
 ---
-import shared from '~/shared.js'
 
 As an organization member, you can configure your npm client to:
 

content/packages-and-modules/contributing-packages-to-the-registry/about-semantic-versioning.mdx

@@ -47,7 +47,7 @@ For more information on semantic versioning syntax, see the [npm semver calculat
 
 ## Resources
 
-<iframe src="https://www.youtube.com/embed/kK4Meix58R4" frameborder="0" allowfullscreen></iframe>
+<YouTube id="kK4Meix58R4" />
 
 
 [semver-calc]: https://semver.npmjs.com/

content/packages-and-modules/contributing-packages-to-the-registry/creating-node-js-modules.mdx

@@ -65,7 +65,7 @@ exports.printMsg = function() {
 
 ## Resources
 
-<iframe src="https://www.youtube.com/embed/3I78ELjTzlQ" frameborder="0" allowfullscreen></iframe>
+<YouTube id="3I78ELjTzlQ" />
 
 
 [about-pkgs]: about-packages-and-modules

content/packages-and-modules/getting-packages-from-the-registry/downloading-and-installing-packages-locally.mdx

@@ -67,7 +67,7 @@ npm install example-package@beta
 
 ## Resources
 
-<iframe src="https://www.youtube.com/embed/JDSfqFFbNYQ" frameborder="0" allowfullscreen></iframe>
+<YouTube id="JDSfqFFbNYQ" />
 
 
 [scoped-public-pkg]: about-scopes

content/packages-and-modules/getting-packages-from-the-registry/uninstalling-packages-and-dependencies.mdx

@@ -89,11 +89,11 @@ npm uninstall -g jshint
 
 ### Uninstalling local packages
 
-<iframe src="https://www.youtube.com/embed/Z-BpYj6cSoQ" frameborder="0" allowfullscreen></iframe>
+<YouTube id="Z-BpYj6cSoQ" />
 
 ### Uninstalling global packages
 
-<iframe src="https://www.youtube.com/embed/XbvjZxUZJGg" frameborder="0" allowfullscreen></iframe>
+<YouTube id="XbvjZxUZJGg" />
 
 
 [cli-uninstall]: /cli/uninstall

content/packages-and-modules/getting-packages-from-the-registry/updating-packages-downloaded-from-the-registry.mdx

@@ -69,7 +69,7 @@ npm update -g
 
 ## Resources
 
-<iframe src="https://www.youtube.com/embed/HRudtPGcOt4" frameborder="0" allowfullscreen></iframe>
+<YouTube id="HRudtPGcOt4" />
 
 ### CLI commands
 

content/packages-and-modules/introduction-to-packages-and-modules/about-private-packages.mdx

@@ -26,7 +26,7 @@ Private packages always have a scope, and scoped packages are private by default
 
 ## Resources
 
-<iframe src="https://www.youtube.com/embed/O6JoXGnHK_Y" frameborder="0" allowfullscreen></iframe>
+<YouTube id="O6JoXGnHK_Y" />
 
 [paid-acct]: https://www.npmjs.com/pricing
 [user-pkg-add]: adding-collaborators-to-private-packages-owned-by-a-user-account

gatsby-config.js renamed to gatsby-config.mjs

@@ -1,5 +1,7 @@
-const path = require('path')
-const fs = require('fs')
+import path from 'path'
+import fs from 'fs'
+import remarkGfm from 'remark-gfm'
+import remarkFm from 'remark-frontmatter'
 
 const {NODE_ENV, GATSBY_CONTENT_ALLOW, GATSBY_CONTENT_IGNORE, GATSBY_CONTENT_DIR = 'content'} = process.env
 const DEV = NODE_ENV === 'development'
@@ -50,7 +52,7 @@ const getContentOptions = () => {
   }
 }
 
-module.exports = {
+const config = {
   trailingSlash: 'never',
   siteMetadata: {
     title: 'npm Docs',
@@ -69,7 +71,9 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-mdx',
       options: {
-        extensions: ['.mdx', '.md'],
+        mdxOptions: {
+          remarkPlugins: [remarkGfm, remarkFm],
+        },
       },
     },
     {
@@ -89,3 +93,5 @@ module.exports = {
     'gatsby-plugin-meta-redirect',
   ],
 }
+
+export default config

gatsby-node.js renamed to gatsby-node.mjs

@@ -1,7 +1,8 @@
-const {join, relative} = require('path')
-const {Octokit: CoreOctokit} = require('@octokit/rest')
-const {throttling} = require('@octokit/plugin-throttling')
-const {retry} = require('@octokit/plugin-retry')
+import {join, relative} from 'path'
+import {Octokit as CoreOctokit} from '@octokit/rest'
+import {throttling} from '@octokit/plugin-throttling'
+import {retry} from '@octokit/plugin-retry'
+import webpackConfig from './webpack.config.js'
 
 const CI = !!process.env.CI
 const CWD = process.cwd()
@@ -42,7 +43,7 @@ const createOctokit = ({reporter}) => {
   })
 }
 
-exports.onCreateNode = ({node, actions, getNode}) => {
+export const onCreateNode = ({node, actions, getNode}) => {
   if (node.internal.type === 'Mdx') {
     const {name, relativeDirectory: dir} = getNode(node.parent)
 
@@ -63,14 +64,9 @@ exports.onCreateNode = ({node, actions, getNode}) => {
   }
 }
 
-exports.onCreateWebpackConfig = ({stage, actions}) => {
+export const onCreateWebpackConfig = ({stage, actions}) => {
   actions.setWebpackConfig({
-    resolve: {
-      alias: {
-        '~': SRC,
-      },
-      extensions: ['.js'],
-    },
+    ...webpackConfig,
   })
 
   if (stage === `build-javascript`) {
@@ -80,7 +76,7 @@ exports.onCreateWebpackConfig = ({stage, actions}) => {
   }
 }
 
-exports.createSchemaCustomization = ({actions: {createTypes}}) => {
+export const createSchemaCustomization = ({actions: {createTypes}}) => {
   createTypes(`
     type Mdx implements Node {
       frontmatter: MdxFrontmatter
@@ -101,7 +97,7 @@ exports.createSchemaCustomization = ({actions: {createTypes}}) => {
   `)
 }
 
-exports.createPages = async ({graphql, actions, reporter}) => {
+export const createPages = async ({graphql, actions, reporter}) => {
   const response = await graphql(`
     {
       allMdx {