Skip to content

Commit 8053007

Browse files
phananphanan
authored
Merge pull request vuejs#272 from phanan/revamp
Next batch of updates
2 parents ae7ea5c + e536da3 commit 8053007

File tree

10 files changed

+233
-85
lines changed

10 files changed

+233
-85
lines changed

‎CONTRIBUTING.md

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
# Contributing Guide
22

3-
1. Make sure you put things in the right category!
4-
2. Always add your items to the end of a list. To be fair, the order is first-come-first-serve.
5-
3. If you think something belongs in the wrong category, or think there needs to be a new category, feel free to edit things too.
3+
To add another awesome resource, simply create a `.md` file under an appropriate directory in `/awesomeness` with these contents:
4+
5+
``` yaml
6+
---
7+
name: Your Project Name
8+
url: http://yourproject.io
9+
author: "Your Name (http://yourhomepage.net)"
10+
description: "[Markdown](https://daringfireball.net/projects/markdown/) is supported!"
11+
tags:
12+
- pure
13+
- awesomess
14+
```
15+
16+
The only mandatory information is `name`, though obviously, you're encouraged to fill in as much information as you can!
17+
18+
Note: Since the `.md` file actually uses YAML syntax and is parsed by a YAML parser, you'll need quotes if your content includes special characters, e.g. `:`, `{`, `}`, `[`, `]`, `,`, `&`, `*`, `#`, `?`, `|`, `-`, `<`, `>`, `=`, `!`, `%`, `@`, `\`. Or, to play it safe, just quote all the things™!

‎README.md

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
# awesome-vue
22

