PreStyling Layouts & Components

2026-09-24 09:58:25 +02:00
parent fc38a1aafe
commit 356ccedc01
39 changed files with 1212 additions and 96 deletions
--- a/src/components/post/Header/Meta.astro
+++ b/src/components/post/Header/Meta.astro
@@ -0,0 +1,117 @@
+---
+import { toMilitaryDTG } from '@/lib/content/dates'
+import { getSite } from '@/lib/site'
+import type { Article } from '@/lib/site/types'
+
+type Props = {
+  article: Article
+}
+
+const { article } = Astro.props
+const site = await getSite()
+const tags = article.tags.map((id) => site.tags.get(id)).filter((tag) => tag !== undefined)
+const date = article.updated ?? article.published
+const label = article.updated ? 'Updated' : 'Published'
+const machine = date?.toISOString()
+const display = date && toMilitaryDTG(date)
+---
+
+<dl class="meta">
+  <div class="section">
+    <dt class="label">Author</dt>
+    <dd class="item">Dave Damage</dd>
+  </div>
+  {tags.length > 0 && (
+    <div class="section">
+      <dt class="label">Tags</dt>
+      <dd>
+        <ul class="tags">
+          {tags.map((tag) => (
+            <li class="tag">
+              <a href={tag.path} rel="tag">
+                {tag.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </dd>
+    </div>
+  )}
+  {display && (
+    <div class="section">
+      <dt class="label">{label}</dt>
+      <dd>
+        <time class="item" datetime={machine}>
+          {display}
+        </time>
+      </dd>
+    </div>
+  )}
+</dl>
+
+<style>
+  .meta {
+    @mixin layout-wrapper;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-8);
+    align-items: baseline;
+  }
+
+  .section {
+    @mixin py var(--size-4);
+
+    flex: 1 0 auto;
+    min-width: 12ch;
+  }
+
+  .item {
+    font-family: var(--font-mono);
+    font-size: var(--type-0);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking--3);
+  }
+
+  .label {
+    @mixin mb var(--size-2);
+    @mixin pb var(--size-2);
+    @mixin border-b 2px, solid, var(--color-border-strong);
+
+    display: block;
+
+    font-family: var(--font-header);
+    font-size: var(--type--2);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: var(--tracking--2);
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-2);
+  }
+
+  .tag a {
+    @mixin py var(--size-1);
+    @mixin px var(--size-3);
+
+    display: block;
+
+    font-family: var(--font-mono);
+    font-size: var(--type--1);
+    color: var(--color-text-inverse);
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: var(--tracking--3);
+
+    background-color: var(--color-surface-inverse);
+  }
+
+  .tag a:hover,
+  .tag a:focus-visible {
+    color: var(--color-surface-inverse);
+    background-color: var(--color-primary);
+  }
+</style>