From 33545cb3b57c308aebfc441c79367e53a7e873bd Mon Sep 17 00:00:00 2001 From: Riku Rouvila Date: Fri, 27 Nov 2015 13:53:30 +0200 Subject: [PATCH] update development environment --- .babelrc | 4 +- gulpfile.babel.js | 26 +-- gulpfile.js | 168 ------------------ .../repository/__tests__/renderer.js | 37 ---- src/components/repository/index.js | 28 --- src/components/repository/index.styl | 17 -- src/index.jade | 99 ++++++++++- src/js/api.js | 2 +- src/js/components/{email.jsx => email.js} | 0 src/js/components/{fader.jsx => fader.js} | 0 src/js/components/{feed.jsx => feed.js} | 16 +- .../{inviteForm.jsx => inviteForm.js} | 0 src/js/components/{members.jsx => members.js} | 0 src/main.js | 8 - src/services/github.js | 13 -- src/style.styl | 8 - src/styles/icons.less | 6 +- 17 files changed, 128 insertions(+), 304 deletions(-) delete mode 100644 gulpfile.js delete mode 100644 src/components/repository/__tests__/renderer.js delete mode 100644 src/components/repository/index.js delete mode 100644 src/components/repository/index.styl rename src/js/components/{email.jsx => email.js} (100%) rename src/js/components/{fader.jsx => fader.js} (100%) rename src/js/components/{feed.jsx => feed.js} (86%) rename src/js/components/{inviteForm.jsx => inviteForm.js} (100%) rename src/js/components/{members.jsx => members.js} (100%) delete mode 100644 src/main.js delete mode 100644 src/services/github.js delete mode 100644 src/style.styl diff --git a/.babelrc b/.babelrc index af0f0c3..86c445f 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["es2015"] -} \ No newline at end of file + "presets": ["es2015", "react"] +} diff --git a/gulpfile.babel.js b/gulpfile.babel.js index dda3d1c..1d41d15 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -1,23 +1,25 @@ import browserify from 'browserify'; import browserSync from 'browser-sync'; import duration from 'gulp-duration'; +import es from 'event-stream'; +import exorcist from 'exorcist'; import gulp from 'gulp'; import gutil from 'gulp-util'; +import inject from 'gulp-inject'; import jade from 'gulp-jade'; +import less from 'gulp-less'; import notifier from 'node-notifier'; import path from 'path'; import prefix from 'gulp-autoprefixer'; import rev from 'gulp-rev'; import source from 'vinyl-source-stream'; -import exorcist from 'exorcist'; -import transform from 'vinyl-transform'; import sourcemaps from 'gulp-sourcemaps'; import streamify from 'gulp-streamify'; import stylus from 'gulp-stylus'; +import transform from 'vinyl-transform'; import uglify from 'gulp-uglify'; -import watchify from 'watchify'; import watch from 'gulp-watch'; -import inject from 'gulp-inject'; +import watchify from 'watchify'; /*eslint "no-process-env":0 */ const production = process.env.NODE_ENV === 'production'; @@ -26,7 +28,7 @@ const config = { source: './src', destination: './public', scripts: { - source: './src/main.js', + source: './src/js/main.js', destination: './public/js/', extensions: ['.jsx'], filename: 'bundle.js' @@ -38,12 +40,13 @@ const config = { revision: './public/**/*.html' }, styles: { - source: './src/style.styl', - watch: './src/**/*.styl', + source: './src/styles/style.styl', + watch: './src/styles/**/*.styl', + icons: './src/styles/icons.less', destination: './public/css/' }, assets: { - source: './src/assets/**/*.*', + source: ['./src/assets/**/*.*', './node_modules/font-awesome/fonts*/*.*'], watch: './src/assets/**/*.*', destination: './public/' }, @@ -116,11 +119,14 @@ gulp.task('styles', () => { pipeline = pipeline.pipe(sourcemaps.init()); } - pipeline = pipeline.pipe(stylus({ + const icons = gulp.src(config.styles.icons) + .pipe(less()); + + pipeline = es.merge(icons, pipeline.pipe(stylus({ 'include css': true, paths: ['node_modules', path.join(__dirname, config.source)], compress: production - })) + }))) .on('error', handleError) .pipe(prefix('last 2 versions', 'Chrome 34', 'Firefox 28', 'iOS 7')); diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index a2d9447..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,168 +0,0 @@ -'use strict'; - -var browserify = require('browserify'), - concat = require('gulp-concat'), - CSSmin = require('gulp-minify-css'), - ecstatic = require('ecstatic'), - es = require('event-stream'), - gulp = require('gulp'), - gutil = require('gulp-util'), - jade = require('gulp-jade'), - less = require('gulp-less'), - livereload = require('gulp-livereload'), - path = require('path'), - prefix = require('gulp-autoprefixer'), - source = require('vinyl-source-stream'), - streamify = require('gulp-streamify'), - stylus = require('gulp-stylus'), - uglify = require('gulp-uglify'), - httpProxy = require('http-proxy'), - watchify = require('watchify'); - -var production = process.env.NODE_ENV === 'production'; - -var config = { - scripts: { - source: './src/js/main.js', - destination: './public/js/', - filename: 'bundle.js', - extensions: ['.jsx'] - }, - templates: { - source: './src/jade/*.jade', - watch: './src/jade/*.jade', - destination: './public/' - }, - styles: { - source: './src/styles/style.styl', - icons: './src/styles/icons.less', - filename: 'style.css', - watch: './src/styles/*.*', - destination: './public/css/' - }, - assets: { - source: ['./src/assets/**/*.*', './bower_components/font-awesome/fonts*/*.*'], - watch: './src/assets/**/*.*', - destination: './public/' - } -}; - -function handleError(err) { - gutil.log(err); - gutil.beep(); - return this.emit('end'); -}; - -gulp.task('scripts', function() { - - var bundle = browserify({ - entries: [config.scripts.source], - extensions: config.scripts.extensions, - debug: !production - }) - .bundle() - .on('error', handleError) - .pipe(source(config.scripts.filename)); - - if (production) { - bundle.pipe(streamify(uglify())); - } - - return bundle - .pipe(gulp.dest(config.scripts.destination)); -}); - -gulp.task('templates', function() { - return gulp.src(config.templates.source) - .pipe(jade({ - pretty: !production - })) - .on('error', handleError) - .pipe(gulp.dest(config.templates.destination)) - .pipe(livereload({ - auto: false - })); -}); - -gulp.task('styles', function() { - - var styles = gulp.src(config.styles.source) - .pipe(stylus({ - 'include css': true - })); - - var icons = gulp.src(config.styles.icons) - .pipe(less()); - - styles = es.merge(styles, icons) - .pipe(concat(config.styles.filename)) - .on('error', handleError) - .pipe(prefix('last 2 versions', 'Chrome 34', 'Firefox 28', 'iOS 7')); - - if (production) { - styles = styles.pipe(CSSmin()); - } - - return styles - .pipe(gulp.dest(config.styles.destination)) - .pipe(livereload({ - auto: false - })); -}); - -gulp.task('assets', function() { - return gulp.src(config.assets.source).pipe(gulp.dest(config.assets.destination)); -}); - -gulp.task('server', function() { - var staticHandler = ecstatic({root: path.join(__dirname, 'public')}); - - var proxy = httpProxy.createProxyServer({ - changeOrigin: true, - target: process.env.SERVER || 'https://api.koodiklinikka.fi' - }); - - proxy.on('error', function(err) { - return console.error(err); - }); - - return require('http').createServer(function(req, res) { - if(req.url.indexOf('/api') > -1) { - req.url = req.url.replace('/api', ''); - proxy.web(req, res); - return; - } - staticHandler.apply(this, arguments); - }).listen(9001); -}); - -gulp.task('watch', function() { - livereload.listen(); - - gulp.watch(config.templates.watch, ['templates']); - gulp.watch(config.styles.watch, ['styles']); - gulp.watch(config.assets.watch, ['assets']); - - var bundle = watchify(browserify({ - entries: [config.scripts.source], - extensions: config.scripts.extensions, - debug: !production, - cache: {}, - packageCache: {}, - fullPaths: true - })); - - return bundle.on('update', function() { - gutil.log('Starting', ' \'' + (gutil.colors.cyan('rebundle')) + '\'', '...'); - - bundle.bundle() - .on('error', handleError).pipe(source(config.scripts.filename)) - .pipe(gulp.dest(config.scripts.destination)) - .pipe(livereload()); - - }).emit('update'); -}); - -gulp.task('no-js', ['templates', 'styles', 'assets']); -gulp.task('build', ['scripts', 'no-js']); -gulp.task('default', ['watch', 'no-js', 'server']); diff --git a/src/components/repository/__tests__/renderer.js b/src/components/repository/__tests__/renderer.js deleted file mode 100644 index c46aca3..0000000 --- a/src/components/repository/__tests__/renderer.js +++ /dev/null @@ -1,37 +0,0 @@ -/* globals beforeEach, describe, it */ -import {render} from '../'; -import {expect} from 'chai'; - -const REPO_DATA = { - html_url: 'http://example.com', - full_name: 'Gulp project template', - description: 'Hello world!' -}; - -const COMMITS = [{ - message: 'initial commit', - committer: { - name: 'Riku' - } -}, { - message: 'final commit', - committer: { - name: 'L.H.Ahne' - } -}]; - -describe('View renderer', function() { - beforeEach(function() { - document.body.innerHTML = render(REPO_DATA, COMMITS); - }); - - it('should render a title with the string "Hello world!"', function() { - const $title = document.getElementsByTagName('h1')[0]; - expect($title.innerHTML).to.equal('Hello world!'); - }); - - it('should render 2 list items', function() { - const $listItems = document.querySelectorAll('li'); - expect($listItems.length).to.equal(2); - }); -}); diff --git a/src/components/repository/index.js b/src/components/repository/index.js deleted file mode 100644 index 9317029..0000000 --- a/src/components/repository/index.js +++ /dev/null @@ -1,28 +0,0 @@ - -export function render(repository, commits) { - const $commits = commits.map(commit => { - return ` -
  • - - ${commit.message.replace(/\n/g, '
    ')} - -

    - - ${commit.committer.name} - -
    • `; - }); - - return ` -
    -

    ${repository.description}

    -

    - ${repository.full_name} -

    - -
    - `; -} - diff --git a/src/components/repository/index.styl b/src/components/repository/index.styl deleted file mode 100644 index e733b92..0000000 --- a/src/components/repository/index.styl +++ /dev/null @@ -1,17 +0,0 @@ -.repository__title - margin-bottom 0 - -.repository__description - margin-top 0 - -.repository__commits - margin-top 2em - -.commit - margin 1em 0 - padding 1em 0 - border-bottom 1px solid #eee - - small - color #777 - diff --git a/src/index.jade b/src/index.jade index c5ab11f..3cce232 100644 --- a/src/index.jade +++ b/src/index.jade @@ -1,10 +1,105 @@ doctype html html head - title Gulp template + title Koodiklinikka // inject:css // endinject + meta(name='description', content='Koodiklinikka on suomalainen Slack-yhteisö ohjelmistoalan harrastajille ja ammattilaisille.') + meta(name='keywords', content='ohjelmointi,frontend,open source,devaus,suomi,javascript,clojure,go,java,node.js,io.js,angular.js,web') + meta(charset='utf-8') + meta(name='viewport', content='width=device-width, initial-scale=1') + meta(name='apple-mobile-web-app-capable', content='yes') + + script. + if(location.hostname === 'koodiklinikka.fi' && location.protocol !== 'https:') { + location.protocol = 'https'; + } + link(rel='apple-touch-icon', sizes='57x57', href='icons/apple-touch-icon-57x57.png') + link(rel='apple-touch-icon', sizes='114x114', href='icons/apple-touch-icon-114x114.png') + link(rel='apple-touch-icon', sizes='72x72', href='icons/apple-touch-icon-72x72.png') + link(rel='apple-touch-icon', sizes='144x144', href='icons/apple-touch-icon-144x144.png') + link(rel='apple-touch-icon', sizes='60x60', href='icons/apple-touch-icon-60x60.png') + link(rel='apple-touch-icon', sizes='120x120', href='icons/apple-touch-icon-120x120.png') + link(rel='apple-touch-icon', sizes='76x76', href='icons/apple-touch-icon-76x76.png') + link(rel='apple-touch-icon', sizes='152x152', href='icons/apple-touch-icon-152x152.png') + link(rel='apple-touch-icon', sizes='180x180', href='icons/apple-touch-icon-180x180.png') + link(rel='icon', type='image/png', href='icons/favicon-192x192.png', sizes='192x192') + link(rel='icon', type='image/png', href='icons/favicon-160x160.png', sizes='160x160') + link(rel='icon', type='image/png', href='icons/favicon-96x96.png', sizes='96x96') + link(rel='icon', type='image/png', href='icons/favicon-16x16.png', sizes='16x16') + link(rel='icon', type='image/png', href='icons/favicon-32x32.png', sizes='32x32') + link(rel='shortcut icon', href='icons/favicon.ico') + link(rel='icon', href='icons/favicon.ico') + meta(name='msapplication-TileColor', content='#10558c') + meta(name='msapplication-TileImage', content='icons/mstile-144x144.png') + meta(property='og:image', content='images/logo.png') + script(src='//use.typekit.net/scb5xny.js') + script. + try{Typekit.load();}catch(e){}; + body - h1 Hello world! + .site + .container + .header + video(autoplay, loop, poster='images/poster.jpg', class='header__video-bg') + source(src='videos/jumbo.mp4', type='video/mp4') + .header__container + .header__headline + .header__logo + h1.header__title Slack-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille. + + .content + section + .row + h3 Tule mukaan + #invite-form + + section + .row + .bread + .column.column1-2 + h3 Yhteisö ohjelmoinnista kiinnostuneille + p. + Koodiklinikka on yhteisö, joka kokoaa Suomen ohjelmistoalan työntekijät, harrastajat ja vasta-alkajat yhteen. + Tarkoituksenamme on yhdistää ja kasvattaa suomalaista ohjelmointiyhteisöä, sekä tarjota apua ja uusia kontakteja ohjelmoinnista innostuneille nuorille. + p. + Mukaan liittyminen on ilmaista ja helppoa. Jätä sähköpostiosoitteesi ylläolevaan kenttään ja lähetämme sinulle kutsun Slack-yhteisöömme. + .column.column1-2 + a(href='images/slack.png', target='_blank') + img(src='images/slack.png') + + + .row + .bread + .column.column2-5 + img(src='images/octocat.png') + + .column.column3-5 + h3 Avoin lähdekoodi + p + |Suosimme avointa lähdekoodia ja kaikki käyttämämme koodi on vapaasti saatavilla ja hyödynnettävissä Github-organisaatiomme sivulta. + |Organisaation jäseneksi otamme kaikki Slack-yhteisömme jäsenet ja kontribuutio projekteihimme otetaan lämpimästi vastaan. + + #members + + #feed + + + footer + a(href='https://koodiklinikka.slack.com') + i.fa.fa-slack + + a(href='https://github.com/koodiklinikka/koodiklinikka.fi') + i.fa.fa-github + + a(href='https://twitter.com/koodiklinikka') + i.fa.fa-twitter + + a(href='https://www.facebook.com/koodiklinikka') + i.fa.fa-facebook + + span#email + + #fader // inject:js // endinject diff --git a/src/js/api.js b/src/js/api.js index 6741055..7277a28 100644 --- a/src/js/api.js +++ b/src/js/api.js @@ -1,4 +1,4 @@ -var host = process.env.NODE_ENV === 'production' ? 'https://lit-plateau-4689.herokuapp.com/' : '/api/'; +var host = process.env.SERVER || 'https://lit-plateau-4689.herokuapp.com/'; module.exports = function(path) { return host + path; diff --git a/src/js/components/email.jsx b/src/js/components/email.js similarity index 100% rename from src/js/components/email.jsx rename to src/js/components/email.js diff --git a/src/js/components/fader.jsx b/src/js/components/fader.js similarity index 100% rename from src/js/components/fader.jsx rename to src/js/components/fader.js diff --git a/src/js/components/feed.jsx b/src/js/components/feed.js similarity index 86% rename from src/js/components/feed.jsx rename to src/js/components/feed.js index 254e53a..1f4418c 100644 --- a/src/js/components/feed.jsx +++ b/src/js/components/feed.js @@ -21,14 +21,16 @@ module.exports = React.createClass({ }; }, componentDidMount() { - request.get(api('feeds')).then((res) => { + request.get(api('feeds')) - var feeds = res.data; - var messages = []; - for(var type in feeds) { - var feedMessages = feeds[type].map(transformers[type]); - messages = messages.concat(feedMessages); - } + .then((res) => { + + const messages = _(res.data) + .map((messages, type) => messages.map(transformers[type])) + .flatten() + .value(); + + console.log(messages); this.setState({ messages: _(messages).sortBy('timestamp').reverse().value().slice(0, 40) diff --git a/src/js/components/inviteForm.jsx b/src/js/components/inviteForm.js similarity index 100% rename from src/js/components/inviteForm.jsx rename to src/js/components/inviteForm.js diff --git a/src/js/components/members.jsx b/src/js/components/members.js similarity index 100% rename from src/js/components/members.jsx rename to src/js/components/members.js diff --git a/src/main.js b/src/main.js deleted file mode 100644 index a8af948..0000000 --- a/src/main.js +++ /dev/null @@ -1,8 +0,0 @@ -import {getCommits, getRepo} from './services/github'; -import {render} from './components/repository'; - -Promise.all([getRepo(), getCommits()]) -.then(([repository, commits]) => { - document.body.innerHTML = render(repository, commits); -}); - diff --git a/src/services/github.js b/src/services/github.js deleted file mode 100644 index 8da54c2..0000000 --- a/src/services/github.js +++ /dev/null @@ -1,13 +0,0 @@ -const REPO_URL = 'https://api.github.com/repos/leonidas/gulp-project-template'; - -export function getRepo() { - return fetch(REPO_URL).then(res => res.json()); -} - -export function getCommits() { - return fetch(`${REPO_URL}/commits`) - .then(res => res.json()) - .then(commits => { - return commits.map(({commit}) => commit); - }); -} diff --git a/src/style.styl b/src/style.styl deleted file mode 100644 index 3226077..0000000 --- a/src/style.styl +++ /dev/null @@ -1,8 +0,0 @@ -body, html - margin 0 - padding 1em - font 14px/1.4 'Helvetica Neue', Helvetica, Arial - color #333 - -@import 'components/repository' -// @import 'bootstrap/dist/css/bootstrap.css' diff --git a/src/styles/icons.less b/src/styles/icons.less index 9bdf6b3..c6b2d37 100644 --- a/src/styles/icons.less +++ b/src/styles/icons.less @@ -1,6 +1,6 @@ -@import '../../bower_components/font-awesome/less/variables.less'; -@import '../../bower_components/font-awesome/less/path.less'; -@import '../../bower_components/font-awesome/less/core.less'; +@import '../../node_modules/font-awesome/less/variables.less'; +@import '../../node_modules/font-awesome/less/path.less'; +@import '../../node_modules/font-awesome/less/core.less'; .@{fa-css-prefix}-github:before { content: @fa-var-github; } .@{fa-css-prefix}-slack:before { content: @fa-var-slack; }