@lullabot/eleventy-decision-records 1.0.0

package/src/assets/styles/search-dialog.css

@@ -0,0 +1,196 @@
+/* ==========================================================================
+   Search Dialog
+   ========================================================================== */
+
+@scope (#search-dialog) {
+  :scope {
+    width: min(800px, 90vw);
+    margin-top: 10vh;
+    margin-bottom: auto;
+    padding: 0;
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-primary);
+    box-shadow: var(--shadow-panel);
+    font-family: var(--font-family-base);
+    color: var(--color-text-primary);
+    interpolate-size: allow-keywords;
+    transition: height 0.3s ease;
+  }
+
+  :scope::backdrop {
+    background-color: rgba(1, 7, 11, 0.6);
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border-default);
+  }
+
+  h2 {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+  }
+
+  form button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+
+  form button:hover,
+  form button:focus-visible {
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-primary);
+  }
+
+  form button svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  input[type='search'] {
+    display: block;
+    width: 100%;
+    padding: var(--space-6) var(--space-8);
+    border: none;
+    background: transparent;
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-md);
+    color: var(--color-text-primary);
+    outline: none;
+  }
+
+  input[type='search']::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .results-summary {
+    padding: 0 var(--space-8) var(--space-3);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-sm);
+    color: var(--color-text-muted);
+  }
+
+  .results-summary:empty {
+    display: none;
+  }
+
+  /* Results list */
+  ol {
+    max-height: 50vh;
+    overflow-y: auto;
+    border-top: 1px solid var(--color-border-default);
+  }
+
+  ol:empty {
+    max-height: 0;
+    border-top: none;
+  }
+
+  li {
+    padding: var(--space-4) var(--space-8);
+    margin: 0;
+    border-bottom: 1px solid var(--color-border-default);
+    animation: fade-in 0.25s ease both;
+    transition: background-color 0.15s ease;
+  }
+
+  li:hover {
+    background-color: var(--color-bg-secondary);
+  }
+
+  li:has(a:focus-visible) {
+    background-color: var(--color-bg-secondary);
+    outline: 2px solid var(--color-link);
+    outline-offset: -2px;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      translate: 0 4px;
+    }
+  }
+
+  li h3 {
+    margin-block: 0;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+
+  li a {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-base);
+    color: var(--color-link);
+    text-decoration: none;
+  }
+
+  li a:hover {
+    text-decoration: underline;
+  }
+
+  li a:focus-visible {
+    text-decoration: underline;
+    outline: none;
+  }
+
+  .snippet {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    color: var(--color-text-secondary);
+    margin-top: var(--space-1);
+  }
+
+  mark {
+    background-color: var(--gold-200);
+    color: inherit;
+    border-radius: var(--radius-sm);
+    padding-inline: 2px;
+  }
+
+  article > footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1) var(--space-3);
+    margin-top: var(--space-2);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-sm);
+    color: var(--color-text-tertiary);
+  }
+
+  .status {
+    text-transform: capitalize;
+  }
+
+  .tags span {
+    padding: var(--space-1) var(--space-2);
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+  }
+
+  .age::before {
+    content: '\00b7';
+    margin-right: var(--space-3);
+  }
+}

package/src/assets/styles/tags.css

@@ -0,0 +1,16 @@
+/* Prism also marks up HTML tags in code blocks as .token.tag. */
+.tag:not(.token) {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1) var(--space-2);
+  background-color: var(--color-bg-secondary);
+  border-left: 1px solid var(--color-border-default);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  box-shadow: var(--shadow-subtle);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}

package/src/assets/styles/tokens.css

