1547 lines
68 KiB
HTML
1547 lines
68 KiB
HTML
<!doctype html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
|
||
<title>eleventy lessons | hello hello</title>
|
||
<meta name="description" content="Lee Cattarin... on the internet!">
|
||
<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
|
||
|
||
<meta property="og:title" content="eleventy lessons">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:description" content="Lee Cattarin... on the internet!">
|
||
<meta property="og:site_name" content="hello hello">
|
||
|
||
<meta property="og:image" content="/img/hellebore.jpg">
|
||
<meta property="og:image:alt" content="Image unrelated to post. Close up on a pale green hellebore flower.">
|
||
|
||
|
||
<meta name="generator" content="Eleventy v3.1.2">
|
||
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
|
||
|
||
|
||
<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<style>.post-metadata {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin: 1.5rem 0 .5rem;
|
||
}
|
||
|
||
.post-metadata p {
|
||
font-size: .9rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
gap: .5rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags li {
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags li a {
|
||
text-decoration: none;
|
||
color: var(--color-teal);
|
||
padding: 0 .5rem;
|
||
border-radius: 1rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
border: .08rem solid var(--color-teal);
|
||
line-height: 2;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .1s ease-in, left .1s ease-in;
|
||
}
|
||
|
||
.post-tags li a:focus-visible {
|
||
outline: none;
|
||
background-color: var(--color-teal);
|
||
color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.post-tags li a:hover {
|
||
outline: none;
|
||
background-color: var(--color-teal);
|
||
color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.post-tags li a:focus-visible {
|
||
outline-offset: .08rem;
|
||
outline: .08rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.post-tags li a:hover {
|
||
outline-offset: .08rem;
|
||
outline: .08rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
.post-tags li a:active {
|
||
top: .1rem;
|
||
left: .1rem;
|
||
box-shadow: .05rem .05rem var(--color-shadow);
|
||
}
|
||
/* Adapted from PrismJS 1.30.0 Tomorrow Night theme
|
||
https://prismjs.com/download
|
||
*/
|
||
code,
|
||
pre,
|
||
code[class*=language-],
|
||
pre[class*=language-] {
|
||
font-family: var(--font-family-code);
|
||
background-color: var(--color-bg-alt);
|
||
font-size: .9rem;
|
||
text-shadow: 0 1px var(--color-shadow);
|
||
-moz-tab-size: 4;
|
||
-o-tab-size: 4;
|
||
tab-size: 4;
|
||
-webkit-hyphens: none;
|
||
-moz-hyphens: none;
|
||
-ms-hyphens: none;
|
||
hyphens: none;
|
||
}
|
||
|
||
pre,
|
||
pre[class*=language-] {
|
||
margin: 1rem 0;
|
||
padding: 1rem;
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
overflow-wrap: break-word;
|
||
border-radius: .5rem;
|
||
overflow: auto;
|
||
}
|
||
|
||
:not(pre)>code,
|
||
:not(pre)>code[class*=language-] {
|
||
padding: .2rem;
|
||
border-radius: .25rem;
|
||
white-space: normal;
|
||
}
|
||
|
||
/* Selected text */
|
||
code ::-moz-selection,
|
||
code::-moz-selection,
|
||
pre ::-moz-selection,
|
||
pre::-moz-selection,
|
||
code[class*=language-] ::-moz-selection,
|
||
code[class*=language-]::-moz-selection,
|
||
pre[class*=language-] ::-moz-selection,
|
||
pre[class*=language-]::-moz-selection,
|
||
code ::selection,
|
||
code::selection,
|
||
pre ::selection,
|
||
pre::selection,
|
||
code[class*=language-] ::selection,
|
||
code[class*=language-]::selection,
|
||
pre[class*=language-] ::selection,
|
||
pre[class*=language-]::selection {
|
||
text-shadow: none;
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
/* Syntax highlighting */
|
||
.token.namespace {
|
||
opacity: .7;
|
||
}
|
||
|
||
.token.bold,
|
||
.token.important {
|
||
font-weight:700
|
||
}
|
||
|
||
.token.italic {
|
||
font-style:italic
|
||
}
|
||
|
||
.token.block-comment,
|
||
.token.cdata,
|
||
.token.comment,
|
||
.token.doctype,
|
||
.token.prolog,
|
||
.token.punctuation {
|
||
color: var(--color-grey);
|
||
}
|
||
|
||
.token.attr-name,
|
||
.token.deleted,
|
||
.token.namespace,
|
||
.token.tag {
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.token.boolean,
|
||
.token.function,
|
||
.token.number {
|
||
color: var(--color-orange);
|
||
}
|
||
|
||
.token.class-name,
|
||
.token.constant,
|
||
.token.property,
|
||
.token.symbol {
|
||
color: var(--color-yellow);
|
||
}
|
||
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.regex,
|
||
.token.string,
|
||
.token.variable,
|
||
.token.inserted {
|
||
color: var(--color-green);
|
||
}
|
||
|
||
.token.entity,
|
||
.token.operator,
|
||
.token.url,
|
||
.token.function-name {
|
||
color:var(--color-blue);
|
||
}
|
||
|
||
.token.atrule,
|
||
.token.builtin,
|
||
.token.important,
|
||
.token.keyword,
|
||
.token.selector {
|
||
color: var(--color-purple);
|
||
}
|
||
:root {
|
||
color-scheme: light dark;
|
||
|
||
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
|
||
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
|
||
|
||
--color-dark: #2e303e;
|
||
--color-dark-alt: #3c3f52;
|
||
--color-light: #ebeeef;
|
||
--color-light-alt: #dbe1e3;
|
||
|
||
--color-teal-dark: #18737b;
|
||
--color-teal-light: #25b0bc;
|
||
--color-pink-dark: #94195d;
|
||
--color-pink-light: #ee9fcb;
|
||
|
||
--color-shadow: rgba(2, 10, 40, .25);
|
||
|
||
/* Used for syntax highlighting */
|
||
--color-red-light: #e95678;
|
||
--color-orange-light: #fab795;
|
||
--color-yellow-light: #fbe6bc;
|
||
--color-green-light: #29d398;
|
||
--color-blue-light: #26bbd9;
|
||
--color-purple-light: #ddaeea;
|
||
--color-grey-light: #b9c3c6;
|
||
|
||
--color-red-dark: #991433;
|
||
--color-orange-dark: #883206;
|
||
--color-yellow-dark: #6a4906;
|
||
--color-green-dark: #125940;
|
||
--color-blue-dark: #125663;
|
||
--color-purple-dark: #722999;
|
||
--color-grey-dark: #4a4b64;
|
||
|
||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||
|
||
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
|
||
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
|
||
|
||
--color-teal: light-dark(var(--color-teal-dark), var(--color-teal-light));
|
||
--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
|
||
|
||
--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
|
||
--color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light));
|
||
--color-yellow: light-dark(var(--color-yellow-dark), var(--color-yellow-light));
|
||
--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
|
||
--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 */
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-family);
|
||
color: var(--color-text);
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
main {
|
||
width: 60vw;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
scroll-margin-top: var(--header-offset);
|
||
}
|
||
|
||
@media (max-width: 1050px) {
|
||
main {
|
||
width: 75vw;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
main {
|
||
width: 92vw;
|
||
}
|
||
}
|
||
|
||
/* Headers */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
line-height: 1.25;
|
||
color: var(--color-teal);
|
||
scroll-margin-top: var(--header-offset);
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 3rem;
|
||
font-size: 3.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 2rem;
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
h3 {
|
||
margin-top: 1.5rem;
|
||
font-size: 1.6rem;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
h1 { font-size: 2.8rem; }
|
||
h2 { font-size: 1.8rem; }
|
||
h3 { font-size: 1.35rem; }
|
||
}
|
||
|
||
h4, h5, h6 {
|
||
margin-top: 1rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Images */
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 1rem;
|
||
}
|
||
|
||
/* Paragraphs */
|
||
p {
|
||
margin: 1.25rem 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
strong,
|
||
b {
|
||
font-weight: 900;
|
||
}
|
||
|
||
/* Links */
|
||
a {
|
||
color: var(--color-text);
|
||
border-radius: .25rem;
|
||
text-decoration: underline;
|
||
text-decoration-style: solid;
|
||
text-decoration-thickness: .2em;
|
||
text-decoration-color: var(--color-teal);
|
||
transition: text-decoration-thickness .5s;
|
||
}
|
||
|
||
a:focus-visible {
|
||
text-decoration: none;
|
||
outline: .15rem solid var(--color-teal);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
a:hover {
|
||
text-decoration-thickness: .4em;
|
||
}
|
||
}
|
||
|
||
a:active {
|
||
text-decoration-thickness: .4em;
|
||
}
|
||
|
||
/* Heading anchors */
|
||
a.ha,
|
||
span.ha-placeholder {
|
||
color: var(--color-pink);
|
||
}
|
||
span.ha-placeholder {
|
||
opacity: .55;
|
||
}
|
||
|
||
|
||
/* Lists */
|
||
::marker {
|
||
color: var(--color-pink);
|
||
}
|
||
|
||
ul, ol, dl, li {
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
li {
|
||
line-height: 1.2 5;
|
||
margin-top: .65rem;
|
||
margin-bottom: .65rem;
|
||
}
|
||
|
||
li ul, li ol {
|
||
margin: .5rem 0;
|
||
}
|
||
|
||
dt {
|
||
font-weight: 900;
|
||
margin-top: .5rem;
|
||
}
|
||
|
||
dd {
|
||
margin-left: 2rem;
|
||
margin-bottom: .75rem;
|
||
}
|
||
|
||
/* Blockquotes */
|
||
blockquote {
|
||
margin: .5rem 0;
|
||
padding: 0 1rem;
|
||
border-radius: .25rem 1rem 1rem .25rem;
|
||
line-height: 1.25;
|
||
border-left: .5rem solid var(--color-pink);
|
||
}
|
||
|
||
blockquote,
|
||
blockquote p,
|
||
blockquote ol,
|
||
blockquote ul {
|
||
background-color: var(--color-bg-alt);
|
||
padding: .5rem;
|
||
}
|
||
|
||
blockquote p {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Tables */
|
||
table {
|
||
width: 100%;
|
||
border-spacing: 0; /* border collapse doesn't play nice with radii */
|
||
border-radius: .3rem;
|
||
border: thin solid var(--color-pink);
|
||
}
|
||
|
||
th {
|
||
color: var(--color-bg);
|
||
background-color: var(--color-pink);
|
||
}
|
||
|
||
th code {
|
||
color: var(--color-text); /* Yes, I actually do this somewhere */
|
||
}
|
||
|
||
th, td {
|
||
padding: .5rem;
|
||
text-align: left;
|
||
}
|
||
|
||
tr:nth-child(even) { background-color: var(--color-bg-alt); }
|
||
th:not(:first-child) { border-left: thin solid var(--color-bg); }
|
||
th:first-child { border-top-left-radius: .25rem; }
|
||
th:last-child { border-top-right-radius: .25rem; }
|
||
td:not(:first-child) { border-left: thin solid var(--color-pink); }
|
||
|
||
/* Times */
|
||
time {
|
||
color: var(--color-grey);
|
||
}
|
||
|
||
/* Horizontal rules */
|
||
hr {
|
||
color: var(--color-teal);
|
||
border: .25rem solid var(--color-teal);
|
||
margin: 2rem 0;
|
||
}
|
||
hr:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Used on home, reference, gallery pages */
|
||
.centered {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Currently only used for resume, but it's generalizable */
|
||
.upper {
|
||
text-transform: uppercase;
|
||
}
|
||
/* Header */
|
||
header {
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: var(--color-bg);
|
||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||
padding: .75rem 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* Header links, pagination links */
|
||
header a,
|
||
.pagination a,
|
||
.webring ul a {
|
||
border-radius: 1rem;
|
||
border: .125rem solid var(--color-pink);
|
||
color: var(--color-pink);
|
||
text-decoration: none;
|
||
padding: 0 .25rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
font-size: 1.2rem;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .05s ease-in, left .05s ease-in;
|
||
}
|
||
|
||
header a,
|
||
.pagination .older a,
|
||
.webring .prev a,
|
||
.webring .rand a {
|
||
padding-right: .35rem;
|
||
}
|
||
|
||
.pagination .newer a,
|
||
.webring .next a,
|
||
.webring .rand a {
|
||
padding-left: .35rem;
|
||
}
|
||
|
||
header a:focus-visible,
|
||
.pagination a:focus-visible,
|
||
.webring ul a:focus-visible {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-pink);
|
||
background-color: var(--color-pink);
|
||
outline: none;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover,
|
||
.pagination a:hover,
|
||
.webring ul a:hover {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-pink);
|
||
background-color: var(--color-pink);
|
||
}
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
header a:focus-visible,
|
||
.pagination a:focus-visible,
|
||
.webring ul a:focus-visible {
|
||
outline-offset: .125rem;
|
||
outline: .125rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover,
|
||
.pagination a:hover,
|
||
.webring ul a:hover {
|
||
outline-offset: .125rem;
|
||
outline: .125rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
header a:active,
|
||
.pagination a:active,
|
||
.webring ul a:active {
|
||
top: .1rem;
|
||
left: .1rem;
|
||
box-shadow: .05rem .05rem var(--color-shadow);
|
||
}
|
||
|
||
/* Current page */
|
||
header a[aria-current="page"] {
|
||
border-color: var(--color-teal);
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
header a[aria-current="page"]:focus-visible {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-teal);
|
||
background-color: var(--color-teal);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a[aria-current="page"]:hover {
|
||
color: var(--color-bg);
|
||
background-color: var(--color-teal);
|
||
border-color: var(--color-teal);
|
||
}
|
||
}
|
||
|
||
/* Header link icons, pagination icons */
|
||
header i,
|
||
.pagination i,
|
||
.webring ul i {
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
header i,
|
||
.pagination .older i,
|
||
.webring .prev i,
|
||
.webring .rand i:nth-child(1) {
|
||
padding-left: .25rem;
|
||
}
|
||
|
||
.pagination .newer i,
|
||
.webring .next i,
|
||
.webring .rand i:nth-child(2) {
|
||
padding-right: .25rem;
|
||
}
|
||
|
||
header a[aria-current="page"] i {
|
||
color: var(--color-pink);
|
||
}
|
||
|
||
header a:focus-visible i,
|
||
a[aria-current="page"] a:focus-visible i,
|
||
.pagination a:focus-visible i,
|
||
.webring ul a:focus-visible i {
|
||
color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover i,
|
||
header a[aria-current="page"]:hover i,
|
||
.pagination a:hover i,
|
||
.webring ul a:hover i {
|
||
color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
/* Skip link */
|
||
#skip {
|
||
left: -999px;
|
||
position: absolute;
|
||
top: auto;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
z-index: -99;
|
||
}
|
||
|
||
#skip:focus-visible {
|
||
display: inline-block;
|
||
left: auto;
|
||
top: auto;
|
||
width: auto;
|
||
height: auto;
|
||
overflow: auto;
|
||
margin: 0 10%;
|
||
z-index: 999;
|
||
}
|
||
|
||
/* Nav */
|
||
header ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
header ul,
|
||
header li {
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
.menu-text {
|
||
display: none; /* Icons only on small screens */
|
||
}
|
||
|
||
header a {
|
||
padding: .15rem .5rem;
|
||
}
|
||
|
||
header i {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 1rem 0;
|
||
font-size: .9rem;
|
||
}
|
||
|
||
footer ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: .5rem;
|
||
justify-content: center;
|
||
margin: 0;
|
||
}
|
||
|
||
footer li {
|
||
margin: 0;
|
||
}
|
||
|
||
footer li:nth-child(2)::before,
|
||
footer li:nth-child(2)::after {
|
||
content: " ● " / "";
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
footer ul {
|
||
flex-flow: column;
|
||
text-align: center;
|
||
}
|
||
|
||
footer li:nth-child(2)::before,
|
||
footer li:nth-child(2)::after {
|
||
content: none;
|
||
}
|
||
}
|
||
|
||
footer a {
|
||
text-decoration-color: var(--color-pink);
|
||
}
|
||
|
||
footer a:focus-visible {
|
||
outline-color: var(--color-pink);
|
||
}
|
||
|
||
/* Pagination */
|
||
.pagination,
|
||
.pagination li {
|
||
margin: 0;
|
||
}
|
||
|
||
.pagination {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-areas: "older newer";
|
||
list-style: none;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
.post-pagination {
|
||
grid-template-columns: 1fr;
|
||
grid-template-areas:
|
||
"older"
|
||
"newer";
|
||
gap: .75rem;
|
||
}
|
||
}
|
||
|
||
.pagination .older {
|
||
grid-area: older;
|
||
}
|
||
|
||
.pagination .newer {
|
||
grid-area: newer;
|
||
text-align: right;
|
||
}
|
||
|
||
/* webring navigation */
|
||
.webring {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.webring ul {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
list-style: none;
|
||
justify-content: space-around;
|
||
gap: .35rem;
|
||
}
|
||
|
||
.webring ul,
|
||
.webring li {
|
||
margin-left: 0;
|
||
}
|
||
@media print {
|
||
/* Nav elements */
|
||
header,
|
||
footer,
|
||
nav {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Base */
|
||
body {
|
||
background-color: #fff;
|
||
color: #000;
|
||
}
|
||
|
||
main {
|
||
width: 95vw;
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6 {
|
||
color: #000;
|
||
}
|
||
|
||
/* Links */
|
||
/* Hover is not really necessary, but it's annoying when testing otherwise */
|
||
a,
|
||
a:hover {
|
||
text-decoration-style: dotted;
|
||
text-decoration-thickness: .1rem;
|
||
text-decoration-color: #000;
|
||
}
|
||
|
||
a::after{
|
||
content: " (" attr(href) ")";
|
||
}
|
||
|
||
|
||
/* Code */
|
||
code,
|
||
pre,
|
||
code[class*=language-],
|
||
pre[class*=language-] {
|
||
text-shadow: none;
|
||
background-color: var(--color-light);
|
||
color: #000 !important;
|
||
}
|
||
|
||
.token.namespace {
|
||
opacity: 1;
|
||
}
|
||
|
||
.token.block-comment,
|
||
.token.cdata,
|
||
.token.comment,
|
||
.token.doctype,
|
||
.token.prolog,
|
||
.token.punctuation,
|
||
.token.attr-name,
|
||
.token.deleted,
|
||
.token.namespace,
|
||
.token.tag,
|
||
.token.boolean,
|
||
.token.function,
|
||
.token.number,
|
||
.token.class-name,
|
||
.token.constant,
|
||
.token.property,
|
||
.token.symbol,
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.regex,
|
||
.token.string,
|
||
.token.variable,
|
||
.token.inserted,
|
||
.token.entity,
|
||
.token.operator,
|
||
.token.url,
|
||
.token.function-name,
|
||
.token.atrule,
|
||
.token.builtin,
|
||
.token.important,
|
||
.token.keyword,
|
||
.token.selector {
|
||
color: #000;
|
||
}
|
||
}</style>
|
||
|
||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||
|
||
let globalInstanceIndex = 0;
|
||
|
||
class HeadingAnchors extends HTMLElement {
|
||
static register(tagName = "heading-anchors", registry = window.customElements) {
|
||
if(registry && !registry.get(tagName)) {
|
||
registry.define(tagName, this);
|
||
}
|
||
}
|
||
|
||
static attributes = {
|
||
exclude: "data-ha-exclude",
|
||
prefix: "prefix",
|
||
content: "content",
|
||
}
|
||
|
||
static classes = {
|
||
anchor: "ha",
|
||
placeholder: "ha-placeholder",
|
||
srOnly: "ha-visualhide",
|
||
}
|
||
|
||
static defaultSelector = "h2,h3,h4,h5,h6";
|
||
|
||
static css = `
|
||
.${HeadingAnchors.classes.srOnly} {
|
||
clip: rect(0 0 0 0);
|
||
height: 1px;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
width: 1px;
|
||
}
|
||
.${HeadingAnchors.classes.anchor} {
|
||
position: absolute;
|
||
left: var(--ha_offsetx);
|
||
top: var(--ha_offsety);
|
||
text-decoration: none;
|
||
opacity: 0;
|
||
}
|
||
.${HeadingAnchors.classes.placeholder} {
|
||
opacity: .3;
|
||
}
|
||
.${HeadingAnchors.classes.anchor}:is(:focus-within, :hover) {
|
||
opacity: 1;
|
||
}
|
||
.${HeadingAnchors.classes.anchor},
|
||
.${HeadingAnchors.classes.placeholder} {
|
||
display: inline-block;
|
||
padding: 0 .25em;
|
||
|
||
/* Disable selection of visually hidden label */
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
@supports (anchor-name: none) {
|
||
.${HeadingAnchors.classes.anchor} {
|
||
position: absolute;
|
||
left: anchor(left);
|
||
top: anchor(top);
|
||
}
|
||
}`;
|
||
|
||
get supports() {
|
||
return "replaceSync" in CSSStyleSheet.prototype;
|
||
}
|
||
|
||
get supportsAnchorPosition() {
|
||
return CSS.supports("anchor-name: none");
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
|
||
if(!this.supports) {
|
||
return;
|
||
}
|
||
|
||
let sheet = new CSSStyleSheet();
|
||
sheet.replaceSync(HeadingAnchors.css);
|
||
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
|
||
|
||
this.headingStyles = {};
|
||
this.instanceIndex = globalInstanceIndex++;
|
||
}
|
||
|
||
connectedCallback() {
|
||
if (!this.supports) {
|
||
return;
|
||
}
|
||
|
||
this.headings.forEach((heading, index) => {
|
||
if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) {
|
||
let anchor = this.getAnchorElement(heading);
|
||
let placeholder = this.getPlaceholderElement();
|
||
|
||
// Prefers anchor position approach for better accessibility
|
||
// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||
if(this.supportsAnchorPosition) {
|
||
let anchorName = `--ha_${this.instanceIndex}_${index}`;
|
||
placeholder.style.setProperty("anchor-name", anchorName);
|
||
anchor.style.positionAnchor = anchorName;
|
||
}
|
||
|
||
heading.appendChild(placeholder);
|
||
heading.after(anchor);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Polyfill-only
|
||
positionAnchorFromPlaceholder(placeholder) {
|
||
if(!placeholder) {
|
||
return;
|
||
}
|
||
|
||
let heading = placeholder.closest("h1,h2,h3,h4,h5,h6");
|
||
if(!heading.nextElementSibling) {
|
||
return;
|
||
}
|
||
|
||
// TODO next element could be more defensive
|
||
this.positionAnchor(heading.nextElementSibling);
|
||
}
|
||
|
||
// Polyfill-only
|
||
positionAnchor(anchor) {
|
||
if(!anchor || !anchor.previousElementSibling) {
|
||
return;
|
||
}
|
||
|
||
// TODO previous element could be more defensive
|
||
let heading = anchor.previousElementSibling;
|
||
this.setFontProp(heading, anchor);
|
||
|
||
if(this.supportsAnchorPosition) {
|
||
// quit early
|
||
return;
|
||
}
|
||
|
||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
anchor.style.setProperty("--ha_offsetx", `${placeholder.offsetLeft}px`);
|
||
anchor.style.setProperty("--ha_offsety", `${placeholder.offsetTop}px`);
|
||
}
|
||
}
|
||
|
||
setFontProp(heading, anchor) {
|
||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
let style = getComputedStyle(placeholder);
|
||
let props = ["font-weight", "font-size", "line-height", "font-family"];
|
||
let [weight, size, lh, family] = props.map(name => style.getPropertyValue(name));
|
||
anchor.style.setProperty("font", `${weight} ${size}/${lh} ${family}`);
|
||
let vars = style.getPropertyValue("font-variation-settings");
|
||
if(vars) {
|
||
anchor.style.setProperty("font-variation-settings", vars);
|
||
}
|
||
}
|
||
}
|
||
|
||
getAccessibleTextPrefix() {
|
||
// Useful for i18n
|
||
return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
|
||
}
|
||
|
||
getContent() {
|
||
if(this.hasAttribute(HeadingAnchors.attributes.content)) {
|
||
return this.getAttribute(HeadingAnchors.attributes.content);
|
||
}
|
||
return "#";
|
||
}
|
||
|
||
// Placeholder nests inside of heading
|
||
getPlaceholderElement() {
|
||
let ph = document.createElement("span");
|
||
ph.setAttribute("aria-hidden", true);
|
||
ph.classList.add(HeadingAnchors.classes.placeholder);
|
||
let content = this.getContent();
|
||
if(content) {
|
||
ph.innerHTML = content; // CHANGED HERE
|
||
}
|
||
|
||
ph.addEventListener("mouseover", (e) => {
|
||
let placeholder = e.target.closest(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
this.positionAnchorFromPlaceholder(placeholder);
|
||
}
|
||
});
|
||
|
||
return ph;
|
||
}
|
||
|
||
getAnchorElement(heading) {
|
||
let anchor = document.createElement("a");
|
||
anchor.href = `#${heading.id}`;
|
||
anchor.classList.add(HeadingAnchors.classes.anchor);
|
||
|
||
let content = this.getContent();
|
||
anchor.innerHTML = `<span class="${HeadingAnchors.classes.srOnly}">${this.getAccessibleTextPrefix()}: ${heading.textContent}</span>${content ? `<span aria-hidden="true">${content}</span>` : ""}`;
|
||
|
||
anchor.addEventListener("focus", e => {
|
||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||
if(anchor) {
|
||
this.positionAnchor(anchor);
|
||
}
|
||
});
|
||
|
||
anchor.addEventListener("mouseover", (e) => {
|
||
// when CSS anchor positioning is supported, this is only used to set the font
|
||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||
this.positionAnchor(anchor);
|
||
});
|
||
|
||
return anchor;
|
||
}
|
||
|
||
get headings() {
|
||
return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
|
||
}
|
||
|
||
get selector() {
|
||
return this.getAttribute("selector") || HeadingAnchors.defaultSelector;
|
||
}
|
||
}
|
||
|
||
HeadingAnchors.register();
|
||
|
||
export { HeadingAnchors }</script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
|
||
<a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
|
||
<i class="fa-solid fa-forward" aria-hidden="true"></i> skip
|
||
</a>
|
||
|
||
<nav aria-label="main navigation">
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/reference/" title="read reference posts" aria-label="read reference posts">
|
||
<i class="fa-regular fa-folder-open" aria-hidden="true"></i>
|
||
<span class="menu-text">reference</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/gallery/" title="view the gallery" aria-label="view the gallery">
|
||
<i class="fa-regular fa-images" aria-hidden="true"></i>
|
||
<span class="menu-text">gallery</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/" title="" aria-label="">
|
||
<i class="fa fa-solid fa-crow" aria-hidden="true"></i>
|
||
<span class="menu-text">home</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/about/" title="about Lee" aria-label="about Lee">
|
||
<i class="fa-regular fa-user" aria-hidden="true"></i>
|
||
<span class="menu-text">about</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/contact/" title="contact Lee" aria-label="contact Lee">
|
||
<i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
|
||
<span class="menu-text">contact</span>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
</header>
|
||
|
||
|
||
<main id="main">
|
||
|
||
|
||
|
||
|
||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||
<article>
|
||
<h1 id="eleventy-lessons">eleventy lessons</h1>
|
||
|
||
<div class="post-metadata">
|
||
<p>
|
||
posted on
|
||
<time datetime="2026-02-19">February 19, 2026</time>
|
||
by Lee Cattarin
|
||
</p>
|
||
|
||
|
||
<ul class="post-tags">
|
||
|
||
<li>
|
||
|
||
<a href="/tags/software/">software</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
<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>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>
|
||
<hr>
|
||
<h2 id="related-posts">related posts</h2>
|
||
<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"">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>
|
||
<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>
|
||
</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>
|
||
<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>
|
||
<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> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> requiredTags<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>tags<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>tag<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 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">"randomize"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Create a copy of the array to avoid modifying the original</span>
|
||
<span class="token keyword">let</span> shuffledArray <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Fisher-Yates shuffle algorithm</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> shuffledArray<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> j <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>i <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>shuffledArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> shuffledArray<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>shuffledArray<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">,</span> shuffledArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<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>
|
||
<p>I used this in my post layout. <code>filterTagList</code> comes with the base blog by default, and removes the tags "posts" and "all." <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) %}
|
||
{% if postlist.length %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>h2</span><span class="token punctuation">></span></span>related posts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
|
||
{% include "postlist.njk" %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<p>and that sorts related posts.</p>
|
||
<hr>
|
||
<h2 id="featured-images">featured images</h2>
|
||
<blockquote>
|
||
<p>this one's been edited from the lessons site. I've learned a bit more about 11ty images and feel more comfortable with my build now.</p>
|
||
</blockquote>
|
||
<p>images in 11ty use the <a href="https://www.11ty.dev/docs/plugins/image/#eleventy-transform" target="_blank" rel="external">Image Transform Plugin</a>. I found it hard to find anything to reference while building this - a lot of sites in the template gallery are either text-heavy or not using the plugin - so I'm reproducing what I've got here for reference.</p>
|
||
<h3 id="file-structure">file structure</h3>
|
||
<pre><code>content/
|
||
|--img/
|
||
| |--sample-0.jpg
|
||
| |--sample-1.jpg
|
||
| `--etc
|
||
|--posts/
|
||
| |--lesson-0-front-matter-and-urls.md
|
||
| |--lesson-1-headings-paragraphs-and-horizontal-lines.md
|
||
| `--etc
|
||
`--etc
|
||
</code></pre>
|
||
<h3 id="front-matter">front matter</h3>
|
||
<p>for any given post, my front matter references the image in this manner:</p>
|
||
<pre><code>---
|
||
image:
|
||
src: sample-0.jpg
|
||
alt: moss on a fencepost
|
||
---
|
||
</code></pre>
|
||
<h3 id="image-html-transform">image HTML transform</h3>
|
||
<p>As mentioned, there's a plugin for images. If you started with the base blog, in <code>eleventy.config.js</code>, you'll probably find a chunk of code similar to this already in place:</p>
|
||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>eleventyImageTransformPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"auto"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">640</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">failOnError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">htmlOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">imgAttributes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// e.g. <img loading decoding> assigned on the HTML tag will override these values.</span>
|
||
<span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">decoding</span><span class="token operator">:</span> <span class="token string">"async"</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token literal-property property">sharpOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">animated</span><span class="token operator">:</span> <span class="token boolean">true</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 punctuation">;</span></code></pre>
|
||
<p>setting <code>formats</code> to "auto" helps - use whatever type of image you want, get that type out. The default settings that came with the Eleventy base blog didn't set a <code>width</code>, which I wanted (by default, images off my camera - like the hellebore featured image for this post - are almost 5k pixels wide). I also found it helpful to set <code>failOnError</code> to true for a little more feedback.</p>
|
||
<blockquote>
|
||
<p>NOTE: It sure seems like Eleventy will fail your image processing if there's no alt text. While admirable, it would be nice if I could find any documentation for this!</p>
|
||
</blockquote>
|
||
<h3 id="passthrough-copy">passthrough copy</h3>
|
||
<p>as I worked through this, I thought I needed a passthrough copy for a while. You don't - just let the plugin do its thing.</p>
|
||
<h3 id="templating">templating</h3>
|
||
<p>I needed images to show up in 3 places:</p>
|
||
<ul>
|
||
<li>In the lists of posts on the home page, I wanted each post to show its featured image</li>
|
||
<li>In the "related posts" section on each individual post, I wanted each related post to show its featured image</li>
|
||
<li>And of course, I wanted the post to show its own featured image</li>
|
||
</ul>
|
||
<h3 id="home-page-and-related-posts">home page and related posts</h3>
|
||
<p>both of these sections use the same template, which in my setup is called <code>postlist.njk</code>. Within the relevant links, I added the following:</p>
|
||
<pre class="language-html"><code class="language-html">{% if post.data.image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/{{ post.data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ post.data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% else %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<h3 id="post-body">post body</h3>
|
||
<p>the post body looks similar:</p>
|
||
<pre class="language-html"><code class="language-html">{% if image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>featured-img<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/posts/img/{{ image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<p>together, that sets up featured images for posts.</p>
|
||
<hr>
|
||
<h2 id="pagination">pagination</h2>
|
||
<h3 id="simple-pagination">simple pagination</h3>
|
||
<p><a href="https://www.11ty.dev/docs/pagination/" target="_blank" rel="external">Post pagination in Eleventy is pretty straightforward</a>, mostly requiring some specific front matter.</p>
|
||
<p>The home page pagination I have set up here looks like the following (in <code>index.njk</code>):</p>
|
||
<pre><code>---
|
||
pagination:
|
||
data: collections.posts
|
||
size: 13
|
||
alias: posts
|
||
reverse: true
|
||
---
|
||
</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>
|
||
<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"><</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>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>pagination {% if inPost %}post-pagination{% endif %}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% if olderHref %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>older<span class="token punctuation">"</span></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>{{ olderHref }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</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>fa-solid fa-hand-point-left<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||
{{ olderTitle or "older" }}
|
||
<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>li</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
{% if newerHref %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>newer<span class="token punctuation">"</span></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>{{ newerHref }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{{ newerTitle or "newer" }}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</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>fa-solid fa-hand-point-right<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</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 punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<h4 id="calling-the-template">calling the template</h4>
|
||
<p>From <code>index.njk</code> we can <code>include "pagination.njk"</code>:</p>
|
||
<pre><code>{# idk why these are backwards either #}
|
||
{% set newerHref = pagination.href.previous %}
|
||
{% set olderHref = pagination.href.next %}
|
||
{% include "pagination.njk" %}
|
||
</code></pre>
|
||
<p>Yup. The order of previous vs. next is totally unintuitive to me, too.</p>
|
||
<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>
|
||
<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>
|
||
<span class="token comment">// Get unique list of tags</span>
|
||
<span class="token keyword">let</span> tagSet <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>collection<span class="token punctuation">.</span><span class="token function">getAllSorted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post</span><span class="token punctuation">)</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>data<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 punctuation">;</span>
|
||
|
||
<span class="token comment">// Get each item that matches the tag</span>
|
||
<span class="token keyword">let</span> paginationSize <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> tagMap <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> tagArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>tagSet<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">for</span><span class="token punctuation">(</span> <span class="token keyword">let</span> tagName <span class="token keyword">of</span> tagArray<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> tagItems <span class="token operator">=</span> collection<span class="token punctuation">.</span><span class="token function">getFilteredByTag</span><span class="token punctuation">(</span>tagName<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> pagedItems <span class="token operator">=</span> <span class="token function">chunk</span><span class="token punctuation">(</span>tagItems<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> paginationSize<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">for</span><span class="token punctuation">(</span> <span class="token keyword">let</span> pageNumber <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> max <span class="token operator">=</span> pagedItems<span class="token punctuation">.</span>length<span class="token punctuation">;</span> pageNumber <span class="token operator"><</span> max<span class="token punctuation">;</span> pageNumber<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
tagMap<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">tagName</span><span class="token operator">:</span> tagName<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">pageNumber</span><span class="token operator">:</span> pageNumber<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">pageSize</span><span class="token operator">:</span> pagedItems<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">pageData</span><span class="token operator">:</span> pagedItems<span class="token punctuation">[</span>pageNumber<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 punctuation">}</span>
|
||
|
||
<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>
|
||
<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:
|
||
data: collections.tagPagination
|
||
size: 1
|
||
alias: tag
|
||
eleventyComputed:
|
||
permalink: /tags/{{ tag.tagName | slugify }}/% if tag.pageNumber %{{ tag.pageNumber + 1 }}/% endif %
|
||
title: "Posts tagged {{ tag.tagName }}"
|
||
eleventyExcludeFromCollections: true
|
||
---
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Posts tagged “{{ tag.tagName }}”<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
|
||
{% set postlist = tag.pageData %}
|
||
{% include "postlist.njk" %}
|
||
|
||
{# idk why these are backwards either #}
|
||
{% if tag.pageNumber > 0 %}
|
||
{% set newerHref = pagination.href.previous %}
|
||
{% endif %}
|
||
{% if tag.pageNumber < tag.pageSize - 1 %}
|
||
{% set olderHref = pagination.href.next %}
|
||
{% 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>
|
||
<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>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
||
<hr>
|
||
<h2 id="tag-image-preview">tag image preview</h2>
|
||
<p>today I tackled making the tag page more visually interesting.</p>
|
||
<h3 id="preview-the-first-featured-image">preview the first featured image</h3>
|
||
<p>first, I worked on previewing the first featured image. The focus here is on digging into <code>collections[tag]</code> (reversed!) to get to the data of the first post.</p>
|
||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>taglist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
|
||
{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||
<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>{{ tagUrl }}<span class="token punctuation">"</span></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>taglist-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% set tagRecent = collections[tag] | reverse %}
|
||
{% if tagRecent[0].data.image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/posts/img/{{ tagRecent[0].data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagRecent[0].data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% else %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>post-tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ tag }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
{% set numPosts = collections[tag].length %}
|
||
({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
|
||
<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>li</span><span class="token punctuation">></span></span>
|
||
{% endfor %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
||
<h3 id="preview-a-collage-of-recent-featured-images">preview a collage of recent featured images</h3>
|
||
<p>I found that having just the first featured image made the tag page hard to differentiate from any of the pages listing individual posts, so from there I moved to showing 4 images (or empty rectangles where there weren't four to show).</p>
|
||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>taglist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
|
||
{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||
<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>{{ tagUrl }}<span class="token punctuation">"</span></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>taglist-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>tag-imgs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% set tagRecent = collections[tag] | reverse %}
|
||
{% for i in range(0, 4) %}
|
||
{% if tagRecent[i].data.image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/posts/img/{{ tagRecent[i].data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagRecent[i].data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% else %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
{% endfor %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>post-tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ tag }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
{% set numPosts = collections[tag].length %}
|
||
({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
|
||
<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>li</span><span class="token punctuation">></span></span>
|
||
{% endfor %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
||
<p>with a bit of <code>display: grid</code>, we're good to go, right?</p>
|
||
<h4 id="handling-multiple-aspect-ratios">handling multiple aspect ratios</h4>
|
||
<p>this had worked so far because the photos on the lessons site are from my camera in landscape mode, producing neat, identical 3:2 aspect ratios. Let's throw a wrench in that and introduce a portrait-mode photo.</p>
|
||
<p>thankfully, the CSS property <code>aspect-ratio</code> makes this pretty straightforward, and <code>object-fit</code> finishes the job.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">.taglist-link img</span> <span class="token punctuation">{</span>
|
||
<span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 3 / 2<span class="token punctuation">;</span>
|
||
<span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<p>(I also set the <code>missing-img</code> <code><div></code>s to have the same aspect ratio.)</p>
|
||
<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>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<nav aria-label="pagination">
|
||
<ol class="pagination post-pagination">
|
||
|
||
<li class="older">
|
||
<a href="/crow/">
|
||
<i class="fa-solid fa-hand-point-left" aria-hidden="true"></i> crow
|
||
</a>
|
||
</li>
|
||
|
||
|
||
</ol>
|
||
</nav>
|
||
|
||
|
||
</heading-anchors>
|
||
|
||
|
||
<hr>
|
||
</main>
|
||
|
||
<footer>
|
||
<ul>
|
||
<li>
|
||
<a href="/colophon" title="colophon" aria-label="colophon">
|
||
colophon
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/" title="go home" aria-label="go home | hello hello from Lee Cattarin in 2026">
|
||
hello hello from Lee Cattarin in 2026</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://heckin.technology/inherentlee/leecat.art" title="source code" aria-label="source code" target="_blank" rel="external">
|
||
src
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</footer>
|
||
|
||
|
||
<!-- This page `/eleventy-lessons/` was built on 2026-02-20T16:02:10.534Z -->
|
||
<body>
|
||
</body></body> |
