support less

Author: leebyron

package.json

@@ -25,6 +25,7 @@
     "babel-runtime": "^5.8.20",
     "express": "^4.13.3",
     "js-yaml": "^3.4.0",
+    "less": "^2.7.1",
     "react": "^0.14.3",
     "sane": "^1.2.0",
     "webpack": "^1.12.1"

resources/Site.js

@@ -44,9 +44,9 @@ async function readSite(siteRoot) {
 }
 
 function buildSite(buildRoot, site) {
-  return Promise.all(site.files.map(file => {
-    return writer(buildRoot, file, site);
-  }));
+  return Promise.all(site.files.map(file =>
+    writer(buildRoot, file, site)
+  ));
 }
 
 
@@ -123,6 +123,11 @@ function urlToFile(file) {
     }
   }
 
+  // Convert .less to .css
+  if (path.extname(url) === '.less') {
+    url = url.slice(0, -5) + '.css';
+  }
+
   // Assume index.html stands for the parent directory
   if (path.basename(url) === 'index.html') {
     url = path.dirname(url);

resources/build.js

@@ -11,9 +11,10 @@ var Site = require('./Site');
 
 module.exports = build;
 
-process.on('unhandledRejection', error => {
+process.on('unhandledRejection', (error, promise) => {
   console.error('Unhandled Promise Rejection:');
   console.error(error && error.stack || error);
+  console.error(promise);
 });
 
 var pwd = process.env.PWD;

resources/writer.js

@@ -12,6 +12,7 @@ var React = require('react');
 var fs = require('fs');
 var yaml = require('js-yaml');
 var path = require('path');
+var less = require('less');
 var renderReactPage = require('./renderReactPage');
 import { endsWith } from './util';
 
@@ -21,6 +22,13 @@ module.exports = writer;
 async function writer(buildDir, file, site) {
   var writePath = getWritePath(buildDir, file);
 
+  // Render Less file
+  if (endsWith(file.absPath, '.less')) {
+    const input = await readFile(file.absPath);
+    const output = await less.render(input, { filename: file.absPath });
+    return await writeFile(writePath, output.css);
+  }
+
   // Non-modified content
   if (!file.content) {
     await promiseDirExists(path.dirname(writePath));
@@ -258,6 +266,14 @@ function getWritePath(buildDir, file) {
   return path.join(buildDir, writePath.slice(1));
 }
 
+// Simple Promise wrapper around fs.writeFile
+function readFile(filePath, fmt) {
+  return new Promise((resolve, reject) =>
+    fs.readFile(filePath, fmt || 'utf8', (err, results) =>
+      err ? reject(err) : resolve(results))
+  );
+}
+
 // Ensures directory exists, then writes file
 async function writeFile(filePath, data) {
   await promiseDirExists(path.dirname(filePath));
@@ -266,15 +282,9 @@ async function writeFile(filePath, data) {
 
 // Simple Promise wrapper around fs.writeFile
 function _writeFile(filePath, data) {
-  return new Promise((resolve, reject) => {
-    fs.writeFile(filePath, data, err => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve();
-      }
-    });
-  });
+  return new Promise((resolve, reject) =>
+    fs.writeFile(filePath, data, err => err ? reject(err) : resolve())
+  );
 }
 
 function promisePipeEnds(pipe) {

site/_core/Site.js

@@ -27,7 +27,7 @@ var Site = React.createClass({
 
           <link rel="shortcut icon" href="/img/favicon.png" />
           <link rel="home" type="application/rss+xml" href="/blog/rss.xml" title="GraphQL Team Blog" />
-          <link rel="stylesheet" href="/css/graphql.css" />
+          <link rel="stylesheet" href="/style.css" />
           <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300|Roboto:300|Roboto+Mono:400,400i,600" />
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
         </head>

site/css/graphql.css renamed to site/_css/graphql.less

@@ -1982,7 +1982,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror {
   font-size: 13px;
   line-height: 17px;
-  font-family:
+  font-family: 'Roboto Mono', Menlo, Monaco, monospace;
 }
 
 .miniGraphiQL {

site/style.less

@@ -0,0 +1 @@
+@import "_css/graphql.less";