Big change, hope it works!!!
parent
090868aa34
commit
2f9f7bc259
25
.eslintrc.js
25
.eslintrc.js
|
@ -2,23 +2,24 @@ module.exports = {
|
|||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true
|
||||
node: true,
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
parser: 'babel-eslint',
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/recommended',
|
||||
'plugin:prettier/recommended'
|
||||
],
|
||||
extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'vue',
|
||||
'prettier'
|
||||
],
|
||||
plugins: ['vue', 'prettier'],
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
'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',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
@ -10,8 +10,6 @@ cache:
|
|||
pages:
|
||||
script:
|
||||
- yarn generate
|
||||
- mkdir public
|
||||
- mv dist/* public/
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
@import '~bulma/sass/utilities/initial-variables'
|
||||
@import '~bulma/sass/utilities/functions'
|
||||
|
||||
$pink: #F4ACB7
|
||||
|
@ -21,3 +22,5 @@ $warning: $bright
|
|||
$warning-invert: $bright-invert
|
||||
$link: $purple
|
||||
$link-invert: $purple-invert
|
||||
|
||||
@import '~bulma/sass/utilities/all'
|
|
@ -1,6 +1,4 @@
|
|||
@import '~bulma/sass/utilities/initial-variables'
|
||||
|
||||
@import 'variables'
|
||||
@import 'utilities'
|
||||
|
||||
@import '~bulma/bulma'
|
||||
|
||||
|
|
|
@ -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
|
||||
---
|
|
@ -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'
|
|
@ -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).
|
|
@ -1,6 +1,6 @@
|
|||
const pkg = require('./package') // javascript.validate.enable false
|
||||
import pkg from './package'
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
mode: 'universal',
|
||||
|
||||
/*
|
||||
|
@ -31,20 +31,29 @@ module.exports = {
|
|||
/*
|
||||
** Plugins to load before mounting the App
|
||||
*/
|
||||
plugins: [],
|
||||
plugins: ['~/plugins/filters.js'],
|
||||
|
||||
/*
|
||||
** Nuxt.js modules
|
||||
*/
|
||||
modules: ['@nuxtjs/bulma', 'nuxtent'],
|
||||
|
||||
/*
|
||||
** Static Site Generation configuration
|
||||
*/
|
||||
generate: {
|
||||
dir: 'public'
|
||||
},
|
||||
|
||||
/*
|
||||
** Nuxtent configuration
|
||||
*/
|
||||
nuxtent: {
|
||||
page: '/posts/_slug',
|
||||
permalink: ':slug',
|
||||
generate: ['get', 'getAll']
|
||||
content: {
|
||||
page: '/blog/_slug',
|
||||
permalink: ':slug',
|
||||
generate: ['get', 'getAll']
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
|
@ -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).
|
|
@ -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>
|
|
@ -1,9 +1,41 @@
|
|||
<template lang="pug">
|
||||
#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>
|
||||
|
||||
<script>
|
||||
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>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
@import '~assets/sass/utilities'
|
||||
|
||||
.post-body
|
||||
width: 75%
|
||||
margin-bottom: 5rem
|
||||
font-size: $size-medium
|
||||
a
|
||||
text-decoration: underline
|
||||
</style>
|
||||
|
|
|
@ -1,17 +1,43 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
asyncData({ app, route }) {
|
||||
console.log(route)
|
||||
},
|
||||
head() {
|
||||
async asyncData({ app }) {
|
||||
return {
|
||||
title: 'blog'
|
||||
listing: await app
|
||||
.$content('/')
|
||||
.query({ exclude: ['body', 'meta', 'permalink', 'anchors'] })
|
||||
.getAll()
|
||||
}
|
||||
},
|
||||
layout: 'compact'
|
||||
}
|
||||
</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>
|
||||
|
|
|
@ -33,21 +33,19 @@
|
|||
or my older #[a.has-text-info(href='https://github.com/matthewess') github account].
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
head() {
|
||||
return { title: 'projects' }
|
||||
},
|
||||
layout: 'compact'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
@import '~bulma/sass/utilities/mixins'
|
||||
@import '~assets/sass/utilities'
|
||||
|
||||
+desktop
|
||||
.is-half
|
||||
width: 50%
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: 'projects'
|
||||
}
|
||||
},
|
||||
layout: 'compact'
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -47,23 +47,15 @@
|
|||
<script>
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: 'resume'
|
||||
}
|
||||
return { title: 'resume' }
|
||||
},
|
||||
layout: 'compact'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
@import '~bulma/sass/utilities/mixins'
|
||||
@import '~assets/sass/variables'
|
||||
@import '~assets/sass/utilities'
|
||||
|
||||
$background: $primary
|
||||
|
||||
hr
|
||||
height: 0.5rem
|
||||
background: $background
|
||||
+desktop
|
||||
.is-three-quarters
|
||||
width: 75%
|
||||
|
|
|
@ -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).
|
|
@ -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))
|
|
@ -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).
|
Binary file not shown.
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue