Skip to content

A sample eleventy app using nunjucks components from @divriots/starter-nunjucks

Notifications You must be signed in to change notification settings

divriots/demo-nunjucks-eleventy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

layout title
default.njk
Nunjucks Components from a Design System

{{ title }}

This repository contains a demo of a simple Eleventy powered website, using Nujucks and Sass, and exploiting a Design System exposing their components in Nunjucks.

It uses the ‹div›RIOTS' Nunjucks Tech Sample Starter kit as a Design System.

Getting Started

Run the project locally:

  1. Clone the project:

    $ git clone https://github.com/divriots/demo-nunjucks-eleventy.git
    $ cd demo-nunjucks-eleventy
  2. Install the NPM dependencies

    $ npm install
  3. Run the app in development mode task so you can live-reload it during development:

    $ npm start
  4. Point your browser at http://localhost:8080/README. You'll get access to this very page, in wrapped in the default Nunjucks layout.

How it works?

This project uses Nunjucks templates. To be able to import Design System resources and components, it declares in the .eleventy.js js config an import path for Nunjucks pointing to the Design System in the node_modules folder:

new Nunjucks.FileSystemLoader([
  "_includes",
  "node_modules/@backlight-dev/divriots.starter-nunjucks/",
])

This way, you can import/include any component from the Design System as any regular Nunjucks files:

{% import "button/src/button.njk" as Button %}
{{ Button.btn('Hello Rioters 🤘 !') }}

Resources


The button below 👇 comes from the Design System and is embedded by the default layout, as well as the theme. Click it!

About

A sample eleventy app using nunjucks components from @divriots/starter-nunjucks

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published