From 5ea8237816c8737c855a569275bcfe7326d09f07 Mon Sep 17 00:00:00 2001 From: Steven Sinatra Date: Mon, 2 Jan 2017 16:02:32 +1100 Subject: [PATCH 1/2] Use one stylesheet for all locales --- build.js | 39 ++++++++++--- layouts/css/_base.styl | 73 +++++++++++++++++++++++++ layouts/css/{base.styl => styles.styl} | 76 +------------------------- layouts/partials/html-head.hbs | 2 +- locale/de/styles.styl | 1 - locale/en/styles.styl | 1 - locale/es/styles.styl | 1 - locale/it/styles.styl | 1 - locale/ja/styles.styl | 1 - locale/ko/styles.styl | 1 - locale/uk/styles.styl | 1 - locale/zh-cn/styles.styl | 1 - 12 files changed, 105 insertions(+), 93 deletions(-) create mode 100644 layouts/css/_base.styl rename layouts/css/{base.styl => styles.styl} (62%) delete mode 100644 locale/de/styles.styl delete mode 100644 locale/en/styles.styl delete mode 100644 locale/es/styles.styl delete mode 100644 locale/it/styles.styl delete mode 100644 locale/ja/styles.styl delete mode 100644 locale/ko/styles.styl delete mode 100755 locale/uk/styles.styl delete mode 100644 locale/zh-cn/styles.styl diff --git a/build.js b/build.js index 18b4b10b6a7a1..237d1b9f8e325 100755 --- a/build.js +++ b/build.js @@ -125,14 +125,6 @@ function buildLocale (source, locale) { .use(markdown(markedOptions)) .use(githubLinks({ locale: locale })) .use(prism()) - // Deletes Stylus partials since they'll be included in the main CSS file - // anyways. - .use(filterStylusPartials()) - .use(stylus({ - compress: true, - paths: [path.join(__dirname, 'layouts', 'css')], - use: [autoprefixer()] - })) // Set pretty permalinks, we don't want .html suffixes everywhere. .use(permalinks({ relative: false @@ -220,6 +212,33 @@ function githubLinks (options) { } } +function buildLayouts () { + console.time('[metalsmith] build/layouts finished') + + fs.mkdir(path.join(__dirname, 'build'), () => { + fs.mkdir(path.join(__dirname, 'build', 'layouts'), () => { + const metalsmith = Metalsmith(__dirname) + metalsmith + // Sets the build source as the locale folder. + .source(path.join(__dirname, 'layouts', 'css')) + // Deletes Stylus partials since they'll be included in the main CSS file + // anyways. + .use(filterStylusPartials()) + .use(stylus({ + compress: true, + paths: [path.join(__dirname, 'layouts', 'css')], + use: [autoprefixer()] + })) + .destination(path.join(__dirname, 'build', 'layouts', 'css')) + + metalsmith.build((err) => { + if (err) { throw err } + console.timeEnd('[metalsmith] build/layouts finished') + }) + }) + }) +} + // This function copies the rest of the static assets to their subfolder in the // build directory. function copyStatic () { @@ -259,8 +278,10 @@ function getSource (callback) { // This is where the build is orchestrated from, as indicated by the function // name. It brings together all build steps and dependencies and executes them. function fullBuild () { - // Copies static files. + // Build static files. copyStatic() + // Build layouts + buildLayouts() getSource((err, source) => { if (err) { throw err } diff --git a/layouts/css/_base.styl b/layouts/css/_base.styl new file mode 100644 index 0000000000000..c70ea54720c83 --- /dev/null +++ b/layouts/css/_base.styl @@ -0,0 +1,73 @@ +// Base styles +body + box-sizing border-box + font 400 20px/1.5 'Source Sans Pro', Open Sans, Roboto, 'San Francisco', Helvetica, Arial, sans-serif + color $node-gray + margin 0 + background-color $white + +header, +#main, +footer + display flex + +h1, +h2, +h3, +h4, +h5 + font-weight 400 + +a, +a:link, +a:active + color $node-green + text-decoration none + border-radius 2px + +a:hover + color $white + background-color $node-green + +a:hover + code + background-color transparent + color #fff + +a.imagelink:hover + background-color transparent + +strong, +b + font-weight 600 + +p + a + padded-link(2px) + +img + display block + max-width 100% + + .logos & + // Fixes logo size on Firefox, see: + // https://github.com/nodejs/nodejs.org/issues/558 + width 100% + +code + background-color $light-gray3 + font-size 85% + padding 0.2em + +pre + background-color $node-gray + border-radius 3px + padding 0.75em 1.2em + font-size 0.8em + white-space pre-wrap + color $light-gray3 + overflow-x auto + + code + color $light-gray3 + background-color inherit diff --git a/layouts/css/base.styl b/layouts/css/styles.styl similarity index 62% rename from layouts/css/base.styl rename to layouts/css/styles.styl index b9f827e9cf4ce..7bb86921557c0 100644 --- a/layouts/css/base.styl +++ b/layouts/css/styles.styl @@ -1,79 +1,5 @@ @import '_variables' - -// Base styles -body - box-sizing border-box - font 400 20px/1.5 'Source Sans Pro', Open Sans, Roboto, 'San Francisco', Helvetica, Arial, sans-serif - color $node-gray - margin 0 - background-color $white - -header, -#main, -footer - display flex - -h1, -h2, -h3, -h4, -h5 - font-weight 400 - -a, -a:link, -a:active - color $node-green - text-decoration none - border-radius 2px - -a:hover - color $white - background-color $node-green - -a:hover - code - background-color transparent - color #fff - -a.imagelink:hover - background-color transparent - -strong, -b - font-weight 600 - -p - a - padded-link(2px) - -img - display block - max-width 100% - - .logos & - // Fixes logo size on Firefox, see: - // https://github.com/nodejs/nodejs.org/issues/558 - width 100% - -code - background-color $light-gray3 - font-size 85% - padding 0.2em - -pre - background-color $node-gray - border-radius 3px - padding 0.75em 1.2em - font-size 0.8em - white-space pre-wrap - color $light-gray3 - overflow-x auto - - code - color $light-gray3 - background-color inherit - +@import '_base' // Import specific page sections and layout parts @import 'layout/_sticky-footer' @import 'layout/_grid' diff --git a/layouts/partials/html-head.hbs b/layouts/partials/html-head.hbs index c6df283330fc0..81b29eecbe62f 100644 --- a/layouts/partials/html-head.hbs +++ b/layouts/partials/html-head.hbs @@ -17,7 +17,7 @@ {{#each site.feeds}} {{/each}} - +