Importable Code Block
Scrapboxはコードブロックを書くとその部分が単一のコードとしてアクセス可能になる
例えばこのページの下部に書いたscript.jsはhttps://scrapbox.io/api/code/nekobatoken/Importable_Code_Block/script.js としてアクセス可能
これはURLから直接コードを引っ張ってくるDenoと相性が良い
ってkeroxp.iconが言ってた
Scrapboxに載せたコードをそのまま手元のコードで実行できる
e.g.
import runHello from https://scrapbox.io/api/code/deno-ja/hello_deno/hello.ts とか
使用例
ScrapboxにHands On Sampleとして書いたコードを他人がすぐに利用できる
簡単なライブラリならScrapboxにドキュメント付きで置いておけば良い（？）
Write権限がある人同士ならリアルタイムに加筆して利用できる
refs
/deno-ja/hello deno
/daiiz-deno
コードブロックがimportableなのはScrapboxの機能だが、更に拡張すると便利なのでは？
普通に書いたコードブロックが他から参照可能になるのは素晴らしい
コードブロックがコードとして外部から利用できるなら、それはドキュメントではなくドキュメントファーストのコードと言えるのでは
ドキュメント部分に画像も動画も埋め込めて便利
拡張
import(require)って書いたらnpm、ないしは公式サイトへのリンクが生成されてほしい
そういうVSCode moduleはある
https://marketplace.visualstudio.com/items?itemName=herrmannplatz.npm-dependency-links
もっとリッチに表示してもよさそう
Node.jsとかGoはWebにかなり頼っているのだから、Web方面に強化したら嬉しいのでは
exemplification:
コードブロック内でimportすると下のリストに追加するボタンをMenuに追加するスプリプト↓
https://gyazo.com/e1d1a4101bdef0ca735ea512d0a195e3
こうなる
code:script.js
window.scrapbox.PageMenu.addItem({
title: 'Importable Code Block',
onClick: (e) => {
const relationLabel = '<li class="relation-label links"><a><span class="title">Dependencies</span><span class="kamon kamon-link-on icon-lg"></span></a><span class="arrow"></span></li>';
function addRelationLink(page) {
const exLink = document.createElement('li');
exLink.className = 'page-list-item grid-style-item';
exLink.innerHTML = <a href="/nekobatoken/${page.title}" rel="route"><div class="hover"></div><div class="content"><div class="header"><div class="title">${page.title}</div></div><div class="description"><p> +
page.descriptions.map((desc) => { return desc }) +
</p></div></div></a>;
document.querySelector('.ex-code-link-list').appendChild(exLink);
}
const newList = document.createElement('ul');
newList.className = 'grid ex-code-link-list';
newList.innerHTML = relationLabel;
document.querySelector('.related-page-list').appendChild(newList);
const codelines = window.scrapbox.Page.lines.filter((line) => {
if (line.codeBlock) {
return true;
}
});
const dependencies = codelines.reduce((acc, line) => {
const text = line.text.trim();
const matched = text.match(/^import\s(\'|\")(.+)(\'|\")/);
if (matched) {
acc.push(matched2)
}
return acc;
}, []);
// path: /api/code/nekobatoken/~
dependencies.forEach((path) => {
// TODO: logic as a proper replacement
path = path.replace(/api/code/, '').replace('/script.js', '');
fetch(/api/pages/${path})
.then((res) => res.json())
.then((res) => {
addRelationLink(res);
})
});
}
});