pidgin/nest

Use theme CSS for supported language list

19 months ago, Elliott Sales de Andrade
f105d31834e0
Use theme CSS for supported language list

This is responsive on smaller screens and switches to a single column there.

Testing Done:
Rendered the site and checked it at small and large widths.

Reviewed at https://reviews.imfreedom.org/r/1805/
try {
var config = require('./diff-config.json')
} catch (e) {
config = {}
}
const {
dir = 'http://localhost:1313',
waitToScreenShotTime = 500,
additionalPages = ['404.html'],
verbose = false,
maxJobs = 15,
} = config
console.log('Config being used', {
dir,
waitToScreenShotTime,
additionalPages,
verbose,
maxJobs,
})
const fetch = require(/^http:/.test(dir) ? 'http' : 'https')
const Differencify = require('differencify')
const differencify = new Differencify()
// WARNING: Changing these values may invalidate previous snapshots
const viewports = Object.freeze({
phone: Object.freeze({ width: 320, height: 1000 }),
tablet: Object.freeze({ width: 768, height: 4000 }),
massive: Object.freeze({ width: 1440, height: 4000 }),
})
const viewportKeys = Object.keys(viewports)
const nonIdentical = []
;(async () => {
const stack = []
// Map the target pages
const pages = (await fetch_json(`${dir}/index.json`))
.map(u => u.uri)
.concat(additionalPages.map(p => `${dir}/${p}`))
.sort()
console.log(`Diffing these pages:`)
// Populates stack with tests
for (const pagePath of pages) {
console.log('\t' + pagePath.trim().replace(dir, ''))
for (const viewportName of viewportKeys) {
stack.push(() => checkPage(pagePath, viewportName))
}
}
// Run tests
await differencify.launchBrowser({ timeout: 0 })
await concurrence(stack)
await differencify.cleanup()
// Output results
if (nonIdentical.length) {
console.log(`Pages that have changed:`)
console.log(
nonIdentical
.sort()
.map(p => '\t' + p)
.join('\n')
)
} else {
console.log('No differences detected')
}
})()
/**
* Handles Differencify
* @param {string} url path to page
* @param {string} viewportName key to viewport config
*/
async function checkPage(url, viewportName) {
const viewport = viewports[viewportName]
const path = url.replace(dir, '')
const testName = `page-${viewportName}-${safeFileName(path)}`
try {
await differencify
.init({ testName, timeout: 0 })
.newPage()
.setViewport(viewport)
.goto(url)
.wait(waitToScreenShotTime)
.screenshot()
.toMatchSnapshot()
.result(result => {
if (!result) nonIdentical.push(`${viewportName} ${path}`)
})
.close()
.end()
} catch (error) {
console.error(error)
}
if (verbose) console.log(`checked ${viewportName} ${path}`)
}
/**
* Fetches and parses JSON from web resource
* @param {string} url to resource to fetch
*/
function fetch_json(url) {
return new Promise(resolve =>
fetch.get(url, res => {
res.setEncoding('utf8')
let body = ''
res.on('data', data => (body += data))
res.on('end', () => resolve(JSON.parse(body)))
})
)
}
/**
* Creates a file safe string
* @param {string} str Possibly unsafe url
*/
function safeFileName(str) {
return str
.replace(/[^a-z0-9]/gi, '_')
.toLowerCase()
.replace(/^_|_$/, '')
}
/**
* Handles concurrence
* @param {Function[]} stack The functions to be called
*/
function concurrence(stack) {
const er = e => console.error(e)
let count = 0
return new Promise(resolve => {
pull()
function pull() {
while (count < maxJobs) {
let fn = stack.pop()
if (!fn) return
fn()
.catch(er)
.then(cont)
.catch(er)
count++
}
}
function cont() {
count--
if (count === 0 && stack.length === 0) return resolve()
pull()
}
}).catch(er)
}