Merge branch 'nuxt-upgrade' into 'master'

Nuxt 2

See merge request matthewess/mat.services!1

.editorconfig

@@ -2,8 +2,8 @@
 root = true
 
 [*]
-indent_size = 2
 indent_style = space
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.eslintrc.js

@@ -8,15 +8,17 @@ module.exports = {
     parser: 'babel-eslint'
   },
   extends: [
-    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
-    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/recommended',
-    'airbnb-base'
+    'plugin:prettier/recommended'
   ],
   // required to lint *.vue files
   plugins: [
-    'vue'
+    'vue',
+    'prettier'
   ],
   // add your custom rules here
-  rules: {}
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
 }

.gitignore

@@ -1,11 +1,81 @@
-# dependencies
-node_modules
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# logs
-npm-debug.log
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
 
-# Nuxt build
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
 .nuxt
 
 # Nuxt generate
 dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -1,3 +1,9 @@
 {
-  "eslint.enable": true
+  "eslint.enable": true,
+  "eslint.packageManager": "yarn",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "vue"
+  ]
 }

README.md

@@ -1,22 +1,22 @@
-# mat.services
+# mat.services [![pipeline status](https://gitlab.com/matthewess/mat.services/badges/master/pipeline.svg)](https://gitlab.com/matthewess/mat.services/commits/master)
 
-> my personal website
+> my personal site
 
 ## Build Setup
 
 ```bash
 # install dependencies
-$ npm install # Or yarn install
+$ yarn install
 
 # serve with hot reload at localhost:3000
-$ npm run dev
+$ yarn dev
 
 # build for production and launch server
-$ npm run build
-$ npm start
+$ yarn build
+$ yarn start
 
 # generate static project
-$ npm run generate
+$ yarn generate
 ```
 
-For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
+For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

assets/README.md

@@ -1,8 +1,7 @@
 # ASSETS
 
+**This directory is not required, you can delete it if you don't want to use it.**
+
 This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
 
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/assets#webpacked
-
-**This directory is not required, you can delete it if you don't want to use it.**
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/sass/_variables.sass

@@ -0,0 +1,23 @@
+@import '~bulma/sass/utilities/functions'
+  
+$pink: #F4ACB7
+$pink-invert: findColorInvert($pink)
+$blue: #7D82B8
+$blue-invert: findColorInvert($blue)
+$red: #471323
+$red-invert: findColorInvert($red)
+$bright: #EF798A
+$bright-invert: findColorInvert($bright)
+$purple: #613F75
+$purple-invert: findColorInvert($purple)
+
+$primary: $pink
+$primary-invert: $pink-invert
+$info: $blue
+$info-invert: $blue-invert
+$danger: $red
+$danger-invert: $red-invert
+$warning: $bright
+$warning-invert: $bright-invert
+$link: $purple
+$link-invert: $purple-invert

assets/sass/mat.sass

@@ -1,38 +1,6 @@
 @import '~bulma/sass/utilities/initial-variables'
-@import '~bulma/sass/utilities/functions'
 
-// v1
-$pink: #f8a5c2
-$pink-invert: findColorInvert($pink)
-$purple: #786fa6
-$purple-invert: findColorInvert($purple)
-$blue: #546de5
-$blue-invert: findColorInvert($blue)
-$charcoal: #3a435e
-$charcoal-invert: findColorInvert($charcoal)
-
-// v(odka)2
-$soviet: #BD271A
-$soviet-invert: findColorInvert($soviet)
-$yellow: #FAD749
-$yellow-invert: findColorInvert($yellow)
-$gray: #C0BCB5
-$gray-invert: findColorInvert($gray)
-$green: #4A6C6F
-$green-invert: findColorInvert($green)
-$violet: #846075
-$violet-invert: findColorInvert($violet)
-
-$primary: $soviet
-$primary-invert: $soviet-invert
-$info: $green
-$info-invert: $green-invert
-$danger: $violet
-$danger-invert: $violet-invert
-$warning: $yellow
-$warning-invert: $yellow-invert
-$link: $danger
-$link-invert: $danger-invert
+@import 'variables'
 
 @import '~bulma/bulma'
 

components/Hero.vue

@@ -1,20 +1,27 @@
 <template lang="pug">
-section.hero.is-primary.is-bold.is-medium(v-once)
-  .hero-body
+section.hero.is-primary.is-bold(v-once)
+  .hero-body(v-if='!compact')
     .container
-      h1.title.has-text-warning matthew ess
-      h2.subtitle.has-text-warning software developer, social justice warrior, wannabe artist
+      h1.title.has-text-danger matthew ess
+      h2.subtitle.has-text-danger software developer, social justice warrior, wannabe artist
   .hero-foot
