Repository: prakhar1989/react-term
Branch: master
Commit: 8b8888d9caf8
Files: 6
Total size: 8.9 KB
Directory structure:
gitextract_krtrullj/
├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package.json
└── src/
└── app.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015 Prakhar Srivastav
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# React Term
A couple of days back, I got an email from Columbia (the university that I'm stated to join) informing me that my new email ID and other student IT services were ready. Hosting my own webpage on a university's domain had long been a wish of mine, so as soon as I learnt about having some server space on the university's server I got excited wanted to put something interesting. Since I already have a boring [about me](http://prakhar.me/about) page, I went with something different and built a simple terminal emulator in [React](http://facebook.github.io/react/)!
Demo - http://columbia.edu/~ps2894
### Run
```
$ npm install
$ npm run dist
```
### Dev
```
$ npm install
$ npm run watch
```
================================================
FILE: index.html
================================================
Prakhar Srivastav
================================================
FILE: package.json
================================================
{
"name": "react-term",
"version": "0.0.1",
"description": "",
"main": "reactcart.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "watchify -t reactify ./src/app.js -o ./build/main.min.js -v",
"dist": "npm run remove-dist && npm run build-standalone",
"remove-dist": "rm build/*.js",
"build-standalone": "NODE_ENV=production browserify -t reactify ./src/app.js | uglifyjs -mc > build/main.min.js"
},
"author": "",
"license": "MIT",
"dependencies": {
"babelify": "^5.0.4",
"browserify": "^9.0.3",
"react": "^0.13.1",
"reactify": "^1.1.0",
"uglify-js": "^2.4.20",
"underscore": "^1.8.3",
"watchify": "^3.1.0"
}
}
================================================
FILE: src/app.js
================================================
var React = require('react');
var App = React.createClass({
getInitialState: function() {
return {
commands: {},
history: [],
prompt: '$ '
}
},
clearHistory: function() {
this.setState({ history: [] });
},
registerCommands: function() {
this.setState({
commands: {
'clear' : this.clearHistory,
'ls' : this.listFiles,
'intro' : this.showWelcomeMsg,
'help' : this.showHelp,
'cat' : this.catFile,
'source': this.openLink('https://github.com/prakhar1989/react-term/blob/master/src/app.js'),
'github': this.openLink('http://github.com/prakhar1989'),
'blog' : this.openLink('http://prakhar.me'),
'resume': this.openLink('https://github.com/prakhar1989/cv/blob/master/Resume.pdf')
}
});
},
listFiles: function() {
this.addHistory("README.md");
},
showWelcomeMsg: function() {
this.addHistory("Hello, I'm Prakhar Srivastav, a graduate student in the Computer Science department (Machine Learning track).");
this.addHistory("Type `help` to see what all commands are available");
},
catFile: function(arg) {
if (arg === "README.md") {
this.addHistory('### REACT TERM');
this.addHistory("A couple of days back, I got an email from Columbia (the university that I'm stated to join) informing me that my new email ID and other student IT services were ready. Hosting my own webpage on a university's domain had long been a wish of mine, so as soon as I learnt about having some server space on the university's server I got excited wanted to put something interesting. Since I already have " +
"a boring about me page, I went " +
"with something different and built a simple terminal emulator in React!");
this.addHistory("type `source` to view the source code");
} else {
this.addHistory("cat: " + arg + ": No such file or directory");
}
},
openLink: function(link) {
return function() {
window.open(link, '_blank');
}
},
showHelp: function() {
this.addHistory("help - this help text");
this.addHistory("github - view my github profile");
this.addHistory("source - browse the code for this page");
this.addHistory("intro - print intro message");
this.addHistory("blog - read some stuff that I've written");
this.addHistory("clear - clear screen");
this.addHistory("cat - print contents of a file");
this.addHistory("ls - list files");
this.addHistory("resume - view my resume");
},
componentDidMount: function() {
var term = this.refs.term.getDOMNode();
this.registerCommands();
this.showWelcomeMsg();
term.focus();
},
componentDidUpdate: function() {
var el = React.findDOMNode(this);
//var container = document.getElementsByClassName('container')[0];
var container = document.getElementById("main");
container.scrollTop = el.scrollHeight;
},
handleInput: function(e) {
if (e.key === "Enter") {
var input_text = this.refs.term.getDOMNode().value;
var input_array = input_text.split(' ');
var input = input_array[0];
var arg = input_array[1];
var command = this.state.commands[input];
this.addHistory(this.state.prompt + " " + input_text);
if (command === undefined) {
this.addHistory("sh: command not found: " + input);
} else {
command(arg);
}
this.clearInput();
}
},
clearInput: function() {
this.refs.term.getDOMNode().value = "";
},
addHistory: function(output) {
var history = this.state.history;
history.push(output)
this.setState({
'history': history
});
},
handleClick: function() {
var term = this.refs.term.getDOMNode();
term.focus();
},
render: function() {
var output = this.state.history.map(function(op, i) {
return
{op}
});
return (
{output}
{this.state.prompt}
)
}
});
// render it dawg!
var AppComponent = React.createFactory(App);
React.render(AppComponent(), document.getElementById('app'));