import from GitHub Gist

このブログの静的サイトジェネレータ(名前はまだない。とりあえず'JaNG', Just-A-Note Generator にしておきます)をバージョン1.0.2に更新しました。変更点はgithub.comに作ったgistが取り込めるようになったこと。

Observableが(結構)簡単に取り込めたので、1時間程度でできるかと思ったら数日がかりになってしまいました。ChangeLog代わりに苦労した点を残しておきます。

// store/index.js
export const actions = {
  async nuxtServerInit({ commit }) {
    ...
    commit('mutations', ...)
  },
// store/index.js
export const actions = {
  async nuxtServerInit({ commit }) {
    const arr = Object.entries(gist)
    for(let val of arr) {
      const art = val[1]
      if (art.gistid !== undefined) {
        art.url = `https://gist.github.com/${art.owner}/${art.gistid}`
        const j = await axios.get(`${art.url}.json`)
        if (j.data === undefined)
          art.content = `could not load ${art.url}.json`
        else {
          art.content = j.data.div
          art.description = j.data.description
          art.created_at = j.data.created_at.substring(0, 10)
        }
      }
    }
    commit('mutations', arr)
  },
// pages/_year/_slug/ghc/index.vue > template

      <div :id="$route.params.slug" class="githubgist-content" :class="{ 'githubgist-frame': article.frame }">
        <span v-html="article.content"></span>
      </div>

const json = axios.get(url).then((res) => { return res.data })

でなければいけない問題。これもちょっとはまりました。

一個一個の問題は大したことないのだけど、切り分けができない多数の問題が降ってきたので、あああ、疲れた。

さて、なんでgithubの返す埋め込み用javascriptをそのまま使うのをやめたんだっけ? 最初に何も考えずにObservableのコードを流用したら動かなかったのは確かなんだけど。。。