docs(docs-infra): improve Playground card on installation page

Updates the Playground card copy and adds a `titleInline` attribute on
<docs-card> so the icon and title sit on the same row. Existing cards
are unaffected.

(cherry picked from commit 29081f7765)

adev/shared-docs/pipeline/shared/marked/extensions/docs-card/docs-card.mts

@@ -18,6 +18,7 @@ interface DocsCardToken extends Tokens.Generic {
   href?: string;
   imgSrc?: string;
   iconImgSrc?: string; // Need image since icons are custom
+  titleInline?: boolean;
   tokens: Token[];
 }
 
@@ -30,6 +31,7 @@ const linkRule = /link="([^"]*)"/;
 const hrefRule = /href="([^"]*)"/;
 const imgSrcRule = /imgSrc="([^"]*)"/;
 const iconImgSrcRule = /iconImgSrc="([^"]*)"/;
+const titleInlineRule = /(?:^|\s)titleInline(?=\s|$|=)/;
 
 export const docsCardExtension = {
   name: 'docs-card',
@@ -47,6 +49,7 @@ export const docsCardExtension = {
       const href = hrefRule.exec(attr);
       const imgSrc = imgSrcRule.exec(attr);
       const iconImgSrc = iconImgSrcRule.exec(attr);
+      const titleInline = titleInlineRule.test(attr);
 
       const body = match[2].trim();
 
@@ -59,6 +62,7 @@ export const docsCardExtension = {
         link: link ? link[1] : undefined,
         imgSrc: imgSrc ? imgSrc[1] : undefined,
         iconImgSrc: iconImgSrc ? iconImgSrc[1] : undefined,
+        titleInline,
         tokens: [],
       };
       this.lexer.blockTokens(token.body, token.tokens);
@@ -79,12 +83,14 @@ function getStandardCard(renderer: AdevDocsRenderer, token: DocsCardToken) {
     // We need to read svg content, instead of renering svg with `img`,
     // cause we would like to use CSS variables to support dark and light mode.
     const icon = loadWorkspaceRelativeFile(token.iconImgSrc);
+    const header = token.titleInline
+      ? `<div class="docs-card-header-inline">${icon}<h3>${token.title}</h3></div>`
+      : `${icon}<h3>${token.title}</h3>`;
 
     return `
     <a href="${token.href}" ${anchorTarget(token.href)} class="docs-card">
       <div>
-        ${icon}
-        <h3>${token.title}</h3>
+        ${header}
         ${renderer.parser.parse(token.tokens)}
       </div>
       <span>${token.link ? token.link : 'Learn more'}</span>

adev/shared-docs/styles/docs/_card.scss

@@ -159,6 +159,21 @@
       margin-block: 1.5rem;
     }
 
+    .docs-card-header-inline {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      svg {
+        margin-block-end: 0;
+        flex-shrink: 0;
+      }
+
+      h3 {
+        margin-block: 0;
+      }
+    }
+
     &.docs-card-with-svg {
       padding: 0;
 

adev/src/assets/icons/playground.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 -960 960 960" fill="#F637E3">
+<path d="M450.001-611.691v-32.386q-39.385-9.923-64.692-41.897-25.308-31.975-25.308-74.025 0-49.922 35.038-84.96 35.039-35.038 84.961-35.038t84.961 35.038q35.038 35.038 35.038 84.96 0 42.05-25.308 74.025-25.307 31.974-64.692 41.897v32.386l273.846 157.538q17.173 9.912 26.663 26.582 9.491 16.671 9.491 36.495v62.152q0 19.824-9.491 36.495-9.49 16.67-26.663 26.582L516.154-111.771q-17.203 9.846-36.217 9.846t-36.091-9.846L176.155-265.847q-17.173-9.912-26.663-26.582-9.491-16.671-9.491-36.495v-62.152q0-19.824 9.491-36.495 9.49-16.67 26.663-26.582l273.846-157.538Zm-6.155 364.537L200-387.461v58.537q0 3.078 1.539 5.962 1.538 2.885 4.615 4.808l267.692 154.692q3.077 1.923 6.154 1.923t6.154-1.923l267.692-154.692q3.077-1.923 4.615-4.808 1.539-2.884 1.539-5.962v-58.537L516.154-247.154q-17.203 9.847-36.217 9.847t-36.091-9.847Zm6.155-162.847V-542.77L250.46-427.691l223.386 128.846q3.077 1.924 6.154 1.924t6.154-1.924l223.001-128.846L509.999-542.77v132.769h-59.998ZM480-699.999q25 0 42.5-17.5t17.5-42.5q0-25-17.5-42.5t-42.5-17.5q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm-2.308 538.61Z"/>
+</svg>

adev/src/content/introduction/BUILD.bazel

@@ -15,6 +15,7 @@ generate_guides(
         "//adev/src/assets/icons:forms.svg",
         "//adev/src/assets/icons:language-service.svg",
         "//adev/src/assets/icons:ng-update.svg",
+        "//adev/src/assets/icons:playground.svg",
         "//adev/src/assets/icons:routing.svg",
         "//adev/src/assets/icons:signals.svg",
         "//adev/src/assets/icons:ssr.svg",

adev/src/content/introduction/installation.md

@@ -7,11 +7,9 @@ Get started with Angular quickly with online starters or locally with your termi
 
 If you just want to play around with Angular in your browser without setting up a project, you can use our online sandbox:
 
-<docs-card-container>
-  <docs-card title="" href="/playground" link="Open on Playground">
-  The fastest way to play with an Angular app. No setup required.
-  </docs-card>
-</docs-card-container>
+<docs-card title="Playground" href="/playground" link="Open on Playground" iconImgSrc="adev/src/assets/icons/playground.svg" titleInline>
+The fastest way to play with an Angular app. No setup required.
+</docs-card>
 
 ## Set up a new project locally