https://github.com/divriots/starter-nunjucks

A simple Tech Sample starter kit based on Nunjucks for templating components
https://github.com/divriots/starter-nunjucks

Last synced: 11 months ago
JSON representation

A simple Tech Sample starter kit based on Nunjucks for templating components

• Host: GitHub
• URL: https://github.com/divriots/starter-nunjucks
• Owner: divriots
• License: mit
• Created: 2022-01-04T15:06:03.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-24T16:57:56.000Z (over 4 years ago)
• Last Synced: 2025-07-18T07:44:20.781Z (11 months ago)
• Language: Nunjucks
• Homepage: https://backlight.dev/doc/G9KcHezG3XVGa3tjILJI
• Size: 16.6 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme/doc/index.njk
  • License: LICENSE

Awesome Lists containing this project

README

          
{% extends "../../doc-layout/src/base.njk" %}

{% block default %}

Nunjucks Starter Kit



This is a simple Nunjucks-based Design System sample.



Tutorial: Use it as a Design System for your project


In this quick and guided tutorial, you'll use this Design System in your local Eleventy project.



Pre-requisites (in your local environment)





Create a new Eleventy app

$ mkdir my-11ty-app

$ cd my-11ty-app

$ npm init -y



Add the dependencies we'll need to run the project, like 11ty, and Sass for styling:

$ npm install @11ty/eleventy sass npm-run-all --save-dev



Add npm scripts to run your development tasks in your package.json file:

"scripts": {

  "watch:11ty": "eleventy --serve",

  "watch:sass": "sass --no-source-map --watch sass:_site/css",

  "watch": "npm-run-all build:sass --parallel watch:*",

  "build:sass": "sass --no-source-map sass:_site/css",

  "start": "npm-run-all watch"

}





In Backlight



Get the command to link your Design System in your local project.

To so, click the top-right button next to your avatar. You get a modal named Link, showing a npx backlight link ... command.

Copy it.



In your local project



ℹ️ In the following instructions, keep in mind to use the right path to your Design

System as set in the npm registry (e.g. @backlight-dev/john.design-system) .

Have a look at the node_modules folder.





Paste and execute the previously copied command. Validate default choices.



Edit the package.json Sass script to set import paths to the Design System root:

"watch:sass": "sass --load-path=node_modules/@backlight-dev/john.design-system --no-source-map --watch sass:_site/css",

"build:sass": "sass --load-path=node_modules/@backlight-dev/john.design-system --no-source-map sass:_site/css",



Add an .eleventy.js config file at the root level of your folder to set the Design System root in the Nunjucks' loading paths:

let Nunjucks = require("nunjucks");


module.exports = function (eleventyConfig) {

  eleventyConfig.addWatchTarget("./src/sass/");

  let nunjucksEnvironment = new Nunjucks.Environment(

    new Nunjucks.FileSystemLoader([

      "node_modules/@backlight-dev/divriots.starter-nunjucks/",

    ])

  );

  eleventyConfig.setLibrary("njk", nunjucksEnvironment);

};



Create your default 3 files:





README.md containing a simple page:

{% raw %}

---

layout: default.njk

title: My Page Using Design Systems Components

---


# {{ title }}

{% endraw %}





sass/main.scss importing the DS theme and the components styles:

@import "theme/src/theme.scss";

@import "button/src/_button.scss";







_includes/default.njk containing the base layout and importing the Button component from the Design System:









Run the npm start command to run the development environment, and point your browser to http://localhost:8080/README.

 



Have a look at your browser: your page was updated and you should see the Design System's Button component welcoming you, using the internal Design Tokens and Theme.



{# HTML template injected using JS due to parse error in Nunjucks #}

{# Maybe is worth it to add syntax highlighting this way? #}

{% raw %}

document.querySelector('#default_njk_file').innerHTML=`{% import "button/src/button.njk" as Button %}

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="stylesheet" href="/css/main.css">

    <title>{{ title }}</title>

  </head>

  <body>

    {{ Button.btn("Hello Rioters 🤘 !") }}

    {{ content | safe }} 

  </body>

</html>`;

{% endraw %}

{% endblock %}