├── .github
    └── workflows
    │   ├── ci.yml
    │   └── update.yml
├── App.tsx
├── Bubble.tsx
├── Card.tsx
├── CardList.tsx
├── LICENSE
├── Page.tsx
├── README.md
├── TextBubble.tsx
├── UserCSS.tsx
├── __snapshots__
    └── convert.test.ts.snap
├── app.css
├── app.min.css.ts
├── bubble.ts
├── cache.ts
├── card.css
├── cardBubble.css
├── convert.test.ts
├── convert.ts
├── debug.ts
├── deno.jsonc
├── deno.lock
├── deps
    ├── async.ts
    ├── esbuild.ts
    ├── immer.ts
    ├── option-t.ts
    ├── preact.tsx
    ├── scrapbox-parser.ts
    ├── scrapbox-std-browser.ts
    ├── scrapbox-std.ts
    ├── scrapbox.ts
    └── testing.ts
├── detectURL.test.ts
├── detectURL.ts
├── eventEmitter.ts
├── global.css
├── hasLink.test.ts
├── hasLink.ts
├── id.test.ts
├── id.ts
├── is.ts
├── katex.ts
├── mod.tsx
├── page.css
├── parseLink.test.ts
├── parseLink.ts
├── position.ts
├── scripts
    └── minifyCSS.ts
├── statusBar.css
├── stayHovering.ts
├── storage.test.ts
├── storage.ts
├── textBubble.css
├── throttle.test.ts
├── throttle.ts
├── type-traits.ts
├── types.ts
├── useBubbleData.ts
├── useBubbles.ts
├── useEventListener.ts
├── useKaTeX.ts
├── useProject.ts
├── useTheme.ts
└── watchList.ts


/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: ci
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | jobs:
 6 |   test:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |       - uses: actions/checkout@v4
10 |       - uses: denoland/setup-deno@v2
11 |         with:
12 |           deno-version: "v2"
13 |       - name: Check all
14 |         run: deno task check:all
15 | 


--------------------------------------------------------------------------------
/.github/workflows/update.yml:
--------------------------------------------------------------------------------
 1 | name: update
 2 | 
 3 | on:
 4 |   schedule:
 5 |     - cron: "0 0 * * *"
 6 |   workflow_dispatch:
 7 | 
 8 | permissions:
 9 |   contents: write
10 |   pull-requests: write
11 | 
12 | jobs:
13 |   update:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v4
17 |       - uses: hasundue/molt-action@v1
18 |         with:
19 |           commit-prefix: ":package:"
20 |           source: |-
21 |             deps/*.ts
22 |             deno.jsonc
23 | 


--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
  1 | /** @jsxRuntime automatic */
  2 | /** @jsxImportSource npm:preact@10 */
  3 | import { Bubble } from "./Bubble.tsx";
  4 | import { UserCSS } from "./UserCSS.tsx";
  5 | import { CSS } from "./app.min.css.ts";
  6 | import { useCallback, useEffect } from "./deps/preact.tsx";
  7 | import { useBubbles } from "./useBubbles.ts";
  8 | import { stayHovering } from "./stayHovering.ts";
  9 | import { useEventListener } from "./useEventListener.ts";
 10 | import { isPageLink, isTitle } from "./is.ts";
 11 | import { parseLink } from "./parseLink.ts";
 12 | import { toId } from "./id.ts";
 13 | import { calcBubblePosition } from "./position.ts";
 14 | import { prefetch as prefetch_ } from "./bubble.ts";
 15 | import type { LinkType } from "./types.ts";
 16 | import type { ProjectId, Scrapbox } from "./deps/scrapbox.ts";
 17 | declare const scrapbox: Scrapbox;
 18 | 
 19 | export const userscriptName = "scrap-bubble";
 20 | 
 21 | export interface AppProps {
 22 |   /** hoverしてからbubbleを表示するまでのタイムラグ */
 23 |   delay: number;
 24 | 
 25 |   /** 透過的に扱うprojectのリスト */
 26 |   whiteList: Set<string>;
 27 | 
 28 |   /** watch list */
 29 |   watchList: Set<ProjectId>;
 30 | 
 31 |   /** カスタムCSS
 32 |    *
 33 |    * URL or URL文字列の場合は、CSSファイルへのURLだとみなして<link />で読み込む
 34 |    * それ以外の場合は、インラインCSSとして<style />で読み込む
 35 |    */
 36 |   style: URL | string;
 37 | }
 38 | 
 39 | export const App = (
 40 |   { delay, whiteList, watchList, style }: AppProps,
 41 | ) => {
 42 |   const [{ bubble, hide }, ...bubbles] = useBubbles();
 43 | 
 44 |   /** ページデータを先読みする
 45 |    *
 46 |    * white listにない外部プロジェクトリンクは、そのページだけを読み込む
 47 |    */
 48 |   const prefetch = useCallback((project: string, title: string) =>
 49 |     prefetch_(
 50 |       title,
 51 |       whiteList.has(project) ? whiteList : new Set([project]),
 52 |       watchList,
 53 |     ), [whiteList, watchList]);
 54 | 
 55 |   // hover処理
 56 |   useEventListener(
 57 |     document,
 58 |     "pointerenter",
 59 |     async (event: PointerEvent) => {
 60 |       const link = event.target as HTMLElement;
 61 | 
 62 |       // 処理を<a>か.line-titleのときに限定する
 63 |       if (!isPageLink(link) && !isTitle(link)) return;
 64 | 
 65 |       const {
 66 |         project = scrapbox.Project.name,
 67 |         title: encodedTitle,
 68 |         hash = "",
 69 |       } = isPageLink(link)
 70 |         ? parseLink({
 71 |           pathType: "root",
 72 |           href: `${new URL(link.href).pathname}${new URL(link.href).hash}`,
 73 |         })
 74 |         : { project: scrapbox.Project.name, title: scrapbox.Page.title };
 75 |       // [/project]の形のリンクは何もしない
 76 |       if (project === "") return;
 77 |       const title = decodeURIComponent(encodedTitle ?? "");
 78 | 
 79 |       prefetch(project, title);
 80 | 
 81 |       // delay以内にカーソルが離れるかクリックしたら何もしない
 82 |       if (!await stayHovering(link, delay)) return;
 83 | 
 84 |       bubble({
 85 |         project,
 86 |         title,
 87 |         hash,
 88 |         position: calcBubblePosition(link),
 89 |         type: getLinkType(link),
 90 |       });
 91 |     },
 92 |     { capture: true },
 93 |     [
 94 |       delay,
 95 |       whiteList,
 96 |       watchList,
 97 |     ],
 98 |   );
 99 | 
100 |   // カード外クリックで全てのbubbleを隠す
101 |   useEventListener(
102 |     document,
103 |     "click",
104 |     (e) => {
105 |       const target = e.target as HTMLElement;
106 |       if (target.dataset.userscriptName === userscriptName) return;
107 |       hide();
108 |     },
109 |     { capture: true },
110 |     [hide],
111 |   );
112 | 
113 |   // ページ遷移でカードを消す
114 |   useEffect(() => {
115 |     scrapbox.addListener("page:changed", hide);
116 |     return () => scrapbox.removeListener("page:changed", hide);
117 |   }, [hide]);
118 | 
119 |   return (
120 |     <>
121 |       <link
122 |         rel="stylesheet"
123 |         href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css"
124 |       />
125 |       <style>{CSS}</style>
126 |       <UserCSS style={style} />
127 |       {bubbles.map((bubble) => (
128 |         <Bubble
129 |           key={toId(bubble.source.project, bubble.source.title)}
130 |           {...bubble}
131 |           whiteList={whiteList}
132 |           delay={delay}
133 |           prefetch={prefetch}
134 |         />
135 |       ))}
136 |     </>
137 |   );
138 | };
139 | 
140 | const getLinkType = (element: HTMLSpanElement | HTMLAnchorElement): LinkType =>
141 |   isPageLink(element)
142 |     ? (element.type === "link" ? "link" : "hashtag")
143 |     : "title";
144 | 


--------------------------------------------------------------------------------
/Bubble.tsx:
--------------------------------------------------------------------------------
  1 | /** @jsxRuntime automatic */
  2 | /** @jsxImportSource npm:preact@10 */
  3 | import { CardList } from "./CardList.tsx";
  4 | import { useLayoutEffect, useMemo, useState } from "./deps/preact.tsx";
  5 | import { toTitleLc } from "./deps/scrapbox-std.ts";
  6 | import { useBubbleData } from "./useBubbleData.ts";
  7 | import { LinkTo } from "./types.ts";
  8 | import { fromId, ID, toId } from "./id.ts";
  9 | import { Bubble as BubbleData } from "./storage.ts";
 10 | import { produce } from "./deps/immer.ts";
 11 | import type { BubbleSource } from "./useBubbles.ts";
 12 | import { createDebug } from "./debug.ts";
 13 | import type { Scrapbox } from "./deps/scrapbox.ts";
 14 | import { TextBubble } from "./TextBubble.tsx";
 15 | declare const scrapbox: Scrapbox;
 16 | 
 17 | const logger = createDebug("ScrapBubble:Bubble.tsx");
 18 | 
 19 | export interface BubbleProps extends BubbleSource {
 20 |   whiteList: Set<string>;
 21 |   delay: number;
 22 |   prefetch: (project: string, title: string) => void;
 23 | }
 24 | 
 25 | export const Bubble = ({
 26 |   source,
 27 |   parentTitles,
 28 |   whiteList,
 29 |   ...props
 30 | }: BubbleProps) => {
 31 |   /** 検索対象のproject list */
 32 |   const projects = useMemo(
 33 |     () =>
 34 |       whiteList.has(source.project)
 35 |         // source.projectを一番先頭にする
 36 |         ? new Set([source.project, ...whiteList])
 37 |         : new Set([source.project]),
 38 |     [whiteList, source.project],
 39 |   );
 40 | 
 41 |   const [linked, externalLinked, pages] = useBubbleFilter(
 42 |     source,
 43 |     projects,
 44 |     whiteList,
 45 |     parentTitles,
 46 |   );
 47 | 
 48 |   return (
 49 |     <>
 50 |       {hasOneBubble(pages) && (
 51 |         <TextBubble
 52 |           pages={pages}
 53 |           source={source}
 54 |           whiteList={whiteList}
 55 |           onClick={props.hide}
 56 |           {...props}
 57 |         />
 58 |       )}
 59 |       <CardList
 60 |         linked={linked}
 61 |         externalLinked={externalLinked}
 62 |         onClick={props.hide}
 63 |         source={source}
 64 |         projectsForSort={projects}
 65 |         {...props}
 66 |       />
 67 |     </>
 68 |   );
 69 | };
 70 | 
 71 | const hasOneBubble = (
 72 |   pages: BubbleData[],
 73 | ): pages is [BubbleData, ...BubbleData[]] => pages.length > 0;
 74 | 
 75 | /** 指定したsourceからbubblesするページ本文とページカードを、親bubblesやwhiteListを使って絞り込む
 76 |  *
 77 |  * <Bubble />でやっている処理の一部を切り出して見通しをよくしただけ
 78 |  */
 79 | const useBubbleFilter = (
 80 |   source: { project: string; title: string },
 81 |   projects: Set<string>,
 82 |   whiteList: Set<string>,
 83 |   parentTitles: string[],
 84 | ) => {
 85 |   type LinkMap = Map<ID, LinkTo>;
 86 | 
 87 |   const [[linked, externalLinked, pages], setBubbleData] = useState<
 88 |     [LinkMap, LinkMap, BubbleData[]]
 89 |   >([new Map(), new Map(), []]);
 90 | 
 91 |   const pageIds = useMemo(
 92 |     () => {
 93 |       const pageIds = [...projects].map((project) =>
 94 |         toId(project, source.title)
 95 |       );
 96 | 
 97 |       logger.debug("projects", pageIds);
 98 |       return pageIds;
 99 |     },
100 |     [projects, source.title],
101 |   );
102 | 
103 |   const bubbles = useBubbleData(pageIds);
104 |   const parentsLc = useMemo(
105 |     () => parentTitles.map((title) => toTitleLc(title)),
106 |     [parentTitles],
107 |   );
108 | 
109 |   useLayoutEffect(
110 |     () => {
111 |       /** `source.title`を内部リンク記法で参照しているリンクのリスト */
112 |       const linked = new Map<ID, LinkTo>();
113 |       /** `source.title`を外部リンク記法で参照しているリンクのリスト */
114 |       const externalLinked = new Map<ID, LinkTo>();
115 |       /** ページ本文
116 |        *
117 |        * bubbleをそのまま保つことで、参照の違いのみで更新の有無を判断できる
118 |        */
119 |       const pages: BubbleData[] = [];
120 | 
121 |       // 逆リンクおよびpagesから, parentsとwhitelistにないものを除いておく
122 |       for (const bubble of bubbles) {
123 |         const eLinkTo = { project: bubble.project, titleLc: bubble.titleLc };
124 |         for (const id of bubble.projectLinked ?? []) {
125 |           const { project, titleLc } = fromId(id);
126 |           // External Linksの内、projectがwhiteListに属するlinksも重複除去処理を施す
127 |           if (parentsLc.includes(titleLc) && whiteList.has(project)) {
128 |             continue;
129 |           }
130 |           if (externalLinked.has(id)) continue;
131 |           externalLinked.set(id, eLinkTo);
132 |         }
133 |         // whiteLitにないprojectのページは、External Links以外表示しない
134 |         if (!whiteList.has(bubble.project)) continue;
135 |         const linkTo = { titleLc: bubble.titleLc };
136 |         // 親と重複しない逆リンクのみ格納する
137 |         for (const linkLc of bubble.linked ?? []) {
138 |           if (parentsLc.includes(linkLc)) continue;
139 |           const id = toId(bubble.project, linkLc);
140 |           if (linked.has(id)) continue;
141 |           linked.set(id, linkTo);
142 |         }
143 |         // 親と重複しないページ本文のみ格納する
144 |         if (parentsLc.includes(bubble.titleLc)) continue;
145 |         if (!bubble.exists) continue;
146 |         pages.push(bubble);
147 |       }
148 | 
149 |       // 再レンダリングを抑制するために、必要なものだけ更新する
150 |       setBubbleData(produce((draft) => {
151 |         logger.debug(
152 |           `depth: ${parentsLc.length}, bubbled from ${
153 |             toId(source.project, source.title)
154 |           }, bubbles,`,
155 |           bubbles,
156 |           "before",
157 |           draft[0],
158 |           `internal cards,`,
159 |           linked,
160 |           "external cards",
161 |           externalLinked,
162 |         );
163 |         for (const key of draft[0].keys()) {
164 |           if (!linked.has(key)) draft[0].delete(key);
165 |         }
166 |         for (const [key, value] of linked) {
167 |           draft[0].set(key, value);
168 |         }
169 | 
170 |         for (const key of draft[1].keys()) {
171 |           if (!externalLinked.has(key)) draft[1].delete(key);
172 |         }
173 |         for (const [key, value] of externalLinked) {
174 |           draft[1].set(key, value);
175 |         }
176 |         draft[2] = pages;
177 |       }));
178 |     },
179 |     [bubbles, whiteList, parentsLc],
180 |   );
181 | 
182 |   return [linked, externalLinked, pages] as const;
183 | };
184 | 


--------------------------------------------------------------------------------
/Card.tsx:
--------------------------------------------------------------------------------
  1 | /** @jsxRuntime automatic */
  2 | /** @jsxImportSource npm:preact@10 */
  3 | import { h, useCallback, useMemo } from "./deps/preact.tsx";
  4 | import { useKaTeX } from "./useKaTeX.ts";
  5 | import { encodeTitleURI } from "./deps/scrapbox-std.ts";
  6 | import { pushPageTransition } from "./deps/scrapbox-std-browser.ts";
  7 | import {
  8 |   FormulaNode,
  9 |   HashTagNode,
 10 |   IconNode,
 11 |   LinkNode,
 12 |   Node as NodeType,
 13 |   StrongIconNode,
 14 | } from "./deps/scrapbox-parser.ts";
 15 | import { parse } from "./deps/scrapbox-parser.ts";
 16 | import { useTheme } from "./useTheme.ts";
 17 | import { stayHovering } from "./stayHovering.ts";
 18 | import { BubbleOperators } from "./useBubbles.ts";
 19 | import { calcBubblePosition } from "./position.ts";
 20 | import type { Scrapbox } from "./deps/scrapbox.ts";
 21 | declare const scrapbox: Scrapbox;
 22 | 
 23 | export interface CardProps {
 24 |   project: string;
 25 |   title: string;
 26 |   descriptions: string[];
 27 |   thumbnail: string;
 28 |   linkTo?: {
 29 |     project?: string;
 30 |     titleLc: string;
 31 |   };
 32 |   delay: number;
 33 |   prefetch: (project: string, title: string) => void;
 34 |   bubble: BubbleOperators["bubble"];
 35 | }
 36 | 
 37 | export const Card = ({
 38 |   project,
 39 |   title,
 40 |   descriptions,
 41 |   thumbnail,
 42 |   linkTo,
 43 |   bubble,
 44 |   delay,
 45 |   prefetch,
 46 | }: CardProps) => {
 47 |   const blocks = useMemo(
 48 |     () => thumbnail ? [] : parse(descriptions.join("\n"), { hasTitle: false }),
 49 |     [
 50 |       thumbnail,
 51 |       descriptions,
 52 |     ],
 53 |   );
 54 |   const theme = useTheme(project);
 55 | 
 56 |   const handleEnter = useCallback(
 57 |     async (
 58 |       { currentTarget: a }: h.JSX.TargetedMouseEvent<HTMLAnchorElement>,
 59 |     ) => {
 60 |       prefetch(project, title);
 61 | 
 62 |       if (!await stayHovering(a, delay)) return;
 63 | 
 64 |       bubble({
 65 |         project,
 66 |         title,
 67 |         linkTo,
 68 |         type: "link",
 69 |         position: calcBubblePosition(a),
 70 |       });
 71 |     },
 72 |     [project, title, delay, linkTo?.project, linkTo?.titleLc],
 73 |   );
 74 | 
 75 |   const handleClick = useMemo(() =>
 76 |     linkTo
 77 |       ? () => {
 78 |         pushPageTransition({
 79 |           type: "page",
 80 |           from: { project: linkTo.project ?? project, title: linkTo.titleLc },
 81 |           to: { project, title },
 82 |         });
 83 |       }
 84 |       : () => {}, [project, title, linkTo?.project, linkTo?.titleLc]);
 85 | 
 86 |   return (
 87 |     <a
 88 |       className="related-page-card page-link"
 89 |       type="link"
 90 |       data-theme={theme}
 91 |       href={`/${project}/${encodeTitleURI(title)}`}
 92 |       rel={project === scrapbox.Project.name ? "route" : "noopner noreferrer"}
 93 |       target={project !== scrapbox.Project.name ? "_blank" : ""}
 94 |       onPointerEnter={handleEnter}
 95 |       onClick={handleClick}
 96 |     >
 97 |       <div class="hover" />
 98 |       <div class="content">
 99 |         <div class="header">
100 |           <div class="title">{title}</div>
101 |         </div>
102 |         {thumbnail
103 |           ? (
104 |             <div class="thumbnail">
105 |               <img src={thumbnail} />
106 |             </div>
107 |           )
108 |           : (
109 |             <div class="description">
110 |               {blocks.flatMap((block, index) =>
111 |                 block.type === "line"
112 |                   ? [
113 |                     <p key={index}>
114 |                       {block.nodes.map((node) => (
115 |                         <SummaryNode node={node} project={project} />
116 |                       ))}
117 |                     </p>,
118 |                   ]
119 |                   : []
120 |               )}
121 |             </div>
122 |           )}
123 |       </div>
124 |     </a>
125 |   );
126 | };
127 | 
128 | type NodeProps = {
129 |   node: NodeType;
130 |   project: string;
131 | };
132 | const SummaryNode = ({ node, project }: NodeProps) => {
133 |   switch (node.type) {
134 |     case "code":
135 |       return <code>{node.text}</code>;
136 |     case "formula":
137 |       return <Formula node={node} />;
138 |     case "commandLine":
139 |       return <code>{node.symbol} ${node.text}</code>;
140 |     case "helpfeel":
141 |       return <code>? {node.text}</code>;
142 |     case "quote":
143 |     case "strong":
144 |     case "decoration":
145 |       return (
146 |         <>
147 |           {node.nodes.map((node) => (
148 |             <SummaryNode node={node} project={project} />
149 |           ))}
150 |         </>
151 |       );
152 |     case "icon":
153 |     case "strongIcon":
154 |       return <Icon node={node} project={project} />;
155 |     case "hashTag":
156 |       return <HashTag node={node} />;
157 |     case "link":
158 |       return <Link node={node} />;
159 |     case "plain":
160 |     case "blank":
161 |       return <>{node.text}</>;
162 |     default:
163 |       return;
164 |   }
165 | };
166 | 
167 | type FormulaProps = {
168 |   node: FormulaNode;
169 | };
170 | const Formula = ({ node: { formula } }: FormulaProps) => {
171 |   const { ref, error } = useKaTeX(formula);
172 | 
173 |   return (
174 |     <span className={`formula ${error ? " error" : ""}`}>
175 |       {error
176 |         ? <code>{formula}</code>
177 |         : <span className="katex-display" ref={ref} />}
178 |     </span>
179 |   );
180 | };
181 | type IconProps = {
182 |   project: string;
183 |   node: IconNode | StrongIconNode;
184 | };
185 | const Icon = ({ node: { pathType, path }, project: _project }: IconProps) => {
186 |   const [project, title] = pathType === "relative"
187 |     ? [
188 |       _project,
189 |       path,
190 |     ]
191 |     : path.match(/\/([\w\-]+)\/(.+)$/)?.slice?.(1) ?? [_project, path];
192 | 
193 |   return (
194 |     <img
195 |       class="icon"
196 |       src={`/api/pages/${project}/${encodeTitleURI(title)}/icon`}
197 |     />
198 |   );
199 | };
200 | type HashTagProps = {
201 |   node: HashTagNode;
202 | };
203 | const HashTag = ({ node: { href } }: HashTagProps) => (
204 |   <span class="page-link">#{href}</span>
205 | );
206 | type LinkProps = {
207 |   node: LinkNode;
208 | };
209 | const Link = ({ node: { pathType, href, content } }: LinkProps) =>
210 |   pathType !== "absolute"
211 |     ? <span class="page-link">{href}</span> // contentが空のときはundefinedではなく''になるので、
212 |     // ??ではなく||でfallback処理をする必要がある
213 |     : <span class="link">{content || href}</span>;
214 | 


