Big change, hope it works!!!

merge-requests/2/head
Matthew Ess 2018-10-18 01:13:18 -04:00
parent 090868aa34
commit 2f9f7bc259
19 changed files with 212 additions and 84 deletions

View File

@ -2,23 +2,24 @@ module.exports = {
root: true, root: true,
env: { env: {
browser: true, browser: true,
node: true node: true,
}, },
parserOptions: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint',
}, },
extends: [ extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
// required to lint *.vue files // required to lint *.vue files
plugins: [ plugins: ['vue', 'prettier'],
'vue',
'prettier'
],
// add your custom rules here // add your custom rules here
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
} 'comma-dangle': [
'error',
{
arrays: 'only-multiline',
objects: 'only-multiline',
},
],
},
} }

View File

@ -10,8 +10,6 @@ cache:
pages: pages:
script: script:
- yarn generate - yarn generate
- mkdir public
- mv dist/* public/
artifacts: artifacts:
paths: paths:
- public - public

View File

@ -1,4 +1,5 @@
{ {
"semi": false, "semi": false,
"singleQuote": true "singleQuote": true,
"trailingComma": "es5"
} }

View File

@ -1,3 +1,4 @@
@import '~bulma/sass/utilities/initial-variables'
@import '~bulma/sass/utilities/functions' @import '~bulma/sass/utilities/functions'
$pink: #F4ACB7 $pink: #F4ACB7
@ -21,3 +22,5 @@ $warning: $bright
$warning-invert: $bright-invert $warning-invert: $bright-invert
$link: $purple $link: $purple
$link-invert: $purple-invert $link-invert: $purple-invert
@import '~bulma/sass/utilities/all'

View File

@ -1,6 +1,4 @@
@import '~bulma/sass/utilities/initial-variables' @import 'utilities'
@import 'variables'
@import '~bulma/bulma' @import '~bulma/bulma'

View File

@ -0,0 +1,15 @@
---
title: writing your own blog in Vue, powered by Nuxt, and Nuxtent
tagline: break free from boring jekyll themes
tags:
- blog
- vue
- vuejs
- nuxt
- nuxtent
- markdown
- static site
- github pages
- gitlab pages
draft: true
---

View File

@ -0,0 +1,22 @@
---
title: hi, world
tagline: my personal introduction to the world of words on the web
tags:
- first post
- introduction
- tech blog
- creative writing
---
hi, world! this is my first blog post. i'm hoping to use this as part creative outlet, part
self-encouragement to see technical projects through, and part place to document my learning so i
can go back and look at all the things i forgot, one day.
to those of you who don't know me, here's a brief introduction: my name is mat! i'm a communist,
a [partner][1], and generally (at the very least) something of a curmudgeon. i have a number of
strong opinions, especially about technology and politics. i have a love for art, and, in another
life, i really wish that i'd studied philosophy or music.
if you have ideas for me to blog about, feel free to reach out to me at mess [at] yelp [dot] com.
[1]: https://macklovesmatt.com/ 'me and my partner'

View File

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

View File

@ -1,6 +1,6 @@
const pkg = require('./package') // javascript.validate.enable false import pkg from './package'
module.exports = { export default {
mode: 'universal', mode: 'universal',
/* /*
@ -31,20 +31,29 @@ module.exports = {
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App
*/ */
plugins: [], plugins: ['~/plugins/filters.js'],
/* /*
** Nuxt.js modules ** Nuxt.js modules
*/ */
modules: ['@nuxtjs/bulma', 'nuxtent'], modules: ['@nuxtjs/bulma', 'nuxtent'],
/*
** Static Site Generation configuration
*/
generate: {
dir: 'public'
},
/* /*
** Nuxtent configuration ** Nuxtent configuration
*/ */
nuxtent: { nuxtent: {
page: '/posts/_slug', content: {
permalink: ':slug', page: '/blog/_slug',
generate: ['get', 'getAll'] permalink: ':slug',
generate: ['get', 'getAll']
}
}, },
/* /*

View File

@ -1,6 +0,0 @@
# 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).

26
pages/blog.vue Normal file
View File

@ -0,0 +1,26 @@
<template lang="pug">
#blog
nuxt-link(to='/blog')
h1.title.has-text-centered ~ a mess of words ~
#top
nuxt-child
</template>
<script>
export default {
async asyncData({ app }) {
return {
listing: await app.$content('/').getAll()
}
},
head() {
return { title: 'blog' }
},
layout: 'compact'
}
</script>
<style lang="sass" scoped>
.title
margin-bottom: 5rem
</style>

View File

@ -1,9 +1,41 @@
<template lang="pug"> <template lang="pug">
#post #post
h1.title {{ post.title }}
h2.subtitle {{ post.tagline }}
p {{ post.date | prettifyDateLong }}
hr
.post-body.content(v-html='post.body')
a(href='#top') top
</template> </template>
<script> <script>
export default { export default {
layout: 'compact' async asyncData({ app, params, payload }) {
return {
post: await app.$content('/').get(params.slug),
}
},
head() {
return {
title: this.post.title,
}
},
beforeMount() {
if (this.post.draft) {
this.$router.replace('/blog')
}
},
layout: 'compact',
} }
</script> </script>
<style lang="sass" scoped>
@import '~assets/sass/utilities'
.post-body
width: 75%
margin-bottom: 5rem
font-size: $size-medium
a
text-decoration: underline
</style>

View File

@ -1,17 +1,43 @@
<template lang="pug"> <template lang="pug">
#blog ul.blog-items
li.blog-item(v-for='(post, index) in listing' v-if='!post.draft')
nuxt-link(:to='post.path')
span.post-title {{ post.title }}
span.post-date {{ post.date | prettifyDate }}
.post-tagline {{ post.tagline }}
hr(v-if='index < listing.length - 1')
</template> </template>
<script> <script>
export default { export default {
asyncData({ app, route }) { async asyncData({ app }) {
console.log(route)
},
head() {
return { return {
title: 'blog' listing: await app
.$content('/')
.query({ exclude: ['body', 'meta', 'permalink', 'anchors'] })
.getAll()
} }
}, },
layout: 'compact' layout: 'compact'
} }
</script> </script>
<style lang="sass" scoped>
@import '~assets/sass/utilities'
.blog-items
+desktop
width: 75%
margin: 0 auto
.blog-item
margin-bottom: 3rem
.post-title
font-size: $size-medium
.post-date
float: right
.post-tagline
font-size: $size-normal
color: $grey-light
margin-bottom: 1rem
width: fit-content
</style>

View File

@ -33,21 +33,19 @@
or my older #[a.has-text-info(href='https://github.com/matthewess') github account]. or my older #[a.has-text-info(href='https://github.com/matthewess') github account].
</template> </template>
<script>
export default {
head() {
return { title: 'projects' }
},
layout: 'compact'
}
</script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import '~bulma/sass/utilities/mixins' @import '~assets/sass/utilities'
+desktop +desktop
.is-half .is-half
width: 50% width: 50%
</style> </style>
<script>
export default {
head() {
return {
title: 'projects'
}
},
layout: 'compact'
}
</script>

View File

@ -47,23 +47,15 @@
<script> <script>
export default { export default {
head() { head() {
return { return { title: 'resume' }
title: 'resume'
}
}, },
layout: 'compact' layout: 'compact'
} }
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import '~bulma/sass/utilities/mixins' @import '~assets/sass/utilities'
@import '~assets/sass/variables'
$background: $primary
hr
height: 0.5rem
background: $background
+desktop +desktop
.is-three-quarters .is-three-quarters
width: 75% width: 75%

View File

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

38
plugins/filters.js Normal file
View File

@ -0,0 +1,38 @@
import Vue from 'vue'
const monthNames = [
{ short: 'jan', long: 'january' },
{ short: 'feb', long: 'february' },
{ short: 'mar', long: 'march' },
{ short: 'apr', long: 'april' },
{ short: 'may', long: 'may' },
{ short: 'jun', long: 'june' },
{ short: 'jul', long: 'july' },
{ short: 'aug', long: 'august' },
{ short: 'sep', long: 'september' },
{ short: 'oct', long: 'october' },
{ short: 'nov', long: 'november' },
{ short: 'dec', long: 'december' },
]
/*
** Very confusing to read, but this takes the YYYY-MM-DD format from posts
** and makes it readable in the way I want: either
** 'mon DD', 'mon DD YY', or 'month DD YYYY'
*/
const prettifyDate = (date, long) => {
date = date.split('-')
const month = monthNames[parseInt(date[1]) - 1] || {
short: date[1],
long: date[1],
}
const day = date[2]
const year = date[0]
const thisYear = year == new Date().getFullYear()
return `${long ? month.long : month.short} ${day} ${
long ? year : thisYear ? '' : year.substring(2)
}`
}
Vue.filter('prettifyDate', date => prettifyDate(date, false))
Vue.filter('prettifyDateLong', date => prettifyDate(date, true))

View File

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

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB