forked from github/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
wrap-code-terms.js
32 lines (28 loc) · 1.32 KB
/
wrap-code-terms.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
// This module improves table rendering on reference pages by inserting a <wbr>
// tag in code terms that use camelcase, slashes, or underscores, inspired by
// http://heap.ch/blog/2016/01/19/camelwrap/
export default function () {
const codeTerms = document.querySelectorAll('#article-contents table code')
if (!codeTerms) return
codeTerms.forEach(node => {
// Do the wrapping on the inner text only, so we don't modify hrefs
const oldText = escape(node.textContent)
const newText = oldText.replace(wordsLongerThan18Chars, (str) => {
return str
// GraphQL code terms use camelcase
.replace(camelCaseChars, '$1<wbr>$2')
// REST code terms use underscores
// to keep word breaks looking nice, only break on underscores after the 12th char
// so `has_organization_projects` will break after `has_organization` instead of after `has_`
.replace(underscoresAfter12thChar, '$1_<wbr>')
// Some Actions reference pages have tables with code terms separated by slashes
.replace(slashChars, '$1<wbr>')
})
node.innerHTML = node.innerHTML.replace(oldText, newText)
})
}