Skip to content

Instantly share code, notes, and snippets.

View danfascia's full-sized avatar
🎲
Dabbling

danfascia

🎲
Dabbling
View GitHub Profile
@danfascia
danfascia / svg-pie-charts.html
Created December 23, 2018 18:55
Neat responsive SVG pie charts (no javascript)
<!--
Neat way to render responsive pie charts in HTML with SVGs and CSS from https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
-->
<style>
svg.piechart {
transform: rotate(-90deg);
background: #B0233B;
border-radius: 50%;
}
@danfascia
danfascia / 11ty_contains.js
Last active February 9, 2023 22:19
11ty filter to filter a collection (array) by key:value pair - used to filter on custom taxonomies other than tags (source: https://paulrobertlloyd.com/)
/**
* Select objects in array whose key includes a value
*
* @param {Array} arr Array to test
* @param {String} key Key to inspect
* @param {String} value Value key needs to include
* @return {String} Filtered array
*
*/
module.exports = function (arr, key, value) {
@danfascia
danfascia / 11ty_is.js
Created February 15, 2019 10:48
11ty filter to filter items in a collection (array) whose key === value. (source: https://paulrobertlloyd.com/)
/**
* Select objects in array whose key matches a value
*
* @param {Array} arr Array to test
* @param {String} key Key to inspect
* @param {String} value Value key needs to match
* @return {String} Filtered array
*
*/
module.exports = function (arr, key, value) {
@danfascia
danfascia / 11ty_permalink.js
Created February 15, 2019 10:51
Removes index.html from 11ty URL strings to create prettier permalinks. Usage {{url | permalink}} (source: https://paulrobertlloyd.com/)
@danfascia
danfascia / 11ty_date.js
Created February 15, 2019 12:21
11ty Date formatting filter using Luxon. Usage: {{ date_field | date('dd LLLL yyyy') }}
const { DateTime } = require("luxon");
// date filter formatting using Luxon. Usage: {{ date_field | date('dd LLLL yyyy') }}
eleventyConfig.addFilter("date", (it, format = "LLLL dd, yyyy") => {
return DateTime.fromJSDate(it, { zone: "utc" }).toFormat(format);
});
@danfascia
danfascia / 11ty_is-not.js
Created February 16, 2019 21:17
11ty filter to remove items from a filtered array by key:value pair - i.e. {% collection_array... | is-not: 'url', page.url %} (source: https://paulrobertlloyd.com/)
/**
* Remove objects in array whose key matches a value
*
* @param {Array} arr Array to test
* @param {String} key Key to inspect
* @param {String} value Value key needs to match
* @return {String} Filtered array
*
*/
module.exports = function (arr, key, value) {
@danfascia
danfascia / 11ty_excerpts.js
Created February 17, 2019 20:14
11ty filter to split a string {{content}} into an excerpt (i.e. all stuff before <!--more-->) and the remainder (i.e. stuff after that tag...). Source: https://hawksworx.com
/**
* Split the content into excerpt and remainder
*
* @param {String} str
* @param {String [excerpt | remainder]} section
*
* If excerpt or nothing is passed as an argument, we return what was before the split marker.
* If remainder is passed as an argument, we return the rest of the post
*
*/
@danfascia
danfascia / animated-underline-link.css
Created March 5, 2019 12:23
Animated underline from left to right on links
@danfascia
danfascia / toggleFullScreen.js
Created March 8, 2019 13:14
Toggle fullscreen javascript
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
@danfascia
danfascia / 11ty_getTagList.js
Created March 9, 2019 19:20
Used in config to create a collection (tagList) of tag names which can be iterated.
/*
Usage:
eleventyConfig.addCollection("tagList", require("11ty_getTagList.js") );
This collection then produces a useful list...
for tag in collections.tagList...
which then gives access to