Shortcodes 51 posts

How I decomposed an 866-line .eleventy.js monolith into four focused modules, fixed some lurking bugs, and eliminated dead CSS and dead dependencies along the way.

Brennan Kenneth Brown (13)

A technical walkthrough on how I heavily optimized (and some would argue over-engineered) the CSS loading path on this Eleventy website.

Kitty Giraudel (16)

Video, links and code samples from my rapid prototyping talk for the final Eleventy Meetup.

Tyler Sticka (5)

How to integrate the baseline-status web component into Eleventy (Build Awesome) with per-page opt-in loading, Nunjucks shortcodes, and self-hosted scripts. Learn why Baseline provides clearer browser support signals than Can I Use for modern web features.

Stuart Robson (1)

In this post, I will show you how I integrate Brotli level 11 compression directly into my 11ty build process to squeeze every possible byte out of my blog’s HTML.

Matt Hobbs (8)

A technical walkthrough of how I extended the eleventy-plugin-post-graph to add clickable links and hover tooltips showing article titles.

Brennan Kenneth Brown (13)

What finally worked to embed Mastodon posts in Eleventy: a tiny shortcode that lets embed.js set height and supports a clean full-bleed layout.

Kyle Reddoch (8)

A post by Zach Leatherman (zachleat)

Zach Leatherman (88)

DSri Seah (2)

Alex Russell on browsers, standards, and the process of progress.

Alex Russell (1)

“Discover Brewventy, a customizable coffee-themed Eleventy starter with dark/light modes, SCSS-driven theming, and built-in deployment workflows for effortless site launches.”

Kyle Reddoch (8)

How to migrate a blog from Dotclear on to eleventy 4- Rebuild pages and navigation

Alix Guillard (4)

making a static gallery with 11ty

tlohde (2)

Quick start to production-ready Eleventy shortcodes: responsive images with @11ty/eleventy-img and inline SVG helpers you can copy-paste and use immediately.

Emiliano Soravia (2)

Hi, I’m Jeremy. I build things on the web and share what I learn on my blog.

Jeremy Robert Jones (1)

JavaScript that calculates the number of years that have passed since a given date, utilized in an Eleventy shortcode.

Marc Amos (1)

Blog about programming, scientific machine learning and the related techniques and methods.

Valentin Pratz (2)

Add a low-quality webp placeholder image to the HTML of your site

Stefan Burke (4)

a simple shortcode to add QR codes to your posts

Al Power (9)

Sacha Chua (4)

In this blog post, I'll show you how I've written an 11ty Shortcode to manipulate my CSS file, thus allowing for optimal long-life cache-control response headers. Any feedback on this build process would be greatly appreciated.

Matt Hobbs (8)

Increasingly I've been including 11ty in my WordPress builds as part of the theme. Great for static assets, such as

Rich Holman (2)

Learn how to use Eleventy to add dynamic, random content like film quotes or targeted Q&A sections to your website. A step-by-step guide with practical examples and code snippets.

Stu Robson (1)

Blog about programming, scientific machine learning and the related techniques and methods.

Valentin Pratz (2)

John M. Wargo (47)

Automatically generate unique Open Graph images for each page of your website

Sia Karamalegos (13)

I recently felt like getting back into blogging. But setting up and maintaining WordPress felt like more than I was looking for. I was looking for something much simpler. Preferably file-based and with Markdown support. That was my introduction to Eleventy.

Sebin Nyshkim (3)

A blog about CSS, front-end development, the web, and beyond.

Michelle Barker (5)

After organising Eleventy filters, shortcodes etc I had an idea to tidy the code even more and make it dynamic. I wanted to automatically import any new functions that were added, including new when using files.

Trevor Morris (8)

I work a lot with the Laravel framework, which scaffolds much of your initial setup and has conventions for where code should be stored. Starting a brand new Eleventy project from scratch doesn't give you this boilerplate and means you have to make decisions about where everything lives.

Trevor Morris (8)

Using templates, shortcodes, and the Eleventy supplied data for highlighting the current page in navigation

nonnullish (3)

Turning your Mastodon archive into a web site with Eleventy

Raymond Camden (105)

JavaScript code to convert Obsidian image links to Nunjucks short codes.

Amy Khar (1)

The missing getting-started guide for the Eleventy (11ty) static-site generator.

Sean McPherson (3)

If it ain’t broke, clearly you gotta fix it.

Mark Llobrera (8)

Documenting a refactor that introduced a folder structure and configuration changes, which summarises how I Eleventy.

Declan Byrd (2)

post collections, data files, other messiness.

anh (3)

I decided to take on some overdue refactoring of the 11tybundle.dev site. Here's what I did.

Bob Monsour (26)

Keith Wagner (5)

I'm equilibriumuk, a software engineer. I write about programming & computer related topics

equilibriumuk (21)

Simon Cox outlines how to properly set up and use the 11ty image shortcode, fixing issues with high-res sources, spacing in markdown, and rendering bugs.

Simon Cox (17)

I wanted to have image galleries on my site and Eleventy didn't have any plugins that did this already. So I added support for it on my own.

Prabashwara Seneviratne (1)

Don't know what eleventy is? Before you read further, check out this amazing series of articles by... Tagged with webdev, javascript, beginners, eleventy.

Murtuzaali Surti (5)

Storybook is great for component-driven development. This blog post shows you how to use Storybook with 11ty.

Paul Everitt (2)

Turn on emoji shortcodes in markdown files in Eleventy by adding the markdwon-it-emoji plugin.

Wes Goulet (1)

Some cunning ways to use Nunjucks and 11ty shortcodes for reusable blocks

Laurence Hughes (4)

Use this shortcode and filter as a starting point for your date transformation needs.

Stephanie Eckles (21)

Jan 20, 2021 10:00 AM PST —

Michael Chan (7)

Sometimes it’s a little confusing what the difference between shortcodes, data and filters really is, and frankly the boundaries can become a little blurred with 11ty.

Mike (1)

This is the third part of the Let't Learn Eleventy series. We'll learn how to use slots, includes and shortcodes.

Rares Portan (5)

My adventures in the land of 11ty plugins, Feedbin, and NPM.

Timothy Miller (3)