類似したタイトルのページを関連ページとして表示する

https://gyazo.com/77e17c35a17c5cb21b16362330d4e3eb

リンクが繋がっているページはちゃんと除外される

リンクは繋がっていないが関係のあるページを発見できることがあってたのしい

今のバージョンだと、モバイル版ではクリックできるが、PCではクリックできない

ページカードが高速にappend・destroyされているからだと思う

右クリックで開くのはできる

Page Historyにある一番古いバージョンは普通にできる

使い方

以下を自分のページに書く

code:js

import('/api/code/scrapboxlab/類似したタイトルのページを関連ページとして表示する/script.js');

code:script.js

if (!document.getElementById('asearch-list-grid')) {

$('.page-wrapper .related-page-list.clearfix').append(

'<ul class="grid" id="asearch-list-grid">' +

'<li class="splitter" style="height: 30px !important" />' +

'<li class="relation-label"><a><span class="title">Similar Pages</span>' +

'<span class="kamon kamon-search icon-lg"/></a><span class="arrow"/></li></ul>'

);

const grid = $('#asearch-list-grid');

let worker = new Worker('/api/code/scrapboxlab/類似したタイトルのページを関連ページとして表示する/worker.js');

worker.onmessage = (e) => {

resetList();

const fragment = $(document.createDocumentFragment());

for (let { exists, title } of e.data) {

const item = $(`<li class="page-list-item grid-style-item${

exists ? '' : ' empty'

}">

<a href="/${scrapbox.Project.name}/${encodeURIComponent(title.replace(' ', '_'))}" rel="route">

<div class="hover"></div>

<div class="content">

<div class="header"><div class="title"></div></div>

<div class="description"><div class="line-img">

<div></div><div></div><div></div><div></div><div></div>

</div></div>

</div>

</a>`);

$('.title', item).text(title);

fragment.append(item);

}

grid.append(fragment);

};

let prevId = null;

let titleLcMap;

const observer = new MutationObserver(() => updateIfPage());

updateIfPage();

update(location.pathname);

function resetList() {

grid.children().slice(2).remove();

}

function regenTitleLcMap() {

titleLcMap = {};

for (let p of scrapbox.Project.pages) {

}

}

function pathToTitle(path) {

const a = path.replace(/#.*$/, '').split('/');

// Project.pagesを元にタイトル取得

const titleLc = title.toLowerCase();

}

return null;

}

function update() {

if (scrapbox.Page.title === 'new') {

resetList();

return;

}

// 既に関連リンクに入っているページのタイトルを取得する

let links = new Set();

regenTitleLcMap();

$('div.page-wrapper > div.related-page-list.clearfix > ul.grid:nth(0) > li a').each(

(i, e) => {

links.add(pathToTitle(e.pathname));

}

);

worker.postMessage({

title: scrapbox.Page.title,

pages: scrapbox.Project.pages,

links,

replace: prevId === scrapbox.Page.id, // ページタイトルを変更中の場合

prevId,

});

}

function updateIfPage() {

if (scrapbox.Layout !== 'page') return;

update();

prevId = scrapbox.Page.id;

}

}

あと、Scrapbox側の関連ページリストが更新されたらこのスクリプトが生成するリストも更新されるようになったはず（以前はページ遷移時のみでした）

code:worker.js

onmessage = (e) => {

const { title, pages, links, replace, prevId } = e.data;

const ambig = Math.min(

title.split('').every((s) => s.charCodeAt(0) < 0xff) ? 1 : 2,

title.length - 3

);

const titleLc = title.replace(/ /g, '_').toLowerCase();

postMessage([...new Set(pages.flatMap(p => {

if (p.title === title) return [];

if (replace && p.id === prevId) return [];

if (!(

p.titleLc.includes(titleLc) ||

titleLc.includes(p.titleLc) ||

(ambig >= 0 && search.match(p.title, ambig))

)) return [];

}))]);

};