diff --git a/gulp/gulp-build.js b/gulp/gulp-build.js index 6218bca763..30b0898434 100644 --- a/gulp/gulp-build.js +++ b/gulp/gulp-build.js @@ -25,7 +25,7 @@ gulp.task('build:common', () => { gulp.task('build:server', ['build:src', 'build:common']); -gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff'], (done) => { +gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff', 'semantic-ui'], (done) => { gulp.start('grunt-build:dev', done); }); @@ -33,7 +33,7 @@ gulp.task('build:dev:watch', ['build:dev'], () => { gulp.watch(['website/client-old/**/*.styl', 'website/common/script/*']); }); -gulp.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff'], (done) => { +gulp.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff', 'semantic-ui'], (done) => { runSequence( 'grunt-build:prod', 'apidoc', diff --git a/gulp/gulp-semanticui.js b/gulp/gulp-semanticui.js new file mode 100644 index 0000000000..b19025bf92 --- /dev/null +++ b/gulp/gulp-semanticui.js @@ -0,0 +1,43 @@ +import gulp from 'gulp'; +import fs from 'fs'; + +// Make semantic-ui-less work with a theme in a different folder +// Code taken from https://www.artembutusov.com/webpack-semantic-ui/ + +// Relative to node_modules/semantic-ui-less +const SEMANTIC_THEME_PATH = '../../website/client/assets/semantic-ui/theme.config'; + +// fix well known bug with default distribution +function fixFontPath (filename) { + return new Promise((resolve, reject) => { + fs.readFile(filename, 'utf8', (err, content) => { + if (err) return reject(err); + + let newContent = content.replace( + '@fontPath : \'../../themes/', + '@fontPath : \'../../../themes/' + ); + + fs.writeFile(filename, newContent, 'utf8', (err1) => { + if (err) return reject(err1); + resolve(); + }); + }); + }); +} + +gulp.task('semantic-ui', (done) => { + // relocate default config + fs.writeFile( + 'node_modules/semantic-ui-less/theme.config', + `@import '${SEMANTIC_THEME_PATH}';\n`, + 'utf8', + (err) => { + if (err) return done(err); + + fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables') + .then(() => done()) + .catch(done); + } + ); +}); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 628e7507fb..5bd810d69b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,6 +9,7 @@ require('babel-register'); if (process.env.NODE_ENV === 'production') { + require('./gulp/gulp-semanticui'); require('./gulp/gulp-apidoc'); require('./gulp/gulp-newstuff'); require('./gulp/gulp-build'); diff --git a/package.json b/package.json index b9394193a7..aa3a35f870 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,8 @@ "jade": "~1.11.0", "js2xmlparser": "~1.0.0", "json-loader": "^0.5.4", + "less": "^2.7.1", + "less-loader": "^2.2.3", "lodash": "^3.10.1", "lodash.setwith": "^4.2.0", "merge-stream": "^1.0.0", @@ -94,6 +96,7 @@ "rimraf": "^2.4.3", "run-sequence": "^1.1.4", "s3-upload-stream": "^1.0.6", + "semantic-ui-less": "~2.2.4", "serve-favicon": "^2.3.0", "shelljs": "^0.6.0", "stripe": "^4.2.0", diff --git a/test/client/unit/index.js b/test/client/unit/index.js index 6e35a2286d..a44dd9ce1c 100644 --- a/test/client/unit/index.js +++ b/test/client/unit/index.js @@ -6,6 +6,6 @@ require('babel-polyfill'); var testsContext = require.context('./specs', true, /\.spec$/); testsContext.keys().forEach(testsContext); -// require all src files except main.js/ README.md / index.html for coverage. -var srcContext = require.context('../../../website/client', true, /^\.\/(?!(main(\.js)?)|(index(\.html)?)$)/); +// require all .vue and .js files except main.js for coverage. +var srcContext = require.context('../../../website/client', true, /^\.\/(?=(?!main(\.js)?$))(?=(.*\.(vue|js)$))/); srcContext.keys().forEach(srcContext); \ No newline at end of file diff --git a/website/client/assets/semantic-ui/README.md b/website/client/assets/semantic-ui/README.md new file mode 100644 index 0000000000..0fe6787163 --- /dev/null +++ b/website/client/assets/semantic-ui/README.md @@ -0,0 +1,109 @@ +This folder contains the Semantic UI theme used on the website. + +To load a Semantic UI element uncomment it from semantic.less. + +The custom theme files are placed under /site. + +For each element there's a .variables file that contains variables that are different for our theme and a .overrides file that contains custom CSS properties. + +More info on theming can be found at http://semantic-ui.com/usage/theming.html. + +The list of files that can be placed under /site is this: + +├── collections +│   ├── breadcrumb.overrides +│   ├── breadcrumb.variables +│   ├── form.overrides +│   ├── form.variables +│   ├── grid.overrides +│   ├── grid.variables +│   ├── menu.overrides +│   ├── menu.variables +│   ├── message.overrides +│   ├── message.variables +│   ├── table.overrides +│   └── table.variables +├── elements +│   ├── button.overrides +│   ├── button.variables +│   ├── container.overrides +│   ├── container.variables +│   ├── divider.overrides +│   ├── divider.variables +│   ├── flag.overrides +│   ├── flag.variables +│   ├── header.overrides +│   ├── header.variables +│   ├── icon.overrides +│   ├── icon.variables +│   ├── image.overrides +│   ├── image.variables +│   ├── input.overrides +│   ├── input.variables +│   ├── label.overrides +│   ├── label.variables +│   ├── list.overrides +│   ├── list.variables +│   ├── loader.overrides +│   ├── loader.variables +│   ├── rail.overrides +│   ├── rail.variables +│   ├── reveal.overrides +│   ├── reveal.variables +│   ├── segment.overrides +│   ├── segment.variables +│   ├── step.overrides +│   └── step.variables +├── globals +│   ├── reset.overrides +│   ├── reset.variables +│   ├── site.overrides +│   └── site.variables +├── modules +│   ├── accordion.overrides +│   ├── accordion.variables +│   ├── chatroom.overrides +│   ├── chatroom.variables +│   ├── checkbox.overrides +│   ├── checkbox.variables +│   ├── dimmer.overrides +│   ├── dimmer.variables +│   ├── dropdown.overrides +│   ├── dropdown.variables +│   ├── embed.overrides +│   ├── embed.variables +│   ├── modal.overrides +│   ├── modal.variables +│   ├── nag.overrides +│   ├── nag.variables +│   ├── popup.overrides +│   ├── popup.variables +│   ├── progress.overrides +│   ├── progress.variables +│   ├── rating.overrides +│   ├── rating.variables +│   ├── search.overrides +│   ├── search.variables +│   ├── shape.overrides +│   ├── shape.variables +│   ├── sidebar.overrides +│   ├── sidebar.variables +│   ├── sticky.overrides +│   ├── sticky.variables +│   ├── tab.overrides +│   ├── tab.variables +│   ├── transition.overrides +│   └── transition.variables +└── views + ├── ad.overrides + ├── ad.variables + ├── card.overrides + ├── card.variables + ├── comment.overrides + ├── comment.variables + ├── feed.overrides + ├── feed.variables + ├── item.overrides + ├── item.variables + ├── statistic.overrides + └── statistic.variables \ No newline at end of file diff --git a/website/client/assets/semantic-ui/semantic.less b/website/client/assets/semantic-ui/semantic.less new file mode 100644 index 0000000000..321d275ea9 --- /dev/null +++ b/website/client/assets/semantic-ui/semantic.less @@ -0,0 +1,68 @@ +/* + +███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ +██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ +███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ +╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ +███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ +╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ + + Import this file into your LESS project to use Semantic UI without build tools +*/ + +// Un-comment each module when it gets used + +/* Global */ +& { @import "~semantic-ui-less/definitions/globals/reset"; } +& { @import "~semantic-ui-less/definitions/globals/site"; } + +/* Elements */ +// & { @import "~semantic-ui-less/definitions/elements/button"; } +// & { @import "~semantic-ui-less/definitions/elements/container"; } +// & { @import "~semantic-ui-less/definitions/elements/divider"; } +// & { @import "~semantic-ui-less/definitions/elements/flag"; } +// & { @import "~semantic-ui-less/definitions/elements/header"; } +// & { @import "~semantic-ui-less/definitions/elements/icon"; } +// & { @import "~semantic-ui-less/definitions/elements/image"; } +// & { @import "~semantic-ui-less/definitions/elements/input"; } +// & { @import "~semantic-ui-less/definitions/elements/label"; } +// & { @import "~semantic-ui-less/definitions/elements/list"; } +// & { @import "~semantic-ui-less/definitions/elements/loader"; } +// & { @import "~semantic-ui-less/definitions/elements/rail"; } +// & { @import "~semantic-ui-less/definitions/elements/reveal"; } +// & { @import "~semantic-ui-less/definitions/elements/segment"; } +// & { @import "~semantic-ui-less/definitions/elements/step"; } + +/* Collections */ +// & { @import "~semantic-ui-less/definitions/collections/breadcrumb"; } +// & { @import "~semantic-ui-less/definitions/collections/form"; } +& { @import "~semantic-ui-less/definitions/collections/grid"; } +// & { @import "~semantic-ui-less/definitions/collections/menu"; } +// & { @import "~semantic-ui-less/definitions/collections/message"; } +// & { @import "~semantic-ui-less/definitions/collections/table"; } + +/* Views */ +// & { @import "~semantic-ui-less/definitions/views/ad"; } +// & { @import "~semantic-ui-less/definitions/views/card"; } +// & { @import "~semantic-ui-less/definitions/views/comment"; } +// & { @import "~semantic-ui-less/definitions/views/feed"; } +// & { @import "~semantic-ui-less/definitions/views/item"; } +// & { @import "~semantic-ui-less/definitions/views/statistic"; } + +/* Modules */ +// & { @import "~semantic-ui-less/definitions/modules/accordion"; } +// & { @import "~semantic-ui-less/definitions/modules/checkbox"; } +// & { @import "~semantic-ui-less/definitions/modules/dimmer"; } +// & { @import "~semantic-ui-less/definitions/modules/dropdown"; } +// & { @import "~semantic-ui-less/definitions/modules/embed"; } +// & { @import "~semantic-ui-less/definitions/modules/modal"; } +// & { @import "~semantic-ui-less/definitions/modules/nag"; } +// & { @import "~semantic-ui-less/definitions/modules/popup"; } +// & { @import "~semantic-ui-less/definitions/modules/progress"; } +// & { @import "~semantic-ui-less/definitions/modules/rating"; } +// & { @import "~semantic-ui-less/definitions/modules/search"; } +// & { @import "~semantic-ui-less/definitions/modules/shape"; } +// & { @import "~semantic-ui-less/definitions/modules/sidebar"; } +// & { @import "~semantic-ui-less/definitions/modules/sticky"; } +// & { @import "~semantic-ui-less/definitions/modules/tab"; } +// & { @import "~semantic-ui-less/definitions/modules/transition"; } diff --git a/website/client/assets/semantic-ui/site/globals/site.variables b/website/client/assets/semantic-ui/site/globals/site.variables new file mode 100644 index 0000000000..0e13e8f29f --- /dev/null +++ b/website/client/assets/semantic-ui/site/globals/site.variables @@ -0,0 +1,2 @@ +// Disable google fonts +@importGoogleFonts: false; \ No newline at end of file diff --git a/website/client/assets/semantic-ui/theme.config b/website/client/assets/semantic-ui/theme.config new file mode 100644 index 0000000000..6cba11cf19 --- /dev/null +++ b/website/client/assets/semantic-ui/theme.config @@ -0,0 +1,92 @@ +/* + +████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ +╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ + ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ + ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ + ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ + ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ + +*/ + +/******************************* + Theme Selection +*******************************/ + +/* To override a theme for an individual element + specify theme name below +*/ + +/* Global */ +@site : 'default'; +@reset : 'default'; + +/* Elements */ +@button : 'default'; +@container : 'default'; +@divider : 'default'; +@flag : 'default'; +@header : 'default'; +@icon : 'default'; +@image : 'default'; +@input : 'default'; +@label : 'default'; +@list : 'default'; +@loader : 'default'; +@rail : 'default'; +@reveal : 'default'; +@segment : 'default'; +@step : 'default'; + +/* Collections */ +@breadcrumb : 'default'; +@form : 'default'; +@grid : 'default'; +@menu : 'default'; +@message : 'default'; +@table : 'default'; + +/* Modules */ +@accordion : 'default'; +@checkbox : 'default'; +@dimmer : 'default'; +@dropdown : 'default'; +@embed : 'default'; +@modal : 'default'; +@nag : 'default'; +@popup : 'default'; +@progress : 'default'; +@rating : 'default'; +@search : 'default'; +@shape : 'default'; +@sidebar : 'default'; +@sticky : 'default'; +@tab : 'default'; +@transition : 'default'; + +/* Views */ +@ad : 'default'; +@card : 'default'; +@comment : 'default'; +@feed : 'default'; +@item : 'default'; +@statistic : 'default'; + +/******************************* + Folders +*******************************/ + +/* Path to theme packages */ +@themesFolder : 'themes'; + +/* Path to site override folder */ +@siteFolder : '../../website/client/semantic-ui/site'; + + +/******************************* + Import Theme +*******************************/ + +@import "~semantic-ui-less/theme.less"; + +/* End Config */ \ No newline at end of file diff --git a/website/client/components/app.vue b/website/client/components/app.vue index 8cfc70eb15..8438505b97 100644 --- a/website/client/components/app.vue +++ b/website/client/components/app.vue @@ -1,5 +1,5 @@