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

tag pages are structured out, most formatting is in place

Browse Source
This commit is contained in:
Lee Cattarin
2026-02-19 07:44:29 -08:00
parent f2face01a7
commit 1913d9c46e
22 changed files with 211 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
_includes/head-content.njk
View File

@ -1,29 +0,0 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
{# <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"> #}
<meta property="og:title" content="{{ title or metadata.title }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="{{ description or metadata.description }}" />
<meta property="og:site_name" content="{{ metadata.title }}" />
<meta name="generator" content="{{ eleventy.generator }}">
{# Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
{# Icons #}
<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
{# Styles #}
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/nav.css">
<link rel="stylesheet" href="/assets/css/highlighting.css">
<link rel="stylesheet" href="/assets/css/print.css">
<link rel="stylesheet" href="/assets/css/postlist.css">
<link rel="stylesheet" href="/assets/css/post.css">

13
_includes/layouts/base-no-anchors.njk
View File

@ -1,13 +0,0 @@
<!doctype html>
<head>
{% include "head-content.njk" %}
</head>
<body>
{% include "header.njk" %}
<main id="main">
{{ content | safe }}
</main>
{% include "footer.njk" %}
<body>

37
_includes/layouts/base.njk
View File

@ -1,12 +1,47 @@
<!doctype html> <!doctype html>
<head> <head>
{% include "head-content.njk" %} <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
{# <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"> #}
<meta property="og:title" content="{{ title or metadata.title }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="{{ description or metadata.description }}" />
<meta property="og:site_name" content="{{ metadata.title }}" />
<meta name="generator" content="{{ eleventy.generator }}">
{# Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
{# Icons #}
<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
{# Styles #}
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/nav.css">
<link rel="stylesheet" href="/assets/css/highlighting.css">
<link rel="stylesheet" href="/assets/css/print.css">
<link rel="stylesheet" href="/assets/css/postlist.css">
<link rel="stylesheet" href="/assets/css/post.css">
{# Heading anchors #}
<script type="module">{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}</script>
</head> </head>
<body> <body>
{% include "header.njk" %} {% include "header.njk" %}
<main id="main"> <main id="main">
<heading-anchors>
{{ content | safe }} {{ content | safe }}
<hr>
</heading-anchors>
</main> </main>
{% include "footer.njk" %} {% include "footer.njk" %}

20
_includes/pagination.njk Normal file
View File

@ -0,0 +1,20 @@
{% if olderHref or newerHref %}
<nav aria-label="pagination">
<ol class="pagination">
{% if olderHref %}
<li class="older">
<a href="{{ olderHref }}">
<i class="fa-solid fa-hand-point-left"></i> older
</a>
</li>
{% endif %}
{% if newerHref %}
<li class="newer">
<a href="{{ newerHref }}">
newer <i class="fa-solid fa-hand-point-right"></i>
</a>
</li>
{% endif %}
</ol>
</nav>
{% endif %}

2
_includes/postlist.njk
View File

@ -14,4 +14,4 @@
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
<ol> </ol>

66
css/nav.css
View File

@ -8,8 +8,9 @@ header {
z-index: 10; z-index: 10;
} }
/* Header links */ /* Header links, pagination links */
header a { header a,
.pagination a {
border-radius: 1rem; border-radius: 1rem;
border: .125rem solid var(--color-pink); border: .125rem solid var(--color-pink);
color: var(--color-pink); color: var(--color-pink);
@ -17,7 +18,6 @@ header a {
padding: 0 .25rem; padding: 0 .25rem;
box-shadow: .15rem .15rem var(--color-shadow); box-shadow: .15rem .15rem var(--color-shadow);
font-size: 1.2rem; font-size: 1.2rem;
padding-right: .35rem;
/* Click animation handling */ /* Click animation handling */
position: relative; position: relative;
top: 0; top: 0;
@ -25,7 +25,17 @@ header a {
transition: top .05s ease-in, left .05s ease-in; transition: top .05s ease-in, left .05s ease-in;
} }
header a:focus-visible { header a,
.pagination .older a {
padding-right: .35rem;
}
.pagination .newer a {
padding-left: .35rem;
}
header a:focus-visible,
.pagination a:focus-visible {
color: var(--color-bg); color: var(--color-bg);
border-color: var(--color-pink); border-color: var(--color-pink);
background-color: var(--color-pink); background-color: var(--color-pink);
@ -33,7 +43,8 @@ header a:focus-visible {
} }
@media (any-hover: hover) { @media (any-hover: hover) {
header a:hover { header a:hover,
.pagination a:hover {
color: var(--color-bg); color: var(--color-bg);
border-color: var(--color-pink); border-color: var(--color-pink);
background-color: var(--color-pink); background-color: var(--color-pink);
@ -41,13 +52,15 @@ header a:focus-visible {
} }
@media (forced-colors: active) { @media (forced-colors: active) {
.site-header a:focus-visible { header a:focus-visible,
.pagination a:focus-visible {
outline-offset: .125rem; outline-offset: .125rem;
outline: .125rem solid; outline: .125rem solid;
} }
@media (any-hover: hover) { @media (any-hover: hover) {
.site-header a:hover { header a:hover,
.pagination a:hover {
outline-offset: .125rem; outline-offset: .125rem;
outline: .125rem solid; outline: .125rem solid;
} }
@ -55,7 +68,8 @@ header a:focus-visible {
} }
/* Click animation */ /* Click animation */
header a:active { header a:active,
.pagination a:active {
top: .1rem; top: .1rem;
left: .1rem; left: .1rem;
box-shadow: .05rem .05rem var(--color-shadow); box-shadow: .05rem .05rem var(--color-shadow);
@ -81,9 +95,13 @@ header a[aria-current="page"]:focus-visible {
} }
} }
/* Header link icons */ /* Header link icons, pagination icons */
header i { header i,
.pagination i {
color: var(--color-teal); color: var(--color-teal);
}
header i {
padding-left: .25rem; padding-left: .25rem;
} }
@ -92,13 +110,15 @@ header a[aria-current="page"] i {
} }
header a:focus-visible i, header a:focus-visible i,
a[aria-current="page"] a:focus-visible i { a[aria-current="page"] a:focus-visible i,
.pagination a:focus-visible :in-range {
color: var(--color-bg); color: var(--color-bg);
} }
@media (any-hover: hover) { @media (any-hover: hover) {
header a:hover i, header a:hover i,
header a[aria-current="page"]:hover i { header a[aria-current="page"]:hover i,
.pagination a:hover i {
color: var(--color-bg); color: var(--color-bg);
} }
} }
@ -194,3 +214,25 @@ footer a {
footer a:focus-visible { footer a:focus-visible {
outline-color: var(--color-pink); outline-color: var(--color-pink);
} }
/* Pagination */
.pagination {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "older newer";
list-style: none;
}
.pagination,
.pagination li {
margin: 0;
}
.pagination .older {
grid-area: older;
}
.pagination .newer {
grid-area: newer;
text-align: right;
}

4
eleventy.config.js
View File

@ -15,13 +15,16 @@ export default async function(eleventyConfig) {
/* Tag pagination */ /* Tag pagination */
eleventyConfig.addCollection("tagPagination", function(collection) { eleventyConfig.addCollection("tagPagination", function(collection) {
let tagSet = new Set(collection.getAllSorted().flatMap((post) => post.data.tags || [])); let tagSet = new Set(collection.getAllSorted().flatMap((post) => post.data.tags || []));
tagSet = tagSet.difference(new Set(["posts", "gallery", "reference"]));
let paginationSize = 13; let paginationSize = 13;
let tagMap = []; let tagMap = [];
let tagArray = [...tagSet]; let tagArray = [...tagSet];
for( let tagName of tagArray) { for( let tagName of tagArray) {
let tagItems = collection.getFilteredByTag(tagName); let tagItems = collection.getFilteredByTag(tagName);
let pagedItems = chunk(tagItems.reverse(), paginationSize); // console.log( tagName, tagItems.length, pagedItems.length ); let pagedItems = chunk(tagItems.reverse(), paginationSize); // console.log( tagName, tagItems.length, pagedItems.length );
for( let pageNumber = 0, max = pagedItems.length; pageNumber < max; pageNumber++) { for( let pageNumber = 0, max = pagedItems.length; pageNumber < max; pageNumber++) {
tagMap.push({ tagMap.push({
tagName: tagName, tagName: tagName,
@ -32,7 +35,6 @@ export default async function(eleventyConfig) {
} }
} }
//console.log( tagMap );
return tagMap; return tagMap;
}); });

8
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@11ty/eleventy-plugin-rss": "^2.0.4", "@11ty/eleventy-plugin-rss": "^2.0.4",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"@mdit/plugin-attrs": "^0.24.2", "@mdit/plugin-attrs": "^0.24.2",
"@zachleat/heading-anchors": "^1.0.5",
"lodash-es": "^4.17.23", "lodash-es": "^4.17.23",
"luxon": "^3.7.2" "luxon": "^3.7.2"
} }
@ -796,6 +797,13 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@zachleat/heading-anchors": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@zachleat/heading-anchors/-/heading-anchors-1.0.5.tgz",
"integrity": "sha512-hsAljmm6py9VEf6ToKGyQJweemQJM4bI75TTTbwRYIrasCm66ajJDhWYpgZJM1B+8KSop371RDhDASYl3Q4y9g==",
"dev": true,
"license": "MIT"
},
"node_modules/a-sync-waterfall": { "node_modules/a-sync-waterfall": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",

1
package.json
View File

@ -17,6 +17,7 @@
"@11ty/eleventy-plugin-rss": "^2.0.4", "@11ty/eleventy-plugin-rss": "^2.0.4",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"@mdit/plugin-attrs": "^0.24.2", "@mdit/plugin-attrs": "^0.24.2",
"@zachleat/heading-anchors": "^1.0.5",
"lodash-es": "^4.17.23", "lodash-es": "^4.17.23",
"luxon": "^3.7.2" "luxon": "^3.7.2"
} }

5
src/index.njk
View File

@ -12,3 +12,8 @@ title: home
layout: page.njk layout: page.njk
--- ---
{% include "postlist.njk" %} {% include "postlist.njk" %}
{# idk why these are backwards either #}
{% set newerHref = pagination.href.previous %}
{% set olderHref = pagination.href.next %}
{% include "pagination.njk" %}

26
src/meta/feed.xml
View File

@ -1,26 +0,0 @@
---
permalink: feed.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="{{ metadata.language or page.lang }}">
<title>{{ metadata.title }}</title>
<subtitle>{{ metadata.description }}</subtitle>
<link href="{{ permalink | htmlBaseUrl(metadata.base) }}" rel="self" />
<link href="{{ metadata.base | addPathPrefixToFullUrl }}" />
<updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
<id>{{ metadata.base | addPathPrefixToFullUrl }}</id>
<author>
<name>{{ metadata.author.name }}</name>
</author>
{%- for post in collections.posts | reverse %}
{%- set absolutePostUrl %}{{ post.url | htmlBaseUrl(metadata.base) }}{% endset %}
<entry>
<title>{{ post.data.title }}</title>
<link href="{{ absolutePostUrl }}" />
<updated>{{ post.date | dateToRfc3339 }}</updated>
<id>{{ absolutePostUrl }}</id>
<content type="html">{{ post.content | renderTransforms(post.data.page, metadata.base) }}</content>
</entry>
{%- endfor %}
</feed>

0
src/meta/sitemap.xml → src/meta/sitemap.xml.njk
View File

22
src/meta/tag-pages.njk Normal file
View File

@ -0,0 +1,22 @@
---
layout: page.njk
pagination:
data: collections.tagPagination
size: 1
alias: tag
eleventyComputed:
permalink: /tag/{{ tag.tagName | slugify }}/{% if tag.pageNumber %}{{ tag.pageNumber + 1 }}/{% endif %}
title: "tag: {{ 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" %}

5
src/pages/gallery.njk
View File

@ -14,3 +14,8 @@ label: view the gallery
<p>the gallery page is for finished art</p> <p>the gallery page is for finished art</p>
{% include "postlist.njk" %} {% include "postlist.njk" %}
{# idk why these are backwards either #}
{% set newerHref = pagination.href.previous %}
{% set olderHref = pagination.href.next %}
{% include "pagination.njk" %}

5
src/pages/reference.njk
View File

@ -14,3 +14,8 @@ label: read reference posts
<p>the reference page is for informational posts</p> <p>the reference page is for informational posts</p>
{% include "postlist.njk" %} {% include "postlist.njk" %}
{# idk why these are backwards either #}
{% set newerHref = pagination.href.previous %}
{% set olderHref = pagination.href.next %}
{% include "pagination.njk" %}

24
src/pages/tag-pages.njk
View File

@ -1,24 +0,0 @@
---
pagination:
data: collections.doublePagination
size: 1
alias: tag
eleventyComputed:
permalink: /tag/{{ tag.tagName | slugify }}/{% if tag.pageNumber %}{{ tag.pageNumber + 1 }}/{% endif %}
title: "Posts tagged {{ tag.tagName }}"
---
{% set postlist = tag.pageData %}
{% include "postlist.njk" %}
{% if tag.pageNumber > 0 or tag.pageNumber < tag.pageSize - 1 %}
<nav aria-label="pagination">
<ol class="pagination">
{% if tag.pageNumber > 0 %}
<li class="prev"><a href="{{ pagination.href.previous }}"><< Previous</a></li>
{% endif %}
{% if tag.pageNumber < tag.pageSize - 1 %}
<li class="next"><a href="{{ pagination.href.next }}">Next >></a></li>
{% endif %}
</ol>
</nav>
{% endif %}

0
src/pages/tags.njk Normal file
View File

3
src/posts/2026/2026-02-17-sample.md
View File

@ -1,8 +1,9 @@
--- ---
title: Sample title: Sample 0
date: 2026-02-17 date: 2026-02-17
tags: tags:
- gallery - gallery
- test
image: image:
src: 2026/sample-0.jpg src: 2026/sample-0.jpg
alt: filler alt: filler

12
src/posts/2026/sample-1.md Normal file
View File

@ -0,0 +1,12 @@
---
title: Sample 1
date: 2026-02-18
tags:
- gallery
- test
image:
src: 2026/sample-0.jpg
alt: filler
---

12
src/posts/2026/sample-2.md Normal file
View File

@ -0,0 +1,12 @@
---
title: Sample 2
date: 2026-02-19
tags:
- gallery
- test
image:
src: 2026/sample-0.jpg
alt: filler
---

12
src/posts/2026/sample-3.md Normal file
View File

@ -0,0 +1,12 @@
---
title: Sample 3
date: 2026-02-20
tags:
- gallery
- test
image:
src: 2026/sample-0.jpg
alt: filler
---

12
src/posts/2026/sample-4.md Normal file
View File

@ -0,0 +1,12 @@
---
title: Sample 4
date: 2026-02-21
tags:
- gallery
- test
image:
src: 2026/sample-0.jpg
alt: filler
---