@x-wave/blog 1.0.16 → 1.0.18

package/README.md

@@ -280,10 +280,12 @@ import {
   DocumentationRoutes,
   DocumentationLayout, 
   ContentPage,
+  HomePage,
   Header,
   Sidebar,
   TableOfContents,
-  AdvancedModeToggle
+  AdvancedModeToggle,
+  Metadata
 } from '@x-wave/blog'
 ```
 
@@ -293,10 +295,12 @@ import {
 | `DocumentationRoutes` | Pre-configured Routes for documentation pages (recommended) |
 | `DocumentationLayout` | Page layout: header + sidebar + content |
 | `ContentPage` | Loads and renders MDX pages |
+| `HomePage` | Lists latest articles with metadata (configurable via `defaultRoute`) |
 | `Header` | Top navigation bar |
 | `Sidebar` | Left navigation panel |
 | `TableOfContents` | "On this page" anchor panel |
 | `AdvancedModeToggle` | Simple/Advanced tab switch |
+| `Metadata` | Displays author and publication date with icons (used in HomePage and ContentPage) |
 
 ### Hooks
 
@@ -390,6 +394,8 @@ interface BlogConfig {
   supportedLanguages: readonly string[]           // e.g. ['en', 'es', 'zh']
   navigationData: NavigationEntry[]               // Menu structure
   basePath?: string                               // Base path for all routes (default: '')
+  contentMaxWidth?: string                        // Max width for content area (default: '80rem')
+  defaultRoute?: string                           // Default route: 'latest' (home page) or article slug (default: 'latest')
   header?: {                                       // Optional: omit to hide built-in header
     navLinks?: HeaderLink[]                       // Top-level nav links
     dropdownItems?: HeaderDropdownItem[]          // Support dropdown menu
@@ -400,6 +406,42 @@ interface BlogConfig {
 **Key properties:**
 
 - **`header`**: Optional. If omitted entirely, the built-in header component will not be rendered. Use this when you want to implement a custom header.
+- **`contentMaxWidth`**: Optional. Set a custom maximum width for the main content area. Example: `'100rem'` or `'1400px'`. Default: `'80rem'`.
+- **`defaultRoute`**: Optional. Controls which page displays at the root path (`/`):
+  - Set to `'latest'` (default) to show the HomePage listing the latest articles
+  - Set to any article slug (e.g., `'welcome'`, `'getting-started'`) to redirect the root path to that article
+
+### Home page feature
+
+The framework includes an optional home/latest posts page that lists articles sorted by publish date. Configure it with the `defaultRoute` option:
+
+```tsx
+// Show home page at root path (lists latest articles)
+config: {
+  defaultRoute: 'latest'  // or omit (defaults to 'latest')
+}
+
+// Or redirect root path to a specific article
+config: {
+  defaultRoute: 'welcome'  // Root path goes to /welcome article
+}
+```
+
+The home page displays:
+- **Title**: "Latest Posts" (i18n translated)
+- **Header metadata**: Author and date from the most recent article
+- **Article cards**: Recent articles with title, description, author, and date
+- **Sorting**: Articles sorted by date (newest first), limited to 50 articles
+
+Article metadata comes from MDX frontmatter:
+```mdx
+---
+title: Getting Started
+author: Jane Doe
+date: 2026-02-23
+description: Learn the basics in 5 minutes
+---
+```
 
 ### Custom headers
 
@@ -452,6 +494,32 @@ function App() {
 }
 ```
 
+### Reusable components
+
+#### Metadata component
+
+The `Metadata` component displays article metadata (author and publication date) with icons and i18n support. It's used throughout the framework (HomePage and ContentPage) but is also exported for your own use:
+
+```tsx
+import { Metadata } from '@x-wave/blog'
+
+function MyComponent() {
+  return (
+    <Metadata 
+      author="Jane Doe"
+      date="2026-02-23"
+    />
+  )
+}
+```
+
+The component:
+- Displays author with a user icon
+- Displays date with a calendar icon and "Last edited" label
+- Automatically formats the date using the user's locale
+- Returns `null` if both author and date are missing
+- Uses i18n for the "Last edited" label and date formatting
+
 **Available hooks:**
 
 - **`useTheme()`**: Returns `{ theme, setTheme, effectiveTheme }` for managing light/dark/system theme