{"id":20054404,"url":"https://github.com/divriots/starter-nunjucks","last_synced_at":"2025-07-19T03:04:46.870Z","repository":{"id":44788497,"uuid":"444462355","full_name":"divriots/starter-nunjucks","owner":"divriots","description":"A simple Tech Sample starter kit based on Nunjucks for templating components","archived":false,"fork":false,"pushed_at":"2022-01-24T16:57:56.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-18T07:44:20.781Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://backlight.dev/doc/G9KcHezG3XVGa3tjILJI","language":"Nunjucks","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/divriots.png","metadata":{"files":{"readme":"readme/doc/index.njk","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-04T15:06:03.000Z","updated_at":"2022-01-19T11:40:41.000Z","dependencies_parsed_at":"2022-09-08T02:37:19.109Z","dependency_job_id":null,"html_url":"https://github.com/divriots/starter-nunjucks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/divriots/starter-nunjucks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-nunjucks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-nunjucks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-nunjucks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-nunjucks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/starter-nunjucks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-nunjucks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265879173,"owners_count":23843079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T12:40:21.247Z","updated_at":"2025-07-19T03:04:46.844Z","avatar_url":"https://github.com/divriots.png","language":"Nunjucks","funding_links":[],"categories":[],"sub_categories":[],"readme":"{% extends \"../../doc-layout/src/base.njk\" %}\n\n{% block default %}\n\n\u003ch1\u003eNunjucks Starter Kit\n\u003c/h1\u003e\n\n\u003cp\u003eThis is a simple \u003ca href=\"https://mozilla.github.io/nunjucks/\"\u003eNunjucks\u003c/a\u003e-based Design System sample.\n\u003c/p\u003e\n\n\u003ch2\u003eTutorial: Use it as a Design System for your project\u003c/h2\u003e\n\n\u003cp\u003eIn this quick and guided tutorial, you'll use this Design System in your local Eleventy project.\n\u003c/p\u003e\n\n\u003ch3\u003ePre-requisites (in your local environment)\n\u003c/h3\u003e\n\n\u003col\u003e\n\u003cli\u003eCreate a new Eleventy app\n\u003cpre\u003e\u003ccode\u003e$ mkdir my-11ty-app\n$ cd my-11ty-app\n$ npm init -y\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003cli\u003eAdd the dependencies we'll need to run the project, like 11ty, and Sass for styling:\n\u003cpre\u003e\u003ccode\u003e$ npm install @11ty/eleventy sass npm-run-all --save-dev\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003cli\u003eAdd npm scripts to run your development tasks in your \u003ccode\u003epackage.json\u003c/code\u003e file:\n\u003cpre\u003e\u003ccode\u003e\"scripts\": {\n  \"watch:11ty\": \"eleventy --serve\",\n  \"watch:sass\": \"sass --no-source-map --watch sass:_site/css\",\n  \"watch\": \"npm-run-all build:sass --parallel watch:*\",\n  \"build:sass\": \"sass --no-source-map sass:_site/css\",\n  \"start\": \"npm-run-all watch\"\n}\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003eIn Backlight\n\u003c/h3\u003e\n\n\u003cp\u003eGet the command to link your Design System in your local project.\nTo so, click the top-right button next to your avatar. You get a modal named Link, showing a \u003ccode\u003enpx backlight link ...\u003c/code\u003e command.\nCopy it.\n\u003c/p\u003e\n\n\u003ch3\u003eIn your local project\n\u003c/h3\u003e\n\n\u003cp\u003eℹ️ In the following instructions, keep in mind to use the right path to your Design\nSystem as set in the \u003cem\u003enpm\u003c/em\u003e registry (e.g. \u003ccode\u003e@backlight-dev/john.design-system\u003c/code\u003e) .\nHave a look at the \u003ccode\u003enode_modules\u003c/code\u003e folder.\n\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003ePaste and execute the previously copied command. Validate default choices.\n\u003c/li\u003e\n\u003cli\u003eEdit the \u003ccode\u003epackage.json\u003c/code\u003e Sass script to set import paths to the Design System root:\n\u003cpre\u003e\u003ccode\u003e\"watch:sass\": \"sass --load-path=node_modules/@backlight-dev/john.design-system --no-source-map --watch sass:_site/css\",\n\"build:sass\": \"sass --load-path=node_modules/@backlight-dev/john.design-system --no-source-map sass:_site/css\",\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003cli\u003eAdd an \u003ccode\u003e.eleventy.js\u003c/code\u003e config file at the root level of your folder to set the Design System root in the Nunjucks' loading paths:\n\u003cpre\u003e\u003ccode\u003elet Nunjucks = require(\"nunjucks\");\n\nmodule.exports = function (eleventyConfig) {\n  eleventyConfig.addWatchTarget(\"./src/sass/\");\n\n  let nunjucksEnvironment = new Nunjucks.Environment(\n    new Nunjucks.FileSystemLoader([\n      \"node_modules/@backlight-dev/divriots.starter-nunjucks/\",\n    ])\n  );\n  eleventyConfig.setLibrary(\"njk\", nunjucksEnvironment);\n};\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003cli\u003eCreate your default 3 files:\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eREADME.md\u003c/code\u003e containing a simple page:\n{% raw %}\n\u003cpre\u003e\u003ccode\u003e---\nlayout: default.njk\ntitle: My Page Using Design Systems Components\n---\n\n# {{ title }}\u003c/code\u003e\u003c/pre\u003e\n{% endraw %}\n\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003esass/main.scss\u003c/code\u003e importing the DS theme and the components styles:\n\u003cpre\u003e\u003ccode\u003e@import \"theme/src/theme.scss\";\n@import \"button/src/_button.scss\";\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e_includes/default.njk\u003c/code\u003e containing the base layout and importing the \u003ccode\u003eButton\u003c/code\u003e component from the Design System:\n\u003cpre\u003e\u003ccode id=\"default_njk_file\"\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eRun the \u003ccode\u003enpm start\u003c/code\u003e command to run the development environment, and point your browser to \u003ca href=\"http://localhost:8080/README\"\u003ehttp://localhost:8080/README\u003c/a\u003e.\n\u003c/li\u003e \n\u003c/ol\u003e\n\n\u003cp\u003eHave a look at your browser: your page was updated and you should see the Design System's \u003ccode\u003eButton\u003c/code\u003e component welcoming you, using the internal Design Tokens and Theme.\n\u003c/p\u003e\n\n{# HTML template injected using JS due to parse error in Nunjucks #}\n{# Maybe is worth it to add syntax highlighting this way? #}\n{% raw %}\n\u003cscript\u003e\ndocument.querySelector('#default_njk_file').innerHTML=`{% import \"button/src/button.njk\" as Button %}\n\n\u0026lt;!DOCTYPE html\u003e\n\u0026lt;html lang=\"en\"\u003e\n  \u0026lt;head\u003e\n    \u0026lt;meta charset=\"utf-8\"\u003e\n    \u0026lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\u003e\n    \u0026lt;link rel=\"stylesheet\" href=\"/css/main.css\"\u003e\n    \u0026lt;title\u003e{{ title }}\u0026lt;/title\u003e\n  \u0026lt;/head\u003e\n  \u0026lt;body\u003e\n    {{ Button.btn(\"Hello Rioters 🤘 !\") }}\n    {{ content | safe }} \n  \u0026lt;/body\u003e\n\u0026lt;/html\u003e`;\n\u003c/script\u003e\n{% endraw %}\n\n{% endblock %}","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-nunjucks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Fstarter-nunjucks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-nunjucks/lists"}