--------------------------------------------------------------------------------
/CardList.tsx:
--------------------------------------------------------------------------------
  1 | /** @jsxRuntime automatic */
  2 | /** @jsxImportSource npm:preact@10 */
  3 | import { Card } from "./Card.tsx";
  4 | import { h, useMemo } from "./deps/preact.tsx";
  5 | import { useBubbleData } from "./useBubbleData.ts";
  6 | import { Bubble } from "./storage.ts";
  7 | import { LinkTo } from "./types.ts";
  8 | import { ID, toId } from "./id.ts";
  9 | import { BubbleOperators, Source } from "./useBubbles.ts";
 10 | 
 11 | export interface CardListProps {
 12 |   delay: number;
 13 |   prefetch: (project: string, title: string) => void;
 14 |   /** key ページカードのID, value: 逆リンク先 */
 15 |   linked: Map<ID, LinkTo>;
 16 |   /** key ページカードのID, value: 逆リンク先 */
 17 |   externalLinked: Map<ID, LinkTo>;
 18 |   bubble: BubbleOperators["bubble"];
 19 |   source: Pick<Source, "project" | "title" | "position">;
 20 |   projectsForSort: Set<string>;
 21 |   onClick?: h.JSX.MouseEventHandler<HTMLUListElement>;
 22 | }
 23 | 
 24 | export const CardList = ({
 25 |   source,
 26 |   linked,
 27 |   externalLinked,
 28 |   projectsForSort: projectsForSort_,
 29 |   ...props
 30 | }: CardListProps) => {
 31 |   const ids = useMemo(() => [...linked.keys(), ...externalLinked.keys()], [
 32 |     linked,
 33 |     externalLinked,
 34 |   ]);
 35 |   const cards = useBubbleData(ids);
 36 | 
 37 |   const projectsForSort = useMemo(() => [...projectsForSort_], [
 38 |     projectsForSort_,
 39 |   ]);
 40 |   /** 更新日時降順とproject昇順に並び替えた関連ページデータ
 41 |    *
 42 |    * externalCardsは分けない
 43 |    */
 44 |   const sortedCards = useMemo(
 45 |     () => {
 46 |       const compare = (a: Bubble, b: Bubble) => {
 47 |         const aIndex = projectsForSort.indexOf(a.project);
 48 |         const bIndex = projectsForSort.indexOf(b.project);
 49 | 
 50 |         if (aIndex === bIndex) return b.updated - a.updated;
 51 |         if (aIndex < 0) return 1;
 52 |         if (bIndex < 0) return -1;
 53 |         return aIndex - bIndex;
 54 |       };
 55 | 
 56 |       return [...cards].sort(compare);
 57 |     },
 58 |     [cards, projectsForSort],
 59 |   );
 60 | 
 61 |   const cardStyle = useMemo(() => ({
 62 |     bottom: `${source.position.bottom}px`,
 63 |     maxWidth: `${source.position.maxWidth}px`,
 64 |     ...("left" in source.position
 65 |       ? {
 66 |         left: `${source.position.left}px`,
 67 |       }
 68 |       : {
 69 |         right: `${source.position.right}px`,
 70 |       }),
 71 |   }), [
 72 |     source.position,
 73 |   ]);
 74 | 
 75 |   return (
 76 |     <ul
 77 |       className="card-bubble"
 78 |       style={cardStyle}
 79 |       onClick={props.onClick}
 80 |     >
 81 |       {sortedCards.map((
 82 |         {
 83 |           project,
 84 |           titleLc,
 85 |           lines: [{ text: title }],
 86 |           descriptions,
 87 |           image,
 88 |         },
 89 |       ) => {
 90 |         const key = toId(project, titleLc);
 91 |         // hookの計算にラグがあり、linkToが見つからない場合がある
 92 |         const linkTo = linked.get(key) ?? externalLinked.get(key);
 93 | 
 94 |         return (
 95 |           <li key={key}>
 96 |             <Card
 97 |               project={project}
 98 |               title={title}
 99 |               linkTo={linkTo}
100 |               descriptions={descriptions}
101 |               thumbnail={image ?? ""}
102 |               {...props}
103 |             />
104 |           </li>
105 |         );
106 |       })}
107 |     </ul>
108 |   );
109 | };
110 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 takker
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Page.tsx:
--------------------------------------------------------------------------------
  1 | /** @jsxRuntime automatic */
  2 | /** @jsxImportSource npm:preact@10 */
  3 | import {
  4 |   ComponentChildren,
  5 |   createContext,
  6 |   h,
  7 |   useCallback,
  8 |   useContext,
  9 |   useEffect,
 10 |   useMemo,
 11 |   useRef,
 12 |   useState,
 13 | } from "./deps/preact.tsx";
 14 | import { useKaTeX } from "./useKaTeX.ts";
 15 | import {
 16 |   CodeBlock as CodeBlockType,
 17 |   CommandLineNode,
 18 |   DecorationNode,
 19 |   FormulaNode,
 20 |   GoogleMapNode,
 21 |   HashTagNode,
 22 |   IconNode,
 23 |   ImageNode,
 24 |   Line as LineType,
 25 |   LinkNode,
 26 |   Node as NodeType,
 27 |   StrongIconNode,
 28 |   Table as TableType,
 29 | } from "./deps/scrapbox-parser.ts";
 30 | import { parseLink } from "./parseLink.ts";
 31 | import { hasLink } from "./hasLink.ts";
 32 | import { toId } from "./id.ts";
 33 | import { stayHovering } from "./stayHovering.ts";
 34 | import { BubbleOperators } from "./useBubbles.ts";
 35 | import { LinkTo } from "./types.ts";
 36 | import { useBubbleData } from "./useBubbleData.ts";
 37 | import { isEmptyLink } from "./storage.ts";
 38 | import { calcBubblePosition } from "./position.ts";
 39 | import { parse } from "./deps/scrapbox-parser.ts";
 40 | import {
 41 |   AnchorFMNode,
 42 |   AudioNode,
 43 |   encodeTitleURI,
 44 |   parseAbsoluteLink,
 45 |   SpotifyNode,
 46 |   VideoNode,
 47 |   VimeoNode,
 48 |   YoutubeListNode,
 49 |   YoutubeNode,
 50 | } from "./deps/scrapbox-std.ts";
 51 | import type { Scrapbox } from "./deps/scrapbox.ts";
 52 | import { useTheme } from "./useTheme.ts";
 53 | import { delay } from "./deps/async.ts";
 54 | declare const scrapbox: Scrapbox;
 55 | 
 56 | declare global {
 57 |   interface Window {
 58 |     /** CSRF token */
 59 |     _csrf?: string;
 60 |   }
 61 | }
 62 | 
 63 | export interface PageProps extends BubbleOperators {
 64 |   title: string;
 65 |   project: string;
 66 |   whiteList: Set<string>;
 67 |   delay: number;
 68 |   lines: { text: string; id: string }[] | string[];
 69 |   noIndent?: boolean;
 70 |   hash?: string;
 71 |   linkTo?: LinkTo;
 72 | 
 73 |   prefetch: (project: string, title: string) => void;
 74 | }
 75 | 
 76 | // <Page />限定のcontext
 77 | const context = createContext<
 78 |   & {
 79 |     title: string;
 80 |     project: string;
 81 |     whiteList: Set<string>;
 82 |     delay: number;
 83 |     prefetch: (project: string, title: string) => void;
 84 |   }
 85 |   & BubbleOperators
 86 | >({
 87 |   title: "",
 88 |   project: "",
 89 |   whiteList: new Set(),
 90 |   bubble: () => {},
 91 |   hide: () => {},
 92 |   delay: 0,
 93 |   prefetch: () => {},
 94 | });
 95 | 
 96 | export const Page = (
 97 |   { lines, project, title, whiteList, noIndent, hash, linkTo, ...props }:
 98 |     PageProps,
 99 | ): h.JSX.Element => {
100 |   const lineIds = useMemo(
101 |     () => lines.flatMap((line) => typeof line === "string" ? [] : [line.id]),
102 |     [lines],
103 |   );
104 |   const blocks = useMemo(() => {
105 |     let counter = 0;
106 |     return parse(
107 |       lines.map((line) => typeof line === "string" ? line : line.text).join(
108 |         "\n",
109 |       ),
110 |       { hasTitle: true },
111 |     ).map((block) => {
112 |       switch (block.type) {
113 |         case "title":
114 |         case "line":
115 |           return {
116 |             ...block,
117 |             id: lineIds[counter++],
118 |           };
119 |         case "codeBlock": {
120 |           const start = counter;
121 |           counter += block.content.split("\n").length + 1;
122 |           return {
123 |             ...block,
124 |             ids: lineIds.slice(start, counter),
125 |           };
126 |         }
127 |         case "table": {
128 |           const start = counter;
129 |           counter += block.cells.length + 1;
130 |           return {
131 |             ...block,
132 |             ids: lineIds.slice(start, counter),
133 |           };
134 |         }
135 |       }
136 |     });
137 |   }, [lines, lineIds]);
138 | 
139 |   const scrollId = useMemo(() => {
140 |     if (hash && lineIds.includes(hash)) return hash;
141 |     if (!linkTo) return;
142 | 
143 |     return (blocks.find((block) => {
144 |       if (block.type !== "line") return false;
145 | 
146 |       return hasLink(linkTo, block.nodes);
147 |     }) as LineType & { id: string } | undefined)?.id;
148 |   }, [blocks, lineIds, hash, linkTo?.project, linkTo?.titleLc]);
149 | 
150 |   // リンク先にスクロールする
151 |   const ref = useRef<HTMLDivElement>(null);
152 |   useEffect(() => {
153 |     if (!scrollId) return;
154 | 
155 |     const targetLine = ref.current?.querySelector(`[data-id="${scrollId}"]`);
156 |     const scrollY = globalThis.scrollY;
157 |     targetLine?.scrollIntoView?.({ block: "center" });
158 |     globalThis.scroll(0, scrollY);
159 |   }, [scrollId]);
160 | 
161 |   const theme = useTheme(project);
162 | 
163 |   return (
164 |     <div className="lines" data-theme={theme} ref={ref}>
165 |       <context.Provider
166 |         value={{ project, title, whiteList, ...props }}
167 |       >
168 |         {blocks.map((block) => {
169 |           switch (block.type) {
170 |             case "title":
171 |               return (
172 |                 <>
173 |                   <Line
174 |                     key={block.id}
175 |                     index={block.id}
176 |                     indent={0}
177 |                     noIndent={noIndent}
178 |                     permalink={block.id === scrollId}
179 |                   >
180 |                     <a
181 |                       className="page-link"
182 |                       type="link"
183 |                       href={`/${project}/${encodeTitleURI(block.text)}`}
184 |                       rel={project === scrapbox.Project.name
185 |                         ? "route"
186 |                         : "noopener noreferrer"}
187 |                       target={project === scrapbox.Project.name ? "" : "_blank"}
188 |                     >
189 |                       {block.text}
190 |                     </a>
191 |                   </Line>
192 |                   <hr />
193 |                 </>
194 |               );
195 |             case "codeBlock": {
196 |               return (
197 |                 <CodeBlock
198 |                   key={block.ids[0]}
199 |                   block={block}
200 |                   noIndent={noIndent}
201 |                   ids={block.ids}
202 |                   scrollId={scrollId}
203 |                 />
204 |               );
205 |             }
206 |             case "table": {
207 |               return (
208 |                 <Table
209 |                   key={block.ids[0]}
210 |                   block={block}
211 |                   noIndent={noIndent}
212 |                   ids={block.ids}
213 |                   scrollId={scrollId}
214 |                 />
215 |               );
216 |             }
217 |             case "line":
218 |               return (
219 |                 <Line
220 |                   key={block.id}
221 |                   index={block.id}
222 |                   indent={block.indent}
223 |                   noIndent={noIndent}
224 |                   permalink={block.id === scrollId}
225 |                 >
226 |                   {block.nodes.length > 0
227 |                     ? block.nodes.map((node) => (
228 |                       <Node key={node.raw} node={node} />
229 |                     ))
230 |                     : <br />}
231 |                 </Line>
232 |               );
233 |           }
234 |         })}
235 |       </context.Provider>
236 |     </div>
237 |   );
238 | };
239 | 
240 | type LineProps = {
241 |   index: string;
242 |   indent: number;
243 |   permalink?: boolean;
244 |   noIndent?: boolean;
245 |   children: ComponentChildren;
246 | };
247 | 
248 | const Line = ({ index, indent, noIndent, children, permalink }: LineProps) => (
249 |   <div
250 |     className={`line${permalink ? " permalink" : ""}`}
251 |     data-id={index}
252 |     data-indent={indent}
253 |     style={{ "margin-left": noIndent ? "" : `${1.0 * indent}em` }}
254 |   >
255 |     {children}
256 |   </div>
257 | );
258 | 
259 | type CodeBlockProps = {
260 |   block: CodeBlockType;
261 |   noIndent?: boolean;
262 |   ids: string[];
263 |   scrollId?: string;
264 | };
265 | const CodeBlock = (
266 |   { block: { fileName, content, indent }, ids, scrollId }: CodeBlockProps,
267 | ) => {
268 |   const { project, title } = useContext(context);
269 |   const [buttonLabel, setButtonLabel] = useState("\uf0c5");
270 |   const handleClick = useCallback(
271 |     async (e: h.JSX.TargetedMouseEvent<HTMLSpanElement>) => {
272 |       e.preventDefault();
273 |       e.stopPropagation();
274 |       try {
275 |         await navigator.clipboard.writeText(content);
276 |         setButtonLabel("Copied");
277 |         await delay(1000);
278 |         setButtonLabel("\uf0c5");
279 |       } catch (e: unknown) {
280 |         alert(`Failed to copy the code block\nError: ${e}`);
281 |       }
282 |     },
283 |     [content],
284 |   );
285 | 
286 |   return (
287 |     <>
288 |       <Line index={ids[0]} indent={indent} permalink={ids[0] === scrollId}>
289 |         <span className="code-block">
290 |           <span className="code-block-start">
291 |             <a
292 |               href={`/api/code/${project}/${encodeTitleURI(title)}/${fileName}`}
293 |               target="_blank"
294 |             >
295 |               {fileName}
296 |             </a>
297 |           </span>
298 |           <span className="copy" title="Copy" onClick={handleClick}>
299 |             {buttonLabel}
300 |           </span>
301 |         </span>
302 |       </Line>
303 |       <>
304 |         {content.split("\n").map((line, index) => (
305 |           <Line
306 |             index={ids[index + 1]}
307 |             indent={indent}
308 |             permalink={ids[index + 1] === scrollId}
309 |           >
310 |             <code className="code-block">
311 |               {line}
312 |             </code>
313 |           </Line>
314 |         ))}
315 |       </>
316 |     </>
317 |   );
318 | };
319 | 
320 | type TableProps = {
321 |   block: TableType;
322 |   noIndent?: boolean;
323 |   scrollId?: string;
324 |   ids: string[];
325 | };
326 | const Table = (
327 |   {
328 |     block: { fileName, cells, indent },
329 |     ids,
330 |     scrollId,
331 |   }: TableProps,
332 | ) => {
333 |   const { project, title } = useContext(context);
334 | 
335 |   return (
336 |     <>
337 |       <Line index={ids[0]} indent={indent} permalink={ids[0] === scrollId}>
338 |         <span className="table-block">
339 |           <span className="table-block-start">
340 |             <a
341 |               href={`/api/table/${project}/${
342 |                 encodeTitleURI(title)
343 |               }/${fileName}.csv`}
344 |               target="_blank"
345 |             >
346 |               {fileName}
347 |             </a>
348 |           </span>
349 |         </span>
350 |       </Line>
351 |       <>
352 |         {cells.map((cell, i) => (
353 |           <Line
354 |             index={ids[i + 1]}
355 |             indent={indent}
356 |             permalink={ids[i + 1] === scrollId}
357 |           >
358 |             <span className="table-block table-block-row">
359 |               {cell.map((row, index) => (
360 |                 <span className={`cell col-${index}`}>
361 |                   {row.map((node) => <Node key={node.raw} node={node} />)}
362 |                 </span>
363 |               ))}
364 |             </span>
365 |           </Line>
366 |         ))}
367 |       </>
368 |     </>
369 |   );
370 | };
371 | 
372 | type NodeProps = {
373 |   node: NodeType;
374 | };
375 | const Node = ({ node }: NodeProps) => {
376 |   switch (node.type) {
377 |     case "code":
378 |       return <code className="code">{node.text}</code>;
379 |     case "formula":
380 |       return <Formula node={node} />;
381 |     case "commandLine":
382 |       return <CommandLine node={node} />;
383 |     case "helpfeel":
384 |       return (
385 |         <code className="helpfeel">
386 |           <span className="prefix">?</span>{" "}
387 |           <span className="entry">{node.text}</span>
388 |         </code>
389 |       );
390 |     case "quote":
391 |       return (
392 |         <blockquote className="quote">
393 |           {node.nodes.map((node) => <Node key={node.raw} node={node} />)}
394 |         </blockquote>
395 |       );
396 |     case "strong":
397 |       return (
398 |         <strong>
399 |           {node.nodes.map((node) => <Node key={node.raw} node={node} />)}
400 |         </strong>
401 |       );
402 |     case "decoration":
403 |       return <Decoration node={node} />;
404 |     case "plain":
405 |     case "blank":
406 |       return <>{node.text}</>;
407 |     case "hashTag":
408 |       return <HashTag node={node} />;
409 |     case "link":
410 |       return <Link node={node} />;
411 |     case "googleMap":
412 |       return <GoogleMap node={node} />;
413 |     case "icon":
414 |       return <Icon node={node} />;
415 |     case "strongIcon":
416 |       return <Icon node={node} strong />;
417 |     case "image":
418 |       return <Image node={node} />;
419 |     case "strongImage":
420 |       return <img className="image strong-image" src={node.src} />;
421 |     case "numberList":
422 |       return (
423 |         <>
424 |           {`${node.number}. `}
425 |           {node.nodes.map((node) => <Node key={node.raw} node={node} />)}
426 |         </>
427 |       );
428 |   }
429 | };
430 | 
431 | type FormulaProps = { node: FormulaNode };
432 | const Formula = ({ node: { formula } }: FormulaProps) => {
433 |   const { ref, error } = useKaTeX(formula);
434 | 
435 |   return (
436 |     <span className={`formula ${error ? " error" : ""}`}>
437 |       {error
438 |         ? <code>{formula}</code>
439 |         : <span className="katex-display" ref={ref} />}
440 |     </span>
441 |   );
442 | };
443 | type DecorationProps = { node: DecorationNode };
444 | const Decoration = (
445 |   { node: { decos, nodes } }: DecorationProps,
446 | ) => (
447 |   <span className={decos.map((deco) => `deco-${deco}`).join(" ")}>
448 |     {nodes.map((node) => <Node key={node.raw} node={node} />)}
449 |   </span>
450 | );
451 | 
452 | type CommandLineProps = { node: CommandLineNode };
453 | const CommandLine = (
454 |   { node }: CommandLineProps,
455 | ) => {
456 |   const [buttonLabel, setButtonLabel] = useState("\uf0c5");
457 |   const handleClick = useCallback(
458 |     async (e: h.JSX.TargetedMouseEvent<HTMLSpanElement>) => {
459 |       e.preventDefault();
460 |       e.stopPropagation();
461 |       try {
462 |         await navigator.clipboard.writeText(node.text);
463 |         setButtonLabel("Copied");
464 |         await delay(1000);
465 |         setButtonLabel("\uf0c5");
466 |       } catch (e: unknown) {
467 |         alert(`Failed to copy the code block\nError: ${e}`);
468 |       }
469 |     },
470 |     [node.text],
471 |   );
472 | 
473 |   return (
474 |     <>
475 |       <code className="cli">
476 |         <span className="prefix">{node.symbol}</span>{"  "}
477 |         <span className="command">{node.text}</span>
478 |       </code>
479 |       <span className="tool-buttons">
480 |         <span title="Copy" className="copy" onClick={handleClick}>
481 |           {buttonLabel}
482 |         </span>
483 |       </span>
484 |     </>
485 |   );
486 | };
487 | type GoogleMapProps = { node: GoogleMapNode };
488 | const GoogleMap = (
489 |   { node: { place, latitude, longitude, zoom } }: GoogleMapProps,
490 | ) => (
491 |   <span className="pointing-device-map">
492 |     <a
493 |       href={`https://www.google.com/maps/search/${place}/@${latitude},${longitude},${zoom}z`}
494 |       rel="noopner noreferrer"
495 |       target="_blank"
496 |     >
497 |       <img
498 |         className="google-map"
499 |         src={`/api/google-map/static-map?center=${latitude}%2C${longitude}&markers=${place}&zoom=${zoom}&_csrf=${
500 |           // deno-lint-ignore no-explicit-any
501 |           (globalThis as any)._csrf}`}
502 |       />
503 |     </a>
504 |   </span>
505 | );
506 | type IconProps = {
507 |   node: IconNode;
508 |   strong?: false;
509 | } | {
510 |   node: StrongIconNode;
511 |   strong: true;
512 | };
513 | const Icon = (
514 |   { node: { pathType, path }, strong }: IconProps,
515 | ) => {
516 |   const { project: _project } = useContext(context);
517 |   const [project, title] = pathType === "relative"
518 |     ? [
519 |       _project,
520 |       path,
521 |     ]
522 |     : path.match(/\/([\w\-]+)\/(.+)$/)?.slice?.(1) ?? [_project, path];
523 |   const titleLc = encodeTitleURI(title);
524 | 
525 |   return (
526 |     <a
527 |       href={`/${project}/${titleLc}`}
528 |       rel={project === scrapbox.Project.name ? "route" : "noopener noreferrer"}
529 |       target={project === scrapbox.Project.name ? "" : "_blank"}
530 |     >
531 |       <img
532 |         className={strong ? "icon strong-icon" : "icon"}
533 |         alt={title}
534 |         src={`/api/pages/${project}/${titleLc}/icon`}
535 |       />
536 |     </a>
537 |   );
538 | };
539 | type ImageProps = { node: ImageNode };
540 | const Image = ({ node: { link, src } }: ImageProps) => {
541 |   const href = link ||
542 |     // linkが空文字のとき
543 |     (/https:\/\/gyazo\.com\/[^\/]+\/thumb\/1000/.test(src)
544 |       ? src.slice(0, -"/thumb/1000".length)
545 |       : src);
546 | 
547 |   return (
548 |     <a
549 |       className={link ? "link" : ""}
550 |       href={href}
551 |       rel="noopner noreferrer"
552 |       target="_blank"
553 |     >
554 |       <img className="image" src={src} />
555 |     </a>
556 |   );
557 | };
558 | 
559 | type HashTagProps = { node: HashTagNode };
560 | const HashTag = ({ node: { href } }: HashTagProps) => {
561 |   const { project } = useContext(context);
562 |   const emptyLink = useEmptyLink(project, href);
563 |   const handleHover = useHover(project, href, "hashtag");
564 | 
565 |   return (
566 |     <a
567 |       href={`/${project}/${encodeTitleURI(href)}`}
568 |       className={`page-link${emptyLink ? " empty-page-link" : ""}`}
569 |       type="hashTag"
570 |       rel={project === scrapbox.Project.name ? "route" : "noopener noreferrer"}
571 |       target={project === scrapbox.Project.name ? "" : "_blank"}
572 |       onPointerEnter={handleHover}
573 |     >
574 |       #{href}
575 |     </a>
576 |   );
577 | };
578 | type LinkProps = { node: LinkNode };
579 | const Link = (
580 |   { node: { pathType, ...node } }: LinkProps,
581 | ) => {
582 |   switch (pathType) {
583 |     case "relative":
584 |     case "root":
585 |       return <ScrapboxLink pathType={pathType} href={node.href} />;
586 |     case "absolute": {
587 |       const linkNode = parseAbsoluteLink({ pathType, ...node });
588 |       switch (linkNode.type) {
589 |         case "youtube":
590 |           return <Youtube {...linkNode} />;
591 |         case "vimeo":
592 |           return <Vimeo {...linkNode} />;
593 |         case "spotify":
594 |           return <Spotify {...linkNode} />;
595 |         case "anchor-fm":
596 |           return <AnchorFM {...linkNode} />;
597 |         case "audio":
598 |           return <Audio {...linkNode} />;
599 |         case "video":
600 |           return <Video {...linkNode} />;
601 |         case "absoluteLink":
602 |           return (
603 |             <a
604 |               className="link"
605 |               href={linkNode.href}
606 |               rel="noopener noreferrer"
607 |               target="_blank"
608 |             >
609 |               {
610 |                 // contentが空のときはundefinedではなく''になるので、
611 |                 // ??ではなく||でfallback処理をする必要がある
612 |                 linkNode.content || linkNode.href
613 |               }
614 |             </a>
615 |           );
616 |       }
617 |     }
618 |   }
619 | };
620 | 
621 | type ScrapboxLinkProps = {
622 |   pathType: "relative" | "root";
623 |   href: string;
624 | };
625 | const ScrapboxLink = (
626 |   { pathType, href }: ScrapboxLinkProps,
627 | ) => {
628 |   const { project: project_ } = useContext(context);
629 |   const { project = project_, title, hash = "" } = parseLink(
630 |     {
631 |       pathType,
632 |       href,
633 |     },
634 |   );
635 |   const handleHover = useHover(project, title, "link", hash);
636 |   const emptyLink = useEmptyLink(project, title ?? "");
637 | 
638 |   return (
639 |     <a
640 |       className={`page-link${
641 |         title !== undefined && emptyLink ? " empty-page-link" : ""
642 |       }`}
643 |       type="link"
644 |       href={`/${project}${
645 |         title === undefined
646 |           ? ""
647 |           : `/${encodeTitleURI(title)}${hash === "" ? "" : `#${hash}`}`
648 |       }`}
649 |       rel={project === scrapbox.Project.name ? "route" : "noopener noreferrer"}
650 |       target={project === scrapbox.Project.name ? "" : "_blank"}
651 |       onPointerEnter={handleHover}
652 |     >
653 |       {href}
654 |     </a>
655 |   );
656 | };
657 | 
658 | const Youtube = (props: YoutubeNode | YoutubeListNode) => {
659 |   props.params.append("autoplay", "0");
660 |   const src = props.pathType === "list"
661 |     ? `https://www.youtube.com/embed/?${props.params.toString()}&list=${props.listId}`
662 |     : `https://www.youtube.com/embed/${props.videoId}?${props.params.toString()}`;
663 | 
664 |   return (
665 |     <div className="iframe-video-player">
666 |       <iframe
667 |         src={src}
668 |         allowFullScreen
669 |       />
670 |     </div>
671 |   );
672 | };
673 | 
674 | const Vimeo = ({ videoId }: VimeoNode) => (
675 |   <div className="iframe-video-player">
676 |     <iframe
677 |       src={`https://player.vimeo.com/video/${videoId}`}
678 |       allowFullScreen
679 |     />
680 |   </div>
681 | );
682 | 
683 | const Spotify = (props: SpotifyNode) => (
684 |   <div className="iframe-video-player">
685 |     <iframe
686 |       className={`spotify type-${props.pathType}`}
687 |       src={`https://open.spotify.com/embed/${props.pathType}/${props.videoId}`}
688 |       allowFullScreen
689 |     />
690 |   </div>
691 | );
692 | 
693 | const AnchorFM = (props: AnchorFMNode) => (
694 |   <div className="iframe-video-player">
695 |     <iframe
696 |       className="anchor-fm"
697 |       src={props.href.replace("/episodes/", "/embed/episodes/")}
698 |       allowFullScreen
699 |     />
700 |   </div>
701 | );
702 | 
703 | const Audio = (props: AudioNode) =>
704 |   props.content === ""
705 |     ? (
706 |       <audio
707 |         className="audio-player"
708 |         preload="none"
709 |         controls
710 |         src={props.href}
711 |       />
712 |     )
713 |     : <AudioLink {...props} />;
714 | const AudioLink = ({ href, content }: AudioNode) => {
715 |   const ref = useRef<HTMLAudioElement>(null);
716 |   const togglePlay = useCallback(() => {
717 |     if (ref.current?.paused) {
718 |       ref.current.currentTime = 0;
719 |       ref.current.play();
720 |     } else {
721 |       ref.current?.pause?.();
722 |     }
723 |   }, []);
724 | 
725 |   return (
726 |     <span className="audio-link">
727 |       <a href={href} rel="noopener noreferrer" target="_blank">
728 |         {content}
729 |       </a>
730 |       <span className="play" onClick={togglePlay}>♬</span>
731 |       <audio preload="none" src={href} ref={ref} />
732 |     </span>
733 |   );
734 | };
735 | 
736 | const Video = ({ href }: VideoNode) => (
737 |   <div className="video-player">
738 |     <video
739 |       class="video"
740 |       style={{ display: "inline-block" }}
741 |       controls
742 |       loop
743 |       src={href}
744 |     />
745 |   </div>
746 | );
747 | 
748 | const useEmptyLink = (project: string, link: string) => {
749 |   const { whiteList } = useContext(
750 |     context,
751 |   );
752 |   const pageIds = useMemo(
753 |     () =>
754 |       (whiteList.has(project) ? [...whiteList] : [project, ...whiteList]).map(
755 |         (project) => toId(project, link),
756 |       ),
757 |     [whiteList, project],
758 |   );
759 |   const bubbles = useBubbleData(pageIds);
760 | 
761 |   return useMemo(() => isEmptyLink(bubbles), bubbles);
762 | };
763 | 
764 | /** <a>にhover機能を付与する */
765 | const useHover = (
766 |   project: string,
767 |   title: string | undefined,
768 |   type: "link" | "hashtag",
769 |   hash?: string,
770 | ) => {
771 |   const { delay, bubble, prefetch } = useContext(context);
772 | 
773 |   return useCallback(
774 |     async (
775 |       { currentTarget: a }: h.JSX.TargetedMouseEvent<HTMLAnchorElement>,
776 |     ) => {
777 |       if (!title) return;
778 | 
779 |       prefetch(project, title);
780 | 
781 |       if (!await stayHovering(a, delay)) return;
782 | 
783 |       bubble({
784 |         project,
785 |         title,
786 |         hash,
787 |         type,
788 |         position: calcBubblePosition(a),
789 |       });
790 |     },
791 |     [project, title, hash, type, delay, prefetch, bubble],
792 |   );
793 | };
794 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ScrapBubble
 2 | 
 3 | Show n-hop link destination pages beyond projects
 4 | 
 5 | ## Install
 6 | 
 7 | (write later)
 8 | 
 9 | ## License
