Project Structure Overview

This project is structured to simplify content management and addition. By leveraging Next.js route groups and MDX, we efficiently organize content, while frontmatter is used for metadata management.

The sitemap is an XML file that provides a structured list of all the pages available on the website. It helps search engines like Google to efficiently crawl and index the site's content, ensuring that all important pages are discoverable. The sitemap includes URLs for each page, along with metadata such as the last update time, change frequency, and priority. This project generates a sitemap automatically, reflecting the dynamic nature of the content and ensuring that search engines have the most up-to-date information about the site's structure.

┌───────────────┬────────┐
│ (index)       │ Values │
├───────────────┼────────┤
│ indexSitemaps │ 1      │
│ sitemaps      │ 1      │
└───────────────┴────────┘
SITEMAP INDICES

Route (app)                              Size     First Load JS
┌ ○ /                                    5.19 kB         142 kB
├ ○ /_not-found                          873 B            88 kB
├ ƒ /api/og                              0 B                0 B
├ ○ /demoscene                           464 B           130 kB
├ ● /demoscene/[slug]                    2.12 kB         144 kB
├   └ /demoscene/component-showcase
├ ○ /guides                              464 B           130 kB
├ ● /guides/[slug]                       2.12 kB         144 kB
├   ├ /guides/colophon
├   ├ /guides/project-structure
├   └ /guides/silent-agents
├ ○ /icon                                0 B                0 B
├ ○ /notes                               464 B           130 kB
├ ● /notes/[slug]                        2.12 kB         144 kB
├   └ /notes/stream
├ ○ /research                            464 B           130 kB
└ ● /research/[slug]                     2.12 kB         144 kB
└ /research/portability

First Load JS shared by all            87.1 kB
├ chunks/720-4d92c574d847ecd4.js       31.6 kB
├ chunks/bc06a508-35cf56236c5afd7c.js  53.6 kB
└ other shared chunks (total)          1.91 kB

Content Organization

Content is organized using route groups. Creating a new folder in the posts directory automatically establishes a new route group for your content.

Adding a New Category

To introduce a new category:

1. Duplicate the Guides Folder: Copy the existing guides folder within the posts directory.
2. Rename the Folder: Change the name of the duplicated folder to your desired category name.
3. Add Content: Populate your new category folder with content files, typically .mdx files.

This setup allows seamless expansion of site content without manual route configuration. For more on routing, see the Next.js Routing Documentation.

Component Integration

MDX is used for content creation, enabling the inclusion of React components directly within markdown files.

Adding a New Component

To add a component:

1. Create the Component: Define your React component as usual.
2. Register the Component: Add it to the mdx-components.tsx file at the project root. This maps component names to implementations, making them accessible in MDX files.

For more on MDX with Next.js, refer to the Next.js MDX Documentation.

Frontmatter Usage

Frontmatter is employed to add metadata to markdown files, crucial for categorization and providing additional context. The Post interface in the types directory defines this metadata.