Skip to content

Instantly share code, notes, and snippets.

@heymartinadams
Last active October 22, 2019 22:56
Show Gist options
  • Save heymartinadams/1d7485e8239ee0e10ee7dc8d4c42d407 to your computer and use it in GitHub Desktop.
Save heymartinadams/1d7485e8239ee0e10ee7dc8d4c42d407 to your computer and use it in GitHub Desktop.
Cron job that checks if a Webflow site has been published, then exports its CSS code into your app.
;(async () => {
// Secrets
require('dotenv').config()
// Webflow
const Webflow = require('webflow-api')
// Chron job
const cron = require('node-cron')
// Selenium
const webdriver = require('selenium-webdriver')
const chrome = require('selenium-webdriver/chrome')
const chromedriver = require('chromedriver')
/**
* STEP 1. Check Webflow
*/
// Obtain your Webflow token on your site’s “Integrations” section:
// https://webflow.com/dashboard/sites/__WEBFLOW_SITE__/integrations
const webflow = new Webflow({ token: process.env.WEBFLOW_TOKEN })
// Schedule cron job once every minute
const task = cron.schedule('* * * * *', () => {
const taskStarted = Date.now()
console.log(`${taskStarted}: Checking for site publication...`)
// Find your site’s ID: https://developers.webflow.com/?javascript#list-sites
// Find your webhook ID: https://developers.webflow.com/?javascript#list-webhooks
const webhook = webflow.webhook({
siteId: '__YOUR_SITE_ID__',
webhookId: '__YOUR_WEBHOOK_ID__'
})
webhook.then(hook => {
const hookOccurred = Date.parse(hook.lastUsed)
if (
// Site got published...
hook.triggerType === 'site_publish' &&
// ...and hook got triggered after previous task completed, so 60 seconds ago...
hookOccurred > taskStarted - 60000 &&
// ...and before or when current task got started
hookOccurred <= taskStarted
) {
console.log(`${hookOccurred}: Site was published!`)
console.log(
`${hook._meta.rateLimit.remaining} pings of ${hook._meta.rateLimit.limit} remaining.`
)
selenium()
}
})
})
task.start()
/**
* STEP 2. Run Selenium
*/
const selenium = async () => {
// Run Selenium with Chrome on Node
chrome.setDefaultService(new chrome.ServiceBuilder(chromedriver.path).build())
// Create driver
let driver = new webdriver.Builder()
.withCapabilities(webdriver.Capabilities.chrome())
// but make it headless, meaning we won’t see a browser window open
.setChromeOptions(new chrome.Options().headless())
.build()
// Add exit handlers
const exitHandler = async () => {
console.log('\nShutting down...')
task.destroy()
console.log('Shut down.')
process.exit()
}
// Catches ctrl+c event
process.on('SIGINT', exitHandler)
// Catches "kill pid" (for example: nodemon restart)
process.on('SIGUSR1', exitHandler)
process.on('SIGUSR2', exitHandler)
// Catches any uncaught exceptions
process.on('uncaughtException', exitHandler)
try {
// Head on over to the Webflow site
await driver.get('https://__WEBFLOW_SITE__.webflow.io')
// Find and open the CSS file...
const cssFile = await driver.findElement(webdriver.By.tagName('link')).getAttribute('href')
await driver.get(cssFile)
// ...get its contents...
const allCss = await driver.findElement(webdriver.By.tagName('pre')).getAttribute('innerText')
// and be sure to quit Selenium
await driver.quit()
// ...and, finally, just get the part that’s your own custom css.
const customCss = allCss.split(
'========================================================================== */'
)[3]
// Overwrite your custom css file on your hard drive with your new css
const fs = require('fs')
fs.writeFileSync(
// Path to your CSS file on your hard drive; to get the path of your css file, drag it from Finder into Terminal (on Mac)
'/Users/__PATH_TO_YOUR_CSS_FILE__/src/assets/css/index.css',
customCss
)
} catch (err) {
// Log any errors
console.log('Error occurred:', err)
// And exit
task.destroy()
process.exit()
}
}
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment