gypsy-dev

gypsy-dev のリポジトリです。Tailwind Nextjs Themeを利用して構築しています。

pages/

• index/tsx
• __app.tsx: アプリ全体で適用されるレイアウトや、共通処理 最新のブログ記事一覧を表示する役割を持つ。

1. コード全体の役割

• ブログ記事一覧の表示:
  • 最新の5件（MAX_DISPLAY）のブログ記事をトップページに表示。
  • 記事タイトル、公開日、概要（summary）、タグ（tags）を表示。
  • 各記事の詳細ページ（/blog/[slug]）へのリンク付き。
• 追加機能:
  • 全記事一覧ページ（/blog）へのリンクを表示（記事数がMAX_DISPLAYを超える場合）。
• 役割:
  • ブログ記事データを静的に取得して、コンポーネントに渡す。
• 流れ:
  1. allBlogs: 全てのブログデータを取得。
  2. sortedBlogPost: ブログ記事を日付順に並び替え。
  3. allCoreContent: 必要なデータだけを抽出（詳細な構造はユーティリティ関数で定義）。
  4. posts: 並び替え・抽出済みのブログデータがここに格納される。

3. 流れを追う方法

1. 記事データの取得:
   • getStaticProps内でブログ記事がallBlogsから取得され、postsに変換される。
2. 記事データの表示:
   • postsがHomeコンポーネントに渡され、最大5件表示。
3. 個別記事ページへのリンク:
   • 記事のslugを使い、/blog/[slug]形式で詳細ページに移動可能。
4. 追加要素の確認:
   • NewsletterFormやAll Postsリンクが動的に追加される。

---

layouts/

• ブログ全体や個別ページのレイアウトを定義

pages

• ブログの内容（タイトル、本文、画像など）が記述されている場所

components

• ボタンやカード、アイコンなどの再利用可能な部品

data/

• メタデータや設定、ブログ記事のデータソースを格納している

public/

• 静的ファイルが入ってる

css

• TailwindCSS