Obsidian：Roomをバナー付きにしてみた

自分だけのホームページをローカルに作る。

Room

Obsidianを立ち上げたとき最初に開くページ。

Dataviewを用いてファイル履歴を一覧表示します。ファイル名をタップするとそのページが開く。長押しするとファイル名の変更やブックマークできます。

「Obsidianはローカル・ネットワークのブラウザ」というコンセプトです。インターネットのメタファーで、ローカルにあるファイルを管理する。

ファイル名の検索もできるし結構便利。

Room.md

下記スクリプトをプレビューして使用。

Import Obsidian: Room

```dataviewjs
const FOLDER = "keyword/"
const BANNER = "banner.jpg"

const s = "background:ivory;width:119px;height:112px;border:1px solid #eee;border-top:8px solid gold;text-decoration:none;padding:3px;border-radius:3px;margin:3px;overflow:hidden;float:left;"
const ss = "border-top:8px solid orange;"

dv.paragraph(">[!info]- " + (BANNER? `![[${BANNER}]]`:"Room") + "\n>~~~dataview\n>task where !completed group by file.link\n>~~~")
const p = dv.el("input")
p.placeholder = "..."
p.style = "width:50%;font-size:large;background:whitesmoke;border-radius:3px;border:1px silver solid;"
const btn = dv.el("button","＋")
btn.style = "font-size:small;margin:5px;width:40px;"
const b = dv.el("div", "")
b.style = "font-size:small;font-weight:bold;height:4000px;"
disp()

p.onkeyup = () => disp()

btn.onclick = () => {
  q = encodeURI(p.value)
  if(q){
    open(`obsidian://new?file=${encodeURI(FOLDER)}${q}&content=%0A~~~query%0A${q}%0A~~~%0A`)
  }else{
    open("obsidian://new")
  }
}

function disp(){
  r = new RegExp(`(${p.value})`, "i")
  const c = dv.pages('').file
    .filter(x => r.test(x.name))
    .filter(x => x.starred)
    .sort(x => x.mtime, "desc")
    .map(x => `<a class=internal-link style='${s}${ss}' href='${x.path}'>${x.name}</a>`)
  const d = dv.array(Object.entries(dv.app.metadataCache.fileCache))
    .filter(([x,y]) => r.test(x))
    .sort(([x,y]) => y.mtime, "desc")
    .limit(210 - c.length)
    .map(([x,y]) => `<a class=internal-link style='${s}' href='${x}'>${x.split("/").pop().replace(".md","")}</a>`)
  b.innerHTML = c.join("") + d.join("")
}
```