超軽量なScrapboxクライアントのダークテーマ版
/villagepump/超軽量なScrapboxクライアントを作ったを改造してダークテーマ仕様にしたやつ
フォーク元同様scrapbox-parserを利用している
表示サンプル
元ページ：DSマック アドベンチャー
使い方
ブラウザで
https://scrapbox-reader-dark.vercel.app/<プロジェクト名>/<ページ名> にアクセスする変更点
ダークテーマになった
ScrapboxのCSSテーマ変数を参考に、値をパクった
CSSをSCSSにした
Live Sass Compilerを用いてコンパイルしている
入れ子にした分少し見やすくなったはず……多分
そのうちyarnにまとめる可能性はある
その場合、package-lock.jsonは削除するかも
開発時に用いるNext.jsのバージョンを若干上げた
うまくreact-domモジュールを読み込んでくれなかったので
今後やるかもしれないこと
未解決
上に行くほど
の関心度が高い
関連ページリストを実装する
気が向いたらやる程度
OGP実装
拡張子がないタイトルのコードブロックのタイトルもリンク化する
箇条書きのドットを表示する
そこまで困らないので優先度低め
ブラケット内のアイコン記法がリンクとして認識されてしまうバグ
これはscrapbox-parser側のバグ
多分誰かが直してくれることでしょう…( ˘ω˘)
api/pages/:projectname/:pagetitle?followRename=trueでリダイレクトしてくれるっぽい
ただ、api/pages/:projectname/:pagetitle/textではできないので
開発環境で出るEach child in a list should have a unique "key" prop.警告をどうにかする
難しいのでちょっと後回しになるかも
解決済み
文字を大きくする記法のCSSが冗長なのをどうにかする
修正した
Font AwesomeやKamon iconsのアイコンを表示できないので表示できるようにする
Font Awesomeだけ対応させた
Kamon iconsは使える状態のフォントを用意するのがめんどくさかったのでボツ
Scrapboxのアセットを直接持ってくるのはナシで
読み込み元のページへのリンクの追加
スマホでの表示を想定されていないので直す
このページを見て、CSSがおかしいところを直す
やるかもしれない
コードブロックの行番号の表示
昨今のWebサイト上で行番号が実装されていないほうが珍しい
行番号がないとソースコードが見づらい
KaTeX実装
個人的にあんまり使っていないので後回し
詳しくないからというのもある
多分やらないこと
UserCSS対応
ブラケット記法のCSSだけでも適応させられたらいいかもしれないけれど…
特定のセレクタのスタイルだけ持ってくることができない
本家Scrapboxとは構造も微妙なデザインも違うので、そのまま持ってきても表示がバグる可能性がある
本家ScrapboxほどDOMを細かくすると軽量化から程遠くなるので難しい
せっかくダークテーマにしたのに、UserCSSに対応させたらプロジェクトによっては意味がなくなる
ページの詳細情報の表示（テロメア含む）
他の改良点が全部終わったら考えるかも
あまり重要視していないので優先度が低い
埋め込み対応
ページが重くなりかねないのでボツ