joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

auto-colored tags for posts

Browse source
This commit is contained in:
Joshua Seigler 2025-06-21 14:45:15 -04:00
parent 4cd8d22238
commit 04e4b0e51e
17 changed files with 152 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

4
site/_includes/-header.njk
View file

@ -1,3 +1,4 @@
{%- from "components/tagList.njk" import tagList with context -%}
<header>
<nav>
<div class="nav-row">
@ -33,5 +34,8 @@
{%- if date and not omitMetadata -%}
<date>{{ date | formatDate("MMMM D, YYYY") }}</date>
{%- endif -%}
{# {%- if tags -%} #}
{{ tagList(tags.slice(1)) }}
{# {%- endif -%} #}
</div>
</header>

16
site/_includes/collection.njk
View file

@ -3,23 +3,13 @@ layout: "base.njk"
eleventyComputed:
title: "{{ page.fileSlug | capitalize }}"
---
{%- from "components/collectionList.njk" import collectionList with context -%}
<main>
<section data-pagefind-body>
{{ content | safe }}
</section>
{% set tag = page.fileSlug %}
{% if collections[tag] %}
<section>
{% for item in collections[tag] | reverse %}
<article class="item-summary">
<a href="{{ item.url }}">{{ item.data.title }}</a>
{% if item.data.date %}
<aside>{{ item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
{% endif %}
<p class="item-summary-description">{{ item.data.description }}</p>
</article>
{% endfor %}
</section>
{{ collectionList(collections[tag]) }}
{% endif %}
</main>
</main>

23
site/_includes/components/collectionList.njk Normal file
View file

@ -0,0 +1,23 @@
{%- from "components/tagList.njk" import tagList with context -%}
{% macro collectionList(collection, limit=0) %}
<ul class="collection">
{%- for item in collection | reverse -%}
{%- if (limit === 0 or loop.index <= limit) -%}
<li>
<a href="{{item.url}}">{{item.data.title}}</a>
{%- if item.data.date -%}
<aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
{%- endif -%}
<aside>{{ tagList(item.data.tags.slice(1)) }}</aside>
<p>{{item.data.description | safe}}</p>
</li>
{%- endif -%}
{%- if (limit !== 0 and loop.index == limit + 1) -%}
<li>
<a href="/{{name}}/">More {{name}}&hellip;</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{% endmacro %}

11
site/_includes/components/tagList.njk Normal file
View file

@ -0,0 +1,11 @@
{% macro tagList(tags) %}
<span class="tags">
{%- for tag in tags -%}
<a
class="tag"
style="--tagIndex:{{ collections.categories[tag].id }}"
href="/posts/tag/{{ tag | slugify }}"
>{{ tag }}</a>
{% endfor -%}
</span>
{% endmacro %}

64
site/_includes/css/site.css
View file

@ -22,7 +22,9 @@ body {
--c-text-light: var(--c-highlight);
--c-text-dark: var(--c-dark);
--c-text-dim: color-mix(in lch, var(--c-text-dark), transparent 30%);
--c-text-dim: color-mix(in lch, var(--c-text-dark), transparent 50%);
--tag-luminance: 0.4;
--ratio: 1.333;
--s-5: calc(var(--s-4) / var(--ratio));
@ -79,6 +81,7 @@ body[data-theme="dark"] {
--c-text-background-light: oklch(45% 0.135 280 / 0.3);
--c-text-light: oklch(94% 0.045 107.2);
--c-text-dark: oklch(94% 0.045 107.2);
--tag-luminance: 0.85;
}
@media (prefers-color-scheme: dark) {
@ -95,6 +98,7 @@ body[data-theme="dark"] {
--c-text-background-light: oklch(45% 0.135 280 / 0.3);
--c-text-light: oklch(94% 0.045 107.2);
--c-text-dark: oklch(94% 0.045 107.2);
--tag-luminance: 0.85;
}
}
@ -153,6 +157,13 @@ nav label:has(input:focus-visible) {
outline: 2px solid var(--c-text-dark);
}
.tag {
&::before {
content: "#";
}
color: oklch(var(--tag-luminance) 0.25 calc(222.5 * var(--tagIndex, 0)) / 0.8);
}
main p img {
max-width: 100%;
}
@ -280,6 +291,16 @@ ul.collection {
padding-left: 0;
> li {
list-style-type: none;
display: grid;
align-items: baseline;
grid-template-columns: auto auto 1fr;
> p {
&::before {
content: none;
}
width: 100%;
grid-column: 1/-1;
}
+ li {
margin-top: 1rem;
}
@ -479,39 +500,38 @@ h4 {
font-weight: 700;
text-shadow: 0 0 0.5em var(--c-highlight);
margin-top: 0;
main > &:nth-child(n + 2) {
margin-top: 1.5rem;
&:nth-child(n + 2) {
margin-top: 2rem;
}
margin-bottom: 0.5rem;
&:hover .header-anchor {
opacity: 1;
}
}
:is(h1, h2, h3)::after {
pointer-events: none;
opacity: 0.5;
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: -4rem;
height: 4em;
width: 30rem;
max-width: 100%;
background: radial-gradient(
ellipse farthest-side at 50% 100%,
var(--c-highlight),
transparent
);
@media screen {
:is(h1, h2, h3)::after {
pointer-events: none;
opacity: 0.5;
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: -4rem;
height: 4em;
width: 30rem;
max-width: 100%;
background: radial-gradient(
ellipse farthest-side at 50% 100%,
var(--c-highlight),
transparent
);
}
}
h1 {
margin-bottom: 0;
}
.header-meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: var(--s-1);
> * + *::before {
content: "-";

20
site/_includes/home.njk
View file

@ -1,29 +1,13 @@
---
layout: "base.njk"
---
{%- from "components/collectionList.njk" import collectionList with context -%}
<main data-pagefind-body>
{{ content | safe }}
{%- for name, collection in collections -%}
{%- if name in ["posts"] -%}
<h2>{{name | capitalize }}</h2>
<ul class="collection">
{%- for item in collection | reverse -%}
{%- if (loop.index <= 5) -%}
<li>
<a href="{{item.url}}">{{item.data.title}}</a>
{%- if item.data.date -%}
<aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
{%- endif -%}
<p>{{item.data.description | safe}}</p>
</li>
{%- endif -%}
{%- if (loop.index == 6) -%}
<li>
<a href="/{{name}}/">More {{name}}&hellip;</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{{ collectionList(collection, limit=5) }}
{%- endif -%}
{%- endfor -%}
</main>