PreStyling Layouts & Components

src/components/post/Header/Overline.astro

@@ -0,0 +1,92 @@
+---
+import { toMilitaryDTG } from '@/lib/content/dates'
+import { trailOf } from '@/lib/site/navigation'
+import type { Article } from '@/lib/site/types'
+
+type Props = {
+  article: Article
+}
+
+const { article } = Astro.props
+
+const trail = trailOf(article)
+---
+
+<div class="overline dark">
+  <div class="wrapper">
+    {trail.length > 1 && (
+      <nav aria-label="Breadcrumb" class="breadcrumbs">
+        <ol>
+          {trail.map((step, index) => (
+            <li>
+              {index === trail.length - 1 ? (
+                <span aria-current="page">{step.title}</span>
+              ) : (
+                <a href={step.path}>{step.title}</a>
+              )}
+            </li>
+          ))}
+        </ol>
+      </nav>
+    )}
+    {article.published ? (
+      <time class="publicationdate" datetime={article.published.toISOString()}>
+        {toMilitaryDTG(article.published)}
+      </time>
+    ) : (
+      <span class="publicationdate">No publication date set</span>
+    )}
+  </div>
+</div>
+
+<style>
+  .overline {
+    font-family: var(--font-mono);
+    font-size: var(--type--1);
+    line-height: 1;
+    color: var(--color-text-secondary);
+    letter-spacing: var(--tracking-0);
+
+    background-color: var(--color-surface-elevated-2);
+  }
+
+  .wrapper {
+    @mixin layout-wrapper;
+    @mixin py var(--size-4);
+
+    display: flex;
+    gap: var(--size-4);
+    align-items: baseline;
+    justify-content: space-between; /* breadcrumbs left, date right */
+  }
+
+  .breadcrumbs {
+    & ol {
+      display: flex;
+      gap: var(--size-2);
+
+      margin: 0;
+      padding: 0;
+
+      list-style: none;
+
+      & li {
+        &:not(:last-child) {
+          &::after {
+            content: '⟫' / '';
+            margin-inline-start: var(--size-2);
+          }
+        }
+      }
+    }
+  }
+
+  .publicationdate {
+    font-weight: 700;
+
+    &::before {
+      content: '⟫' / '';
+      margin-inline-end: var(--size-2);
+    }
+  }
+</style>