Skip to main content

Eleventy

General

Why Eleventy?

Config

WebC

Filters

Wrap variables in a function call rather than piping variables to them.

Example:

<time datetime="${htmlDateString(post.date)}">${readableDate(post.date)}</time>

VS Code support

WebC syntax highlighting is available in VS Code by associating the .webc extension with the HTML language:

{
  "files.associations": {
    "*.webc": "html"
  }
}

Prettier support

Prettier doesn’t support WebC out of the box, but you can add support by adding a Prettier config file to your project and setting the parser option to html for files with the .webc extension:

# see: https://prettier.io/docs/en/configuration.html#setting-the-parserdocsenoptionshtmlparser-option
overrides:
  - files: ['*.webc']
    options:
      parser: 'html'

Drafts and Scheduled Posts in Eleventy

const removeDrafts = collection =>
  process.env.NODE_ENV === 'production' ? collection.filter(item => item.data.published) : collection;
const removeScheduled = collection =>
  process.env.NODE_ENV === 'production' ? collection.filter(item => item.date <= Date.now()) : collection;

Make sure the environment that builds for production sets NODE_ENV=production.

Netlify does that automatically, but if you build via a GitHub action, you’ll need to set it yourself.

Add sitemap.xml

  • Add a sitemap.webc page to your site with permalink: /sitemap.xml to output the file at the root of your site
  • Add the static outer markup
  • Use webc:type="js" to output the dynamic markup (i.e. the list of pages)
  • Use collections.all to get all pages
  • Optionally sort by page.url to get a consistent order (I found this useful for debugging)
  • Check if page.url exists (i.e. isn’t false because the page sets permalink: false or eleventyExcludeFromCollections: true)
  • Add logic to exclude pages that shouldn’t be in the sitemap (e.g. page.urlincludes.css`)
  • Add full URL to <loc> element
  • Add last modified date to <lastmod> element
    • Use “git Last Modified” for this?
  • sitemaps.org - Protocol
    • see for more info on the sitemap protocol and other elements you can add
  • Take a look and make sure it includes all pages you expect and excludes pages you don’t
  • sitemap.xml
    • example component (less logic than mine)
  • Another example that uses WebC attributes instead of the script tag to output the list:

Add robots.txt (separate post?)

Once you have a sitemap, you can add a robots.txt file to tell search engines where to find it.

  • Add a robots.webc page to your site with permalink: /robots.txt to output the file at the root of your site
  • Exclude it from collections with eleventyExcludeFromCollections: true
  • Use webc:type="js" to output the dynamic markup (i.e. the path to the page)
    • You could also just hard code the path to make the file simpler if you don’t expect it to change
    • [show static verson of page as a contrast]
  • robots.txt
    • example component (less content than mine)
  • My PR adding both: https://github.com/ooloth/michaeluloth.com/pull/1

Using Tailwind CSS with Eleventy

To add postcss support to eleventy, follow the steps in the eleventy-plugin-postcss README:

  1. …

To add TailwindCSS support to postcss, follow the steps in the Tailwind postcss docs:

  1. …

Missing any other basic tailwind setup (like the config file in the root folder and entry point css)

Test by starting server and adding classes to a template.

If you use postcss-import, place your imported partials in the _includes folder so they’ll be watched for changes but not copied to the build folder like your main css file:

[Show example of importing from _includes/css in main file.]

I found this works better than solutions that rely on updating npm scripts and using the tailwind CLI. This solution is simpler and results in browser updates that don’t require a hard refresh.

Add Favicons and a Web Manifest to Eleventy

  • Generate favicon markup and manifest.json from a single image
  • Download icons folder and add to your site’s /public folder
    • Ensure you are copying the contents of /public to your output directory
      • [show .eleventy.js config lines for this]
  • Copy markup and add to your site’s head
    • update paths as needed (e.g. site.webmanifest path, subfolder if missing)
      • the .webmanifest extension is special and preferred over .json for manifest files
    • [show example of this in my root.webc layout component]
  • Create manifest.webc component with permalink: manifest.json to output at root
  • How to test when done?
    • In Chrome/Brave, open DevTools > Application > Manifest
      • Address any warnings or issues
    • In Chrome/Brave, open DevTools > Lighthouse and run an audit with “Progressive Web App” checked
      • This will check for any issues with your manifest.json and favicon markup
      • [show example of this]
  • https://developer.mozilla.org/en-US/docs/Web/Manifest
    • details about manifest file

TypeScript Support

Inbox