11ty Rocks!

11ty.rocks · English

A collection of Eleventy (11ty) starters, projects, plugins, and resources created by Stephanie Eckles (@5t3ph).

atom

Open the feed

https://11ty.rocks/feed/

Last post: Mar 18, 2023
Posts in 24 h · 7 days · 30 days: 0 · 0 · 0
Our last check: Answering
Served from: Brazil
Format: atom

Posts

What our queue read from this feed. Open one to read it here, or go to the site that published it.

Smart Incremental Rebuilds With eleventyImport
Mar 18, 2023 · original
The Eleventy v2 release improved incremental builds in several ways. However, a standing issue had been that when you display content from a collection and run an incremental build, that content wouldn't be updated in-sync. You would have to stop an restart your build, or opt back out of incremental local dev. An additional method was added in v2 to resolve this behavior, and allow you to define which collections can re-build an associated template. Using eleventyImport # The eleventyImport object can be added via front matter with one child parameter of collections that has an array value. The array should contain the names of any collections you process content from on the page. The docs for this feature give a post collection as the example: --- eleventyImport: collections: ["post"] --- ul {%- for post in collections . post -%} li {{ post . data . title }} / li {%- endfor -%} / ul Whe
Process CSS or Sass With LightningCSS
Feb 25, 2023 · original
To easily process CSS with Sass and/or LightningCSS, simply grab these plugins: Sass and LightningCSS LightningCSS only I've written a comparison of using Sass vs only LightningCSS if you're unsure which method you'd like to use. If you want to learn how they work or how to more manually include these in your Eleventy build, read on! Custom Template Languages in Eleventy # A powerful feature added in the Eleventy v1 release was the ability to add custom template extensions and template formats. Additionally, you can include a custom compile function. This opens the possibility to extend processing during build to tools like Sass, or run additional processing against already recognized types like JavaScript such as to minify. Or, as the docs show , you can even invent a file type in order to customize the output in some way. We'll be taking advantage of this feature to add our custom proc
Plugin: Collection Schemas
Feb 17, 2023 · original
Enforce a typed frontmatter schema for templates within an Eleventy collection. Define a unique schema per collection, then receive output during development and builds to note incorrectly typed, missing, invalid, or misplaced custom data keys. Docs for Collection Schemas
Eleventy Collection Schemas
Feb 17, 2023 · original
A standout feature of Eleventy is the data cascade . This is the priority order of how global data, front matter data, and other data sources are computed for a given template. Additionally, Eleventy allows the creation of collections of data . Often the reason for a collection is that the content has shared traits. Let's consider a collection of blog posts, where your layout assumes availability of the following bits of data: title description excerpt None of these are going to be enforced or type-checked by Eleventy. But perhaps its important to you to make title and description required keys. Or in the future, you add a draft key that you want to ensure is a boolean, or an order field that should be a number. Introducing: Collection Schemas # Collection Schemas is an Eleventy plugin that allows you to enforce a typed frontmatter schema for templates within an Eleventy collection. It w
Plugin: Sass + LightningCSS
Feb 2, 2023 · original
Compile Sass in Eleventy (11ty) and process it with LightningCSS to minify, prefix, and add future CSS support. Also respects either your package.json browserslist or a .browserslistrc, otherwise the default targets are 0.2% and not dead. Requires Eleventy v2 beta or stable. Add Sass to 11ty
11ty Membership Site
Jan 26, 2023 · original
An Eleventy theme for offering premium content to members by using Edge-powered authentication. Requires Supabase and Netlify accounts. Review this article on the high-level membership theme concepts to learn how members-only content works. Get this theme
Building A Membership Site With 11ty
Jan 26, 2023 · original
Spoiler : This is available as an Eleventy theme over on GitHub. Read on to explore key concepts about developing using Eleventy Edge. A new feature with Eleventy v2 (currently in beta) is Eleventy Edge. What is "the Edge?" Here's a super brief summary: Low-latency nodes geographically close to the user Faster processing of Edge functions vs. serverless Retrieve user-specific data, ex. timezone, cookies “Middleware” to intercept page requests before they are rendered Allow redirecting or modifying requested content These features allow us to enable authenticated routes for our 11ty site. And the opt-in Eleventy Edge plugin enables us to add and use Edge-generated data within otherwise static 11ty templates. Prerequisites # 11ty v2 beta+ (included in the membership theme ) Netlify account Netlify CLI Supabase account Additionally, opting-in to the Eleventy Edge plugin . This is not a sepa
11ty Community Links: January 2023
Jan 21, 2023 · original
Chris Coleman - “ Using Eleventy filters in Directory Computed Data ” - shows how a switch to using 11tydata.js instead of JSON for data directory files allows regular JS and therefore more complex logic to work out assigning values for computed data. Benny Powers - “ SVG Icon Sprites in Eleventy ” - uses a technique of creating a collection out of a directory of SVG icons and programmatically turning those into an SVG sprite, and a clever way to add the sprite only once per page where at least one of the associated shortcodes is used. Vadim Makeev - “ CSS and JavaScript as first-class citizens in Eleventy ” - shows how to use the v2 additions of addTemplateFormats and addExtension to process CSS and JS. David Darnes - “ Compile JavasScript and Sass in Eleventy using Uglify JS and Sass lib ” - is a gist that gives a little different take from Vadim’s article but using the same 11ty featu
New Features and Upgrade Considerations for Eleventy v2.0.0
Jan 12, 2023 · original
2.0.0 canaries have been available for quite some time, and creator Zach Leatherman has helpfully been updating the docs by adding labels to note when a feature became available. The 2.0.0 release is available as of February 8, 2023, which includes the changes noted in this article. Recently, I set out to create a new Eleventy project for the first time in a few months using the latest Canary and hit some unexpected errors. That led me down the rabbit hole to see what exactly had changed so I could be prepared to update projects, especially as I use similar setups cross-project and maintain a few 11ty starters. This may not be 100% comprehensive, but it includes the most impactful highlights for general use of 11ty. If it’s been a while since you created or updated an Eleventy project, you may want to glance at the last section for features you might have missed from v1.0.0 . Major Featu
Understanding WebC Features and Concepts
Oct 24, 2022 · original
If you haven’t yet heard of WebC, check out another 11ty Rocks article, Introduction to WebC . Including WebC components outside of .webc templates # One option for using WebC is to go all in and start defining your templates using the .webc extension. If you do that, you’ll also get access to any components you define due to already being within a WebC context. For myself, I want to use my WebC components within other templates that I already have. Typically, I favor Nunjucks and Markdown for my 11ty projects. One way to make WebC components available to other template types is by listing the path under the components option for the WebC plugin (aka “ global no-import components ”). The gotcha here is when you have also customized your 11ty input directory to something besides the default of the project root. The components path is root-relative as opposed to input directory relative ,
Introduction to WebC
Oct 15, 2022 · original
WebC is a new tool by Zach Leatherman (creator of Eleventy) for serializing custom elements at build time. It aggregates component-level CSS and JavaScript, allowing developers to keep their styles and scripts together with the markup as single file components, the way you may be used to if you work with JavaScript frameworks such as Svelte or Vue . All without having to ship a single line of JavaScript to the client — unless you want it to. WebC in a nutshell # First and foremost: WebC components are just HTML. If you already know how to write HTML, CSS, and JavaScript, you are ready to start working with WebC. Let’s define our first component: a footer for our site. We’ll create a file called site-footer.webc and put in it the following HTML: !-- site-footer.webc -- footer p © 2022 Yours Truly / p / footer Now we can use a site-footer/site-footer custom element and WebC will repla
Ignore Eleventy Files With Environment Variables
Mar 25, 2022 · original
In this example, we exclude the "__docs" directory from a production build. Environment variables are injected as part of either the "start" or "build" command, with the cross-env package used to ensure compatibility with Mac or PC. Watch how this works, or continue reading and review the code snippets. Check out the design system project on GitHub . Step one: Include environment variables # When developing an Eleventy project, it's common to include a couple of commands in package.json to run Eleventy as a local server and then to do a production-ready build for a web host. Here's an example of a very basic set of scripts: // located in package.json "scripts" : { "start" : "npx @11ty/eleventy --serve" , "build" : "npx @11ty/eleventy" } , I recommend running npm install cross-env so that including environment variables at this state works for both PC and Mac users. We'll update both of o
Creating and Using Eleventy Collections
Nov 11, 2021 · original
What Are Collections? # Collections are groups of template* content. One template can belong to multiple collections. These collections allow you to sort, filter, and perform other manipulations to customize the display of your template data. Learning all the ways to create collections provides you architectural freedom in creating your Eleventy site! * In 11ty terms, a template is any content file to be processed or rendered by 11ty. If you create a new Markdown file, you have created a new Markdown template, etc. Creating Collections # Collections are most often created from tags, but can also be groups based on other features like file type or front matter data. They can even be created from local data. Collections From tags # The simplest way to create a collection is with tags, and there are four syntaxes available. Single tag : tags: cat Multi-word tag : tags: cat and dog Multiple
Filter Titles for RSS and Social Shares
Aug 8, 2021 · original
Sometimes, we want to use characters in our page titles that we can safely escape on our own sites, but which would be stripped out by social networks' link embeds or when pulled up in an RSS reader. For instance, an article called "tfoot: The Table Foot element" is usually stripped down to ": The Table Foot Element" to prevent cross-site scripting. If you use the < and > HTML entities instead, these same platforms will display your title as "<tfoot>: The Table Foot element," which is also not ideal. You could choose to rework your titles so you don't run into this issue. Alternatively, you could automatically replace the offending characters with close lookalikes that won't be stripped out. Here, we'll replace the less-than and greater-than signs with the similar-looking ‹ and › single guillemets . Accessibility tip: Replacing characters with other characters can pose access
Plugin: Object-Fit Focal Point
Aug 7, 2021 · original
This plugin adds an Eleventy Nunjucks shortcode to provide the functionality of generating an image's object-position value in order to keep the focal point in view when setting CSS aspect-ratio and object-fit: cover . Test drive the results by using the utility app. Docs for Object-Fit Focal Point
11ty RSS Reader Starter
Jun 24, 2021 · original
Provide permalinks to your favorite RSS feeds to populate a personalized RSS reader Jamstack application using Eleventy. Bonus : This application was built on Twitch livestream, and recordings will be available on the 11ty Rocks YouTube channel . The course covers advanced 11ty templating. Get the RSS Starter
Twitch Scenes 11ty Starter Template
May 2, 2021 · original
Scenes are optimal at 1280x720, and are included for: Preshow, postshow, and break messages Main scene with large capture area and host webcam capture bonus slideshow layout All scenes include a lower third for stream details, which also features embedded chat. Get the Scenes Template
Layout Templating
Apr 16, 2021 · original
Body Classes for Pages and Layouts # A trick I originally learned from WordPress templates is to add a class on the body to identify the page being viewed. This helps you have page-specific style rules. The {{ page.fileSlug }} is an Eleventy provided data variable that will be the original file name without the extension. This will be the file name only, not the path. So /blog/post-one.md would render post-one . Our logic includes the class of "home" when there is no fileSlug available since the the main index will not compute a fileSlug . body class = " page-- {% if page . fileSlug %} {{ page . fileSlug }} {% else %} home {% endif %} " You may also add the layout in a similar way: body class = " layout-- {{ layout }} " Note: If layouts are chained, then {{ layout }} will render out the lowest layout in the chain. So if blog.njk chains to base.njk , it will select blog .
Use Eleventy Templating To Include Static Code Demos
Apr 2, 2021 · original
This post assumes a foundational familiarity with Eleventy. If you're new to 11ty - welcome! You may want to start here . This tutorial will showcase many features of Nunjucks templating. So, even if the tutorial's goal doesn't match your use case, you'll get more familair with using it as a templating language! Project Brief # The goal of this Eleventy project is to create a single-page site that displays live code demos, like the setup on SmolCSS.dev . And we'll see how to extend it to a scoped context like is used for this ModernCSS.dev tutorial . Here are the base requirements: ease of managing demo content demo code lives with demo content each demo is an independent file allow custom ordering of demos vs. date-based RSS feed for demos "Open in CodePen" functionality Base Project Configuration # We're starting from an empty project with Eleventy installed and ready to run. This tuto
A Deep Dive Into Eleventy Static Site Generator
Mar 24, 2021 · original
Eleventy (aka 11ty) is rising in the ranks among static site generators. This Node-based builder is attractive due to its zero-config starting point, purely static output, and ease of achieving the coveted top Lighthouse performance score of four perfect 100s. In my article on Smashing Magazine, I've written about things that I would have found helpful to understand when I was getting started with Eleventy. It covers: A brief intro to static site generators (SSG) What makes it unique from other SSG Getting started Layouts Templates Filters Shortcodes Collections Custom data Pagination Eleventy plugins Starters Is Eleventy a right fit for you and your project Read the rest of A Deep Dive Into Eleventy Static Site Generator on Smashing Magazine

Discovered by the rss-feed-index crawler, which checks each feed at most once a month.

Same record as JSON: https://api.agentalog.com/api/feeds/fd_11ty_rocks_a95421c1e7db8e4d. More from this site: 11ty.rocks in the Feeds tab.