@@ -0,0 +1,181 @@
+/* ==========================================================================
+   Design Tokens
+   Extracted from Figma: Architecture.Lullabot.com
+   ========================================================================== */
+
+:root {
+  /* ---------------------------------------------------------------------------
+     Colors
+     --------------------------------------------------------------------------- */
+
+  /* Red */
+  --red-1000: #a51400;
+  --red-900: #cf1900;
+  --red-800: #f81e00;
+  --red-700: #f9442b;
+  --red-600: #fa6955;
+  --red-500: #fb8e80;
+  --red-400: #fdb4aa;
+  --red-300: #fed2cc;
+  --red-200: #fee0dc;
+  --red-100: #fee9e6;
+
+  /* Gray (Figma "Black" scale) */
+  --gray-1000: #01070b;
+  --gray-900: #171d21;
+  --gray-800: #272f35;
+  --gray-700: #323c43;
+  --gray-600: #434e56;
+  --gray-500: #5d686f;
+  --gray-400: #75818a;
+  --gray-300: #909ba2;
+  --gray-200: #b1b9be;
+  --gray-100: #d6d9dc;
+  --gray-50: #f4f5f6;
+  --gray-0: #fff;
+
+  /* Sky */
+  --sky-999: #046595;
+  --sky-900: #0974aa;
+  --sky-800: #1d8fc9;
+  --sky-700: #38a5dc;
+  --sky-600: #4eb6eb;
+  --sky-500: #6bc3ef;
+  --sky-400: #86d0f5;
+  --sky-300: #a2dcf9;
+  --sky-200: #bfe8fd;
+  --sky-100: #d8f2ff;
+
+  /* Ocean */
+  --ocean-1000: #12212b;
+  --ocean-950: #1b303f;
+  --ocean-900: #20394b;
+  --ocean-800: #445a6a;
+  --ocean-700: #5e798d;
+  --ocean-600: #869eae;
+  --ocean-500: #aebec9;
+  --ocean-400: #c7d3db;
+  --ocean-300: #d7dfe5;
+  --ocean-200: #e0e6eb;
+  --ocean-100: #edf0f2;
+  --ocean-50: #f9fafb;
+
+  /* Gold */
+  --gold-800: #fac12e;
+  --gold-700: #ffcc47;
+  --gold-600: #ffd25d;
+  --gold-500: #ffdc80;
+  --gold-400: #ffe399;
+  --gold-300: #ffebb8;
+  --gold-200: #fff1cc;
+  --gold-100: #fff6df;
+
+  /* ---------------------------------------------------------------------------
+     Semantic Color Aliases
+     --------------------------------------------------------------------------- */
+  --color-brand-primary: var(--red-800);
+  --color-brand-primary-dark: var(--red-900);
+  --color-text-primary: var(--gray-1000);
+  --color-text-secondary: var(--gray-700);
+  --color-text-tertiary: var(--gray-600);
+  --color-text-muted: var(--gray-500);
+  --color-text-inverse: var(--gray-0);
+  --color-bg-primary: var(--gray-0);
+  --color-bg-secondary: var(--gray-50);
+  --color-bg-dark: var(--gray-1000);
+  --color-bg-dark-secondary: var(--gray-800);
+  --color-border-default: var(--gray-100);
+  --color-border-dark: var(--gray-800);
+  --color-link: var(--sky-999);
+
+  /* ---------------------------------------------------------------------------
+     Typography — Font Family
+     --------------------------------------------------------------------------- */
+  --font-family-base: 'Gabarito', verdana, sans-serif;
+  --font-family-mono:
+    ui-monospace, 'SFMono-Regular', 'Cascadia Code', menlo, consolas, monospace;
+
+  /* ---------------------------------------------------------------------------
+     Typography — Font Weights
+     Figma uses CircularXX (Book 450 / Medium 500 / Bold 700).
+     Gabarito maps to: Regular 400 / Medium 500 / Bold 700.
+     --------------------------------------------------------------------------- */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  /* ---------------------------------------------------------------------------
+     Typography — Font Sizes
+     --------------------------------------------------------------------------- */
+  --font-size-xs: 0.625rem; /* 10px — count badges */
+  --font-size-sm: 0.75rem; /* 12px */
+  --font-size-base: 0.875rem; /* 14px — labels, info */
+  --font-size-md: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px — body md, heading 2xs, info md */
+  --font-size-xl: 1.25rem; /* 20px — heading xs */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 2rem; /* 32px */
+  --font-size-4xl: 3rem; /* 48px — heading xl */
+
+  /* ---------------------------------------------------------------------------
+     Typography — Line Heights
+     --------------------------------------------------------------------------- */
+  --line-height-xs: 0.75rem; /* 12px */
+  --line-height-sm: 1rem; /* 16px */
+  --line-height-base: 1.5rem; /* 24px */
+  --line-height-md: 2rem; /* 32px */
+  --line-height-lg: 2.5rem; /* 40px */
+  --line-height-xl: 3.5rem; /* 56px */
+
+  /* ---------------------------------------------------------------------------
+     Typography — Letter Spacing
+     --------------------------------------------------------------------------- */
+  --letter-spacing-tight: -0.02em; /* headings xl */
+  --letter-spacing-normal: 0;
+  --letter-spacing-sm: 0.01em; /* info sm, body */
+  --letter-spacing-wide: 0.1em; /* labels, eyebrows */
+
+  /* ---------------------------------------------------------------------------
+     Spacing
+     --------------------------------------------------------------------------- */
+  --space-1: 0.25rem; /* 4px */
+  --space-2: 0.5rem; /* 8px */
+  --space-3: 0.75rem; /* 12px */
+  --space-4: 1rem; /* 16px */
+  --space-5: 1.25rem; /* 20px */
+  --space-6: 1.5rem; /* 24px */
+  --space-8: 2rem; /* 32px */
+  --space-10: 2.5rem; /* 40px */
+  --space-12: 3rem; /* 48px */
+  --space-16: 4rem; /* 64px */
+  --space-18: 4.5rem; /* 72px */
+  --space-22: 5.5rem; /* 88px */
+
+  /* ---------------------------------------------------------------------------
+     Border Radius
+     --------------------------------------------------------------------------- */
+  --radius-sm: 2px;
+  --radius-md: 6px;
+  --radius-lg: 12px;
+
+  /* ---------------------------------------------------------------------------
+     Border Widths
+     --------------------------------------------------------------------------- */
+  --border-width-default: 1px;
+  --border-width-medium: 1.5px;
+  --border-width-thick: 4px;
+
+  /* ---------------------------------------------------------------------------
+     Shadows
+     --------------------------------------------------------------------------- */
+  --shadow-subtle: 0px 2px 2px 0px rgba(0, 0, 0, 0.02);
+  --shadow-panel:
+    0px 0px 48px 0px rgba(0, 0, 0, 0.04), 0px 0px 16px 0px rgba(0, 0, 0, 0.02);
+  --shadow-icon: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+
+  /* ---------------------------------------------------------------------------
+     Layout
+     --------------------------------------------------------------------------- */
+  --sidebar-width-collapsed: 56px;
+  --decisions-list-width: 400px;
+}

