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

run build

Browse Source
This commit is contained in:
Lee Cattarin
2026-02-20 08:36:56 -08:00
parent 7d1fe776c7
commit 9249a6e050
259 changed files with 54996 additions and 3364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
_site/feed.xml
View File

@ -15,7 +15,7 @@
<link href="https://leecat.art/eleventy-lessons/" />
<updated>2026-02-19T00:00:00Z</updated>
<id>https://leecat.art/eleventy-lessons/</id>
<content type="html">&lt;p&gt;recently I wrote &lt;em&gt;several&lt;/em&gt; sites using &lt;a href=&quot;https://www.11ty.dev/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Eleventy&lt;/a&gt; (4? 5?). Including, over the past few days, this one! That&#39;s right, if you&#39;re reading this, we&#39;re now running on 11ty and hosted by &lt;a href=&quot;https://heckin.technology/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;heckin.technology&lt;/a&gt;. See ya, GitHub. Won&#39;t miss ya.&lt;/p&gt;
<content type="html">&lt;p&gt;recently I wrote &lt;em&gt;several&lt;/em&gt; sites using &lt;a href=&quot;https://www.11ty.dev/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Eleventy&lt;/a&gt; (4? 5?). Including, over the past few days, rewriting this one! That&#39;s right, if you&#39;re reading this, we&#39;re now running on 11ty and hosted by &lt;a href=&quot;https://heckin.technology/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;heckin.technology&lt;/a&gt;. See ya, GitHub. Won&#39;t miss ya.&lt;/p&gt;
&lt;p&gt;I&#39;ve compiled some of the things I&#39;ve learned in a standalone site: &lt;a href=&quot;https://inherentlee.codeberg.page/lessons/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;11ty Lessons&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;however, since I don&#39;t know how much I&#39;ll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I&#39;ll skip the intro to Markdown content. I&#39;m also going to update them where I&#39;ve learned more or to better match what&#39;s represented on this site.&lt;/p&gt;
&lt;p&gt;this will comprise of 4 parts: &lt;a href=&quot;https://leecat.art/eleventy-lessons/#related-posts&quot;&gt;related posts&lt;/a&gt;, &lt;a href=&quot;https://leecat.art/eleventy-lessons/#featured-images&quot;&gt;featured images&lt;/a&gt;, &lt;a href=&quot;https://leecat.art/eleventy-lessons/#pagination&quot;&gt;pagination&lt;/a&gt;, and &lt;a href=&quot;https://leecat.art/eleventy-lessons/#tag-image-preview&quot;&gt;tag image preview&lt;/a&gt;. Feel free to jump ahead, as none depend on the others.&lt;/p&gt;
@ -24,15 +24,16 @@
&lt;p&gt;by default, the &lt;a href=&quot;https://leecat.art/eleventy-lessons/github.com/11ty/eleventy-base-blog&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Eleventy base blog&lt;/a&gt; comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.&lt;/p&gt;
&lt;p&gt;while that is useful for &lt;em&gt;this&lt;/em&gt; site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.&lt;/p&gt;
&lt;p&gt;I started by referring to &lt;a href=&quot;https://github.com/11ty/eleventy/discussions/2534&quot; target=&quot;_blank rel=external&amp;quot;&quot;&gt;this GitHub issue about related posts&lt;/a&gt;. I had to fix a few errors that arose from the suggested code.&lt;/p&gt;
&lt;p&gt;I also wanted to make two changes:&lt;/p&gt;
&lt;p&gt;I also wanted to make three changes:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;I didn&#39;t want to just see posts that shared &lt;em&gt;all&lt;/em&gt; tags, but rather posts that shared &lt;em&gt;any&lt;/em&gt; tag&lt;/li&gt;
&lt;li&gt;I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order&lt;/li&gt;
&lt;li&gt;I wanted to exclude the posts that I could reach with between-post pagination&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;filters-js&quot;&gt;filters.js&lt;/h3&gt;
&lt;p&gt;after adjusting for those needs, I had the following in &lt;code&gt;filters.js&lt;/code&gt;:&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addNunjucksFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;excludeFromCollection&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;collection&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; pageUrl&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;ctx&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;page&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; collection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;post&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; post&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url &lt;span class=&quot;token operator&quot;&gt;!==&lt;/span&gt; pageUrl&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;excludeFromCollection&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;collection&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; urls&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;ctx&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;page&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; collection&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;post&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; urls&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;indexOf&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;filterByTags&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;collection&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;requiredTags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
@ -56,7 +57,12 @@ eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;
&lt;h3 id=&quot;post-njk&quot;&gt;post.njk&lt;/h3&gt;
&lt;p&gt;I used this in my post layout. &lt;code&gt;filterTagList&lt;/code&gt; comes with the base blog by default, and removes the tags &amp;quot;posts&amp;quot; and &amp;quot;all.&amp;quot; &lt;code&gt;head&lt;/code&gt; also comes with the base blog. &lt;code&gt;postlist.njk&lt;/code&gt; is my modified-from-the-base-blog post layout.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% set relevantTags = tags | filterTagList %}
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(page.url) | randomize | head(2) %}
{% set olderPost = collections.posts | getPreviousCollectionItem %}
{% set newerPost = collections.posts | getNextCollectionItem %}
{% set urlsToExclude = [page.url, olderPost.url, newerPost.url]}
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(urlsToExclude) | randomize | head(3) %}
{% if postlist.length %}
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;section&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;related-posts&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;related posts&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;