zachleat
/ .eleventy.js
Created Jun 8, 2021
Use browser-sync in Eleventy without browser-sync JavaScript (opt-out of automatic page refresh)
View .eleventy.js
| module.exports = function(eleventyConfig) { | |
| eleventyConfig.setBrowserSyncConfig({ | |
| snippetOptions: { | |
| rule: { | |
| fn: function(snippet, match) { | |
| return match; | |
| } | |
| } | |
| } | |
| }); |
View index.html
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content=""> | |
| <title></title> | |
| </head> | |
| <body> | |
View queuecode.js
| /* | |
| Queue Code | |
| https://queuecode.zachleat.dev/ | |
| Usage: | |
| - Press any key to reveal the next character of source code. Use delete to hide characters. | |
| - Use the `url` query param to point to a different source code file. | |
| e.g. https://queuecode.zachleat.dev/?url=https://gist.githubusercontent.com/zachleat/a7393810acf7890e6bef6a34eaa7b78c/raw/smoothscroll.css |
zachleat
/ gist:dd68700493492517ae718c2f148debc2
Created Sep 11, 2020
Pretend PHP in Eleventy with Nunjucks
View gist:dd68700493492517ae718c2f148debc2
| // .eleventy.js | |
| let Nunjucks = require("nunjucks"); | |
| module.exports = function(eleventyConfig) { | |
| let env = Nunjucks.configure(".", { | |
| tags: { | |
| blockStart: '<?php', | |
| blockEnd: '?>', | |
| } | |
| }); |
zachleat
/ gist:f100f71a8ad2bad57d65511290717f1c
Created Sep 7, 2020
Eleventy Benchmark September 7, 2020 (Eleventy 1.0 Alpha Build)
View gist:f100f71a8ad2bad57d65511290717f1c
| --------------------------------------------------------- | |
| Eleventy Benchmark (Node v14.9.0, 1000 templates each) | |
| --------------------------------------------------------- | |
| Eleventy 0.10.0 | |
| --------------------------------------------------------- | |
| liquid: ... 3 runs | |
| * Median: 1.02 seconds | |
| * Median per template: 1 ms | |
| njk: ... 3 runs |
zachleat
/ smoothscroll.css
Created Aug 18, 2020
View smoothscroll.css
| html { | |
| scroll-behavior: smooth; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| } |
zachleat
/ gist:8cd9f1844c7144099c54533fff1b0a76
Created Apr 18, 2020
Eleventy Vue Responsive Images Plugin Sample Input/Output
View gist:8cd9f1844c7144099c54533fff1b0a76
| <responsive-image | |
| path="./src/images/home-store.jpg" | |
| alt="The front entrance to a store" | |
| :widths="[350, null]" /> | |
| <!-- BECOMES --> | |
| <picture> | |
| <source srcset="/v3/img/respimg/ef7c5bc4-350.webp 350w, /v3/img/respimg/ef7c5bc4.webp 589w" type="image/webp"> | |
| <source srcset="/v3/img/respimg/ef7c5bc4-350.jpeg 350w, /v3/img/respimg/ef7c5bc4.jpeg 589w" type="image/jpeg"> |
View .eleventy.js
| const eleventyVue = require("@11ty/eleventy-plugin-vue"); | |
| module.exports = function(eleventyConfig) { | |
| // Use Defaults | |
| eleventyConfig.addPlugin(eleventyVue); | |
| // OR, Use your own options | |
| eleventyConfig.addPlugin(eleventyVue, { | |
| // Directory for single file components (defaults to includes folder) | |
| componentsDirectory: "", |
zachleat
/ .eleventy.js
Last active Dec 10, 2019
— forked from crtr0/talk.njk
View .eleventy.js
| module.exports = function(eleventyConfig) { | |
| // you’ll have to get a list of all the tags in your talks.json here which is not great but pretty easy | |
| ["Web Assembly"].forEach(function(tag) { | |
| eleventyConfig.addCollection(tag, function(collection) { | |
| return collection.getFilteredByTag("talks").filter(item => { | |
| // note here the use of the pagination alias `talk` | |
| return (item.data.talk.tags || []).indexOf(tag) > -1; | |
| }); | |
| }); | |
| }); |
View img.njk
| <!-- throws an error, missing [alt] attribute --> | |
| {% img src="img/9a93578a.png", loading="lazy" %} | |
| <!-- local img source, outputs a standard <img> tag --> | |
| {% img src="img/9a93578a.png", alt="zachleat’s Avatar", loading="lazy" %} | |
| <!-- remote img source --> | |
| <!-- download using avatar-local-cache, outputs <picture> with webp and png fallback --> | |
| {% img src="https://www.gravatar.com/avatar/e1899004c71c7043343196103e210be3?default=404", alt="zachleat’s Avatar", loading="lazy" %} |
NewerOlder