10 | 
11 | MIT
12 | 
13 | ## Related Project
14 | 
15 | - [daiiz/ScrapScripts](https://github.com/daiiz/ScrapScripts) - Unofficial
16 |   browser extension for Scrapbox
17 | 


--------------------------------------------------------------------------------
/TextBubble.tsx:
--------------------------------------------------------------------------------
  1 | /** @jsxRuntime automatic */
  2 | /** @jsxImportSource npm:preact@10 */
  3 | import {
  4 |   FunctionComponent,
  5 |   h,
  6 |   useCallback,
  7 |   useMemo,
  8 |   useState,
  9 | } from "./deps/preact.tsx";
 10 | import { ID, toId } from "./id.ts";
 11 | import { Page, PageProps } from "./Page.tsx";
 12 | import { Bubble } from "./storage.ts";
 13 | import { BubbleOperators, Source } from "./useBubbles.ts";
 14 | import { useTheme } from "./useTheme.ts";
 15 | 
 16 | export interface TextBubble extends BubbleOperators {
 17 |   pages: [Bubble, ...Bubble[]];
 18 |   whiteList: Set<string>;
 19 |   delay: number;
 20 |   noIndent?: boolean;
 21 |   source: Source;
 22 |   prefetch: (project: string, title: string) => void;
 23 |   onClick?: h.JSX.MouseEventHandler<HTMLDivElement>;
 24 | }
 25 | export const TextBubble: FunctionComponent<TextBubble> = (
 26 |   { pages, onClick, source, whiteList, ...rest },
 27 | ) => {
 28 |   const [activeTab, setActiveTab] = useState(
 29 |     toId(pages[0].project, pages[0].titleLc),
 30 |   );
 31 | 
 32 |   const pageStyle = useMemo(() => ({
 33 |     top: `${source.position.top}px`,
 34 |     maxWidth: `${source.position.maxWidth}px`,
 35 |     ...("left" in source.position
 36 |       ? {
 37 |         left: `${source.position.left}px`,
 38 |       }
 39 |       : {
 40 |         right: `${source.position.right}px`,
 41 |       }),
 42 |   }), [source.position]);
 43 |   return (
 44 |     <div
 45 |       className="text-bubble"
 46 |       style={pageStyle}
 47 |       onClick={onClick}
 48 |     >
 49 |       {pages.length > 1 &&
 50 |         (
 51 |           <div role="tablist">
 52 |             {pages.map((page) => (
 53 |               <Tab
 54 |                 key={toId(page.project, page.titleLc)}
 55 |                 project={page.project}
 56 |                 titleLc={page.titleLc}
 57 |                 selected={activeTab ===
 58 |                   toId(page.project, page.titleLc)}
 59 |                 tabSelector={setActiveTab}
 60 |               />
 61 |             ))}
 62 |           </div>
 63 |         )}
 64 |       {pages.map((page) => (
 65 |         <TabPanel
 66 |           key={toId(page.project, page.titleLc)}
 67 |           selected={activeTab ===
 68 |             toId(page.project, page.titleLc)}
 69 |           {...page}
 70 |           title={page.lines[0].text}
 71 |           hash={source.hash}
 72 |           linkTo={source.linkTo}
 73 |           whiteList={whiteList}
 74 |           {...rest}
 75 |         />
 76 |       ))}
 77 |     </div>
 78 |   );
 79 | };
 80 | 
 81 | const Tab: FunctionComponent<
 82 |   {
 83 |     project: string;
 84 |     titleLc: string;
 85 |     selected: boolean;
 86 |     tabSelector: (id: ID) => void;
 87 |   }
 88 | > = ({ project, titleLc, tabSelector, selected }) => {
 89 |   const handleClick = useCallback(() => tabSelector(toId(project, titleLc)), [
 90 |     project,
 91 |     titleLc,
 92 |   ]);
 93 |   const theme = useTheme(project);
 94 |   return (
 95 |     <button
 96 |       type="button"
 97 |       role="tab"
 98 |       aria-selected={selected}
 99 |       data-theme={theme}
100 |       tabIndex={-1}
101 |       onClick={handleClick}
102 |     >
103 |       {project}
104 |     </button>
105 |   );
106 | };
107 | 
108 | const TabPanel: FunctionComponent<{ selected: boolean } & PageProps> = (
109 |   { selected, ...rest },
110 | ) => {
111 |   const theme = useTheme(rest.project);
112 |   return (
113 |     <div
114 |       role="tabpanel"
115 |       data-theme={theme}
116 |       hidden={!selected}
117 |     >
118 |       <Page {...rest} />
119 |     </div>
120 |   );
121 | };
122 | 


--------------------------------------------------------------------------------
/UserCSS.tsx:
--------------------------------------------------------------------------------
 1 | /** @jsxRuntime automatic */
 2 | /** @jsxImportSource npm:preact@10 */
 3 | import { useMemo } from "./deps/preact.tsx";
 4 | import { detectURL } from "./detectURL.ts";
 5 | 
 6 | export interface UserCSSProps {
 7 |   /** CSSもしくはCSSへのURL */
 8 |   style: string | URL;
 9 | }
10 | 
11 | /** UserCSSを挿入する */
12 | export const UserCSS = (props: UserCSSProps) => {
13 |   const url = useMemo(() => detectURL(props.style, import.meta.url), [
14 |     props.style,
15 |   ]);
16 | 
17 |   return (
18 |     <>
19 |       {url !== "" && (url instanceof URL
20 |         ? <link rel="stylesheet" href={url.href} />
21 |         : <style>{url}</style>)}
22 |     </>
23 |   );
24 | };
25 | 


--------------------------------------------------------------------------------
/__snapshots__/convert.test.ts.snap:
--------------------------------------------------------------------------------
  1 | export const snapshot = {};
  2 | 
  3 | snapshot[`convert > one project > 逆・順・双方向・空リンク+中身あり・空headword+複数パス2 hop links 1`] = `
  4 | Map(9) {
  5 |   "/takker-dist/a" => {
  6 |     descriptions: [
  7 |       "[A1],[A2],[A3]",
  8 |       "https://scrapbox.io/api/pages/takker-dist/A",
  9 |     ],
 10 |     exists: true,
 11 |     image: null,
 12 |     isLinkedCorrect: false,
 13 |     lines: [
 14 |       {
 15 |         created: 1672173548,
 16 |         id: "dummy",
 17 |         text: "A",
 18 |         updated: 1672173548,
 19 |         userId: "dummy",
 20 |       },
 21 |       {
 22 |         created: 1672173548,
 23 |         id: "dummy",
 24 |         text: "[A1],[A2],[A3]",
 25 |         updated: 1672173548,
 26 |         userId: "dummy",
 27 |       },
 28 |       {
 29 |         created: 1672173548,
 30 |         id: "dummy",
 31 |         text: "https://scrapbox.io/api/pages/takker-dist/A",
 32 |         updated: 1672173548,
 33 |         userId: "dummy",
 34 |       },
 35 |     ],
 36 |     project: "takker-dist",
 37 |     titleLc: "a",
 38 |     updated: 1672173548,
 39 |   },
 40 |   "/takker-dist/a1" => {
 41 |     descriptions: [],
 42 |     exists: false,
 43 |     image: null,
 44 |     isLinkedCorrect: false,
 45 |     lines: [
 46 |       {
 47 |         created: 0,
 48 |         id: "dummy",
 49 |         text: "A1",
 50 |         updated: 0,
 51 |         userId: "dummy",
 52 |       },
 53 |     ],
 54 |     linked: [
 55 |       "b",
 56 |       "a",
 57 |     ],
 58 |     project: "takker-dist",
 59 |     titleLc: "a1",
 60 |     updated: 0,
 61 |   },
 62 |   "/takker-dist/b" => {
 63 |     descriptions: [
 64 |       "[B1], [B2], [B3]",
 65 |       "[A1]",
 66 |       "https://scrapbox.io/api/pages/takker-dist/B",
 67 |     ],
 68 |     exists: true,
 69 |     image: null,
 70 |     isLinkedCorrect: true,
 71 |     lines: [
 72 |       {
 73 |         created: 1672173349,
 74 |         id: "63ab57239db1b2001edc43b0",
 75 |         text: "B",
 76 |         updated: 1672173349,
 77 |         userId: "5ef2bdebb60650001e1280f0",
 78 |       },
 79 |       {
 80 |         created: 1672173349,
 81 |         id: "63ab57261280f000002d941d",
 82 |         text: "[B1], [B2], [B3]",
 83 |         updated: 1672173361,
 84 |         userId: "5ef2bdebb60650001e1280f0",
 85 |       },
 86 |       {
 87 |         created: 1672173407,
 88 |         id: "63ab575f1280f000002d941f",
 89 |         text: "[A1]",
 90 |         updated: 1672173410,
 91 |         userId: "5ef2bdebb60650001e1280f0",
 92 |       },
 93 |       {
 94 |         created: 1672173351,
 95 |         id: "63ab57271280f000002d941e",
 96 |         text: "https://scrapbox.io/api/pages/takker-dist/B",
 97 |         updated: 1673081924,
 98 |         userId: "5ef2bdebb60650001e1280f0",
 99 |       },
100 |       {
101 |         created: 1673081924,
102 |         id: "63b934441280f00000606f45",
103 |         text: "",
104 |         updated: 1673081924,
105 |         userId: "5ef2bdebb60650001e1280f0",
106 |       },
107 |     ],
108 |     linked: [
109 |       "b1",
110 |     ],
111 |     project: "takker-dist",
112 |     projectLinked: [],
113 |     titleLc: "b",
114 |     updated: 1673081924,
115 |   },
116 |   "/takker-dist/b1" => {
117 |     descriptions: [
118 |       "[B]",
119 |     ],
120 |     exists: true,
121 |     image: null,
122 |     isLinkedCorrect: false,
123 |     lines: [
124 |       {
125 |         created: 1673081852,
126 |         id: "dummy",
127 |         text: "B1",
128 |         updated: 1673081852,
129 |         userId: "dummy",
130 |       },
131 |       {
132 |         created: 1673081852,
133 |         id: "dummy",
134 |         text: "[B]",
135 |         updated: 1673081852,
136 |         userId: "dummy",
137 |       },
138 |     ],
139 |     linked: [
140 |       "b",
141 |       "c",
142 |       "d",
143 |       "e",
144 |     ],
145 |     project: "takker-dist",
146 |     titleLc: "b1",
147 |     updated: 1673081852,
148 |   },
149 |   "/takker-dist/b2" => {
150 |     descriptions: [],
151 |     exists: false,
152 |     image: null,
153 |     isLinkedCorrect: false,
154 |     lines: [
155 |       {
156 |         created: 0,
157 |         id: "dummy",
158 |         text: "B2",
159 |         updated: 0,
160 |         userId: "dummy",
161 |       },
162 |     ],
163 |     linked: [
164 |       "b",
165 |       "e",
166 |     ],
167 |     project: "takker-dist",
168 |     titleLc: "b2",
169 |     updated: 0,
170 |   },
171 |   "/takker-dist/b3" => {
172 |     descriptions: [],
173 |     exists: false,
174 |     image: null,
175 |     isLinkedCorrect: false,
176 |     lines: [
177 |       {
178 |         created: 0,
179 |         id: "dummy",
180 |         text: "B3",
181 |         updated: 0,
182 |         userId: "dummy",
183 |       },
184 |     ],
185 |     linked: [
186 |       "b",
187 |     ],
188 |     project: "takker-dist",
189 |     titleLc: "b3",
190 |     updated: 0,
191 |   },
192 |   "/takker-dist/c" => {
193 |     descriptions: [
194 |       "[C1], [C2], [C3]",
195 |       "[A2], [A3]",
196 |       "[B1]",
197 |     ],
198 |     exists: true,
199 |     image: null,
200 |     isLinkedCorrect: false,
201 |     lines: [
202 |       {
203 |         created: 1673081866,
204 |         id: "dummy",
205 |         text: "C",
206 |         updated: 1673081866,
207 |         userId: "dummy",
208 |       },
209 |       {
210 |         created: 1673081866,
211 |         id: "dummy",
212 |         text: "[C1], [C2], [C3]",
213 |         updated: 1673081866,
214 |         userId: "dummy",
215 |       },
216 |       {
217 |         created: 1673081866,
218 |         id: "dummy",
219 |         text: "[A2], [A3]",
220 |         updated: 1673081866,
221 |         userId: "dummy",
222 |       },
223 |       {
224 |         created: 1673081866,
225 |         id: "dummy",
226 |         text: "[B1]",
227 |         updated: 1673081866,
228 |         userId: "dummy",
229 |       },
230 |     ],
231 |     project: "takker-dist",
232 |     titleLc: "c",
233 |     updated: 1673081866,
234 |   },
235 |   "/takker-dist/d" => {
236 |     descriptions: [
237 |       "[B1]",
238 |     ],
239 |     exists: true,
240 |     image: null,
241 |     isLinkedCorrect: false,
242 |     lines: [
243 |       {
244 |         created: 1673081879,
245 |         id: "dummy",
246 |         text: "D",
247 |         updated: 1673081879,
248 |         userId: "dummy",
249 |       },
250 |       {
251 |         created: 1673081879,
252 |         id: "dummy",
253 |         text: "[B1]",
254 |         updated: 1673081879,
255 |         userId: "dummy",
256 |       },
257 |     ],
258 |     project: "takker-dist",
259 |     titleLc: "d",
260 |     updated: 1673081879,
261 |   },
262 |   "/takker-dist/e" => {
263 |     descriptions: [
264 |       "[B1], [B2]",
265 |     ],
266 |     exists: true,
267 |     image: null,
268 |     isLinkedCorrect: false,
269 |     lines: [
270 |       {
271 |         created: 1673081909,
272 |         id: "dummy",
273 |         text: "E",
274 |         updated: 1673081909,
275 |         userId: "dummy",
276 |       },
277 |       {
278 |         created: 1673081909,
279 |         id: "dummy",
280 |         text: "[B1], [B2]",
281 |         updated: 1673081909,
282 |         userId: "dummy",
283 |       },
284 |     ],
285 |     project: "takker-dist",
286 |     titleLc: "e",
287 |     updated: 1673081909,
288 |   },
289 | }
290 | `;
291 | 
292 | snapshot[`convert > one project > (逆リンク|順リンク|双方向リンク)+2 hop links 1`] = `
293 | Map(8) {
294 |   "/takker-dist/b" => {
295 |     descriptions: [
296 |       "[B1], [B2], [B3]",
297 |       "[A1]",
298 |       "https://scrapbox.io/api/pages/takker-dist/B",
299 |     ],
300 |     exists: true,
301 |     image: null,
302 |     isLinkedCorrect: false,
303 |     lines: [
304 |       {
305 |         created: 1673081924,
306 |         id: "dummy",
307 |         text: "B",
308 |         updated: 1673081924,
309 |         userId: "dummy",
310 |       },
311 |       {
312 |         created: 1673081924,
313 |         id: "dummy",
314 |         text: "[B1], [B2], [B3]",
315 |         updated: 1673081924,
316 |         userId: "dummy",
317 |       },
318 |       {
319 |         created: 1673081924,
320 |         id: "dummy",
321 |         text: "[A1]",
322 |         updated: 1673081924,
323 |         userId: "dummy",
324 |       },
325 |       {
326 |         created: 1673081924,
327 |         id: "dummy",
328 |         text: "https://scrapbox.io/api/pages/takker-dist/B",
329 |         updated: 1673081924,
330 |         userId: "dummy",
331 |       },
332 |     ],
333 |     linked: [
334 |       "i",
335 |       "b1",
336 |     ],
337 |     project: "takker-dist",
338 |     titleLc: "b",
339 |     updated: 1673081924,
340 |   },
341 |   "/takker-dist/b1" => {
342 |     descriptions: [
343 |       "[B]",
344 |     ],
345 |     exists: true,
346 |     image: null,
347 |     isLinkedCorrect: false,
348 |     lines: [
349 |       {
350 |         created: 1673081852,
351 |         id: "dummy",
352 |         text: "B1",
353 |         updated: 1673081852,
354 |         userId: "dummy",
355 |       },
356 |       {
357 |         created: 1673081852,
358 |         id: "dummy",
359 |         text: "[B]",
360 |         updated: 1673081852,
361 |         userId: "dummy",
362 |       },
363 |     ],
364 |     linked: [
365 |       "i",
366 |       "j",
367 |       "k",
368 |       "b",
369 |       "c",
370 |       "d",
371 |       "e",
372 |     ],
373 |     project: "takker-dist",
374 |     titleLc: "b1",
375 |     updated: 1673081852,
376 |   },
377 |   "/takker-dist/c" => {
378 |     descriptions: [
379 |       "[C1], [C2], [C3]",
380 |       "[A2], [A3]",
381 |       "[B1]",
382 |     ],
383 |     exists: true,
384 |     image: null,
385 |     isLinkedCorrect: false,
386 |     lines: [
387 |       {
388 |         created: 1673081866,
389 |         id: "dummy",
390 |         text: "C",
391 |         updated: 1673081866,
392 |         userId: "dummy",
393 |       },
394 |       {
395 |         created: 1673081866,
396 |         id: "dummy",
397 |         text: "[C1], [C2], [C3]",
398 |         updated: 1673081866,
399 |         userId: "dummy",
400 |       },
401 |       {
402 |         created: 1673081866,
403 |         id: "dummy",
404 |         text: "[A2], [A3]",
405 |         updated: 1673081866,
406 |         userId: "dummy",
407 |       },
408 |       {
409 |         created: 1673081866,
410 |         id: "dummy",
411 |         text: "[B1]",
412 |         updated: 1673081866,
413 |         userId: "dummy",
414 |       },
415 |     ],
416 |     project: "takker-dist",
417 |     titleLc: "c",
418 |     updated: 1673081866,
419 |   },
420 |   "/takker-dist/d" => {
421 |     descriptions: [
422 |       "[B1]",
423 |     ],
424 |     exists: true,
425 |     image: null,
426 |     isLinkedCorrect: false,
427 |     lines: [
428 |       {
429 |         created: 1673081879,
430 |         id: "dummy",
431 |         text: "D",
432 |         updated: 1673081879,
433 |         userId: "dummy",
434 |       },
435 |       {
436 |         created: 1673081879,
437 |         id: "dummy",
438 |         text: "[B1]",
439 |         updated: 1673081879,
440 |         userId: "dummy",
441 |       },
442 |     ],
443 |     project: "takker-dist",
444 |     titleLc: "d",
445 |     updated: 1673081879,
446 |   },
447 |   "/takker-dist/e" => {
448 |     descriptions: [
449 |       "[B1], [B2]",
450 |     ],
451 |     exists: true,
452 |     image: null,
453 |     isLinkedCorrect: false,
454 |     lines: [
455 |       {
456 |         created: 1673081909,
457 |         id: "dummy",
458 |         text: "E",
459 |         updated: 1673081909,
460 |         userId: "dummy",
461 |       },
462 |       {
463 |         created: 1673081909,
464 |         id: "dummy",
465 |         text: "[B1], [B2]",
466 |         updated: 1673081909,
467 |         userId: "dummy",
468 |       },
469 |     ],
470 |     project: "takker-dist",
471 |     titleLc: "e",
472 |     updated: 1673081909,
473 |   },
474 |   "/takker-dist/i" => {
475 |     descriptions: [
476 |       "[B] [B1] [K]",
477 |       "https://scrapbox.io/api/pages/takker-dist/I",
478 |     ],
479 |     exists: true,
480 |     image: null,
481 |     isLinkedCorrect: true,
482 |     lines: [
483 |       {
484 |         created: 1673572279,
485 |         id: "63c0afb552e241001d99bfac",
486 |         text: "I",
487 |         updated: 1673572279,
488 |         userId: "5ef2bdebb60650001e1280f0",
489 |       },
490 |       {
491 |         created: 1673572279,
492 |         id: "63c0afb71280f00000e9bae0",
493 |         text: "[B] [B1] [K]",
494 |         updated: 1673572397,
495 |         userId: "5ef2bdebb60650001e1280f0",
496 |       },
497 |       {
498 |         created: 1673572279,
499 |         id: "63c0afb81280f00000e9bae1",
500 |         text: "https://scrapbox.io/api/pages/takker-dist/I",
501 |         updated: 1673572411,
502 |         userId: "5ef2bdebb60650001e1280f0",
503 |       },
504 |       {
505 |         created: 1673572411,
506 |         id: "63c0b03c1280f00000e9bae6",
507 |         text: "",
508 |         updated: 1673572411,
509 |         userId: "5ef2bdebb60650001e1280f0",
510 |       },
511 |     ],
512 |     linked: [
513 |       "j",
514 |       "k",
515 |     ],
516 |     project: "takker-dist",
517 |     projectLinked: [],
518 |     titleLc: "i",
519 |     updated: 1673572411,
520 |   },
521 |   "/takker-dist/j" => {
522 |     descriptions: [
523 |       "[I] [B1]",
524 |     ],
525 |     exists: true,
526 |     image: null,
527 |     isLinkedCorrect: false,
528 |     lines: [
529 |       {
530 |         created: 1673572354,
531 |         id: "dummy",
532 |         text: "J",
533 |         updated: 1673572354,
534 |         userId: "dummy",
535 |       },
536 |       {
537 |         created: 1673572354,
538 |         id: "dummy",
539 |         text: "[I] [B1]",
540 |         updated: 1673572354,
541 |         userId: "dummy",
542 |       },
543 |     ],
544 |     project: "takker-dist",
545 |     titleLc: "j",
546 |     updated: 1673572354,
547 |   },
548 |   "/takker-dist/k" => {
549 |     descriptions: [
550 |       "[I] [B1]",
551 |     ],
552 |     exists: true,
553 |     image: null,
554 |     isLinkedCorrect: false,
555 |     lines: [
556 |       {
557 |         created: 1673572392,
558 |         id: "dummy",
559 |         text: "K",
560 |         updated: 1673572392,
561 |         userId: "dummy",
562 |       },
563 |       {
564 |         created: 1673572392,
565 |         id: "dummy",
566 |         text: "[I] [B1]",
567 |         updated: 1673572392,
568 |         userId: "dummy",
569 |       },
570 |     ],
571 |     linked: [
572 |       "i",
573 |     ],
574 |     project: "takker-dist",
575 |     titleLc: "k",
576 |     updated: 1673572392,
577 |   },
578 | }
579 | `;
580 | 
581 | snapshot[`convert > two projects > 逆・順・双方向External links 1`] = `
582 | Map(4) {
583 |   "/takker-dist/f" => {
584 |     descriptions: [
585 |       "[/takker-dist2/B]",
586 |       "[/takker-dist2/C]",
587 |       "[/takker-dist2/G]",
588 |       "https://scrapbox.io/api/pages/takker-dist/F",
589 |     ],
590 |     exists: true,
591 |     image: null,
592 |     isLinkedCorrect: true,
593 |     lines: [
594 |       {
595 |         created: 1673336497,
596 |         id: "63bd16afdb71fb001d058f0e",
597 |         text: "F",
598 |         updated: 1673336497,
599 |         userId: "5ef2bdebb60650001e1280f0",
600 |       },
601 |       {
602 |         created: 1673336497,
603 |         id: "63bd16b11280f00000b00965",
604 |         text: "[/takker-dist2/B]",
605 |         updated: 1673336501,
606 |         userId: "5ef2bdebb60650001e1280f0",
607 |       },
608 |       {
609 |         created: 1673336501,
610 |         id: "63bd16b51280f00000b00966",
611 |         text: "[/takker-dist2/C]",
612 |         updated: 1673336571,
613 |         userId: "5ef2bdebb60650001e1280f0",
614 |       },
615 |       {
616 |         created: 1673336580,
617 |         id: "63bd17041280f00000b0096b",
618 |         text: "[/takker-dist2/G]",
619 |         updated: 1673336595,
620 |         userId: "5ef2bdebb60650001e1280f0",
621 |       },
622 |       {
623 |         created: 1673336594,
624 |         id: "63bd17111280f00000b0096c",
625 |         text: "https://scrapbox.io/api/pages/takker-dist/F",
626 |         updated: 1673336640,
627 |         userId: "5ef2bdebb60650001e1280f0",
628 |       },
629 |       {
630 |         created: 1673336640,
631 |         id: "63bd17401280f00000b0096e",
632 |         text: "",
633 |         updated: 1673336640,
634 |         userId: "5ef2bdebb60650001e1280f0",
635 |       },
636 |     ],
637 |     linked: [],
638 |     project: "takker-dist",
639 |     projectLinked: [
640 |       "/takker-dist2/a",
641 |     ],
642 |     titleLc: "f",
643 |     updated: 1673336640,
644 |   },
645 |   "/takker-dist2/a" => {
646 |     descriptions: [
647 |       "[/takker-dist/F]",
648 |     ],
649 |     exists: true,
650 |     image: null,
651 |     isLinkedCorrect: false,
652 |     lines: [
653 |       {
654 |         created: 1673336561,
655 |         id: "dummy",
656 |         text: "A",
657 |         updated: 1673336561,
658 |         userId: "dummy",
659 |       },
660 |       {
661 |         created: 1673336561,
662 |         id: "dummy",
663 |         text: "[/takker-dist/F]",
664 |         updated: 1673336561,
665 |         userId: "dummy",
666 |       },
667 |     ],
668 |     project: "takker-dist2",
669 |     titleLc: "a",
670 |     updated: 1673336561,
671 |   },
672 |   "/takker-dist2/b" => {
673 |     descriptions: [
674 |       "[B1] [B2]",
675 |     ],
676 |     exists: true,
677 |     image: null,
678 |     isLinkedCorrect: false,
679 |     lines: [
680 |       {
681 |         created: 1673336514,
682 |         id: "dummy",
683 |         text: "B",
684 |         updated: 1673336514,
685 |         userId: "dummy",
686 |       },
687 |       {
688 |         created: 1673336514,
689 |         id: "dummy",
690 |         text: "[B1] [B2]",
691 |         updated: 1673336514,
692 |         userId: "dummy",
693 |       },
694 |     ],
695 |     project: "takker-dist2",
696 |     titleLc: "b",
697 |     updated: 1673336514,
698 |   },
699 |   "/takker-dist2/c" => {
700 |     descriptions: [
701 |       "[/takker-dist/F]",
702 |     ],
703 |     exists: true,
704 |     image: null,
705 |     isLinkedCorrect: false,
706 |     lines: [
707 |       {
708 |         created: 1673336584,
709 |         id: "dummy",
710 |         text: "C",
711 |         updated: 1673336584,
712 |         userId: "dummy",
713 |       },
714 |       {
715 |         created: 1673336584,
716 |         id: "dummy",
717 |         text: "[/takker-dist/F]",
718 |         updated: 1673336584,
719 |         userId: "dummy",
720 |       },
721 |     ],
722 |     project: "takker-dist2",
723 |     titleLc: "c",
724 |     updated: 1673336584,
725 |   },
726 | }
727 | `;
728 | 


--------------------------------------------------------------------------------
/app.css:
--------------------------------------------------------------------------------
1 | @import "./global.css";
2 | @import "./textBubble.css";
3 | @import "./cardBubble.css";
4 | 


--------------------------------------------------------------------------------
/app.min.css.ts:
--------------------------------------------------------------------------------
1 | // deno-fmt-ignore-file
2 | export const CSS = String.raw`*{box-sizing:border-box}a{background-color:transparent;text-decoration:none;cursor:pointer}img{display:inline-block;max-width:100%;max-height:100px}code{font-family:var(--code-text-font, Menlo, Monaco, Consolas, "Courier New", monospace);font-size:90%;color:var(--code-color, #342d9c);background-color:var(--code-bg, rgba(0,0,0,.04));padding:0;white-space:pre-wrap;word-wrap:break-word}blockquote{background-color:var(--quote-bg-color, rgba(0,0,0,.05));display:block;border-left:solid 4px #a0a0a0;padding-left:4px;margin:0}strong{font-weight:700}iframe{display:inline-block;margin:3px 0;vertical-align:middle;max-width:100%;width:640px;height:360px;border:0}audio{display:inline-block;vertical-align:middle;white-space:initial;max-width:100%}.formula{margin:auto 6px}.formula.error code{color:#fd7373}.katex-display{display:inline-block!important;margin:0!important;text-align:inherit!important}.error .katex-display{display:none}.cli{border-radius:4px}.cli .prefix{color:#9c6248}.helpfeel{background-color:#fbebdd;border-radius:4px;padding:3px!important}.helpfeel .prefix{color:#f17c00}.helpfeel .entry{color:#cc5020}.code-block{display:block;line-height:1.7em;background-color:var(--code-bg, rgba(0,0,0,.04))}.code-block-start{font-family:Menlo,Monaco,Consolas,Courier New,monospace;color:#342d9c;background-color:#ffcfc6;font-size:.9em;padding:1px 2px}.code-block-start a{color:#342d9c;text-decoration:underline}code.code-block,.table-block.table-block-row{padding-left:1em}.copy{font-family:"Font Awesome 5 Free";cursor:pointer}.table-block{white-space:nowrap}.table-block-start{padding:1px 2px;font-size:.9em;background-color:#ffcfc6}.table-block-start a{color:#342d9c;text-decoration:underline}.cell{margin:0;padding:0 2px 0 8px;box-sizing:content-box;display:inline-block;white-space:pre}.cell:nth-child(odd){background-color:#0000000a}.cell:nth-child(2n){background-color:#0000000f}.strong-image{max-height:100%}.icon{height:11px;vertical-align:middle}.strong-icon{height:13.2px}.tool-button{margin-left:1em;cursor:pointer;font-size:.9em}.deco-\/{font-style:italic}.deco-\*-1{font-weight:700}.deco-\*-2{font-weight:700;font-size:1.2em}.deco-\*-3{font-weight:700;font-size:1.44em}.deco-\*-4{font-weight:700;font-size:1.73em}.deco-\*-5{font-weight:700;font-size:2.07em}.deco-\*-6{font-weight:700;font-size:2.49em}.deco-\*-7{font-weight:700;font-size:3em}.deco-\*-8{font-weight:700;font-size:3.58em}.deco-\*-9{font-weight:700;font-size:4.3em}.deco-\*-10{font-weight:700;font-size:5.16em}.deco--{text-decoration:line-through}.deco-_{text-decoration:underline}.page-link{color:var(--page-link-color, #5e8af7)}a.page-link:hover{color:var(--page-link-hover-color, #2d67f5)}.empty-page-link{color:var(--empty-page-link-color, #fd7373)}a.empty-page-link:hover{color:var(--empty-page-link-hover-color, #fd7373)}.link{color:var(--page-link-color, #5e8af7);text-decoration:underline}a.link:hover{color:var(--page-link-color-hover-color, #2d67f5)}.link img{padding-bottom:3px;border-style:none none solid;border-width:1.5px;border-color:#8fadf9}.permalink{background-color:var(--line-permalink-color, rgba(234,218,74,.75))}.status-bar{display:inline-block;position:absolute;background-color:var(--page-bg, #fefefe);cursor:default}.status-bar>*{border:1px solid var(--status-bar-border-color, #a9aaaf)}.status-bar.top-left{top:0;left:0}.status-bar.top-left>*{border-top:none;border-left:none}.status-bar.top-left :last-of-type{border-bottom-right-radius:3px}.status-bar.top-right{top:0;right:0}.status-bar.top-right>*{border-top:none;border-right:none}.status-bar.top-right :last-of-type{border-bottom-left-radius:3px}.status-bar.bottom-right{bottom:0;right:0}.status-bar.bottom-right>*{border-bottom:none;border-right:none}.status-bar.bottom-right :last-of-type{border-top-left-radius:3px}.status-bar.bottom-left{bottom:0;left:0}.status-bar.bottom-left>*{border-bottom:none;border-left:none}.status-bar.bottom-left :last-of-type{border-top-right-radius:3px}.text-bubble{font-size:11px;line-height:1.42857;user-select:text;position:absolute;color:var(--page-text-color, #4a4a4a);box-shadow:0 6px 12px #0000002d;display:flex;flex-direction:column;z-index:9000;&.no-scroll{overflow-y:hidden}[data-theme=default-dark]{--text-bubble-border-color: hsl(0, 0%, 39%)}[data-theme=default-minimal]{--text-bubble-border-color: hsl(0, 0%, 89%)}[data-theme=paper-light]{--text-bubble-border-color: hsl(53, 8%, 58%)}[data-theme=paper-dark-dark]{--text-bubble-border-color: hsl(203, 42%, 17%)}[data-theme=blue]{--text-bubble-border-color: hsl(227, 68%, 62%)}[data-theme=purple]{--text-bubble-border-color: hsl(267, 39%, 60%)}[data-theme=green]{--text-bubble-border-color: hsl(136, 29%, 50%)}[data-theme=orange]{--text-bubble-border-color: hsl(43, 71%, 51%)}[data-theme=red]{--text-bubble-border-color: hsl(4, 58%, 56%)}[data-theme=spring]{--text-bubble-border-color: hsl(72, 64%, 57%)}[data-theme=kyoto]{--text-bubble-border-color: hsl(331, 21%, 26%)}[data-theme=newyork]{--text-bubble-border-color: hsl(176, 29%, 67%)}[role=tabpanel]{padding:5px 0 5px 5px;border-radius:4px;background-color:var(--page-bg, #fefefe);max-height:80vh;overflow-y:auto}[role=tabpanel],button{border:1px solid var(--text-bubble-border-color, hsl(221, 15%, 25%))}button{cursor:default;color:inherit;font-size:inherit;line-height:inherit;background-color:var(--page-bg, #fefefe);border-radius:4px 4px 0 0}button[aria-selected=true]{background-color:var(--text-bubble-border-color, hsl(221, 15%, 25%))}}.project-badge{text-decoration:none;color:var(--tool-text-color, #363c49)}.related-page-card[data-theme=default-dark]{--card-title-bg: hsl(0, 0%, 39%)}.related-page-card[data-theme=default-minimal]{--card-title-bg: hsl(0, 0%, 89%)}.related-page-card[data-theme=paper-light]{--card-title-bg: hsl(53, 8%, 58%)}.related-page-card[data-theme=paper-dark-dark]{--card-title-bg: hsl(203, 42%, 17%)}.related-page-card[data-theme=blue]{--card-title-bg: hsl(227, 68%, 62%)}.related-page-card[data-theme=purple]{--card-title-bg: hsl(267, 39%, 60%)}.text-bubble[data-theme=green]{--card-title-bg: hsl(136, 29%, 50%)}.related-page-card[data-theme=orange]{--card-title-bg: hsl(43, 71%, 51%)}.related-page-card[data-theme=red]{--card-title-bg: hsl(4, 58%, 56%)}.related-page-card[data-theme=spring]{--card-title-bg: hsl(72, 64%, 57%)}.related-page-card[data-theme=kyoto]{--card-title-bg: hsl(331, 21%, 26%)}.related-page-card[data-theme=newyork]{--card-title-bg: hsl(176, 29%, 67%)}.related-page-card{display:block;position:relative;height:inherit;width:inherit;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,Helvetica,Arial,Hiragino Sans,sans-serif;background-color:var(--card-bg, #fff);color:var(--card-title-color, #555);word-break:break-word;text-decoration:none}.related-page-card:hover{box-shadow:var(--card-box-hover-shadow, 0 2px 0 rgba(0,0,0,.23))}.related-page-card:focus{outline:0;box-shadow:0 0 0 3px #66afe999;border-color:#66afe9;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.related-page-card.hover{opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--card-hover-bg, rgba(0,0,0,.05));mix-blend-mode:multiply;z-index:1;transition:background-color .1s}.related-page-card:hover .hover{opacity:1}.related-page-card:active .hover{opacity:1;background-color:var(--card-active-bg, rgba(0,0,0,.1))}.related-page-card .content{height:calc(100% - 5px);width:inherit;display:flex;flex-direction:column;overflow:hidden}.related-page-card .content .header{width:100%;color:#396bdd;text-overflow:ellipsis;border-top:var(--card-title-bg, #f2f2f3) solid 10px;padding:8px 10px}.related-page-card .content .header .title{font-size:11px;line-height:16px;font-weight:700;max-height:48px;color:var(--card-title-color, #363c49);margin:0;overflow:hidden;display:block;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis}.related-page-card .content .description{line-height:16px;padding:8px 10px 0;font-size:10px;white-space:pre-line;column-count:1;column-gap:2em;column-width:10em;height:inherit;color:var(--card-description-color, gray);flex-shrink:16;overflow:hidden}.related-page-card .content .thumbnail{display:block;width:100%;margin:0 auto;padding:0 5px}.related-page-card .content .description p{margin:0;display:block}.related-page-card .content .description code{font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:90%;color:var(--code-color, #342d9c);background-color:var(--code-bg, rgba(0,0,0,.04));padding:0;white-space:pre-wrap;word-wrap:break-word}.related-page-card .content .description .icon{height:9px;vertical-align:middle}.related-page-card .content .description .page-link{background-color:transparent;text-decoration:none;cursor:pointer;color:var(--page-link-color, #5e8af7)}.card-bubble{background-color:var(--page-bg, #FFF);box-shadow:0 2px 2px #00000024,0 3px 1px -2px #0003,0 1px 5px #0000001f;position:absolute;max-width:80vw;box-sizing:content-box;z-index:9000;font-size:11px;line-height:1.42857;display:flex;padding:0;margin:0;list-style:none;overflow-x:auto;overflow-y:visible}.card-bubble li{display:block;position:relative;float:none;margin:5px;box-sizing:border-box;box-shadow:var(--card-box-shadow, 0 2px 0 rgba(0,0,0,.12));border-radius:2px;width:120px;height:120px}
3 | `;


--------------------------------------------------------------------------------
/bubble.ts:
--------------------------------------------------------------------------------
  1 | import { cacheFirstFetch, isExpired } from "./cache.ts";
  2 | import { ID, toId } from "./id.ts";
  3 | import { Listener, makeEmitter } from "./eventEmitter.ts";
  4 | import { Bubble, BubbleStorage, update } from "./storage.ts";
  5 | import { convert } from "./convert.ts";
  6 | import { createDebug } from "./debug.ts";
  7 | import { getPage } from "./deps/scrapbox-std.ts";
  8 | import { ProjectId, UnixTime } from "./deps/scrapbox.ts";
  9 | import { isOk, unwrapOk } from "./deps/option-t.ts";
 10 | 
 11 | const logger = createDebug("ScrapBubble:bubble.ts");
 12 | 
 13 | const storage: BubbleStorage = new Map();
 14 | /** データを更新中のページのリスト */
 15 | const loadingIds = new Set<ID>();
 16 | const emitter = makeEmitter<ID, Bubble>();
 17 | 
 18 | /** bubble dataを読み込む
 19 |  *
 20 |  * データの更新は行わない
 21 |  *
 22 |  * @param pageIds 取得したいページのリスト
 23 |  * @return pageの情報。未初期化のときは`undefined`を返す
 24 |  */
 25 | export function* load(
 26 |   pageIds: Iterable<ID>,
 27 | ): Generator<Bubble | undefined, void, unknown> {
 28 |   for (const pageId of pageIds) {
 29 |     yield storage.get(pageId);
 30 |   }
 31 | }
 32 | 
 33 | /** 特定のページの更新を購読する */
 34 | export const subscribe = (pageId: ID, listener: Listener<Bubble>): void =>
 35 |   emitter.on(pageId, listener);
 36 | 
 37 | /** 特定のページの更新購読を解除する */
 38 | export const unsubscribe = (pageId: ID, listener: Listener<Bubble>): void =>
 39 |   emitter.off(pageId, listener);
 40 | 
 41 | export interface PrefetchOptions {
 42 |   /** networkからデータを取得しないときは`true`を渡す*/
 43 |   ignoreFetch?: boolean;
 44 |   /** cacheの有効期限 (単位は秒) */
 45 |   maxAge?: UnixTime;
 46 | }
 47 | 
 48 | /** ページデータを取得し、cacheに格納する
 49 |  *
 50 |  * cacheは一定間隔ごとに更新される
 51 |  */
 52 | export const prefetch = async (
 53 |   title: string,
 54 |   projects: Iterable<string>,
 55 |   watchList: Set<ProjectId>,
 56 |   options?: PrefetchOptions,
 57 | ): Promise<void> => {
 58 |   const promises: Promise<void>[] = [];
 59 |   // 最後に登録したものからfetchされるので、反転させておく
 60 |   // makeThrottleの仕様を参照
 61 |   for (const project of [...projects].reverse()) {
 62 |     const id = toId(project, title);
 63 |     if (loadingIds.has(id)) continue;
 64 |     promises.push(
 65 |       updateApiCache(project, title, watchList, options),
 66 |     );
 67 |   }
 68 | 
 69 |   await Promise.all(promises);
 70 | };
 71 | 
 72 | /** debug用カウンタ */
 73 | let counter = 0;
 74 | 
 75 | /** cacheおよびnetworkから新しいページデータを取得する
 76 |  *
 77 |  * もし更新があれば、更新通知も発行する
 78 |  */
 79 | const updateApiCache = async (
 80 |   project: string,
 81 |   title: string,
 82 |   watchList: Set<ProjectId>,
 83 |   options?: PrefetchOptions,
 84 | ): Promise<void> => {
 85 |   const id = toId(project, title);
 86 |   if (loadingIds.has(id)) return;
 87 | 
 88 |   // 排他ロックをかける
 89 |   // これで同時に同じページの更新が走らないようにする
 90 |   loadingIds.add(id);
 91 |   const i = counter++;
 92 | 
 93 |   const timeTag = `[${i}] Check update ${id}`;
 94 |   logger.time(timeTag);
 95 |   try {
 96 |     const req = getPage.toRequest(project, title, {
 97 |       followRename: true,
 98 |       projects: [...watchList],
 99 |     });
100 | 
101 |     for await (
102 |       const [type, res] of cacheFirstFetch(req, {
103 |         ignoreSearch: true,
104 |         saveFailedResponse: true,
105 |       })
106 |     ) {
107 |       logger.debug(`[${i}]${type} ${id}`);
108 |       const result = await getPage.fromResponse(res);
109 |       // 更新があればeventを発行する
110 |       if (isOk(result)) {
111 |         const converted = convert(project, unwrapOk(result));
112 |         for (const [bubbleId, bubble] of converted) {
113 |           const prev = storage.get(bubbleId);
114 |           const updatedBubble = update(prev, bubble);
115 |           if (!updatedBubble) continue;
116 |           if (prev === updatedBubble) continue;
117 |           storage.set(bubbleId, updatedBubble);
118 |           emitter.dispatch(bubbleId, bubble);
119 |         }
120 |       }
121 | 
122 |       if (options?.ignoreFetch === true) break;
123 |       // 有効期限が切れているなら、新しくデータをnetworkから取ってくる
124 |       if (type === "cache" && !isExpired(res, options?.maxAge ?? 60)) {
125 |         break;
126 |       }
127 |     }
128 |   } catch (e: unknown) {
129 |     // 想定外のエラーはログに出す
130 |     logger.error(e);
131 |   } finally {
132 |     // ロック解除
133 |     loadingIds.delete(id);
134 |     logger.timeEnd(timeTag);
135 |     counter--;
136 |   }
137 | };
138 | 


--------------------------------------------------------------------------------
/cache.ts:
--------------------------------------------------------------------------------
 1 | import type { UnixTime } from "./deps/scrapbox.ts";
 2 | import { findLatestCache } from "./deps/scrapbox-std-browser.ts";
 3 | import { makeThrottle } from "./throttle.ts";
 4 | import { delay } from "./deps/async.ts";
 5 | 
 6 | const cacheVersion = "0.6.5"; // release前に更新する
 7 | const cacheName = `ScrapBubble-${cacheVersion}`;
 8 | const cache = await globalThis.caches.open(cacheName);
 9 | 
10 | // 古いcacheがあったら削除しておく
11 | // 他の操作をブロックする必要はない
12 | (async () => {
13 |   for (const name of await globalThis.caches.keys()) {
14 |     if (name.startsWith("ScrapBubble-") && name !== cacheName) {
15 |       await globalThis.caches.delete(name);
16 |       console.log(`[ScrapBubble] deleted old cache :"${name}"`);
17 |     }
18 |   }
19 | })();
20 | 
21 | /** 同時に3つまでfetchできるようにする函数 */
22 | const throttle = makeThrottle<Response>(3);
23 | 
24 | export interface CacheFirstFetchOptions extends CacheQueryOptions {
25 |   /** 失敗したresponseをcacheに保存するかどうか
26 |    *
27 |    * @default `false` (保存しない)
28 |    */
29 |   saveFailedResponse?: boolean;
30 | }
31 | 
32 | /** cacheとnetworkから順番にresponseをとってくる
33 |  *
34 |  * networkからとってこなくていいときは、途中でiteratorをbreakすればfetchしない
35 |  *
36 |  * fetchは同時に3回までしかできないよう制限する
37 |  *
38 |  * @param req 要求
39 |  * @param options cacheを探すときの設定
40 |  */
41 | export async function* cacheFirstFetch(
42 |   req: Request,
43 |   options?: CacheFirstFetchOptions,
44 | ): AsyncGenerator<readonly ["cache" | "network", Response], void, unknown> {
45 |   // cacheから返す
46 |   // まず自前のcache storageから失敗したresponseを取得し、なければscrapbox.ioのcacheから正常なresponseを探す
47 |   const cachePromise =
48 |     ((options?.saveFailedResponse ? cache.match(req) : undefined) ??
49 |       findLatestCache(req, options)).then((res) => ["cache", res] as const);
50 |   {
51 |     const timer = delay(1000).then(() => "timeout" as const);
52 |     const first = await Promise.race([cachePromise, timer]);
53 |     if (first !== "timeout") {
54 |       // 1秒以内にcacheを読み込めたら、cache→networkの順に返す
55 |       if (first[1]) {
56 |         yield ["cache", first[1]];
57 |       }
58 |       // networkから返す
59 |       const res = await throttle(() => fetch(req));
60 |       if (!res.ok && options?.saveFailedResponse) {
61 |         // scrapbox.ioは失敗したresponseをcacheしないので、自前のcacheに格納しておく
62 |         await cache.put(req, res.clone());
63 |       }
64 |       yield ["network", res];
65 |     }
66 |   }
67 | 
68 |   // 1秒経ってもcacheの読み込みが終わらないときは、fetchを走らせ始める
69 |   const networkPromise = throttle(() => fetch(req))
70 |     .then((res) => ["network", res] as const);
71 |   const [type, res] = await Promise.race([cachePromise, networkPromise]);
72 | 
73 |   if (type === "network") {
74 |     yield [type, res];
75 |     // networkPromiseが先にresolveしたら、cachePromiseはyieldせずに捨てる
76 |     return;
77 |   }
78 |   if (res) yield [type, res];
79 |   yield await networkPromise;
80 | }
81 | 
82 | /** 有効期限切れのresponseかどうか調べる
83 |  *
84 |  * @param response 調べるresponse
85 |  * @param maxAge 寿命(単位はs)
86 |  */
87 | export const isExpired = (
88 |   response: Response,
89 |   maxAge: UnixTime,
90 | ): boolean => {
91 |   const updated = new Date(response.headers.get("Date") ?? 0).getTime() /
92 |     1000;
93 |   return updated + maxAge < new Date().getTime() / 1000;
94 | };
95 | 


--------------------------------------------------------------------------------
/card.css:
--------------------------------------------------------------------------------
  1 | .related-page-card[data-theme="default-dark"] {
  2 |   --card-title-bg: hsl(0, 0%, 39%);
  3 | }
  4 | .related-page-card[data-theme="default-minimal"] {
  5 |   --card-title-bg: hsl(0, 0%, 89%);
  6 | }
  7 | .related-page-card[data-theme="paper-light"] {
  8 |   --card-title-bg: hsl(53, 8%, 58%);
  9 | }
 10 | .related-page-card[data-theme="paper-dark-dark"] {
 11 |   --card-title-bg: hsl(203, 42%, 17%);
 12 | }
 13 | .related-page-card[data-theme="blue"] {
 14 |   --card-title-bg: hsl(227, 68%, 62%);
 15 | }
 16 | .related-page-card[data-theme="purple"] {
 17 |   --card-title-bg: hsl(267, 39%, 60%);
 18 | }
 19 | .text-bubble[data-theme="green"] {
 20 |   --card-title-bg: hsl(136, 29%, 50%);
 21 | }
 22 | .related-page-card[data-theme="orange"] {
 23 |   --card-title-bg: hsl(43, 71%, 51%);
 24 | }
 25 | .related-page-card[data-theme="red"] {
 26 |   --card-title-bg: hsl(4, 58%, 56%);
 27 | }
 28 | .related-page-card[data-theme="spring"] {
 29 |   --card-title-bg: hsl(72, 64%, 57%);
 30 | }
 31 | .related-page-card[data-theme="kyoto"] {
 32 |   --card-title-bg: hsl(331, 21%, 26%);
 33 | }
 34 | .related-page-card[data-theme="newyork"] {
 35 |   --card-title-bg: hsl(176, 29%, 67%);
 36 | }
 37 | 
 38 | .related-page-card {
 39 |   display: block;
 40 |   position: relative;
 41 |   height: inherit;
 42 |   width: inherit;
 43 |   overflow: hidden;
 44 |   text-overflow: ellipsis;
 45 |   font-family: "Roboto", Helvetica, Arial, "Hiragino Sans", sans-serif;
 46 |   background-color: var(--card-bg, #fff);
 47 |   color: var(--card-title-color, #555);
 48 |   word-break: break-word;
 49 |   text-decoration: none;
 50 | }
 51 | .related-page-card:hover {
 52 |   box-shadow: var(--card-box-hover-shadow, 0 2px 0 rgba(0, 0, 0, 0.23));
 53 | }
 54 | .related-page-card:focus {
 55 |   outline: 0;
 56 |   box-shadow: 0 0px 0px 3px rgba(102, 175, 233, 0.6);
 57 |   border-color: #66afe9;
 58 |   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 59 | }
 60 | .related-page-card.hover {
 61 |   opacity: 0;
 62 |   position: absolute;
 63 |   width: 100%;
 64 |   height: 100%;
 65 |   top: 0;
 66 |   left: 0;
 67 |   background-color: var(--card-hover-bg, rgba(0, 0, 0, 0.05));
 68 |   mix-blend-mode: multiply;
 69 |   z-index: 1;
 70 |   transition: background-color 0.1s;
 71 | }
 72 | .related-page-card:hover .hover {
 73 |   opacity: 1;
 74 | }
 75 | .related-page-card:active .hover {
 76 |   opacity: 1;
 77 |   background-color: var(--card-active-bg, rgba(0, 0, 0, 0.1));
 78 | }
 79 | .related-page-card .content {
 80 |   height: calc(100% - 5px);
 81 |   width: inherit;
 82 |   display: flex;
 83 |   flex-direction: column;
 84 |   overflow: hidden;
 85 | }
 86 | .related-page-card .content .header {
 87 |   width: 100%;
 88 |   color: #396bdd;
 89 |   text-overflow: ellipsis;
 90 |   border-top: var(--card-title-bg, #f2f2f3) solid 10px;
 91 |   padding: 8px 10px;
 92 | }
 93 | .related-page-card .content .header .title {
 94 |   font-size: 11px; /* 14 * 0.8 */
 95 |   line-height: 16px; /* 20 * 0.8 */
 96 |   font-weight: bold;
 97 |   max-height: 48px; /* 60 * 0.8 */
 98 |   color: var(--card-title-color, #363c49);
 99 |   margin: 0;
100 |   overflow: hidden;
101 |   display: block;
102 |   -webkit-line-clamp: 3;
103 |   -webkit-box-orient: vertical;
104 |   text-overflow: ellipsis;
105 | }
106 | .related-page-card .content .description {
107 |   line-height: 16px; /* 20 * 0.8 */
108 |   padding: 8px 10px 0;
109 |   font-size: 10px; /* 12 * 0.8 */
110 |   white-space: pre-line;
111 |   column-count: 1;
112 |   column-gap: 2em;
113 |   column-width: 10em;
114 |   height: inherit;
115 |   color: var(--card-description-color, gray);
116 |   flex-shrink: 16;
117 |   overflow: hidden;
118 | }
119 | .related-page-card .content .thumbnail {
120 |   display: block;
121 |   width: 100%;
122 |   margin: 0 auto;
123 |   padding: 0 5px;
124 | }
125 | .related-page-card .content .description p {
126 |   margin: 0;
127 |   display: block;
128 | }
129 | .related-page-card .content .description code {
130 |   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
131 |   font-size: 90%;
132 |   color: var(--code-color, #342d9c);
133 |   background-color: var(--code-bg, rgba(0, 0, 0, 0.04));
134 |   padding: 0;
135 |   white-space: pre-wrap;
136 |   word-wrap: break-word;
137 | }
138 | 
139 | .related-page-card .content .description .icon {
140 |   height: 9px; /* 11 * 0.8 */
141 |   vertical-align: middle;
142 | }
143 | .related-page-card .content .description .page-link {
144 |   background-color: transparent;
145 |   text-decoration: none;
146 |   cursor: pointer;
147 |   color: var(--page-link-color, #5e8af7);
148 | }
149 | 


--------------------------------------------------------------------------------
/cardBubble.css:
--------------------------------------------------------------------------------
 1 | @import "./card.css";
 2 | 
 3 | .card-bubble {
 4 |   background-color: var(--page-bg, #fff);
 5 |   box-shadow:
 6 |     0 2px 2px 0 rgba(0, 0, 0, 0.14),
 7 |     0 3px 1px -2px rgba(0, 0, 0, 0.2),
 8 |     0 1px 5px 0 rgba(0, 0, 0, 0.12);
 9 |   position: absolute;
10 |   max-width: 80vw;
11 |   box-sizing: content-box;
12 |   z-index: 9000;
13 |   font-size: 11px;
14 |   line-height: 1.42857;
15 | 
16 |   display: flex;
17 |   padding: 0px;
18 |   margin: 0px;
19 |   list-style: none;
20 |   overflow-x: auto;
21 |   overflow-y: visible;
22 | }
23 | .card-bubble li {
24 |   display: block;
25 |   position: relative;
26 |   float: none;
27 |   margin: 5px;
28 |   box-sizing: border-box;
29 |   box-shadow: var(--card-box-shadow, 0 2px 0 rgba(0, 0, 0, 0.12));
30 |   border-radius: 2px;
31 | 
32 |   width: 120px;
33 |   height: 120px;
34 | }
35 | 


--------------------------------------------------------------------------------
/convert.test.ts:
--------------------------------------------------------------------------------
  1 | import { convert } from "./convert.ts";
  2 | import { assertSnapshot } from "./deps/testing.ts";
  3 | 
  4 | Deno.test("convert", async (t) => {
  5 |   await t.step("one project", async (t) => {
  6 |     await t.step(
  7 |       "逆・順・双方向・空リンク+中身あり・空headword+複数パス2 hop links",
  8 |       async (t) => {
  9 |         await assertSnapshot(
 10 |           t,
 11 |           convert("takker-dist", {
 12 |             "id": "63ab57239db1b2001edc43b0",
 13 |             "title": "B",
 14 |             "image": null,
 15 |             "descriptions": [
 16 |               "[B1], [B2], [B3]",
 17 |               "[A1]",
 18 |               "https://scrapbox.io/api/pages/takker-dist/B",
 19 |             ],
 20 |             "user": {
 21 |               "id": "5ef2bdebb60650001e1280f0",
 22 |               "name": "takker",
 23 |               "displayName": "takker",
 24 |               "photo":
 25 |                 "https://lh3.googleusercontent.com/a/AEdFTp5ZjA62crJpg6_eUg0wkIvPXm36hWWC3gyzzuZZ=s96-c",
 26 |             },
 27 |             "lastUpdateUser": {
 28 |               "id": "5ef2bdebb60650001e1280f0",
 29 |               "name": "takker",
 30 |               "displayName": "takker",
 31 |               "photo":
 32 |                 "https://lh3.googleusercontent.com/a/AEdFTp5ZjA62crJpg6_eUg0wkIvPXm36hWWC3gyzzuZZ=s96-c",
 33 |             },
 34 |             "pin": 0,
 35 |             "views": 5,
 36 |             "linked": 1,
 37 |             "commitId": "63b93444aded4c001e09d134",
 38 |             "created": 1672173349,
 39 |             "updated": 1673081924,
 40 |             "accessed": 1673257686,
 41 |             "snapshotCreated": 1673081924,
 42 |             "snapshotCount": 1,
 43 |             "pageRank": 1.8,
 44 |             "lastAccessed": 1673257686,
 45 |             "persistent": true,
 46 |             "lines": [{
 47 |               "id": "63ab57239db1b2001edc43b0",
 48 |               "text": "B",
 49 |               "userId": "5ef2bdebb60650001e1280f0",
 50 |               "created": 1672173349,
 51 |               "updated": 1672173349,
 52 |             }, {
 53 |               "id": "63ab57261280f000002d941d",
 54 |               "text": "[B1], [B2], [B3]",
 55 |               "userId": "5ef2bdebb60650001e1280f0",
 56 |               "created": 1672173349,
 57 |               "updated": 1672173361,
 58 |             }, {
 59 |               "id": "63ab575f1280f000002d941f",
 60 |               "text": "[A1]",
 61 |               "userId": "5ef2bdebb60650001e1280f0",
 62 |               "created": 1672173407,
 63 |               "updated": 1672173410,
 64 |             }, {
 65 |               "id": "63ab57271280f000002d941e",
 66 |               "text": "https://scrapbox.io/api/pages/takker-dist/B",
 67 |               "userId": "5ef2bdebb60650001e1280f0",
 68 |               "created": 1672173351,
 69 |               "updated": 1673081924,
 70 |             }, {
 71 |               "id": "63b934441280f00000606f45",
 72 |               "text": "",
 73 |               "userId": "5ef2bdebb60650001e1280f0",
 74 |               "created": 1673081924,
 75 |               "updated": 1673081924,
 76 |             }],
 77 |             "links": ["B1", "B2", "B3", "A1"],
 78 |             "projectLinks": [],
 79 |             "icons": [],
 80 |             "files": [],
 81 |             "infoboxDefinition": [],
 82 |             "infoboxResult": [],
 83 |             "infoboxDisableLinks": [],
 84 |             "relatedPages": {
 85 |               "links1hop": [{
 86 |                 "id": "63b933f82895b8001d9f5cd1",
 87 |                 "title": "B1",
 88 |                 "titleLc": "b1",
 89 |                 "image": null,
 90 |                 "descriptions": ["[B]"],
 91 |                 "linksLc": ["b"],
 92 |                 "infoboxResult": [],
 93 |                 "infoboxDisableLinks": [],
 94 |                 "linked": 4,
 95 |                 "pageRank": 3.4,
 96 |                 "created": 1673081852,
 97 |                 "updated": 1673081852,
 98 |                 "accessed": 1673082412,
 99 |               }],
100 |               "links2hop": [{
101 |                 "id": "63ab5703d28d9b001d611a14",
102 |                 "title": "A",
103 |                 "titleLc": "a",
104 |                 "image": null,
105 |                 "descriptions": [
106 |                   "[A1],[A2],[A3]",
107 |                   "https://scrapbox.io/api/pages/takker-dist/A",
108 |                 ],
109 |                 "linksLc": ["a1"],
110 |                 "infoboxResult": [],
111 |                 "infoboxDisableLinks": [],
112 |                 "linked": 0,
113 |                 "pageRank": 3.4,
114 |                 "created": 1672173548,
115 |                 "updated": 1672173548,
116 |                 "accessed": 1673081915,
117 |               }, {
118 |                 "id": "63ab57bd101f5f001ee7125c",
119 |                 "title": "C",
120 |                 "titleLc": "c",
121 |                 "image": null,
122 |                 "descriptions": ["[C1], [C2], [C3]", "[A2], [A3]", "[B1]"],
123 |                 "linksLc": ["b1"],
124 |                 "infoboxResult": [],
125 |                 "infoboxDisableLinks": [],
126 |                 "linked": 0,
127 |                 "pageRank": 3.4,
128 |                 "created": 1673081866,
129 |                 "updated": 1673081866,
130 |                 "accessed": 1673081862,
131 |               }, {
132 |                 "id": "63b93413cb7e16001e1143af",
133 |                 "title": "D",
134 |                 "titleLc": "d",
135 |                 "image": null,
136 |                 "descriptions": ["[B1]"],
137 |                 "linksLc": ["b1"],
138 |                 "infoboxResult": [],
139 |                 "infoboxDisableLinks": [],
140 |                 "linked": 0,
141 |                 "pageRank": 2.4,
142 |                 "created": 1673081879,
143 |                 "updated": 1673081879,
144 |                 "accessed": 1673081876,
145 |               }, {
146 |                 "id": "63b9343133a85a001ea1d3c3",
147 |                 "title": "E",
148 |                 "titleLc": "e",
149 |                 "image": null,
150 |                 "descriptions": ["[B1], [B2]"],
151 |                 "linksLc": ["b1", "b2"],
152 |                 "infoboxResult": [],
153 |                 "infoboxDisableLinks": [],
154 |                 "linked": 0,
155 |                 "pageRank": 1.4,
156 |                 "created": 1673081909,
157 |                 "updated": 1673081909,
158 |                 "accessed": 1673081906,
159 |               }],
160 |               "projectLinks1hop": [],
161 |               "hasBackLinksOrIcons": true,
162 |               "search": "",
163 |               "searchBackend": "elasticsearch",
164 |             },
165 |             "collaborators": [],
166 |           }),
167 |         );
168 |       },
169 |     );
170 | 
171 |     await t.step(
172 |       "(逆リンク|順リンク|双方向リンク)+2 hop links",
173 |       async (t) => {
174 |         await assertSnapshot(
175 |           t,
176 |           convert("takker-dist", {
177 |             "id": "63c0afb552e241001d99bfac",
178 |             "title": "I",
179 |             "image": null,
180 |             "descriptions": [
181 |               "[B] [B1] [K]",
182 |               "https://scrapbox.io/api/pages/takker-dist/I",
183 |             ],
184 |             "user": {
185 |               "id": "5ef2bdebb60650001e1280f0",
186 |               "name": "takker",
187 |               "displayName": "takker",
188 |               "photo":
189 |                 "https://lh3.googleusercontent.com/a/AEdFTp5ZjA62crJpg6_eUg0wkIvPXm36hWWC3gyzzuZZ=s96-c",
190 |             },
191 |             "lastUpdateUser": {
192 |               "id": "5ef2bdebb60650001e1280f0",
193 |               "name": "takker",
194 |               "displayName": "takker",
195 |               "photo":
196 |                 "https://lh3.googleusercontent.com/a/AEdFTp5ZjA62crJpg6_eUg0wkIvPXm36hWWC3gyzzuZZ=s96-c",
197 |             },
198 |             "pin": 0,
199 |             "views": 2,
200 |             "linked": 2,
201 |             "commitId": "63c0b03b6ecf16001dddeeff",
202 |             "created": 1673572279,
203 |             "updated": 1673572411,
204 |             "accessed": 1673572394,
205 |             "snapshotCreated": null,
206 |             "snapshotCount": 0,
207 |             "pageRank": 0,
208 |             "lastAccessed": 1673572394,
209 |             "persistent": true,
210 |             "lines": [{
211 |               "id": "63c0afb552e241001d99bfac",
212 |               "text": "I",
213 |               "userId": "5ef2bdebb60650001e1280f0",
214 |               "created": 1673572279,
215 |               "updated": 1673572279,
216 |             }, {
217 |               "id": "63c0afb71280f00000e9bae0",
218 |               "text": "[B] [B1] [K]",
219 |               "userId": "5ef2bdebb60650001e1280f0",
220 |               "created": 1673572279,
221 |               "updated": 1673572397,
222 |             }, {
223 |               "id": "63c0afb81280f00000e9bae1",
224 |               "text": "https://scrapbox.io/api/pages/takker-dist/I",
225 |               "userId": "5ef2bdebb60650001e1280f0",
226 |               "created": 1673572279,
227 |               "updated": 1673572411,
228 |             }, {
229 |               "id": "63c0b03c1280f00000e9bae6",
230 |               "text": "",
231 |               "userId": "5ef2bdebb60650001e1280f0",
232 |               "created": 1673572411,
233 |               "updated": 1673572411,
234 |             }],
235 |             "links": ["B", "B1", "K"],
236 |             "projectLinks": [],
237 |             "icons": [],
238 |             "files": [],
239 |             "infoboxDefinition": [],
240 |             "infoboxResult": [],
241 |             "infoboxDisableLinks": [],
242 |             "relatedPages": {
243 |               "links1hop": [{
244 |                 "id": "63c0affc1d7546001dfa9f9a",
245 |                 "title": "J",
246 |                 "titleLc": "j",
247 |                 "image": null,
248 |                 "descriptions": ["[I] [B1]"],
249 |                 "linksLc": ["i", "b1"],
250 |                 "infoboxResult": [],
251 |                 "infoboxDisableLinks": [],
252 |                 "linked": 0,
253 |                 "pageRank": 1.8,
254 |                 "created": 1673572354,
255 |                 "updated": 1673572354,
256 |                 "accessed": 1673572350,
257 |               }, {
258 |                 "id": "63c0b022d59376001dc1d28c",
259 |                 "title": "K",
260 |                 "titleLc": "k",
261 |                 "image": null,
262 |                 "descriptions": ["[I] [B1]"],
263 |                 "linksLc": ["i", "b1"],
264 |                 "infoboxResult": [],
265 |                 "infoboxDisableLinks": [],
266 |                 "linked": 1,
267 |                 "pageRank": 1.8,
268 |                 "created": 1673572392,
269 |                 "updated": 1673572392,
270 |                 "accessed": 1673572387,
271 |               }, {
272 |                 "id": "63ab57239db1b2001edc43b0",
273 |                 "title": "B",
274 |                 "titleLc": "b",
275 |                 "image": null,
276 |                 "descriptions": [
277 |                   "[B1], [B2], [B3]",
278 |                   "[A1]",
279 |                   "https://scrapbox.io/api/pages/takker-dist/B",
280 |                 ],
281 |                 "linksLc": ["b1", "b2", "b3", "a1"],
282 |                 "infoboxResult": [],
283 |                 "infoboxDisableLinks": [],
284 |                 "linked": 2,
285 |                 "pageRank": 1.8,
286 |                 "created": 1673081924,
287 |                 "updated": 1673081924,
288 |                 "accessed": 1673572196,
289 |               }, {
290 |                 "id": "63b933f82895b8001d9f5cd1",
291 |                 "title": "B1",
292 |                 "titleLc": "b1",
293 |                 "image": null,
294 |                 "descriptions": ["[B]"],
295 |                 "linksLc": ["b"],
296 |                 "infoboxResult": [],
297 |                 "infoboxDisableLinks": [],
298 |                 "linked": 7,
299 |                 "pageRank": 1.8,
300 |                 "created": 1673081852,
301 |                 "updated": 1673081852,
302 |                 "accessed": 1673082412,
303 |               }],
304 |               "links2hop": [{
305 |                 "id": "63ab57bd101f5f001ee7125c",
306 |                 "title": "C",
307 |                 "titleLc": "c",
308 |                 "image": null,
309 |                 "descriptions": ["[C1], [C2], [C3]", "[A2], [A3]", "[B1]"],
310 |                 "linksLc": ["b1"],
311 |                 "infoboxResult": [],
312 |                 "infoboxDisableLinks": [],
313 |                 "linked": 0,
314 |                 "pageRank": 1.8,
315 |                 "created": 1673081866,
316 |                 "updated": 1673081866,
317 |                 "accessed": 1673572247,
318 |               }, {
319 |                 "id": "63b93413cb7e16001e1143af",
320 |                 "title": "D",
321 |                 "titleLc": "d",
322 |                 "image": null,
323 |                 "descriptions": ["[B1]"],
324 |                 "linksLc": ["b1"],
325 |                 "infoboxResult": [],
326 |                 "infoboxDisableLinks": [],
327 |                 "linked": 0,
328 |                 "pageRank": 1.8,
329 |                 "created": 1673081879,
330 |                 "updated": 1673081879,
331 |                 "accessed": 1673572239,
332 |               }, {
333 |                 "id": "63b9343133a85a001ea1d3c3",
334 |                 "title": "E",
335 |                 "titleLc": "e",
336 |                 "image": null,
337 |                 "descriptions": ["[B1], [B2]"],
338 |                 "linksLc": ["b1"],
339 |                 "infoboxResult": [],
340 |                 "infoboxDisableLinks": [],
341 |                 "linked": 0,
342 |                 "pageRank": 1.8,
343 |                 "created": 1673081909,
344 |                 "updated": 1673081909,
345 |                 "accessed": 1673572199,
346 |               }],
347 |               "projectLinks1hop": [],
348 |               "hasBackLinksOrIcons": true,
349 |               "search": "",
350 |               "searchBackend": "elasticsearch",
351 |             },
352 |             "collaborators": [],
353 |           }),
354 |         );
355 |       },
356 |     );
357 |   });
358 |   await t.step("two projects", async (t) => {
359 |     await t.step("逆・順・双方向External links", async (t) => {
360 |       await assertSnapshot(
361 |         t,
362 |         convert("takker-dist", {
363 |           "id": "63bd16afdb71fb001d058f0e",
364 |           "title": "F",
365 |           "image": null,
366 |           "descriptions": [
367 |             "[/takker-dist2/B]",
368 |             "[/takker-dist2/C]",
369 |             "[/takker-dist2/G]",
370 |             "https://scrapbox.io/api/pages/takker-dist/F",
371 |           ],
372 |           "user": {
373 |             "id": "5ef2bdebb60650001e1280f0",
374 |             "name": "takker",
375 |             "displayName": "takker",
376 |             "photo":
377 |               "https://lh3.googleusercontent.com/a/AEdFTp5ZjA62crJpg6_eUg0wkIvPXm36hWWC3gyzzuZZ=s96-c",
378 |           },
379 |           "lastUpdateUser": {
380 |             "id": "5ef2bdebb60650001e1280f0",
381 |             "name": "takker",
382 |             "displayName": "takker",
383 |             "photo":
384 |               "https://lh3.googleusercontent.com/a/AEdFTp5ZjA62crJpg6_eUg0wkIvPXm36hWWC3gyzzuZZ=s96-c",
385 |           },
386 |           "pin": 0,
387 |           "views": 3,
388 |           "linked": 0,
389 |           "commitId": "63bd174061a69e001e7d9d74",
390 |           "created": 1673336497,
391 |           "updated": 1673336640,
392 |           "accessed": 1673336624,
393 |           "snapshotCreated": null,
394 |           "snapshotCount": 0,
395 |           "pageRank": 0,
396 |           "lastAccessed": 1673336624,
397 |           "persistent": true,
398 |           "lines": [{
399 |             "id": "63bd16afdb71fb001d058f0e",
400 |             "text": "F",
401 |             "userId": "5ef2bdebb60650001e1280f0",
402 |             "created": 1673336497,
403 |             "updated": 1673336497,
404 |           }, {
405 |             "id": "63bd16b11280f00000b00965",
406 |             "text": "[/takker-dist2/B]",
407 |             "userId": "5ef2bdebb60650001e1280f0",
408 |             "created": 1673336497,
409 |             "updated": 1673336501,
410 |           }, {
411 |             "id": "63bd16b51280f00000b00966",
412 |             "text": "[/takker-dist2/C]",
413 |             "userId": "5ef2bdebb60650001e1280f0",
414 |             "created": 1673336501,
415 |             "updated": 1673336571,
416 |           }, {
417 |             "id": "63bd17041280f00000b0096b",
418 |             "text": "[/takker-dist2/G]",
419 |             "userId": "5ef2bdebb60650001e1280f0",
420 |             "created": 1673336580,
421 |             "updated": 1673336595,
422 |           }, {
423 |             "id": "63bd17111280f00000b0096c",
424 |             "text": "https://scrapbox.io/api/pages/takker-dist/F",
425 |             "userId": "5ef2bdebb60650001e1280f0",
426 |             "created": 1673336594,
427 |             "updated": 1673336640,
428 |           }, {
429 |             "id": "63bd17401280f00000b0096e",
430 |             "text": "",
431 |             "userId": "5ef2bdebb60650001e1280f0",
432 |             "created": 1673336640,
433 |             "updated": 1673336640,
434 |           }],
435 |           "links": [],
436 |           "projectLinks": [
437 |             "/takker-dist2/B",
438 |             "/takker-dist2/C",
439 |             "/takker-dist2/G",
440 |           ],
441 |           "icons": [],
442 |           "files": [],
443 |           "infoboxDefinition": [],
444 |           "infoboxResult": [],
445 |           "infoboxDisableLinks": [],
446 |           "relatedPages": {
447 |             "links1hop": [],
448 |             "links2hop": [],
449 |             "projectLinks1hop": [{
450 |               "id": "63bd169823cbed001d092543",
451 |               "title": "B",
452 |               "titleLc": "b",
453 |               "image": null,
454 |               "descriptions": ["[B1] [B2]"],
455 |               "linked": 0,
456 |               "created": null,
457 |               "updated": 1673336514,
458 |               "accessed": 1673336473,
459 |               "projectName": "takker-dist2",
460 |             }, {
461 |               "id": "63bd16c41933fc001d0f9dca",
462 |               "title": "C",
463 |               "titleLc": "c",
464 |               "image": null,
465 |               "descriptions": ["[/takker-dist/F]"],
466 |               "linked": 0,
467 |               "created": null,
468 |               "updated": 1673336584,
469 |               "accessed": 1673336577,
470 |               "projectName": "takker-dist2",
471 |             }, {
472 |               "id": "63bd1684ca5336001d6417d9",
473 |               "title": "A",
474 |               "titleLc": "a",
475 |               "image": null,
476 |               "descriptions": ["[/takker-dist/F]"],
477 |               "linked": 0,
478 |               "created": null,
479 |               "updated": 1673336561,
480 |               "accessed": 1673336529,
481 |               "projectName": "takker-dist2",
482 |             }],
483 |             "hasBackLinksOrIcons": false,
484 |             "search": "",
485 |             "searchBackend": "elasticsearch",
486 |           },
487 |           "collaborators": [],
488 |         }),
489 |       );
490 |     });
491 |   });
492 | });
493 | 


--------------------------------------------------------------------------------
/convert.ts:
--------------------------------------------------------------------------------
  1 | import { toTitleLc } from "./deps/scrapbox-std.ts";
  2 | import { Bubble, BubbleStorage } from "./storage.ts";
  3 | import { fromId, ID, toId } from "./id.ts";
  4 | import { Page, RelatedPage } from "./deps/scrapbox.ts";
  5 | 
  6 | /** APIから取得したページデータを、Bubble用に変換する
  7 |  *
  8 |  * @param titleLc ページのタイトル タイトル変更があると、page.titleから復元できないため、別途指定している
  9 |  * @param project ページのproject
 10 |  * @param page 変換したいページデータ
 11 |  * @return 変換したデータ
 12 |  */
 13 | export const convert = (
 14 |   project: string,
 15 |   page: Page,
 16 | ): BubbleStorage => {
 17 |   const storage: BubbleStorage = new Map();
 18 | 
 19 |   // pageが参照しているリンクの逆リンクにpageを入れる
 20 |   // これにより、2 hop linksのハブとなるcardは、全ての逆リンクが格納されていると保証され、linkedとprojectLinkedはundefinedでなくなる
 21 |   const titleLc = toTitleLc(page.title);
 22 |   for (const link of page.links) {
 23 |     const bubble: Bubble = makeDummy(project, link);
 24 |     bubble.linked = [titleLc];
 25 |     storage.set(toId(project, link), bubble);
 26 |   }
 27 |   const pageId = toId(project, titleLc);
 28 |   const projectLinksLc = page.projectLinks.map((id) => {
 29 |     const link = fromId(id as ID);
 30 |     return toId(link.project, link.titleLc);
 31 |   });
 32 |   // projectLinksおよびprojectLinks1hopにあるページカードの外部リンク記法経由の逆リンクは正確に取得できないので無視する
 33 |   // 外部リンク記法経由の逆リンクはpage.titleのみ考慮する
 34 | 
 35 |   // ページ本文を入れる
 36 |   const pageBubble: Required<Bubble> = {
 37 |     ...toBubble(project, page),
 38 |     linked: [],
 39 |     projectLinked: [],
 40 |   };
 41 |   storage.set(pageId, pageBubble);
 42 | 
 43 |   // 1 hop linksからカードを取り出す
 44 |   // 同時に`emptyPageIds`を作る
 45 |   const linksLc = page.links.map((link) => toTitleLc(link));
 46 |   for (const card of page.relatedPages.links1hop) {
 47 |     if (card.linksLc.includes(titleLc)) {
 48 |       // 双方向リンク or 逆リンク
 49 | 
 50 |       // 逆リンクを作る
 51 |       // 重複はありえないので配列でいい
 52 |       pageBubble.linked.push(card.titleLc);
 53 |     }
 54 |     // `page`→`card`→`linkLc`←`page`というリンク関係にあるときは、`card`を`linkLc`の逆リンクとして登録する
 55 |     for (
 56 |       const linkLc of card.linksLc.filter((linkLc) => linksLc.includes(linkLc))
 57 |     ) {
 58 |       const cardId = toId(project, linkLc);
 59 |       const bubble = storage.get(cardId) ?? makeDummy(project, linkLc);
 60 |       if (!bubble.linked) {
 61 |         bubble.linked = [card.titleLc];
 62 |         continue;
 63 |       }
 64 |       bubble.linked.push(card.titleLc);
 65 |     }
 66 |     // cardを入れる
 67 |     const cardId = toId(project, card.titleLc);
 68 |     const bubble = toBubble(project, card);
 69 |     // external linksでなければ`projectLinked`は存在しない
 70 |     const linked = storage.get(cardId)?.linked;
 71 |     if (linked) bubble.linked = linked;
 72 |     storage.set(cardId, bubble);
 73 |   }
 74 | 
 75 |   // external linksからカードを取り出す
 76 |   for (
 77 |     const card of page.relatedPages.projectLinks1hop
 78 |   ) {
 79 |     const cardId = toId(card.projectName, card.titleLc);
 80 |     if (!projectLinksLc.includes(cardId)) {
 81 |       // 逆リンク
 82 |       // 双方向リンクは順リンクと判別がつかないのでやめる
 83 | 
 84 |       // 逆リンクを作る
 85 |       pageBubble.projectLinked.push(cardId);
 86 |     }
 87 |     // cardを入れる
 88 |     const bubble = toBubble(card.projectName, card);
 89 |     const projectLinked = storage.get(cardId)?.projectLinked;
 90 |     if (projectLinked) bubble.projectLinked = projectLinked;
 91 |     storage.set(cardId, bubble);
 92 |   }
 93 |   pageBubble.isLinkedCorrect = true;
 94 | 
 95 |   // 2 hop linksからカードを取り出す
 96 |   for (const card of page.relatedPages.links2hop) {
 97 |     for (const linkLc of card.linksLc) {
 98 |       // 逆リンクを作る
 99 |       // 重複はありえないので配列でいい
100 |       const cardId = toId(project, linkLc);
101 |       const bubble = storage.get(cardId) ?? makeDummy(project, linkLc);
102 |       if (!bubble.linked) {
103 |         bubble.linked = [card.titleLc];
104 |         continue;
105 |       }
106 |       bubble.linked.push(card.titleLc);
107 |     }
108 |     // cardを入れる
109 |     const cardId = toId(project, card.titleLc);
110 |     const bubble = toBubble(project, card);
111 |     // external linksでなければ`projectLinked`は存在しない
112 |     const linked = storage.get(cardId)?.linked;
113 |     if (linked) bubble.linked = linked;
114 |     storage.set(cardId, bubble);
115 |   }
116 | 
117 |   return storage;
118 | };
119 | 
120 | /** 関連ページやページ本文の情報をBubbleに変換する
121 |  *
122 |  * @param project 与えたデータのproject name
123 |  * @param page bubbleに変換したいデータ
124 |  * @param checked データを確認した日時
125 |  * @return 変換後のデータ
126 |  */
127 | const toBubble = (
128 |   project: string,
129 |   page:
130 |     | Page
131 |     | Omit<
132 |       RelatedPage,
133 |       | "linksLc"
134 |       | "pageRank"
135 |       | "created"
136 |       | "infoboxResult"
137 |       | "infoboxDisableLinks"
138 |     >,
139 | ): Bubble => ({
140 |   project,
141 |   titleLc: "titleLc" in page ? page.titleLc : toTitleLc(page.title),
142 |   // 関連ページの場合は、関連ページが存在する時点で中身があるので、常に`true`とする
143 |   exists: "persistent" in page ? page.persistent : true,
144 |   descriptions: page.descriptions,
145 |   image: page.image,
146 |   lines: "lines" in page
147 |     ? page.lines
148 |     // descriptionsからでっち上げる
149 |     : [page.title, ...page.descriptions].map((text) => ({
150 |       text,
151 |       id: "dummy",
152 |       userId: "dummy",
153 |       updated: page.updated,
154 |       created: page.updated,
155 |     })),
156 |   updated: page.updated,
157 |   isLinkedCorrect: false,
158 | });
159 | 
160 | /** ページタイトルだけからBubbleを作る
161 |  *
162 |  * @param project 与えたデータのproject name
163 |  * @param title ページタイトル
164 |  * @param checked データを確認した日時
165 |  * @return 変換後のデータ
166 |  */
167 | const makeDummy = (
168 |   project: string,
169 |   title: string,
170 | ): Bubble => ({
171 |   project,
172 |   titleLc: toTitleLc(title),
173 |   exists: false,
174 |   descriptions: [],
175 |   image: null,
176 |   lines: [{
177 |     text: title,
178 |     id: "dummy",
179 |     userId: "dummy",
180 |     updated: 0,
181 |     created: 0,
182 |   }],
183 |   updated: 0,
184 |   isLinkedCorrect: false,
185 | });
186 | 


--------------------------------------------------------------------------------
/debug.ts:
--------------------------------------------------------------------------------
 1 | let debugMode: boolean | Set<string> = false;
 2 | 
 3 | /** cache周りのdebug出力の有効・無効の切り替えを行う
 4 |  *
 5 |  * @param mode `true`：全てのdebug出力を有効にする, `false`：全てのdebug出力を無効にする, それ以外：指定したファイル中のdebug出力のみ有効にする
 6 |  */
 7 | export const setDebugMode = (mode: boolean | Iterable<string>): void => {
 8 |   debugMode = typeof mode === "boolean" ? mode : new Set(mode);
 9 | };
10 | 
11 | /** debug modeのときだけ有効なconsoleをファイルごとに作る
12 |  *
13 |  * @param filename コンソール出力を呼び出したファイル名
14 |  */
15 | export const createDebug = (filename: string): Console =>
16 |   Object.fromEntries([...Object.entries(console)].map(
17 |     ([key, value]: [string, unknown]) => {
18 |       if (typeof value !== "function") return [key, value];
19 |       switch (key as keyof Console) {
20 |         case "warn":
21 |         case "error":
22 |           return [
23 |             key,
24 |             (...args: unknown[]) =>
25 |               value(`%c${filename}`, "color: gray", ...args),
26 |           ];
27 |         case "log":
28 |         case "info":
29 |         case "debug":
30 |           return [key, (...args: unknown[]) => {
31 |             if (
32 |               debugMode !== true && (!debugMode || !debugMode.has(filename))
33 |             ) {
34 |               return;
35 |             }
36 |             value(`%c${filename}`, "color: gray", ...args);
37 |           }];
38 |         case "assert":
39 |           return [key, (assertion: boolean, ...args: unknown[]) => {
40 |             if (
41 |               debugMode !== true && (!debugMode || !debugMode.has(filename))
42 |             ) {
43 |               return;
44 |             }
45 |             value(assertion, `%c${filename}`, "color: gray", ...args);
46 |           }];
47 |         case "time":
48 |         case "timeEnd":
49 |           return [key, (label: string) => {
50 |             if (
51 |               debugMode !== true && (!debugMode || !debugMode.has(filename))
52 |             ) {
53 |               return;
54 |             }
55 |             value(`${filename} ${label}`);
56 |           }];
57 |         default:
58 |           return [key, (...args: unknown[]) => {
59 |             if (
60 |               debugMode !== true && (!debugMode || !debugMode.has(filename))
61 |             ) {
62 |               return;
63 |             }
64 |             return value(...args);
65 |           }];
66 |       }
67 |     },
68 |   )) as unknown as Console;
69 | 


--------------------------------------------------------------------------------
/deno.jsonc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tasks": {
 3 |     "check": "deno check --remote **/*.ts **/*.tsx",
 4 |     "test": "deno test --allow-read --parallel",
 5 |     "check:all": "deno fmt --check && deno lint && deno task check && deno task test",
 6 |     "fix": "deno fmt && deno lint --fix && deno task check && deno task test"
 7 |   },
 8 |   "compilerOptions": {
 9 |     "lib": [
10 |       "dom",
11 |       "dom.iterable",
12 |       "esnext",
13 |       "deno.ns"
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/deno.lock:
--------------------------------------------------------------------------------
  1 | {
  2 |   "version": "4",
  3 |   "specifiers": {
  4 |     "jsr:@core/unknownutil@4": "4.3.0",
  5 |     "jsr:@cosense/std@0.29": "0.29.1",
  6 |     "jsr:@cosense/types@0.10": "0.10.1",
  7 |     "jsr:@progfay/scrapbox-parser@9": "9.1.5",
  8 |     "jsr:@std/assert@*": "1.0.7",
  9 |     "jsr:@std/assert@^1.0.6": "1.0.7",
 10 |     "jsr:@std/async@1": "1.0.8",
 11 |     "jsr:@std/encoding@1": "1.0.5",
 12 |     "jsr:@std/fs@^1.0.4": "1.0.4",
 13 |     "jsr:@std/internal@^1.0.4": "1.0.5",
 14 |     "jsr:@std/internal@^1.0.5": "1.0.5",
 15 |     "jsr:@std/path@^1.0.6": "1.0.8",
 16 |     "jsr:@std/testing@*": "1.0.3",
 17 |     "jsr:@takker/md5@0.1": "0.1.0",
 18 |     "npm:esbuild@0.24": "0.24.0",
 19 |     "npm:esbuild@0.25": "0.25.0",
 20 |     "npm:immer@10": "10.1.1",
 21 |     "npm:option-t@50": "50.0.0",
 22 |     "npm:option-t@52": "52.0.2",
 23 |     "npm:option-t@^49.1.0": "49.3.0",
 24 |     "npm:preact@10": "10.25.2"
 25 |   },
 26 |   "jsr": {
 27 |     "@core/unknownutil@4.3.0": {
 28 |       "integrity": "538a3687ffa81028e91d148818047df219663d0da671d906cecd165581ae55cc"
 29 |     },
 30 |     "@cosense/std@0.29.1": {
 31 |       "integrity": "797c393fe9874079d42b18055c0c1b754e1d771f29c0dd2d21f9d8530b618ae6",
 32 |       "dependencies": [
 33 |         "jsr:@core/unknownutil",
 34 |         "jsr:@cosense/types",
 35 |         "jsr:@progfay/scrapbox-parser",
 36 |         "jsr:@std/async",
 37 |         "jsr:@std/encoding",
 38 |         "jsr:@takker/md5",
 39 |         "npm:option-t@^49.1.0"
 40 |       ]
 41 |     },
 42 |     "@cosense/types@0.10.1": {
 43 |       "integrity": "13d2488a02c7b0b035a265bc3299affbdab1ea5b607516379685965cd37b2058"
 44 |     },
 45 |     "@progfay/scrapbox-parser@9.1.5": {
 46 |       "integrity": "729a086b6675dd4a216875757c918c6bbea329d6e35e410516a16bbd6c468369"
 47 |     },
 48 |     "@std/assert@1.0.7": {
 49 |       "integrity": "64ce9fac879e0b9f3042a89b3c3f8ccfc9c984391af19e2087513a79d73e28c3",
 50 |       "dependencies": [
 51 |         "jsr:@std/internal@^1.0.5"
 52 |       ]
 53 |     },
 54 |     "@std/async@1.0.8": {
 55 |       "integrity": "c057c5211a0f1d12e7dcd111ab430091301b8d64b4250052a79d277383bc3ba7"
 56 |     },
 57 |     "@std/encoding@1.0.5": {
 58 |       "integrity": "ecf363d4fc25bd85bd915ff6733a7e79b67e0e7806334af15f4645c569fefc04"
 59 |     },
 60 |     "@std/fs@1.0.4": {
 61 |       "integrity": "2907d32d8d1d9e540588fd5fe0ec21ee638134bd51df327ad4e443aaef07123c",
 62 |       "dependencies": [
 63 |         "jsr:@std/path"
 64 |       ]
 65 |     },
 66 |     "@std/internal@1.0.5": {
 67 |       "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba"
 68 |     },
 69 |     "@std/path@1.0.8": {
 70 |       "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be"
 71 |     },
 72 |     "@std/testing@1.0.3": {
 73 |       "integrity": "f98c2bee53860a5916727d7e7d3abe920dd6f9edace022e2d059f00d05c2cf42",
 74 |       "dependencies": [
 75 |         "jsr:@std/assert@^1.0.6",
 76 |         "jsr:@std/fs",
 77 |         "jsr:@std/internal@^1.0.4",
 78 |         "jsr:@std/path"
 79 |       ]
 80 |     },
 81 |     "@takker/md5@0.1.0": {
 82 |       "integrity": "4c423d8247aadf7bcb1eb83c727bf28c05c21906e916517395d00aa157b6eae0"
 83 |     }
 84 |   },
 85 |   "npm": {
 86 |     "@esbuild/aix-ppc64@0.24.0": {
 87 |       "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw=="
 88 |     },
 89 |     "@esbuild/aix-ppc64@0.25.0": {
 90 |       "integrity": "sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ=="
 91 |     },
 92 |     "@esbuild/android-arm64@0.24.0": {
 93 |       "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w=="
 94 |     },
 95 |     "@esbuild/android-arm64@0.25.0": {
 96 |       "integrity": "sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g=="
 97 |     },
 98 |     "@esbuild/android-arm@0.24.0": {
 99 |       "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew=="
100 |     },
101 |     "@esbuild/android-arm@0.25.0": {
102 |       "integrity": "sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g=="
103 |     },
104 |     "@esbuild/android-x64@0.24.0": {
105 |       "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ=="
106 |     },
107 |     "@esbuild/android-x64@0.25.0": {
108 |       "integrity": "sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg=="
109 |     },
110 |     "@esbuild/darwin-arm64@0.24.0": {
111 |       "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw=="
112 |     },
113 |     "@esbuild/darwin-arm64@0.25.0": {
114 |       "integrity": "sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw=="
115 |     },
116 |     "@esbuild/darwin-x64@0.24.0": {
117 |       "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA=="
118 |     },
119 |     "@esbuild/darwin-x64@0.25.0": {
120 |       "integrity": "sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg=="
121 |     },
122 |     "@esbuild/freebsd-arm64@0.24.0": {
123 |       "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA=="
124 |     },
125 |     "@esbuild/freebsd-arm64@0.25.0": {
126 |       "integrity": "sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w=="
127 |     },
128 |     "@esbuild/freebsd-x64@0.24.0": {
129 |       "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ=="
130 |     },
131 |     "@esbuild/freebsd-x64@0.25.0": {
132 |       "integrity": "sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A=="
133 |     },
134 |     "@esbuild/linux-arm64@0.24.0": {
135 |       "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g=="
136 |     },
137 |     "@esbuild/linux-arm64@0.25.0": {
138 |       "integrity": "sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg=="
139 |     },
140 |     "@esbuild/linux-arm@0.24.0": {
141 |       "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw=="
142 |     },
143 |     "@esbuild/linux-arm@0.25.0": {
144 |       "integrity": "sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg=="
145 |     },
146 |     "@esbuild/linux-ia32@0.24.0": {
147 |       "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA=="
148 |     },
149 |     "@esbuild/linux-ia32@0.25.0": {
150 |       "integrity": "sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg=="
151 |     },
152 |     "@esbuild/linux-loong64@0.24.0": {
153 |       "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g=="
154 |     },
155 |     "@esbuild/linux-loong64@0.25.0": {
156 |       "integrity": "sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw=="
157 |     },
158 |     "@esbuild/linux-mips64el@0.24.0": {
159 |       "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA=="
160 |     },
161 |     "@esbuild/linux-mips64el@0.25.0": {
162 |       "integrity": "sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ=="
163 |     },
164 |     "@esbuild/linux-ppc64@0.24.0": {
165 |       "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ=="
166 |     },
167 |     "@esbuild/linux-ppc64@0.25.0": {
168 |       "integrity": "sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw=="
169 |     },
170 |     "@esbuild/linux-riscv64@0.24.0": {
171 |       "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw=="
172 |     },
173 |     "@esbuild/linux-riscv64@0.25.0": {
174 |       "integrity": "sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA=="
175 |     },
176 |     "@esbuild/linux-s390x@0.24.0": {
177 |       "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g=="
178 |     },
179 |     "@esbuild/linux-s390x@0.25.0": {
180 |       "integrity": "sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA=="
181 |     },
182 |     "@esbuild/linux-x64@0.24.0": {
183 |       "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA=="
184 |     },
185 |     "@esbuild/linux-x64@0.25.0": {
186 |       "integrity": "sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw=="
187 |     },
188 |     "@esbuild/netbsd-arm64@0.25.0": {
189 |       "integrity": "sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw=="
190 |     },
191 |     "@esbuild/netbsd-x64@0.24.0": {
192 |       "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg=="
193 |     },
194 |     "@esbuild/netbsd-x64@0.25.0": {
195 |       "integrity": "sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA=="
196 |     },
197 |     "@esbuild/openbsd-arm64@0.24.0": {
198 |       "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg=="
199 |     },
200 |     "@esbuild/openbsd-arm64@0.25.0": {
201 |       "integrity": "sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw=="
202 |     },
203 |     "@esbuild/openbsd-x64@0.24.0": {
204 |       "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q=="
205 |     },
206 |     "@esbuild/openbsd-x64@0.25.0": {
207 |       "integrity": "sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg=="
208 |     },
209 |     "@esbuild/sunos-x64@0.24.0": {
210 |       "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA=="
211 |     },
212 |     "@esbuild/sunos-x64@0.25.0": {
213 |       "integrity": "sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg=="
214 |     },
215 |     "@esbuild/win32-arm64@0.24.0": {
216 |       "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA=="
217 |     },
218 |     "@esbuild/win32-arm64@0.25.0": {
219 |       "integrity": "sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw=="
220 |     },
221 |     "@esbuild/win32-ia32@0.24.0": {
222 |       "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw=="
223 |     },
224 |     "@esbuild/win32-ia32@0.25.0": {
225 |       "integrity": "sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA=="
226 |     },
227 |     "@esbuild/win32-x64@0.24.0": {
228 |       "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA=="
229 |     },
230 |     "@esbuild/win32-x64@0.25.0": {
231 |       "integrity": "sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ=="
232 |     },
233 |     "esbuild@0.24.0": {
234 |       "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
235 |       "dependencies": [
236 |         "@esbuild/aix-ppc64@0.24.0",
237 |         "@esbuild/android-arm@0.24.0",
238 |         "@esbuild/android-arm64@0.24.0",
239 |         "@esbuild/android-x64@0.24.0",
240 |         "@esbuild/darwin-arm64@0.24.0",
241 |         "@esbuild/darwin-x64@0.24.0",
242 |         "@esbuild/freebsd-arm64@0.24.0",
243 |         "@esbuild/freebsd-x64@0.24.0",
244 |         "@esbuild/linux-arm@0.24.0",
245 |         "@esbuild/linux-arm64@0.24.0",
246 |         "@esbuild/linux-ia32@0.24.0",
247 |         "@esbuild/linux-loong64@0.24.0",
248 |         "@esbuild/linux-mips64el@0.24.0",
249 |         "@esbuild/linux-ppc64@0.24.0",
250 |         "@esbuild/linux-riscv64@0.24.0",
251 |         "@esbuild/linux-s390x@0.24.0",
252 |         "@esbuild/linux-x64@0.24.0",
253 |         "@esbuild/netbsd-x64@0.24.0",
254 |         "@esbuild/openbsd-arm64@0.24.0",
255 |         "@esbuild/openbsd-x64@0.24.0",
256 |         "@esbuild/sunos-x64@0.24.0",
257 |         "@esbuild/win32-arm64@0.24.0",
258 |         "@esbuild/win32-ia32@0.24.0",
259 |         "@esbuild/win32-x64@0.24.0"
260 |       ]
261 |     },
262 |     "esbuild@0.25.0": {
263 |       "integrity": "sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==",
264 |       "dependencies": [
265 |         "@esbuild/aix-ppc64@0.25.0",
266 |         "@esbuild/android-arm@0.25.0",
267 |         "@esbuild/android-arm64@0.25.0",
268 |         "@esbuild/android-x64@0.25.0",
269 |         "@esbuild/darwin-arm64@0.25.0",
270 |         "@esbuild/darwin-x64@0.25.0",
271 |         "@esbuild/freebsd-arm64@0.25.0",
272 |         "@esbuild/freebsd-x64@0.25.0",
273 |         "@esbuild/linux-arm@0.25.0",
274 |         "@esbuild/linux-arm64@0.25.0",
275 |         "@esbuild/linux-ia32@0.25.0",
276 |         "@esbuild/linux-loong64@0.25.0",
277 |         "@esbuild/linux-mips64el@0.25.0",
278 |         "@esbuild/linux-ppc64@0.25.0",
279 |         "@esbuild/linux-riscv64@0.25.0",
280 |         "@esbuild/linux-s390x@0.25.0",
281 |         "@esbuild/linux-x64@0.25.0",
282 |         "@esbuild/netbsd-arm64",
283 |         "@esbuild/netbsd-x64@0.25.0",
284 |         "@esbuild/openbsd-arm64@0.25.0",
285 |         "@esbuild/openbsd-x64@0.25.0",
286 |         "@esbuild/sunos-x64@0.25.0",
287 |         "@esbuild/win32-arm64@0.25.0",
288 |         "@esbuild/win32-ia32@0.25.0",
289 |         "@esbuild/win32-x64@0.25.0"
290 |       ]
291 |     },
292 |     "immer@10.1.1": {
293 |       "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw=="
294 |     },
295 |     "option-t@49.3.0": {
296 |       "integrity": "sha512-MQFSbqNnjEzQahREx7r1tESmK2UctFK+zmwmnHpBHROJvoRGM9tDMWi53B6ePyFJyAiggRRV9cuXedkpLBeC8w=="
297 |     },
298 |     "option-t@50.0.0": {
299 |       "integrity": "sha512-zHw9Et+SfAx3Xtl9LagyAjyyzC3pNONEinTAOmZN2IKL0dYa6dthjzwuSRueJ2gLkaTiinQjRDGo/1mKSl70hg=="
300 |     },
301 |     "option-t@52.0.2": {
302 |       "integrity": "sha512-/TlE8IVqiXtux97eZDWab5tPQVnl3xefE+36A1UfNDyKzD7zvqWtsZ8pJl4RYsP1pS0ttaimwdzBhGGxvdu50A=="
303 |     },
304 |     "preact@10.25.2": {
305 |       "integrity": "sha512-GEts1EH3oMnqdOIeXhlbBSddZ9nrINd070WBOiPO2ous1orrKGUM4SMDbwyjSWD1iMS2dBvaDjAa5qUhz3TXqw=="
306 |     }
307 |   }
308 | }
309 | 


--------------------------------------------------------------------------------
/deps/async.ts:
--------------------------------------------------------------------------------
1 | export * from "jsr:@std/async@1/delay";
2 | 


--------------------------------------------------------------------------------
/deps/esbuild.ts:
--------------------------------------------------------------------------------
1 | export * from "npm:esbuild@0.25";
2 | 


--------------------------------------------------------------------------------
/deps/immer.ts:
--------------------------------------------------------------------------------
1 | import { enableMapSet } from "npm:immer@10";
2 | enableMapSet();
3 | 
4 | export * from "npm:immer@10";
5 | 


--------------------------------------------------------------------------------
/deps/option-t.ts:
--------------------------------------------------------------------------------
1 | export * from "npm:option-t@53/plain_result";
2 | 


--------------------------------------------------------------------------------
/deps/preact.tsx:
--------------------------------------------------------------------------------
 1 | export {
 2 |   type ComponentChildren,
 3 |   createContext,
 4 |   Fragment,
 5 |   type FunctionComponent,
 6 |   h,
 7 |   type RefCallback,
 8 |   render,
 9 |   toChildArray,
10 | } from "npm:preact@10";
11 | export * from "npm:preact@10/hooks";
12 | 


--------------------------------------------------------------------------------
/deps/scrapbox-parser.ts:
--------------------------------------------------------------------------------
1 | export * from "jsr:@progfay/scrapbox-parser@10";
2 | 


--------------------------------------------------------------------------------
/deps/scrapbox-std-browser.ts:
--------------------------------------------------------------------------------
1 | export * from "jsr:@cosense/std@0.29/browser/dom";
2 | 


--------------------------------------------------------------------------------
/deps/scrapbox-std.ts:
--------------------------------------------------------------------------------
1 | export * from "jsr:@cosense/std@0.29/rest";
2 | export * from "jsr:@cosense/std@0.29/title";
3 | export * from "jsr:@cosense/std@0.29/parseAbsoluteLink";
4 | 


--------------------------------------------------------------------------------
/deps/scrapbox.ts:
--------------------------------------------------------------------------------
  1 | export type {
  2 |   BaseLine as Line,
  3 |   MemberProject,
  4 |   NotFoundError,
  5 |   NotLoggedInError,
  6 |   NotMemberError,
  7 |   NotMemberProject,
  8 |   Page,
  9 |   ProjectId,
 10 |   ProjectRelatedPage,
 11 |   RelatedPage,
 12 |   StringLc,
 13 |   UnixTime,
 14 | } from "jsr:@cosense/types@0.10/rest";
 15 | export type { Scrapbox } from "jsr:@cosense/types@0.10/userscript";
 16 | 
 17 | import type { ErrorLike } from "jsr:@cosense/types@0.10/rest";
 18 | 
 19 | // cf. https://blog.uhy.ooo/entry/2021-04-09/typescript-is-any-as/#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%AE%9A%E7%BE%A9%E5%9E%8B%E3%82%AC%E3%83%BC%E3%83%89%E3%81%AE%E5%BC%95%E6%95%B0%E3%81%AE%E5%9E%8B%E3%82%92%E3%81%A9%E3%81%86%E3%81%99%E3%82%8B%E3%81%8B
 20 | function isNotNullish(data: unknown): data is Record<string, unknown> {
 21 |   return data != null;
 22 | }
 23 | export function isScrapboxError(e: unknown): e is ErrorLike {
 24 |   try {
 25 |     const json = typeof e === "string" ? JSON.parse(e) : e;
 26 |     if (!isNotNullish(json)) return false;
 27 |     return typeof json.name === "string" && typeof json.message === "string";
 28 |   } catch (e2: unknown) {
 29 |     if (e2 instanceof SyntaxError) return false;
 30 |     throw e2;
 31 |   }
 32 | }
 33 | 
 34 | import { MakeTuple } from "../type-traits.ts";
 35 | const defaults = [
 36 |   "default-light",
 37 |   "default-dark",
 38 |   "default-minimal",
 39 | ] as const;
 40 | const papers = [
 41 |   "paper-light",
 42 |   "paper-dark-dark",
 43 |   "paper-dark",
 44 | ] as const;
 45 | const stationaries = [
 46 |   "blue",
 47 |   "purple",
 48 |   "green",
 49 |   "orange",
 50 |   "red",
 51 | ] as const;
 52 | const hackers = [
 53 |   "hacker1",
 54 |   "hacker2",
 55 | ] as const;
 56 | const seasons = [
 57 |   "winter",
 58 |   "spring",
 59 |   "summer",
 60 |   "automn",
 61 | ] as const;
 62 | const tropicals = [
 63 |   "tropical",
 64 | ] as const;
 65 | const cities = [
 66 |   "kyoto",
 67 |   "newyork",
 68 |   "paris",
 69 | ] as const;
 70 | const games = [
 71 |   "mred",
 72 |   "lgreen",
 73 | ] as const;
 74 | const lightThemes = [
 75 |   "default-light",
 76 |   "default-minimal",
 77 |   "paper-light",
 78 |   ...stationaries,
 79 |   ...seasons,
 80 |   ...tropicals,
 81 |   ...cities,
 82 |   ...games,
 83 | ] as const;
 84 | export type LightTheme = typeof lightThemes[number];
 85 | export function isLightTheme(theme: string): theme is LightTheme {
 86 |   return (lightThemes as MakeTuple<string, 18>).includes(theme);
 87 | }
 88 | const darkThemes = [
 89 |   "default-dark",
 90 |   "paper-dark-dark",
 91 | ] as const;
 92 | export type DarkTheme = typeof darkThemes[number];
 93 | export function isDarkTheme(theme: string): theme is DarkTheme {
 94 |   return (darkThemes as MakeTuple<string, 2>).includes(theme);
 95 | }
 96 | const themes = [
 97 |   ...defaults,
 98 |   ...papers,
 99 |   ...stationaries,
100 |   ...hackers,
101 |   ...seasons,
102 |   ...tropicals,
103 |   ...cities,
104 |   ...games,
105 | ] as const;
106 | export type Theme = typeof themes[number];
107 | export function isTheme(theme: string): theme is Theme {
108 |   return (themes as MakeTuple<string, 23>).includes(theme);
109 | }
110 | 


--------------------------------------------------------------------------------
/deps/testing.ts:
--------------------------------------------------------------------------------
1 | export * from "jsr:@std/assert";
2 | export * from "jsr:@std/testing/snapshot";
3 | 


--------------------------------------------------------------------------------
/detectURL.test.ts:
--------------------------------------------------------------------------------
  1 | import { detectURL } from "./detectURL.ts";
  2 | import { assert, assertEquals } from "./deps/testing.ts";
  3 | 
  4 | Deno.test("Absolute Path", async (t) => {
  5 |   {
  6 |     const text = "https://example.com/test.css";
  7 |     await t.step(text, () => {
  8 |       const url = detectURL(text);
  9 |       assert(url instanceof URL);
 10 |       if (url instanceof URL) assertEquals(url.href, text);
 11 |     });
 12 |   }
 13 |   {
 14 |     const text = ".div { display: block; }";
 15 |     await t.step(text, () => {
 16 |       const url = detectURL(text);
 17 |       assert(!(url instanceof URL));
 18 |       assertEquals(url, text);
 19 |     });
 20 |   }
 21 |   {
 22 |     const text = "./test.css";
 23 |     await t.step(text, () => {
 24 |       const url = detectURL(text);
 25 |       assert(!(url instanceof URL));
 26 |       assertEquals(url, text);
 27 |     });
 28 |   }
 29 | });
 30 | Deno.test("Relative Path", async (t) => {
 31 |   const base = "https://example.com/foo/bar/baz";
 32 |   {
 33 |     const text = "https://example.com/test.css";
 34 |     await t.step(text, () => {
 35 |       const url = detectURL(text, base);
 36 |       assert(url instanceof URL);
 37 |       if (url instanceof URL) assertEquals(url.href, text);
 38 |     });
 39 |   }
 40 |   {
 41 |     const text = ".div { display: block; }";
 42 |     await t.step(text, () => {
 43 |       const url = detectURL(text, base);
 44 |       assert(!(url instanceof URL));
 45 |       assertEquals(url, text);
 46 |     });
 47 |   }
 48 |   {
 49 |     const text = "#editor { display: block; }";
 50 |     await t.step(text, () => {
 51 |       const url = detectURL(text, base);
 52 |       assert(!(url instanceof URL));
 53 |       assertEquals(url, text);
 54 |     });
 55 |   }
 56 |   {
 57 |     const text = "#editor { background: url('../../image.png'); }";
 58 |     await t.step(text, () => {
 59 |       const url = detectURL(text, base);
 60 |       assert(!(url instanceof URL));
 61 |       assertEquals(url, text);
 62 |     });
 63 |   }
 64 |   {
 65 |     const text = "#editor { background: url('./image.png'); }";
 66 |     await t.step(text, () => {
 67 |       const url = detectURL(text, base);
 68 |       assert(!(url instanceof URL));
 69 |       assertEquals(url, text);
 70 |     });
 71 |   }
 72 |   {
 73 |     const text = "#editor { background: url('/image.png'); }";
 74 |     await t.step(text, () => {
 75 |       const url = detectURL(text, base);
 76 |       assert(!(url instanceof URL));
 77 |       assertEquals(url, text);
 78 |     });
 79 |   }
 80 |   {
 81 |     const text = "./test.css";
 82 |     await t.step(text, () => {
 83 |       const url = detectURL(text, base);
 84 |       assert(url instanceof URL);
 85 |       assertEquals(url.href, "https://example.com/foo/bar/test.css");
 86 |     });
 87 |   }
 88 |   {
 89 |     const text = "../test.css";
 90 |     await t.step(text, () => {
 91 |       const url = detectURL(text, base);
 92 |       assert(url instanceof URL);
 93 |       assertEquals(url.href, "https://example.com/foo/test.css");
 94 |     });
 95 |   }
 96 |   {
 97 |     const text = "../../hoge/test.css";
 98 |     await t.step(text, () => {
 99 |       const url = detectURL(text, base);
100 |       assert(url instanceof URL);
101 |       assertEquals(url.href, "https://example.com/hoge/test.css");
102 |     });
103 |   }
104 |   {
105 |     const text = "/test.css";
106 |     await t.step(text, () => {
107 |       const url = detectURL(text, base);
108 |       assert(url instanceof URL);
109 |       assertEquals(url.href, "https://example.com/test.css");
110 |     });
111 |   }
112 |   {
113 |     const text = "//test.com/test.css";
114 |     await t.step(text, () => {
115 |       const url = detectURL(text, base);
116 |       assert(url instanceof URL);
117 |       assertEquals(url.href, "https://test.com/test.css");
118 |     });
119 |   }
120 | });
121 | 


--------------------------------------------------------------------------------
/detectURL.ts:
--------------------------------------------------------------------------------
 1 | /** URL文字列をURLに変換する*/
 2 | export const detectURL = (
 3 |   text: URL | string,
 4 |   base?: URL | string,
 5 | ): URL | string => {
 6 |   if (text instanceof URL) return text;
 7 |   try {
 8 |     return new URL(text);
 9 |   } catch (e: unknown) {
10 |     if (!(e instanceof TypeError)) throw e;
11 |     if (!base) return text;
12 |     // 相対パスへの変換を試みる
13 |     // ./や../や/で始まらない文字列は、相対パス扱いしない
14 |     if (!/^\.\/|^\.\.\/|^\//.test(text)) return text;
15 |     try {
16 |       return new URL(text, base);
17 |     } catch (e: unknown) {
18 |       if (!(e instanceof TypeError)) throw e;
19 |       return text;
20 |     }
21 |   }
22 | };
23 | 


--------------------------------------------------------------------------------
/eventEmitter.ts:
--------------------------------------------------------------------------------
 1 | export type Listener<T> = (event: T) => void;
 2 | 
 3 | export interface EventEmitter<T, U> {
 4 |   /** eventを発行する */
 5 |   dispatch: (eventName: T, value: U) => void;
 6 | 
 7 |   /** 特定のeventが発火したときに実行するlistenerを登録する */
 8 |   on: (eventName: T, listener: Listener<U>) => void;
 9 | 
10 |   /** listenerの登録を解除する */
11 |   off: (eventName: T, listener: Listener<U>) => void;
12 | }
13 | 
14 | export const makeEmitter = <T, U>(): EventEmitter<T, U> => {
15 |   const listenersMap = new Map<T, Set<Listener<U>>>();
16 | 
17 |   return {
18 |     dispatch: (eventName, value) => {
19 |       const listeners = listenersMap.get(eventName);
20 |       if (!listeners) return;
21 |       for (const listener of listeners) {
22 |         listener(value);
23 |       }
24 |     },
25 |     on: (eventName, listener) => {
26 |       const listeners = listenersMap.get(eventName) ?? new Set<Listener<U>>();
27 |       listeners.add(listener);
28 |       listenersMap.set(eventName, listeners);
29 |     },
30 |     off: (eventName, listener) => {
31 |       const listeners = listenersMap.get(eventName);
32 |       if (!listeners) return;
33 |       listeners.delete(listener);
34 |     },
35 |   };
36 | };
37 | 


--------------------------------------------------------------------------------
/global.css:
--------------------------------------------------------------------------------
1 | * {
2 |   box-sizing: border-box;
3 | }
4 | 


--------------------------------------------------------------------------------
/hasLink.test.ts:
--------------------------------------------------------------------------------
 1 | import { parse } from "./deps/scrapbox-parser.ts";
 2 | import { hasLink } from "./hasLink.ts";
 3 | import { LinkTo } from "./types.ts";
 4 | import { assertEquals } from "./deps/testing.ts";
 5 | 
 6 | Deno.test("hasLink()", async (t) => {
 7 |   const text = `
 8 |   サンプルテキスト
 9 |   \`[これはリンクではない]\`けど、[こっち]はリンク
10 |   [scrapbox]
11 |   code:js
12 |    これも[リンク]にはならない
13 |   #hashtag も検知できるはず
14 |   [大文字Aと小文字a]が入り混じっていてもいい
15 |   table:teset
16 |     [link in table]
17 |   [/project/external link]
18 |   `;
19 |   const nodes = parse(text).flatMap((block) => {
20 |     switch (block.type) {
21 |       case "codeBlock":
22 |       case "title":
23 |         return [];
24 |       case "table":
25 |         return block.cells.flat().flat();
26 |       case "line":
27 |         return block.nodes;
28 |     }
29 |   });
30 | 
31 |   const links = [
32 |     [{ titleLc: "こっち" }, true],
33 |     [{ titleLc: "Scrapbox" }, false],
34 |     [{ titleLc: "scrapbox" }, true],
35 |     [
36 |       { titleLc: "これはリンクではない" },
37 |       false,
38 |     ],
39 |     [{ titleLc: "HashTag" }, false],
40 |     [{ titleLc: "hashtag" }, true],
41 |     [{ titleLc: "大文字aと小文字a" }, true],
42 |     [{ titleLc: "link_in_table" }, true],
43 |     [{ titleLc: "/project/external link" }, false],
44 |     [{ project: "project", titleLc: "external link" }, false],
45 |     [{ project: "project", titleLc: "external_link" }, true],
46 |   ] as [LinkTo, boolean][];
47 |   for (const [link, result] of links) {
48 |     await t.step(
49 |       `the text ${result ? "has" : "doesn't have"} ${
50 |         !("project" in link) ? link.titleLc : `/${link.project}/${link.titleLc}`
51 |       }`,
52 |       () => {
53 |         assertEquals(hasLink(link, nodes), result);
54 |       },
55 |     );
56 |   }
57 | });
58 | 


--------------------------------------------------------------------------------
/hasLink.ts:
--------------------------------------------------------------------------------
 1 | import { Node } from "./deps/scrapbox-parser.ts";
 2 | import { parseLink } from "./parseLink.ts";
 3 | import { LinkTo } from "./types.ts";
 4 | import { toTitleLc } from "./deps/scrapbox-std.ts";
 5 | 
 6 | /** 指定したリンクがScrapboxのページ中に存在するか調べる
 7 |  *
 8 |  * @param link 調べたいリンクのタイトル
 9 |  * @param nodes ページの構文解析結果
10 |  * @return 見つかったら`true`
11 |  */
12 | export const hasLink = (
13 |   link: LinkTo,
14 |   nodes: Node[],
15 | ): boolean =>
16 |   nodes.some((node) => {
17 |     const isRelative = !link.project;
18 |     switch (node.type) {
19 |       case "hashTag":
20 |         return isRelative &&
21 |           toTitleLc(node.href) === link.titleLc;
22 |       case "link": {
23 |         if (node.pathType == "absolute") return false;
24 |         if ((node.pathType === "relative") !== isRelative) return false;
25 | 
26 |         const { project, title = "" } = parseLink({
27 |           pathType: node.pathType,
28 |           href: node.href,
29 |         });
30 |         return isRelative
31 |           ? !project && toTitleLc(title) === link.titleLc
32 |           : project === link.project &&
33 |             toTitleLc(title) === link.titleLc;
34 |       }
35 |       case "quote":
36 |       case "strong":
37 |       case "decoration":
38 |         return hasLink(link, node.nodes);
39 |     }
40 |   });
41 | 


--------------------------------------------------------------------------------
/id.test.ts:
--------------------------------------------------------------------------------
 1 | import { fromId, toId } from "./id.ts";
 2 | import { assertEquals } from "./deps/testing.ts";
 3 | 
 4 | Deno.test("toId()", () => {
 5 |   assertEquals(toId("project", "Page A"), "/project/page_a");
 6 |   assertEquals(
 7 |     toId("Upper-Letter-Project", "Page A"),
 8 |     "/upper-letter-project/page_a",
 9 |   );
10 | });
11 | Deno.test("fromId()", () => {
12 |   assertEquals(fromId("/project/page_a"), {
13 |     project: "project",
14 |     titleLc: "page_a",
15 |   });
16 |   assertEquals(fromId("/project-test/page_a"), {
17 |     project: "project-test",
18 |     titleLc: "page_a",
19 |   });
20 |   assertEquals(fromId("/project/prefix/page_a"), {
21 |     project: "project",
22 |     titleLc: "prefix/page_a",
23 |   });
24 |   assertEquals(fromId("/project/Page A"), {
25 |     project: "project",
26 |     titleLc: "Page A",
27 |   });
28 |   assertEquals(fromId("/upper-letter-project/Page A"), {
29 |     project: "upper-letter-project",
30 |     titleLc: "Page A",
31 |   });
32 | });
33 | 


--------------------------------------------------------------------------------
/id.ts:
--------------------------------------------------------------------------------
 1 | import { toTitleLc } from "./deps/scrapbox-std.ts";
 2 | 
 3 | export type ID = `/${string}/${string}`;
 4 | /** 同一ページか判定するためのIDを作る */
 5 | export const toId = (project: string, title: string): ID =>
 6 |   `/${project.toLowerCase()}/${toTitleLc(title)}`;
 7 | 
 8 | /** IDからリンク情報を復元する */
 9 | export const fromId = (id: ID): { project: string; titleLc: string } => {
10 |   const matches = id.match(`/([^\/]+)/(.+)`);
11 |   if (!matches) throw SyntaxError(`"${id}" cannnot match "/([^\/]+)/(.+)"`);
12 |   return {
13 |     project: matches[1],
14 |     titleLc: matches[2],
15 |   };
16 | };
17 | 


--------------------------------------------------------------------------------
/is.ts:
--------------------------------------------------------------------------------
 1 | /** 編集画面のタイトル行のDOMかどうか判定する */
 2 | export const isTitle = (
 3 |   element: HTMLElement,
 4 | ): element is HTMLSpanElement =>
 5 |   element instanceof HTMLSpanElement &&
 6 |   element.matches(".line-title .text");
 7 | 
 8 | /** scrapbox内のリンクかどうか判定する */
 9 | export const isPageLink = (
10 |   element: HTMLElement,
11 | ): element is HTMLAnchorElement =>
12 |   element instanceof HTMLAnchorElement &&
13 |   element.classList.contains("page-link");
14 | 
15 | /** 指定したtemplate literal stringかどうか判定する */
16 | export const isLiteralStrings = <S extends readonly string[]>(
17 |   value: string | undefined,
18 |   ...literals: S
19 | ): value is S[number] => value !== undefined && literals.includes(value);
20 | 


--------------------------------------------------------------------------------
/katex.ts:
--------------------------------------------------------------------------------
  1 | // based on https://github.com/DefinitelyTyped/DefinitelyTyped/blob/27b08d3078064f2ca3b1e192ee231396107fafeb/types/katex/index.d.ts
  2 | // Modifications:
  3 | // - $deno fmt
  4 | // - macros?: any -> macros?: unknown
  5 | // - add deno-lint-ignore
  6 | 
  7 | export interface TrustContext {
  8 |   command: string;
  9 |   url: string;
 10 |   protocol: string;
 11 | }
 12 | 
 13 | /** Documentation: https://katex.org/docs/options.html */
 14 | export interface KatexOptions {
 15 |   /**
 16 |    * If `true`, math will be rendered in display mode
 17 |    * (math in display style and center math on page)
 18 |    *
 19 |    * If `false`, math will be rendered in inline mode
 20 |    * @default false
 21 |    */
 22 |   displayMode?: boolean | undefined;
 23 |   /**
 24 |    * Determines the markup language of the output. The valid choices are:
 25 |    * - `html`: Outputs KaTeX in HTML only.
 26 |    * - `mathml`: Outputs KaTeX in MathML only.
 27 |    * - `htmlAndMathml`: Outputs HTML for visual rendering
 28 |    *   and includes MathML for accessibility.
 29 |    *
 30 |    * @default 'htmlAndMathml'
 31 |    */
 32 |   output?: "html" | "mathml" | "htmlAndMathml" | undefined;
 33 |   /**
 34 |    * If `true`, display math has \tags rendered on the left
 35 |    * instead of the right, like \usepackage[leqno]{amsmath} in LaTeX.
 36 |    *
 37 |    * @default false
 38 |    */
 39 |   leqno?: boolean | undefined;
 40 |   /**
 41 |    * If `true`, display math renders flush left with a 2em left margin,
 42 |    * like \documentclass[fleqn] in LaTeX with the amsmath package.
 43 |    *
 44 |    * @default false
 45 |    */
 46 |   fleqn?: boolean | undefined;
 47 |   /**
 48 |    * If `true`, KaTeX will throw a `ParseError` when
 49 |    * it encounters an unsupported command or invalid LaTex
 50 |    *
 51 |    * If `false`, KaTeX will render unsupported commands as
 52 |    * text, and render invalid LaTeX as its source code with
 53 |    * hover text giving the error, in color given by errorColor
 54 |    * @default true
 55 |    */
 56 |   throwOnError?: boolean | undefined;
 57 |   /**
 58 |    * A Color string given in format `#XXX` or `#XXXXXX`
 59 |    */
 60 |   errorColor?: string | undefined;
 61 |   /**
 62 |    * A collection of custom macros.
 63 |    *
 64 |    * See `src/macros.js` for its usage
 65 |    */
 66 |   macros?: unknown;
 67 |   /**
 68 |    * Specifies a minimum thickness, in ems, for fraction lines,
 69 |    * \sqrt top lines, {array} vertical lines, \hline, \hdashline,
 70 |    * \underline, \overline, and the borders of \fbox, \boxed, and
 71 |    * \fcolorbox.
 72 |    */
 73 |   minRuleThickness?: number | undefined;
 74 |   /**
 75 |    * If `true`, `\color` will work like LaTeX's `\textcolor`
 76 |    * and takes 2 arguments
 77 |    *
 78 |    * If `false`, `\color` will work like LaTeX's `\color`
 79 |    * and takes 1 argument
 80 |    *
 81 |    * In both cases, `\textcolor` works as in LaTeX
 82 |    *
 83 |    * @default false
 84 |    */
 85 |   colorIsTextColor?: boolean | undefined;
 86 |   /**
 87 |    * All user-specified sizes will be caped to `maxSize` ems
 88 |    *
 89 |    * If set to Infinity, users can make elements and space
 90 |    * arbitrarily large
 91 |    *
 92 |    * @default Infinity
 93 |    */
 94 |   maxSize?: number | undefined;
 95 |   /**
 96 |    * Limit the number of macro expansions to specified number
 97 |    *
 98 |    * If set to `Infinity`, marco expander will try to fully expand
 99 |    * as in LaTex
100 |    *
101 |    * @default 1000
102 |    */
103 |   maxExpand?: number | undefined;
104 |   /**
105 |    * If `false` or `"ignore"`, allow features that make
106 |    * writing in LaTex convenient but not supported by LaTex
107 |    *
108 |    * If `true` or `"error"`, throw an error for such transgressions
109 |    *
110 |    * If `"warn"`, warn about behavior via `console.warn`
111 |    *
112 |    * @default "warn"
113 |    */
114 |   // deno-lint-ignore ban-types
115 |   strict?: boolean | string | Function | undefined;
116 |   /**
117 |    * If `false` (do not trust input), prevent any commands that could enable adverse behavior, rendering them instead in errorColor.
118 |    *
119 |    * If `true` (trust input), allow all such commands.
120 |    *
121 |    * @default false
122 |    */
123 |   trust?: boolean | ((context: TrustContext) => boolean) | undefined;
124 |   /**
125 |    * Place KaTeX code in the global group.
126 |    *
127 |    * @default false
128 |    */
129 |   globalGroup?: boolean | undefined;
130 | }
131 | 
132 | export interface Katex {
133 |   /**
134 |    * Renders a TeX expression into the specified DOM element
135 |    * @param tex A TeX expression
136 |    * @param element The DOM element to render into
137 |    * @param options KaTeX options
138 |    */
139 |   render(
140 |     tex: string,
141 |     element: HTMLElement,
142 |     options?: KatexOptions,
143 |   ): void;
144 |   /**
145 |    * Renders a TeX expression into an HTML string
146 |    * @param tex A TeX expression
147 |    * @param options KaTeX options
148 |    */
149 |   renderToString(
150 |     tex: string,
151 |     options?: KatexOptions,
152 |   ): string;
153 | }
154 | 
155 | declare global {
156 |   interface Window {
157 |     katex: Katex;
158 |   }
159 | }
160 | 
161 | // deno-lint-ignore no-namespace
162 | export namespace katex {
163 |   export declare class ParseError implements Error {
164 |     // deno-lint-ignore no-explicit-any
165 |     constructor(message: string, lexer: any, position: number);
166 |     name: string;
167 |     message: string;
168 |     position: number;
169 |   }
170 | }
171 | 
172 | // This is an original code below
173 | const defaultVersion = "0.13.3";
174 | let initialized: Promise<Katex> | undefined;
175 | let error: string | Event | undefined;
176 | export const importKaTeX = (
177 |   version = defaultVersion,
178 | ): Promise<Katex> => {
179 |   const url =
180 |     `https://cdnjs.cloudflare.com/ajax/libs/KaTeX/${version}/katex.min.js`;
181 | 
182 |   if (error) throw error;
183 |   if (!document.querySelector(`script[src="${url}"]`)) {
184 |     const script = document.createElement("script");
185 |     script.src = url;
186 |     initialized = new Promise<Katex>((resolve, reject) => {
187 |       // deno-lint-ignore no-window
188 |       script.onload = () => resolve(window.katex);
189 |       script.onerror = (e) => {
190 |         error = e;
191 |         reject(e);
192 |       };
193 |       document.head.append(script);
194 |     });
195 |   }
196 |   if (initialized) return initialized;
197 | 
198 |   return new Promise((resolve) => {
199 |     const id = setInterval(() => {
200 |       // deno-lint-ignore no-window
201 |       if (!window.katex) return;
202 |       clearInterval(id);
203 |       // deno-lint-ignore no-window
204 |       resolve(window.katex);
205 |     }, 500);
206 |   });
207 | };
208 | 
209 | export { defaultVersion as version };
210 | 


--------------------------------------------------------------------------------
/mod.tsx:
--------------------------------------------------------------------------------
 1 | /** @jsxRuntime automatic */
 2 | /** @jsxImportSource npm:preact@10 */
 3 | import { render } from "./deps/preact.tsx";
 4 | import { getWatchList } from "./watchList.ts";
 5 | import { App, AppProps, userscriptName } from "./App.tsx";
 6 | import { setDebugMode } from "./debug.ts";
 7 | import type { ProjectId, Scrapbox } from "./deps/scrapbox.ts";
 8 | declare const scrapbox: Scrapbox;
 9 | 
10 | export type { AppProps };
11 | export interface MountInit
12 |   extends Partial<Omit<AppProps, "whiteList" | "watchList">> {
13 |   /** debug用有効化フラグ */
14 |   debug?: boolean | Iterable<string>;
15 | 
16 |   /** 透過的に扱うprojectのリスト */
17 |   whiteList?: Iterable<string>;
18 | 
19 |   /** watch list */
20 |   watchList?: Iterable<ProjectId>;
21 | }
22 | 
23 | export const mount = async (init?: MountInit): Promise<void> => {
24 |   const {
25 |     delay = 500,
26 |     whiteList = [],
27 |     watchList = (await getWatchList()).slice(0, 100),
28 |     style = "",
29 |     debug = false,
30 |   } = init ?? {};
31 | 
32 |   setDebugMode(debug);
33 |   const app = document.createElement("div");
34 |   app.dataset.userscriptName = userscriptName;
35 |   document.body.append(app);
36 |   const shadowRoot = app.attachShadow({ mode: "open" });
37 |   render(
38 |     <App
39 |       delay={delay}
40 |       whiteList={new Set([scrapbox.Project.name, ...whiteList])}
41 |       watchList={new Set(watchList)}
42 |       style={style}
43 |     />,
44 |     shadowRoot,
45 |   );
46 | };
47 | 


--------------------------------------------------------------------------------
/page.css:
--------------------------------------------------------------------------------
  1 | a {
  2 |   background-color: transparent;
  3 |   text-decoration: none;
  4 |   cursor: pointer;
  5 | }
  6 | img {
  7 |   display: inline-block;
  8 |   max-width: 100%;
  9 |   max-height: 100px;
 10 | }
 11 | code {
 12 |   font-family: var(
 13 |     --code-text-font,
 14 |     Menlo,
 15 |     Monaco,
 16 |     Consolas,
 17 |     "Courier New",
 18 |     monospace
 19 |   );
 20 |   font-size: 90%;
 21 |   color: var(--code-color, #342d9c);
 22 |   background-color: var(--code-bg, rgba(0, 0, 0, 0.04));
 23 |   padding: 0;
 24 |   white-space: pre-wrap;
 25 |   word-wrap: break-word;
 26 | }
 27 | blockquote {
 28 |   background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
 29 |   display: block;
 30 |   border-left: solid 4px #a0a0a0;
 31 |   padding-left: 4px;
 32 |   margin: 0px;
 33 | }
 34 | strong {
 35 |   font-weight: bold;
 36 | }
 37 | iframe {
 38 |   display: inline-block;
 39 |   margin: 3px 0;
 40 |   vertical-align: middle;
 41 |   max-width: 100%;
 42 |   width: 640px;
 43 |   height: 360px;
 44 |   border: 0;
 45 | }
 46 | audio {
 47 |   display: inline-block;
 48 |   vertical-align: middle;
 49 |   white-space: initial;
 50 |   max-width: 100%;
 51 | }
 52 | 
 53 | .formula {
 54 |   margin: auto 6px;
 55 | }
 56 | .formula.error code {
 57 |   color: #fd7373;
 58 | }
 59 | .katex-display {
 60 |   display: inline-block !important;
 61 |   margin: 0 !important;
 62 |   text-align: inherit !important;
 63 | }
 64 | .error .katex-display {
 65 |   display: none;
 66 | }
 67 | .cli {
 68 |   border-radius: 4px;
 69 | }
 70 | .cli .prefix {
 71 |   color: #9c6248;
 72 | }
 73 | .helpfeel {
 74 |   background-color: #fbebdd;
 75 |   border-radius: 4px;
 76 |   padding: 3px !important;
 77 | }
 78 | .helpfeel .prefix {
 79 |   color: #f17c00;
 80 | }
 81 | .helpfeel .entry {
 82 |   color: #cc5020;
 83 | }
 84 | 
 85 | .code-block {
 86 |   display: block;
 87 |   line-height: 1.7em;
 88 |   background-color: var(--code-bg, rgba(0, 0, 0, 0.04));
 89 | }
 90 | .code-block-start {
 91 |   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 92 |   color: #342d9c;
 93 |   background-color: #ffcfc6;
 94 |   font-size: 0.9em;
 95 |   padding: 1px 2px;
 96 | }
 97 | .code-block-start a {
 98 |   color: #342d9c;
 99 |   text-decoration: underline;
100 | }
101 | code.code-block,
102 | .table-block.table-block-row {
103 |   padding-left: 1.0em;
104 | }
105 | .copy {
106 |   font-family: "Font Awesome 5 Free";
107 |   cursor: pointer;
108 | }
109 | 
110 | .table-block {
111 |   white-space: nowrap;
112 | }
113 | .table-block-start {
114 |   padding: 1px 2px;
115 |   font-size: 0.9em;
116 |   background-color: #ffcfc6;
117 | }
118 | .table-block-start a {
119 |   color: #342d9c;
120 |   text-decoration: underline;
121 | }
122 | .cell {
123 |   margin: 0;
124 |   padding: 0 2px 0 8px;
125 |   box-sizing: content-box;
126 |   display: inline-block;
127 |   white-space: pre;
128 | }
129 | .cell:nth-child(2n+1) {
130 |   background-color: rgba(0, 0, 0, 0.04);
131 | }
132 | .cell:nth-child(2n) {
133 |   background-color: rgba(0, 0, 0, 0.06);
134 | }
135 | 
136 | .strong-image {
137 |   max-height: 100%;
138 | }
139 | .icon {
140 |   height: 11px;
141 |   vertical-align: middle;
142 | }
143 | .strong-icon {
144 |   height: calc(11px * 1.2);
145 | }
146 | 
147 | .tool-button {
148 |   margin-left: 1em;
149 |   cursor: pointer;
150 |   font-size: 0.9em;
151 | }
152 | 
153 | .deco-\/ {
154 |   font-style: italic;
155 | }
156 | .deco-\*-1 {
157 |   font-weight: bold;
158 | }
159 | .deco-\*-2 {
160 |   font-weight: bold;
161 |   font-size: 1.20em;
162 | }
163 | .deco-\*-3 {
164 |   font-weight: bold;
165 |   font-size: 1.44em;
166 | }
167 | .deco-\*-4 {
168 |   font-weight: bold;
169 |   font-size: 1.73em;
170 | }
171 | .deco-\*-5 {
172 |   font-weight: bold;
173 |   font-size: 2.07em;
174 | }
175 | .deco-\*-6 {
176 |   font-weight: bold;
177 |   font-size: 2.49em;
178 | }
179 | .deco-\*-7 {
180 |   font-weight: bold;
181 |   font-size: 3.00em;
182 | }
183 | .deco-\*-8 {
184 |   font-weight: bold;
185 |   font-size: 3.58em;
186 | }
187 | .deco-\*-9 {
188 |   font-weight: bold;
189 |   font-size: 4.30em;
190 | }
191 | .deco-\*-10 {
192 |   font-weight: bold;
193 |   font-size: 5.16em;
194 | }
195 | .deco-\- {
196 |   text-decoration: line-through;
197 | }
198 | .deco-_ {
199 |   text-decoration: underline;
200 | }
201 | .page-link {
202 |   color: var(--page-link-color, #5e8af7);
203 | }
204 | a.page-link:hover {
205 |   color: var(--page-link-hover-color, #2d67f5);
206 | }
207 | .empty-page-link {
208 |   color: var(--empty-page-link-color, #fd7373);
209 | }
210 | a.empty-page-link:hover {
211 |   color: var(--empty-page-link-hover-color, #fd7373);
212 | }
213 | .link {
214 |   color: var(--page-link-color, #5e8af7);
215 |   text-decoration: underline;
216 | }
217 | a.link:hover {
218 |   color: var(--page-link-color-hover-color, #2d67f5);
219 | }
220 | .link img {
221 |   padding-bottom: 3px;
222 |   border-style: none none solid;
223 |   border-width: 1.5px;
224 |   border-color: #8fadf9;
225 | }
226 | 
227 | .permalink {
228 |   background-color: var(--line-permalink-color, rgba(234, 218, 74, 0.75));
229 | }
230 | 


--------------------------------------------------------------------------------
/parseLink.test.ts:
--------------------------------------------------------------------------------
 1 | import { parseLink } from "./parseLink.ts";
 2 | import { assertEquals } from "./deps/testing.ts";
 3 | 
 4 | Deno.test("external link", () => {
 5 |   assertEquals(
 6 |     parseLink({
 7 |       pathType: "root",
 8 |       href: "/project/title#61b5253a1280f00000003d6b5e",
 9 |     }),
10 |     {
11 |       project: "project",
12 |       title: "title",
13 |       hash: "61b5253a1280f00000003d6b5e",
14 |     },
15 |   );
16 |   assertEquals(
17 |     parseLink({ pathType: "root", href: "/project/title#invalidId" }),
18 |     {
19 |       project: "project",
20 |       title: "title#invalidId",
21 |     },
22 |   );
23 |   assertEquals(parseLink({ pathType: "root", href: "/project/title" }), {
24 |     project: "project",
25 |     title: "title",
26 |   });
27 |   assertEquals(parseLink({ pathType: "root", href: "/project/" }), {
28 |     project: "project",
29 |   });
30 |   assertEquals(parseLink({ pathType: "root", href: "/project" }), {
31 |     project: "project",
32 |   });
33 |   assertEquals(
34 |     parseLink({ pathType: "root", href: "/project/#title-with-#" }),
35 |     {
36 |       project: "project",
37 |       title: "#title-with-#",
38 |     },
39 |   );
40 | });
41 | Deno.test("internal link", () => {
42 |   assertEquals(
43 |     parseLink({
44 |       pathType: "relative",
45 |       href: "title#61b5253a1280f00000003d6b5e",
46 |     }),
47 |     {
48 |       title: "title",
49 |       hash: "61b5253a1280f00000003d6b5e",
50 |     },
51 |   );
52 |   assertEquals(
53 |     parseLink({ pathType: "relative", href: "title#invalidId" }),
54 |     {
55 |       title: "title#invalidId",
56 |     },
57 |   );
58 |   assertEquals(parseLink({ pathType: "relative", href: "title" }), {
59 |     title: "title",
60 |   });
61 |   assertEquals(parseLink({ pathType: "relative", href: "title/with#/" }), {
62 |     title: "title/with#/",
63 |   });
64 | });
65 | 
66 | Deno.test("project-like title", () => {
67 |   assertEquals(parseLink({ pathType: "root", href: "/*@__PURE__*/" }), {
68 |     title: "/*@__PURE__*/",
69 |   });
70 | });
71 | 


--------------------------------------------------------------------------------
/parseLink.ts:
--------------------------------------------------------------------------------
 1 | export interface ScrapboxLink {
 2 |   href: string;
 3 |   pathType: "root" | "relative";
 4 | }
 5 | 
 6 | /** Scrapbox記法のリンクから、project, title, hashを取り出す
 7 |  *
 8 |  * @param link 構文解析したScrapbox記法のリンク
 9 |  * @return 抽出したproject, title, hash
10 |  */
11 | export const parseLink = (
12 |   link: ScrapboxLink,
13 | ): { project: string; title?: string; hash?: string } | {
14 |   project?: string;
15 |   title: string;
16 |   hash?: string;
17 | } => {
18 |   root: if (link.pathType === "root") {
19 |     const [, project = "", title = ""] = link.href.match(
20 |       /\/([\w\-]+)(?:\/?|\/(.*))$/,
21 |     ) ?? ["", "", ""];
22 |     if (project === "") break root;
23 |     const [, hash] = title?.match?.(/#([a-f\d]{24,32})$/) ?? ["", ""];
24 |     return title === ""
25 |       ? { project }
26 |       : hash === ""
27 |       ? { project, title }
28 |       : { project, title: title.slice(0, -1 - hash.length), hash };
29 |   }
30 |   const [, hash] = link.href.match(/#([a-f\d]{24,32})$/) ?? ["", ""];
31 |   return hash === ""
32 |     ? { title: link.href }
33 |     : { title: link.href.slice(0, -1 - hash.length), hash };
34 | };
35 | 


--------------------------------------------------------------------------------
/position.ts:
--------------------------------------------------------------------------------
 1 | export type Position =
 2 |   & {
 3 |     top: number;
 4 |     bottom: number;
 5 |     maxWidth: number;
 6 |   }
 7 |   & ({
 8 |     left: number;
 9 |   } | {
10 |     right: number;
11 |   });
12 | 
13 | /** Bubbleの表示位置を計算する
14 |  *
15 |  * @param target このNodeに対してbubbleを表示する
16 |  * @return 表示位置
17 |  */
18 | export const calcBubblePosition = (target: Element): Position => {
19 |   // 表示位置を計算する
20 |   const { top, right, left, bottom } = target.getBoundingClientRect();
21 |   const root = document.body.getBoundingClientRect();
22 |   // linkが画面の右寄りにあったら、bubbleを左側に出す
23 |   const adjustRight = (left - root.left) / root.width > 0.5;
24 | 
25 |   return {
26 |     top: Math.round(bottom - root.top),
27 |     bottom: Math.round(globalThis.innerHeight - globalThis.scrollY - top),
28 |     ...(adjustRight
29 |       ? { right: Math.round(root.right - right) }
30 |       : { left: Math.round(left - root.left) }),
31 |     maxWidth: adjustRight
32 |       ? right - 10
33 |       : document.documentElement.clientWidth - left - 10,
34 |   };
35 | };
36 | 


--------------------------------------------------------------------------------
/scripts/minifyCSS.ts:
--------------------------------------------------------------------------------
 1 | import { build, initialize } from "../deps/esbuild.ts";
 2 | 
 3 | // prepare esbuild
 4 | await initialize({
 5 |   wasmURL: "https://cdn.jsdelivr.net/npm/esbuild-wasm@0.21.5/esbuild.wasm",
 6 |   worker: false,
 7 | });
 8 | 
 9 | // bundle & minify app.css
10 | const name = "file-loader";
11 | const { outputFiles: [css] } = await build({
12 |   entryPoints: [new URL("../app.css", import.meta.url).href],
13 |   bundle: true,
14 |   minify: true,
15 |   write: false,
16 |   plugins: [{
17 |     name,
18 |     setup: ({ onLoad, onResolve }) => {
19 |       onResolve({ filter: /.*/ }, ({ path, importer }) => {
20 |         return {
21 |           path: importer ? new URL(path, importer).href : path,
22 |           namespace: name,
23 |         };
24 |       });
25 |       onLoad({ filter: /.*/, namespace: name }, async ({ path }) => ({
26 |         contents: await (await fetch(new URL(path))).text(),
27 |         loader: "css",
28 |       }));
29 |     },
30 |   }],
31 | });
32 | 
33 | // create app.min.css.ts
34 | await Deno.writeTextFile(
35 |   new URL("../app.min.css.ts", import.meta.url),
36 |   `// deno-fmt-ignore-file\nexport const CSS = String.raw\`${css.text}\`;`,
37 | );
38 | 


--------------------------------------------------------------------------------
/statusBar.css:
--------------------------------------------------------------------------------
 1 | .status-bar {
 2 |   display: inline-block;
 3 |   position: absolute;
 4 |   background-color: var(--page-bg, #fefefe);
 5 |   cursor: default;
 6 | }
 7 | .status-bar > * {
 8 |   border: 1px solid var(--status-bar-border-color, #a9aaaf);
 9 | }
10 | 
11 | .status-bar.top-left {
12 |   top: 0;
13 |   left: 0;
14 | }
15 | .status-bar.top-left > * {
16 |   border-top: none;
17 |   border-left: none;
18 | }
19 | .status-bar.top-left :last-of-type {
20 |   border-bottom-right-radius: 3px;
21 | }
22 | 
23 | .status-bar.top-right {
24 |   top: 0;
25 |   right: 0;
26 | }
27 | .status-bar.top-right > * {
28 |   border-top: none;
29 |   border-right: none;
30 | }
31 | .status-bar.top-right :last-of-type {
32 |   border-bottom-left-radius: 3px;
33 | }
34 | 
35 | .status-bar.bottom-right {
36 |   bottom: 0;
37 |   right: 0;
38 | }
39 | .status-bar.bottom-right > * {
40 |   border-bottom: none;
41 |   border-right: none;
42 | }
43 | .status-bar.bottom-right :last-of-type {
44 |   border-top-left-radius: 3px;
45 | }
46 | 
47 | .status-bar.bottom-left {
48 |   bottom: 0;
49 |   left: 0;
50 | }
51 | .status-bar.bottom-left > * {
52 |   border-bottom: none;
53 |   border-left: none;
54 | }
55 | .status-bar.bottom-left :last-of-type {
56 |   border-top-right-radius: 3px;
57 | }
58 | 


--------------------------------------------------------------------------------
/stayHovering.ts:
--------------------------------------------------------------------------------
 1 | /** ホバー操作を待機する
 2 |  * @return ホバーがキャンセルされたら`false`
 3 |  */
 4 | export const stayHovering = <E extends Element = HTMLElement>(
 5 |   element: E,
 6 |   interval: number,
 7 | ): Promise<boolean> =>
 8 |   new Promise<boolean>((resolve) => {
 9 |     let canceled = false;
10 |     const handleCancel = () => {
11 |       canceled = true;
12 |       resolve(false);
13 |     };
14 |     element.addEventListener("click", handleCancel);
15 |     element.addEventListener("pointerleave", handleCancel);
16 |     setTimeout(() => {
17 |       if (!canceled) resolve(true);
18 |       element.removeEventListener("click", handleCancel);
19 |       element.removeEventListener("pointerleave", handleCancel);
20 |       resolve(false);
21 |     }, interval);
22 |   });
23 | 


--------------------------------------------------------------------------------
/storage.test.ts:
--------------------------------------------------------------------------------
  1 | import { Bubble, update } from "./storage.ts";
  2 | import {
  3 |   assertEquals,
  4 |   assertNotEquals,
  5 |   assertNotStrictEquals,
  6 |   assertStrictEquals,
  7 | } from "./deps/testing.ts";
  8 | 
  9 | Deno.test("update()", async (t) => {
 10 |   await t.step("新規作成", () => {
 11 |     const next: Bubble = {
 12 |       descriptions: [
 13 |         "[A1],[A2],[A3]",
 14 |         "https://scrapbox.io/api/pages/takker-dist/A",
 15 |       ],
 16 |       exists: true,
 17 |       image: null,
 18 |       lines: [
 19 |         {
 20 |           created: 1672173548,
 21 |           id: "dummy",
 22 |           text: "A",
 23 |           updated: 1672173548,
 24 |           userId: "dummy",
 25 |         },
 26 |         {
 27 |           created: 1672173548,
 28 |           id: "dummy",
 29 |           text: "[A1],[A2],[A3]",
 30 |           updated: 1672173548,
 31 |           userId: "dummy",
 32 |         },
 33 |         {
 34 |           created: 1672173548,
 35 |           id: "dummy",
 36 |           text: "https://scrapbox.io/api/pages/takker-dist/A",
 37 |           updated: 1672173548,
 38 |           userId: "dummy",
 39 |         },
 40 |       ],
 41 |       project: "takker-dist",
 42 |       titleLc: "a",
 43 |       updated: 1672173550,
 44 |       isLinkedCorrect: false,
 45 |     };
 46 | 
 47 |     const updated = update(undefined, next);
 48 |     assertStrictEquals(updated, next);
 49 |   });
 50 |   await t.step("更新日時が違う場合", async (t) => {
 51 |     const next: Bubble = {
 52 |       descriptions: [
 53 |         "[A1],[A2],[A3]",
 54 |         "https://scrapbox.io/api/pages/takker-dist/A",
 55 |       ],
 56 |       exists: true,
 57 |       image: null,
 58 |       lines: [
 59 |         {
 60 |           created: 1672173548,
 61 |           id: "dummy",
 62 |           text: "A",
 63 |           updated: 1672173548,
 64 |           userId: "dummy",
 65 |         },
 66 |         {
 67 |           created: 1672173548,
 68 |           id: "dummy",
 69 |           text: "[A1],[A2],[A3]",
 70 |           updated: 1672173548,
 71 |           userId: "dummy",
 72 |         },
 73 |         {
 74 |           created: 1672173548,
 75 |           id: "dummy",
 76 |           text: "https://scrapbox.io/api/pages/takker-dist/A",
 77 |           updated: 1672173548,
 78 |           userId: "dummy",
 79 |         },
 80 |       ],
 81 |       project: "takker-dist",
 82 |       titleLc: "a",
 83 |       updated: 1672173550,
 84 |       isLinkedCorrect: false,
 85 |     };
 86 | 
 87 |     await t.step("双方ともlinkedなし", () => {
 88 |       const prev: Bubble = {
 89 |         descriptions: [
 90 |           "[A1],[A2],[A3]",
 91 |           "https://scrapbox.io/api/pages/takker-dist/A",
 92 |         ],
 93 |         exists: true,
 94 |         image: null,
 95 |         lines: [
 96 |           {
 97 |             created: 1672173548,
 98 |             id: "dummy",
 99 |             text: "A",
100 |             updated: 1672173548,
101 |             userId: "dummy",
102 |           },
103 |           {
104 |             created: 1672173548,
105 |             id: "dummy",
106 |             text: "[A1],[A2],[A3]",
107 |             updated: 1672173548,
108 |             userId: "dummy",
109 |           },
110 |           {
111 |             created: 1672173548,
112 |             id: "dummy",
113 |             text: "https://scrapbox.io/api/pages/takker-dist/A",
114 |             updated: 1672173548,
115 |             userId: "dummy",
116 |           },
117 |         ],
118 |         project: "takker-dist",
119 |         titleLc: "a",
120 |         updated: 1672173548,
121 |         isLinkedCorrect: false,
122 |       };
123 |       const updated = update(prev, next);
124 |       assertNotStrictEquals(updated, prev);
125 |       assertNotStrictEquals(updated, next);
126 |       assertNotEquals(updated, prev);
127 |       assertEquals(updated, next);
128 | 
129 |       assertStrictEquals(updated?.lines, prev.lines);
130 |       assertStrictEquals(updated?.descriptions, next.descriptions);
131 |     });
132 | 
133 |     await t.step("古い方にlinkedあり", () => {
134 |       const prev: Bubble = {
135 |         descriptions: [
136 |           "[A1],[A2],[A3]",
137 |           "https://scrapbox.io/api/pages/takker-dist/A",
138 |         ],
139 |         exists: true,
140 |         image: null,
141 |         lines: [
142 |           {
143 |             created: 1672173548,
144 |             id: "dummy",
145 |             text: "A",
146 |             updated: 1672173548,
147 |             userId: "dummy",
148 |           },
149 |           {
150 |             created: 1672173548,
151 |             id: "dummy",
152 |             text: "[A1],[A2],[A3]",
153 |             updated: 1672173548,
154 |             userId: "dummy",
155 |           },
156 |           {
157 |             created: 1672173548,
158 |             id: "dummy",
159 |             text: "https://scrapbox.io/api/pages/takker-dist/A",
160 |             updated: 1672173548,
161 |             userId: "dummy",
162 |           },
163 |         ],
164 |         linked: ["c4", "c3"],
165 |         project: "takker-dist",
166 |         titleLc: "a",
167 |         updated: 1672173548,
168 |         isLinkedCorrect: true,
169 |       };
170 |       const updated = update(prev, next);
171 |       assertNotStrictEquals(updated, prev);
172 |       assertNotStrictEquals(updated, next);
173 |       assertNotEquals(updated, prev);
174 |       assertNotEquals(updated, next);
175 |       assertEquals(updated, { ...next, linked: prev.linked });
176 | 
177 |       assertStrictEquals(updated?.lines, prev.lines);
178 |       assertStrictEquals(updated?.descriptions, next.descriptions);
179 |     });
180 |   });
181 | 
182 |   await t.step("更新日時が同じ場合", async (t) => {
183 |     const next: Bubble = {
184 |       descriptions: [
185 |         "[A1],[A2],[A3]",
186 |         "https://scrapbox.io/api/pages/takker-dist/A",
187 |       ],
188 |       exists: true,
189 |       image: null,
190 |       lines: [
191 |         {
192 |           created: 1672173548,
193 |           id: "dummy",
194 |           text: "A",
195 |           updated: 1672173548,
196 |           userId: "dummy",
197 |         },
198 |         {
199 |           created: 1672173548,
200 |           id: "dummy",
201 |           text: "[A1],[A2],[A3]",
202 |           updated: 1672173548,
203 |           userId: "dummy",
204 |         },
205 |         {
206 |           created: 1672173548,
207 |           id: "dummy",
208 |           text: "https://scrapbox.io/api/pages/takker-dist/A",
209 |           updated: 1672173548,
210 |           userId: "dummy",
211 |         },
212 |       ],
213 |       linked: ["e2", "e3"],
214 |       project: "takker-dist",
215 |       titleLc: "a",
216 |       updated: 1672173548,
217 |       isLinkedCorrect: true,
218 |     };
219 | 
220 |     await t.step("linkedのみ違う", () => {
221 |       const prev: Bubble = {
222 |         descriptions: [
223 |           "[A1],[A2],[A3]",
224 |           "https://scrapbox.io/api/pages/takker-dist/A",
225 |         ],
226 |         exists: true,
227 |         image: null,
228 |         lines: [
229 |           {
230 |             created: 1672173548,
231 |             id: "dummy",
232 |             text: "A",
233 |             updated: 1672173548,
234 |             userId: "dummy",
235 |           },
236 |           {
237 |             created: 1672173548,
238 |             id: "dummy",
239 |             text: "[A1],[A2],[A3]",
240 |             updated: 1672173548,
241 |             userId: "dummy",
242 |           },
243 |           {
244 |             created: 1672173548,
245 |             id: "dummy",
246 |             text: "https://scrapbox.io/api/pages/takker-dist/A",
247 |             updated: 1672173548,
248 |             userId: "dummy",
249 |           },
250 |         ],
251 |         linked: ["e2", "e4"],
252 |         project: "takker-dist",
253 |         titleLc: "a",
254 |         updated: 1672173548,
255 |         isLinkedCorrect: true,
256 |       };
257 |       const updated = update(prev, next);
258 |       assertNotStrictEquals(updated, prev);
259 |       assertNotStrictEquals(updated, next);
260 |       assertEquals(updated, next);
261 | 
262 |       assertStrictEquals(updated?.lines, prev.lines);
263 |       assertStrictEquals(updated?.descriptions, prev.descriptions);
264 |       assertStrictEquals(updated?.linked, next.linked);
265 |     });
266 |   });
267 | });
268 | 


--------------------------------------------------------------------------------
/storage.ts:
--------------------------------------------------------------------------------
  1 | import { Line, StringLc } from "./deps/scrapbox.ts";
  2 | import { ID } from "./id.ts";
  3 | import { produce } from "./deps/immer.ts";
  4 | 
  5 | export interface Bubble {
  6 |   /** project name */
  7 |   project: string;
  8 | 
  9 |   /** page titleLc */
 10 |   titleLc: StringLc;
 11 | 
 12 |   /** サムネイル */
 13 |   image: string | null;
 14 | 
 15 |   /** サムネイル本文 */
 16 |   descriptions: string[];
 17 | 
 18 |   /** ページ本文
 19 |    *
 20 |    * 1行目にタイトルを入れる
 21 |    */
 22 |   lines: Line[];
 23 | 
 24 |   /** ページが存在すれば`true`*/
 25 |   exists: boolean;
 26 | 
 27 |   /** ページの更新日時 */
 28 |   updated: number;
 29 | 
 30 |   /** 内部リンク記法による逆リンクのリスト
 31 |    *
 32 |    * 未計算のときは`undefined`になる
 33 |    */
 34 |   linked?: StringLc[];
 35 | 
 36 |   /** `linked`が不正確な可能性がある場合は`true` */
 37 |   isLinkedCorrect: boolean;
 38 | 
 39 |   /** 外部リンク記法による逆リンクのリスト
 40 |    *
 41 |    * 未計算のときは`undefined`になる
 42 |    */
 43 |   projectLinked?: ID[];
 44 | }
 45 | 
 46 | export type BubbleStorage = Map<ID, Bubble>;
 47 | 
 48 | /** 指定したリンクが空リンクかどうか判定する */
 49 | export const isEmptyLink = (
 50 |   bubbles: Iterable<Bubble | undefined>,
 51 | ): boolean => {
 52 |   let linked = 0;
 53 |   for (const bubble of bubbles) {
 54 |     if (!bubble) continue;
 55 | 
 56 |     // 中身があるなら空リンクでない
 57 |     if (bubble.exists) return false;
 58 | 
 59 |     linked += (bubble.linked?.length ?? 0) +
 60 |       (bubble.projectLinked?.length ?? 0);
 61 |     // 2つ以上のページから参照されているなら空リンクでない
 62 |     if (linked > 1) return false;
 63 |   }
 64 |   return linked < 2;
 65 | };
 66 | 
 67 | /** bubbleを更新する
 68 |  *
 69 |  * update rule
 70 |  *
 71 |  * - 基本的に、updatedが大きい方を採用する
 72 |  * - linesは、更新日時にかかわらずdummyでないほうを採用する
 73 |  * - linkedとprojectLinkedは、undefinedでないほうを採用する
 74 |  *
 75 |  * 更新がなければ以前のobjectをそのまま返し、更新があれば新しいobjectで返す
 76 |  */
 77 | export const update = (
 78 |   prev: Bubble | undefined,
 79 |   current: Readonly<Bubble>,
 80 | ): Bubble | undefined =>
 81 |   produce<Bubble | undefined>(prev, (draft) => {
 82 |     if (!draft) return current;
 83 | 
 84 |     if (draft.updated < current.updated) {
 85 |       // 更新日時が新しければ、そちらを採用する
 86 |       // linked, projectLinked, linesのみ別途判定する
 87 |       const { lines, linked, projectLinked, ...rest } = current;
 88 | 
 89 |       Object.assign(draft, rest);
 90 |       if (!isDummy(current)) draft.lines = lines;
 91 |       if (linked) draft.linked ??= linked;
 92 |       if (projectLinked) draft.projectLinked ??= projectLinked;
 93 | 
 94 |       return;
 95 |     }
 96 | 
 97 |     // `updated`が変化していない場合、変更されている可能性のあるpropertiesは
 98 |     // - `lines`
 99 |     // - `linked`
100 |     // - `projectLinked`
101 |     // に限られる
102 | 
103 |     // 本物の本文がやってきたら、そちらを採用する
104 |     if (isDummy(draft) && !isDummy(current)) {
105 |       draft.lines = current.lines;
106 |     }
107 |     // linkedは正確に取得したデータを優先する
108 |     if (current.linked) {
109 |       if (current.isLinkedCorrect) {
110 |         draft.linked = current.linked;
111 |       } else if (
112 |         !draft.isLinkedCorrect &&
113 |         (draft.linked?.length ?? 0) <= current.linked.length
114 |       ) {
115 |         draft.linked = current.linked;
116 |       }
117 |     }
118 |     if (current.projectLinked) draft.projectLinked = current.projectLinked;
119 |   });
120 | 
121 | /** linesがdescriptionからでっち上げられたデータかどうか判定する */
122 | const isDummy = (bubble: Bubble): boolean => bubble.lines[0].id === "dummy";
123 | 


--------------------------------------------------------------------------------
/textBubble.css:
--------------------------------------------------------------------------------
 1 | @import "./page.css";
 2 | @import "./statusBar.css";
 3 | 
 4 | .text-bubble {
 5 |   font-size: 11px;
 6 |   line-height: 1.42857;
 7 |   user-select: text;
 8 |   position: absolute;
 9 |   color: var(--page-text-color, #4a4a4a);
10 |   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
11 |   display: flex;
12 |   flex-direction: column;
13 | 
14 |   z-index: 9000;
15 | 
16 |   &.no-scroll {
17 |     overflow-y: hidden;
18 |   }
19 | 
20 |   [data-theme="default-dark"] {
21 |     --text-bubble-border-color: hsl(0, 0%, 39%);
22 |   }
23 | 
24 |   [data-theme="default-minimal"] {
25 |     --text-bubble-border-color: hsl(0, 0%, 89%);
26 |   }
27 | 
28 |   [data-theme="paper-light"] {
29 |     --text-bubble-border-color: hsl(53, 8%, 58%);
30 |   }
31 | 
32 |   [data-theme="paper-dark-dark"] {
33 |     --text-bubble-border-color: hsl(203, 42%, 17%);
34 |   }
35 | 
36 |   [data-theme="blue"] {
37 |     --text-bubble-border-color: hsl(227, 68%, 62%);
38 |   }
39 | 
40 |   [data-theme="purple"] {
41 |     --text-bubble-border-color: hsl(267, 39%, 60%);
42 |   }
43 | 
44 |   [data-theme="green"] {
45 |     --text-bubble-border-color: hsl(136, 29%, 50%);
46 |   }
47 | 
48 |   [data-theme="orange"] {
49 |     --text-bubble-border-color: hsl(43, 71%, 51%);
50 |   }
51 | 
52 |   [data-theme="red"] {
53 |     --text-bubble-border-color: hsl(4, 58%, 56%);
54 |   }
55 | 
56 |   [data-theme="spring"] {
57 |     --text-bubble-border-color: hsl(72, 64%, 57%);
58 |   }
59 | 
60 |   [data-theme="kyoto"] {
61 |     --text-bubble-border-color: hsl(331, 21%, 26%);
62 |   }
63 | 
64 |   [data-theme="newyork"] {
65 |     --text-bubble-border-color: hsl(176, 29%, 67%);
66 |   }
67 | 
68 |   [role="tabpanel"] {
69 |     padding: 5px 0px 5px 5px;
70 |     border-radius: 4px;
71 |     background-color: var(--page-bg, #fefefe);
72 |     max-height: 80vh;
73 |     overflow-y: auto;
74 |   }
75 | 
76 |   [role="tabpanel"],
77 |   button {
78 |     border: 1px solid var(--text-bubble-border-color, hsl(221, 15%, 25%));
79 |   }
80 | 
81 |   button {
82 |     cursor: default;
83 |     color: inherit;
84 |     font-size: inherit;
85 |     line-height: inherit;
86 |     background-color: var(--page-bg, #fefefe);
87 |     border-radius: 4px 4px 0 0;
88 |   }
89 | 
90 |   button[aria-selected="true"] {
91 |     background-color: var(--text-bubble-border-color, hsl(221, 15%, 25%));
92 |   }
93 | }
94 | 
95 | .project-badge {
96 |   text-decoration: none;
97 |   color: var(--tool-text-color, #363c49);
98 | }
99 | 


--------------------------------------------------------------------------------
/throttle.test.ts:
--------------------------------------------------------------------------------
 1 | import { makeThrottle } from "./throttle.ts";
 2 | import { assertEquals } from "./deps/testing.ts";
 3 | 
 4 | Deno.test("makeThrottle()", async (t) => {
 5 |   await t.step("順番に実行", async () => {
 6 |     const throttle = makeThrottle<number>(10);
 7 | 
 8 |     const queue: number[] = [];
 9 |     const resolved = await Promise.all(
10 |       [...Array(10).keys()].map((_, i) =>
11 |         throttle(() => {
12 |           queue.push(i);
13 |           return Promise.resolve(i);
14 |         })
15 |       ),
16 |     );
17 | 
18 |     assertEquals(queue, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
19 |     assertEquals(resolved, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
20 |   });
21 |   await t.step(
22 |     "thresholdより多いjobsは、最後に追加されたものから実行される",
23 |     async () => {
24 |       for (let i = 1; i < 10; i++) {
25 |         const throttle = makeThrottle<number>(10 - i);
26 | 
27 |         const queue: number[] = [];
28 |         const resolved = await Promise.all(
29 |           [...Array(10).keys()].map((_, i) =>
30 |             throttle(() => {
31 |               queue.push(i);
32 |               return Promise.resolve(i);
33 |             })
34 |           ),
35 |         );
36 |         const result = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
37 |         const splitted = result.splice(10 - i, i).reverse();
38 |         // e.g. max jobsが5(=10 - i)のときは、result = [0,1,2,3,4,9,8,7,6,5]となる
39 |         result.push(...splitted);
40 | 
41 |         assertEquals(queue, result);
42 |         assertEquals(resolved, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
43 |       }
44 |     },
45 |   );
46 | 
47 |   await t.step("一部を止める", async () => {
48 |     const throttle = makeThrottle<number>(3);
49 | 
50 |     const queue: number[] = [];
51 |     const push = (i: number) =>
52 |       throttle(() => {
53 |         queue.push(i);
54 |         return Promise.resolve(i);
55 |       });
56 | 
57 |     let resolve: (() => void) | undefined;
58 |     const resolved = await Promise.all([
59 |       push(0),
60 |       push(1),
61 |       throttle(() =>
62 |         new Promise<void>((r) => resolve = r).then(() => {
63 |           queue.push(2);
64 |           return 2;
65 |         })
66 |       ),
67 |       push(3),
68 |       push(4),
69 |       push(5),
70 |       push(6),
71 |       throttle(() => {
72 |         resolve?.();
73 |         queue.push(7);
74 |         return Promise.resolve(7);
75 |       }),
76 |       push(8),
77 |       push(9),
78 |     ]);
79 | 
80 |     assertEquals(queue, [0, 1, 9, 8, 7, 6, 2, 5, 4, 3]);
81 |     assertEquals(resolved, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
82 |   });
83 | });
84 | 


--------------------------------------------------------------------------------
/throttle.ts:
--------------------------------------------------------------------------------
 1 | export type Fn<T> = () => Promise<T>;
 2 | 
 3 | /** 同時に一定数だけPromiseを走らせる函数
 4 |  *
 5 |  * 最後に追加したjobから実行する
 6 |  *
 7 |  * @param max 同時に動かすPromiseの最大数
 8 |  * @return jobを動かして結果を返す函数
 9 |  */
10 | export const makeThrottle = <T>(max: number): (job: Fn<T>) => Promise<T> => {
11 |   const queue: [
12 |     Fn<T>,
13 |     (value: T) => void,
14 |     (error: unknown) => void,
15 |   ][] = [];
16 |   const pendings = new Set<Promise<unknown>>();
17 | 
18 |   const runNext = (prev: Promise<unknown>) => {
19 |     pendings.delete(prev);
20 |     const task = queue.pop();
21 |     if (!task) return;
22 |     const promise: Promise<void> = task[0]()
23 |       .finally(() => runNext(promise))
24 |       .then((result) => task[1](result))
25 |       .catch((error) => task[2](error));
26 |     pendings.add(promise);
27 |   };
28 | 
29 |   return (job) => {
30 |     if (pendings.size < max) {
31 |       const promise = job().finally(() => runNext(promise));
32 |       pendings.add(promise);
33 |       return promise;
34 |     }
35 |     return new Promise((resolve, reject) => {
36 |       queue.push([job, resolve, reject]);
37 |     });
38 |   };
39 | };
40 | 


--------------------------------------------------------------------------------
/type-traits.ts:
--------------------------------------------------------------------------------
 1 | // https://techracho.bpsinc.jp/yoshi/2020_09_04/97108
 2 | type Digits = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 3 | type Tail<T extends string> = T extends `${Digits}${infer U}` ? U : never;
 4 | type First<T extends string> = T extends `${infer U}${Tail<T>}` ? U : never;
 5 | type DigitsStr = `${Digits}`;
 6 | type Tile<T extends unknown[], N extends Digits | DigitsStr | 10 | "10"> = [
 7 |   [],
 8 |   [...T],
 9 |   [...T, ...T],
10 |   [...T, ...T, ...T],
11 |   [...T, ...T, ...T, ...T],
12 |   [...T, ...T, ...T, ...T, ...T],
13 |   [...T, ...T, ...T, ...T, ...T, ...T],
14 |   [...T, ...T, ...T, ...T, ...T, ...T, ...T],
15 |   [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T],
16 |   [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T],
17 |   [...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T, ...T],
18 | ][N];
19 | type MakeTupleImpl<T, N extends string, X extends unknown[] = []> =
20 |   string extends N ? never
21 |     // 文字列リテラルじゃなくて string 型が渡ってきた場合は変換できない
22 |     : N extends "" ? X
23 |     // if (src == '') { return x; }
24 |     : First<N> extends infer U ? U extends DigitsStr // const ch = src[0]
25 |         ? MakeTupleImpl<
26 |           T,
27 |           Tail<N>, // src.slice(1)
28 |           [...Tile<[T], U>, ...Tile<X, 10> /* x * 10 */]
29 |         >
30 |       : never
31 |     : never;
32 | export type MakeTuple<T, N extends number> = MakeTupleImpl<T, `${N}`>;
33 | 


--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
1 | export type LinkType = "hashtag" | "link" | "title";
2 | 
3 | export interface LinkTo {
4 |   project?: string;
5 |   titleLc: string;
6 | }
7 | 


--------------------------------------------------------------------------------
/useBubbleData.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "./deps/preact.tsx";
 2 | import { load, subscribe, unsubscribe } from "./bubble.ts";
 3 | import { createDebug } from "./debug.ts";
 4 | import { ID } from "./id.ts";
 5 | import { Bubble } from "./storage.ts";
 6 | 
 7 | const logger = createDebug("ScrapBubble:useBubbleData.ts");
 8 | 
 9 | /** bubbleデータを取得するhooks
10 |  *
11 |  * @param pageIds 取得するページのID
12 |  * @returns bubble data
13 |  */
14 | export const useBubbleData = (
15 |   pageIds: readonly ID[],
16 | ): readonly Bubble[] => {
17 |   const [bubbles, setBubbles] = useState<readonly Bubble[]>(
18 |     makeBubbles(pageIds),
19 |   );
20 | 
21 |   // データ更新用listenerの登録
22 |   useEffect(() => {
23 |     setBubbles(makeBubbles(pageIds));
24 | 
25 |     let timer: number | undefined;
26 |     /** ページデータを更新する */
27 |     const updateData = () => {
28 |       // 少し待ってからまとめて更新する
29 |       clearTimeout(timer);
30 |       timer = setTimeout(() => {
31 |         logger.debug(`Update ${pageIds.length} pages`);
32 |         setBubbles(makeBubbles(pageIds));
33 |       }, 10);
34 |     };
35 | 
36 |     // 更新を購読する
37 |     pageIds.forEach((id) => subscribe(id, updateData));
38 |     return () => pageIds.forEach((id) => unsubscribe(id, updateData));
39 |   }, pageIds);
40 | 
41 |   // debug用
42 | 
43 |   return bubbles;
44 | };
45 | 
46 | const makeBubbles = (pageIds: readonly ID[]): readonly Bubble[] => {
47 |   const bubbles = [...load(pageIds)].flatMap((bubble) =>
48 |     bubble ? [bubble] : []
49 |   );
50 | 
51 |   // debug用
52 |   logger.debug(
53 |     `Required: ${pageIds.length} pages, ${bubbles.length} found`,
54 |     bubbles,
55 |   );
56 |   return bubbles;
57 | };
58 | 


--------------------------------------------------------------------------------
/useBubbles.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useState } from "./deps/preact.tsx";
 2 | import { Position } from "./position.ts";
 3 | import { LinkType } from "./types.ts";
 4 | import { Scrapbox } from "./deps/scrapbox.ts";
 5 | declare const scrapbox: Scrapbox;
 6 | 
 7 | /** bubble data */
 8 | export interface Source {
 9 |   /** bubble元(リンクなど)のproject name */
10 |   project: string;
11 | 
12 |   /** bubble元(リンクなど)のtilte */
13 |   title: string;
14 | 
15 |   /** bubble元(リンクなど)のline ID */
16 |   hash?: string;
17 | 
18 |   /** スクロール先リンク
19 |    *
20 |    * 内部リンク記法へスクロールするときは、`project`を削る
21 |    */
22 |   linkTo?: {
23 |     project?: string;
24 |     titleLc: string;
25 |   };
26 | 
27 |   /** 発生源の種類 */
28 |   type: LinkType;
29 | 
30 |   /** bubbleの表示位置 */
31 |   position: Position;
32 | }
33 | 
34 | export interface BubbleOperators {
35 |   /** 現在の階層の下に新しいbubbleを出す
36 |    *
37 |    * すでにbubbleされていた場合、それ以降のbubbleを含めて消してから新しいのを出す
38 |    */
39 |   bubble: (source: Source) => void;
40 | 
41 |   /** 現在の階層より下のbubblesをすべて消す */
42 |   hide: () => void;
43 | }
44 | 
45 | export interface BubbleSource extends BubbleOperators {
46 |   /** bubble data */
47 |   source: Source;
48 | 
49 |   /** 親階層のbubblesのページタイトル */
50 |   parentTitles: string[];
51 | }
52 | 
53 | export const useBubbles = (): [
54 |   BubbleOperators,
55 |   ...BubbleSource[],
56 | ] => {
57 |   const [bubbles, setBubbles] = useState<[
58 |     BubbleOperators,
59 |     ...BubbleSource[],
60 |   ]>([{
61 |     bubble: (source: Source) => change(0, source),
62 |     hide: () => change(0),
63 |   }]);
64 | 
65 |   const change = useCallback(
66 |     (
67 |       depth: number,
68 |       source?: Source,
69 |     ) => {
70 |       // 操作函数や他のbubbleデータから計算される値を追加する
71 |       // 更新されたbubble以外は、objectの参照を壊さずにそのまま返す
72 |       setBubbles((
73 |         [first, ...prev],
74 |       ) => [
75 |         first,
76 |         ...(
77 |           source
78 |             ? [
79 |               ...prev.slice(0, depth),
80 |               source === prev.at(depth)?.source ? prev.at(depth)! : ({
81 |                 source,
82 |                 parentTitles: [
83 |                   scrapbox.Page.title ?? "",
84 |                   ...prev.slice(0, depth).map((bubble) => bubble.source.title),
85 |                 ],
86 |                 bubble: (source: Source) => change(depth + 1, source),
87 |                 hide: () => change(depth + 1),
88 |               }),
89 |             ]
90 |             : [...prev.slice(0, depth)]
91 |         ),
92 |       ]);
93 |     },
94 |     [],
95 |   );
96 | 
97 |   return bubbles;
98 | };
99 | 


--------------------------------------------------------------------------------
/useEventListener.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "./deps/preact.tsx";
 2 | 
 3 | type EventMap<E extends EventTarget> = E extends Window ? WindowEventMap
 4 |   : E extends Document ? DocumentEventMap
 5 |   : E extends HTMLElement ? HTMLElementEventMap
 6 |   : GlobalEventHandlersEventMap;
 7 | type Listener<E extends EventTarget, K extends keyof EventMap<E>> = E extends
 8 |   Window ? (this: Window, ev: EventMap<E>[K]) => void
 9 |   : E extends Document ? (this: Document, ev: EventMap<E>[K]) => void
10 |   : E extends HTMLElement ? (this: HTMLElement, ev: EventMap<E>[K]) => void
11 |   : EventListenerOrEventListenerObject;
12 | 
13 | export const useEventListener = <
14 |   E extends EventTarget,
15 |   K extends (keyof EventMap<E>) & string,
16 | >(
17 |   element: E,
18 |   type: K,
19 |   listener: Listener<E, K>,
20 |   options?: boolean | AddEventListenerOptions,
21 |   deps?: unknown[],
22 | ): void => {
23 |   useEffect(() => {
24 |     element.addEventListener(
25 |       type,
26 |       listener as EventListenerOrEventListenerObject,
27 |       options,
28 |     );
29 |     return () =>
30 |       element.removeEventListener(
31 |         type,
32 |         listener as EventListenerOrEventListenerObject,
33 |         options,
34 |       );
35 |   }, [element, type, options, ...(deps ?? [])]);
36 | };
37 | 


--------------------------------------------------------------------------------
/useKaTeX.ts:
--------------------------------------------------------------------------------
 1 | import { type RefCallback, useCallback, useState } from "./deps/preact.tsx";
 2 | import { importKaTeX, KatexOptions } from "./katex.ts";
 3 | 
 4 | export interface ParseError {
 5 |   name: string;
 6 |   message: string;
 7 |   position: number;
 8 | }
 9 | 
10 | export interface UseKaTeXResult<T extends HTMLElement> {
11 |   ref: RefCallback<T>;
12 |   error: string;
13 | }
14 | 
15 | export const useKaTeX = <T extends HTMLElement>(
16 |   formula: string,
17 |   options?: KatexOptions,
18 | ): UseKaTeXResult<T> => {
19 |   const [error, setError] = useState<string>("");
20 | 
21 |   const ref: RefCallback<T> = useCallback(
22 |     (element) => {
23 |       if (!element) {
24 |         setError("");
25 |         return;
26 |       }
27 | 
28 |       importKaTeX().then((katex) => {
29 |         try {
30 |           katex.render(formula, element, options);
31 |           setError("");
32 |         } catch (e) {
33 |           if (e instanceof Error && e.name === "ParseError") {
34 |             // remove an unnecessary token
35 |             setError(e.message.slice("KaTeX parse error: ".length));
36 |           } else {
37 |             throw e;
38 |           }
39 |         }
40 |       });
41 |     },
42 |     [formula, ...Object.values(options ?? {})],
43 |   );
44 |   return { ref, error };
45 | };
46 | 


--------------------------------------------------------------------------------
/useProject.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "./deps/preact.tsx";
 2 | import { FetchError, getProject, ProjectError } from "./deps/scrapbox-std.ts";
 3 | import { cacheFirstFetch } from "./cache.ts";
 4 | import { makeEmitter } from "./eventEmitter.ts";
 5 | import { MemberProject, NotMemberProject } from "./deps/scrapbox.ts";
 6 | import { createDebug } from "./debug.ts";
 7 | import { Result } from "./deps/option-t.ts";
 8 | 
 9 | export type ProjectResult = Result<
10 |   NotMemberProject | MemberProject,
11 |   ProjectError | FetchError
12 | >;
13 | type State<T> = { loading: true } | { loading: false; value: T };
14 | const emitter = makeEmitter<string, ProjectResult>();
15 | 
16 | const projectMap = new Map<string, State<ProjectResult>>();
17 | 
18 | const logger = createDebug("ScrapBubble:useProject.ts");
19 | 
20 | /** /api/projects/:projectの結果を返すhook
21 |  *
22 |  * @param project 情報を取得したいprojectの名前
23 |  * @return projectの情報。未初期化もしくは読み込み中のときは`undefined`を返す
24 |  */
25 | export const useProject = (project: string): ProjectResult | undefined => {
26 |   const [projectResult, setProjectResult] = useState<ProjectResult>();
27 | 
28 |   useEffect(() => {
29 |     emitter.on(project, setProjectResult);
30 | 
31 |     const state = projectMap.get(project);
32 |     if (state) {
33 |       setProjectResult(state.loading ? undefined : state.value);
34 |     } else {
35 |       projectMap.set(project, { loading: true });
36 |       setProjectResult(undefined);
37 | 
38 |       // projectの情報を取得する
39 |       (async () => {
40 |         try {
41 |           const req = getProject.toRequest(project);
42 |           for await (const [, res] of cacheFirstFetch(req)) {
43 |             const result = await getProject.fromResponse(res);
44 |             projectMap.set(project, { loading: false, value: result });
45 |             emitter.dispatch(project, result);
46 |             // networkからcacheを更新する必要はないので、1 loopで処理を終える
47 |             break;
48 |           }
49 |         } catch (e: unknown) {
50 |           // 想定外のエラーはログに出す
51 |           logger.error(e);
52 |           // 未初期化状態に戻す
53 |           projectMap.delete(project);
54 |         }
55 |       })();
56 |     }
57 | 
58 |     return () => emitter.off(project, setProjectResult);
59 |   }, [project]);
60 | 
61 |   return projectResult;
62 | };
63 | 


--------------------------------------------------------------------------------
/useTheme.ts:
--------------------------------------------------------------------------------
 1 | import { useMemo } from "./deps/preact.tsx";
 2 | import { useProject } from "./useProject.ts";
 3 | import { isTheme, Theme } from "./deps/scrapbox.ts";
 4 | import { isErr, unwrapOk } from "./deps/option-t.ts";
 5 | 
 6 | const defaultTheme = "default-light";
 7 | 
 8 | /** projectのthemeを取得するhook */
 9 | export const useTheme = (project: string): Theme => {
10 |   const res = useProject(project);
11 | 
12 |   return useMemo(() => {
13 |     if (!res || isErr(res)) return defaultTheme;
14 |     const theme = unwrapOk(res).theme;
15 |     return isTheme(theme) ? theme : defaultTheme;
16 |   }, [res]);
17 | };
18 | 


--------------------------------------------------------------------------------
/watchList.ts:
--------------------------------------------------------------------------------
 1 | import type { ProjectId, UnixTime } from "./deps/scrapbox.ts";
 2 | import { listProjects } from "./deps/scrapbox-std.ts";
 3 | import { isErr, unwrapOk } from "./deps/option-t.ts";
 4 | 
 5 | export const getWatchList = async (): Promise<ProjectId[]> => {
 6 |   const value = localStorage.getItem("projectsLastAccessed");
 7 |   if (!value) return [];
 8 | 
 9 |   try {
10 |     const list = JSON.parse(value) as Record<ProjectId, UnixTime>;
11 |     const ids = Object.entries(list).sort(([, a], [, b]) => b - a).map((
12 |       [projectId],
13 |     ) => projectId);
14 |     const result = await listProjects([]);
15 |     if (isErr(result)) return ids;
16 |     const joinedIds = unwrapOk(result).projects.map((project) => project.id);
17 |     return ids.filter((id) => !joinedIds.includes(id));
18 |   } catch (e: unknown) {
19 |     if (!(e instanceof SyntaxError)) throw e;
20 |     return [];
21 |   }
22 | };
23 | 


--------------------------------------------------------------------------------