11ty

A beautiful yet powerful syntax highlighter

On Monday, I shared a new interactive Code Sandbox I had built using vanilla JavaScript, and explained how I live render code into an iframe. Today, I wanted to share how I syntax highlight code as the user types in real time. Let’s dig in! The one simple trick that makes this work! I tried a bunch of things to get this to work, but the trick that made it happen ended up being stupidly simple.

Short and quick tutorial on how to embed custom HTML content between post paragraphs on an Eleventy site.

How to create a github pages website made with eleventy

An Eleventy 2 Starter Project with Vite

A blog post about how my site works based on a talk I did at the Eleventy meetup

I am trying to write a nunjucks template that loops through an outer array and populates columns, then loops through a nested array to make rows in each column. So, my data structure looks something

Nunjucks is a powerful template engine that allows to loop through arrays and also objects 😏...

I am trying to select 2 media elements per div rendered using the receptar theme in each rendering of blog_item element. In other words, I need to display a container that holds divs, where each div displays two images. The first div would have image1 and image2, the second dive would have image3 and image4, etc… My blog_item.html.twig looks like this: div id="post-{{ loop.index }}" class="post-{{ loop.index }} post type-post status-publish format-standard has-post-thumbnail hentry category-ca...

Explore the essentials of Eleventy's folder structure in this guide, perfect for optimizing your project's efficiency and scalability. Learn from basic setups to advanced custom structures, ensuring your 11ty site is perfectly organized for peak performance.

In VS Code, you don't get autocompletion in your eleventy config. You don't get info about functions when you hover over them. Here is how you add it.

A simple guide, explaining step by step how to deploy your Eleventy website to GitHub Pages with the help of GitHub Actions.

How to create a github pages website made with eleventy

Using 11ty's Data Cascade and some simple random number generation we can get a website theme that changes every time it's rebuilt.

Automating adding side projects to my portfolio site

The internet home of Danny White, a freelance product designer in Melbourne, Australia.

The internet home of Danny White, a freelance product designer in Melbourne, Australia.

We can make links that point away from our static site open in a new tab by pre-processing them at build time with a custom MarkdownIt plugin.

The internet home of Danny White, a freelance product designer in Melbourne, Australia.

Our lorem ipsum website project launched

The quest: how could I mark a link or blog post as “good”, and have it show up in my blog on a Sunday without me having to do anything?

Add HTML classes to style your markdown content in 11ty, using markdown-it-attrs plugin.

I design and build websites, web applications, and data visualizations. I’ve been known to play fiddle from time to time and board games.

Describes how to hide posts with a future publishing date in an Eleventy site.

A flexible icon family for interfaces, diagrams, presentations — whatever, really. - reatlat/eleventy-plugin-phosphoricons: A flexible icon family for interfaces, diagrams, presentations — whatever...

Step-by-step guide for a deployment of your 11ty blog using rsync, npm deploy scripts and optimization for an efficient workflow.

Some considerations for using WordPress as a headless content management system for Eleventy.

Some considerations for setting up WordPress to use with Eleventy.

How to use "featured" posts to highlight important content.