repo sync

Author: Octomerger

contributing/content-markup-reference.md

@@ -16,7 +16,7 @@
 
 [Markdown](http://daringfireball.net/projects/markdown/) is a human-friendly syntax for formatting plain text. Our documentation is written with [GitHub Flavored Markdown](https://docs.github.com/en/github/writing-on-github/about-writing-and-formatting-on-github), a custom version of Markdown used across GitHub.
 
-This site's Markdown rendering is powered by the [`/lib/render-content`](/lib/render-content) and [`hubdown`](https://github.com/electron/hubdown) npm packages, which are in turn built on the [`remark`](https://remark.js.org/) Markdown processor.
+This site's Markdown rendering is powered by [`/lib/render-content`](/lib/render-content), which is in turn built on the [`remark`](https://remark.js.org/) Markdown processor.
 
 ## Callout tags
 

includes/scripts.html

@@ -1 +1,2 @@
+<script id="search-options" type="application/json">{{ searchOptions }}</script>
 <script src="{{ builtAssets.main.js }}"></script>

javascripts/copy-code.js

@@ -1,15 +1,19 @@
-import Clipboard from 'clipboard'
-
 export default () => {
-  const clipboard = new Clipboard('button.js-btn-copy')
+  const buttons = Array.from(document.querySelectorAll('button.js-btn-copy'))
+
+  if (!buttons) return
+
+  buttons.forEach(button =>
+    button.addEventListener('click', async evt => {
+      const text = button.dataset.clipboardText
+      await navigator.clipboard.writeText(text)
 
-  clipboard.on('success', evt => {
-    const btn = evt.trigger
-    const beforeTooltip = btn.getAttribute('aria-label')
-    btn.setAttribute('aria-label', 'Copied!')
+      const beforeTooltip = button.getAttribute('aria-label')
+      button.setAttribute('aria-label', 'Copied!')
 
-    setTimeout(() => {
-      btn.setAttribute('aria-label', beforeTooltip)
-    }, 2000)
-  })
+      setTimeout(() => {
+        button.setAttribute('aria-label', beforeTooltip)
+      }, 2000)
+    })
+  )
 }

javascripts/display-platform-specific-content.js

@@ -1,15 +1,17 @@
-const { getPlatformFromUserAgent } = require('platform-utils')
+import parseUserAgent from './user-agent'
 const supportedPlatforms = ['mac', 'windows', 'linux']
 const detectedPlatforms = new Set()
 
 // Emphasize content for the visitor's OS (inferred from user agent string)
 
 export default function displayPlatformSpecificContent () {
-  let platform = getDefaultPlatform() || getPlatformFromUserAgent()
+  let platform = getDefaultPlatform() || parseUserAgent().os
 
   // adjust platform names to fit existing mac/windows/linux scheme
   if (!platform) platform = 'mac' // default to 'mac' on mobile
   if (platform === 'darwin') platform = 'mac'
+  if (platform === 'ios') platform = 'mac'
+  if (platform === 'android') platform = 'linux'
   if (platform.startsWith('win')) platform = 'windows'
 
   const platformsInContent = findPlatformSpecificContent(platform)

javascripts/search.js

@@ -1,12 +1,8 @@
 import { tags } from './hyperscript'
 import { sendEvent } from './events'
-const searchWithYourKeyboard = require('search-with-your-keyboard')
-const truncate = require('html-truncate')
-const languages = require('../lib/languages')
-const allVersions = require('../lib/all-versions')
-const nonEnterpriseDefaultVersion = require('../lib/non-enterprise-default-version')
+import searchWithYourKeyboard from 'search-with-your-keyboard'
+import truncate from 'html-truncate'
 
-const languageCodes = Object.keys(languages)
 const maxContentLength = 300
 
 let $searchInputContainer
@@ -29,8 +25,13 @@ export default function search () {
   $searchOverlay = document.querySelector('.search-overlay-desktop')
 
   // There's an index for every version/language combination
-  version = deriveVersionFromPath()
-  language = deriveLanguageCodeFromPath()
+  const {
+    languages,
+    versions,
+    nonEnterpriseDefaultVersion
+  } = JSON.parse(document.getElementById('search-options').text)
+  version = deriveVersionFromPath(versions, nonEnterpriseDefaultVersion)
+  language = deriveLanguageCodeFromPath(languages)
 
   // Find search placeholder text in a <meta> tag, falling back to a default
   const $placeholderMeta = document.querySelector('meta[name="site.data.ui.search.placeholder"]')
@@ -109,23 +110,16 @@ function closeSearch () {
   onSearch()
 }
 
-function deriveLanguageCodeFromPath () {
+function deriveLanguageCodeFromPath (languageCodes) {
   let languageCode = location.pathname.split('/')[1]
   if (!languageCodes.includes(languageCode)) languageCode = 'en'
   return languageCode
 }
 
-function deriveVersionFromPath () {
+function deriveVersionFromPath (allVersions, nonEnterpriseDefaultVersion) {
   // fall back to the non-enterprise default version (FPT currently) on the homepage, 404 page, etc.
   const versionStr = location.pathname.split('/')[2] || nonEnterpriseDefaultVersion
-  const versionObject = allVersions[versionStr] || allVersions[nonEnterpriseDefaultVersion]
-
-  // if GHES, returns the release number like 2.21, 2.22, etc.
-  // if FPT, returns 'dotcom'
-  // if GHAE, returns 'ghae'
-  return versionObject.plan === 'enterprise-server'
-    ? versionObject.currentRelease
-    : versionObject.miscBaseName
+  return allVersions[versionStr] || allVersions[nonEnterpriseDefaultVersion]
 }
 
 // Wait for the event to stop triggering for X milliseconds before responding

javascripts/wrap-code-terms.js

@@ -1,8 +1,8 @@
+import escape from 'lodash/escape'
 const wordsLongerThan18Chars = /[\S]{18,}/g
 const camelCaseChars = /([a-z])([A-Z])/g
 const underscoresAfter12thChar = /([\w:]{12}[^_]*?)_/g
 const slashChars = /([/\\])/g
-const { escape } = require('lodash')
 
 // This module improves table rendering on reference pages by inserting a <wbr>
 // tag in code terms that use camelcase, slashes, or underscores, inspired by

lib/render-content/create-processor.js

@@ -0,0 +1,25 @@
+const unified = require('unified')
+const markdown = require('remark-parse')
+const emoji = require('remark-gemoji-to-emoji')
+const remark2rehype = require('remark-rehype')
+const raw = require('rehype-raw')
+const slug = require('rehype-slug')
+const autolinkHeadings = require('rehype-autolink-headings')
+const highlight = require('rehype-highlight')
+const html = require('rehype-stringify')
+const graphql = require('highlightjs-graphql').definer
+const remarkCodeExtra = require('remark-code-extra')
+const codeHeader = require('./plugins/code-header')
+
+module.exports = function createProcessor () {
+  return unified()
+    .use(markdown)
+    .use(remarkCodeExtra, { transform: codeHeader })
+    .use(emoji)
+    .use(remark2rehype, { allowDangerousHTML: true })
+    .use(slug)
+    .use(autolinkHeadings, { behavior: 'wrap' })
+    .use(highlight, { languages: { graphql }, subset: false })
+    .use(raw)
+    .use(html)
+}

lib/render-content/renderContent.js

@@ -1,11 +1,9 @@
 const liquid = require('./liquid')
-const codeHeader = require('./plugins/code-header')
-const hubdown = require('hubdown')
-const remarkCodeExtra = require('remark-code-extra')
 const cheerio = require('cheerio')
 const Entities = require('html-entities').XmlEntities
 const entities = new Entities()
 const stripHtmlComments = require('strip-html-comments')
+const createProcessor = require('./create-processor')
 
 // used below to remove extra newlines in TOC lists
 const endLine = '</a>\r?\n'
@@ -54,13 +52,9 @@ module.exports = async function renderContent (
     // statements so that extra space doesn't mess with list numbering
     template = template.replace(/(\r?\n){3}/g, '\n\n')
 
-    let { content: html } = await hubdown(template, {
-      // Disable automatic language guessing in syntax highlighting
-      highlight: { subset: false },
-      runBefore: [[
-        remarkCodeExtra, { transform: codeHeader }
-      ]]
-    })
+    const processor = createProcessor()
+    const vFile = await processor.process(template)
+    let html = vFile.toString()
 
     // Remove unwanted newlines (which appear as spaces) from inline tags inside tables
     if (html.includes('<table>')) html = removeNewlinesFromInlineTags(html)

lib/search/versions.js

@@ -1,13 +1,14 @@
 const allVersions = require('../all-versions')
 
-module.exports = new Set(
-  Object.values(allVersions)
-    .map(version =>
+module.exports = Object.fromEntries(
+  Object.entries(allVersions)
+    .map(([versionStr, versionObject]) => [
+      versionStr,
       // if GHES, resolves to the release number like 2.21, 2.22, etc.
       // if FPT, resolves to 'dotcom'
       // if GHAE, resolves to 'ghae'
-      version.plan === 'enterprise-server'
-        ? version.currentRelease
-        : version.miscBaseName
-    )
+      versionObject.plan === 'enterprise-server'
+        ? versionObject.currentRelease
+        : versionObject.miscBaseName
+    ])
 )

middleware/context.js

@@ -8,6 +8,8 @@ const productNames = require('../lib/product-names')
 const warmServer = require('../lib/warm-server')
 const featureFlags = Object.keys(require('../feature-flags'))
 const builtAssets = require('../lib/built-asset-urls')
+const searchVersions = require('../lib/search/versions')
+const nonEnterpriseDefaultVersion = require('../lib/non-enterprise-default-version')
 
 // Supply all route handlers with a baseline `req.context` object
 // Note that additional middleware in middleware/index.js adds to this context object
@@ -46,5 +48,12 @@ module.exports = async function contextualize (req, res, next) {
   // JS + CSS asset paths
   req.context.builtAssets = builtAssets
 
+  // Languages and versions for search
+  req.context.searchOptions = JSON.stringify({
+    languages: Object.keys(languages),
+    versions: searchVersions,
+    nonEnterpriseDefaultVersion
+  })
+
   return next()
 }