diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9a5211b2..01d8df74 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,5 +1,18 @@
# Contributing Guide
-1. Make sure you put things in the right category!
-2. Always add your items to the end of a list. To be fair, the order is first-come-first-serve.
-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.
+To add another awesome resource, simply create a `.md` file under an appropriate directory in `/awesomeness` with these contents:
+
+``` yaml
+---
+name: Your Project Name
+url: http://yourproject.io
+author: "Your Name (http://yourhomepage.net)"
+description: "[Markdown](https://daringfireball.net/projects/markdown/) is supported!"
+tags:
+ - pure
+ - awesomess
+```
+
+The only mandatory information is `name`, though obviously, you're encouraged to fill in as much information as you can!
+
+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™!
diff --git a/README.md b/README.md
index d36c2e20..65117954 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,16 @@
# awesome-vue
-> A curated list of awesome things related to Vue.js
+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).
## Build Setup
-``` bash
-# install dependencies
-npm install
+Here you go:
-# serve with hot reload at localhost:8080
-npm run dev
+* `npm install` to install dependencies
+* `npm run dev` to serve the dev version with hot reload at localhost:8080
+* `npm run build` to build for production with minification
+* `npm run parse` to parse the awesome resources into a JSON data file
-# build for production with minification
-npm run build
-```
+## License
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
+MIT
diff --git a/app/site/index.html b/app/site/index.html
index 754fe84a..2603c17c 100644
--- a/app/site/index.html
+++ b/app/site/index.html
@@ -4,6 +4,7 @@
Awesome Vue
+
diff --git a/app/site/src/App.vue b/app/site/src/App.vue
index 7d762b32..882774e5 100644
--- a/app/site/src/App.vue
+++ b/app/site/src/App.vue
@@ -2,17 +2,14 @@
-
-
Awesome Vue.js
-
A curated list of awesome things related to
- Vue.js
-
+
-
-
+
@@ -48,9 +38,11 @@ import _ from 'lodash'
import { event } from './utils'
import group from './components/Group.vue'
import explore from './components/Explore.vue'
+import mainHeader from './components/Header.vue'
+import mainFooter from './components/Footer.vue'
export default {
- components: { group, explore },
+ components: { group, explore, mainHeader, mainFooter },
data () {
return {
@@ -59,8 +51,35 @@ export default {
}
},
- watch: {
- q() {
+ created() {
+ // Listen to the 'tag-selected' event to trigger the filtering process.
+ event.on('tag-selected', tag => {
+ this.q = tag[0]
+
+ // Set the focus into the search field. Some little UX doesn't kill.
+ this.$nextTick(() => {
+ document.getElementById('seachField').focus()
+ })
+
+ this.debounceFilter()
+ })
+
+ // Also, upon page load, tf there's a hash, we filter the awesome list
+ // right away.
+ if (window.location.hash) {
+ this.q = /^#(.*)/.exec(window.location.hash)[1].toLowerCase()
+ this.debounceFilter()
+ }
+ },
+
+ methods: {
+ /**
+ * Limit filtering using lodash's debounce.
+ * @param {Event}
+ * @param {VueComponent}
+ * @return {Function}
+ */
+ debounceFilter: _.debounce(function () {
let q = this.q.trim()
if (q === 'everything') {
@@ -73,25 +92,8 @@ export default {
}
this.groups = this.filter(_.cloneDeep(window.data), q)
- }
- },
+ }, 100),
- created() {
- event.on('tag-selected', tag => {
- this.q = tag[0]
-
- // Set the focus into the search field. Some little UX doesn't kill.
- this.$nextTick(() => {
- document.getElementById('seachField').focus()
- })
- })
-
- if (window.location.hash) {
- this.q = /^#(.*)/.exec(window.location.hash)[1].toLowerCase()
- }
- },
-
- methods: {
/**
* Filter our awesome data.
* @param {Array.