Skip to content

Instantly share code, notes, and snippets.

Avatar
🚨
GitHub Drop ICE

Zach Leatherman zachleat

🚨
GitHub Drop ICE
View GitHub Profile
@zachleat
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;
}
}
}
});
@zachleat
zachleat / index.html
Created Mar 6, 2021
HTML Boilerplate
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>
@zachleat
zachleat / queuecode.js
Last active Mar 7, 2021
Queue Code Starter Gist
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
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
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
View smoothscroll.css
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@zachleat
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">
@zachleat
zachleat / .eleventy.js
Last active Mar 21, 2020
Eleventy + Vue Preview
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: "",
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;
});
});
});
@zachleat
zachleat / img.njk
Created Sep 5, 2019
Experimenting with a Nunjucks shortcode for images in Eleventy
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" %}