Extract frontmatter from markdown files

Cargo.toml

@@ -19,8 +19,11 @@ notify = "6.1.1"
 num_cpus = "1.16.0"
 once_cell = "1.20.2"
 rouille = "3.6.2"
+serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0.120"
+serde_yaml = "0.9"
 simple-websockets = "0.1.6"
+toml = "0.8"
 
 [[bin]]
 name = "simple"

README.md

@@ -193,7 +193,51 @@ Will render out to:
 
 You can also use the template syntax to render entries from files.
 
-Take this `src/data/Posts.data.json`:
+#### Using Frontmatter (Recommended)
+
+Instead of manually maintaining a JSON file, you can extract metadata from YAML frontmatter in your markdown files:
+
+**File structure:**
+```
+src/data/Posts/
+├── my-first-post.md
+├── another-post.md
+└── Posts.data.toml
+```
+
+**`src/data/Posts.data.toml`** - Specifies which files to include and their order:
+```toml
+files = [
+  "my-first-post.md",
+  "another-post.md"
+]
+```
+
+**`src/data/Posts/my-first-post.md`** - Markdown file with YAML frontmatter:
+```markdown
+---
+title: My First Post
+description: This is my first blog post
+date: Jan 1 2025
+---
+
+# Content here
+
+Your markdown content...
+```
+
+The frontmatter will automatically generate the data needed for templating. The following fields are auto-generated:
+- `--entry-path`: Set to the markdown file path
+- `--result-path`: Set to `content/{filename}.html`
+- `link`: Set to `./content/{filename}.html`
+
+All other frontmatter fields (like `title`, `description`, `date`) are available as template variables.
+
+**Required fields:** Only `title` is required in the frontmatter.
+
+#### Using JSON (Legacy)
+
+Alternatively, you can use the older JSON format. Take this `src/data/Posts.data.json`:
 
 ```json
 [

example/README.md

@@ -0,0 +1,96 @@
+# Simple Frontmatter Example
+
+This example demonstrates how to use YAML frontmatter in markdown files with Simple.
+
+## Structure
+
+```
+example/
+├── src/
+│   ├── data/
+│   │   ├── Posts.data.toml              # Configuration listing files
+│   │   └── Posts/
+│   │       ├── my-first-post.md         # Blog post with frontmatter
+│   │       ├── getting-started.md       # Another blog post
+│   │       └── advanced-features.md     # Yet another post
+│   ├── templates/
+│   │   ├── Posts.template.html          # Template for post cards
+│   │   └── Posts.frame.html             # Frame for individual post pages
+│   ├── pages/
+│   │   └── index.html                   # Main page that lists all posts
+│   └── public/
+│       └── (static assets go here)
+```
+
+**Important**: The TOML configuration file (`Posts.data.toml`) goes in `src/data/`, while the markdown files go in `src/data/Posts/`.
+
+## How It Works
+
+1. **Markdown files with frontmatter**: Each `.md` file in `data/Posts/` contains YAML frontmatter with metadata:
+   ```markdown
+   ---
+   title: My Post
+   description: A great post
+   date: Jan 15 2025
+   author: John Doe
+   ---
+
+   # Content here...
+   ```
+
+2. **TOML configuration**: `Posts.data.toml` specifies which files to include and in what order:
+   ```toml
+   files = [
+     "my-first-post.md",
+     "getting-started.md",
+     "advanced-features.md"
+   ]
+   ```
+
+3. **Template file**: `Posts.template.html` defines how each post appears in the list on the index page
+
+4. **Frame file**: `Posts.frame.html` defines the layout for individual post pages
+
+5. **Index page**: `index.html` uses `<-Template{Posts} />` to render all posts
+
+## Building
+
+From the repository root:
+
+```bash
+# Build the example
+./target/release/simple build example
+
+# Or run in development mode
+./target/release/simple dev example
+```
+
+The built site will be in `example/dist/`.
+
+## What Gets Generated
+
+- `dist/index.html` - Main page listing all posts
+- `dist/content/my-first-post.html` - Individual post page
+- `dist/content/getting-started.html` - Individual post page
+- `dist/content/advanced-features.html` - Individual post page
+
+## Customization
+
+You can add any fields you want to the frontmatter:
+
+```yaml
+---
+title: Required field
+description: Optional
+author: Optional
+date: Optional
+tags: Optional
+readtime: Optional
+custom_field: Optional
+anything_you_want: Optional
+---
+```
+
+All fields become available as template variables: `${title}`, `${author}`, `${custom_field}`, etc.
+
+Only `title` is required!

example/src/data/Posts.data.toml

@@ -0,0 +1,8 @@
+# List of markdown files to include as blog posts
+# Files are processed in the order listed here
+
+files = [
+  "my-first-post.md",
+  "getting-started.md",
+  "advanced-features.md"
+]

example/src/data/Posts/advanced-features.md

@@ -0,0 +1,89 @@
+---
+title: Advanced Features in Simple
+description: Exploring components, slots, and custom templates
+date: Jan 25 2025
+author: John Doe
+tags: advanced, components, templates
+readtime: 8 min
+featured: true
+---
+
+# Advanced Features in Simple
+
+Now that you're familiar with the basics, let's explore some of Simple's more advanced features.
+
+## Components with Props
+
+Components can accept props to make them more flexible:
+
+```html
+<Button color="blue" size="large">Click Me</Button>
+```
+
+In your component file:
+
+```html
+<button class="btn btn-${color} btn-${size}">
+  <slot>Default Text</slot>
+</button>
+```
+
+## Nested Components
+
+You can organize components in folders:
+
+```html
+<Layout:Header />
+<Layout:Footer />
+<Common:Card title="My Card" />
+```
+
+## Template Entries with Frontmatter
+
+The real power comes from combining templates with frontmatter. Instead of maintaining separate JSON files, you can extract all metadata directly from your markdown files!
+
+### Before (the old way):
+
+```json
+{
+  "title": "My Post",
+  "description": "...",
+  "link": "./content/my-post.html",
+  "--entry-path": "Posts/my-post.md",
+  "--result-path": "content/my-post.html"
+}
+```
+
+### After (the new way):
+
+```markdown
+---
+title: My Post
+description: ...
+---
+
+Content here...
+```
+
+Much cleaner! The `--entry-path`, `--result-path`, and `link` fields are automatically generated.
+
+## Custom Markdown Rendering
+
+You can use the `<markdown>` component anywhere:
+
+```html
+<markdown>
+  # This is rendered as markdown
+
+  **Bold text** and *italic text*
+</markdown>
+```
+
+## Tips and Tricks
+
+1. **Use frame files** for consistent layouts across entries
+2. **Keep components small** and focused on one thing
+3. **Use frontmatter** for all your metadata needs
+4. **Leverage slots** for flexible component content
+
+Happy building!