Final pass api-deprecation-sunset-headers-consumer-migration article

Author: webstackdev

_TODO.md

@@ -250,10 +250,6 @@ https://mermaid.js.org/config/directives.html
 
 - Need to improve the "squish" animation where the header reduces in size on scroll down, and returns to full size on scroll up. Maybe reduce and expand the text and search / themepicker / hamburger menu sizes in place, and then slide them horizontally.
 
-## Diagram
-
-Can you add a detailed description to the Diagram on line xxxx for the mermaid diagram right above it? The intention is to provide a detailed description for users with visual impairments so they can understand the diagram.
-
 ## Content Issues
 
 - "### Geographic/Currency Mismatches" in deep-dive/cdn-edge-caching-cache-keys-vary-headers has a table -> callout -> table back to back
@@ -270,56 +266,10 @@ Can you add a detailed description to the Diagram on line xxxx for the mermaid d
 
 - We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag like "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag
 
-## Table Refactor Instructions
-
-Our current articles have markdown tables. I want to refactor these into using our Table component. I'd like you to take it and use it for the content prop in a Table component instance you add so that the table renders using the same layout as the markdown table. Use the string variant in the tbody -> tr -> th element. Use "vertical-column-delineation-table" for the "variant" prop of the Table component.
-
-Each table will have the "figure" prop as a line below the table, prefixed with "Table: ". We should remove the "Table: " prefix from the figure string as this is used by our Markdown setup to identify figure captions. Do not leave multiple trailing empty lines after the table.
-
-The first file to update is:
-
-## List Refactor Instructions
-
-numbered-with-background-list, check-icons-list
-
-We have lists in our current articles that are of two variants: those that are plain text lists (either ordered or unordered), and those that are lists with both leads and plain texts. Our List component layouts handle both lists with leads and those without. We can identify leads because that text is emphasized with markdown in some fashion: "_", "__", "*", or "**". We need to refactor the markdown lists in a file into either an ordered (numbered-with-background-list) or unordered (check-icons-list) list, and extract lead text if present into the optional lead prop if any lead text is present. The "lead" prop should come first and before the "text" prop in the object. The "lead" prop is the emphasized text that comes first in the list items we are converting to the List component
-
-An example is as follows:
-
-- _Alerts per on-call shift_: Total alert volume during a rotation. Anything above 20 per 24-hour shift is a red flag.
-
-<List
-  variant="check-icons-list"
-  items={[
-    {
-      lead: "Alerts per on-call shift:",
-      text: "Total alert volume during a rotation. Anything above 20 per 24-hour shift is a red flag.",
-    },
-  ]}
-/>
-
-The first file to update is:
-
-### Timelines
-
-- Good generation:
-
-api-gateway-metrics-traces-logs-debugging/trace-context-propagation-creating-connected-spans-across-gateway-boundary.jpg
-
-- Needs done:
-
-backpressure-load-shedding-admission-control-overload/backpressure-propagates-from-the-constrained-resource-back-to-the-client.png
-
-argocd-sync-failures-gitops-debugging-troubleshooting/hook-execution-sequence-during-argoc-sync-lifecycle.png
-
-- Not close enough in details:
-
-argocd-sync-failures-gitops-debugging-troubleshooting/resource-dependency-graph-showing-potential-failure-points.png
-
-### Figure captions are broken:
-
-src/content/articles/structured-logging-correlation-ids-log-schema-design/pdf.mdx
-
 ### This file was badly mangled during refactoring, need to compare against original:
 
 src/content/articles/internal-developer-portal-platform-self-service-actions/pdf.mdx
+
+## Diagram
+
+Can you add a detailed description to the Diagram on line xxxx for the mermaid diagram right above it? The intention is to provide a detailed description for users with visual impairments so they can understand the diagram.

src/components/Diagram/index.astro

@@ -12,6 +12,7 @@ export interface Props {
 }
 
 const { src, title, description } = Astro.props
