build.js

const fs = require('fs')
const path = require('path')
const marked = require('marked')
const pretty = require('pretty')
const { JSDOM } = require('jsdom')
const caniuseDb = require('caniuse-db/data.json')
const { toKebabCase, emptyHTML } = require('../utils/utils.js')

const renderer = new marked.Renderer()
renderer.heading = (text, level) =>
  level === 3
    ? `<h${level} id="${toKebabCase(text)}">${text}</h${level}>`
    : `<h${level} data-type="${text}">${text}</h${level}>`
renderer.link = (url, _, text) => `<a href="${url}" target="_blank">${text || url}</a>`

const SNIPPETS_PATH = './snippets'
const SNIPPET_CONTAINER_SELECTOR = '.main > .container'

const createElement = str => {
  const el = document.createElement('div')
  el.innerHTML = str
  return el.firstElementChild
}

const template = markdown => `
  <div class="snippet">
    ${markdown}
  </div>
`

const document = new JSDOM(fs.readFileSync('./index.html', 'utf8')).window.document
const snippetContainer = document.querySelector('.main > .container')
const sidebarLinks = document.querySelector('.sidebar__links')
emptyHTML(snippetContainer, sidebarLinks)

for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) {
  const snippetPath = path.join(SNIPPETS_PATH, snippetFile)
  const snippetData = fs.readFileSync(snippetPath, 'utf8')
  const markdown = marked(snippetData, { renderer })
  const snippetTemplate = template(markdown)
  const el = createElement(snippetTemplate)
  snippetContainer.append(el)

  sidebarLinks.append(
    createElement(
      `<a class="sidebar__link" href="#${snippetFile.replace('.md', '')}">${
        el.querySelector('h3').innerHTML
      }</a>`
    )
  )

  const featUsageShares = (snippetData.match(/https?:\/\/caniuse\.com\/#feat=.*/g) || []).map(
    feat => {
      const featData = caniuseDb.data[feat.match(/#feat=(.*)/)[1]]
      return featData ? Number(featData.usage_perc_y + featData.usage_perc_a) : 100
    }
  )

  el.querySelector('h4:last-of-type').after(
    createElement(`
      <div>
        <div class="snippet__browser-support">
          ${featUsageShares.length ? Math.min(...featUsageShares).toPrecision(3) : '99+'}%
        </div>
      </div>
      `)
  )
}

fs.writeFileSync('./index.html', pretty(document.documentElement.outerHTML, { ocd: true }))