Reference:

• https://developer.github.com/v4/guides/forming-calls

Preface #

Why use GitHub Issues? #

It sucks to provide comment and reaction features. GitHub Issues is the only choice without third-party services. However, OAuth just on the client side is not so secure and you need to OAuth the blog before commenting! That will drive people away.

Besides, when writing issues, you can just drag your images to upload. That's surely more convenient than committing images to the git repo.

And with GitHub issue templates, it is very easy to draft a new post on a mobile device.

You even don't need an RSS, just watch the repo. (If you don't care about blog source code, you can subscribe to the issue's RSS, see the comment.)

Why not just GitHub Issue? #

One benefit is that I can use my own theme and make the blog more interactive.

Besides, though GitHub does provide a "sort:updated-desc" feature, searching, navigating, issue numbering and filtering are not so friendly to a blog.

Aim of the new blog #

I will provide 2 versions of the blog, the web version, and GitHub Issues version.

About Migrating #

Migrating will cause problems. Neither the created time nor the modified time is the actual time. An extra field is needed.

Get Hands Dirty #

Generate a Personal Access Token #

Here (https://github.com/settings/tokens/new) to generate.

You can actually uncheck all scope, and this token will only have access to public resources.

For more info for the scope, refer to https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/

Let's play with vue-apollo ! #

⚠️ Heads up!

Do not use vue-cli-plugin-apollo, it sucks: https://github.com/Akryum/vue-cli-plugin-apollo/issues/28

I want to manage production dependencies myself, not vue-cli-plugin-apollo!

As GitHub API v4 needs the Authorization header, the basic configuration is not enough. Use the full configuration install, and follow this apollo-client issue to setup.

If you import ApolloClient from 'apollo-boost', ApolloClient will not honor headers in fetchOption

Basically, src/plugins/vue-apollo.js will look like this:

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'

Vue.use(VueApollo)

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://api.github.com/graphql',
    headers: {
      Authorization: 'bearer <your token here>'
    }
  })
})

export default new VueApollo({
  defaultClient: apolloClient
})

And import it into src/main.js:

import Vue from 'vue'
import App from './App.vue'
import apolloProvider from './plugins/vue-apollo'

new Vue({
  apolloProvider,
  render: h => h(App)
}).$mount('#app')