jcreek/phldnhack
1
0
Fork 0
mirror of https://github.com/jcreek/phldnhack.git synced 2026-07-13 19:03:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

added server

Browse Source
This commit is contained in:
Joe Reeve
2015-11-07 12:55:26 +00:00
parent d79aa68110
commit 88e84ef4d7
8 changed files with 112 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/components.html
+15 -1
View File
@@ -1,2 +1,16 @@
<script id="home"> <script type="text/ractive" id="home"><div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
</script> </script>
build/index.html
+24 -2
View File
@@ -4,14 +4,36 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>RCard</title> <title>RCard</title>
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script> <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script src='index.js'></script> <script src='index.js'></script>
</head> </head>
<body> <body>
<script id="home"> <script type="text/ractive" id="home"><div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
</script> </script>
<div class='load'></div> <div id='load'></div>
</body> </body>
</html> </html>
build/index.js
+14 -2
View File
@@ -1,11 +1,23 @@
(function(Ractive){ $(document).ready(function(){
Ractive.components.home = Ractive.extend({ Ractive.components.home = Ractive.extend({
template:'#home' template:'#home'
}); });
$.getJSON('/sample', function(res){
var ractive = new Ractive.components.home({
el:'#load',
data:res
});
});
//Code below here //Code below here
})(Ractive);
});
client/components/home/home.html
+15 -1
View File
@@ -1 +1,15 @@
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
client/index.html
+9 -1
View File
@@ -4,13 +4,21 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>RCard</title> <title>RCard</title>
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script> <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script src='index.js'></script> <script src='index.js'></script>
</head> </head>
<body> <body>
@@include('components.html') @@include('components.html')
<div class='load'></div> <div id='load'></div>
</body> </body>
</html> </html>
client/index.js
+14 -2
View File
@@ -1,8 +1,20 @@
(function(Ractive){ $(document).ready(function(){
@@include('components.js') @@include('components.js')
$.getJSON('/sample', function(res){
var ractive = new Ractive.components.home({
el:'#load',
data:res
});
});
//Code below here //Code below here
})(Ractive);
});
gulpfile.js
+1 -1
View File
@@ -34,7 +34,7 @@ gulp.task('componentJS', function(){
gulp.task('componentHTML', function(){ gulp.task('componentHTML', function(){
return gulp.src(paths.componentHTML).pipe( return gulp.src(paths.componentHTML).pipe(
insert.transform(function(contents, file) { insert.transform(function(contents, file) {
return '<script id="' + file.path.split('/').slice(-1)[0].split('.')[0] + '">' + contents + '</script>'; return '<script type="text/ractive" id="' + file.path.split('/').slice(-1)[0].split('.')[0] + '">' + contents + '</script>';
})).pipe(concat('components.html')) })).pipe(concat('components.html'))
.pipe(gulp.dest('./build')); .pipe(gulp.dest('./build'));
}); });
server/app.js
+18
View File
@@ -0,0 +1,18 @@
var fs = require('fs');
var express = require('express');
var app = express();
app.use(express.static('../build'))
app.get('/', function(req, res){
res.send(fs.readFileSync('../build/index.html'));
});
app.get('/sample', function(req, res){
res.send({
studentName:'Jonnie',
age:13
});
});
app.listen(1337);