Add article pages refactored to Table components

Author: webstackdev

.vscode/cspell.json

@@ -2,18 +2,28 @@
   "words": [
     "astro",
     "astrojs",
+    "botocore",
     "braniac",
+    "certifi",
     "cicd",
     "Cirkel",
+    "cweagans",
     "devs",
+    "dorny",
     "Emittery",
     "iframes",
     "instanceof",
     "Intelli",
+    "Liquibase",
     "msedge",
+    "nokogiri",
+    "pgroll",
+    "rglob",
+    "sarif",
     "Sindre",
     "Sorhus",
     "tsconfigs",
-    "untile"
+    "untile",
+    "Xata"
   ]
 }

.vscode/settings.json

@@ -12,13 +12,17 @@
     "adtech",
     "agentic",
     "AIMD",
+    "aiobreaker",
     "alives",
+    "allof",
     "alpn",
     "amondnet",
     "anchore",
     "anonymization",
+    "APIV",
     "appns",
     "Asana",
+    "asax",
     "asyncio",
     "asyncpg",
     "azuread",
@@ -28,6 +32,7 @@
     "bezier",
     "Birsan's",
     "bitnami",
+    "Blazor",
     "Bridgy",
     "bsky",
     "Btns",
@@ -47,6 +52,7 @@
     "codel",
     "Conduktor",
     "Consolas",
+    "cpus",
     "criticals",
     "crossenv",
     "CUDA",
@@ -106,12 +112,14 @@
     "gclid",
     "gemoji",
     "getattr",
+    "getcwd",
     "glidejs",
     "GOARCH",
     "Gobreaker",
     "gomodule",
     "gotk",
     "Grafonnet",
+    "granularities",
     "GSAP",
     "gsutil",
     "hikari",
@@ -123,8 +131,13 @@
     "httpchk",
     "httpx",
     "Hudi",
+    "Hystrix",
     "IAAAAAAAAA",
     "ical",
+    "IMDS",
+    "incentivized",
+    "inotify",
+    "instrumenta",
     "interrobang",
     "isdigit",
     "isinstance",
@@ -133,7 +146,9 @@
     "izakaya",
     "jdbc",
     "Joomla",
+    "jscodeshift",
     "jscoverage",
+    "jsmith",
     "jsonencode",
     "Jsonnet",
     "kafkajs",
@@ -147,6 +162,7 @@
     "Kpow",
     "ksql",
     "kubeadm",
+    "Kubebuilder",
     "kubeconfig",
     "Kubecost",
     "kubelet",
@@ -163,6 +179,7 @@
     "LIMS",
     "Linkify",
     "liradb",
+    "ljust",
     "llen",
     "LNAME",
     "localip",
@@ -176,6 +193,7 @@
     "mathbb",
     "maxhdr",
     "Menlo",
+    "millicores",
     "miscategorized",
     "misconfiguring",
     "mlflow",
@@ -225,13 +243,15 @@
     "Onest",
     "openslo",
     "optin",
+    "OSSL",
     "PABC",
     "pacticipant",
     "PERC",
     "pgbouncer",
     "pgmq",
     "Pgpool",
     "PGRST",
+    "phpro",
     "pids",
     "pkill",
     "Plaso",
@@ -250,12 +270,14 @@
     "Pybreaker",
     "Pydantic",
     "pylint",
+    "pypiserver",
     "pypoetry",
     "qdisc",
     "qpart",
     "qparts",
     "Qualys",
     "Qube",
+    "QUIC",
     "raci",
     "redigo",
     "redocly",
@@ -272,9 +294,11 @@
     "samp",
     "scaffolder",
     "sccache",
+    "schedulable",
     "scipy",
     "SCORM",
     "Segoe",
+    "SERVFAIL",
     "sess",
     "shiki",
     "shikijs",
@@ -290,6 +314,7 @@
     "spriter",
     "SQSFIFO",
     "squoosh",
+    "srequiredlabels",
     "srgb",
     "ssns",
     "startdt",
@@ -318,18 +343,21 @@
     "Traefik",
     "triaging",
     "Trino",
+    "troff",
     "TRUNC",
     "trustcacerts",
     "Tscompile",
     "tsdoc",
     "tseslint",
     "tshirt",
