Merge branch 'main' into domain-verification-enterprise-account-beta-redux

Author: sarahs

.github/workflows/close-unwanted-pull-requests.yml

@@ -12,7 +12,7 @@ on:
       - 'lib/webhooks/**'
 jobs:
   close_unwanted_pull_requests:
-    if: github.repository == 'github/docs'
+    if: github.repository == 'github/docs' && github.event.pull_request.user.login != 'Octomerger'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/github-script@626af12fe9a53dc2972b48385e7fe7dec79145c9

content/actions/index.md

@@ -37,6 +37,8 @@ changelog:
   - title: Self-Hosted Runner Group Access Changes
     date: '2020-10-16'
     href: https://github.blog/changelog/2020-10-16-github-actions-self-hosted-runner-group-access-changes/
+
+product_video: https://www.youtube-nocookie.com/embed/cP0I9w2coGU
 
 redirect_from:
   - /articles/automating-your-workflow-with-github-actions/

content/developers/overview/about-githubs-apis.md

@@ -9,11 +9,7 @@ versions:
   github-ae: '*'
 ---
 
-There are two stable versions of the GitHub API: the [REST API](/rest) and the [GraphQL API](/graphql).
-
-When using the REST API, we encourage you to [request v3 via the `Accept` header](/rest/overview/media-types#request-specific-version).
-
-For information on using the GraphQL API, see the [v4 docs](/graphql).
+There are two stable versions of the GitHub API: the [REST API](/rest) and the [GraphQL API](/graphql). When using the REST API, we encourage you to [request v3 via the `Accept` header](/v3/media/#request-specific-version). For information on using the GraphQL API, see the [v4 docs](/graphql).
 
 ## Deprecated versions
 

includes/small-footer.html

@@ -3,7 +3,7 @@
     <ul class="d-flex list-style-none flex-wrap flex-justify-center flex-xl-justify-start">
       <li class="d-flex mr-xl-3 text-gray">
         {% octicon "mark-github" height="20" class="mr-2 mr-xl-3" %}
-        <span>{{ "now" | date: "%Y" }} GitHub, Inc.</span>
+        <span>&copy; {{ "now" | date: "%Y" }} GitHub, Inc.</span>
       </li>
       <li class="ml-3"><a href="/github/site-policy/github-terms-of-service">{% data ui.footer.terms %} </a></li>
       <li class="ml-3"><a href="/github/site-policy/github-privacy-statement">{% data ui.footer.privacy %} </a></li>

layouts/product-landing.html

@@ -9,8 +9,8 @@
       {% include header %}
 
       <div class="container-xl px-3 px-md-6 pt-3 pb-2">
-        <header class="d-flex gutter mb-6">
-          <div class="col-12 col-lg-7">
+        <header class="d-lg-flex gutter-lg mb-6">
+          <div class="col-12 col-lg-6 mb-2 mb-lg-0">
             <span class="text-mono text-gray">Product</span>
             <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
             <div class="lead-mktg text-gray">{{ page.intro }}</div>
@@ -23,6 +23,19 @@ <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
               {% data ui.product_landing.reference_guides %}
             </a>
           </div>
+
+          {% if page.product_video %}
+            <div class="col-12 col-lg-6">
+              <div class="position-relative" style="padding-bottom:56.25%;">
+                <iframe
+                  class="top-0 left-0 position-absolute box-shadow-large rounded-1 width-full height-full"
+                  src="{{ page.product_video }}"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
+                ></iframe>
+              </div>
+            </div>
+          {% endif %}
         </header>
 
         <!-- Article links -->

lib/frontmatter.js

@@ -87,6 +87,14 @@ const schema = {
           href: { type: 'string' }
         }
       }
+    },
+    // Show in `product-landing.html`
+    product_video: {
+      type: 'string',
+      format: 'url'
+    },
+    interactive: {
+      type: 'boolean'
     }
   }
 }

lib/page.js

@@ -16,6 +16,7 @@ const pathUtils = require('./path-utils')
 const Permalink = require('./permalink')
 const languages = require('./languages')
 const renderContent = require('./render-content')
+const { renderReact } = require('./react/engine')
 const frontmatter = require('./frontmatter')
 const products = require('./all-products')
 const slash = require('slash')
