Merge pull request #272 from phanan/revamp

Next batch of updates

CONTRIBUTING.md

@@ -1,5 +1,18 @@
 # Contributing Guide
 
-1. Make sure you put things in the right category!
+To add another awesome resource, simply create a `.md` file under an appropriate directory in `/awesomeness` with these contents:
-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.
+``` 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™!

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
+Here you go:
-# install dependencies
-npm install
 
-# serve with hot reload at localhost:8080
+* `npm install` to install dependencies
-npm run dev
+* `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
+## License
-npm run build
-```
 
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
+MIT

app/site/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Awesome Vue</title>
     <meta name="description" content="A curated list of awesome things related to Vue.js">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
     <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">
     <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

@@ -2,17 +2,14 @@
   <div id="app">
     <section class="left">
       <div class="wrap">
-        <hgroup>
+        <main-header></main-header>
-          <h1><span class="thin">Awesome</span> Vue.js</h1>
-          <h2 class="tagline thin">A curated list of awesome things related to
-            <a href="https://vuejs.org/">Vue.js</a></h2>
-        </hgroup>
         <form>
           <label>
             <input
               type="search"
               placeholder="type to filter"
               v-model="q"
+              @input="debounceFilter()"
               id="seachField"
               autofocus="autofocus">
             <a :href="'#' + q"
@@ -24,14 +21,7 @@
           </label>
         </form>
         <explore></explore>
-
+        <main-footer></main-footer>
-        <footer>
-          <a href="https://github.com/vuejs/awesome-vue"
-            title="Contribute on GitHub"
-            class="github">
-            <i class="fa fa-github"></i>
-          </a>
-        </footer>
       </div>
     </section>
 
@@ -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: {
+  created() {
-    q() {
+    // 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.<Object>} groups The groups to apply filtering on
@@ -216,18 +218,6 @@ code {
     justify-content: flex-end;
     background: #fcfcfc;
 
-    hgroup {
-      h1 {
-        font-size: 2.7rem;
-        margin-bottom: 1.6rem;
-      }
-
-      h2 {
-        font-size: 1.3rem;
-        margin-bottom: 2.4rem;
-      }
-    }
-
     form {
       margin-bottom: 1.2rem;
 
@@ -310,31 +300,49 @@ code {
   }
 }
 
-footer {
+@media only screen and (max-width: 1023px) {
-  margin-top: 4rem;
+  #app {
-
+    .left, .right {
-  .github {
+      padding: 24px 16px;
-    color: #34495e;
-    font-size: 2rem;
-    width: 149px;
-    display: inline-block;
-    position: relative;
-
-    &::after {
-      content: "";
-      display: block;
-      width: 100%;
-      height: 27px;
-      background: url(./assets/look-here.png) no-repeat;
-      background-size: 149px;
-      position: absolute;
-      right: -5px;
-      transform: rotate(-4deg);
-      transform-origin: 100% 0;
     }
 
-    &:hover::after {
+    .right {
-      animation: soho 1s ease-in-out infinite;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}
+
+@media only screen and (max-width: 735px) {
+  #app {
+    display: block;
+    overflow: auto;
+
+    .left, .right {
+      width: 100%;
+      display: block;
+    }
+
+    .left {
+      text-align: left;
+      border-right: 0;
+      border-bottom: 1px solid #ebebeb;
+
+      form {
+        label {
+          display: block;
+        }
+
+        input[type="search"] {
+          width: 100%;
+        }
+      }
+    }
+
+    .right {
+      .wrap {
+        max-width: 100%;
+      }
     }
   }
 }

app/site/src/components/Explore.vue

@@ -3,8 +3,7 @@
       <h1 class="thin">Explore</h1>
       <ul>
         <li v-for="tag in coolStuff">
-          <a :href="'#' + tag"
+          <a :href="'#' + tag" @click="filterByTag(tag)">{{ tag }}</a>
-            @click="filterByTag(tag)">{{ tag }}</a>
         </li>
       </ul>
     </section>
@@ -58,5 +57,20 @@ export default {
       display: none;
     }
   }
+
+  @media only screen and (max-width: 1023px) {
+    h1 {
+      display: inline;
+      font-size: 1rem;
+
+      &::after {
+        content: ":";
+      }
+    }
+
+    ul {
+      display: inline;
+    }
+  }
 }
 </style>

app/site/src/components/Footer.vue

@@ -0,0 +1,66 @@
+<template>
+  <footer>
+    <a href="https://github.com/vuejs/awesome-vue"
+      title="Contribute on GitHub"
+      class="github">
+      <i class="fa fa-github"></i>
+      <span class="sm">Contribute on GitHub</span>
+    </a>
+  </footer>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="sass" scoped>
+footer {
+  margin-top: 4rem;
+
+  .github {
+    color: #34495e;
+    font-size: 2rem;
+    width: 149px;
+    display: inline-block;
+    position: relative;
+
+    .sm {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 27px;
+      background: url(../assets/look-here.png) no-repeat;
+      background-size: 149px;
+      position: absolute;
+      right: -5px;
+      transform: rotate(-4deg);
+      transform-origin: 100% 0;
+    }
+
+    &:hover::after {
+      animation: soho 1s ease-in-out infinite;
+    }
+  }
+
+  @media only screen and (max-width: 735px) {
+    margin-top: 2rem;
+
+    .github {
+      font-size: 1rem;
+      width: 100%;
+
+      .sm {
+        display: inline;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+</style>

app/site/src/components/Header.vue

@@ -0,0 +1,35 @@
+<template>
+  <hgroup>
+    <h1><span class="thin">Awesome</span> Vue.js</h1>
+    <h2 class="tagline thin">A curated list of awesome things related to
+      <a href="https://vuejs.org/">Vue.js</a>
+    </h2>
+  </hgroup>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="sass" scoped>
+hgroup {
+  margin-bottom: 2.4rem;
+
+  h1 {
+    font-size: 2.7rem;
+    margin-bottom: 1.6rem;
+  }
+
+  h2 {
+    font-size: 1.3rem;
+  }
+
+  @media only screen and (max-width: 735px) {
+    margin-bottom: 1.8rem;
+
+    .tagline {
+      display: none;
+    }
+  }
+}
+</style>

app/site/src/components/Item.vue

@@ -29,14 +29,16 @@ export default {
   props: ['item'],
   mixins: [filterByTag],
   computed: {
+    /**
+     * Get a shields.io badge URL for a GitHub repository.
+     * @return {String|null}
+     */
     githubBadgeUrl() {
-      const re = /https?:\/\/github\.com\/([A-Za-z0-9-_]*)\/([A-Za-z0-9-_]*)\/?$/i
+      const re = /https?:\/\/github\.com\/([A-Za-z0-9-_\.]*)\/([A-Za-z0-9-_\.]*)\/?$/i
       const matches = re.exec(this.item.url)
-      if (!matches) {
+      return matches
-        return null
+        ? `https://img.shields.io/github/stars/${matches[1]}/${matches[2]}.svg?style=social&label=★`
-      }
+        : null
-
-      return `https://img.shields.io/github/stars/${matches[1]}/${matches[2]}.svg?style=social&label=★`
     }
   }
 }

package.json

@@ -17,6 +17,7 @@
     "babel-loader": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "chalk": "^1.1.3",
+    "copy-webpack-plugin": "^3.0.1",
     "cross-env": "^1.0.6",
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.4",

webpack.config.js

@@ -1,5 +1,6 @@
 var path = require('path')
 var webpack = require('webpack')
+var cp = require('copy-webpack-plugin')
 
 module.exports = {
   entry: './app/site/src/main.js',
@@ -35,7 +36,16 @@ module.exports = {
     historyApiFallback: true,
     noInfo: true
   },
-  devtool: '#eval-source-map'
+  devtool: '#eval-source-map',
+  plugins: [
+    new cp([
+      {
+        context: path.join(__dirname, 'app/site/src/assets'),
+        from: 'logo.png',
+        to:  path.join(__dirname, 'app/site/dist'),
+      }
+    ])
+  ]
 }
 
 if (process.env.NODE_ENV === 'production') {