+    "tsoa",
     "TTFB",
     "Turborepo",
     "Tursa",
     "Turso",
     "tydata",
     "uncacheable",
+    "uncompiled",
     "uncordon",
     "Uncordoning",
     "unexploitable",

_TODO.md

@@ -164,8 +164,6 @@ https://mermaid.js.org/config/directives.html
 
 - Add Inset component and convert `text` code blocks to use it.
 
-- Only needed if images used in content: Use an in-project Image component to wrap Astro's Image and Picture. Show a magnifying glass with a "+" for the cursor on hover, and a modal to show a magnified view of images on click.
-
 - Focus-visible / active handling on ToC nav items
 
 - Style "Share to Mastodon" modal in src/components/Social/Mastodon/client/index.ts
@@ -186,6 +184,8 @@ https://mermaid.js.org/config/directives.html
 
 - Improve `<abbr>` styling: https://codepen.io/ire/pen/NoqWpm
 
+- Service worker isn't caching favicon
+
 ## List Component
 
 - Task list checked variant Markdown in dark theme is awkward, it has a dark shadow
@@ -198,6 +198,29 @@ 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.
 
+## Image component
+
+Only needed if images used in content: Use an in-project Image component to wrap Astro's Image and Picture. Show a magnifying glass with a "+" for the cursor on hover, and a modal to show a magnified view of images on click.
+
+- `accTitle`: Alert severity decision tree
+- `accDescr`: Flowchart showing how to classify an alert as a Page or Notification. When an alert fires, check if there is user-facing impact. If no, it is a Notification. If yes, check if there is immediate revenue or safety impact. If yes, it is a Page. If no, check if the SLO burn rate is critical. If yes, it is a Page. If no, it is a Notification.
+
+<figure>
+  <!-- 1. The Image with a concise title -->
+  <img src="diagram.jpg" alt="[accTitle] - see details below for full text description">
+
+  <figcaption>
+    <!-- 2. Visible caption (if needed) -->
+    <strong>Figure 1:</strong> Process Workflow
+
+    <!-- 3. Collapsible detailed description -->
+    <details>
+      <summary>View detailed text description</summary>
+      <p>[Insert your full accDescr content here]</p>
+    </details>
+  </figcaption>
+</figure>
+
 ## Content Issues
 
 - "### Geographic/Currency Mismatches" in deep-dive/cdn-edge-caching-cache-keys-vary-headers has a table -> callout -> table back to back
@@ -214,7 +237,38 @@ https://mermaid.js.org/config/directives.html
 
 - 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.
+
+If there is a Further Reading" heading at the bottom of a file, ignore any list that may be contained in it.
+
+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:
 
-Our current articles have markdown tables. I want to refactor these into using our Table component. I'm going to copy and paste the markdown table into the chat window here. I'd like you to take it and update the content prop in the Table instance in src/pages/hero.astro so that the table renders using the same layout as the markdown table. Use the string variant in the tbody -> tr -> th element.
+Files with missed lists:
 
-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.
+src/content/articles/eol-runtime-upgrade-dependency-hell-migration/index.mdx

src/components/Icon/icons/magnify.astro

@@ -0,0 +1,31 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>User Avatar Icon</title>}
+  <path
+    fill-rule="evenodd"
+    stroke-width="1"
+    d="m 23.682976,23.67929 a 1.0036896,1.0036896 0 0 1 -1.4253,0.008 l -7.7184,-7.68726 a 8.975996,8.975996 0 1 1 1.4454,-1.43628 l 7.7083,7.69027 a 1.0036896,1.0036896 0 0 1 -0.01,1.42524 z M 8.918676,1.9132803 a 7.0258271,7.0258271 0 1 0 7.0258,7.02582 7.0258271,7.0258271 0 0 0 -7.0258,-7.02582 z m 3.0111,8.02951 h -2.0074 V 11.95017 a 1.0037,1.0037 0 0 1 -2.0074,0 V 9.9427903 h -2.0074 a 1.00369,1.00369 0 0 1 0,-2.00738 h 2.0074 v -2.00738 a 1.0037,1.0037 0 0 1 2.0074,0 v 2.00738 h 2.0074 a 1.00369,1.00369 0 0 1 0,2.00738 z"
+  ></path>
+</svg>