Browse Source

Add fonts and Riot.js

master
Sven Slootweg 6 years ago
parent
commit
a4fd84ef17
  1. 3
      .babelrc
  2. 22
      gulpfile.js
  3. 5
      package.json
  4. 8
      src/components/app/component.tag
  5. 4
      src/components/app/index.js
  6. 16
      src/components/fileset-browser/component.tag
  7. 1
      src/components/fileset-browser/index.js
  8. 2
      src/stylesheets/style.scss
  9. 6
      src/views/index.jade
  10. 12
      src/views/index.js

3
.babelrc

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

22
gulpfile.js

@ -4,6 +4,7 @@ var path = require("path");
var xtend = require("xtend");
var rfr = require("rfr");
var riot = require("gulp-riot");
var sass = require("gulp-sass");
var jade = require("gulp-jade");
var babel = require("gulp-babel");
@ -24,6 +25,7 @@ var loggerOptions = {
var babelLogger = namedLog("babel", loggerOptions);
var jadeLogger = namedLog("jade", loggerOptions);
var sassLogger = namedLog("sass", loggerOptions);
var riotLogger = namedLog("riot", loggerOptions);
var electronLogger = namedLog("electron", loggerOptions);
var livereloadLogger = namedLog("livereload", loggerOptions);
@ -33,7 +35,8 @@ var sources = {
"babel-main": "app.js",
"babel-lib": "src/**/*.js",
"jade-views": "src/views/**/*.jade",
"sass-main": "src/stylesheets/**/*.scss"
"sass-main": "src/stylesheets/**/*.scss",
"riot-components": "src/components/**/*.tag"
}
function getLiveReloadStream() {
@ -44,7 +47,7 @@ function getLiveReloadStream() {
return lr;
}
gulp.task("electron", ['babel-lib', 'babel-main', 'jade-views', 'sass-main'], function() {
gulp.task("electron", ['babel-lib', 'babel-main', 'jade-views', 'sass-main', 'riot-components'], function() {
var electronProcess = runProcess(path.join(__dirname, "node_modules/.bin/electron"), [__dirname], {
logger: electronLogger,
env: xtend(process.env, {
@ -94,6 +97,20 @@ gulp.task("sass-main", function() {
.pipe(gulp.dest("lib/stylesheets/"));
});
gulp.task("riot-components", function() {
return gulp.src(sources["riot-components"])
.pipe(plumber(riotLogger.error))
.pipe(cache("riot-components"))
.pipe(riot({
type: "babel",
template: "jade",
style: "scss"
}))
.pipe(riotLogger.stream())
.pipe(getLiveReloadStream())
.pipe(gulp.dest("lib/components/"));
});
gulp.task('watch', function () {
livereload.listen();
@ -101,6 +118,7 @@ gulp.task('watch', function () {
gulp.watch(sources["babel-main"], ["babel-main"]);
gulp.watch(sources["jade-views"], ["jade-views"]);
gulp.watch(sources["sass-main"], ["sass-main"]);
gulp.watch(sources["riot-components"], ["riot-components"]);
});
gulp.task('default', ['watch', 'electron']);

5
package.json

@ -21,17 +21,21 @@
"bhttp": "^1.2.1",
"bluebird": "^3.3.4",
"chalk": "^1.1.3",
"document-ready-promise": "^3.0.1",
"electron-prebuilt": "^0.37.5",
"file-url": "^1.1.0",
"gulp-named-log": "0.0.1",
"gulp-sass": "^2.2.0",
"ia-headers": "^1.0.0",
"jquery": "^2.2.3",
"rfr": "^1.2.3",
"riot": "^2.3.18",
"uuid": "^2.0.1",
"xtend": "^4.0.1"
},
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-preset-es2015-riot": "^1.0.4",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-cached": "^1.1.0",
@ -40,6 +44,7 @@
"gulp-plumber": "^1.1.0",
"gulp-remember": "^0.3.1",
"gulp-rename": "^1.2.2",
"gulp-riot": "^0.4.9",
"split": "^1.0.0",
"webfont-dl": "^0.1.2"
}

8
src/components/app/component.tag

@ -0,0 +1,8 @@
app
h1 Some app
fileset-browser
script.
this.tags["fileset-browser"].on("click", () => {
console.log("Clicked!");
})

4
src/components/app/index.js

@ -0,0 +1,4 @@
const rfr = require("rfr");
rfr("lib/components/fileset-browser");
require("./component");

16
src/components/fileset-browser/component.tag

@ -0,0 +1,16 @@
fileset-browser
strong Fileset browser goes here
style(scoped).
strong {
color: red;
}
script.
let $ = require("jquery")
this.on("mount", () => {
$("strong", this.root).on("click", () => {
this.trigger("click");
});
});

1
src/components/fileset-browser/index.js

@ -0,0 +1 @@
require("./component")

2
src/stylesheets/style.scss

@ -1,3 +1,3 @@
body {
font-family: sans-serif;
font-family: "Source Sans Pro", sans-serif;
}

6
src/views/index.jade

@ -2,7 +2,9 @@ html
head
meta(charset="UTF-8")
title Sample application
link(rel="stylesheet", href="../stylesheets/fonts.css")
link(rel="stylesheet", href="../stylesheets/style.css")
script(src="index.js")
body
h1 Sample header 2
p Some sample content
app

12
src/views/index.js

@ -0,0 +1,12 @@
const Promise = require("bluebird");
const documentReady = require("document-ready-promise");
const riot = require("riot");
const rfr = require("rfr");
rfr("lib/components/app");
Promise.try(() => {
return documentReady();
}).then(() => {
riot.mount("app");
})
Loading…
Cancel
Save