inherentlee/leecat.art-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Sun Sep 20 15:08:31 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-20 22:08:31 +00:00
parent 1d51eaebec
commit 207d8c1cd5
731 changed files with 8308 additions and 5281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eleventy-lessons/index.html
+207 -32
View File
@@ -40,7 +40,80 @@
<style>.post-metadata {
<style>#toc {
float: right;
margin: 1rem 0 1.5rem 1.5rem;
width: min(calc(100% - 1.5rem), 23rem);
/* 23rem is the width of the words 'table of contents' in my header font */
/* yes, it's a bit hacky */
}
@media (max-width: 850px) {
#toc {
float: unset;
margin-top: 2rem;
margin-left: .5rem;
width: calc(100% - .5rem);
}
}
#toc details {
border: thick solid var(--color-pink);
border-radius: 1rem;
margin-top: 1rem;
}
#toc summary {
position: relative;
top: -1.5rem;
left: -.75rem;
width: fit-content;
background: var(--color-bg);
border-radius: .5rem;
}
#toc summary:focus-visible {
outline: .15rem solid var(--color-teal);
}
#toc summary::marker {
font-size: 2.35rem;
}
#toc h2 {
margin-top: 0;
display: inline;
line-height: normal;
}
#toc nav {
position: relative;
top: -1.25rem;
}
#toc li {
margin-block: .45rem 0;
}
@media (max-width: 650px) {
#toc nav > ol {
margin-left: .5rem;
}
}
/* basically we want to style this `ol` as a `ul` */
#toc ol > li {
list-style: disc;
}
#toc ol > li > ol > li {
list-style: circle;
}
#toc ol > li > ol > li > ol > li {
list-style: square;
}
.post-metadata {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
color-scheme: light dark;
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
/* if you change the header font, go to post-toc.css and fuck about with the width
of the table of contents */
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
}
/* Base */
* {
box-sizing: border-box;
margin: 0;
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article data-pagefind-body="">
<h1 id="eleventy-lessons">eleventy lessons</h1>
<h1>eleventy lessons</h1>
<div class="post-metadata">
<p>
@@ -1843,7 +1917,109 @@ switch (currentThemeValue) {
<img class="hero" src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
<p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
<aside id="toc">
<details>
<summary><h2>table of contents</h2></summary>
<nav class="toc">
<ol>
<li><a href="#related-posts">related posts</a>
<ol>
<li><a href="#filters.js">filters.js</a>
</li>
<li><a href="#post.njk">post.njk</a>
</li>
</ol>
</li>
<li><a href="#featured-images">featured images</a>
<ol>
<li><a href="#file-structure">file structure</a>
</li>
<li><a href="#front-matter">front matter</a>
</li>
<li><a href="#image-html-transform">image HTML transform</a>
</li>
<li><a href="#passthrough-copy">passthrough copy</a>
</li>
<li><a href="#templating">templating</a>
</li>
<li><a href="#home-page-and-related-posts">home page and related posts</a>
</li>
<li><a href="#post-body">post body</a>
</li>
</ol>
</li>
<li><a href="#pagination">pagination</a>
<ol>
<li><a href="#simple-pagination">simple pagination</a>
<ol>
<li><a href="#pagination.njk">pagination.njk</a>
</li>
<li><a href="#calling-the-template">calling the template</a>
</li>
</ol>
</li>
<li><a href="#complex-pagination">complex pagination</a>
<ol>
<li><a href="#eleventy.config.js">eleventy.config.js</a>
</li>
<li><a href="#tag-pages.njk">tag-pages.njk</a>
</li>
<li><a href="#filters.js-(again)">filters.js (again)</a>
</li>
</ol>
</li>
</ol>
</li>
<li><a href="#tag-image-preview">tag image preview</a>
<ol>
<li><a href="#preview-the-first-featured-image">preview the first featured image</a>
</li>
<li><a href="#preview-a-collage-of-recent-featured-images">preview a collage of recent featured images</a>
<ol>
<li><a href="#handling-multiple-aspect-ratios">handling multiple aspect ratios</a>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</nav>
</details>
</aside>
<p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
<p>Originally, I compiled some of the things I've learned in a standalone site.</p>
<p>however, since I don't know how much I'll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I'll skip the intro to Markdown content. I'm also going to update them where I've learned more or to better match what's represented on this site.</p>
<p>this will comprise of 4 parts: <a href="#related-posts">related posts</a>, <a href="#featured-images">featured images</a>, <a href="#pagination">pagination</a>, and <a href="#tag-image-preview">tag image preview</a>. Feel free to jump ahead, as none depend on the others.</p>
@@ -1858,7 +2034,7 @@ switch (currentThemeValue) {
<li>I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order</li>
<li>I wanted to exclude the posts that I could reach with between-post pagination</li>
</ol>
<h3 id="filters-js">filters.js</h3>
<h3 id="filters.js">filters.js</h3>
<p>after adjusting for those needs, I had the following in <code>filters.js</code>:</p>
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"excludeFromCollection"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> urls<span class="token operator">=</span><span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> urls<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>post<span class="token punctuation">.</span>url<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -1882,7 +2058,7 @@ eleventyConfig<span class="token punctuation">.</span><span class="token functio
<span class="token keyword">return</span> shuffledArray<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3 id="post-njk">post.njk</h3>
<h3 id="post.njk">post.njk</h3>
<p>I used this in my post layout. <code>filterTagList</code> comes with the base blog by default, and removes the tags &quot;posts&quot; and &quot;all.&quot; <code>head</code> also comes with the base blog. <code>postlist.njk</code> is my modified-from-the-base-blog post layout.</p>
<pre class="language-html"><code class="language-html">{% set relevantTags = tags | filterTagList %}
@@ -1981,7 +2157,7 @@ pagination:
</code></pre>
<p>6 posts per page, paginate data from <code>collections.posts</code> which we'll call just <code>posts</code> for short, and do it in reverse (aka, most recent posts show first).</p>
<p><a href="https://www.11ty.dev/docs/pagination/nav" target="_blank" rel="external">You'll also likely want previous and next buttons</a>. I did. Here's what I have...</p>
<h4 id="pagination-njk">pagination.njk</h4>
<h4 id="pagination.njk">pagination.njk</h4>
<p>There's two components to this, the bigger one being this <code>pagination.njk</code> template. Look, I like my little icons, ok? It takes an <code>olderHref</code> and a <code>newerHref</code>, and optionally an <code>olderTitle</code> and <code>newerTitle</code>.</p>
<pre class="language-html"><code class="language-html">{% if olderHref or newerHref %}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
@@ -2016,7 +2192,7 @@ pagination:
<h3 id="complex-pagination">complex pagination</h3>
<p>however, there's a catch. <a href="https://www.11ty.dev/docs/quicktips/tag-pages/" target="_blank" rel="external">Tag pages are <em>created</em> via pagination</a>! It's a lot harder to paginate those - you can't just use the front matter to set it up.</p>
<p>I untangled <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-445236776" target="_blank" rel="external">this GitHub issue about double-layered pagination</a> and came to the following solution...</p>
<h4 id="eleventy-config-js">eleventy.config.js</h4>
<h4 id="eleventy.config.js">eleventy.config.js</h4>
<p>in <code>eleventy.config.js</code>:</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// note that this uses the lodash.chunk method, so you’ll have to import that</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"tagPagination"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -2046,7 +2222,7 @@ eleventyConfig<span class="token punctuation">.</span><span class="token functio
<span class="token keyword">return</span> tagMap<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h4 id="tag-pages-njk">tag-pages.njk</h4>
<h4 id="tag-pages.njk">tag-pages.njk</h4>
<p>in my <code>tag-pages.njk</code> file (or whatever you use to template out your tag pages):</p>
<pre class="language-html"><code class="language-html">---
pagination:
@@ -2072,7 +2248,7 @@ eleventyExcludeFromCollections: true
{% endif %}
{% include "pagination.njk" %}</code></pre>
<p>note the pagination checking <code>tag.pageNumber</code> against <code>tag.PageSize</code> - the <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-445236776" target="_blank" rel="external">original suggested solution</a> in the GitHub post creates an issue where the pagination loops through <em>all</em> of the tag pages bit-by-bit. This sorts that - hat tip to <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-1248185406" target="_blank" rel="external">TheReyzar who mentioned the issue and showed part of their solution</a>.</p>
<h4 id="filters-js-again">filters.js (again)</h4>
<h4 id="filters.js-(again)">filters.js (again)</h4>
<p>finally, in my <code>filters.js</code> file, I add the <code>tagPagination</code> tag to the tags that get filtered using <code>filterTagList</code>:</p>
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterTagList"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">filterTagList</span><span class="token punctuation">(</span><span class="token parameter">tags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>tags <span class="token operator">||</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">filter</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">"all"</span><span class="token punctuation">,</span> <span class="token string">"posts"</span><span class="token punctuation">,</span> <span class="token string">"tagPagination"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -2136,6 +2312,7 @@ eleventyExcludeFromCollections: true
<hr>
<p>There's the good stuff from <a href="https://inherentlee.codeberg.page/lessons/" target="_blank" rel="external">11ty Lessons</a>. Hope you enjoyed.</p>
</article>
@@ -2173,12 +2350,26 @@ eleventyExcludeFromCollections: true
<section class="related-posts">
<h2 data-ha-exclude="" id="related-posts-2">related posts</h2>
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="">intro to wireframing </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
</a>
</li>
<li class="post">
<a class="postlink" href="/visual-site-builders-and-accessibility/">
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </h2>
<h2 data-ha-exclude="">visual site builders and accessibility </h2>
<ul class="postlist-tags">
@@ -2191,31 +2382,15 @@ eleventyExcludeFromCollections: true
</li>
<li class="post">
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy." loading="lazy" decoding="async" width="1000" height="827">
</a>
</li>
<li class="post">
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing </h2>
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="">backend accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2272,6 +2447,6 @@ eleventyExcludeFromCollections: true
</footer>
<!-- This page `/eleventy-lessons/` was built on 2026-09-20T00:40:39.765Z -->
<!-- This page `/eleventy-lessons/` was built on 2026-09-20T22:08:14.587Z -->
</body>
</html>