package/src/assets/styles/typography.css

@@ -0,0 +1,182 @@
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+:root {
+  font-family: var(--font-family-base);
+  text-rendering: optimizeLegibility;
+  font-size: 16px;
+}
+
+/* Headings */
+:where(h1) {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-4xl);
+  line-height: var(--line-height-xl);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+:where(h2) {
+  font-weight: var(--font-weight-bold);
+  font-size: 2.5rem;
+  line-height: 3rem;
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+:where(h3) {
+  font-weight: var(--font-weight-bold);
+  font-size: 2rem;
+  line-height: 2.5rem;
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+:where(h4) {
+  font-weight: var(--font-weight-bold);
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+:where(h5) {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-xl);
+  line-height: var(--line-height-base);
+}
+
+:where(h6) {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-base);
+}
+
+/* Body text */
+body {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-md);
+}
+
+/* Links */
+:where(a) {
+  color: var(--color-text-primary);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--color-brand-primary-dark);
+}
+
+/* Block spacing */
+:where(h2, h3, h4, h5, h6) {
+  margin-top: var(--space-10);
+  margin-bottom: var(--space-4);
+}
+
+:where(p) {
+  margin-bottom: var(--space-4);
+}
+
+:where(.site-main ul, .site-main ol) {
+  margin-bottom: var(--space-4);
+  padding-left: var(--space-6);
+}
+
+:where(li + li) {
+  margin-top: var(--space-2);
+}
+
+/* Strong / emphasis */
+:where(strong, b) {
+  font-weight: var(--font-weight-bold);
+}
+
+:where(em, i) {
+  font-style: italic;
+}
+
+/* Code and keyboard input */
+:where(code, kbd, samp) {
+  font-family: var(--font-family-mono);
+  font-size: 0.875em;
+}
+
+:where(:not(pre) > code) {
+  padding: 0.1em 0.35em;
+  background-color: var(--color-bg-secondary);
+  border: var(--border-width-default) solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  overflow-wrap: anywhere;
+}
+
+:where(kbd) {
+  padding: 0.1em 0.4em;
+  background-color: var(--color-bg-primary);
+  border: var(--border-width-default) solid var(--gray-200);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* Other inline semantics */
+:where(var, cite, dfn) {
+  font-style: italic;
+}
+
+:where(mark) {
+  padding-inline: 0.15em;
+  background-color: var(--gold-300);
+  color: inherit;
+}
+
+:where(s, del) {
+  text-decoration: line-through;
+}
+
+:where(u, ins) {
+  text-decoration: underline;
+}
+
+:where(ins) {
+  text-decoration-color: var(--color-link);
+}
+
+:where(abbr[title]) {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+:where(small) {
+  font-size: var(--font-size-base);
+}
+
+:where(sub, sup) {
+  font-size: 0.75em;
+  line-height: 0;
+  position: relative;
+}
+
+:where(sub) {
+  bottom: -0.25em;
+}
+
+:where(sup) {
+  top: -0.5em;
+}
+
+/* Quotes and rules */
+:where(blockquote) {
+  margin-block: 0 var(--space-4);
+  padding: var(--space-2) var(--space-5);
+  border-left: var(--border-width-thick) solid var(--color-brand-primary);
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+}
+
+:where(blockquote > :last-child) {
+  margin-bottom: 0;
+}
+
+:where(hr) {
+  display: block;
+  margin-block: var(--space-10);
+  border-top: var(--border-width-default) solid var(--color-border-default);
+}

package/src/assets/styles/view-transitions.css

@@ -0,0 +1,67 @@
+/* ==========================================================================
+   Cross-Document View Transitions (MPA)
+   ========================================================================== */
+
+/* View transition opt-in is via <meta name="view-transition"> in page.njk
+   because lightningcss strips the @view-transition at-rule. */
+
+/* Persistent elements get named transitions so they morph in place */
+.site-nav {
+  view-transition-name: site-nav;
+}
+
+.site-main {
+  view-transition-name: main-content;
+}
+
+.recent-decisions {
+  view-transition-name: recent-decisions;
+}
+
+/* Main content: true fade-out-then-in (not a crossfade) */
+::view-transition-group(main-content) {
+  animation-duration: 0.3s;
+}
+
+::view-transition-old(main-content) {
+  animation: 0.15s ease-out both vt-fade-out;
+}
+
+::view-transition-new(main-content) {
+  animation: 0.15s ease-in 0.15s both vt-fade-in;
+}
+
+/* Keep nav and sidebar stable (no animation) */
+::view-transition-old(site-nav),
+::view-transition-new(site-nav),
+::view-transition-old(recent-decisions),
+::view-transition-new(recent-decisions) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+@keyframes vt-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vt-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Respect user motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(main-content),
+  ::view-transition-new(main-content) {
+    animation-duration: 0.01s;
+  }
+}

package/src/config.js

@@ -0,0 +1,38 @@
+import { Merge } from '@11ty/eleventy-utils';
+import defaultConfig from './defaultConfig.json' with { type: 'json' };
+
+const RESOLVED = Symbol.for('eleventy-decision-records.config.resolved');
+
+/**
+ * Rewrites `{decisions}` in navigation URLs to the configured decisions
+ * directory, so moving the records with `dirs.decisions` also moves the
+ * links pointing at them. Projects writing their own navigation can use
+ * the same token or hardcode a path.
+ */
+function resolveNavigationTokens(config) {
+  for (const group of Object.values(config.navigation ?? {})) {
+    for (const item of group) {
+      if (typeof item.url === 'string') {
+        item.url = item.url.replace('{decisions}', config.dirs.decisions);
+      }
+    }
+  }
+}
+
+/**
+ * Merges a partial project config over the theme defaults. Merge semantics
+ * come from @11ty/eleventy-utils: objects merge deep, arrays concatenate,
+ * and an `override:` key prefix replaces instead of merging.
+ *
+ * Safe to call on an already-resolved config (returns it unchanged), so the
+ * plugin can accept either raw options or the result of this function.
+ */
+export default function themeConfig(config = {}) {
+  if (config[RESOLVED]) {
+    return config;
+  }
+  const resolved = Merge(structuredClone(defaultConfig), config);
+  resolveNavigationTokens(resolved);
+  Object.defineProperty(resolved, RESOLVED, { value: true });
+  return resolved;
+}