case studies styling updates

Author: webstackdev

.vscode/settings.json

@@ -165,6 +165,7 @@
     "keyup",
     "KHTML",
     "Kiali",
+    "Kluwer",
     "kmsplugin",
     "koko",
     "Kpow",
@@ -350,6 +351,7 @@
     "Syft",
     "tanabata",
     "tcpdump",
+    "tegna",
     "Tetris",
     "tflint",
     "tflock",
@@ -412,6 +414,7 @@
     "VNIC",
     "vtbot",
     "WHATWG",
+    "Wolters",
     "wordprocessingml",
     "wscript",
     "xlarge",

_TODO.md

@@ -260,98 +260,3 @@ https://mermaid.js.org/config/directives.html
     at async requestWebmentions (/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/components/WebMentions/server/index.ts:199:20)
     at async eval (/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/components/WebMentions/index.astro:27:18)
 17:15:46 [200] /_vtbot_inspection_chamber.js 1ms
-
-### Snippets
-
-<span class="font-mono">
-</span>
-
-<Highlighter>
-</Highlighter>
-
-<Diagram
-  magnifyButtonPosition="top-left"
-  size="full"
-/>
-
-[&>span]:
-[&>*:first-child]:
-
-<List
-  variant="numbered-with-background-list"
-  classes={{
-    li: "[&>div]:!pt-2 mb-6",
-  }}
-/>
-
-<List
-  startNumber={2}
-  classes={{
-    wrapper: "sm:ml-6 sm:mr-12 mb-6",
-  }}
-/>
-
-<List
-  variant="colored-marker-list"
-  items={[
-    {
-      text: "With trusted service providers who assist in operating our website",
-      color: "bg-blue-600",
-    },
-  ]}
-/>
-
-#### Stretching the badge out to the same size and centering text:
-
-<List
-  variant="badge-list"
-  classes={{
-    titleClass: "block w-full text-center",
-  }}
-
-#### Spacing out the boxes:
-
-<List
-  variant="zebra-list"
-  classes={{
-    ul: "!divide-y-0 !border-0 !overflow-visible !rounded-none space-y-4",
-    li: "!rounded-lg !border border-trim",
-  }}
-/>
-
-<Table
-  fullWidth={false}
-  classes={{
-    figure: "sm:ml-6 sm:mr-12 mb-6",
-  }}
-  classes={{
-    tbody: '!text-content',
-  }}
-/>
-
-<Table
-  variant="numbered-review-table"
-  fullWidth={false}
-  classes={{
-    tbody: "[&_tr>td:nth-of-type(2)]:!font-normal",
-  }}
-
-<Table
-  variant="grid-and-accent-header-table"
-  fullWidth={false}
-  classes={{
-    tbody:
-      '[&_td:nth-child(2)]:text-success [&_td:nth-child(3)]:text-warning [&_td:nth-child(4)]:text-danger',
-  }}
-
-id: ""
-displayName: ""
-industry: ""
-businessType: ""
-workModel: ""
-location: ""
-startDate: ""
-endDate: ""
-website: ""
-linkedinUrl: ""
-published:

src/components/Table/index.astro

