/takker/scrapbox-commit-viewer

generated at 2/16/2025, 3:31:02 PM
scrapbox-commit-viewer
最新版：/programming-notes/scrapbox-history-slider@0.2.1

テーブル形式でcommit history (scrapbox)を表示するUserScript

こんなかんじ
table 時刻ID差分
 YYYY-MM-DDaaddadad+.......
 -........
別のタブで開くようにする
window.open().document.write()を用いてhtmlを書き込む

使い方
開発コンソールから実行する
jsimport('/api/code/takker/scrapbox-commit-viewer/script.js')
  .then(({execute}) => execute());
Page menuから実行する
pageMenu.jsimport {execute} from '/api/code/takker/scrapbox-commit-viewer/script.js';

scrapbox.PageMenu.addItem({
  title: 'Show this page\'s commits',
  onClick: () => execute(),
});
bookmarkletから実行する
無理
ESModuleを使えない

ちょっと見にくいかも
 before と after に余白が入りすぎている

script.jsimport {
  table, caption, thead, th, tbody, tr, td,
  a, style,
} from '../easyDOMgenerator/script.js';
import {lightFormat} from '../date-fns.min.js/script.js';

export async function execute() {
  const project = scrapbox.Project.name;
  const title = scrapbox.Page.title;
  const id = scrapbox.Page.id;
  
  const res = await fetch(`/api/commits/${project}/${id}`)
  const {commits} = await res.json();
  const dom = table(
    caption(
      a(
        {href: `../${project}/${title}`, target: '_blank', rel: 'noopener noreferrer'},
        `/${project}/${title}`
      ), 
      'の編集履歴'
    ),
    thead(th('Datetime'), th('Type'), th('Before'), th('After')),
    tbody(...commits.flatMap(({created, changes}) => [
      tr(
        td(lightFormat(new Date(created * 1000), 'yyyy-MM-dd HH:mm:ss')),
        td(getType(changes[0])),
        td(changes[0].lines.origText ?? ''),
        td(changes[0].lines.text ?? ''),
      ),
      ...changes.slice(1).flatMap(change => !getType(change) ? [] :
        [tr(
          td(''),
          td(getType(change)),
          td(change.lines.origText ?? ''),
          td(change.lines.text ?? ''),
        )]
      ),
    ])),
  );
  const tab = window.open();
  tab.document.write(dom.outerHTML);
  tab.document.close();
  tab.document.head.appendChild(style(
`th {
  text-align: left;
}
td {
  white-space: nowrap;
}
`
  ));
}

function getType(change) {
  return Object.keys(change).find(key => key.startsWith('_'))?.slice?.(1);
}

#2021-07-20 08:22:46 
#2021-03-27 02:40:50 
#2021-01-05 12:40:33
時刻	ID	差分
YYYY-MM-DD	aaddadad	+.......
		-........