Inkdrop - live-export を使ってみた

手順に沿ってやればすぐにブラウザでノートの内容を見ることができるようになる。楽ちん。 気になったところ。

• ノートの先頭に yaml 記法のヘッダー情報が必要
• url は ページタイトルから自動生成されるけど日本語はスルーされるので slug がヘッダーに必要
• public/posts フォルダがないと画像が出力されない (フォルダを作っておけばいい)

ノートの内容をブラウザで手軽に見たいなと日頃から思っているので、もうちょっと挙動を変えて自分好みにしたい。

• yaml 記法 → 書きたくない。
• slug → 書きたくない。noteId でいい。

試行錯誤した結果、live-export の index.js にある start と watchChanges でノートの先頭にヘッダ情報を差し込んだらいけた。

   async watchChanges(params) {
     logger.info('Watching changes..')
     let since = params.since ?? (await this.getLatestSeq())
     const timer = setInterval(async () => {
       try {
         const { results, last_seq } = await this.getChanges(since)
         for (const change of results) {
           if (
             change.id.startsWith('note:') &&
             change.doc.bookId === params.bookId &&
             change.seq > since
           ) {
-            const note = change.doc
+            const note = this.rebuildNote(change.doc)
  // 略

   async start(params) {
     const tags = await this.getTags()
     this.tagMap = tags.reduce((map, t) => ({ ...map, [t._id]: t }), {})
     const notes = await this.getNotes(params.bookId)
-    for (let n of notes) {
+    for (let n of notes) {
+      n = this.rebuildNote(n)
       await this.exportNote({ ...n }, params)
   // 略
  
+   rebuildNote(note) {
+     const header = `---
+ public: true
+ slug: ${note._id.replace('note:', '')}
+ ---\n`
+ 
+     note.body = header + note.body
+     return note
+   }

Inkdrop と同じようにサイドバーとノートリストもある構成にできるといいなぁと思いつつ、今日はここまで。 レイアウトを Inkdrop と同じようにサイドバーとノートリストの 3 カラムにするとか、live-export を別実装 (go とか) で作ってみたいなと思ってみたり。

Inkdrop をキーボード主体で使えるように hitahint を作っていて、プレビューモードのノートに加えて編集字のノート(エディタ)、サイドバーとノートリストにも対応したのでほぼブラウザ操作と近い挙動に既になってたりする (ブラウザの操作は cVim を使っているのでキーボードがメイン)。