@@ -133,10 +134,31 @@ class Page {
     this.title = await renderContent(this.rawTitle, context, { textOnly: true, encodeEntities: true })
     this.shortTitle = await renderContent(this.shortTitle, context, { textOnly: true, encodeEntities: true })
 
-    const markdown = this.mapTopic
+    let markdown = this.mapTopic
       ? getMapTopicContent(this, context.pages, context.redirects)
       : this.markdown
 
+    // If the article is interactive parse the React!
+    if (this.interactive) {
+      // Search for the react code comments to find the react components
+      const reactComponents = markdown.match(/<!--react-->(.*?)<!--end-react-->/gs)
+
+      // Render each of the react components in the markdown
+      await Promise.all(reactComponents.map(async (reactComponent) => {
+        let componentStr = reactComponent
+
+        // Remove the React comment indicators
+        componentStr = componentStr.replace('<!--react-->\n', '').replace('<!--react-->', '')
+        componentStr = componentStr.replace('\n<!--end-react-->', '').replace('<!--end-react-->', '')
+
+        // Get the rendered component
+        const renderedComponent = await renderReact(componentStr)
+
+        // Replace the react component with the rendered markdown
+        markdown = markdown.replace(reactComponent, renderedComponent)
+      }))
+    }
+
     const html = await renderContent(markdown, context)
 
     // product frontmatter may contain liquid

lib/react/babel.js

@@ -0,0 +1,22 @@
+const babel = require('@babel/core')
+
+const reactBabelOptions = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react'
+  ],
+  plugins: [
+    '@babel/plugin-transform-react-jsx',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/transform-runtime'
+  ]
+}
+
+const transform = code =>
+  babel.transform(code, reactBabelOptions).code
+
+module.exports = {
+  transform: transform,
+  reactBabelOptions: reactBabelOptions
+}

lib/react/engine.js

@@ -0,0 +1,57 @@
+const { renderToString } = require('react-dom/server')
+const { transform } = require('./babel')
+const React = require('react')
+const fs = require('fs')
+const path = require('path')
+const dirTree = require('directory-tree')
+
+// Name of directory for saving transformed components that should be gitignored
+const dist = 'dist'
+
+// Build React components
+// This loops through the react components and transpiles them to /dist
+// so they can be used by Node.js when we do server side rendering
+const tree = dirTree('./react/')
+if (tree) {
+  for (const index in tree.children) {
+    const file = tree.children[index]
+    if (file.type === 'file' && file.extension === '.js') {
+      if (!fs.existsSync(path.join(dist, 'react'))) {
+        fs.mkdirSync(path.join(dist, 'react'), { recursive: true })
+      }
+      const content = transform(fs.readFileSync(file.path, 'utf8'))
+      fs.writeFileSync(path.join(dist, file.path), content)
+    }
+  }
+}
+// End Build React Components
+
+// Register components
+const components = {
+  // CodeBlock: require('../../dist/react/CodeBlock'),
+  // CodeEditor: require('../../dist/react/CodeEditor')
+}
+
+const renderReact = async componentStr => {
+  // Get component name as string so we can use it in the class name
+  // which will be needed later if we choose to do client side React hydration
+  const componentName = componentStr.match(/<([a-zA-Z]+)\s/)[1]
+  // Add the wrapper and class name so we can later use React hydration on the client
+  // side
+  const jsx = `<div className="react-component-${componentName}">\n${componentStr}\n</div>`
+
+  const component = transform(jsx)
+
+  // eslint-disable-next-line
+  const getComponent = new Function(
+    'React',
+    ...Object.keys(components),
+    `${component.replace('React', 'return React')}`
+  )
+
+  return renderToString(getComponent(React, ...Object.values(components)))
+}
+
+module.exports = {
+  renderReact
+}

middleware/csp.js

@@ -34,7 +34,8 @@ module.exports = contentSecurityPolicy({
     ],
     frameSrc: [ // exceptions for GraphQL Explorer
       'https://graphql-explorer.githubapp.com', // production env
-      'http://localhost:3000' // development env
+      'http://localhost:3000', // development env
+      'https://www.youtube-nocookie.com'
     ],
     styleSrc: [
       "'self'",