├── .gitignore ├── LICENSE ├── README.md ├── gulpfile.js ├── package.json └── src ├── css └── app.css ├── index.html └── js ├── app.js └── components └── github-file-explorer ├── index.js └── template.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Alex Sears 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuejs-github-explorer-blog 2 | This is the repository for the code from the blog post "Create a Github Explorer Using Vue.js." 3 | 4 | 5 | [Read the Tutorial Here](https://scotch.io/tutorials/create-a-github-file-explorer-using-vue-js) by [Alex Sears](https://twitter.com/searsaw) 6 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var copy = require('gulp-copy'); 3 | var concat = require('gulp-concat'); 4 | var uglify = require('gulp-uglify'); 5 | var sourcemaps = require('gulp-sourcemaps'); 6 | var connect = require('gulp-connect'); 7 | var browserify = require('browserify'); 8 | var partialify = require('partialify'); 9 | var source = require('vinyl-source-stream'); 10 | var buffer = require('vinyl-buffer'); 11 | 12 | gulp.task('html', function() { 13 | gulp.src('src/*.html') 14 | .pipe(gulp.dest('dist')) 15 | .pipe(connect.reload());; 16 | }); 17 | 18 | gulp.task('css', function() { 19 | var stylesheets = [ 20 | 'node_modules/bootstrap/dist/css/bootstrap.min.css', 21 | 'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', 22 | 'node_modules/font-awesome/css/font-awesome.min.css', 23 | 'src/css/app.css' 24 | ]; 25 | 26 | gulp.src(stylesheets) 27 | .pipe(concat('app.min.css')) 28 | .pipe(gulp.dest('dist/css')) 29 | }); 30 | 31 | gulp.task('fonts', function() { 32 | var fonts = [ 33 | 'node_modules/bootstrap/dist/fonts/*', 34 | 'node_modules/font-awesome/fonts/*' 35 | ]; 36 | 37 | gulp.src(fonts) 38 | .pipe(gulp.dest('dist/fonts')); 39 | }); 40 | 41 | gulp.task('js', function() { 42 | browserify({ 43 | entries: 'src/js/app.js', 44 | debug: true 45 | }) 46 | .transform(partialify) 47 | .bundle() 48 | .on('error', function (err) { 49 | console.log(err.toString()); 50 | this.emit("end"); 51 | }) 52 | .pipe(source('app.min.js')) 53 | .pipe(buffer()) 54 | .pipe(sourcemaps.init({ loadMaps: true })) 55 | .pipe(uglify()) 56 | .on('error', function (err) { 57 | console.log(err.toString()); 58 | this.emit("end"); 59 | }) 60 | .pipe(sourcemaps.write()) 61 | .pipe(gulp.dest('dist/js')) 62 | .pipe(connect.reload()); 63 | }); 64 | 65 | gulp.task('start-server', function() { 66 | connect.server({ root: 'dist', livereload: true }); 67 | }); 68 | 69 | gulp.task('watch:html', function() { 70 | gulp.watch('src/*.html', ['html']); 71 | }); 72 | 73 | gulp.task('watch:js', function() { 74 | gulp.watch('src/js/**/*.*', ['js']); 75 | }); 76 | 77 | gulp.task('compile', ['html', 'css', 'fonts', 'js']); 78 | gulp.task('watch', ['compile', 'watch:html', 'watch:js']); 79 | gulp.task('serve', ['watch', 'start-server']); 80 | gulp.task('default', ['compile']); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs-github-explorer-blog", 3 | "version": "1.0.0", 4 | "description": "This is the repository for the code from the blog post \"Create a Github Explorer Using Vue.js.\"", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/searsaw/vuejs-github-explorer-blog.git" 8 | }, 9 | "author": "Alex Sears", 10 | "license": "MIT", 11 | "bugs": { 12 | "url": "https://github.com/searsaw/vuejs-github-explorer-blog/issues" 13 | }, 14 | "homepage": "https://github.com/searsaw/vuejs-github-explorer-blog#readme", 15 | "dependencies": { 16 | "bootstrap": "^3.3.5", 17 | "vue": "^1.0.0", 18 | "vue-resource": "^0.1.16" 19 | }, 20 | "devDependencies": { 21 | "browserify": "^11.2.0", 22 | "eslint": "^1.7.3", 23 | "font-awesome": "^4.4.0", 24 | "gulp": "^3.9.0", 25 | "gulp-concat": "^2.6.0", 26 | "gulp-connect": "^2.2.0", 27 | "gulp-copy": "0.0.2", 28 | "gulp-sourcemaps": "^1.6.0", 29 | "gulp-uglify": "^1.4.2", 30 | "partialify": "^3.1.5", 31 | "vinyl-buffer": "^1.0.0", 32 | "vinyl-source-stream": "^1.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 30px; 3 | } 4 | 5 | #changeRepoForm { 6 | margin-bottom: 30px; 7 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue.js Github Explorer Blog 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | var Vue = require('vue'); 2 | Vue.config.debug = true; 3 | Vue.use(require('vue-resource')); 4 | 5 | new Vue({ 6 | el: '#container', 7 | data: { 8 | fullRepoName: '', 9 | username: '', 10 | repo: '' 11 | }, 12 | methods: { 13 | changeRepo: function() { 14 | var splitData = this.fullRepoName.split('/'); 15 | this.username = splitData[0]; 16 | this.repo = splitData[1]; 17 | 18 | console.group("Vue Data"); 19 | console.log("fullRepoName:", this.fullRepoName); 20 | console.log("username:", this.username); 21 | console.log("repo:", this.repo); 22 | console.groupEnd("Vue Data"); 23 | } 24 | }, 25 | components: { 26 | githubFileExplorer: require('./components/github-file-explorer') 27 | } 28 | }); -------------------------------------------------------------------------------- /src/js/components/github-file-explorer/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | template: require('./template.html'), 3 | data: function() { 4 | return { 5 | path: '/', 6 | files: [] 7 | }; 8 | }, 9 | props: { 10 | username: { 11 | type: String, 12 | required: true 13 | }, 14 | repo: { 15 | type: String, 16 | required: true 17 | } 18 | }, 19 | computed: { 20 | fullRepoUrl: function() { 21 | return this.username + '/' + this.repo; 22 | }, 23 | sortedFiles: function() { 24 | return this.files.slice(0).sort(function(a, b) { 25 | if (a.type !== b.type) { 26 | if (a.type === 'dir') { 27 | return -1; 28 | } else { 29 | return 1; 30 | } 31 | } else { 32 | if (a.name < b.name) { 33 | return -1; 34 | } else { 35 | return 1; 36 | } 37 | } 38 | }); 39 | } 40 | }, 41 | methods: { 42 | getFiles: function() { 43 | this.$http.get('https://api.github.com/repos/' + this.fullRepoUrl + '/contents' + this.path, 44 | function(data) { 45 | this.files = data; 46 | } 47 | ); 48 | }, 49 | changePath: function(path) { 50 | this.path = '/' + path; 51 | this.getFiles(); 52 | }, 53 | goBack: function() { 54 | this.path = this.path.split('/').slice(0, -1).join('/'); 55 | if (this.path === '') this.path = '/'; 56 | 57 | this.getFiles(); 58 | } 59 | }, 60 | watch: { 61 | repo: function(newVal, oldVal) { 62 | this.path = '/'; 63 | this.getFiles(); 64 | } 65 | }, 66 | created: function() { 67 | if (this.username && this.repo) this.getFiles(); 68 | } 69 | }; 70 | -------------------------------------------------------------------------------- /src/js/components/github-file-explorer/template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 28 | 29 | 30 |
{{ path }}
Name
14 |
15 | 16 | {{ file.name }} 17 |
18 |
19 | 20 | {{ file.name }} 21 |
22 | 		24 | 25 | 26 | 27 |
31 |
32 |
--------------------------------------------------------------------------------