├── .gitignore
├── www
├── style.vars.css
├── style.css
└── index.html
├── src
├── _data
│ └── site.json
├── style.scss
├── style.vars.njk
└── index.njk
├── package.json
└── .eleventy.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/www/style.vars.css:
--------------------------------------------------------------------------------
1 |
2 | :root {
3 | --text-color: salmon;
4 | }
5 |
--------------------------------------------------------------------------------
/src/_data/site.json:
--------------------------------------------------------------------------------
1 | {
2 | "custom": {
3 | "text_color": "salmon"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/www/style.css:
--------------------------------------------------------------------------------
1 | @import url("style.vars.css");
2 | body {
3 | color: var(--text-color);
4 | }
--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
1 | @import url("style.vars.css");
2 |
3 | body {
4 | color: var(--text-color);
5 | }
6 |
--------------------------------------------------------------------------------
/src/style.vars.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: style.vars.css
3 | ---
4 |
5 | :root {
6 | --text-color: {{ site.custom.text_color }};
7 | }
8 |
--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Home
8 |
9 |
10 | Home
11 | Lorem Ipsum…
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | title: Home
3 | ---
4 |
5 |
6 |
7 |
8 | {# #}
9 |
10 | {{ title }}
11 |
12 |
13 | {{ title }}
14 | Lorem Ipsum…
15 |
16 |
17 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "11ty-1726",
3 | "description": "",
4 | "version": "1.0.0",
5 | "author": "Peter deHaan ",
6 | "bugs": {
7 | "url": "https://github.com/pdehaan/11ty-1726/issues"
8 | },
9 | "devDependencies": {
10 | "@11ty/eleventy": "^1.0.2",
11 | "sass": "^1.54.9"
12 | },
13 | "homepage": "https://github.com/pdehaan/11ty-1726#readme",
14 | "keywords": [],
15 | "license": "MPL-2.0",
16 | "main": ".eleventy.js",
17 | "repository": {
18 | "type": "git",
19 | "url": "git+https://github.com/pdehaan/11ty-1726.git"
20 | },
21 | "scripts": {
22 | "build": "eleventy",
23 | "serve": "eleventy --serve",
24 | "test": "echo \"Error: no test specified\" && exit 1"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
1 | const path = require("node:path");
2 | const sass = require("sass");
3 |
4 | /**
5 | * @typedef {import('@11ty/eleventy/src/UserConfig')} EleventyConfig
6 | * @typedef {ReturnType} EleventyReturnValue
7 | * @type {(eleventyConfig: EleventyConfig) => EleventyReturnValue}
8 | */
9 | module.exports = function (eleventyConfig) {
10 | eleventyConfig.addTemplateFormats("scss");
11 |
12 | eleventyConfig.addExtension("scss", {
13 | outputFileExtension: "css",
14 | compile(inputContent, inputPath) {
15 | const parsed = path.parse(inputPath);
16 | if (parsed.name.startsWith("_")) {
17 | return;
18 | }
19 |
20 | const loadPaths = [parsed.dir || ".", this.config.dir.includes];
21 | console.log(loadPaths, this.config.dir, inputContent);
22 | const result = sass.compileString(inputContent, {
23 | loadPaths
24 | });
25 | console.log("OK")
26 |
27 | return (data) => {
28 | return result.css;
29 | };
30 | }
31 | });
32 |
33 | return {
34 | dir: {
35 | input: "src",
36 | output: "www",
37 | }
38 | };
39 | };
40 |
--------------------------------------------------------------------------------