auto-colored tags for posts
This commit is contained in:
Joshua Seigler
parent
4cd8d22238
commit
04e4b0e51e
17 changed files with 152 additions and 64 deletions
|
|
@ -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>
|
||||
|
|
@ -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
23
site/_includes/components/collectionList.njk
Normal 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}}…</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{% endmacro %}
|
||||
11
site/_includes/components/tagList.njk
Normal file
11
site/_includes/components/tagList.njk
Normal 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 %}
|
||||
|
|
@ -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: "-";
|
||||
|
|
|
|||
|
|
@ -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}}…</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{{ collectionList(collection, limit=5) }}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
title: What I Use
|
||||
layout: "page.njk"
|
||||
date: 2025-06-10
|
||||
date: 2025-06-20
|
||||
---
|
||||
|
||||
## Hardware
|
||||
- Lenovo LOQ laptop (personal), Framework laptop (work).
|
||||
|
||||
- Google Pixel 8 phone.
|
||||
- Google Pixel 7 phone.
|
||||
|
||||
- Wide IKEA GALANT desk (discontinued).
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ date: 2025-06-10
|
|||
|
||||
- [High-output LED light](https://amzn.to/4kUm2ku) in an [IKEA REGOLIT shade](https://www.ikea.com/us/en/p/regolit-pendant-lamp-shade-white-handmade-70103410/) for mood regulation and for the webcam.
|
||||
|
||||
- [USB microphone with boom](https://amzn.to/4lgbwob).
|
||||
- [USB microphone with boom](https://amzn.to/4lgbwob) but I recently got [a better mic arm](https://amzn.to/4l2wE16).
|
||||
|
||||
- [Sony WH1000XM2 headphones](https://www.sony.com/electronics/support/wireless-headphones-bluetooth-headphones/wh-1000xm2/specifications).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
title: Authority - Consent's Blind Spot
|
||||
description: Authority is the idea that certain people are justified in violating consent. This belief allows people to force others to do what they want with a clear conscience.
|
||||
tags:
|
||||
- opinions
|
||||
- worldview
|
||||
---
|
||||
|
||||
> 2025 disclaimer: I haven't thought through all these ideas in a while, but I probably would change some of this or soften/rephrase it.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
title: 'The Trivium: A Tool for Learning Anything'
|
||||
description: An ancient methodology for learning, which formed the basis of classical education in the Middle Ages and Rennaisance.
|
||||
tags:
|
||||
- learning
|
||||
- how to
|
||||
---
|
||||
|
||||
Information today has become siloed. It's a common belief that little, if any, expertise from one field of knowledge transfers over to other fields. But there is a forgotten tool that anyone can use to confidently approach new subjects and problems: the _Trivium_.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
title: Needs-based communication
|
||||
description: How to connect with others through shared human needs.
|
||||
tags:
|
||||
- communication
|
||||
- how to
|
||||
---
|
||||
|
||||
Needs-based communication (usually called non-violent communication or NVC™) is a way of understanding yourself and others with a unique insight: everyone has their own personal reactions to the world, but people have the same basic needs. We recognize those needs in other people, and that common connection can allow us to communicate clearly when there is conflict.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
---
|
||||
title: Embracing Mysticism
|
||||
description: Society is moving from a materialistic era into a mystical one. I describe my attempt to gain mystical proficiency.
|
||||
tags:
|
||||
- opinions
|
||||
- faith
|
||||
- worldview
|
||||
---
|
||||
|
||||
Logical arguments no longer work. This has been especially visible in the pandemic response in 2020. If you dug even a little below the surface of any mainstream narrative in the past two years, you likely found points of disagreement. But showing people scientific papers, charts, statistical analysis, or other types of evidence accomplishes nothing, or worse it invites accusations of being part of the Other Team, one of those backwards, wrong, stupid people.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
title: Finally, a Coherent Worldview
|
||||
description: Why did I think I could figure everything out on my own?
|
||||
tags:
|
||||
- faith
|
||||
- worldview
|
||||
---
|
||||
|
||||
Around the time of my previous post, I had just been received into the Orthodox church. Since then I have found it to be everything I was looking for, and a great deal more. There is such a wealth of wisdom, going back thousands of years. And it was all there, un-seen, un-read, as far as I was concerned not existing at all! It seems impossible to me that I was so unaware of these treasures by chance.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
---
|
||||
title: Site design updated
|
||||
description: New look, simpler tech.
|
||||
tags:
|
||||
- this site
|
||||
---
|
||||
|
||||
New design! The tools I used before have a lot of unmaintained or outdated dependencies and I wanted something a little simpler. The new site uses [pnpm](https://pnpm.io/), [11ty](https://www.11ty.dev/), and [Nunjucks](https://mozilla.github.io/nunjucks/). Content is still in [markdown](https://daringfireball.net/projects/markdown/).
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ title: Thinking machines
|
|||
slug: thinking-machines
|
||||
description: "The computers will start thinking, and people will stop."
|
||||
cover: "/2025-04-24--computers-will-start-thinking.jpg"
|
||||
tags:
|
||||
- opinions
|
||||
- trends
|
||||
- ai
|
||||
---
|
||||
|
||||
There's an exchange early in the classic '80s movie [TRON](https://www.themoviedb.org/movie/97-tron). Some scientists are talking shop:
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
title: Tools of the trade
|
||||
slug: tools-of-the-trade
|
||||
description: Some dev tools I recommend.
|
||||
tags:
|
||||
- technical
|
||||
- software
|
||||
- opinions
|
||||
---
|
||||
|
||||
Everyone has different tools that they find especially effective. Here are some I have found with a few words about why I like them.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
title: My Very Own GitHub Pages
|
||||
slug: my-very-own-github-pages
|
||||
description: How to self-host Forgejo and automatically serve your web build branches with SSL.
|
||||
tags:
|
||||
- how to
|
||||
- technical
|
||||
- selfhosting
|
||||
---
|
||||
|
||||
I recently started self-hosting [Forgejo](https://forgejo.org/), but I wanted something to replace GitHub pages, which has been very convenient for publishing little website projects. My server runs Debian, so I decided to use [webhook](https://github.com/adnanh/webhook) and [Caddy](https://caddyserver.com/). I'm very happy how it turned out.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue