From 5be5ad8a743eaa8d22cd59fc7f5468f2fb51fff6 Mon Sep 17 00:00:00 2001
From: Nicholas Cunningham <ndcunningham@gmail.com>
Date: Thu, 3 Oct 2024 10:10:00 -0600
Subject: [PATCH] fix(nx-dev): fix markdoc table data alignment (#28274)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

Currently, our table heading generated from markdown files `.md` are
positioned `center` while the data `td` are positioned `left`.

It doesn't look uniform and on larger tables, it can be jarring.

Examples:
- https://nx.dev/ci/reference/release-notes#helm-package-compatibility
- https://nx.dev/reference/releases#supported-versions
-
https://nx.dev/blog/reliable-ci-a-new-execution-model-fixing-both-flakiness-and-slowness#problem-in-numbers

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Both heading and data should have the same alignment to be symmetrical.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
---
 nx-dev/ui-markdoc/src/index.ts               | 3 ++-
 nx-dev/ui-markdoc/src/lib/nodes/td.schema.ts | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 nx-dev/ui-markdoc/src/lib/nodes/td.schema.ts

diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts
index 3a2f2969f4..eb8ef223f3 100644
--- a/nx-dev/ui-markdoc/src/index.ts
+++ b/nx-dev/ui-markdoc/src/index.ts
@@ -56,7 +56,7 @@ import { pill } from './lib/tags/pill.schema';
 import { fence } from './lib/nodes/fence.schema';
 import { FenceWrapper } from './lib/nodes/fence-wrapper.component';
 import { VideoPlayer, videoPlayer } from './lib/tags/video-player.component';
-
+import { td } from './lib/nodes/td.schema';
 // TODO fix this export
 export { GithubRepository } from './lib/tags/github-repository.component';
 
@@ -70,6 +70,7 @@ export const getMarkdocCustomConfig = (
       heading: getHeadingSchema(headingClass),
       image: getImageSchema(documentFilePath),
       link,
+      td,
     },
     tags: {
       callout,
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/td.schema.ts b/nx-dev/ui-markdoc/src/lib/nodes/td.schema.ts
new file mode 100644
index 0000000000..6509493f9b
--- /dev/null
+++ b/nx-dev/ui-markdoc/src/lib/nodes/td.schema.ts
@@ -0,0 +1,8 @@
+import { Schema } from '@markdoc/markdoc';
+
+export const td: Schema = {
+  render: 'td',
+  attributes: {
+    className: { type: 'String', default: 'text-center' },
+  },
+};