Eleventy Integration
Nunjucks templates and partials for building Eleventy sites with Vanilla Breeze.
Overview
The Eleventy integration provides Nunjucks templates, partials, and a starter configuration for 11ty projects. All templates follow Vanilla Breeze conventions.
Location: /integrations/eleventy/
Installation
Copy the integration files into your Eleventy project:
# Copy templates and datacp -r integrations/eleventy/_includes src/cp -r integrations/eleventy/_layouts src/cp -r integrations/eleventy/_data src/ # Copy starter config (or merge with existing)cp integrations/eleventy/.eleventy.js ./Directory Structure
eleventy/├── _includes/ # Nunjucks partials│ ├── base.njk # Base HTML template│ ├── nav-tree.njk # Tree navigation│ ├── nav-main.njk # Main header nav│ ├── page-toc.njk # Table of contents│ ├── code-block.njk # Code highlighting│ ├── browser-window.njk│ └── theme-toggle.njk├── _data/ # Global data files│ ├── site.json # Site metadata│ └── navigation.json # Navigation structure├── _layouts/ # Page layouts│ ├── page.njk # Basic page│ ├── docs.njk # Documentation page│ └── blog.njk # Blog post├── assets/│ └── vb-eleventy.css # 11ty-specific styles└── .eleventy.js # Starter configData Files
site.json
Site metadata available as site.* in templates:
{ "title": "Site Name", "description": "Site description", "url": "https://example.com", "lang": "en", "author": { "name": "Your Name", "email": "hello@example.com" }}navigation.json
Navigation structure for menus:
{ "main": [ { "label": "Home", "href": "/" }, { "label": "Docs", "href": "/docs/" } ], "items": [ { "label": "Getting Started", "href": "/docs/start/" }, { "label": "Components", "children": [ { "label": "Button", "href": "/docs/button/" } ] } ]}Partials
base.njk
Base HTML template with block inheritance:
{% extends "base.njk" %} <template slot="content"> <h1>${title}</h1> {{ content | safe }}</template>Available blocks:
head- Additional head contentheader- Page headercontent- Main contentfooter- Page footerscripts- Additional scripts
nav-tree.njk
Tree navigation with collapsible sections:
{% include "nav-tree.njk" %} {# Or with custom data #}{% include "nav-tree.njk" %}Automatically highlights current page and opens ancestor sections.
page-toc.njk
Table of contents (requires toc data from plugin):
{% include "page-toc.njk" %}theme-toggle.njk
Theme switcher button:
{% include "theme-toggle.njk" %}Layouts
page.njk
Basic page layout with centered content:
---layout: page.njktitle: About Usdescription: Learn about our company---Content goes here...docs.njk
Documentation layout with sidebar and TOC:
---layout: docs.njktitle: Getting Starteddescription: Learn the basics---## Introduction...blog.njk
Blog post layout with metadata:
---layout: blog.njktitle: Post Titledescription: Post excerptdate: 2024-01-15author: John Doetags: - css - web---Post content...Shortcodes
The starter config includes these shortcodes:
codeBlock
{% codeBlock "javascript", "example.js" %}const greeting = "Hello";console.log(greeting);{% endcodeBlock %}browserWindow
{% browserWindow "/demos/example.html", "https://example.com", "Demo" %}icon
{% icon "search", "sm" %}Filters
| Filter | Description | Example |
|---|---|---|
dateFormat |
Format date as "January 15, 2024" | {{ date | dateFormat }} |
dateToISO |
Convert to ISO 8601 string | {{ date | dateToISO }} |
slugify |
Convert string to URL slug | {{ tag | slugify }} |
startsWith |
Check if string starts with prefix | {% if url | startsWith("/docs/") %} |
Collections
The starter config provides these collections:
posts- Blog posts sorted by date (newest first)tagList- All unique tags from posts
{# List all posts #}{% for post in collections.posts %} <article> <h2><a href="${post.url}">${post.data.title}</a></h2> <time>{{ post.date | dateFormat }}</time> </article>{% endfor %} {# List all tags #}{% for tag in collections.tagList %} <a href="/blog/tags/{{ tag | slugify }}/">${tag}</a>{% endfor %}Styles
Import vb-eleventy.css for 11ty-specific styles:
- Pagination styling
- Tag list patterns
- Post list layouts
- Collection navigation (prev/next)
- Prism.js syntax highlighting
- Markdown content styling