@@ -21,12 +21,14 @@ export type Props = {
     }
     tbody: {
       tr: {
+        className?: string
         th?: string | { label: string; color?: string }
         td: Array<string | { label: string; color?: string }>
       }[]
     }
     tfoot?: {
       tr: {
+        className?: string
         th?: string
         td: Array<string | { label: string; color?: string }>
       }[]

src/components/Table/layouts/numbered-review.astro

@@ -8,12 +8,14 @@ export type Props = {
     }
     tbody: {
       tr: {
+        className?: string
         th?: string | { label: string; color?: string }
         td: string[]
       }[]
     }
     tfoot?: {
       tr: {
+        className?: string
         th?: string
         td: string[]
       }[]
@@ -53,7 +55,7 @@ const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b b
     {content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          <th class="w-14 px-3 py-3 font-semibold text-content-active">#</th>
+          <th class:list={['w-14 px-3 py-3 font-semibold text-content-active', classes?.thead]}>#</th>
           {content.thead.th.map((th) => (
             <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
           ))}
@@ -63,7 +65,7 @@ const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b b
 
     <tbody class:list={[tbodyClass, classes?.tbody]}>
       {content.tbody.tr.map((row, rowIndex) => (
-        <tr class={rowClass}>
+        <tr class:list={[rowClass, row.className]}>
           <td class="px-3 py-3 text-content-offset font-mono">{rowIndex + 1}</td>
           {row.th && (
             <th
@@ -91,7 +93,7 @@ const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b b
     {content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
         {content.tfoot.tr.map((row, rowIndex) => (
-          <tr class={rowClass}>
+          <tr class:list={[rowClass, row.className]}>
             <td class="px-3 py-3 text-content-offset font-mono">{rowIndex + 1}</td>
             {row.th && (
               <th scope="row" class:list={['px-4 py-3 text-content font-semibold', classes?.tfoot]} set:html={row.th}></th>

src/content/case-studies/event-driven-architecture-migration/index.mdx

@@ -103,7 +103,7 @@ Kinesis was AWS-native but had limitations on consumer scaling and retention. Th
 
 Kafka (MSK) was operationally more complex but offered exactly what we needed: replay capability with configurable retention, strong ordering guarantees within partitions, consumer groups for scaling, and a mature ecosystem. The complexity was justified by the capabilities.
 
-For schema management, I chose Confluent Schema Registry. When 30+ services exchange events, schema evolution is critical. The registry enforced compatibility—you couldn't deploy a producer that broke consumers.
+For schema management, I chose [Confluent Schema Registry](https://docs.confluent.io/platform/current/schema-registry/index.html). When 30+ services exchange events, schema evolution is critical. The registry enforced compatibility—you couldn't deploy a producer that broke consumers.
 
 ### Phased Migration
 
@@ -223,7 +223,7 @@ The Schema Registry enforced backward compatibility—new fields must have defau
 
 ### Real-Time Analytics with ksqlDB
 
-For the real-time dashboards, we used ksqlDB (a streaming SQL engine for Kafka) to process streams and materialize aggregations:
+For the real-time dashboards, we used [ksqlDB](https://docs.confluent.io/platform/current/ksqldb/overview.html#ksqldb-quick-start) (a streaming SQL engine for Kafka) to process streams and materialize aggregations:
 
 ```sql
 -- Create a stream from the impressions topic
@@ -257,7 +257,7 @@ The dashboard service queried these materialized tables via ksqlDB's REST API. L
 
 ### Change Data Capture
 
-Some events originated from database writes rather than application code. Rather than retrofitting every service to publish events, we used Kafka Connect with Debezium (an open-source change data capture platform) for CDC:
+Some events originated from database writes rather than application code. Rather than retrofitting every service to publish events, we used [Kafka Connect](https://www.redpanda.com/guides/kafka-tutorial-what-is-kafka-connect) with [Debezium](https://debezium.io/documentation/reference/stable/index.html)[^debezium] for CDC:
 
 ```json
 {
@@ -354,6 +354,8 @@ After six months, the transformation was measurable:
 
 The business impact was immediate. The real-time dashboards became a competitive differentiator—sales closed deals they'd been losing to competitors. Campaign managers could optimize in real-time instead of waiting for next-day reports.
 
+[^debezium]: Debezium is an open-source change data capture platform that monitors database commits and emits inserts, updates, and deletes as ordered event streams for downstream consumers.
+
 ## Key Takeaways
 
 <List

src/content/case-studies/incident-response-modernization/index.mdx

@@ -3,7 +3,7 @@ title: "Modernizing Incident Response for a 24/7 Platform"
 description: "Transforming ad-hoc firefighting into a structured incident management process with clear escalation, runbooks, and blameless postmortems"
 cover: "./cover.jpg"
 coverAlt: "Chaotic firefighting scene transforming into organized command center, showing shift from reactive to proactive incident response"
-client: "Online Marketplace"
+client: "overstock"
 duration: "4 months"
 industry: "E-commerce / Marketplace"
 projectType: "Incident Response"
@@ -46,11 +46,11 @@ The company couldn't afford a dedicated SRE team. Whatever we built needed to wo
 
 ### Understanding the Current State
 
-I started with an incident archaeology exercise. I reviewed three months of Slack history, git commits, and the scattered incident notes that existed. I categorized every incident by type, severity, time to resolution, and—crucially—recurrence.
+I started with an incident archaeology exercise. I reviewed three months of Slack history, git commits, and the scattered incident notes that existed. I categorized every incident by type, severity, time to resolution, and — crucially — recurrence.
 
 The data told a story: 40% of incidents were repeats. The same 12 issue types caused 80% of pages. Mean time to resolution was 90 minutes, but variance was enormous—some incidents resolved in 5 minutes, others dragged on for 8 hours because the right person wasn't available.
 
-I also conducted one-on-ones with every engineer. I needed to understand not just the technical problems but the cultural ones. People were hesitant at first—years of blame culture had taught them to be careful about admitting mistakes. Building trust took time.
+I also conducted one-on-ones with every engineer. I needed to understand not just the technical problems but the cultural ones. People were hesitant at first — years of blame culture had taught them to be careful about admitting mistakes. Building trust took time.
 
 ### The Transformation Plan
 
@@ -59,7 +59,12 @@ The core insight was that incident response is a skill that can be learned and a
 I proposed a phased approach:
 
 <List
-  variant="numbered-with-background-list"
+  variant="zebra-list"
+  classes={{
+    wrapper: "sm:ml-12 sm:mr-18 mb-6",
+    ul: "!divide-y-0 !border-0 !overflow-visible !rounded-none space-y-4",
+    li: "!rounded-lg !border border-trim",
+  }}
   items={[
     {
       lead: 'Severity definitions and escalation paths',
@@ -93,7 +98,10 @@ Leadership buy-in was critical. I presented data on engineer attrition costs—r
 We defined four severity levels with clear criteria:
 
 <Table
-  variant="striped-rows-table"
+  variant="numbered-review-table"
+  classes={{
+    figure: "sm:ml-6 sm:mr-12 mb-6",
+  }}
   content={{
     figure: 'Table: Severity level definitions and escalation paths',
     thead: {
@@ -167,7 +175,10 @@ The magic wasn't just documentation—it was executable steps anyone could follo
 This was the cultural shift that made everything else sustainable. I introduced a postmortem template focused on system failures, not human failures:
 
 <List
-  variant="check-icons-list"
+  variant="card-grid-list"
+  classes={{
+    wrapper: "sm:ml-6 sm:mr-12 mb-6",
+  }}
   items={[
     {
       lead: 'What happened?',
@@ -197,19 +208,22 @@ We held monthly incident review meetings where teams presented their postmortems
 We standardized on PagerDuty for alerting and scheduling. The tool wasn't as important as the configuration:
 
 <List
-  variant="check-icons-list"
+  variant="chevron-list"
+  classes={{
+    wrapper: "sm:ml-6 sm:mr-12 mb-6",
+  }}
   items={[
     {
-      text: 'Alerts deduplicated and grouped to reduce noise',
+      lead: 'Alerts deduplicated and grouped to reduce noise',
     },
     {
-      text: 'Escalation policies that actually escalated',
+      lead: 'Escalation policies that actually escalated',
     },
     {
-      text: 'On-call schedules visible to everyone',
+      lead: 'On-call schedules visible to everyone',
     },
     {
-      text: 'Automatic Slack channel creation for incidents',
+      lead: 'Automatic Slack channel creation for incidents',
     },
   ]}
 />
@@ -221,7 +235,11 @@ I built a simple Slack bot in Python that, when an incident was declared, create
 After four months, the transformation was measurable:
 
 <Table
-  variant="striped-rows-table"
+  variant="grid-and-accent-header-table"
+  classes={{
+    figure: "sm:ml-6 sm:mr-12 mb-6",
+    tbody: '!text-content',
+  }}
   content={{
     figure: 'Table: Incident response transformation outcomes',
     thead: {
@@ -257,6 +275,9 @@ One moment captured the shift: a junior engineer resolved a SEV2 incident at mid
 
 <List
   variant="check-icons-list"
+  classes={{
+    wrapper: "sm:ml-6 sm:mr-12 mb-6",
+  }}
   items={[
     {
       lead: 'Process beats heroics',