3-
> A curated list of awesome things related to Vue.js
3+
A curated list of awesome things related to Vue.js. Inspired by [HTML5 Please](https://github.com/h5bp/html5please/). See the site in action [here](https://awesome.vuejs.org).
44

55
## Build Setup
66

7-
``` bash
8-
# install dependencies
9-
npm install
7+
Here you go:
108

11-
# serve with hot reload at localhost:8080
12-
npm run dev
9+
* `npm install` to install dependencies
10+
* `npm run dev` to serve the dev version with hot reload at localhost:8080
11+
* `npm run build` to build for production with minification
12+
* `npm run parse` to parse the awesome resources into a JSON data file
1313

14-
# build for production with minification
15-
npm run build
16-
```
14+
## License
1715

18-
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
16+
MIT

‎app/site/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<title>Awesome Vue</title>
66
<meta name="description" content="A curated list of awesome things related to Vue.js">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
89
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
910
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>

‎app/site/src/App.vue

Lines changed: 71 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@
22
<div id="app">
33
<section class="left">
44
<div class="wrap">
5-
<hgroup>
6-
<h1><span class="thin">Awesome</span> Vue.js</h1>
7-
<h2 class="tagline thin">A curated list of awesome things related to
8-
<a href="https://vuejs.org/">Vue.js</a></h2>
9-
</hgroup>
5+
<main-header></main-header>
106
<form>
117
<label>
128
<input
139
type="search"
1410
placeholder="type to filter"
1511
v-model="q"
12+
@input="debounceFilter()"
1613
id="seachField"
1714
autofocus="autofocus">
1815
<a :href="'#' + q"
@@ -24,14 +21,7 @@
2421
</label>
2522
</form>
2623
<explore></explore>
27-
28-
<footer>
29-
<a href="https://github.com/vuejs/awesome-vue"
30-
title="Contribute on GitHub"
31-
class="github">
32-
<i class="fa fa-github"></i>
33-
</a>
34-
</footer>
24+
<main-footer></main-footer>
3525
</div>
3626
</section>
3727

@@ -48,9 +38,11 @@ import _ from 'lodash'
4838
import { event } from './utils'
4939
import group from './components/Group.vue'
5040
import explore from './components/Explore.vue'
41+
import mainHeader from './components/Header.vue'
42+
import mainFooter from './components/Footer.vue'
5143
5244
export default {
53-
components: { group, explore },
45+
components: { group, explore, mainHeader, mainFooter },
5446
5547
data () {
5648
return {
@@ -59,39 +51,49 @@ export default {
5951
}
6052
},
6153
62-
watch: {
63-
q() {
64-
let q = this.q.trim()
65-
66-
if (q === 'everything') {
67-
q = ''
68-
}
69-
70-
if (!q) {
71-
this.groups = window.data
72-
return
73-
}
74-
75-
this.groups = this.filter(_.cloneDeep(window.data), q)
76-
}
77-
},
78-
7954
created() {
55+
// Listen to the 'tag-selected' event to trigger the filtering process.
8056
event.on('tag-selected', tag => {
8157
this.q = tag[0]
8258
8359
// Set the focus into the search field. Some little UX doesn't kill.
8460
this.$nextTick(() => {
8561
document.getElementById('seachField').focus()
8662
})
63+
64+
this.debounceFilter()
8765
})
8866
67+
// Also, upon page load, tf there's a hash, we filter the awesome list
68+
// right away.
8969
if (window.location.hash) {
9070
this.q = /^#(.*)/.exec(window.location.hash)[1].toLowerCase()
71+
this.debounceFilter()
9172
}
9273
},
9374
9475
methods: {
76+
/**
77+
* Limit filtering using lodash's debounce.
78+
* @param {Event}
79+
* @param {VueComponent}
80+
* @return {Function}
81+
*/
82+
debounceFilter: _.debounce(function () {
83+
let q = this.q.trim()
84+
85+
if (q === 'everything') {
86+
q = ''
87+
}
88+
89+
if (!q) {
90+
this.groups = window.data
91+
return
92+
}
93+
94+
this.groups = this.filter(_.cloneDeep(window.data), q)
95+
}, 100),
96+
9597
/**
9698
* Filter our awesome data.
9799
* @param {Array.<Object>} groups The groups to apply filtering on
@@ -216,18 +218,6 @@ code {
216218
justify-content: flex-end;
217219
background: #fcfcfc;
218220
219-
hgroup {
220-
h1 {
221-
font-size: 2.7rem;
222-
margin-bottom: 1.6rem;
223-
}
224-
225-
h2 {
226-
font-size: 1.3rem;
227-
margin-bottom: 2.4rem;
228-
}
229-
}
230-
231221
form {
232222
margin-bottom: 1.2rem;
233223
@@ -310,31 +300,49 @@ code {
310300
}
311301
}
312302
313-
footer {
314-
margin-top: 4rem;
303+
@media only screen and (max-width: 1023px) {
304+
#app {
305+
.left, .right {
306+
padding: 24px 16px;
307+
}
308+
309+
.right {
310+
overflow-y: scroll;
311+
-webkit-overflow-scrolling: touch;
312+
}
313+
}
314+
}
315315
316-
.github {
317-
color: #34495e;
318-
font-size: 2rem;
319-
width: 149px;
320-
display: inline-block;
321-
position: relative;
316+
@media only screen and (max-width: 735px) {
317+
#app {
318+
display: block;
319+
overflow: auto;
322320
323-
&::after {
324-
content: "";
325-
display: block;
321+
.left, .right {
326322
width: 100%;
327-
height: 27px;
328-
background: url(./assets/look-here.png) no-repeat;
329-
background-size: 149px;
330-
position: absolute;
331-
right: -5px;
332-
transform: rotate(-4deg);
333-
transform-origin: 100% 0;
323+
display: block;
334324
}
335325
336-
&:hover::after {
337-
animation: soho 1s ease-in-out infinite;
326+
.left {
327+
text-align: left;
328+
border-right: 0;
329+
border-bottom: 1px solid #ebebeb;
330+
331+
form {
332+
label {
333+
display: block;
334+
}
335+
336+
input[type="search"] {
337+
width: 100%;
338+
}
339+
}
340+
}
341+
342+
.right {
343+
.wrap {
344+
max-width: 100%;
345+
}
338346
}
339347
}
340348
}

‎app/site/src/components/Explore.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
<h1 class="thin">Explore</h1>
44
<ul>
55
<li v-for="tag in coolStuff">
6-
<a :href="'#' + tag"
7-
@click="filterByTag(tag)">{{ tag }}</a>
6+
<a :href="'#' + tag" @click="filterByTag(tag)">{{ tag }}</a>
87
</li>
98
</ul>
109
</section>
@@ -58,5 +57,20 @@ export default {
5857
display: none;
5958
}
6059
}
60+
61+
@media only screen and (max-width: 1023px) {
62+
h1 {
63+
display: inline;
64+
font-size: 1rem;
65+
66+
&::after {
67+
content: ":";
68+
}
69+
}
70+
71+
ul {
72+
display: inline;
73+
}
74+
}
6175
}
6276
</style>

‎app/site/src/components/Footer.vue

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<footer>
3+
<a href="https://github.com/vuejs/awesome-vue"
4+
title="Contribute on GitHub"
5+
class="github">
6+
<i class="fa fa-github"></i>
7+
<span class="sm">Contribute on GitHub</span>
8+
</a>
9+
</footer>
10+
</template>
11+
12+
<script>
13+
export default {}
14+
</script>
15+
16+
<style lang="sass" scoped>
17+
footer {
18+
margin-top: 4rem;
19+
20+
.github {
21+
color: #34495e;
22+
font-size: 2rem;
23+
width: 149px;
24+
display: inline-block;
25+
position: relative;
26+
27+
.sm {
28+
display: none;
29+
}
30+
31+
&::after {
32+
content: "";
33+
display: block;
34+
width: 100%;
35+
height: 27px;
36+
background: url(../assets/look-here.png) no-repeat;
37+
background-size: 149px;
38+
position: absolute;
39+
right: -5px;
40+
transform: rotate(-4deg);
41+
transform-origin: 100% 0;
42+
}
43+
44+
&:hover::after {
45+
animation: soho 1s ease-in-out infinite;
46+
}
47+
}
48+
49+
@media only screen and (max-width: 735px) {
50+
margin-top: 2rem;
51+
52+
.github {
53+
font-size: 1rem;
54+
width: 100%;
55+
56+
.sm {
57+
display: inline;
58+
}
59+
60+
&::after {
61+
display: none;
62+
}
63+
}
64+
}
65+
}
66+
</style>

‎app/site/src/components/Header.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<hgroup>
3+
<h1><span class="thin">Awesome</span> Vue.js</h1>
4+
<h2 class="tagline thin">A curated list of awesome things related to
5+
<a href="https://vuejs.org/">Vue.js</a>
6+
</h2>
7+
</hgroup>
8+
</template>
9+
10+
<script>
11+
export default {}
12+
</script>
13+
14+
<style lang="sass" scoped>
15+
hgroup {
16+
margin-bottom: 2.4rem;
17+
18+
h1 {
19+
font-size: 2.7rem;
20+
margin-bottom: 1.6rem;
21+
}
22+
23+
h2 {
24+
font-size: 1.3rem;
25+
}
26+
27+
@media only screen and (max-width: 735px) {
28+
margin-bottom: 1.8rem;
29+
30+
.tagline {
31+
display: none;
32+
}
33+
}
34+
}
35+
</style>

0 commit comments

Comments
 (0)