diff --git a/_site/1/index.html b/_site/1/index.html index 5379b85..3069f28 100644 --- a/_site/1/index.html +++ b/_site/1/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
    +
  1. + + + Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint. + +

    comparing text editors

    +
      + +
    • software
      • + +
    +     +
    2. +
  2. @@ -1132,22 +1146,6 @@ footer a:focus-visible {
    3. -
  3. - - - lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it. - -

    dragon mask

    -
      - -
    • leather
      • - -
    • highlight
      • - -
    -     -
    4. -
@@ -1203,6 +1201,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/10/index.html b/_site/10/index.html index 3bfeef2..9cb8c41 100644 --- a/_site/10/index.html +++ b/_site/10/index.html @@ -964,6 +964,24 @@ footer a:focus-visible {
    +
  1. + + + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + +

    foxgloves

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    2. +
  2. @@ -1150,20 +1168,6 @@ footer a:focus-visible {
    3. -
  3. - - - A 3-part collage of a leather-covered book with baseball-style stitching across the spine. - -

    baseball journal

    -
      - -
    • book
      • - -
    -     -
    4. -
@@ -1219,6 +1223,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/11/index.html b/_site/11/index.html index 727439e..7aa9212 100644 --- a/_site/11/index.html +++ b/_site/11/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
    +
  1. + + + A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + +

    baseball journal

    +
      + +
    • book
      • + +
    +     +
    2. +
  2. @@ -1166,22 +1180,6 @@ footer a:focus-visible {
    3. -
  3. - - - A print in black ink of belly hair. - -

    hair

    -
      - -
    • print
      • - -
    • gender
      • - -
    -     -
    4. -
@@ -1237,6 +1235,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/12/index.html b/_site/12/index.html index 7ed0265..75d3799 100644 --- a/_site/12/index.html +++ b/_site/12/index.html @@ -964,6 +964,22 @@ footer a:focus-visible {
    +
  1. + + + A print in black ink of belly hair. + +

    hair

    +
      + +
    • print
      • + +
    • gender
      • + +
    +     +
    2. +
  2. @@ -1158,24 +1174,6 @@ footer a:focus-visible {
    3. -
  3. - - - A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' - -

    congrats on the gay

    -
      - -
    • print
      • - -
    • card
      • - -
    • gender
      • - -
    -     -
    4. -
@@ -1231,6 +1229,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/13/index.html b/_site/13/index.html index 2735c5f..e7c3979 100644 --- a/_site/13/index.html +++ b/_site/13/index.html @@ -964,6 +964,24 @@ footer a:focus-visible {
    +
  1. + + + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + +

    congrats on the gay

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    2. +
  2. @@ -1136,20 +1154,6 @@ footer a:focus-visible {
    3. -
  3. - - - A three panel collage showcasing a small green memo pad. - -

    green memo pad

    -
      - -
    • book
      • - -
    -     -
    4. -
@@ -1205,6 +1209,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/14/index.html b/_site/14/index.html index ab2e7b1..02b122d 100644 --- a/_site/14/index.html +++ b/_site/14/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
    +
  1. + + + A three panel collage showcasing a small green memo pad. + +

    green memo pad

    +
      + +
    • book
      • + +
    +     +
    2. +
  2. @@ -1103,6 +1117,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/2/index.html b/_site/2/index.html index f2fab95..1fadbba 100644 --- a/_site/2/index.html +++ b/_site/2/index.html @@ -964,6 +964,22 @@ footer a:focus-visible {
      +
    1. + + + lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it. + +

      dragon mask

      +
        + +
      • leather
        • + +
      • highlight
        • + +
      +       +
      2. +
    2. @@ -1136,22 +1152,6 @@ footer a:focus-visible {
      3. -
    3. - - - A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type - -

      azure locations and file crawling

      -
        - -
      • software
        • - -
      • highlight
        • - -
      -       -
      4. -
    @@ -1207,6 +1207,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/3/index.html b/_site/3/index.html index 70e340a..5400185 100644 --- a/_site/3/index.html +++ b/_site/3/index.html @@ -964,6 +964,22 @@ footer a:focus-visible {
      +
    1. + + + A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type + +

      azure locations and file crawling

      +
        + +
      • software
        • + +
      • highlight
        • + +
      +       +
      2. +
    2. @@ -1144,20 +1160,6 @@ footer a:focus-visible {
      3. -
    3. - - - Two red leather lobster ornaments, about 4-5 in long each. - -

      lobstah

      -
        - -
      • leather
        • - -
      -       -
      4. -
    @@ -1213,6 +1215,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/4/index.html b/_site/4/index.html index 57ad8ed..8b44286 100644 --- a/_site/4/index.html +++ b/_site/4/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
      +
    1. + + + Two red leather lobster ornaments, about 4-5 in long each. + +

      lobstah

      +
        + +
      • leather
        • + +
      +       +
      2. +
    2. @@ -1134,20 +1148,6 @@ footer a:focus-visible {
      3. -
    3. - - - A collage showing various small (around an inch) stamps that depict people or animals. - -

      tiny portraits

      -
        - -
      • print
        • - -
      -       -
      4. -
    @@ -1203,6 +1203,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/404.html b/_site/404.html index d429de6..56a2123 100644 --- a/_site/404.html +++ b/_site/404.html @@ -1004,6 +1004,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/5/index.html b/_site/5/index.html index 4a0a0be..bf27db3 100644 --- a/_site/5/index.html +++ b/_site/5/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
      +
    1. + + + A collage showing various small (around an inch) stamps that depict people or animals. + +

      tiny portraits

      +
        + +
      • print
        • + +
      +       +
      2. +
    2. @@ -1136,20 +1150,6 @@ footer a:focus-visible {
      3. -
    3. - - - A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide. - -

      foldy wallet with thumb slide

      -
        - -
      • leather
        • - -
      -       -
      4. -
    @@ -1205,6 +1205,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/6/index.html b/_site/6/index.html index 1aced93..acc2323 100644 --- a/_site/6/index.html +++ b/_site/6/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
      +
    1. + + + A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide. + +

      foldy wallet with thumb slide

      +
        + +
      • leather
        • + +
      +       +
      2. +
    2. @@ -1142,20 +1156,6 @@ footer a:focus-visible {
      3. -
    3. - - - Two hard enamel pins in my trans rights and trans wrongs skulls designs. - -

      pins!

      -
        - -
      • pin
        • - -
      -       -
      4. -
    @@ -1211,6 +1211,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/7/index.html b/_site/7/index.html index 72fd782..d1e9fe9 100644 --- a/_site/7/index.html +++ b/_site/7/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
      +
    1. + + + Two hard enamel pins in my trans rights and trans wrongs skulls designs. + +

      pins!

      +
        + +
      • pin
        • + +
      +       +
      2. +
    2. @@ -1136,20 +1150,6 @@ footer a:focus-visible {
      3. -
    3. - - - A nylon webbing shoulder strap in bright teal with clips on each end. - -

      bag strap

      -
        - -
      • leather
        • - -
      -       -
      4. -
    @@ -1205,6 +1205,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/8/index.html b/_site/8/index.html index a029a4a..4607f7e 100644 --- a/_site/8/index.html +++ b/_site/8/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
      +
    1. + + + A nylon webbing shoulder strap in bright teal with clips on each end. + +

      bag strap

      +
        + +
      • leather
        • + +
      +       +
      2. +
    2. @@ -1132,20 +1146,6 @@ footer a:focus-visible {
      3. -
    3. - - - Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. - -

      leather chest harness

      -
        - -
      • leather
        • - -
      -       -
      4. -
    @@ -1201,6 +1201,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/9/index.html b/_site/9/index.html index a080b4f..e30aedf 100644 --- a/_site/9/index.html +++ b/_site/9/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
      +
    1. + + + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + +

      leather chest harness

      +
        + +
      • leather
        • + +
      +       +
      2. +
    2. @@ -1176,24 +1190,6 @@ footer a:focus-visible {
      3. -
    3. - - - A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. - -

      foxgloves

      -
        - -
      • print
        • - -
      • card
        • - -
      • shirt
        • - -
      -       -
      4. -
    @@ -1249,6 +1245,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/aarons-mask/index.html b/_site/aarons-mask/index.html index 12550ad..4308800 100644 --- a/_site/aarons-mask/index.html +++ b/_site/aarons-mask/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/about/index.html b/_site/about/index.html index 8a3dfb5..3e16df2 100644 --- a/_site/about/index.html +++ b/_site/about/index.html @@ -1121,6 +1121,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/acadia-coloring-journal/index.html b/_site/acadia-coloring-journal/index.html index 54fe3d7..0860f0f 100644 --- a/_site/acadia-coloring-journal/index.html +++ b/_site/acadia-coloring-journal/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/acadia-mitts/index.html b/_site/acadia-mitts/index.html index 51570d1..0c85d9d 100644 --- a/_site/acadia-mitts/index.html +++ b/_site/acadia-mitts/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/an-intro-to-git/index.html b/_site/an-intro-to-git/index.html index cdca327..a7bbf79 100644 --- a/_site/an-intro-to-git/index.html +++ b/_site/an-intro-to-git/index.html @@ -1677,6 +1677,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push) - + \ No newline at end of file diff --git a/_site/anarchy-autism/index.html b/_site/anarchy-autism/index.html index ea06f2a..465c252 100644 --- a/_site/anarchy-autism/index.html +++ b/_site/anarchy-autism/index.html @@ -1284,6 +1284,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/art-shows-and-events/index.html b/_site/art-shows-and-events/index.html index 929b1ac..e85a4db 100644 --- a/_site/art-shows-and-events/index.html +++ b/_site/art-shows-and-events/index.html @@ -1275,6 +1275,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/artisans-cooperative-cards/index.html b/_site/artisans-cooperative-cards/index.html index 287a084..8973093 100644 --- a/_site/artisans-cooperative-cards/index.html +++ b/_site/artisans-cooperative-cards/index.html @@ -1269,6 +1269,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/artisans-cooperative-shirts/index.html b/_site/artisans-cooperative-shirts/index.html index 8ec3a95..26131ef 100644 --- a/_site/artisans-cooperative-shirts/index.html +++ b/_site/artisans-cooperative-shirts/index.html @@ -1270,6 +1270,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/artists-conk/index.html b/_site/artists-conk/index.html index cbe7955..ae3f1f2 100644 --- a/_site/artists-conk/index.html +++ b/_site/artists-conk/index.html @@ -1253,6 +1253,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/azure-locations-and-file-crawling/index.html b/_site/azure-locations-and-file-crawling/index.html index 5c58a8f..0e2b780 100644 --- a/_site/azure-locations-and-file-crawling/index.html +++ b/_site/azure-locations-and-file-crawling/index.html @@ -1493,6 +1493,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/backend-accessibility/index.html b/_site/backend-accessibility/index.html index 5edae90..4f0d941 100644 --- a/_site/backend-accessibility/index.html +++ b/_site/backend-accessibility/index.html @@ -1323,6 +1323,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/bag-strap/index.html b/_site/bag-strap/index.html index deb6d63..b960ccb 100644 --- a/_site/bag-strap/index.html +++ b/_site/bag-strap/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/baseball-journal/index.html b/_site/baseball-journal/index.html index 5275ad5..fee5ea7 100644 --- a/_site/baseball-journal/index.html +++ b/_site/baseball-journal/index.html @@ -1272,6 +1272,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/become-unbutterable/index.html b/_site/become-unbutterable/index.html index 5d81807..e9525fb 100644 --- a/_site/become-unbutterable/index.html +++ b/_site/become-unbutterable/index.html @@ -1269,6 +1269,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/bfl-silk-handspun/index.html b/_site/bfl-silk-handspun/index.html index 6543830..965ccfc 100644 --- a/_site/bfl-silk-handspun/index.html +++ b/_site/bfl-silk-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/big-pidge/index.html b/_site/big-pidge/index.html index 58b52f8..371c76b 100644 --- a/_site/big-pidge/index.html +++ b/_site/big-pidge/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/block-printing-transfer-method/index.html b/_site/block-printing-transfer-method/index.html index 43488f5..efc7acd 100644 --- a/_site/block-printing-transfer-method/index.html +++ b/_site/block-printing-transfer-method/index.html @@ -1293,6 +1293,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/blue-and-brown-leather-journal/index.html b/_site/blue-and-brown-leather-journal/index.html index 16464c9..a442bf5 100644 --- a/_site/blue-and-brown-leather-journal/index.html +++ b/_site/blue-and-brown-leather-journal/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/booby-congrats-on-the-top-surgery/index.html b/_site/booby-congrats-on-the-top-surgery/index.html index caffc9f..92047ee 100644 --- a/_site/booby-congrats-on-the-top-surgery/index.html +++ b/_site/booby-congrats-on-the-top-surgery/index.html @@ -1272,6 +1272,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/bottom-growth/index.html b/_site/bottom-growth/index.html index c3d6924..7f04df1 100644 --- a/_site/bottom-growth/index.html +++ b/_site/bottom-growth/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/bowtie/index.html b/_site/bowtie/index.html index 1e651a5..6d3bb26 100644 --- a/_site/bowtie/index.html +++ b/_site/bowtie/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/boypussy/index.html b/_site/boypussy/index.html index 5397a49..2514bd4 100644 --- a/_site/boypussy/index.html +++ b/_site/boypussy/index.html @@ -1289,6 +1289,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/brookes-collar/index.html b/_site/brookes-collar/index.html index 5514eb6..fee380d 100644 --- a/_site/brookes-collar/index.html +++ b/_site/brookes-collar/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/brookes-cuff-bracelets/index.html b/_site/brookes-cuff-bracelets/index.html index 041e17a..9cf7709 100644 --- a/_site/brookes-cuff-bracelets/index.html +++ b/_site/brookes-cuff-bracelets/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/brookes-notebook/index.html b/_site/brookes-notebook/index.html index 82e6c8b..827ecf7 100644 --- a/_site/brookes-notebook/index.html +++ b/_site/brookes-notebook/index.html @@ -1277,6 +1277,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/brookes-scarf/index.html b/_site/brookes-scarf/index.html index 8bf3e8d..2da220d 100644 --- a/_site/brookes-scarf/index.html +++ b/_site/brookes-scarf/index.html @@ -1269,6 +1269,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/brookes-socks/index.html b/_site/brookes-socks/index.html index 09980a4..c949e80 100644 --- a/_site/brookes-socks/index.html +++ b/_site/brookes-socks/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/brookes-suspenders/index.html b/_site/brookes-suspenders/index.html index 091b32d..bd95443 100644 --- a/_site/brookes-suspenders/index.html +++ b/_site/brookes-suspenders/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/brown-creeper/index.html b/_site/brown-creeper/index.html index c6a814a..1012923 100644 --- a/_site/brown-creeper/index.html +++ b/_site/brown-creeper/index.html @@ -1263,6 +1263,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/butch-hands-pattern/index.html b/_site/butch-hands-pattern/index.html index 6cd7c0f..fb71117 100644 --- a/_site/butch-hands-pattern/index.html +++ b/_site/butch-hands-pattern/index.html @@ -1344,6 +1344,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/chanterelle/index.html b/_site/chanterelle/index.html index ec3bdbb..85e87e1 100644 --- a/_site/chanterelle/index.html +++ b/_site/chanterelle/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/charlie-the-alpaca-handspun/index.html b/_site/charlie-the-alpaca-handspun/index.html index a481f46..1af91d1 100644 --- a/_site/charlie-the-alpaca-handspun/index.html +++ b/_site/charlie-the-alpaca-handspun/index.html @@ -1225,8 +1225,8 @@ export { HeadingAnchors }
  3. - - crow + + screen reader optimizations
    4. @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/circle-bag/index.html b/_site/circle-bag/index.html index aee31b3..9cddd94 100644 --- a/_site/circle-bag/index.html +++ b/_site/circle-bag/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/colophon/index.html b/_site/colophon/index.html index dfe9cff..f8301b4 100644 --- a/_site/colophon/index.html +++ b/_site/colophon/index.html @@ -1012,6 +1012,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/coming-out/index.html b/_site/coming-out/index.html index 09aaf86..d6f5dbf 100644 --- a/_site/coming-out/index.html +++ b/_site/coming-out/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/comparing-text-editors/index.html b/_site/comparing-text-editors/index.html index 7ac9c9f..8e59e5e 100644 --- a/_site/comparing-text-editors/index.html +++ b/_site/comparing-text-editors/index.html @@ -1484,6 +1484,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/congrats-on-the-autism-adhd/index.html b/_site/congrats-on-the-autism-adhd/index.html index 919827b..4f0823b 100644 --- a/_site/congrats-on-the-autism-adhd/index.html +++ b/_site/congrats-on-the-autism-adhd/index.html @@ -1275,6 +1275,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/congrats-on-the-gay/index.html b/_site/congrats-on-the-gay/index.html index 3e6b072..caef3b8 100644 --- a/_site/congrats-on-the-gay/index.html +++ b/_site/congrats-on-the-gay/index.html @@ -1281,6 +1281,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/contact/index.html b/_site/contact/index.html index 53ced3a..e021fe4 100644 --- a/_site/contact/index.html +++ b/_site/contact/index.html @@ -1095,6 +1095,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/coral-reef-handspun/index.html b/_site/coral-reef-handspun/index.html index 908b8e4..9a67ddc 100644 --- a/_site/coral-reef-handspun/index.html +++ b/_site/coral-reef-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/crow/index.html b/_site/crow/index.html index 360bbff..a649b38 100644 --- a/_site/crow/index.html +++ b/_site/crow/index.html @@ -1217,15 +1217,15 @@ export { HeadingAnchors }
    1. - - charlie the alpaca handspun + + screen reader optimizations
    2. - - screen reader optimizations + + eleventy lessons
      3. @@ -1261,6 +1261,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/designing-a-bag/index.html b/_site/designing-a-bag/index.html index 7a4df6a..db24e74 100644 --- a/_site/designing-a-bag/index.html +++ b/_site/designing-a-bag/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/domain-and-site-setup/index.html b/_site/domain-and-site-setup/index.html index 7ebefc8..e19a766 100644 --- a/_site/domain-and-site-setup/index.html +++ b/_site/domain-and-site-setup/index.html @@ -1313,6 +1313,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/double-bill-pocket-bifold/index.html b/_site/double-bill-pocket-bifold/index.html index 5f33dcd..1a8d822 100644 --- a/_site/double-bill-pocket-bifold/index.html +++ b/_site/double-bill-pocket-bifold/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/dragon-mask/index.html b/_site/dragon-mask/index.html index 8fdcdd3..08c6f7e 100644 --- a/_site/dragon-mask/index.html +++ b/_site/dragon-mask/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/dyeing-fiber/index.html b/_site/dyeing-fiber/index.html index 9348eab..be716ee 100644 --- a/_site/dyeing-fiber/index.html +++ b/_site/dyeing-fiber/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/ecommerce-options/index.html b/_site/ecommerce-options/index.html index 2495bab..e7d0288 100644 --- a/_site/ecommerce-options/index.html +++ b/_site/ecommerce-options/index.html @@ -1294,6 +1294,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/eight-pocket-bifold/index.html b/_site/eight-pocket-bifold/index.html index 8f587a1..7041198 100644 --- a/_site/eight-pocket-bifold/index.html +++ b/_site/eight-pocket-bifold/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/eleventy-lessons/index.html b/_site/eleventy-lessons/index.html new file mode 100644 index 0000000..eb4bdbe --- /dev/null +++ b/_site/eleventy-lessons/index.html @@ -0,0 +1,1547 @@ + + + + + + + eleventy lessons | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      + + + + + +
      + + +
      + + + + + +
      +

      eleventy lessons

      + +
      +

      + posted on + + by Lee Cattarin +

      + + + + +
      + + + Image unrelated to post. Close up on a pale green hellebore flower. + + +

      recently I wrote several sites using Eleventy (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 heckin.technology. See ya, GitHub. Won't miss ya.

      +

      I've compiled some of the things I've learned in a standalone site: 11ty Lessons.

      +

      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.

      +

      this will comprise of 4 parts: related posts, featured images, pagination, and tag image preview. Feel free to jump ahead, as none depend on the others.

      +
      + +

      by default, the Eleventy base blog comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.

      +

      while that is useful for this site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.

      +

      I started by referring to this GitHub issue about related posts. I had to fix a few errors that arose from the suggested code.

      +

      I also wanted to make two changes:

      +
        +
      1. I didn't want to just see posts that shared all tags, but rather posts that shared any tag
        2. +
      2. I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order
        3. +
      +

      filters.js

      +

      after adjusting for those needs, I had the following in filters.js:

      +
      eleventyConfig.addNunjucksFilter("excludeFromCollection", function (collection=[], pageUrl=this.ctx.page.url) {
+  return collection.filter(post => post.url !== pageUrl);
+});
+
+eleventyConfig.addFilter("filterByTags", function(collection=[], ...requiredTags) {
+  return collection.filter(post => {
+    return requiredTags.flat().some(tag => post.data.tags.includes(tag));
+  });
+});
+
+eleventyConfig.addFilter("randomize", function(array) {
+  // Create a copy of the array to avoid modifying the original
+  let shuffledArray = array.slice();
+
+  // Fisher-Yates shuffle algorithm
+  for (let i = shuffledArray.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+  }
+
+  return shuffledArray;
+});
      +

      post.njk

      +

      I used this in my post layout. filterTagList comes with the base blog by default, and removes the tags "posts" and "all." head also comes with the base blog. postlist.njk is my modified-from-the-base-blog post layout.

      +
      {% set relevantTags = tags | filterTagList %}
+{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(page.url) | randomize | head(2) %}
+{% if postlist.length %}
+<section class="related-posts">
+	<h2>related posts</h2>
+  {% include "postlist.njk" %}
+</section>
+{% endif %}
      +

      and that sorts related posts.

      +
      + +
      +

      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.

      +
      +

      images in 11ty use the Image Transform Plugin. 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.

      +

      file structure

      +
      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
+
      +

      front matter

      +

      for any given post, my front matter references the image in this manner:

      +
      ---
+image:
+  src: sample-0.jpg
+  alt: moss on a fencepost
+---
+
      +

      image HTML transform

      +

      As mentioned, there's a plugin for images. If you started with the base blog, in eleventy.config.js, you'll probably find a chunk of code similar to this already in place:

      +
      eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+  formats: ["auto"],
+
+  widths: [640],
+  failOnError: true,
+  htmlOptions: {
+    imgAttributes: {
+      // e.g. <img loading decoding> assigned on the HTML tag will override these values.
+      loading: "lazy",
+      decoding: "async",
+    }
+  },
+
+  sharpOptions: {
+    animated: true,
+  },
+});
      +

      setting formats 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 width, 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 failOnError to true for a little more feedback.

      +
      +

      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!

      +
      +

      passthrough copy

      +

      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.

      +

      templating

      +

      I needed images to show up in 3 places:

      +
        +
      • In the lists of posts on the home page, I wanted each post to show its featured image
        • +
      • In the "related posts" section on each individual post, I wanted each related post to show its featured image
        • +
      • And of course, I wanted the post to show its own featured image
        • +
      +

      home page and related posts

      +

      both of these sections use the same template, which in my setup is called postlist.njk. Within the relevant links, I added the following:

      +
      {% if post.data.image.src %}
+  <img src="/img/{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
+{% else %}
+  <div class="missing-image"></div>
+{% endif %}
      +

      post body

      +

      the post body looks similar:

      +
      {% if image.src %}
+<img class="featured-img" src="/posts/img/{{ image.src }}" alt="{{ image.alt }}">
+{% endif %}
      +

      together, that sets up featured images for posts.

      +
      +

      pagination

      +

      simple pagination

      +

      Post pagination in Eleventy is pretty straightforward, mostly requiring some specific front matter.

      +

      The home page pagination I have set up here looks like the following (in index.njk):

      +
      ---
+pagination:
+  data: collections.posts
+  size: 13
+  alias: posts
+  reverse: true
+---
+
      +

      6 posts per page, paginate data from collections.posts which we'll call just posts for short, and do it in reverse (aka, most recent posts show first).

      +

      You'll also likely want previous and next buttons. I did. Here's what I have...

      +

      pagination.njk

      +

      There's two components to this, the bigger one being this pagination.njk template. Look, I like my little icons, ok? It takes an olderHref and a newerHref, and optionally an olderTitle and newerTitle.

      +
      {% if olderHref or newerHref %}
+<nav aria-label="pagination">
+  <ol class="pagination {% if inPost %}post-pagination{% endif %}">
+    {% if olderHref %}
+    <li class="older">
+      <a href="{{ olderHref }}">
+        <i class="fa-solid fa-hand-point-left" aria-hidden="true"></i>
+        {{ olderTitle or "older" }}
+      </a>
+    </li>
+    {% endif %}
+    {% if newerHref %}
+    <li class="newer">
+      <a href="{{ newerHref }}">
+        {{ newerTitle or "newer" }}
+        <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
+      </a>
+    </li>
+    {% endif %}
+  </ol>
+</nav>
+{% endif %}
      +

      calling the template

      +

      From index.njk we can include "pagination.njk":

      +
      {# idk why these are backwards either #}
+{% set newerHref = pagination.href.previous %}
+{% set olderHref = pagination.href.next %}
+{% include "pagination.njk" %}
+
      +

      Yup. The order of previous vs. next is totally unintuitive to me, too.

      +

      complex pagination

      +

      however, there's a catch. Tag pages are created via pagination! It's a lot harder to paginate those - you can't just use the front matter to set it up.

      +

      I untangled this GitHub issue about double-layered pagination and came to the following solution...

      +

      eleventy.config.js

      +

      in eleventy.config.js:

      +
      // note that this uses the lodash.chunk method, so you’ll have to import that
+eleventyConfig.addCollection("tagPagination", function(collection) {
+  // Get unique list of tags
+  let tagSet = new Set(collection.getAllSorted().flatMap((post) => post.data.tags || []));
+
+  // Get each item that matches the tag
+  let paginationSize = 6;
+  let tagMap = [];
+  let tagArray = [...tagSet];
+
+  for( let tagName of tagArray) {
+    let tagItems = collection.getFilteredByTag(tagName);
+    let pagedItems = chunk(tagItems.reverse(), paginationSize);
+
+    for( let pageNumber = 0, max = pagedItems.length; pageNumber < max; pageNumber++) {
+      tagMap.push({
+        tagName: tagName,
+        pageNumber: pageNumber,
+        pageSize: pagedItems.length,
+        pageData: pagedItems[pageNumber]
+      });
+    }
+  }
+
+  return tagMap;
+});
      +

      tag-pages.njk

      +

      in my tag-pages.njk file (or whatever you use to template out your tag pages):

      +
      ---
+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
+---
+<h1>Posts tagged “{{ tag.tagName }}”</h1>
+
+{% 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" %}
      +

      note the pagination checking tag.pageNumber against tag.PageSize - the original suggested solution in the GitHub post creates an issue where the pagination loops through all of the tag pages bit-by-bit. This sorts that - hat tip to TheReyzar who mentioned the issue and showed part of their solution.

      +

      filters.js (again)

      +

      finally, in my filters.js file, I add the tagPagination tag to the tags that get filtered using filterTagList:

      +
      eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
+  return (tags || []).filter(tag => ["all", "posts", "tagPagination"].indexOf(tag) === -1);
+});
      +
      +

      tag image preview

      +

      today I tackled making the tag page more visually interesting.

      + +

      first, I worked on previewing the first featured image. The focus here is on digging into collections[tag] (reversed!) to get to the data of the first post.

      +
      <ul class="taglist">
+{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
+	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	<li>
+    <a href="{{ tagUrl }}" class="taglist-link">
+      {% set tagRecent = collections[tag] | reverse %}
+      {% if tagRecent[0].data.image.src %}
+        <img src="/posts/img/{{ tagRecent[0].data.image.src }}" alt="{{ tagRecent[0].data.image.alt }}">
+      {% else %}
+        <div class="missing-image"></div>
+      {% endif %}
+      <span class="post-tag">{{ tag }}</span>
+      {% set numPosts = collections[tag].length %}
+      ({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
+    </a>
+  </li>
+{% endfor %}
+</ul>
      + +

      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).

      +
      <ul class="taglist">
+{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
+	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	<li>
+    <a href="{{ tagUrl }}" class="taglist-link">
+      <div class="tag-imgs">
+        {% set tagRecent = collections[tag] | reverse %}
+        {% for i in range(0, 4) %}
+        {% if tagRecent[i].data.image.src %}
+          <img src="/posts/img/{{ tagRecent[i].data.image.src }}" alt="{{ tagRecent[i].data.image.alt }}">
+        {% else %}
+          <div class="missing-image"></div>
+        {% endif %}
+        {% endfor %}
+      </div>
+      <span class="post-tag">{{ tag }}</span>
+      {% set numPosts = collections[tag].length %}
+      ({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
+    </a>
+  </li>
+{% endfor %}
+</ul>
      +

      with a bit of display: grid, we're good to go, right?

      +

      handling multiple aspect ratios

      +

      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.

      +

      thankfully, the CSS property aspect-ratio makes this pretty straightforward, and object-fit finishes the job.

      +
      .taglist-link img {
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+}
      +

      (I also set the missing-img <div>s to have the same aspect ratio.)

      +
      +

      There's the good stuff from 11ty Lessons. Hope you enjoyed.

      + +
      + + + + + + + + + + + + +       + + +
      +
      + + + + + + + \ No newline at end of file diff --git a/_site/euphorbia/index.html b/_site/euphorbia/index.html index 02b1244..f03ef2c 100644 --- a/_site/euphorbia/index.html +++ b/_site/euphorbia/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/fat-raccoon/index.html b/_site/fat-raccoon/index.html index 002a1bc..323f6b8 100644 --- a/_site/fat-raccoon/index.html +++ b/_site/fat-raccoon/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/fd-signifier-and-oppositional-sexism/index.html b/_site/fd-signifier-and-oppositional-sexism/index.html index b51a446..dc52036 100644 --- a/_site/fd-signifier-and-oppositional-sexism/index.html +++ b/_site/fd-signifier-and-oppositional-sexism/index.html @@ -1296,6 +1296,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/fedizinefest-2025/index.html b/_site/fedizinefest-2025/index.html index dd0d5dd..78f05df 100644 --- a/_site/fedizinefest-2025/index.html +++ b/_site/fedizinefest-2025/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/feed.xml b/_site/feed.xml index a7d0d15..3fc1d23 100644 --- a/_site/feed.xml +++ b/_site/feed.xml @@ -4,16 +4,317 @@ Lee Cattarin... on the internet! - 2026-02-19T21:09:51Z + 2026-02-19T00:00:00Z https://leecat.art/ Lee Cattarin lee.cattarin@gmail.com + + eleventy lessons + + 2026-02-19T00:00:00Z + https://leecat.art/eleventy-lessons/ + <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="https://leecat.art/eleventy-lessons/#related-posts">related posts</a>, <a href="https://leecat.art/eleventy-lessons/#featured-images">featured images</a>, <a href="https://leecat.art/eleventy-lessons/#pagination">pagination</a>, and <a href="https://leecat.art/eleventy-lessons/#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="https://leecat.art/eleventy-lessons/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> +<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 &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) %} +{% 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> + {% include "postlist.njk" %} +<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</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. &lt;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 &quot;auto&quot; 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 &quot;related posts&quot; 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">&lt;</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">&lt;</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">&lt;/</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">&lt;</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">&lt;</span>nav</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;</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">&lt;</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">&lt;</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">&lt;/</span>i</span><span class="token punctuation">></span></span> + {{ olderTitle or "older" }} + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span> + {% endif %} + {% if newerHref %} + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;</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">&lt;</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">&lt;/</span>i</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span> + {% endif %} + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</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 &quot;pagination.njk&quot;</code>:</p> +<pre><code>{# idk why these are backwards either #} +{% set newerHref = pagination.href.previous %} +{% set olderHref = pagination.href.next %} +{% include &quot;pagination.njk&quot; %} +</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">&lt;</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">&lt;</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">&lt;/</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 &lt; 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">&lt;</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">&lt;</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;</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">&lt;</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">&lt;/</span>div</span><span class="token punctuation">></span></span> + {% endif %} + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;/</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">&lt;/</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span> +{% endfor %} +<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</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">&lt;</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">&lt;</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;</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">&lt;</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">&lt;</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">&lt;/</span>div</span><span class="token punctuation">></span></span> + {% endif %} + {% endfor %} + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&lt;/</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">&lt;/</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span> +{% endfor %} +<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</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>&lt;div&gt;</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> + + + + crow + + 2026-02-09T00:00:00Z + https://leecat.art/crow/ + + screen reader optimizations - 2026-02-19T21:09:51Z + 2026-02-06T00:00:00Z https://leecat.art/screen-reader-optimizations/ <h2 id="context">context</h2> <p>recently, I've been working on a <a href="https://inherentlee.codeberg.page/spoonfairies/" target="_blank" rel="external">website for a project called spoonfairies</a>. On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:</p> @@ -70,13 +371,6 @@ <p>now, after more screen reader testing, it reads out smoothly. The <code>aria-label</code> precludes the actual link text and cleanly says what needs to be said, with nothing breaking up the text and the whole thing easily recognized as one link. <em>And</em> I've got my fancy styling. Sweet.</p> - - crow - - 2026-02-09T00:00:00Z - https://leecat.art/crow/ - - charlie the alpaca handspun @@ -131,14 +425,6 @@ 2026-01-18T00:00:00Z https://leecat.art/dyeing-fiber/ <p>hand-dyed with acid dyes</p> - - - - coral reef handspun - - 2026-01-18T00:00:00Z - https://leecat.art/coral-reef-handspun/ - <p>Fiber from <a href="https://www.etsy.com/shop/JakiraFarms" target="_blank" rel="external">Jakira Farms</a> in Coral Reef colorway. 100% merino.</p> \ No newline at end of file diff --git a/_site/fire-and-ice-handspun/index.html b/_site/fire-and-ice-handspun/index.html index d26994f..2bac28f 100644 --- a/_site/fire-and-ice-handspun/index.html +++ b/_site/fire-and-ice-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/fishhook-pride-keychains/index.html b/_site/fishhook-pride-keychains/index.html index 3991c15..1a7100c 100644 --- a/_site/fishhook-pride-keychains/index.html +++ b/_site/fishhook-pride-keychains/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/five-of-them/index.html b/_site/five-of-them/index.html index b009a0e..bba4df3 100644 --- a/_site/five-of-them/index.html +++ b/_site/five-of-them/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/fix-your-hearts/index.html b/_site/fix-your-hearts/index.html index f38f1ae..68d531e 100644 --- a/_site/fix-your-hearts/index.html +++ b/_site/fix-your-hearts/index.html @@ -1261,6 +1261,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/flatfish/index.html b/_site/flatfish/index.html index 43dc2c2..109af7b 100644 --- a/_site/flatfish/index.html +++ b/_site/flatfish/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/flicker/index.html b/_site/flicker/index.html index c103014..dc20fb3 100644 --- a/_site/flicker/index.html +++ b/_site/flicker/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/flocked-notebook/index.html b/_site/flocked-notebook/index.html index f54cf94..d5f4262 100644 --- a/_site/flocked-notebook/index.html +++ b/_site/flocked-notebook/index.html @@ -1275,6 +1275,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/foldy-wallet-with-thumb-slide/index.html b/_site/foldy-wallet-with-thumb-slide/index.html index 742290e..618cd21 100644 --- a/_site/foldy-wallet-with-thumb-slide/index.html +++ b/_site/foldy-wallet-with-thumb-slide/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/foldy-wallet/index.html b/_site/foldy-wallet/index.html index 4bfa02e..baf16c0 100644 --- a/_site/foldy-wallet/index.html +++ b/_site/foldy-wallet/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/fountain-pen-friendly-stationery/index.html b/_site/fountain-pen-friendly-stationery/index.html index 99ccb7f..71b968e 100644 --- a/_site/fountain-pen-friendly-stationery/index.html +++ b/_site/fountain-pen-friendly-stationery/index.html @@ -1277,6 +1277,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/foxgloves/index.html b/_site/foxgloves/index.html index fb45451..43799ea 100644 --- a/_site/foxgloves/index.html +++ b/_site/foxgloves/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/gallery/1/index.html b/_site/gallery/1/index.html index cd08a81..24515f5 100644 --- a/_site/gallery/1/index.html +++ b/_site/gallery/1/index.html @@ -1209,6 +1209,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/10/index.html b/_site/gallery/10/index.html index 88a81f0..7e84ae6 100644 --- a/_site/gallery/10/index.html +++ b/_site/gallery/10/index.html @@ -1213,6 +1213,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/11/index.html b/_site/gallery/11/index.html index d4cc6a3..dd891ef 100644 --- a/_site/gallery/11/index.html +++ b/_site/gallery/11/index.html @@ -1091,6 +1091,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/2/index.html b/_site/gallery/2/index.html index 9505aa3..b85b9b1 100644 --- a/_site/gallery/2/index.html +++ b/_site/gallery/2/index.html @@ -1223,6 +1223,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/3/index.html b/_site/gallery/3/index.html index bdd780f..e96e53b 100644 --- a/_site/gallery/3/index.html +++ b/_site/gallery/3/index.html @@ -1205,6 +1205,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/4/index.html b/_site/gallery/4/index.html index ec0150e..14dee7a 100644 --- a/_site/gallery/4/index.html +++ b/_site/gallery/4/index.html @@ -1213,6 +1213,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/5/index.html b/_site/gallery/5/index.html index a6336c5..7a7ebb3 100644 --- a/_site/gallery/5/index.html +++ b/_site/gallery/5/index.html @@ -1207,6 +1207,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/6/index.html b/_site/gallery/6/index.html index e3b48f6..123c122 100644 --- a/_site/gallery/6/index.html +++ b/_site/gallery/6/index.html @@ -1211,6 +1211,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/7/index.html b/_site/gallery/7/index.html index 45e73cf..5d36d21 100644 --- a/_site/gallery/7/index.html +++ b/_site/gallery/7/index.html @@ -1255,6 +1255,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/8/index.html b/_site/gallery/8/index.html index 087348d..6aad8fb 100644 --- a/_site/gallery/8/index.html +++ b/_site/gallery/8/index.html @@ -1237,6 +1237,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/9/index.html b/_site/gallery/9/index.html index f99e970..75a43ce 100644 --- a/_site/gallery/9/index.html +++ b/_site/gallery/9/index.html @@ -1239,6 +1239,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/gallery/index.html b/_site/gallery/index.html index c501c47..24c2001 100644 --- a/_site/gallery/index.html +++ b/_site/gallery/index.html @@ -1197,6 +1197,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/geese-trans-wrongs/index.html b/_site/geese-trans-wrongs/index.html index 297ce95..dc2e398 100644 --- a/_site/geese-trans-wrongs/index.html +++ b/_site/geese-trans-wrongs/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/geese/index.html b/_site/geese/index.html index cf10428..1abf2f7 100644 --- a/_site/geese/index.html +++ b/_site/geese/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/gender-as-a-proxy-variable/index.html b/_site/gender-as-a-proxy-variable/index.html index 7901277..edc32eb 100644 --- a/_site/gender-as-a-proxy-variable/index.html +++ b/_site/gender-as-a-proxy-variable/index.html @@ -1451,6 +1451,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/gender-in-data-models/index.html b/_site/gender-in-data-models/index.html index 2bf7ca0..3ea8cdd 100644 --- a/_site/gender-in-data-models/index.html +++ b/_site/gender-in-data-models/index.html @@ -1501,6 +1501,6 @@ This may also be expanded to a multi-step approach, with questions covering some - + \ No newline at end of file diff --git a/_site/gender/index.html b/_site/gender/index.html index ce430f8..0f85ae2 100644 --- a/_site/gender/index.html +++ b/_site/gender/index.html @@ -1285,6 +1285,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/girldick/index.html b/_site/girldick/index.html index f409b35..0a8cb39 100644 --- a/_site/girldick/index.html +++ b/_site/girldick/index.html @@ -1289,6 +1289,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/give-to-trans-orgs-and-people/index.html b/_site/give-to-trans-orgs-and-people/index.html index 64c662a..884d0a8 100644 --- a/_site/give-to-trans-orgs-and-people/index.html +++ b/_site/give-to-trans-orgs-and-people/index.html @@ -1321,6 +1321,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/gradient-purse-strap/index.html b/_site/gradient-purse-strap/index.html index 92da244..4abb4a6 100644 --- a/_site/gradient-purse-strap/index.html +++ b/_site/gradient-purse-strap/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/green-memo-pad/index.html b/_site/green-memo-pad/index.html index b32529c..27a6072 100644 --- a/_site/green-memo-pad/index.html +++ b/_site/green-memo-pad/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/greeting-loons/index.html b/_site/greeting-loons/index.html index 0a2c09a..c4edaa9 100644 --- a/_site/greeting-loons/index.html +++ b/_site/greeting-loons/index.html @@ -1272,6 +1272,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/greeting-quorbs/index.html b/_site/greeting-quorbs/index.html index 32ffdde..cfbff3d 100644 --- a/_site/greeting-quorbs/index.html +++ b/_site/greeting-quorbs/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/guestbook/index.html b/_site/guestbook/index.html index 82f8861..f22cd96 100644 --- a/_site/guestbook/index.html +++ b/_site/guestbook/index.html @@ -1077,6 +1077,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/hair/index.html b/_site/hair/index.html index 37a80c6..a198098 100644 --- a/_site/hair/index.html +++ b/_site/hair/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/hand-dyed-gold-handspun/index.html b/_site/hand-dyed-gold-handspun/index.html index c9767b7..d2e4f51 100644 --- a/_site/hand-dyed-gold-handspun/index.html +++ b/_site/hand-dyed-gold-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/handcombed-jacobs-handspun/index.html b/_site/handcombed-jacobs-handspun/index.html index 86a0b20..ef2de53 100644 --- a/_site/handcombed-jacobs-handspun/index.html +++ b/_site/handcombed-jacobs-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/handedness-toggle/index.html b/_site/handedness-toggle/index.html index a7f71ed..ae9809b 100644 --- a/_site/handedness-toggle/index.html +++ b/_site/handedness-toggle/index.html @@ -1488,6 +1488,6 @@ alignToggle. - + \ No newline at end of file diff --git a/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html b/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html index 0736553..7b62d8e 100644 --- a/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html +++ b/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html @@ -1283,6 +1283,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/happy-bihrtday/index.html b/_site/happy-bihrtday/index.html index c8dbc0e..f959745 100644 --- a/_site/happy-bihrtday/index.html +++ b/_site/happy-bihrtday/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/happy-solstice-2024/index.html b/_site/happy-solstice-2024/index.html index 44dc493..26f4675 100644 --- a/_site/happy-solstice-2024/index.html +++ b/_site/happy-solstice-2024/index.html @@ -1253,6 +1253,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/happy-solstice-2025/index.html b/_site/happy-solstice-2025/index.html index 732912b..55c24b6 100644 --- a/_site/happy-solstice-2025/index.html +++ b/_site/happy-solstice-2025/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/heron/index.html b/_site/heron/index.html index b51acb5..a65b580 100644 --- a/_site/heron/index.html +++ b/_site/heron/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/hummingbird-become-ungovernable/index.html b/_site/hummingbird-become-ungovernable/index.html index af6679a..4eedc3a 100644 --- a/_site/hummingbird-become-ungovernable/index.html +++ b/_site/hummingbird-become-ungovernable/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/icelandic-lamb-handspun/index.html b/_site/icelandic-lamb-handspun/index.html index 9096ba8..8303f08 100644 --- a/_site/icelandic-lamb-handspun/index.html +++ b/_site/icelandic-lamb-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/img/hellebore.jpg b/_site/img/hellebore.jpg new file mode 100644 index 0000000..ab21056 Binary files /dev/null and b/_site/img/hellebore.jpg differ diff --git a/_site/in-the-news/index.html b/_site/in-the-news/index.html index 5a184ab..635505e 100644 --- a/_site/in-the-news/index.html +++ b/_site/in-the-news/index.html @@ -1270,6 +1270,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/index.html b/_site/index.html index 7fcb506..3f02bb8 100644 --- a/_site/index.html +++ b/_site/index.html @@ -965,11 +965,11 @@ footer a:focus-visible {
      1. - + - Image unrelated to post. A crow poses on driftwood against a whitish sky. + Image unrelated to post. Close up on a pale green hellebore flower. -

        screen reader optimizations

        +

        eleventy lessons

      @@ -1195,6 +1195,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/intro-to-wireframing/index.html b/_site/intro-to-wireframing/index.html index 7eee00d..76df45d 100644 --- a/_site/intro-to-wireframing/index.html +++ b/_site/intro-to-wireframing/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/iris/index.html b/_site/iris/index.html index ebb3f99..dd0e4e7 100644 --- a/_site/iris/index.html +++ b/_site/iris/index.html @@ -1277,6 +1277,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/junco/index.html b/_site/junco/index.html index 839d577..8a8fe81 100644 --- a/_site/junco/index.html +++ b/_site/junco/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/keffiyah-fishing-net-pattern/index.html b/_site/keffiyah-fishing-net-pattern/index.html index 7756b5a..660cd0e 100644 --- a/_site/keffiyah-fishing-net-pattern/index.html +++ b/_site/keffiyah-fishing-net-pattern/index.html @@ -1455,6 +1455,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/kestrel-zine/index.html b/_site/kestrel-zine/index.html index bc4622e..30136f2 100644 --- a/_site/kestrel-zine/index.html +++ b/_site/kestrel-zine/index.html @@ -1271,6 +1271,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/killdeer/index.html b/_site/killdeer/index.html index 46fde81..901df51 100644 --- a/_site/killdeer/index.html +++ b/_site/killdeer/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/kniphofia/index.html b/_site/kniphofia/index.html index e4dac08..d59d37a 100644 --- a/_site/kniphofia/index.html +++ b/_site/kniphofia/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/knit-shrimp/index.html b/_site/knit-shrimp/index.html index 85d3257..4add69e 100644 --- a/_site/knit-shrimp/index.html +++ b/_site/knit-shrimp/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/leaf-patches/index.html b/_site/leaf-patches/index.html index 91481d1..e8094f6 100644 --- a/_site/leaf-patches/index.html +++ b/_site/leaf-patches/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/leather-chest-harness/index.html b/_site/leather-chest-harness/index.html index cc6dd77..93f1538 100644 --- a/_site/leather-chest-harness/index.html +++ b/_site/leather-chest-harness/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/leather-keychains/index.html b/_site/leather-keychains/index.html index 3bc801a..00a625f 100644 --- a/_site/leather-keychains/index.html +++ b/_site/leather-keychains/index.html @@ -1270,6 +1270,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/leather-lighter-case/index.html b/_site/leather-lighter-case/index.html index 1cf98f4..9c2c11e 100644 --- a/_site/leather-lighter-case/index.html +++ b/_site/leather-lighter-case/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/leather-long-stitch-journals/index.html b/_site/leather-long-stitch-journals/index.html index 42f0267..835f779 100644 --- a/_site/leather-long-stitch-journals/index.html +++ b/_site/leather-long-stitch-journals/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/leather-strap-journal/index.html b/_site/leather-strap-journal/index.html index 8a04502..14fd845 100644 --- a/_site/leather-strap-journal/index.html +++ b/_site/leather-strap-journal/index.html @@ -1272,6 +1272,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/leatherworking-favorites/index.html b/_site/leatherworking-favorites/index.html index 64fcde9..22c22ae 100644 --- a/_site/leatherworking-favorites/index.html +++ b/_site/leatherworking-favorites/index.html @@ -1390,6 +1390,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/light-grey-jacobs-handspun/index.html b/_site/light-grey-jacobs-handspun/index.html index 04c8e1a..c46287b 100644 --- a/_site/light-grey-jacobs-handspun/index.html +++ b/_site/light-grey-jacobs-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/lined-notebook/index.html b/_site/lined-notebook/index.html index a48cf42..0150a18 100644 --- a/_site/lined-notebook/index.html +++ b/_site/lined-notebook/index.html @@ -1275,6 +1275,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/little-critter-pouch/index.html b/_site/little-critter-pouch/index.html index 98dc27c..4ef4e16 100644 --- a/_site/little-critter-pouch/index.html +++ b/_site/little-critter-pouch/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/lobstah/index.html b/_site/lobstah/index.html index b00073e..05a07ce 100644 --- a/_site/lobstah/index.html +++ b/_site/lobstah/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/long-zipper-bifold/index.html b/_site/long-zipper-bifold/index.html index 7ea251b..08538eb 100644 --- a/_site/long-zipper-bifold/index.html +++ b/_site/long-zipper-bifold/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/loon/index.html b/_site/loon/index.html index 1da44ed..ba8b475 100644 --- a/_site/loon/index.html +++ b/_site/loon/index.html @@ -1261,6 +1261,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/luminescent/index.html b/_site/luminescent/index.html index ba39a38..9cfab41 100644 --- a/_site/luminescent/index.html +++ b/_site/luminescent/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/lupine/index.html b/_site/lupine/index.html index a2f5b75..b3f31b7 100644 --- a/_site/lupine/index.html +++ b/_site/lupine/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/makers-mark-keychain/index.html b/_site/makers-mark-keychain/index.html index 9ccc6ea..e1287ae 100644 --- a/_site/makers-mark-keychain/index.html +++ b/_site/makers-mark-keychain/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/mom-bag/index.html b/_site/mom-bag/index.html index f4e2a9b..24d8382 100644 --- a/_site/mom-bag/index.html +++ b/_site/mom-bag/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/moss-harness/index.html b/_site/moss-harness/index.html index 9921df7..5560200 100644 --- a/_site/moss-harness/index.html +++ b/_site/moss-harness/index.html @@ -1263,6 +1263,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/mousie/index.html b/_site/mousie/index.html index d599a4e..cb7d80a 100644 --- a/_site/mousie/index.html +++ b/_site/mousie/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/moving-images/index.html b/_site/moving-images/index.html index 3394fb4..5b999e7 100644 --- a/_site/moving-images/index.html +++ b/_site/moving-images/index.html @@ -1334,6 +1334,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/my-favorite-git-flag/index.html b/_site/my-favorite-git-flag/index.html index ad9135e..6288c8f 100644 --- a/_site/my-favorite-git-flag/index.html +++ b/_site/my-favorite-git-flag/index.html @@ -1285,6 +1285,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/networks-of-trans-care/index.html b/_site/networks-of-trans-care/index.html index 3a72c8f..dae0a0f 100644 --- a/_site/networks-of-trans-care/index.html +++ b/_site/networks-of-trans-care/index.html @@ -1277,6 +1277,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/nine-pocket-bifold/index.html b/_site/nine-pocket-bifold/index.html index db6417f..cfb732a 100644 --- a/_site/nine-pocket-bifold/index.html +++ b/_site/nine-pocket-bifold/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/no-politics-wip/index.html b/_site/no-politics-wip/index.html index 213c618..d972869 100644 --- a/_site/no-politics-wip/index.html +++ b/_site/no-politics-wip/index.html @@ -1302,6 +1302,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/nonbinary-flag/index.html b/_site/nonbinary-flag/index.html index 6617f00..4963448 100644 --- a/_site/nonbinary-flag/index.html +++ b/_site/nonbinary-flag/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/not-a-drill/index.html b/_site/not-a-drill/index.html index 709b748..cff565a 100644 --- a/_site/not-a-drill/index.html +++ b/_site/not-a-drill/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/o-ring-bracelet/index.html b/_site/o-ring-bracelet/index.html index 2649be2..1af1fd4 100644 --- a/_site/o-ring-bracelet/index.html +++ b/_site/o-ring-bracelet/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/on-pronouns/index.html b/_site/on-pronouns/index.html index 27f3855..18381da 100644 --- a/_site/on-pronouns/index.html +++ b/_site/on-pronouns/index.html @@ -1505,6 +1505,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/on-the-shoulders-of-giants/index.html b/_site/on-the-shoulders-of-giants/index.html index 4abfcf7..33397fc 100644 --- a/_site/on-the-shoulders-of-giants/index.html +++ b/_site/on-the-shoulders-of-giants/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/on-the-ubiquity-of-enby/index.html b/_site/on-the-ubiquity-of-enby/index.html index 600dcde..0ffb538 100644 --- a/_site/on-the-ubiquity-of-enby/index.html +++ b/_site/on-the-ubiquity-of-enby/index.html @@ -1276,6 +1276,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/orange-green-journal/index.html b/_site/orange-green-journal/index.html index 6eee525..d7d0d42 100644 --- a/_site/orange-green-journal/index.html +++ b/_site/orange-green-journal/index.html @@ -1272,6 +1272,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/orange-journal/index.html b/_site/orange-journal/index.html index ef4391b..d31b777 100644 --- a/_site/orange-journal/index.html +++ b/_site/orange-journal/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/orion-handspun/index.html b/_site/orion-handspun/index.html index d422eef..c93b426 100644 --- a/_site/orion-handspun/index.html +++ b/_site/orion-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/palette/index.html b/_site/palette/index.html index 1c3dce6..a30606b 100644 --- a/_site/palette/index.html +++ b/_site/palette/index.html @@ -1044,6 +1044,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/patchwork-wallet/index.html b/_site/patchwork-wallet/index.html index 6541a8b..865eae0 100644 --- a/_site/patchwork-wallet/index.html +++ b/_site/patchwork-wallet/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/petrichor-handspun/index.html b/_site/petrichor-handspun/index.html index 04e2fd8..ad8fd5c 100644 --- a/_site/petrichor-handspun/index.html +++ b/_site/petrichor-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/pinatex-wallet-with-zipper/index.html b/_site/pinatex-wallet-with-zipper/index.html index 3491a58..cb6dcd9 100644 --- a/_site/pinatex-wallet-with-zipper/index.html +++ b/_site/pinatex-wallet-with-zipper/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/pink-socks/index.html b/_site/pink-socks/index.html index 1389a0c..3a37ba7 100644 --- a/_site/pink-socks/index.html +++ b/_site/pink-socks/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/pins/index.html b/_site/pins/index.html index 700e825..c74ef2e 100644 --- a/_site/pins/index.html +++ b/_site/pins/index.html @@ -1263,6 +1263,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/pride-dice-bags/index.html b/_site/pride-dice-bags/index.html index 7b13afb..d313cae 100644 --- a/_site/pride-dice-bags/index.html +++ b/_site/pride-dice-bags/index.html @@ -1285,6 +1285,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/printing-press-notes/index.html b/_site/printing-press-notes/index.html index 141843f..bdae870 100644 --- a/_site/printing-press-notes/index.html +++ b/_site/printing-press-notes/index.html @@ -1277,6 +1277,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/printmaking-paper-notes/index.html b/_site/printmaking-paper-notes/index.html index 2c9ad62..c8defb1 100644 --- a/_site/printmaking-paper-notes/index.html +++ b/_site/printmaking-paper-notes/index.html @@ -1313,6 +1313,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/pronoun-patches/index.html b/_site/pronoun-patches/index.html index 1ba75a2..936bd8f 100644 --- a/_site/pronoun-patches/index.html +++ b/_site/pronoun-patches/index.html @@ -1293,6 +1293,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/proud-dad-wallet/index.html b/_site/proud-dad-wallet/index.html index ec32f50..5d940f2 100644 --- a/_site/proud-dad-wallet/index.html +++ b/_site/proud-dad-wallet/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/queer-book-list/index.html b/_site/queer-book-list/index.html index 6bd5ae8..3ce5188 100644 --- a/_site/queer-book-list/index.html +++ b/_site/queer-book-list/index.html @@ -1256,6 +1256,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/queer/index.html b/_site/queer/index.html index e6c96c5..107ac7d 100644 --- a/_site/queer/index.html +++ b/_site/queer/index.html @@ -1288,6 +1288,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/quorbs/index.html b/_site/quorbs/index.html index 7ed6bff..f9b6eaf 100644 --- a/_site/quorbs/index.html +++ b/_site/quorbs/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/rachels-bracelets/index.html b/_site/rachels-bracelets/index.html index 3ac77c6..0871dde 100644 --- a/_site/rachels-bracelets/index.html +++ b/_site/rachels-bracelets/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/rambouillet-handspun/index.html b/_site/rambouillet-handspun/index.html index 37f1245..efb5174 100644 --- a/_site/rambouillet-handspun/index.html +++ b/_site/rambouillet-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/recommendations-and-favorites/index.html b/_site/recommendations-and-favorites/index.html index 2250e1e..3d69afa 100644 --- a/_site/recommendations-and-favorites/index.html +++ b/_site/recommendations-and-favorites/index.html @@ -1298,6 +1298,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/redirections/index.html b/_site/redirections/index.html index 9cfd687..594fd3b 100644 --- a/_site/redirections/index.html +++ b/_site/redirections/index.html @@ -1311,6 +1311,6 @@ heredoc> tempest.md - + \ No newline at end of file diff --git a/_site/reference/1/index.html b/_site/reference/1/index.html index ef12d12..9180230 100644 --- a/_site/reference/1/index.html +++ b/_site/reference/1/index.html @@ -966,6 +966,20 @@ footer a:focus-visible {
        +
      1. + + + Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk. + +

        networks of trans care

        +
          + +
        • gender
          • + +
        +         +
        2. +
      2. @@ -1132,20 +1146,6 @@ footer a:focus-visible {
        3. -
      3. - - - Picture unrelated to post. Lee, sitting in a chair and seen in profile, looks up and smiles. Ze is holding and working on a partially knit shrimp. - -

        in the news

        -
          - -
        • gender
          • - -
        -         -
        4. -
      @@ -1201,6 +1201,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/reference/2/index.html b/_site/reference/2/index.html index 0a5477f..4170612 100644 --- a/_site/reference/2/index.html +++ b/_site/reference/2/index.html @@ -966,6 +966,20 @@ footer a:focus-visible {
        +
      1. + + + Picture unrelated to post. Lee, sitting in a chair and seen in profile, looks up and smiles. Ze is holding and working on a partially knit shrimp. + +

        in the news

        +
          + +
        • gender
          • + +
        +         +
        2. +
      2. @@ -1105,6 +1119,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/reference/index.html b/_site/reference/index.html index ecb3280..7e5c510 100644 --- a/_site/reference/index.html +++ b/_site/reference/index.html @@ -966,6 +966,20 @@ footer a:focus-visible {
          +
        1. + + + Image unrelated to post. Close up on a pale green hellebore flower. + +

          eleventy lessons

          +
            + +
          • software
            • + +
          +           +
          2. +
        2. @@ -1138,20 +1152,6 @@ footer a:focus-visible {
          3. -
        3. - - - Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk. - -

          networks of trans care

          -
            - -
          • gender
            • - -
          -           -
          4. -
        @@ -1201,6 +1201,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/rescue-trans-rescue/index.html b/_site/rescue-trans-rescue/index.html index 5d29bc7..d7c029a 100644 --- a/_site/rescue-trans-rescue/index.html +++ b/_site/rescue-trans-rescue/index.html @@ -1256,6 +1256,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/resume/index.html b/_site/resume/index.html index ba5b214..1745b5f 100644 --- a/_site/resume/index.html +++ b/_site/resume/index.html @@ -1006,6 +1006,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/rope-one/index.html b/_site/rope-one/index.html index 78cd11d..6b5e00a 100644 --- a/_site/rope-one/index.html +++ b/_site/rope-one/index.html @@ -1269,6 +1269,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/ruby-the-alpaca-handspun/index.html b/_site/ruby-the-alpaca-handspun/index.html index a8d9437..dd01f6e 100644 --- a/_site/ruby-the-alpaca-handspun/index.html +++ b/_site/ruby-the-alpaca-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/scrap-patches/index.html b/_site/scrap-patches/index.html index 70be1c1..e00808a 100644 --- a/_site/scrap-patches/index.html +++ b/_site/scrap-patches/index.html @@ -1261,6 +1261,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/screen-reader-optimizations/index.html b/_site/screen-reader-optimizations/index.html index 1b97afa..f292d73 100644 --- a/_site/screen-reader-optimizations/index.html +++ b/_site/screen-reader-optimizations/index.html @@ -1182,7 +1182,7 @@ export { HeadingAnchors }

        posted on - + by Lee Cattarin

        @@ -1270,12 +1270,18 @@ export { HeadingAnchors }
        1. - - crow + + charlie the alpaca handspun
          2. +
        2. + + crow + +
          3. +
        @@ -1308,6 +1314,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/seedling/index.html b/_site/seedling/index.html index c48337a..05e43b7 100644 --- a/_site/seedling/index.html +++ b/_site/seedling/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/shirt-making-notes/index.html b/_site/shirt-making-notes/index.html index 0d3a888..e94a26e 100644 --- a/_site/shirt-making-notes/index.html +++ b/_site/shirt-making-notes/index.html @@ -1295,6 +1295,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/shirts/index.html b/_site/shirts/index.html index 800cfdf..0e97597 100644 --- a/_site/shirts/index.html +++ b/_site/shirts/index.html @@ -1266,6 +1266,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/shrimp-cat-toy/index.html b/_site/shrimp-cat-toy/index.html index 5c76624..1d35bf1 100644 --- a/_site/shrimp-cat-toy/index.html +++ b/_site/shrimp-cat-toy/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/shrimp/index.html b/_site/shrimp/index.html index b41d071..26f1e89 100644 --- a/_site/shrimp/index.html +++ b/_site/shrimp/index.html @@ -1284,6 +1284,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/siblinghood-of-the-traveling-greeting-card/index.html b/_site/siblinghood-of-the-traveling-greeting-card/index.html index fb180b3..8509d4a 100644 --- a/_site/siblinghood-of-the-traveling-greeting-card/index.html +++ b/_site/siblinghood-of-the-traveling-greeting-card/index.html @@ -1338,6 +1338,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/sideways-canvas-shirt/index.html b/_site/sideways-canvas-shirt/index.html index a9405f7..1f3e1f6 100644 --- a/_site/sideways-canvas-shirt/index.html +++ b/_site/sideways-canvas-shirt/index.html @@ -1263,6 +1263,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/sitemap.xml b/_site/sitemap.xml index 2af53e6..9ab3178 100644 --- a/_site/sitemap.xml +++ b/_site/sitemap.xml @@ -1491,6 +1491,14 @@ + + https://leecat.art/screen-reader-optimizations/ + 2026-02-06 + + + + + https://leecat.art/crow/ 2026-02-09 @@ -1555,6 +1563,14 @@ + + https://leecat.art/eleventy-lessons/ + 2026-02-19 + + + + + https://leecat.art/tags/gender/ 2026-02-19 @@ -1595,14 +1611,6 @@ - - https://leecat.art/screen-reader-optimizations/ - 2026-02-19 - - - - - https://leecat.art/feed.xml 2026-02-20 diff --git a/_site/slightly-weird-man-club/index.html b/_site/slightly-weird-man-club/index.html index d74de3b..f8b53ac 100644 --- a/_site/slightly-weird-man-club/index.html +++ b/_site/slightly-weird-man-club/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/snap-pouch/index.html b/_site/snap-pouch/index.html index b617883..b2bcc07 100644 --- a/_site/snap-pouch/index.html +++ b/_site/snap-pouch/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/soras-collar/index.html b/_site/soras-collar/index.html index 83cd6a8..b09351a 100644 --- a/_site/soras-collar/index.html +++ b/_site/soras-collar/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/spinners-dream-handspun/index.html b/_site/spinners-dream-handspun/index.html index d0b7188..5aa4a3f 100644 --- a/_site/spinners-dream-handspun/index.html +++ b/_site/spinners-dream-handspun/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/spinning-plants/index.html b/_site/spinning-plants/index.html index 93dcd8c..d4f3589 100644 --- a/_site/spinning-plants/index.html +++ b/_site/spinning-plants/index.html @@ -1387,6 +1387,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/spotted-towhee/index.html b/_site/spotted-towhee/index.html index c94ab03..956aa01 100644 --- a/_site/spotted-towhee/index.html +++ b/_site/spotted-towhee/index.html @@ -1274,6 +1274,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/square-watercolor-pad/index.html b/_site/square-watercolor-pad/index.html index 983b1a0..ddcfa83 100644 --- a/_site/square-watercolor-pad/index.html +++ b/_site/square-watercolor-pad/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/squarsh/index.html b/_site/squarsh/index.html index 001fa51..29ede04 100644 --- a/_site/squarsh/index.html +++ b/_site/squarsh/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/stampede-journal/index.html b/_site/stampede-journal/index.html index 200cc5b..527dafc 100644 --- a/_site/stampede-journal/index.html +++ b/_site/stampede-journal/index.html @@ -1273,6 +1273,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/stationery-exchange/index.html b/_site/stationery-exchange/index.html index 98df151..f6cb29c 100644 --- a/_site/stationery-exchange/index.html +++ b/_site/stationery-exchange/index.html @@ -1280,6 +1280,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/stellars-jay/index.html b/_site/stellars-jay/index.html index 5a0f251..794bacb 100644 --- a/_site/stellars-jay/index.html +++ b/_site/stellars-jay/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/stephanie-collar/index.html b/_site/stephanie-collar/index.html index 482b4b9..25e6fee 100644 --- a/_site/stephanie-collar/index.html +++ b/_site/stephanie-collar/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/stickers/index.html b/_site/stickers/index.html index 7a53d0d..a522dd4 100644 --- a/_site/stickers/index.html +++ b/_site/stickers/index.html @@ -1276,6 +1276,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/striped-journal/index.html b/_site/striped-journal/index.html index 1af381f..4031f4c 100644 --- a/_site/striped-journal/index.html +++ b/_site/striped-journal/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/style/index.html b/_site/style/index.html index a4bcb57..8bf83e3 100644 --- a/_site/style/index.html +++ b/_site/style/index.html @@ -1107,6 +1107,6 @@ This is supposed to be a new paragraph, but it isn't.

        - + \ No newline at end of file diff --git a/_site/sunflower/index.html b/_site/sunflower/index.html index 369c1d4..723bc89 100644 --- a/_site/sunflower/index.html +++ b/_site/sunflower/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/swallowtail-on-snowdrops/index.html b/_site/swallowtail-on-snowdrops/index.html index 6a98a01..f4b560e 100644 --- a/_site/swallowtail-on-snowdrops/index.html +++ b/_site/swallowtail-on-snowdrops/index.html @@ -1279,6 +1279,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/swoop-wallet/index.html b/_site/swoop-wallet/index.html index 11b05da..fac9ddb 100644 --- a/_site/swoop-wallet/index.html +++ b/_site/swoop-wallet/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/tags/book/2/index.html b/_site/tags/book/2/index.html index cbad71e..4258b4e 100644 --- a/_site/tags/book/2/index.html +++ b/_site/tags/book/2/index.html @@ -1043,6 +1043,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/book/index.html b/_site/tags/book/index.html index 500555b..c8d6e13 100644 --- a/_site/tags/book/index.html +++ b/_site/tags/book/index.html @@ -1201,6 +1201,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/card/2/index.html b/_site/tags/card/2/index.html index 1a14280..eec3f24 100644 --- a/_site/tags/card/2/index.html +++ b/_site/tags/card/2/index.html @@ -1251,6 +1251,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/card/3/index.html b/_site/tags/card/3/index.html index 73961eb..bb4ec01 100644 --- a/_site/tags/card/3/index.html +++ b/_site/tags/card/3/index.html @@ -1081,6 +1081,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/card/index.html b/_site/tags/card/index.html index efe2ffa..b66ab08 100644 --- a/_site/tags/card/index.html +++ b/_site/tags/card/index.html @@ -1255,6 +1255,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/gender/2/index.html b/_site/tags/gender/2/index.html index eaea51a..9d09601 100644 --- a/_site/tags/gender/2/index.html +++ b/_site/tags/gender/2/index.html @@ -1271,6 +1271,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/gender/3/index.html b/_site/tags/gender/3/index.html index da924d2..a54c816 100644 --- a/_site/tags/gender/3/index.html +++ b/_site/tags/gender/3/index.html @@ -1077,6 +1077,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/gender/index.html b/_site/tags/gender/index.html index 5e56c23..4c41d23 100644 --- a/_site/tags/gender/index.html +++ b/_site/tags/gender/index.html @@ -1219,6 +1219,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/highlight/index.html b/_site/tags/highlight/index.html index c976f5a..7257c9a 100644 --- a/_site/tags/highlight/index.html +++ b/_site/tags/highlight/index.html @@ -1194,6 +1194,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/index.html b/_site/tags/index.html index ed65cbe..d19a05e 100644 --- a/_site/tags/index.html +++ b/_site/tags/index.html @@ -1290,6 +1290,11 @@ footer a:focus-visible { + Image unrelated to post. Close up on a pale green hellebore flower. + + + + Image unrelated to post. A crow poses on driftwood against a whitish sky. @@ -1303,15 +1308,10 @@ footer a:focus-visible { Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. - - - Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats. - -

        software

        -

        (13 posts)

        +

        (14 posts)

        3. @@ -1472,6 +1472,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/knit/index.html b/_site/tags/knit/index.html index e21bffc..d9d7382 100644 --- a/_site/tags/knit/index.html +++ b/_site/tags/knit/index.html @@ -1162,6 +1162,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/leather/2/index.html b/_site/tags/leather/2/index.html index 8499d5a..3f95aa4 100644 --- a/_site/tags/leather/2/index.html +++ b/_site/tags/leather/2/index.html @@ -1207,6 +1207,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/leather/3/index.html b/_site/tags/leather/3/index.html index 620f3e6..763cf07 100644 --- a/_site/tags/leather/3/index.html +++ b/_site/tags/leather/3/index.html @@ -1211,6 +1211,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/leather/4/index.html b/_site/tags/leather/4/index.html index 8f8066b..f1d1cc2 100644 --- a/_site/tags/leather/4/index.html +++ b/_site/tags/leather/4/index.html @@ -1169,6 +1169,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/leather/index.html b/_site/tags/leather/index.html index 520a660..77b0a6f 100644 --- a/_site/tags/leather/index.html +++ b/_site/tags/leather/index.html @@ -1203,6 +1203,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/patch/index.html b/_site/tags/patch/index.html index 7252e1b..bbdd986 100644 --- a/_site/tags/patch/index.html +++ b/_site/tags/patch/index.html @@ -1032,6 +1032,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/pin/index.html b/_site/tags/pin/index.html index 2c5b199..49d582a 100644 --- a/_site/tags/pin/index.html +++ b/_site/tags/pin/index.html @@ -1164,6 +1164,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/print/2/index.html b/_site/tags/print/2/index.html index fdb9837..dc1b7be 100644 --- a/_site/tags/print/2/index.html +++ b/_site/tags/print/2/index.html @@ -1245,6 +1245,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/print/3/index.html b/_site/tags/print/3/index.html index 68711fa..80e3c8a 100644 --- a/_site/tags/print/3/index.html +++ b/_site/tags/print/3/index.html @@ -1259,6 +1259,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/print/4/index.html b/_site/tags/print/4/index.html index d6659b6..ded3062 100644 --- a/_site/tags/print/4/index.html +++ b/_site/tags/print/4/index.html @@ -1249,6 +1249,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/print/5/index.html b/_site/tags/print/5/index.html index 72a5d20..e019ac9 100644 --- a/_site/tags/print/5/index.html +++ b/_site/tags/print/5/index.html @@ -1097,6 +1097,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/print/index.html b/_site/tags/print/index.html index 53c3ec9..b1b6b5e 100644 --- a/_site/tags/print/index.html +++ b/_site/tags/print/index.html @@ -1215,6 +1215,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/shirt/2/index.html b/_site/tags/shirt/2/index.html index 2f87acb..02e9523 100644 --- a/_site/tags/shirt/2/index.html +++ b/_site/tags/shirt/2/index.html @@ -1141,6 +1141,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/shirt/index.html b/_site/tags/shirt/index.html index 6afbca8..cb80f90 100644 --- a/_site/tags/shirt/index.html +++ b/_site/tags/shirt/index.html @@ -1249,6 +1249,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/software/2/index.html b/_site/tags/software/2/index.html new file mode 100644 index 0000000..bfd88ed --- /dev/null +++ b/_site/tags/software/2/index.html @@ -0,0 +1,1034 @@ + + + + + + + tag: software | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + + + + + +
        + + +
        + + +

        tag: software

        + + + +
          + +
        1. + + + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + +

          backend accessibility

          +
            + +
          • software
            • + +
          +           +
          2. + +
        + + + + + + + + + + + + + + +
        +
        + + + + + + + \ No newline at end of file diff --git a/_site/tags/software/index.html b/_site/tags/software/index.html index 40de6ef..6bc5a2b 100644 --- a/_site/tags/software/index.html +++ b/_site/tags/software/index.html @@ -964,6 +964,20 @@ footer a:focus-visible {
          +
        1. + + + Image unrelated to post. Close up on a pale green hellebore flower. + +

          eleventy lessons

          +
            + +
          • software
            • + +
          +           +
          2. +
        2. @@ -1140,26 +1154,27 @@ footer a:focus-visible {
          3. -
        3. - - - A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. - -

          backend accessibility

          -
            - -
          • software
            • - -
          -           -
          4. -
        + + + + @@ -1190,6 +1205,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/stationery/index.html b/_site/tags/stationery/index.html index 4f6efda..1ff0d39 100644 --- a/_site/tags/stationery/index.html +++ b/_site/tags/stationery/index.html @@ -1042,6 +1042,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/sticker/index.html b/_site/tags/sticker/index.html index 0cb4143..eb72c91 100644 --- a/_site/tags/sticker/index.html +++ b/_site/tags/sticker/index.html @@ -1164,6 +1164,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/yarn/2/index.html b/_site/tags/yarn/2/index.html index 316a82e..db2aefe 100644 --- a/_site/tags/yarn/2/index.html +++ b/_site/tags/yarn/2/index.html @@ -1057,6 +1057,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/yarn/index.html b/_site/tags/yarn/index.html index d40fff2..014d1f4 100644 --- a/_site/tags/yarn/index.html +++ b/_site/tags/yarn/index.html @@ -1197,6 +1197,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/tags/zine/index.html b/_site/tags/zine/index.html index 6c8c276..9858e72 100644 --- a/_site/tags/zine/index.html +++ b/_site/tags/zine/index.html @@ -1064,6 +1064,6 @@ footer a:focus-visible { - + \ No newline at end of file diff --git a/_site/textures-unite/index.html b/_site/textures-unite/index.html index 5bb201f..20078ee 100644 --- a/_site/textures-unite/index.html +++ b/_site/textures-unite/index.html @@ -1268,6 +1268,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/tiny-books/index.html b/_site/tiny-books/index.html index dae2fde..23177e7 100644 --- a/_site/tiny-books/index.html +++ b/_site/tiny-books/index.html @@ -1277,6 +1277,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/tiny-mushrooms/index.html b/_site/tiny-mushrooms/index.html index eedb577..042dca2 100644 --- a/_site/tiny-mushrooms/index.html +++ b/_site/tiny-mushrooms/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/tiny-portraits/index.html b/_site/tiny-portraits/index.html index 0e588eb..9796bec 100644 --- a/_site/tiny-portraits/index.html +++ b/_site/tiny-portraits/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/tooled-leather-patches/index.html b/_site/tooled-leather-patches/index.html index 40842f5..3780e60 100644 --- a/_site/tooled-leather-patches/index.html +++ b/_site/tooled-leather-patches/index.html @@ -1267,6 +1267,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/trans-rights-skull/index.html b/_site/trans-rights-skull/index.html index 0c5d83e..c60f5a4 100644 --- a/_site/trans-rights-skull/index.html +++ b/_site/trans-rights-skull/index.html @@ -1291,6 +1291,6 @@ prints/cards: black with blue and pink letters

        - + \ No newline at end of file diff --git a/_site/trans-the-world/index.html b/_site/trans-the-world/index.html index 0a9e791..15ace5f 100644 --- a/_site/trans-the-world/index.html +++ b/_site/trans-the-world/index.html @@ -1278,6 +1278,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/trans-wrongs-skull/index.html b/_site/trans-wrongs-skull/index.html index c288ec1..42b84fe 100644 --- a/_site/trans-wrongs-skull/index.html +++ b/_site/trans-wrongs-skull/index.html @@ -1289,6 +1289,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/triangle-pouch/index.html b/_site/triangle-pouch/index.html index 9c09720..23ce64f 100644 --- a/_site/triangle-pouch/index.html +++ b/_site/triangle-pouch/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/vertical-bifold/index.html b/_site/vertical-bifold/index.html index 42df203..4d7da0f 100644 --- a/_site/vertical-bifold/index.html +++ b/_site/vertical-bifold/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/vertical-card-wallet/index.html b/_site/vertical-card-wallet/index.html index 838cc29..33713b2 100644 --- a/_site/vertical-card-wallet/index.html +++ b/_site/vertical-card-wallet/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/vertical-zipper-card-wallet/index.html b/_site/vertical-zipper-card-wallet/index.html index 11e4451..8a81dfa 100644 --- a/_site/vertical-zipper-card-wallet/index.html +++ b/_site/vertical-zipper-card-wallet/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/vix-collar/index.html b/_site/vix-collar/index.html index ffd3949..4ac14de 100644 --- a/_site/vix-collar/index.html +++ b/_site/vix-collar/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/wrap-bracelets/index.html b/_site/wrap-bracelets/index.html index 5c1269d..53d0fae 100644 --- a/_site/wrap-bracelets/index.html +++ b/_site/wrap-bracelets/index.html @@ -1261,6 +1261,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/x-acto-knife-sheath/index.html b/_site/x-acto-knife-sheath/index.html index bb723fa..fad3f69 100644 --- a/_site/x-acto-knife-sheath/index.html +++ b/_site/x-acto-knife-sheath/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/zipper-bifold-green/index.html b/_site/zipper-bifold-green/index.html index 9739ca5..3e8ce4a 100644 --- a/_site/zipper-bifold-green/index.html +++ b/_site/zipper-bifold-green/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/_site/zipper-bifold/index.html b/_site/zipper-bifold/index.html index 8646153..391ba35 100644 --- a/_site/zipper-bifold/index.html +++ b/_site/zipper-bifold/index.html @@ -1262,6 +1262,6 @@ export { HeadingAnchors } - + \ No newline at end of file diff --git a/src/img/2026/hellebore.jpg b/src/img/2026/hellebore.jpg new file mode 100755 index 0000000..d6e05f7 Binary files /dev/null and b/src/img/2026/hellebore.jpg differ diff --git a/src/posts/2026/2026-2-06-screen-reader-optimizations.md b/src/posts/2026/2026-02-06-screen-reader-optimizations.md similarity index 100% rename from src/posts/2026/2026-2-06-screen-reader-optimizations.md rename to src/posts/2026/2026-02-06-screen-reader-optimizations.md diff --git a/src/posts/2026/2026-02-19-eleventy-lessons.md b/src/posts/2026/2026-02-19-eleventy-lessons.md new file mode 100644 index 0000000..a33fe91 --- /dev/null +++ b/src/posts/2026/2026-02-19-eleventy-lessons.md @@ -0,0 +1,421 @@ +--- +title: eleventy lessons +image: + src: 2026/hellebore.jpg + alt: Image unrelated to post. Close up on a pale green hellebore flower. +tags: + - reference + - software +--- + +recently I wrote *several* sites using [Eleventy](https://www.11ty.dev/){target="_blank" rel="external"} (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 [heckin.technology](https://heckin.technology/){target="_blank" rel="external"}. See ya, GitHub. Won't miss ya. + +I've compiled some of the things I've learned in a standalone site: [11ty Lessons](https://inherentlee.codeberg.page/lessons/){target="_blank" rel="external"}. + +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. + +this will comprise of 4 parts: [related posts](#related-posts), [featured images](#featured-images), [pagination](#pagination), and [tag image preview](#tag-image-preview). Feel free to jump ahead, as none depend on the others. + +--- + +## related posts + +by default, the [Eleventy base blog](github.com/11ty/eleventy-base-blog){target="_blank" rel="external"} comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc. + +while that is useful for *this* site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags. + +I started by referring to [this GitHub issue about related posts](https://github.com/11ty/eleventy/discussions/2534){target="_blank rel="external"}. I had to fix a few errors that arose from the suggested code. + +I also wanted to make two changes: + +1. I didn't want to just see posts that shared *all* tags, but rather posts that shared *any* tag +1. I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order + +### filters.js + +after adjusting for those needs, I had the following in `filters.js`: + +```js +eleventyConfig.addNunjucksFilter("excludeFromCollection", function (collection=[], pageUrl=this.ctx.page.url) { + return collection.filter(post => post.url !== pageUrl); +}); + +eleventyConfig.addFilter("filterByTags", function(collection=[], ...requiredTags) { + return collection.filter(post => { + return requiredTags.flat().some(tag => post.data.tags.includes(tag)); + }); +}); + +eleventyConfig.addFilter("randomize", function(array) { + // Create a copy of the array to avoid modifying the original + let shuffledArray = array.slice(); + + // Fisher-Yates shuffle algorithm + for (let i = shuffledArray.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]]; + } + + return shuffledArray; +}); +``` + +### post.njk + +I used this in my post layout. `filterTagList` comes with the base blog by default, and removes the tags "posts" and "all." `head` also comes with the base blog. `postlist.njk` is my modified-from-the-base-blog post layout. + +{% raw %} +```html +{% set relevantTags = tags | filterTagList %} +{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(page.url) | randomize | head(2) %} +{% if postlist.length %} +
        +

        related posts

        + {% include "postlist.njk" %} +
        +{% endif %} +``` +{% endraw %} + +and that sorts related posts. + +--- + +## featured images + +> 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. + +images in 11ty use the [Image Transform Plugin](https://www.11ty.dev/docs/plugins/image/#eleventy-transform){target="_blank" rel="external"}. 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. + +### file structure + +``` +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 +``` + +### front matter + +for any given post, my front matter references the image in this manner: + +``` +--- +image: + src: sample-0.jpg + alt: moss on a fencepost +--- +``` + +### image HTML transform + +As mentioned, there's a plugin for images. If you started with the base blog, in `eleventy.config.js`, you'll probably find a chunk of code similar to this already in place: + +```js +eleventyConfig.addPlugin(eleventyImageTransformPlugin, { + formats: ["auto"], + + widths: [640], + failOnError: true, + htmlOptions: { + imgAttributes: { + // e.g. assigned on the HTML tag will override these values. + loading: "lazy", + decoding: "async", + } + }, + + sharpOptions: { + animated: true, + }, +}); +``` + +setting `formats` 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 `width`, 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 `failOnError` to true for a little more feedback. + +> 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! + +### passthrough copy + +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. + +### templating + +I needed images to show up in 3 places: + +- In the lists of posts on the home page, I wanted each post to show its featured image +- In the "related posts" section on each individual post, I wanted each related post to show its featured image +- And of course, I wanted the post to show its own featured image + +### home page and related posts + +both of these sections use the same template, which in my setup is called `postlist.njk`. Within the relevant links, I added the following: + +{% raw %} +```html +{% if post.data.image.src %} + {{ post.data.image.alt }} +{% else %} +
        +{% endif %} +``` +{% endraw %} + +### post body + +the post body looks similar: + +{% raw %} +```html +{% if image.src %} +{{ image.alt }} +{% endif %} +``` +{% endraw %} + +together, that sets up featured images for posts. + +--- + +## pagination + +### simple pagination + +[Post pagination in Eleventy is pretty straightforward](https://www.11ty.dev/docs/pagination/){target="_blank" rel="external"}, mostly requiring some specific front matter. + +The home page pagination I have set up here looks like the following (in `index.njk`): + +``` +--- +pagination: + data: collections.posts + size: 13 + alias: posts + reverse: true +--- +``` + +6 posts per page, paginate data from `collections.posts` which we'll call just `posts` for short, and do it in reverse (aka, most recent posts show first). + +[You'll also likely want previous and next buttons](https://www.11ty.dev/docs/pagination/nav){target="_blank" rel="external"}. I did. Here's what I have... + +#### pagination.njk + +There's two components to this, the bigger one being this `pagination.njk` template. Look, I like my little icons, ok? It takes an `olderHref` and a `newerHref`, and optionally an `olderTitle` and `newerTitle`. + +{% raw %} +```html +{% if olderHref or newerHref %} + +{% endif %} +``` +{% endraw %} + +#### calling the template + +From `index.njk` we can `include "pagination.njk"`: + +{% raw %} +``` +{# idk why these are backwards either #} +{% set newerHref = pagination.href.previous %} +{% set olderHref = pagination.href.next %} +{% include "pagination.njk" %} +``` +{% endraw %} + +Yup. The order of previous vs. next is totally unintuitive to me, too. + +### complex pagination + +however, there's a catch. [Tag pages are *created* via pagination](https://www.11ty.dev/docs/quicktips/tag-pages/){target="_blank" rel="external"}! It's a lot harder to paginate those - you can't just use the front matter to set it up. + +I untangled [this GitHub issue about double-layered pagination](https://github.com/11ty/eleventy/issues/332#issuecomment-445236776){target="_blank" rel="external"} and came to the following solution... + +#### eleventy.config.js + +in `eleventy.config.js`: + +```js +// note that this uses the lodash.chunk method, so you’ll have to import that +eleventyConfig.addCollection("tagPagination", function(collection) { + // Get unique list of tags + let tagSet = new Set(collection.getAllSorted().flatMap((post) => post.data.tags || [])); + + // Get each item that matches the tag + let paginationSize = 6; + let tagMap = []; + let tagArray = [...tagSet]; + + for( let tagName of tagArray) { + let tagItems = collection.getFilteredByTag(tagName); + let pagedItems = chunk(tagItems.reverse(), paginationSize); + + for( let pageNumber = 0, max = pagedItems.length; pageNumber < max; pageNumber++) { + tagMap.push({ + tagName: tagName, + pageNumber: pageNumber, + pageSize: pagedItems.length, + pageData: pagedItems[pageNumber] + }); + } + } + + return tagMap; +}); +``` + +#### tag-pages.njk + +in my `tag-pages.njk` file (or whatever you use to template out your tag pages): + +{% raw %} +```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 +--- +

        Posts tagged “{{ tag.tagName }}”

        + +{% 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" %} +``` +{% endraw %} + +note the pagination checking `tag.pageNumber` against `tag.PageSize` - the [original suggested solution](https://github.com/11ty/eleventy/issues/332#issuecomment-445236776){target="_blank" rel="external"} in the GitHub post creates an issue where the pagination loops through *all* of the tag pages bit-by-bit. This sorts that - hat tip to [TheReyzar who mentioned the issue and showed part of their solution](https://github.com/11ty/eleventy/issues/332#issuecomment-1248185406){target="_blank" rel="external"}. + +#### filters.js (again) + +finally, in my `filters.js` file, I add the `tagPagination` tag to the tags that get filtered using `filterTagList`: + +```js +eleventyConfig.addFilter("filterTagList", function filterTagList(tags) { + return (tags || []).filter(tag => ["all", "posts", "tagPagination"].indexOf(tag) === -1); +}); +``` + +--- + +## tag image preview + +today I tackled making the tag page more visually interesting. + +### preview the first featured image + +first, I worked on previewing the first featured image. The focus here is on digging into `collections[tag]` (reversed!) to get to the data of the first post. + +{% raw %} +```html + +``` +{% endraw %} + +### preview a collage of recent featured images + +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). + +{% raw %} +```html + +``` +{% endraw %} + +with a bit of `display: grid`, we're good to go, right? + +#### handling multiple aspect ratios + +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. + +thankfully, the CSS property `aspect-ratio` makes this pretty straightforward, and `object-fit` finishes the job. + +```css +.taglist-link img { + aspect-ratio: 3 / 2; + object-fit: cover; +} +``` + +(I also set the `missing-img` `
        `s to have the same aspect ratio.) + +--- + +There's the good stuff from [11ty Lessons](https://inherentlee.codeberg.page/lessons/){target="_blank" rel="external"}. Hope you enjoyed.