jensgro

/**
 * Removes (index).html from a string
 *
 * @param {String} str URL, i.e. /page/index.html
 * @return {String} Permalinkable URL, i.e. /page/
 *
 */
module.exports = function (str) {
  return str.replace(/(?:index)?\.html/g, '');
};

jensgro

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);
  });

jensgro

/**
 * 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) {

jensgro

/**
 * 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
 *
 */

jensgro

a {
    color: #C0281C;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

jensgro

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);  
    }  

jensgro

/*
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

jensgro

// Stolen from https://stackoverflow.com/a/31615643
const appendSuffix = n => {
  var s = ['th', 'st', 'nd', 'rd'],
    v = n % 100;
  return n + (s[(v - 20) % 10] || s[v] || s[0]);
};

module.exports = function dateFilter(value) {
  const dateObject = new Date(value);

jensgro

Linklist for using 11ty (Eleventy)

The project itself has a very good documentation.

Linkcollections

• 11tybundle - huge link collection
• Awesome Eleventy
• 11ty Plugin Repository

jensgro

$fontBasePath: "../fonts/";
@mixin ff($name, $style, $weight, $path){
    @font-face {
        font-family: '#{$name}';
        font-style: #{$style};
        font-weight: $weight;
        src: local(''),
             url($fontBasePath+$path+'.woff2') format('woff2'), 
             url($fontBasePath+$path+'.woff') format('woff'); 
      }