koodiklinikka/koodiklinikka.fi
1
0
Fork 0
mirror of https://github.com/koodiklinikka/koodiklinikka.fi.git synced 2026-01-26 11:23:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

update development environment

Browse Source
This commit is contained in:
Riku Rouvila
2015-11-27 13:53:30 +02:00
parent 3115e81d3f
commit 33545cb3b5
17 changed files with 128 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.babelrc
View File

@@ -1,3 +1,3 @@
{
"presets": ["es2015"]
}
"presets": ["es2015", "react"]
}

26
gulpfile.babel.js
View File

@@ -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'));

168
gulpfile.js
View File

@@ -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']);

37
src/components/repository/__tests__/renderer.js
View File

@@ -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);
});
});

28
src/components/repository/index.js
View File

@@ -1,28 +0,0 @@
export function render(repository, commits) {
const $commits = commits.map(commit => {
return `
<li class="commit">
<span>
${commit.message.replace(/\n/g, '<br />')}
<span>
<br /><br />
<small>
${commit.committer.name}
</small>
</li>`;
});
return `
<div class="repository">
<h1 class="repository__title">${repository.description}</h1>
<h2 class="repository__description">
<a href="${repository.html_url}">${repository.full_name}</a>
</h2>
<ul class="repository__commits">
${$commits.join('')}
</ul>
</div>
`;
}

17
src/components/repository/index.styl
View File

@@ -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

99
src/index.jade
View File

@@ -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 <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja&nbsp;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ä <a href="https://github.com/koodiklinikka">Github-organisaatiomme sivulta</a>.
|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

2
src/js/api.js
View File

@@ -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;

0
src/js/components/email.jsx → src/js/components/email.js
View File

0
src/js/components/fader.jsx → src/js/components/fader.js
View File

16
src/js/components/feed.jsx → src/js/components/feed.js
View File

@@ -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)

0
src/js/components/inviteForm.jsx → src/js/components/inviteForm.js
View File

0
src/js/components/members.jsx → src/js/components/members.js
View File

8
src/main.js
View File

@@ -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);
});

13
src/services/github.js
View File

@@ -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);
});
}

8
src/style.styl
View File

@@ -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'

6
src/styles/icons.less
View File

@@ -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; }