feat: estimated completion date component

content/messaging/roadmap/milestones/2026-nimble-migration.md

@@ -4,10 +4,9 @@ tags:
   - messaging-milestone
 date: 2026-01-15
 github: https://github.com/logos-messaging/pm/milestone/65
+est-completion: Q2 2026
 ---
 
-**Estimated date of completion**: Q2 2026
-
 **Resources Required**:
 - 1 Delivery engineer (intermittent)
 - 1 Chat engineer (intermittent)

quartz.layout.ts

@@ -20,6 +20,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
+    Component.EstimatedCompletion(),
     Component.GithubMilestone(),
   ],
   left: [

quartz/components/EstimatedCompletion.tsx

@@ -0,0 +1,49 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+function EstimatedCompletion({ fileData, displayClass }: QuartzComponentProps) {
+  const estimated = fileData.frontmatter?.["est-completion"]
+  if (!estimated) return null
+
+  return (
+    <div class={`estimated-completion ${displayClass ?? ""}`}>
+      <span class="estimated-completion-badge">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          width="14"
+          height="14"
+          aria-hidden="true"
+        >
+          <path d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0ZM2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25Z" />
+        </svg>
+        Est. completion: {String(estimated)}
+      </span>
+    </div>
+  )
+}
+
+EstimatedCompletion.css = `
+.estimated-completion {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.estimated-completion-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.25rem 0.6rem;
+  border-radius: 6px;
+  border: 1px solid var(--lightgray);
+  color: var(--gray);
+  font-size: 0.85em;
+}
+
+.estimated-completion-badge svg {
+  fill: currentColor;
+  flex-shrink: 0;
+}
+`
+
+export default (() => EstimatedCompletion) satisfies QuartzComponentConstructor

quartz/components/GithubMilestone.tsx

@@ -24,9 +24,9 @@ function GithubMilestone({ fileData, displayClass }: QuartzComponentProps) {
 
 GithubMilestone.css = `
 .github-milestone {
-  margin: 0.5rem 0 1rem;
-  display: flex;
-  justify-content: flex-end;
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 1rem;
 }
 
 .github-milestone-link {

quartz/components/index.ts

@@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import GithubMilestone from "./GithubMilestone"
+import EstimatedCompletion from "./EstimatedCompletion"
 
 export {
   ArticleTitle,
@@ -44,4 +45,5 @@ export {
   NotFound,
   Breadcrumbs,
   GithubMilestone,
+  EstimatedCompletion,
 }