Merge branch 'nuxt-upgrade' into 'master'

Nuxt 2

See merge request matthewess/mat.services!1
merge-requests/2/head
Matthew Ess 2018-10-14 06:49:12 +00:00
commit 19c60b0569
26 changed files with 4315 additions and 2540 deletions

View File

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

View File

@ -8,15 +8,17 @@ module.exports = {
parser: 'babel-eslint' parser: 'babel-eslint'
}, },
extends: [ 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', 'plugin:vue/recommended',
'airbnb-base' 'plugin:prettier/recommended'
], ],
// required to lint *.vue files // required to lint *.vue files
plugins: [ plugins: [
'vue' 'vue',
'prettier'
], ],
// add your custom rules here // 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'
}
} }

80
.gitignore vendored
View File

@ -1,11 +1,81 @@
# dependencies # Created by .ignore support plugin (hsz.mobi)
node_modules ### Node template
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# logs # Runtime data
npm-debug.log 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
# Nuxt generate # Nuxt generate
dist dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE
.idea

4
.prettierrc Normal file
View File

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

View File

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

View File

@ -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 ## Build Setup
```bash ```bash
# install dependencies # install dependencies
$ npm install # Or yarn install $ yarn install
# serve with hot reload at localhost:3000 # serve with hot reload at localhost:3000
$ npm run dev $ yarn dev
# build for production and launch server # build for production and launch server
$ npm run build $ yarn build
$ npm start $ yarn start
# generate static project # 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).

View File

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

View File

@ -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

View File

@ -1,38 +1,6 @@
@import '~bulma/sass/utilities/initial-variables' @import '~bulma/sass/utilities/initial-variables'
@import '~bulma/sass/utilities/functions'
// v1 @import 'variables'
$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 '~bulma/bulma' @import '~bulma/bulma'

View File

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

View File

@ -1,6 +1,7 @@
# COMPONENTS # 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.** **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._

9
components/navTabs.vue Normal file
View File

@ -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>

View File

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

19
layouts/compact.vue Normal file
View File

@ -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>

View File

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

View File

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

View File

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

View File

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

View File

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

14
pages/blog/index.vue Normal file
View File

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

View File

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

View File

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

View File

@ -1,8 +1,7 @@
# PLUGINS # 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 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).

View File

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

View File

@ -1,10 +1,10 @@
# STORE # 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. This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework. 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: Creating a file in this directory activate the option in the framework automatically.
https://nuxtjs.org/guide/vuex-store
**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).

6389
yarn.lock

File diff suppressed because it is too large Load Diff