chore: add pug-stylus-coffee (#4927)

* add pug-stylus-coffee

* fix eslit

* fix eslint

* fix eslint #3

.eslintignore

@@ -8,7 +8,7 @@ coverage
 
 ## cofeescript
 examples/coffeescript/pages/index.vue
-
+examples/pug-stylus-coffee/
 # Packages
 
 # vue-app

examples/pug-stylus-coffee/README.md

@@ -0,0 +1,20 @@
+# Pug + Stylus + Coffee template for Nuxt.js
+
+> Ultimative complete pack for coding with pleasure and Nuxt.js
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+
+# generate static project
+$ npm run generate
+```

examples/pug-stylus-coffee/components/Logo.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+  .VueToNuxtLogo
+    .Triangle.Triangle--two
+    .Triangle.Triangle--one
+    .Triangle.Triangle--three
+    .Triangle.Triangle--four
+</template>
+
+<style lang="stylus">
+.VueToNuxtLogo
+  display: inline-block
+  animation: turn 2s linear forwards 1s
+  transform: rotateX(180deg)
+  position: relative
+  overflow: hidden
+  height: 180px
+  width: 245px
+
+.Triangle
+  position: absolute
+  top: 0
+  left: 0
+  width: 0
+  height: 0
+
+.Triangle--one
+  border-left: 105px solid transparent
+  border-right: 105px solid transparent
+  border-bottom: 180px solid #41b883
+
+.Triangle--two
+  top: 30px
+  left: 35px
+  animation: goright 0.5s linear forwards 3.5s
+  border-left: 87.5px solid transparent
+  border-right: 87.5px solid transparent
+  border-bottom: 150px solid #3b8070
+
+.Triangle--three
+  top: 60px
+  left: 35px
+  animation: goright 0.5s linear forwards 3.5s
+  border-left: 70px solid transparent
+  border-right: 70px solid transparent
+  border-bottom: 120px solid #35495e
+
+.Triangle--four
+  top: 120px
+  left: 70px
+  animation: godown 0.5s linear forwards 3s
+  border-left: 35px solid transparent
+  border-right: 35px solid transparent
+  border-bottom: 60px solid #fff
+
+@keyframes turn
+  100%
+    transform: rotateX(0deg)
+
+@keyframes godown
+  100%
+    top: 180px
+
+@keyframes goright
+  100%
+    left: 70px
+</style>

examples/pug-stylus-coffee/components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

examples/pug-stylus-coffee/layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

examples/pug-stylus-coffee/layouts/default.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+  .div
+    nuxt
+</template>
+
+<style lang="stylus">
+html
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif
+  font-size: 16px
+  word-spacing: 1px
+  -ms-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  box-sizing: border-box
+
+*
+&:before
+&:after
+  box-sizing: border-box
+  margin: 0
+
+.button--green
+  display: inline-block
+  border-radius: 4px
+  border: 1px solid #3b8070
+  color: #3b8070
+  text-decoration: none
+  padding: 10px 30px
+  &:hover
+    color: #fff
+    background-color: #3b8070
+
+.button--grey
+  display: inline-block
+  border-radius: 4px
+  border: 1px solid #35495e
+  color: #35495e
+  text-decoration: none
+  padding: 10px 30px
+  margin-left: 15px
+  &:hover
+    color: #fff
+    background-color: #35495e
+</style>

examples/pug-stylus-coffee/middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

examples/pug-stylus-coffee/modules/coffeescript.js

@@ -0,0 +1,17 @@
+export default function () {
+  // Add .coffee extension for store, middleware and more
+  this.nuxt.options.extensions.push('coffee')
+  // Extend build
+  const coffeeLoader = {
+    test: /\.coffee$/,
+    loader: 'coffee-loader'
+  }
+  this.extendBuild((config) => {
+    // Add CoffeeScruot loader
+    config.module.rules.push(coffeeLoader)
+    // Add .coffee extension in webpack resolve
+    if (config.resolve.extensions.indexOf('.coffee') === -1) {
+      config.resolve.extensions.push('.coffee')
+    }
+  })
+}

examples/pug-stylus-coffee/nuxt.config.coffee

@@ -0,0 +1,48 @@
+pkg = require('./package')
+module.exports =
+  mode: 'universal'
+  #
+  # Headers of the page
+  #
+  head:
+    title: pkg.name
+    meta:
+      [
+        {
+          charset: 'utf-8'
+        }
+        {
+          name: 'viewport'
+          content: 'width=device-width, initial-scale=1'
+        }
+        {
+          hid: 'description'
+          name: 'description'
+          content: pkg.description
+        }
+      ]
+    link:
+      [
+        rel: 'icon'
+        type: 'image/x-icon'
+        href: '/favicon.ico'
+      ]
+  # Customize the progress-bar color
+  loading:
+    {
+      color: '#3B8070'
+    }
+  # Global CSS
+  css: []
+  # Plugins to load before mounting the App
+  plugins: []
+  # Nuxt.js modules
+  modules:
+    [
+      '~/modules/coffeescript'
+    ]
+  # Build configuration
+  build:
+    # You can extend webpack config here
+    extend = (config, ctx) ->
+      pass

examples/pug-stylus-coffee/nuxt.config.js

@@ -0,0 +1,2 @@
+require('coffeescript/register')
+module.exports = require('./nuxt.config.coffee')

examples/pug-stylus-coffee/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "example-pug-stylus-coffee",
+  "version": "1.0.0",
+  "description": "Nuxt.js with Pug Stylus and CoffeeScript",
+  "author": "Alex Ananiev <alex.ananiev.r@gmail.com>, Kron Austrum <huyach@protonmail.ch>",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "post-update": "yarn upgrade --latest"
+  },
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "devDependencies": {
+    "coffee-loader": "^0.8.0",
+    "coffeescript": "^2.0.1",
+    "pug": "^2.0.3",
+    "pug-plain-loader": "^1.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2"
+  }
+}

examples/pug-stylus-coffee/pages/README.md

@@ -0,0 +1,7 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the .vue files inside this directory and create the router of your application.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing

examples/pug-stylus-coffee/pages/index.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+  section.container
+    div
+      logo
+      h1.title Nuxt.js with Pug Stylus and Coffee!
+      h2.subtitle {{ $store.state.msg }}
+      //- h2.subtitle {{message}}
+      .links
+        a.button--green(
+          href='https://nuxtjs.org/'
+          arget='_blank') Documentation
+        a.button--grey(
+          href='https://github.com/nuxt/nuxt.js'
+          target='_blank') GitHub
+</template>
+
+
+<script lang="coffee">
+import Logo from '~/components/Logo.vue'
+
+export default
+  components: { Logo }
+  computed:
+    message: -> @$store.state.msgComputed
+</script>
+
+<style lang="stylus">
+.container
+  margin: 0 auto
+  min-height: 100vh
+  display: flex
+  justify-content: center
+  align-items: center
+  text-align: center
+
+.title
+  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
+  display: block
+  font-weight: 300
+  font-size: 60px
+  color: #35495e
+  letter-spacing: 1px
+  padding 5%
+
+.subtitle
+  font-weight: 300
+  font-size: 42px
+  color: #526488
+  word-spacing: 5px
+  padding-bottom: 15px
+
+.links
+  padding-top: 15px
+</style>

examples/pug-stylus-coffee/plugins/README.md

@@ -0,0 +1,7 @@
+# PLUGINS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

examples/pug-stylus-coffee/static/README.md

@@ -0,0 +1,10 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

examples/pug-stylus-coffee/store/README.md

@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

examples/pug-stylus-coffee/store/index.coffee

@@ -0,0 +1,3 @@
+export state = ->
+  msg: 'Hello from /store/index.coffee!'
+  msgComputed: 'Hello from /store/index.coffee computed!'