Eleventy Quick Tips
All of the official Eleventy Quick Tips, in feed form.
2018-06-27T00:00:00-00:00
https://www.11ty.io/
Zach Leatherman
zach@zachleat.com
Quick Tip #005—Super Simple CSS Concatenation
2018-06-27T00:00:00-00:00
http://www.11ty.io/docs/quicktips/concatenate/
<p>In some situations you may want to concatenate content files together into a single top level template. Maybe you want to create a single CSS file with all of your component CSS inside.</p>
<p>Consider this sample <code>theme.njk</code> file:</p>
<pre class="language-markdown"><code class="language-markdown"><div class="highlight-line"><span class="token hr punctuation">---</span></div><div class="highlight-line"><span class="token title important">permalink: theme.css</span></div><div class="highlight-line"><span class="token punctuation">---</span></div><div class="highlight-line">{% include "components/header.css" %}</div><div class="highlight-line">{% include "components/footer.css" %}</div></code></pre>
<p>That’s an easy way to concatenate files and control the include order.</p>
<p>You might imagine creating an <code>include-all</code> <a href="http://www.11ty.io/docs/shortcodes/">Shortcode</a> that uses <a href="https://www.npmjs.com/package/fast-glob"><code>fast-glob</code></a> to include a glob of files like <code>{% include-all "components/*.css %}</code>, but that’s an exercise left to the reader!</p>
<h2 id="capture-and-minify">Capture and Minify <a class="direct-link" href="#capture-and-minify">#</a></h2>
<p>In our <a href="http://www.11ty.io/docs/quicktips/inline-css/">Inline CSS Quick Tip</a>, we discussed how to capture and minify a CSS file. This approach can be modified, of course, to capture multiple includes too!</p>
<pre class="language-html"><code class="language-html"><div class="highlight-line"><span class="token comment"><!-- capture the CSS content as a Nunjucks variable --></span></div><div class="highlight-line">{% set css %}</div><div class="highlight-line"> {% include "components/header.css" %}</div><div class="highlight-line"> {% include "components/footer.css" %}</div><div class="highlight-line">{% endset %}</div><div class="highlight-line"><span class="token comment"><!-- feed it through our cssmin filter to minify --></span></div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span> css | cssmin | safe <span class="token punctuation">}</span><span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></div></code></pre>
<h2 id="work-with-what-you-have">Work with what you have <a class="direct-link" href="#work-with-what-you-have">#</a></h2>
<p>Of course, Eleventy has no desire to replace your existing build pipeline. This is just a super simple example if you want something up and running quickly.</p>
<p>That said, Eleventy wants to work with what you have. As an example, the <a href="https://github.com/philhawksworth/eleventyone/"><code>EleventyOne</code> project scaffold</a> is a fine example of using Eleventy with Gulp and Sass. The <a href="https://github.com/zachleat/zachleat.com">zachleat.com source code</a> is an older example that works with Grunt and Sass.</p>
Quick Tip #004—Zero Maintenance Tag Pages for your Blog
2018-06-08T00:00:00-00:00
http://www.11ty.io/docs/quicktips/tag-pages/
<p><em>This post uses features available in Eleventy 0.4.0 and newer.</em></p>
<p>This quick tip will show you how to automatically generate Tag Pages (lists of content tagged into a collection).</p>
<p>We’ll use pagination to automatically generate a template for each tag we want to link to.</p>
<p>Here’s a sample pagination template using Nunjucks:</p>
<pre class="language-markdown"><code class="language-markdown"><div class="highlight-line"><span class="token hr punctuation">---</span></div><div class="highlight-line">pagination:</div><div class="highlight-line"> data: collections</div><div class="highlight-line"> size: 1</div><div class="highlight-line"> alias: tag</div><div class="highlight-line"><span class="token title important">permalink: /tags/{{ tag }}/</span></div><div class="highlight-line"><span class="token punctuation">---</span></div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Tagged “{{ tag }}”<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></div><div class="highlight-line"></div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span></div><div class="highlight-line">{% set taglist = collections[ tag ] %}</div><div class="highlight-line">{% for post in taglist | reverse %}</div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ post.url | url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ post.data.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></div><div class="highlight-line">{% endfor %}</div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></div></code></pre>
<p>First up notice how we’re pointing our <code>pagination</code> to iterate over <code>collections</code>, which is an object keyed with tag names pointing to the collection of content containing that tag.</p>
<p>Consider these two sample markdown posts, one using a <code>tech</code> tag and one using a <code>personal</code> tag:</p>
<pre class="language-markdown"><code class="language-markdown"><div class="highlight-line"><span class="token hr punctuation">---</span></div><div class="highlight-line">title: My First Post</div><div class="highlight-line">tags:</div><div class="highlight-line"> <span class="token title important">- tech</span></div><div class="highlight-line"><span class="token punctuation">---</span></div></code></pre>
<pre class="language-markdown"><code class="language-markdown"><div class="highlight-line"><span class="token hr punctuation">---</span></div><div class="highlight-line">title: My Second Post</div><div class="highlight-line">tags:</div><div class="highlight-line"> <span class="token title important">- personal</span></div><div class="highlight-line"><span class="token punctuation">---</span></div></code></pre>
<p>Our pagination template above will now generate two pages: <code>/tags/personal/index.html</code> and <code>/tags/tech/index.html</code>.</p>
<p>The great thing here is that we don’t have to manage our tag list in a central place. These tags can be littered throughout our content and individual tag pages will be created automatically.</p>
<h2 id="filtering-%2F-excluding">Filtering / Excluding <a class="direct-link" href="#filtering-%2F-excluding">#</a></h2>
<p>Have a tag you’d like to exclude from this list? Use <a href="http://www.11ty.io/docs/pagination/#blacklisting-or-filtering-values">pagination filtering</a> like this:</p>
<pre class="language-markdown"><code class="language-markdown"><div class="highlight-line"><span class="token hr punctuation">---</span></div><div class="highlight-line">pagination:</div><div class="highlight-line"> data: collections</div><div class="highlight-line"> size: 1</div><div class="highlight-line"> alias: tag</div><div class="highlight-line"> filter:</div><div class="highlight-line"> <span class="token list punctuation">-</span> tech</div><div class="highlight-line"><span class="token title important">permalink: /tags/{{ tag }}/</span></div><div class="highlight-line"><span class="token punctuation">---</span></div></code></pre>
<p>Now Eleventy will only generate a <code>/tags/personal/</code> template and <code>tech</code> will be ignored.</p>
<h2 id="in-practice">In Practice <a class="direct-link" href="#in-practice">#</a></h2>
<p>This is currently in use on the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> sample project</a>. Check out source code in the <a href="https://github.com/11ty/eleventy-base-blog/blob/master/tags.njk"><code>tags.njk</code> template</a> and <a href="https://eleventy-base-blog.netlify.com/tags/another-tag/">see a live demo</a>.</p>
Quick Tip #003—Add Edit on GitHub Links to All Pages
2018-06-08T00:00:00-00:00
http://www.11ty.io/docs/quicktips/edit-on-github-links/
<p>It’s nice to be able to instantly edit your HTML on GitHub when you spot an error or an improvement you can make. Why not facilitate this by adding an <em>Edit this page on GitHub</em> link to every page? You can see an example of this on our page footer.</p>
<h2 id="use-a-layout-file">Use a Layout File <a class="direct-link" href="#use-a-layout-file">#</a></h2>
<p>Make sure you’re using a Layout file so that you can add these to a single place and have the links applied to all of your pages.</p>
<ul>
<li><a href="http://www.11ty.io/docs/layouts/">Read more about Layouts</a></li>
</ul>
<p>Here’s a sample:</p>
<pre class="language-html"><code class="language-html"><div class="highlight-line"> …</div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span></div><div class="highlight-line"> © 2018 Eleventy</div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span></div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></div></code></pre>
<h2 id="add-our-link!">Add our link! <a class="direct-link" href="#add-our-link!">#</a></h2>
<p>Edit your your layout file to add the link. Provide the URL to the base of your repo and use the Eleventy provided <code>{{ page.inputPath }}</code> variable to point to the correct input file. Yes, this will also work with paginated templates.</p>
<pre class="language-html"><code class="language-html"><div class="highlight-line"> …</div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span></div><div class="highlight-line"> © 2018 Eleventy</div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://github.com/11ty/11ty.io/tree/master/{{ page.inputPath }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Edit this page on GitHub<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span></div><div class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></div></code></pre>
<p>That’s it!</p>
Quick Tip #002—Inline Minified JavaScript
2018-06-08T00:00:00-00:00
http://www.11ty.io/docs/quicktips/inline-js/
<p><em>Originally posted on <a href="https://www.zachleat.com/web/that-could-possibly-work/">The Simplest Web Site That Could Possible Work Well on zachleat.com</a></em></p>
<p>This tip works great if you have small JS utilities that you’d like to have in your <code><head></code>. For example, this works great with the Filament Group <a href="https://github.com/filamentgroup/loadJS"><code>loadJS</code></a> or <a href="https://github.com/filamentgroup/loadCSS"><code>loadCSS</code></a> utilities.</p>
<h2 id="installation">Installation <a class="direct-link" href="#installation">#</a></h2>
<p><code>npm install uglify-js</code> to make the Uglify JS minifier available in your project.</p>
<h2 id="configuration">Configuration <a class="direct-link" href="#configuration">#</a></h2>
<p>Add the following <code>jsmin</code> filter to your Eleventy Config file:</p>
<pre class="language-js"><code class="language-js"><div class="highlight-line"><span class="token keyword">const</span> UglifyJS <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"uglify-js"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"jsmin"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></div><div class="highlight-line"> <span class="token keyword">let</span> minified <span class="token operator">=</span> UglifyJS<span class="token punctuation">.</span><span class="token function">minify</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line"> <span class="token keyword">if</span><span class="token punctuation">(</span> minified<span class="token punctuation">.</span>error <span class="token punctuation">)</span> <span class="token punctuation">{</span></div><div class="highlight-line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"UglifyJS error: "</span><span class="token punctuation">,</span> minified<span class="token punctuation">.</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line"> <span class="token keyword">return</span> code<span class="token punctuation">;</span></div><div class="highlight-line"> <span class="token punctuation">}</span></div><div class="highlight-line"></div><div class="highlight-line"> <span class="token keyword">return</span> minified<span class="token punctuation">.</span>code<span class="token punctuation">;</span></div><div class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></code></pre>
<h2 id="create-your-javascript-file">Create your JavaScript File <a class="direct-link" href="#create-your-javascript-file">#</a></h2>
<p>Add a sample JavaScript file to your <code>_includes</code> directory. Let’s call it <code>sample.js</code>.</p>
<pre class="language-js"><code class="language-js"><div class="highlight-line"><span class="token comment">// Hi</span></div><div class="highlight-line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hi"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></code></pre>
<h2 id="capture-and-minify">Capture and Minify <a class="direct-link" href="#capture-and-minify">#</a></h2>
<p>Capture the JavaScript into a variable and run it through the filter (this sample is using Nunjucks syntax)</p>
<pre class="language-html"><code class="language-html"><div class="highlight-line"><span class="token comment"><!-- capture the JS content as a Nunjucks variable --></span></div><div class="highlight-line">{% set js %}{% include "sample.js" %}{% endset %}</div><div class="highlight-line"><span class="token comment"><!-- feed it through our jsmin filter to minify --></span></div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> js <span class="token operator">|</span> jsmin <span class="token operator">|</span> safe <span class="token punctuation">}</span><span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></div></code></pre>
Quick Tip #001—Inline Minified CSS
2018-06-07T00:00:00-00:00
http://www.11ty.io/docs/quicktips/inline-css/
<p><em>Originally posted on <a href="https://www.zachleat.com/web/that-could-possibly-work/">The Simplest Web Site That Could Possible Work Well on zachleat.com</a></em></p>
<p>This tip works well on small sites that don’t have a lot of CSS. Inlining your CSS removes an external request from your critical path and speeds up page rendering times! If your CSS file is small enough, this is a simplification/end-around for <a href="https://www.smashingmagazine.com/2015/08/understanding-critical-css/">Critical CSS approaches</a>.</p>
<h2 id="installation">Installation <a class="direct-link" href="#installation">#</a></h2>
<p><code>npm install clean-css</code> to make the CSS minifier available in your project.</p>
<h2 id="configuration">Configuration <a class="direct-link" href="#configuration">#</a></h2>
<p>Add the following <code>cssmin</code> filter to your Eleventy Config file:</p>
<pre class="language-js"><code class="language-js"><div class="highlight-line"><span class="token keyword">const</span> CleanCSS <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"clean-css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></div><div class="highlight-line"> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"cssmin"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></div><div class="highlight-line"> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">CleanCSS</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">minify</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span><span class="token punctuation">.</span>styles<span class="token punctuation">;</span></div><div class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></div></code></pre>
<h2 id="create-your-css-file">Create your CSS File <a class="direct-link" href="#create-your-css-file">#</a></h2>
<p>Add a sample CSS file to your <code>_includes</code> directory. Let’s call it <code>sample.css</code>.</p>
<pre class="language-css"><code class="language-css"><div class="highlight-line"><span class="token selector">body</span> <span class="token punctuation">{</span></div><div class="highlight-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> fantasy<span class="token punctuation">;</span></div><div class="highlight-line"><span class="token punctuation">}</span></div></code></pre>
<h2 id="capture-and-minify">Capture and Minify <a class="direct-link" href="#capture-and-minify">#</a></h2>
<p>Capture the CSS into a variable and run it through the filter (this sample is using Nunjucks syntax)</p>
<pre class="language-html"><code class="language-html"><div class="highlight-line"><span class="token comment"><!-- capture the CSS content as a Nunjucks variable --></span></div><div class="highlight-line">{% set css %}{% include "sample.css" %}{% endset %}</div><div class="highlight-line"><span class="token comment"><!-- feed it through our cssmin filter to minify --></span></div><div class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span> css | cssmin | safe <span class="token punctuation">}</span><span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></div></code></pre>