feat: Add projects component

docs/getting-started.md

@@ -3,6 +3,28 @@ sidebar: auto
 prev: /configuration.html
 next: /docs/controllers.html
 otherTopics: true
+projects:
+ - title: Kit basic
+   href: https://github.com/TypedProject/tsed-getting-started
+   src: /tsed.png
+ - title: Kit Vue.js
+   href: https://github.com/TypedProject/tsed-example-vuejs
+   src: /vuejs.png    
+ - title: Kit TypeORM
+   href: https://github.com/TypedProject/tsed-example-typeorm
+   src: /typeorm.png
+ - title: Kit Mongoose
+   href: https://github.com/TypedProject/tsed-example-mongoose
+   src: /mongoose.png
+ - title: Kit Socket.io
+   href: https://github.com/TypedProject/tsed-example-socketio
+   src: /socketio.png 
+ - title: Kit Passport.js
+   href: https://github.com/TypedProject/tsed-example-passportjs
+   src: /passportjs.png
+ - title: Kit AWS
+   href: https://github.com/TypedProject/tsed-example-aws
+   src: /aws.png
 meta:
  - name: description
    content: Start a new REST application with Ts.ED framework. Ts.ED is built on top of Express and use TypeScript language.
@@ -12,11 +34,9 @@ meta:
 
 # Getting started
 
-You can start your project from the [getting started project boilerplate](https://github.com/TypedProject/tsed-getting-started).
+Save your time by starting your project on one of this kit:
 
-Or from another examples:
-
-- 
+<Projects type="getting-started" />
 
 ## Installation from scratch
 

docs/tutorials/README.md

@@ -1,18 +1,45 @@
-# Examples
+---
+projects:
+ - title: Kit basic
+   href: https://github.com/TypedProject/tsed-getting-started
+   src: /typescript.png
+ - title: Kit Vue.js
+   href: https://github.com/TypedProject/tsed-example-vuejs
+   src: /vuejs.png    
+ - title: Kit TypeORM
+   href: https://github.com/TypedProject/tsed-example-typeorm
+   src: /typeorm.png
+ - title: Kit Mongoose
+   href: https://github.com/TypedProject/tsed-example-mongoose
+   src: /mongoose.png
+ - title: Kit Socket.io
+   href: https://github.com/TypedProject/tsed-example-socketio
+   src: /socketio.png 
+ - title: Kit Passport.js
+   href: https://github.com/TypedProject/tsed-example-passportjs
+   src: /passportjs.png
+ - title: Kit AWS
+   href: https://github.com/TypedProject/tsed-example-aws
+   src: /aws.png
+
+meta:
+ - name: description
+   content: Start a new REST application with Ts.ED framework. Ts.ED is built on top of Express and use TypeScript language.
+ - name: keywords
+   content: examples kits starters ts.ed express typescript node.js javascript decorators mvc class models
+---
 
+# Examples
 ## Starters
 
-- [Quick start project](https://github.com/TypedProject/tsed-getting-started)
-- [Node Api Starter](https://github.com/scopsy/node-typescript-starter) by [Scopsy](https://github.com/scopsy)
+<Projects type="examples"/>
 
 ## Demo
 
 Some examples are available along these links :
 
 **Projects example for v5.x.x**
 
-- [Getting started](https://github.com/TypedProject/tsed-getting-started)
-- [Https](https://github.com/TypedProject/example-ts-express-decorator/tree/4.0.0/example-https)
 - [Session](https://github.com/TypedProject/tsed-example-session)
 - [A SquareGame with SocketIO](https://github.com/TypedProject/tsed-example-socketio)
 - [Authentication with Passport.js](https://github.com/TypedProject/tsed-example-passportjs)
@@ -28,6 +55,7 @@ Some examples are available along these links :
 - [Authentication with Passport.js](https://github.com/TypedProject/example-ts-express-decorator/tree/4.0.0/example-passport)
 - [Mongoose & Swagger](https://github.com/TypedProject/example-ts-express-decorator/tree/4.0.0/example-mongoose)
 - [TypeORM](https://github.com/TypedProject/example-ts-express-decorator/tree/4.0.0/example-typeorm)
+- [Node Api Starter](https://github.com/scopsy/node-typescript-starter) by [Scopsy](https://github.com/scopsy)
 
 **Projects examples for v2.0.0 and more**
 

src/components/index.js

@@ -23,6 +23,7 @@ export { default as Select } from './select/Select.vue'
 export { default as Sidebar } from './sidebar/Sidebar.vue'
 export { default as SWUpdatePopup } from './sw-update-popup/SWUpdatePopup.vue'
 export { default as Testimonial } from './testimonial/Testimonial.vue'
+export { default as Projects } from './projects/Projects.vue'
 export { default as Contributing } from '../views/Contributing.vue'
 export { default as Home } from '../views/Home.vue'
 export { default as Page }from '../views/Page.vue'

src/components/open-collective-backers/OpenCollectiveBackers.vue

@@ -22,7 +22,6 @@
         openCollective
       } = this.$site.themeConfig
 
-      console.log('openCollective', openCollective)
       this.backers = await getBackers(openCollective)
     }
   }

src/components/projects/Projects.scss

@@ -0,0 +1,54 @@
+@import "../../styles/mixins/index";
+
+$projectBadgeWidth: rem(100px) !default;
+$projectBadgePadding: rem(10px);
+
+.projects {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: rem(30px) 0 0;
+  justify-content: flex-start;
+  font-size: rem(15px);
+
+  > li {
+    margin: $projectBadgePadding;
+    list-style: none !important;
+    position: relative;
+    transition: all .3s ease;
+    z-index: 200;
+
+    &:hover {
+      -webkit-transform: scale(1.1);
+      transform: scale(1.1);
+      z-index: 300;
+    }
+  }
+
+  img {
+    display: block;
+    width: $projectBadgeWidth;
+    height: $projectBadgeWidth;
+    border-radius: 35%;
+    background-color: white;
+    z-index: 100;
+    position: relative;
+    margin-bottom: rem(5px);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  }
+
+  a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: $projectBadgeWidth;
+    text-overflow: ellipsis;
+    white-space: pre;
+  }
+
+  &.-white {
+    a {
+      color: #FFF
+    }
+  }
+}

src/components/projects/Projects.vue

@@ -0,0 +1,41 @@
+<template>
+  <ul class="projects">
+    <li class="projects__badge" v-for="project in projects">
+      <a :href="project.href" target="_blank" @click="() => onClick(project)" :title="project.title">
+        <img :src="project.src"/>
+        <span>{{project.title}}</span>
+      </a>
+    </li>
+  </ul>
+</template>
+<script>
+  export default {
+    name: 'Projects',
+    props: {
+      type: {
+        type: String,
+        required: true
+      }
+    },
+    computed: {
+      projects () {
+        const { frontmatter: { projects } } = this.$page
+
+        return projects
+      }
+    },
+    methods: {
+      onClick (project) {
+        if (this.$ga) {
+          this.$ga.event({
+            eventCategory: this.type + '-projects',
+            eventAction: 'click',
+            eventLabel: 'name',
+            eventValue: project.login
+          })
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" src="./Projects.scss"></style>