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

317
_site/eleventy-lessons/index.html
View File

@ -232,6 +232,224 @@ pre[class*=language-]::selection {
.token.selector {
color: var(--color-purple);
}
#postlist,
#taglist {
list-style: none;
}
#postlist, .post,
#taglist, .tag {
margin: 0;
}
/* Odd-numbered posts & tag layout/coloration */
.post:nth-child(odd) .postlink,
.tag:nth-child(odd) .taglink {
grid-template-areas:
'img h2'
'img info'
'img .';
grid-template-columns: 45% auto;;
--color-primary: var(--color-teal);
--color-accent: var(--color-pink);
}
/* Even-numbered posts & tags layout/coloration */
.post:nth-child(even) .postlink,
.tag:nth-child(even) .taglink {
grid-template-areas:
'h2 img'
'info img'
'. img';
grid-template-columns: auto 45%;
--color-primary: var(--color-pink);
--color-accent: var(--color-teal);
}
/* Layout for all posts on mobile */
@media (max-width: 650px) {
.post:nth-child(n) .postlink,
.tag:nth-child(n) .taglink {
grid-template-areas:
'img'
'h2'
'info';
grid-template-columns: auto;
}
}
/* Link */
.postlink,
.taglink {
display: grid;
border: .25rem solid var(--color-primary);
border-radius: 1.25rem;
box-shadow: .35rem .35rem var(--color-shadow);
margin: 2rem 0;
text-decoration: none;
/* Click animation handling */
position: relative;
top: 0;
left: 0;
transition: top .05s ease-in, left .05s ease-in;
}
.postlink:focus-visible,
.taglink:focus-visible {
background-color: var(--color-primary);
outline: none;
}
@media (any-hover: hover) {
.postlink:hover,
.taglink:hover {
background-color: var(--color-primary);
}
}
/* Forced colors */
@media (forced-colors: active) {
.postlink:focus-visible,
.taglink:focus-visible {
outline-offset: .25rem;
outline: .25rem solid;
}
@media (any-hover: hover) {
.postlink:hover,
.taglink:hover {
outline-offset: .25rem;
outline: .25rem solid;
}
}
}
/* Click animation */
.postlink:active,
.taglink:active {
box-shadow: none;
top: .2rem;
left: .2rem;
box-shadow: .15rem .15rem var(--color-shadow);
}
/* Post & tag elements */
.post h2, .post img,
.post ul, .post li,
.tag h2, .tag p,
.tag img {
margin: 0;
}
.post h2,
.tag h2 {
grid-area: h2;
padding: .25rem .5rem;
text-transform: uppercase;
font-size: 1.5rem;
color: var(--color-primary);
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
.post:nth-child(even) h2,
.tag:nth-child(even) h2 {
text-align: right;
}
.postlink:focus-visible h2,
.taglink:focus-visible h2 {
color: var(--color-bg);
border-color: var(--color-bg);
}
@media (any-hover: hover) {
.postlink:hover h2,
.taglink:hover h2 {
color: var(--color-bg);
border-color: var(--color-bg);
}
}
/* Images */
.post img,
.tag-imgs {
grid-area: img;
}
.tag-imgs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .15rem;
}
.tag-imgs img {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.missing-image {
width: 100%;
aspect-ratio: 3 / 2;
background-color: var(--color-bg-alt);
border-radius: calc(1rem);
}
.taglink:focus-visible .missing-image {
opacity: .7;
}
@media (any-hover: hover) {
.taglink:hover .missing-image {
opacity: .7;
}
}
/* Post tags */
.postlist-tags {
grid-area: info;
list-style: none;
display: flex;
flex-flow: row wrap;
gap: .5rem;
padding: .5rem;
}
.post:nth-child(odd) .postlist-tags {
justify-content: flex-end;
}
.postlist-tags li,
.tagcount {
background-color: var(--color-primary);
color: var(--color-bg);
padding: 0 .5rem;
border-radius: 1rem;
}
.postlink:focus-visible .postlist-tags li,
.taglink:focus-visible .tagcount {
background-color: var(--color-bg);
color: var(--color-primary);
}
@media (any-hover: hover) {
.postlink:hover .postlist-tags li,
.taglink:hover .tagcount {
background-color: var(--color-bg);
color: var(--color-primary);
}
}
/* Tag count */
.tag p {
grid-area: info;
padding: .5rem;
}
.tag:nth-child(odd) p {
text-align: right;
}
:root {
color-scheme: light dark;
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
--header-offset: 3.1rem;
}
/* Base */
@ -305,7 +521,7 @@ main {
width: 60vw;
max-width: 1000px;
margin: 0 auto;
scroll-margin-top: var(--header-offset);
scroll-margin-top: 7rem;
}
@media (max-width: 1050px) {
@ -324,7 +540,6 @@ main {
h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
color: var(--color-teal);
scroll-margin-top: var(--header-offset);
}
h1 {
@ -333,6 +548,10 @@ h1 {
text-align: center;
}
h2, h3, h4, h5, h6 {
scroll-margin-top: 5rem;
}
h2 {
margin-top: 2rem;
font-size: 2.2rem;
@ -494,13 +713,9 @@ time {
/* Horizontal rules */
hr {
color: var(--color-teal);
border: .25rem solid var(--color-teal);
border: .25rem solid var(--color-pink);
margin: 2rem 0;
}
hr:last-child {
margin-bottom: 0;
}
/* Used on home, reference, gallery pages */
.centered {
@ -516,9 +731,10 @@ header {
position: sticky;
top: 0;
background-color: var(--color-bg);
box-shadow: 0 .25rem .15rem var(--color-shadow);
padding: .75rem 0;
z-index: 10;
border-bottom: .5rem solid var(--color-teal);
box-shadow: 0 .25rem .15rem var(--color-shadow);
}
/* Header links, pagination links */
@ -711,6 +927,7 @@ header li {
footer {
padding: 1rem 0;
font-size: .9rem;
border-top: .5rem solid var(--color-pink);
}
footer ul {
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="eleventy-lessons">eleventy lessons</h1>
@ -1202,7 +1420,7 @@ export { HeadingAnchors }</script>
<img 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, 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>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>I've compiled some of the things I've learned in a standalone site: <a href="https://inherentlee.codeberg.page/lessons/" target="_blank" rel="external">11ty Lessons</a>.</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>
@ -1211,15 +1429,16 @@ export { HeadingAnchors }</script>
<p>by default, the <a href="github.com/11ty/eleventy-base-blog" target="_blank" rel="external">Eleventy base blog</a> comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.</p>
<p>while that is useful for <em>this</em> site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.</p>
<p>I started by referring to <a href="https://github.com/11ty/eleventy/discussions/2534" target="_blank rel=external&quot;">this GitHub issue about related posts</a>. I had to fix a few errors that arose from the suggested code.</p>
<p>I also wanted to make two changes:</p>
<p>I also wanted to make three changes:</p>
<ol>
<li>I didn't want to just see posts that shared <em>all</em> tags, but rather posts that shared <em>any</em> tag</li>
<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>
<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">addNunjucksFilter</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> pageUrl<span class="token operator">=</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><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> post<span class="token punctuation">.</span>url <span class="token operator">!==</span> pageUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
<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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterByTags"</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> <span class="token operator">...</span>requiredTags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -1243,7 +1462,12 @@ eleventyConfig<span class="token punctuation">.</span><span class="token functio
<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 %}
{% 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 %}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>related-posts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>related posts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
@ -1514,10 +1738,67 @@ eleventyExcludeFromCollections: true
</nav>
<hr>
<section class="related-posts">
<h2 id="related-posts-2">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/domain-and-site-setup/">
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
<h2 id="domain-and-site-setup">domain and site setup</h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
</a>
</li>
<li class="post">
<a class="postlink" href="/designing-a-bag/">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
<h2 id="designing-a-bag">designing a bag</h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
</ul>
</a>
</li>
<li class="post">
<a class="postlink" href="/intro-to-wireframing/">
<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">
<h2 id="intro-to-wireframing">intro to wireframing</h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
</a>
</li>
</ol>
</section>
</heading-anchors>
<hr>
</main>
<footer>
@ -1542,6 +1823,6 @@ eleventyExcludeFromCollections: true
</footer>
<!-- This page `/eleventy-lessons/` was built on 2026-02-20T16:02:10.534Z -->
<!-- This page `/eleventy-lessons/` was built on 2026-02-20T16:35:28.475Z -->
<body>
</body></body>