Lay client out a bit better
This commit is contained in:
parent
08e0aa7665
commit
0b00b190fc
5 changed files with 191 additions and 26 deletions
22
app.js
22
app.js
|
|
@ -12,14 +12,12 @@ var compress = require('compression');
|
|||
var bodyParser = require('body-parser');
|
||||
var pmongo = require('promised-mongo');
|
||||
|
||||
var index = require('./routes/index');
|
||||
var search = require('./routes/search');
|
||||
var share = require('./routes/share');
|
||||
var itunesProxy = require('./routes/itunes-proxy');
|
||||
|
||||
var browserify = require('connect-browserify');
|
||||
var React = require('react');
|
||||
var nodejsx = require('node-jsx').install();
|
||||
var Home = React.createFactory(require('./client').Home);
|
||||
|
||||
var app = express();
|
||||
|
||||
|
|
@ -52,7 +50,7 @@ app.use(function(req, res, next) {
|
|||
|
||||
if (development) {
|
||||
app.get('/javascript/bundle.js',
|
||||
browserify('./client', {
|
||||
browserify('./client/index.jsx', {
|
||||
debug: true,
|
||||
watch: true
|
||||
}));
|
||||
|
|
@ -75,21 +73,7 @@ app.get('*', function(req,res,next) {
|
|||
}
|
||||
});
|
||||
|
||||
app.get('/', function(req, res, next) {
|
||||
|
||||
var path = url.parse(req.url).pathname;
|
||||
|
||||
req.db.matches.find().sort({created_at:-1}).limit(6).toArray().then(function(docs){
|
||||
var recent = [];
|
||||
docs.forEach(function(doc) {
|
||||
recent.push(doc.services[doc._id.split("$$")[0]]);
|
||||
})
|
||||
|
||||
var home = Home({recent: recent});
|
||||
res.send('<!doctype html>\n' + React.renderToString(home).replace("</body></html>", "<script>var recent = " + JSON.stringify(recent) + "</script></body></html>"));
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/', index);
|
||||
app.post('/search', search);
|
||||
app.get('/:service/:type/:id.json', share.json);
|
||||
app.get('/:service/:type/:id', share.html);
|
||||
|
|
|
|||
153
client/share.jsx
Normal file
153
client/share.jsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
* @jsx React.DOM
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var Router = require('react-router');
|
||||
var request = require('superagent');
|
||||
var ga = require('react-google-analytics');
|
||||
var GAInitiailizer = ga.Initializer;
|
||||
|
||||
var Head = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Match Audio</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@MatchAudio" />
|
||||
<meta name="twitter:title" property="og:title" content="" />
|
||||
<meta name="twitter:description" property="og:description" content="We've matched this music on Rdio, Spotify, Deezer, Beats Music, Google Music and iTunes so you can open it in the service you use." />
|
||||
<meta name="twitter:image:src" property="og:image" content="" />
|
||||
<meta property="og:url" content="" />
|
||||
<link rel="shortcut icon" href="/images/favicon.png" />
|
||||
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css' />
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="/stylesheets/style.css" />
|
||||
</head>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Foot = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<footer>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={this.props.page == "home" ? "col-md-6 col-md-offset-3" : "col-md-12"}>
|
||||
<a href="https://twitter.com/MatchAudio">Tweet</a> or <a href="https://github.com/kudos/match.audio">Fork</a>. A work in progress by <a href="http://crem.in">this guy</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var Recent = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (<div className="row">
|
||||
<div className="col-md-6 col-md-offset-3">
|
||||
<h2>Recently Shared</h2>
|
||||
<div className="row recent">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var RecentItem = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="col-sm-4 col-xs-6">
|
||||
<a href={"/" + this.props.item.service + "/" + this.props.item.type + "/" + this.props.item.id}><img src={this.props.item.artwork.small} width="100%" /></a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var SearchForm = React.createClass({
|
||||
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
var url = this.refs.url.getDOMNode().value.trim();
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
request.post('/search').send({url:url}).end(function(res) {
|
||||
window.location = "/" + res.body.service + "/" + res.body.type + "/" + res.body.id
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<form role="form" method="post" action="/search" onSubmit={this.handleSubmit}>
|
||||
<div className="input-group input-group-lg">
|
||||
<input type="text" name="url" placeholder="Paste link here" className="form-control" autofocus ref="url" />
|
||||
<span className="input-group-btn">
|
||||
<input type="submit" className="btn btn-lg btn-custom" value="Share Music" />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Share = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<html>
|
||||
<Head />
|
||||
<body className="home">
|
||||
<div className="page-wrap">
|
||||
<header>
|
||||
<h1><a href="/">match<span className="audio-lighten">.audio</span></a></h1>
|
||||
</header>
|
||||
<div className="container">
|
||||
<div className="row share-form">
|
||||
<div className="col-md-6 col-md-offset-3">
|
||||
<h1>share</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row blurb">
|
||||
<div className="col-md-6 col-md-offset-3">
|
||||
<p>Make sharing from music services better.
|
||||
We match album and track links from Rdio, Spotify, Deezer, Beats Music, Google Music and iTunes and give you back a link with all of them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Recent items={this.props.recent} />
|
||||
</div>
|
||||
</div>
|
||||
<Foot page="home" />
|
||||
<GAInitiailizer />
|
||||
<script src="/javascript/bundle.js" />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports.Share = Share;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.onload = function() {
|
||||
React.render(<Share items={items} />, document);
|
||||
ga('create', 'UA-66209-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
}
|
||||
}
|
||||
19
routes/index.js
Normal file
19
routes/index.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
"use strict";
|
||||
|
||||
var React = require('react');
|
||||
var nodejsx = require('node-jsx').install({extension: '.jsx'});
|
||||
var Home = React.createFactory(require('../client/index.jsx').Home);
|
||||
|
||||
module.exports = function(req, res, next) {
|
||||
|
||||
req.db.matches.find().sort({created_at:-1}).limit(6).toArray().then(function(docs){
|
||||
var recent = [];
|
||||
docs.forEach(function(doc) {
|
||||
recent.push(doc.services[doc._id.split("$$")[0]]);
|
||||
})
|
||||
|
||||
var home = Home({recent: recent});
|
||||
res.send('<!doctype html>\n' + React.renderToString(home).replace("</body></html>", "<script>var recent = " + JSON.stringify(recent) + "</script></body></html>"));
|
||||
//res.render('index', { page: "home", recent: docs, error: req.flash('search-error') });
|
||||
});
|
||||
}
|
||||
|
|
@ -2,6 +2,12 @@
|
|||
var path = require('path');
|
||||
var Promise = require('bluebird');
|
||||
var util = require('util');
|
||||
|
||||
var browserify = require('connect-browserify');
|
||||
var React = require('react');
|
||||
var nodejsx = require('node-jsx').install();
|
||||
var Share = React.createFactory(require('../client/share').Share);
|
||||
|
||||
var services = {};
|
||||
|
||||
require("fs").readdirSync(path.join(__dirname, "..", "lib", "services")).forEach(function(file) {
|
||||
|
|
@ -60,13 +66,16 @@ module.exports.html = function(req, res, next) {
|
|||
|
||||
items.unshift(doc.services[serviceId]);
|
||||
|
||||
res.render(type, {
|
||||
page: type,
|
||||
title: doc.services[serviceId].name + " by " + doc.services[serviceId].artist.name,
|
||||
matching: doc.services[serviceId],
|
||||
matches: items,
|
||||
thisUrl: req.userProtocol + '://' + req.get('host') + req.originalUrl
|
||||
});
|
||||
var share = Share({items: items});
|
||||
res.send('<!doctype html>\n' + React.renderToString(share).replace("</body></html>", "<script>var items = " + JSON.stringify(items) + "</script></body></html>"));
|
||||
|
||||
// res.render(type, {
|
||||
// page: type,
|
||||
// title: doc.services[serviceId].name + " by " + doc.services[serviceId].artist.name,
|
||||
// matching: doc.services[serviceId],
|
||||
// matches: items,
|
||||
// thisUrl: req.userProtocol + '://' + req.get('host') + req.originalUrl
|
||||
// });
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue