├── .gitignore
├── README.md
├── bower.json
├── index.html
├── index.jade
└── js
└── base.js
/.gitignore:
--------------------------------------------------------------------------------
1 | /bower_components
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Front Page
2 | A simple, hackable frontpage for hackers.
3 |
4 | http://djyde.github.io/front
5 |
6 | ##Customize (or contribute)
7 | Front Page is easily to be hacked and make you own reader. But you need to handle some skills:
8 |
9 | * [Jade](http://jade-lang.com) - Template engine.
10 | * [Vue.js](http://vuejs.org) - A lightweight MVVM library.
11 |
12 | To have your own frontpage, just:
13 |
14 | * Fork this repo
15 | * Run `bower install`
16 | * Checkout `gh-pages` && merge
17 | * Wating for a while && visit http://yourid.github.io/front
18 |
19 | The main files of Front Page is `index.jade` and `js/base.js`.
20 |
21 | Using jade helps customize easier. For example, if you don't care about `Hacker News`, you only need to comment out the relevent code(e.g. `command + /` in Sublime) in `index.jade` and `js/base.js` to remove it.
22 |
23 | **index.jade**
24 | ```jade
25 | //- .pure-u-1-3.post
26 | //- .title Hacker News
27 | //- .block#hackernews
28 | //- ul
29 | //- a(v-repeat="lists", href="{{link}}", target="_blank")
30 | //- li {{title}}
31 | ```
32 |
33 | **js/base.js**
34 | ```javascript
35 | // Hacker News
36 | // qwest.get('http://node-read.avosapps.com/hackernews').then(function(res){
37 | // hackernews.lists = JSON.parse(res);
38 | // })
39 | // var hackernews = new Vue({
40 | // el: '#hackernews',
41 | // data: {
42 | // lists: [{
43 | // title: 'loading...'
44 | // }]
45 | // }
46 | // })
47 | ```
48 |
49 | Save and refresh the page, you will find that **Hacker News** block was removed.
50 |
51 | To add a new block for your own or for contribution, just refer to the source code and hack it.
52 |
53 | #Lincense
54 | Just hack it.
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "front",
3 | "version": "0.0.1",
4 | "homepage": "https://github.com/djyde/front",
5 | "authors": [
6 | "randypriv@gmail.com"
7 | ],
8 | "description": "A simple, hackable frontpage for hackers",
9 | "main": [
10 | "index.html",
11 | "js/base.js"
12 | ],
13 | "keywords": [
14 | "front",
15 | "hacker"
16 | ],
17 | "license": "MIT",
18 | "ignore": [
19 | "**/.*",
20 | "node_modules",
21 | "bower_components",
22 | "test",
23 | "tests"
24 | ],
25 | "dependencies": {
26 | "vue": "~0.11.4",
27 | "qwest": "~1.5.4"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | Front Page
--------------------------------------------------------------------------------
/index.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 | title Front Page
5 | link(rel="stylesheet", href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css")
6 | link(rel="stylesheet", href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css")
7 | meta(charset="utf-8")
8 |
9 | style.
10 | .block{
11 | height: 400px;
12 | overflow-y: scroll;
13 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
14 | margin: 12px;
15 | background-color: #F5F5F5;
16 | }
17 | .block p{
18 | margin: 0 !important;
19 | margin-top: 8px !important;
20 | }
21 | .block ul{
22 | margin: 0;
23 | padding: 0;
24 | }
25 | .block li{
26 | list-style: none;
27 | margin: 0;
28 | padding: 0;
29 | }
30 | .block a{
31 | text-decoration: none;
32 | color: #000;
33 | display: block;
34 | padding: 10px 8px;
35 | }
36 | .block .desc{
37 | color: gray;
38 | font-size: .8em;
39 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
40 | }
41 | .block a:visited{
42 | color: gray;
43 | }
44 | .block a:hover{
45 | background-color: red;
46 | color: #FFFFFF;
47 | }
48 | .block a:hover .desc{
49 | color: #F5F5F5;
50 | }
51 | .block::-webkit-scrollbar{
52 | background-color: #DDD;
53 | width: 4px;
54 | }
55 | .block::-webkit-scrollbar-thumb{
56 | background-color: rgba(255, 0, 0, 0.5);
57 | }
58 | .title{
59 | font-size: 24px;
60 | margin: 0;
61 | margin-left: 12px;
62 | margin-bottom: 16px;
63 | }
64 | .container{
65 | width: 80%;
66 | margin: 0 auto;
67 | }
68 | .post{
69 | margin-bottom: 30px;
70 | }
71 | .slogan{
72 | font-size: 1em;
73 | margin-bottom: 30px;
74 | }
75 | .slogan a{
76 | text-decoration: none;
77 | color: #000;
78 | }
79 | .text-center{
80 | text-align: center;
81 | }
82 | body
83 | .text-center
84 | h1 Front Page
85 | .slogan
86 | a(href="https://github.com/djyde/front") Hackable frontpage for hackers.
87 | .pure-g.container
88 |
89 | .pure-u-1.pure-u-md-1-2.pure-u-lg-1-3.post
90 | .title 稀土·掘金
91 | .block#xitugold
92 | ul
93 | a(v-repeat="lists", href="{{link}}", target="_blank")
94 | li {{title}}
95 | p.desc {{description}}
96 |
97 | .pure-u-1.pure-u-md-1-2.pure-u-lg-1-3.post
98 | .title 36Kr Next
99 | .block#next
100 | ul
101 | a(v-repeat="lists", href="{{link}}", target="_blank")
102 | li {{title}}
103 | p.desc {{description}}
104 |
105 | .pure-u-1.pure-u-md-1-2.pure-u-lg-1-3.post
106 | .title V2EX
107 | .block#v2ex
108 | ul
109 | a(v-repeat="lists", href="{{link}}", target="_blank")
110 | li {{title}}
111 |
112 | .pure-u-1.pure-u-md-1-2.pure-u-lg-1-3.post
113 | .title Hacker News
114 | .block#hackernews
115 | ul
116 | a(v-repeat="lists", href="{{link}}", target="_blank")
117 | li {{title}}
118 |
119 | .pure-u-1.pure-u-md-1-2.pure-u-lg-1-3.post
120 | .title 开发者头条
121 | .block#toutiao
122 | ul
123 | a(v-repeat="lists", href="{{link}}", target="_blank")
124 | li {{title}}
125 | p.desc {{author.name}}
126 |
127 | script(src="bower_components/vue/dist/vue.min.js")
128 | script(src="bower_components/qwest/qwest.min.js")
129 | script(src="js/base.js")
130 |
--------------------------------------------------------------------------------
/js/base.js:
--------------------------------------------------------------------------------
1 | //36Kr Next
2 | qwest.get('http://node-read.avosapps.com/next').then(function(res){
3 | next.lists = JSON.parse(res);
4 | })
5 | var next = new Vue({
6 | el: '#next',
7 | data: {
8 | lists: [{
9 | title: 'loading...'
10 | }]
11 | }
12 | })
13 |
14 | //Hacker News
15 | qwest.get('http://node-read.avosapps.com/hackernews').then(function(res){
16 | hackernews.lists = JSON.parse(res);
17 | })
18 | var hackernews = new Vue({
19 | el: '#hackernews',
20 | data: {
21 | lists: [{
22 | title: 'loading...'
23 | }]
24 | }
25 | })
26 |
27 | //V2EX
28 | qwest.get('http://node-read.avosapps.com/v2ex').then(function(res){
29 | v2ex.lists = JSON.parse(res);
30 | })
31 | var v2ex = new Vue({
32 | el: '#v2ex',
33 | data: {
34 | lists: [{
35 | title: 'loading...'
36 | }]
37 | }
38 | })
39 |
40 | //toutiao
41 | qwest.get('http://node-read.avosapps.com/toutiao').then(function(res){
42 | toutiao.lists = JSON.parse(res);
43 | })
44 | var toutiao = new Vue({
45 | el: '#toutiao',
46 | data: {
47 | lists: [{
48 | title: 'loading...'
49 | }]
50 | }
51 | })
52 |
53 | //xitugold
54 | qwest.get('http://node-read.avosapps.com/xitugold').then(function(res){
55 | xitugold.lists = JSON.parse(res);
56 | console.log(JSON.parse(res))
57 | })
58 | var xitugold = new Vue({
59 | el: '#xitugold',
60 | data: {
61 | lists: [{
62 | title: 'loading...'
63 | }]
64 | }
65 | })
--------------------------------------------------------------------------------