Eleventy Quick Tips
All of the official Eleventy Quick Tips, in feed form.
2019-02-01T00:00:00Z
https://www.11ty.io/
Zach Leatherman
zach@zachleat.com
Quick Tip #008—Trigger a Netlify Build Every Day with IFTTT
2019-02-01T00:00:00Z
http://www.11ty.io/docs/quicktips/netlify-ifttt/
<p>In <a href="http://www.11ty.io/docs/quicktips/eliminate-js/">Quick Tip #007</a> we talked about migrating away from using a Client-side third-party JavaScript widget to display GitHub stargazer counts and towards a Data fetched at Build time approach.</p>
<p>Updating this data at build time means that the data isn’t necessarily “live” (although the counts are likely cached at by at least one of the upstream dependencies of this widget, with a frequency that is out of your control).</p>
<p>I’m comfortable with these numbers being a little delayed (more than the JS widget method was) and with this new approach I get more control over the frequency of updates BUT I do probably want to run the build at least once a day. To do this, I used an <a href="https://ifttt.com/">IFTTT</a> applet to trigger my Netlify build to run every morning using <a href="https://www.netlify.com/docs/webhooks/#incoming-webhooks">Netlify’s Build Hooks</a>.</p>
<p><em>Heavily inspired by <a href="https://twitter.com/philhawksworth/status/1038067638369443840">Phil Hawksworth’s work on RSS Jamstack</a>.</em></p>
<h2 id="get-a-netlify-build-hook">Get a Netlify Build Hook <a class="direct-link" href="http://www.11ty.io/docs/quicktips/netlify-ifttt/#get-a-netlify-build-hook">#</a></h2>
<ol>
<li>Go into your <a href="https://app.netlify.com/">Netlify</a> site’s <code>Build & Deploy</code> settings</li>
<li>Select <code>Continuous Deployment</code></li>
<li>Add a <code>Build hook</code></li>
<li>Name it <code>Deploy every day</code> (or whatever you’d like)</li>
<li>I selected the <code>master</code> branch for my site.</li>
<li>Save this and it will provide you with a long URL a la <code>https://api.netlify.com/build_hooks/SOME_ID_HERE</code>. This is the URL you want.</li>
</ol>
<h2 id="add-an-ifttt-applet">Add an IFTTT Applet <a class="direct-link" href="http://www.11ty.io/docs/quicktips/netlify-ifttt/#add-an-ifttt-applet">#</a></h2>
<ol>
<li>Go to <a href="https://ifttt.com/create"><code>New Applet</code> on ifttt.com</a></li>
<li>Click <code>+this</code></li>
<li>Select the <code>Date & Time</code> service</li>
<li>Select the <code>Every day at</code> option (or whatever frequency you’d like)</li>
<li>Select the time you’d like the build to run.</li>
<li>Click <code>+that</code></li>
<li>Select the <code>Webhooks</code> service</li>
<li>Select the <code>Make a web request</code> option</li>
<li>For the URL field, use the Build Hook URL you’ve already retrieved from Netlify.</li>
<li>For the Method field, choose <code>POST</code>.</li>
<li>For the Content Type field, choose <code>application/x-www-form-urlencoded</code>.</li>
<li>For the Body field, type <code>{}</code>.</li>
<li>Click the <code>Create action</code> button.</li>
<li>Click <code>Finish</code>.</li>
</ol>
Quick Tip #007—Fetch GitHub Stargazers Count (and More) at Build Time
2019-01-31T00:00:00Z
http://www.11ty.io/docs/quicktips/eliminate-js/
<p>Older iterations of this website used a third party JavaScript widget to show the number of GitHub Stars the project currently had. You can see it in action on the <a href="https://v0-7-1.11ty.io/docs/">versioned docs for 0.7.1</a> (scroll to the bottom).</p>
<p>This was in fact the only <code><script></code> tag on the entire <a href="http://11ty.io/">11ty.io</a> web site and it was from a third party. Naturally, it needed to be annihilated.</p>
<p>Let’s change up our architecture to ruthlessly eliminate this client-side JavaScript.</p>
<h2 id="get-the-stargazers-count-from-the-github-api">Get the Stargazers Count from the GitHub API <a class="direct-link" href="http://www.11ty.io/docs/quicktips/eliminate-js/#get-the-stargazers-count-from-the-github-api">#</a></h2>
<p>Read more at the <a href="https://developer.github.com/v3/repos/#get">GitHub API documentation</a>.</p>
<p>This is a bit different from our client-side implementation because this data is only as updated as often as your build runs. This is implemented using a global <a href="http://www.11ty.io/docs/data-js/">JavaScript data file</a> at <code>_data/github.js</code>.</p>
<ul>
<li>Install new dependencies: <code>npm install node-fetch --save-dev</code></li>
<li>Read more about <a href="https://www.npmjs.com/package/node-fetch"><code>node-fetch</code></a></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>_data/github.js</div>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">const</span> fetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"node-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span 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">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">"Fetching new github stargazers count…"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token comment">// GitHub API: https://developer.github.com/v3/repos/#get</span></span><br /><span class="highlight-line"> <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"https://api.github.com/repos/11ty/eleventy"</span><span class="token punctuation">)</span></span><br /><span class="highlight-line"> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// node-fetch option to transform to json</span></span><br /><span class="highlight-line"> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">json</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token comment">// prune the data to return only what we want</span></span><br /><span class="highlight-line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> stargazers<span class="token operator">:</span> json<span class="token punctuation">.</span>stargazers_count</span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre>
<p>Now in your templates you can output the stargazers count with:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid, Nunjucks</div>
<pre class="language-html"><code class="language-html"><span class="highlight-line">{{ github.stargazers }} GitHub Stars</span></code></pre>
<p>which outputs</p>
<pre><code>1515 GitHub Stars
</code></pre>
<p>Bonus: I created a <a href="https://github.com/11ty/11ty.io/blob/ac3579909078f860f4af1185c8f7353d56833c22/.eleventy.js#L82"><code>humanReadableNum</code> filter</a>) using the <a href="https://www.npmjs.com/package/human-readable-numbers"><code>human-readable-numbers</code></a> package to format the number.</p>
<h2 id="more-examples">More Examples <a class="direct-link" href="http://www.11ty.io/docs/quicktips/eliminate-js/#more-examples">#</a></h2>
<p>You can look in the footer of this page to see examples of this in use on this very web site. I used it for:</p>
<ul>
<li><a href="https://github.com/11ty/11ty.io/blob/ac3579909078f860f4af1185c8f7353d56833c22/_data/npm.js">NPM Download Count</a></li>
<li><a href="https://github.com/11ty/11ty.io/blob/ac3579909078f860f4af1185c8f7353d56833c22/_data/github.js">GitHub Stargazers Count</a></li>
<li><a href="https://github.com/11ty/11ty.io/blob/ac3579909078f860f4af1185c8f7353d56833c22/_data/twitter.js">Twitter Followers Count</a> (careful here, this one is super brittle but Twitter’s API is historically anti-developer so 😇)</li>
</ul>
<p>These all use the recommended caching mechanism described in the next section.</p>
<h2 id="recommended%3A-cache-the-data-to-the-file-system">Recommended: Cache the Data to the File System <a class="direct-link" href="http://www.11ty.io/docs/quicktips/eliminate-js/#recommended%3A-cache-the-data-to-the-file-system">#</a></h2>
<p>If I’m working on my site locally, I probably don’t want every Eleventy run to hit this external API call. I’d hit my rate limit pretty quickly (on GitHub, 60 per hour). Instead, let’s use an npm package called <a href="https://www.npmjs.com/package/flat-cache"><code>flat-cache</code></a> to save our results locally to the file system and only run it once per day.</p>
<ul>
<li>Install dependencies: <code>npm install node-fetch flat-cache --save-dev</code></li>
<li>Read more about <a href="https://www.npmjs.com/package/node-fetch"><code>node-fetch</code></a> and <a href="https://www.npmjs.com/package/flat-cache"><code>flat-cache</code></a>.</li>
</ul>
<h3 id="highlights%3A">Highlights: <a class="direct-link" href="http://www.11ty.io/docs/quicktips/eliminate-js/#highlights%3A">#</a></h3>
<ul>
<li>A <code>_datacache/github-stargazers</code> file is created that saves the results of the service call.</li>
<li>The data is keyed off the current UTC date.</li>
<li>If the data already exists in the cache (for the current UTC date), it uses the cached value instead of fetching new data.</li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>_data/github.js</div>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">const</span> fetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"node-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token keyword">const</span> flatcache <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"flat-cache"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"><span class="token keyword">function</span> <span class="token function">getCacheKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">let</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getUTCFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getUTCMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getUTCDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span></span><br /><span class="highlight-line"></span><br /><span 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">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">let</span> cache <span class="token operator">=</span> flatcache<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token string">"github-stargazers"</span><span class="token punctuation">,</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"./_datacache"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token keyword">let</span> key <span class="token operator">=</span> <span class="token function">getCacheKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token keyword">let</span> cachedData <span class="token operator">=</span> cache<span class="token punctuation">.</span><span class="token function">getKey</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>cachedData<span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">"Fetching new github stargazers count…"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token comment">// GitHub API: https://developer.github.com/v3/repos/#get</span></span><br /><span class="highlight-line"> <span class="token keyword">let</span> newData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"https://api.github.com/repos/11ty/eleventy"</span><span class="token punctuation">)</span></span><br /><span class="highlight-line"> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span><br /><span class="highlight-line"> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">json</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> stargazers<span class="token operator">:</span> json<span class="token punctuation">.</span>stargazers_count</span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> cache<span class="token punctuation">.</span><span class="token function">setKey</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> newData<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> cache<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token keyword">return</span> newData<span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token keyword">return</span> cachedData<span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre>
<p>If you want to fetch data more frequently than once per day, modify <code>getCacheKey</code> to return more a specific date. Add an hour to the key to run every hour, for example:</p>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">function</span> <span class="token function">getCacheKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">let</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getUTCFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getUTCMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getUTCDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getUTCHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<div class="elv-callout elv-callout-info">Take note that if you’re using this on a Netlify build, it will not maintain updates to the cache (as it resets the cache to the files that are checked into git) and will likely re-run every time.
<ul>
<li>Current <a href="https://developer.github.com/v3/#rate-limiting">GitHub rate limits</a> are limited to 60 requests per hour, so this will only be a problem if you do more than 60 Netlify builds in an hour.</li>
<li>The <a href="https://blog.npmjs.org/post/164799520460/api-rate-limiting-rolling-out">npm API doesn’t seem to have a hard limit</a>.</li>
</ul></div>
<h2 id="update-counts-daily">Update Counts Daily <a class="direct-link" href="http://www.11ty.io/docs/quicktips/eliminate-js/#update-counts-daily">#</a></h2>
<p>If you want to update these counts automatically every day, read <a href="http://www.11ty.io/docs/quicktips/netlify-ifttt/">Quick Tip #008—Trigger a Netlify Build Every Day with IFTTT</a>.</p>
Quick Tip #006—Adding a 404 Not Found Page to your Static Site
2018-09-20T00:00:00Z
http://www.11ty.io/docs/quicktips/not-found/
<p>A <code>404: Not Found</code> page is a pretty standard thing on the web. It’s particularly useful when someone shares a broken or mistyped link. You don’t need dynamic middleware to do this, it’s pretty easy to add to a statically generated site. There are a few options, depending on your web host:</p>
<p>But first let’s make our <code>404.html</code> template:</p>
<pre class="language-html"><code class="language-html"><span class="highlight-line">---</span><br /><span class="highlight-line">title: Oops! Not Found</span><br /><span class="highlight-line">permalink: 404.html</span><br /><span class="highlight-line">---</span><br /><span class="highlight-line"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is where you should tell the user how to find their content. Maybe on the <a href="{{ "/" | url }}">home page?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></span></code></pre>
<p>Eleventy will output this template to <code>404.html</code>.</p>
<p>If you’re using <a href="https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/">GitHub Pages</a> or <a href="https://www.netlify.com/docs/redirects/#custom-404">Netlify</a>, there is no step two! A <code>404.html</code> file in your output directory is all you need.</p>
<p>Netlify even has lovely <a href="https://www.netlify.com/docs/redirects/#custom-404">multi-language 404 page support too using <code>Redirects</code></a>.</p>
<h2 id=".htaccess">.htaccess <a class="direct-link" href="http://www.11ty.io/docs/quicktips/not-found/#.htaccess">#</a></h2>
<p>For other hosts, if you use <code>.htaccess</code> for configuration you can use <code>ErrorDocument</code>. Make sure your root directory matches here!</p>
<pre><code>ErrorDocument 404 /404.html
</code></pre>
<h2 id="with---serve">With <code>--serve</code> <a class="direct-link" href="http://www.11ty.io/docs/quicktips/not-found/#with---serve">#</a></h2>
<p>If you're using <code>eleventy --serve</code>, you can configure BrowserSync to do the 404 routing by passing a callback in your config. Read more on <a href="https://www.11ty.io/docs/config/#override-browsersync-server-options">the BrowserSyncConfig option</a>, the <a href="https://browsersync.io/docs/options#option-callbacks">BrowserSync callbacks option</a>, and <a href="https://github.com/BrowserSync/browser-sync/issues/1398">how to provide a 404 using a BrowserSync callback</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"fs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span 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></span><br /><span class="highlight-line"> eleventyConfig<span class="token punctuation">.</span><span class="token function">setBrowserSyncConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span><br /><span class="highlight-line"> callbacks<span class="token operator">:</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token function-variable function">ready</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> bs</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">const</span> content_404 <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token string">'_site/404.html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> bs<span class="token punctuation">.</span><span class="token function">addMiddleware</span><span class="token punctuation">(</span><span class="token string">"*"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token comment">// Provides the 404 content without redirect.</span></span><br /><span class="highlight-line"> res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>content_404<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre>
<p><em>Thank you <a href="https://github.com/clottman">Cassey Lottman</a>.</em></p>
Quick Tip #005—Super Simple CSS Concatenation
2018-06-27T00:00:00Z
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"><span class="token front-matter-block"><span class="token punctuation">---</span><br /><span class="highlight-line"><span class="token font-matter yaml language-yaml">permalink: theme.css</span></span><br /><span class="token punctuation">---</span></span><br /><span class="highlight-line">{% include "components/header.css" %}</span><br /><span class="highlight-line">{% include "components/footer.css" %}</span></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="http://www.11ty.io/docs/quicktips/concatenate/#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"><span class="highlight-line"><span class="token comment"><!-- capture the CSS content as a Nunjucks variable --></span></span><br /><span class="highlight-line">{% set css %}</span><br /><span class="highlight-line"> {% include "components/header.css" %}</span><br /><span class="highlight-line"> {% include "components/footer.css" %}</span><br /><span class="highlight-line">{% endset %}</span><br /><span class="highlight-line"><span class="token comment"><!-- feed it through our cssmin filter to minify --></span></span><br /><span 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></span></code></pre>
<h2 id="work-with-what-you-have">Work with what you have <a class="direct-link" href="http://www.11ty.io/docs/quicktips/concatenate/#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:00Z
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"><span class="token front-matter-block"><span class="token punctuation">---</span><br /><span class="token font-matter yaml language-yaml">pagination:<br /><span class="highlight-line"> data: collections</span><br /><span class="highlight-line"> size: 1</span><br /><span class="highlight-line"> alias: tag</span><br />permalink: /tags/{{ tag }}/</span><br /><span class="token punctuation">---</span></span><br /><span 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></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line">{% set taglist = collections[ tag ] %}</span><br /><span class="highlight-line">{% for post in taglist | reverse %}</span><br /><span 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 attr-equals">=</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></span><br /><span class="highlight-line">{% endfor %}</span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></span></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"><span class="token front-matter-block"><span class="token punctuation">---</span><br /><span class="token font-matter yaml language-yaml">title: My First Post<br /><span class="highlight-line">tags:</span><br /> - tech</span><br /><span class="token punctuation">---</span></span></code></pre>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br /><span class="token font-matter yaml language-yaml">title: My Second Post<br /><span class="highlight-line">tags:</span><br /> - personal</span><br /><span class="token punctuation">---</span></span></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="http://www.11ty.io/docs/quicktips/tag-pages/#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"><span class="token front-matter-block"><span class="token punctuation">---</span><br /><span class="token font-matter yaml language-yaml">pagination:<br /><span class="highlight-line"> data: collections</span><br /><span class="highlight-line"> size: 1</span><br /><span class="highlight-line"> alias: tag</span><br /><span class="highlight-line"> filter:</span><br /><span class="highlight-line"> - tech</span><br />permalink: /tags/{{ tag }}/</span><br /><span class="token punctuation">---</span></span></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="http://www.11ty.io/docs/quicktips/tag-pages/#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:00Z
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="http://www.11ty.io/docs/quicktips/edit-on-github-links/#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"><span class="highlight-line"> …</span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> © 2018 Eleventy</span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></span></code></pre>
<h2 id="add-our-link">Add our link! <a class="direct-link" href="http://www.11ty.io/docs/quicktips/edit-on-github-links/#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"><span class="highlight-line"> …</span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> © 2018 Eleventy</span><br /><span 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 attr-equals">=</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></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></span></code></pre>
<p>That’s it!</p>
Quick Tip #002—Inline Minified JavaScript
2018-06-08T00:00:00Z
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="http://www.11ty.io/docs/quicktips/inline-js/#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="http://www.11ty.io/docs/quicktips/inline-js/#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"><span 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></span><br /><span 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></span><br /><span 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></span><br /><span 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></span><br /><span 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></span><br /><span class="highlight-line"> <span class="token keyword">return</span> code<span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token keyword">return</span> minified<span class="token punctuation">.</span>code<span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span></code></pre>
<h2 id="create-your-javascript-file">Create your JavaScript File <a class="direct-link" href="http://www.11ty.io/docs/quicktips/inline-js/#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"><span class="highlight-line"><span class="token comment">// Hi</span></span><br /><span 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></span></code></pre>
<h2 id="capture-and-minify">Capture and Minify <a class="direct-link" href="http://www.11ty.io/docs/quicktips/inline-js/#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"><span class="highlight-line"><span class="token comment"><!-- capture the JS content as a Nunjucks variable --></span></span><br /><span class="highlight-line">{% set js %}{% include "sample.js" %}{% endset %}</span><br /><span class="highlight-line"><span class="token comment"><!-- feed it through our jsmin filter to minify --></span></span><br /><span 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></span></code></pre>
Quick Tip #001—Inline Minified CSS
2018-06-07T00:00:00Z
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="http://www.11ty.io/docs/quicktips/inline-css/#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="http://www.11ty.io/docs/quicktips/inline-css/#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"><span 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></span><br /><span 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></span><br /><span 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></span><br /><span 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></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre>
<h2 id="create-your-css-file">Create your CSS File <a class="direct-link" href="http://www.11ty.io/docs/quicktips/inline-css/#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"><span class="highlight-line"><span class="token selector">body</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> fantasy<span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<h2 id="capture-and-minify">Capture and Minify <a class="direct-link" href="http://www.11ty.io/docs/quicktips/inline-css/#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"><span class="highlight-line"><span class="token comment"><!-- capture the CSS content as a Nunjucks variable --></span></span><br /><span class="highlight-line">{% set css %}{% include "sample.css" %}{% endset %}</span><br /><span class="highlight-line"><span class="token comment"><!-- feed it through our cssmin filter to minify --></span></span><br /><span 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></span></code></pre>