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 data cp -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 config

Data 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" %} {% block content %} <h1>{{ title }}</h1> {{ content | safe }} {% endblock %}

Available blocks:

  • head - Additional head content
  • header - Page header
  • content - Main content
  • footer - Page footer
  • scripts - Additional scripts

nav-tree.njk

Tree navigation with collapsible sections:

 {% include "nav-tree.njk" %} {# Or with custom data #} {% set navItems = customNavigation %} {% 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.njk title: About Us description: Learn about our company --- Content goes here...

docs.njk

Documentation layout with sidebar and TOC:

 --- layout: docs.njk title: Getting Started description: Learn the basics --- ## Introduction ...

blog.njk

Blog post layout with metadata:

 --- layout: blog.njk title: Post Title description: Post excerpt date: 2024-01-15 author: John Doe tags: - 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