-    .tabs.is-boxed.is-fullwidth.is-three-quarters
-      ul.has-text-weight-semibold.has-text-warning
-        li
-          nuxt-link(to='/') home
-        li
-          nuxt-link(to='/projects') projects
-        li
-          nuxt-link(to='/resume') resume
+    nav-tabs
 </template>
 
+<script>
+import navTabs from './navTabs.vue'
+
+export default {
+  components: { navTabs },
+  props: {
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
 <style lang="sass" scoped>
 @import '~bulma/sass/utilities/mixins'
 

components/README.md

@@ -1,6 +1,7 @@
 # COMPONENTS
 
-The components directory contains your Vue.js Components.
-Nuxt.js doesn't supercharge these 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._

components/navTabs.vue

@@ -0,0 +1,9 @@
+<template lang="pug">
+#nav-tabs
+  .tabs.is-boxed.is-fullwidth
+    ul.has-text-weight-semibold.has-text-danger
+      li #[nuxt-link(to='/') home]
+      li #[nuxt-link(to='/projects') projects]
+      li #[nuxt-link(to='/resume') resume]
+      li #[nuxt-link(to='/blog') blog]
+</template>

layouts/README.md

@@ -1,8 +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
-
-**This directory is not required, you can delete it if you don't want to use it.**
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

layouts/compact.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+.nuxt
+  hero(:compact='true')
+  .container
+    nuxt
+  footer.footer.white
+</template>
+
+<script>
+import hero from '../components/hero.vue'
+
+export default {
+  components: { hero }
+}
+</script>
+
+<style lang="sass">
+@import '~assets/sass/mat'
+</style>

layouts/default.vue

@@ -1,17 +1,17 @@
 <template lang="pug">
 .nuxt
-  Hero
+  hero
   .container
     nuxt
   footer.footer.white
 </template>
 
 <script>
-import Hero from '../components/Hero.vue';
+import hero from '../components/hero.vue'
 
 export default {
-  components: { Hero },
-};
+  components: { hero }
+}
 </script>
 
 <style lang="sass">

middleware/README.md

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

nuxt.config.js

@@ -1,35 +1,67 @@
+const pkg = require('./package') // javascript.validate.enable false
+
 module.exports = {
+  mode: 'universal',
+
   /*
   ** Headers of the page
   */
   head: {
-    title: 'matthew ess',
+    titleTemplate(titleChunk) {
+      return titleChunk ? `${titleChunk} | matthew ess` : 'matthew ess'
+    },
     meta: [
       { charset: 'utf-8' },
       { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'my personal website' },
-    ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-    ],
+      { hid: 'description', name: 'description', content: pkg.description }
+    ]
   },
+
+  /*
+  ** Customize the progress-bar color
+  */
+  loading: { color: '#fff' },
+
+  /*
+  ** Global CSS
+  */
+  css: [],
+
+  /*
+  ** Plugins to load before mounting the App
+  */
+  plugins: [],
+
+  /*
+  ** Nuxt.js modules
+  */
+  modules: ['@nuxtjs/bulma'],
+
   /*
   ** Build configuration
   */
   build: {
+    postcss: {
+      preset: {
+        features: {
+          customProperties: false
+        }
+      }
+    },
     /*
-    ** Run ESLint on save
+    ** You can extend webpack config here
     */
-    extend(config, { isDev, isClient }) {
-      if (isDev && isClient) {
+    extend(config, ctx) {
+      // Run ESLint on save
+      if (ctx.isDev && ctx.isClient) {
         config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
-          exclude: /(node_modules)/,
-        });
+          exclude: /(node_modules)/
+        })
+      }
+    }
+  }
 }
-    },
-  },
-};

package.json

