このブログの静的サイトジェネレータ(名前はまだない。とりあえず'JaNG', Just-A-Note Generator にしておきます)をバージョン1.0.2に更新しました。変更点はgithub.comに作ったgistが取り込めるようになったこと。
Observableが(結構)簡単に取り込めたので、1時間程度でできるかと思ったら数日がかりになってしまいました。ChangeLog代わりに苦労した点を残しておきます。
Cross-Access-Allow-Origin
の制約に引っかかってデータがとって来れない。手動でリロードを掛けて、サーバー側のレンダリングされたページを持ってくれば表示はできるようにしてみたけど、それはどう考えてもかっこ悪い。nuxtServerInit
をストアに追加しました。(追加するのも一苦労。actionsの中に書くのね。)この関数は最終的にcommitでstoreのデータを更新すればよいと。// store/index.js
export const actions = {
async nuxtServerInit({ commit }) {
...
commit('mutations', ...)
},
forEach
で呼び出す関数が async
にできないことを理解するのに一苦労(まあ、nuxtServerInit
の先頭にasync
を置きながら、forEachの無名関数にもおかなくていいのか うっすらと 疑問は感じてた)。 for文に書き直して、レンダリングが始まる前に全てのエントリーのデータを持って来れるようになったのでデータ取得問題がやっと解決。// 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)
},
iframe
の大きさの取り扱いにも一苦労。 jupyter notebookを貼り付けたgistだけはheight: auto
が効かない(コンテンツの高さがデフォルトの150pxに固定されてしまう)。しょうがないので、設定ファイル中でipynbかどうかを指定するフラグを用意して、そのフラグが立っていたら、height: 2000px;
にしてしまうクラスを使うようにしました。(青い枠線が表示される場合があるのはデバッグ中の設定の名残りです。)// 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>
axios.get
ではデータそのものではなくレスポンスが返ってくるのでconst json = axios.get(url).then((res) => { return res.data })
でなければいけない問題。これもちょっとはまりました。
一個一個の問題は大したことないのだけど、切り分けができない多数の問題が降ってきたので、あああ、疲れた。
さて、なんでgithubの返す埋め込み用javascriptをそのまま使うのをやめたんだっけ? 最初に何も考えずにObservableのコードを流用したら動かなかったのは確かなんだけど。。。