Next.js 14とBunで構築されたダークな読書空間の中身を覗く
開発者はブログを作り直すのが好きです。もうそれはミームになっていますね。投稿を書く代わりに、6ヶ月ごとに古いスタックを撤去してゼロからインターフェースを再構築する。結果はいつもcookie-cutterなテンプレートになりがちです。でも時には、制作者がもう少しだけ细节に力を入れたソースコードに出会うこともあります。
ある日、私はwoosal1337/blogリポジトリを探索していました——これは開発者のEge Celebiさんの個人ウェブサイトです。このプロジェクトはGitHubで300スターちょっと獲得しています。その中には、グラフィック生成、タイポグラフィ、MDXの取り扱いについて、いくつか興味深いソリューションが隠されています。
内部構造
GhostやStrapiのような重量級CMSは使っていません。著者は静的生成と高速な読み込み速度を選びました。
ビルドは3つの要素をベースにしています：
- App RouterとReact 18を使ったNext.js 14。
- パッケージマネージャー兼ランタイムのBun。
- コードのリントとフォーマットのためのBiome。
Bunは依存関係のインストール時間を短縮し、Biomeは古典的なESLintとPrettierの組み合わせを置き換えます。自動修正付きのリンターを実行するには、プロジェクトではbun run checkコマンドを使用します。
スタイリングにはTailwind CSSを使用しています。カラーとトークンの設定はapp/globals.cssに切り出されています。記事の本文にはGeist Sans、コードブロックにはGeist Monoが使用されています。
デザイナーもMidjourneyも使わないバナー
このリポジトリの目玉は、記事用のバナー生成です。通常、著者はUnsplashで適切な画像を探したり нейросетиで画像を生成したり、Figmaでカードを作成したりします。
Egeさんは異なるアプローチを取りました。lib/contour.tsファイルには、投稿タイトルを取得して輪郭パターンに変換するアルゴリズムがあります。これにより、確定的SVGバナーが得られます。各タイトルに対応する独自の рисунокが生成され、外部サービスを呼び出す必要はありません。
同じ輪郭マークがロゴとファビコンにも使用され、统一されたアイデンティティを維持しています。
リキッドガラスとASCIIアニメーション
視覚的には、サイトはダークなエディトリアルページのような外観です。デザインでは極細ボーダー（ヘアラインボーダー）と遷移用の统一されたアニメーションカーブを使用しています。
インターフェースにはいくつかのビジュアルな発見があります：
- リキッドガラス効果付きのラウンドコントロール。
- カテゴリーとラベル用のフロストガラス風タグ。
- 左側に配置された記事の目次と、スムーズにスクロールするナビゲーションマーカー。マウーカーの動作はLineNavコンポーネントをモデルにしています。
- ライブASCII поверхности。
components/blocks/ascii/フォルダには、アニメーション付きのトーラス（有名なASCIIドーナツ）、デジタルレインダー、プラズマ、トンネルのエフェクトがあります。著者はsoft-club-uiライブラリから移植し、サイトのモノクロパレットに合わせて再配色しています。
プロジェクト構造とMDX
すべての記事はApp Routerのページツリーに直接格納されています：app/(website)/blog/(post)/[slug]/page.mdx。
このアプローチはルーティングロジックとコンテンツをを組み合わせています。UIコンポーネントは明確に分離されています：
components/ds/には再利用可能基本的なデザインシステム要素が含まれています。components/blocks/には複雑なドメインロジックとアニメーションが格納されています。
ローカルでの実行方法
Node.jsバージョン20以上とBunがインストールされている必要があります。環境変数の設定は不要です。
リポジトリをクローンしてローカルサーバーを起動します：
bun install
bun dev
リンターでチェックしてコードをフォーマットするには：
bun run check
なぜこれらのソースを見るべきか
独自のサイトを構築する予定の方や、フロントエンドアーキテクチャのクリーンな例を探している方は、このリポジトリを開く価値があります。コードから学べることは：
- Next.jsプロジェクトでのBiome設定。
- テキストベースのベクターカード生成の実装。
- CanvasとASCIIエフェクトのReactコンポーネントへの統合。
- 単一のCSSファイルでのTailwindトークンの整理。
コードはMITライセンスですが、テキストコンテンツと画像は著作権で保護されています。記事をコピーするのは良いアイデアではありませんが、アーキテクチャを研究して自分のプロジェクトでアイデアを適用するのは素晴らしいプランです。
関連プロジェクト