+const hasDefaultSlot = Astro.slots.has('default')
 ---
 
 <figure class="my-6 mx-auto">
@@ -30,7 +31,11 @@ const { src, title, description } = Astro.props
     />
   )}
 
-  <slot />
+  {hasDefaultSlot && (
+    <div class="flex justify-center">
+      <slot />
+    </div>
+  )}
 
   <figcaption class="mt-3 text-content">
     <details class="m-0 border-0 p-0 not-italic">

src/components/List/index.astro

@@ -38,11 +38,13 @@ export type Props = {
   }
   size?: number
   variant: string
+  style?: Record<string, unknown>
 }
 
-const { items, size, variant = 'default', classes } = Astro.props
+const { items, size, variant = 'default', classes, style } = Astro.props
 const classesProps = classes ? { classes } : {}
 const sizeProps = size !== undefined ? { size } : {}
+const styleProps = style ? { style } : {}
 const itemsWithColor = items as Array<{
   title?: string
   lead?: string
@@ -64,19 +66,19 @@ const plainIconItems = items.filter((item): item is Props['items'][number] & { i
 })
 ---
 
-<div class:list={[classes?.wrapper ? classes.wrapper : 'mb-8']}>
-  {variant === 'accent-border-left-list' && <AccentBorderLeftList items={items} {...classesProps} />}
-  {variant === 'badge-list' && <BadgeList items={items} {...classesProps} />}
-  {variant === 'card-grid-list' && <CardGridList items={items} {...classesProps} />}
-  {variant === 'check-icons-list' && <CheckIconsList items={items} {...classesProps} />}
-  {variant === 'chevron-list' && <ChevronList items={items} {...classesProps} />}
-  {variant === 'colored-marker-list' && <ColoredMarkerList items={itemsWithColor} {...classesProps} {...sizeProps} />}
-  {variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={items} {...classesProps} />}
-  {variant === 'plain-icon-list' && <PlainIconList items={plainIconItems} {...classesProps} {...sizeProps} />}
-  {variant === 'side-by-side-list' && <SideBySideList items={items} {...classesProps} />}
-  {variant === 'timeline-list' && <TimelineList items={items} {...classesProps} />}
-  {variant === 'two-column-check-icons-list' && <TwoColumnCheckIconsList items={items} {...classesProps} {...sizeProps} />}
-  {variant === 'two-column-icon-list' && <TwoColumnIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
-  {variant === 'three-column-icon-list' && <ThreeColumnIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
-  {variant === 'zebra-list' && <ZebraList items={items} {...classesProps} />}
+<div class:list={[classes?.wrapper ? classes.wrapper : 'mb-6']}>
+  {variant === 'accent-border-left-list' && <AccentBorderLeftList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'badge-list' && <BadgeList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'card-grid-list' && <CardGridList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'check-icons-list' && <CheckIconsList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'chevron-list' && <ChevronList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'colored-marker-list' && <ColoredMarkerList items={itemsWithColor} {...classesProps} {...sizeProps} {...styleProps} />}
+  {variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'plain-icon-list' && <PlainIconList items={plainIconItems} {...classesProps} {...sizeProps} {...styleProps} />}
+  {variant === 'side-by-side-list' && <SideBySideList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'timeline-list' && <TimelineList items={items} {...classesProps} {...styleProps} />}
+  {variant === 'two-column-check-icons-list' && <TwoColumnCheckIconsList items={items} {...classesProps} {...sizeProps} {...styleProps} />}
+  {variant === 'two-column-icon-list' && <TwoColumnIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} {...styleProps} />}
+  {variant === 'three-column-icon-list' && <ThreeColumnIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} {...styleProps} />}
+  {variant === 'zebra-list' && <ZebraList items={items} {...classesProps} {...styleProps} />}
 </div>

src/components/List/layouts/AccentBorderLeftList.astro

@@ -16,15 +16,15 @@ const { items, classes }: Props = Astro.props
 
 const ulClass = "space-y-4 list-none pl-0"
 const liClass = "border-l-4 pl-4"
-const headerClass = "text-content-active font-semibold mb-2"
+const headerClass = "text-page-inverse font-semibold mb-2"
 const textClass = "text-content-offset text-sm"
 ---
 
 <ul class:list={[ulClass, classes?.ul]}>
   {
     items.map((item) => (
       <li class:list={[liClass, classes?.li, item.color]}>
-        <h4 class:list={[headerClass, classes?.em]}>{item.lead}</h4>
+        {item.lead && <h4 class:list={[headerClass, classes?.em]} set:html={item.lead}></h4>}
         {Array.isArray(item.text) ? (
           <div class="space-y-3">
             {item.text.map((paragraph) => (

src/components/List/layouts/BadgeList.astro

@@ -25,10 +25,10 @@ const emClass = ["text-content font-bold not-italic mr-2", classes?.em]
   {
     items.map((item) => (
       <li class:list={liClass}>
-        <span class:list={titleClass}>{item.title}</span>
+        {item.title && <span class:list={titleClass} set:html={item.title}></span>}
         <span>
-          <em class:list={emClass}>{item.lead}</em>
-          <span class="text-content-offset">{item.text}</span>
+          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
+          <span class="text-content-offset" set:html={item.text}></span>
         </span>
       </li>
     ))

src/components/List/layouts/CardGridList.astro

@@ -29,9 +29,9 @@ const emClass = ["block text-page-inverse font-semibold not-italic mb-2", classe
           {item.icon && (
             <Icon icon={item.icon} color="page-inverse" size={6} classes="mr-4 -mb-2" />
           )}
-          <em class:list={emClass}>{item.lead}</em>
+          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
         </div>
-        <span class="text-content">{item.text}</span>
+        <span class="text-content" set:html={item.text}></span>
       </li>
     ))
   }

src/components/List/layouts/CheckIconsList.astro

@@ -34,11 +34,11 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
         <span>
           {item.lead && (
             <>
-              <em class:list={emClass}>{item.lead}</em>
+              <em class:list={emClass} set:html={item.lead}></em>
               <span class="text-content-offset/60 ml-1">—</span>
             </>
           )}
-          <span class={`text-content-offset`}>{item.text}</span>
+          <span class={`text-content-offset`} set:html={item.text}></span>
         </span>
       </li>
     ))

src/components/List/layouts/ChevronList.astro

@@ -36,8 +36,8 @@ const textClass = "block text-content-offset mt-0.5"
             />
           </span>
           <div>
-            <em class:list={emClass}>{item.lead}</em>
-            <span class:list={textClass}>{item.text}</span>
+            {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
+            <span class:list={textClass} set:html={item.text}></span>
           </div>
         </div>
       </li>

src/components/List/layouts/ColoredMarkerList.astro

@@ -32,8 +32,8 @@ const textClass = classes?.text ? [classes.text] : []
       <li class:list={liClass}>
         <span class:list={[iconClass, item.color]} style={markerStyle} />
         <div class="flex flex-col sm:flex-row sm:items-start">
-          {item.lead && <em class:list={emClass}>{item.lead}</em>}
-          <span class:list={textClass}>{item.text}</span>
+          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
+          <span class:list={textClass} set:html={item.text}></span>
         </div>
       </li>
     ))

src/components/List/layouts/NumberedWithBackgroundList.astro

@@ -24,8 +24,8 @@ const emClass = ["text-primary-offset font-semibold not-italic", classes?.em]
       <li class:list={liClass}>
         <span class="mt-2 shrink-0 w-8 h-8 bg-primary-offset text-content-inverse rounded-full flex items-center justify-center text-sm font-bold">{index + 1}</span>
         <div class="pt-1">
-          <em class:list={emClass}>{item.lead}</em>
-          <div>{item.text}</div>
+          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
+          <div set:html={item.text}></div>
         </div>
       </li>
     ))