Automate component version badges #2656

alex-ju · 2025-01-20T15:37:47Z

📌 Summary

Follow-up on #2613 to automate the removal and addition of version badges for each component.

🛠️ Detailed description

e82ea68 update component changelog script to handle badges
e82ea68 as we use gray-matter (a slim wrapper of js-yaml) to read/write the front matter we updated components' front matter to match the standard schema

Outcome

Running the automated script revealed a few instances where the 4.15 badge was missing. Any added or updated badge before 4.15 is removed.

Note

This PR will be updated to match the agreed proposal outlined by @zamoore in the release cycle RFC.

Limitations

The script doesn't generate added or deprecated badges (only updated). When you add a new component (or deprecate one), you have to either update the front matter status when updating the associated docs or change the badge type after running the automated script. These details will be covered in the confluence documentation updates.

🔗 External links

Jira ticket: HDS-4299

💬 Please consider using conventional comments when reviewing this PR.

using `gray-matter` to manage the front matter read/write and formatting

running `yarn run generate-component-changelog-entries`

vercel · 2025-01-20T15:37:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jan 22, 2025 4:10pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jan 22, 2025 4:10pm

shleewhite

Looks good! Just left a couple questions and I think one thing to change.

shleewhite · 2025-01-22T14:16:36Z

website/docs/components/badge/index.md

@@ -1,14 +1,22 @@
 ---
 title: Badge
-description: Concise, non-interactive labels that represent metadata.
-caption: Concise, non-interactive labels that represent metadata.
+description: 'Concise, non-interactive labels that represent metadata.'


Question: why do these caption and description have quotes? it seems like most of the others dont.

Looking at the deployed site (https://hds-website-git-alex-ju-automate-component-ver-2d7be8-hashicorp.vercel.app/components/badge) seems like it doesn't randomly add the quotes to the page so I guess its fine

According to the schema used by js-yaml strings over a certain length are moved to a block (hence the >- notation) and the short ones get wrapped in single quotes to avoid parse errors.

Ok! I just noticed that there were places where the file was updated, but caption/description stayed the same (didn't add the quotes) so I thought it was interesting that it only got added 3 times.

ex: Accordion didnt have quotes added around the caption

shleewhite · 2025-01-22T14:17:25Z

website/docs/components/card/index.md

@@ -1,13 +1,18 @@
 ---
 title: Card
-description: A block container that provides styling for elevation, border, and background.
-caption: A block container that provides styling for elevation, border, and background.
+description: 'A block container that provides styling for elevation, border, and background.'


Same question about the quotes here.

shleewhite · 2025-01-22T14:19:49Z

website/docs/components/table/index.md

@@ -1,19 +1,24 @@
 ---
 title: Table
-description: Used to display organized, two-dimensional tabular data.
-caption: Used to display organized, two-dimensional tabular data.
+description: 'Used to display organized, two-dimensional tabular data.'


Another example where the quotes are randomly added.

shleewhite · 2025-01-22T14:22:51Z

website/lib/changelog/generate-component-changelog-entries.mjs

+    const indexPath = `${allComponentsPath[componentName]}/index.md`;
+
+    if (fs.existsSync(indexPath)) {
+      // Fetch the index markdown file


Really appreciate the comments!

shleewhite · 2025-01-22T14:26:54Z

website/lib/changelog/generate-component-changelog-entries.mjs

+  });
+};
+
+const cleanComponentFrontMatter = (components) => {


Suggestion: I think version needs to be added to the args here? Otherwise I don't see where it is defined.

right, yes, I believe I'm missing the second argument here – will update!

fixed in 15e50a9 thanks for spotting this!

shleewhite · 2025-01-22T14:40:55Z

website/lib/changelog/generate-component-changelog-entries.mjs

+        parsedFrontMatter.data.status = {};
+      }
+      if (
+        parsedFrontMatter.data.status.added !== version &&


Question: going forward, will we still need to manually add the added tag?

indeed. either add it manually, or change it from Updated to Added where needed. We can try to add some logic there to distinguish additions from updates, but it's not going to be a clean cut and wasn't sure it's worth the effort.

Makes sense! We add stuff much less often.

dchyun

Everything working great! Tested it with a few different scenarios and all worked out. Just one comment I left.

dchyun · 2025-01-22T16:21:33Z

website/lib/changelog/generate-component-changelog-entries.mjs

+        parsedFrontMatter.data.status.added !== version &&
+        parsedFrontMatter.data.status.updated !== version
+      ) {
+        parsedFrontMatter.data.status.updated = version;


[Suggestion] This would defiantly make the implementation more complicated 😅, and is probably best raised in the doc, but for patch releases do we want to remove all "updated" badges from a previous minor release?

Just thinking of the situation where we do a minor release, the badges get added, and then we have some need to do a patch release quickly after and the badges get removed before consumers are really even aware they were there.

That's a good point. Let me think about it, maybe we can prevent this from code rather than docs 🤔

alex-ju added 2 commits January 20, 2025 15:34

Update component changelog script to handle added/updated tags

e85a5cb

using `gray-matter` to manage the front matter read/write and formatting

Format front matter to match js-yaml and add missing tags

082607c

running `yarn run generate-component-changelog-entries`

alex-ju requested review from a team as code owners January 20, 2025 15:37

hashibot-hds added the docs-website Content updates to the documentation website label Jan 20, 2025

vercel bot deployed to Preview – hds-showcase January 20, 2025 15:38 View deployment

alex-ju changed the title ~~Alex ju/automate component version tags~~ Automate component version badges Jan 20, 2025

vercel bot deployed to Preview – hds-website January 20, 2025 15:40 View deployment

shleewhite reviewed Jan 22, 2025

View reviewed changes

Fix cleanComponentFrontMatter

15e50a9

vercel bot deployed to Preview – hds-showcase January 22, 2025 16:08 View deployment

vercel bot deployed to Preview – hds-website January 22, 2025 16:10 View deployment

dchyun reviewed Jan 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automate component version badges #2656

Automate component version badges #2656

alex-ju commented Jan 20, 2025 •

edited

Loading

vercel bot commented Jan 20, 2025 •

edited

Loading

shleewhite left a comment

shleewhite Jan 22, 2025

shleewhite Jan 22, 2025

alex-ju Jan 22, 2025 •

edited

Loading

shleewhite Jan 22, 2025

shleewhite Jan 22, 2025

shleewhite Jan 22, 2025

shleewhite Jan 22, 2025

shleewhite Jan 22, 2025

alex-ju Jan 22, 2025

alex-ju Jan 22, 2025

shleewhite Jan 22, 2025

alex-ju Jan 22, 2025

shleewhite Jan 22, 2025

dchyun left a comment

dchyun Jan 22, 2025 •

edited

Loading

alex-ju Jan 22, 2025

Automate component version badges #2656

Are you sure you want to change the base?

Automate component version badges #2656

Conversation

alex-ju commented Jan 20, 2025 • edited Loading

📌 Summary

🛠️ Detailed description

Outcome

Limitations

🔗 External links

vercel bot commented Jan 20, 2025 • edited Loading

shleewhite left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-ju Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dchyun left a comment

Choose a reason for hiding this comment

dchyun Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-ju commented Jan 20, 2025 •

edited

Loading

vercel bot commented Jan 20, 2025 •

edited

Loading

alex-ju Jan 22, 2025 •

edited

Loading

dchyun Jan 22, 2025 •

edited

Loading