@@ -1,8 +1,8 @@
 {
   "name": "mat.services",
   "version": "1.0.0",
-  "description": "my personal website",
-  "author": "Matthew Ess <mess@yelp.com>",
+  "description": "my personal site",
+  "author": "Matthew Ess",
   "private": true,
   "scripts": {
     "dev": "nuxt",
@@ -10,27 +10,25 @@
     "start": "nuxt start",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "precommit": "npm run lint",
-    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
+    "precommit": "yarn lint"
   },
   "dependencies": {
-    "bulma": "^0.6.2",
-    "nuxt": "^1.0.0"
+    "@nuxtjs/bulma": "^1.2.0",
+    "cross-env": "^5.2.0",
+    "nuxt": "^2.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.1",
-    "coffee-loader": "^0.9.0",
-    "coffeescript": "^2.2.1",
-    "eslint": "^4.17.0",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-vue": "^3.14.0",
-    "node-sass": "^4.9.2",
-    "pug": "2.0.0-beta6",
-    "pug-loader": "^2.3.0",
-    "push-dir": "^0.4.1",
-    "sass-loader": "^6.0.6"
+    "eslint": "^5.0.1",
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-prettier": "2.6.2",
+    "eslint-plugin-vue": "^4.0.0",
+    "node-sass": "^4.9.3",
+    "nodemon": "^1.11.0",
+    "prettier": "1.14.3",
+    "pug": "^2.0.3",
+    "pug-plain-loader": "^1.0.0",
+    "sass-loader": "^7.1.0"
   }
 }

pages/README.md

@@ -1,7 +1,6 @@
 # PAGES
 
 This directory contains your Application Views and Routes.
-The framework reads all the .vue files inside this directory and creates the router of your application.
+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
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

pages/blog/index.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+#blog
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: 'blog'
+    }
+  },
+  layout: 'compact'
+}
+</script>

pages/projects.vue

@@ -1,30 +1,36 @@
 <template lang="pug">
 #projects.is-half.has-text-centered-mobile
-  p.content check out my #[a(href='https://github.com/matthewess') github account]!
-  h1.title #[a(href='https://github.com/matthewess/boilertalk-frontend') Boilertalk]
+  h2.subtitle.has-text-centered Older Projects
+  hr
+  h2.subtitle #[a(href='https://github.com/matthewess/boilertalk-frontend') Boilertalk]
   p.content.
     Boilertalk is a project I'm working on with my fiancée to enable social
     psychology researchers to easily simulate a social media platform to
     garner realistic interactions and behaviors from students for the purpose
     of research studies.
-  h1.title #[a(href='https://github.com/purdue-csusb/openideas') OpenIdeas]
+  h2.subtitle #[a(href='https://github.com/purdue-csusb/openideas') OpenIdeas]
   p.content.
     OpenIdeas is a platform I'm working on with Jay Hankins for
     #[a(href='https://purdueusb.com') Purdue USB] and the Purdue
     Undergraduate CS Community. We hope to implement it this year
     to give students a way to voice concerns or improvements for
     the department, then vote on and discuss them.
-  h1.title #[a(href='https://github.com/lemming-online/mischief') Mischief/Lemming]
+  h2.subtitle #[a(href='https://github.com/lemming-online/mischief') Mischief/Lemming]
   p.content.
     Mischief is the backend component of the lemming project, a group
     project for Purdue's senior design class that was meant as a queuing
     system to help lab TAs or group leaders manage large groups of students
     or members who need help with an assignment or project.
-  h1.title #[a(href='https://github.com/projectkuva/kuva-frontend') Kuva]
+  h2.subtitle #[a(href='https://github.com/projectkuva/kuva-frontend') Kuva]
   p.content.
     Kuva was a small iOS app meant as a regional, location centric clone
     of Instagram that would allow you to see and interact with popular photos
     taken by users nearby you.
+
+  hr
+  p.content.
+    check out my #[a.has-text-info(href='https://gitlab.com/matthewess') gitlab account],
+    or my older #[a.has-text-info(href='https://github.com/matthewess') github account]
 </template>
 
 <style lang="sass" scoped>
@@ -34,3 +40,14 @@
   .is-half
     width: 50%
 </style>
+
+<script>
+export default {
+  head() {
+    return {
+      title: 'projects'
+    }
+  },
+  layout: 'compact'
+}
+</script>

pages/resume.vue

@@ -41,10 +41,22 @@
         p source control, git
 </template>
 
+<script>
+export default {
+  head() {
+    return {
+      title: 'resume'
+    }
+  },
+  layout: 'compact'
+}
+</script>
+
 <style lang="sass" scoped>
 @import '~bulma/sass/utilities/mixins'
+@import '~assets/sass/variables'
 
-$background: #BD271A
+$background: $primary
 
 hr
   height: 0.5rem

plugins/README.md

@@ -1,8 +1,7 @@
 # PLUGINS
 
-This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/plugins
-
 **This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your 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).

static/README.md

@@ -1,11 +1,10 @@
 # STATIC
 
-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
-
 **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).

store/README.md

@@ -1,10 +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 index.js file in this directory activate the option in the framework automatically.
 
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/vuex-store
+Creating a file in this directory activate the option in the framework automatically.
 
-**This directory is not required, you can delete it if you don't want to use it.**
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).