remove encodeEntities on featured link cards (github#33935)

Author: Peter Bengtsson

components/guides/ArticleCard.tsx

@@ -17,11 +17,11 @@ export const ArticleCard = ({ tabIndex, card, typeLabel }: Props) => {
       className="d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8"
     >
       <Link className="no-underline d-flex flex-column py-3 border-bottom" href={card.href}>
-        <h3 className="h4 color-fg-default mb-1" dangerouslySetInnerHTML={{ __html: card.title }} />
+        <h3 className="h4 color-fg-default mb-1">{card.title}</h3>
         <div className="h6 text-uppercase" data-testid="article-card-type">
           {typeLabel}
         </div>
-        <p className="color-fg-muted my-3" dangerouslySetInnerHTML={{ __html: card.intro }} />
+        <p className="color-fg-muted my-3">{card.intro}</p>
         {card.topics.length > 0 && (
           <ul style={{ listStyleType: 'none' }}>
             {card.topics.map((topic) => {

components/landing/ArticleList.tsx

@@ -62,29 +62,18 @@ export const ArticleList = ({
                 title={
                   !link.hideIntro && link.intro ? (
                     <h3 className="f4" data-testid="link-with-intro-title">
-                      <span
-                        dangerouslySetInnerHTML={
-                          link.fullTitle ? { __html: link.fullTitle } : { __html: link.title }
-                        }
-                      />
+                      <span>{link.fullTitle ? link.fullTitle : link.title}</span>
                     </h3>
                   ) : (
-                    <span
-                      className="f4 text-bold d-block"
-                      data-testid="link-with-intro-title"
-                      dangerouslySetInnerHTML={
-                        link.fullTitle ? { __html: link.fullTitle } : { __html: link.title }
-                      }
-                    ></span>
+                    <span className="f4 text-bold d-block" data-testid="link-with-intro-title">
+                      {link.fullTitle ? link.fullTitle : link.title}
+                    </span>
                   )
                 }
               >
                 {!link.hideIntro && link.intro && (
                   <TruncateLines as="p" maxLines={2} className="color-fg-muted mb-0 mt-1">
-                    <span
-                      data-testid="link-with-intro-intro"
-                      dangerouslySetInnerHTML={{ __html: link.intro }}
-                    />
+                    <span data-testid="link-with-intro-intro">{link.intro}</span>
                   </TruncateLines>
                 )}
                 {link.date && (

components/landing/CodeExampleCard.tsx

@@ -14,11 +14,8 @@ export const CodeExampleCard = ({ example }: Props) => {
       href={`https://github.com/${example.href}`}
     >
       <div className="p-4">
-        <h3 className="f4" dangerouslySetInnerHTML={{ __html: example.title }} />
-        <p
-          className="mt-2 mb-4 color-fg-muted"
-          dangerouslySetInnerHTML={{ __html: example.description }}
-        />
+        <h3 className="f4">{example.title}</h3>
+        <p className="mt-2 mb-4 color-fg-muted">{example.description}</p>
         <div className="d-flex flex-wrap">
           {example.tags.map((tag) => {
             return (

components/landing/GuideCard.tsx

@@ -13,11 +13,8 @@ export const GuideCard = ({ guide }: Props) => {
         className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5"
         href={guide.href}
       >
-        <h3 className="f2" dangerouslySetInnerHTML={{ __html: guide.title }} />
-        <p
-          className="mt-2 mb-4 color-fg-muted"
-          dangerouslySetInnerHTML={{ __html: guide.intro || '' }}
-        />
+        <h3 className="f2">{guide.title}</h3>
+        <p className="mt-2 mb-4 color-fg-muted">{guide.intro || ''}</p>
 
         <footer className="d-flex">
           <div>{authorString}</div>

lib/get-link-data.js

@@ -25,7 +25,7 @@ export default async (
 }
 
 async function processLink(link, context, option) {
-  const opts = { textOnly: true, encodeEntities: true }
+  const opts = { textOnly: true }
   // Parse the link in case it includes Liquid conditionals
   const linkPath = await renderContent(link.href || link, context, opts)
   if (!linkPath) return null

lib/process-learning-tracks.js

@@ -4,7 +4,7 @@ import getApplicableVersions from './get-applicable-versions.js'
 import { getDataByLanguage } from './get-data.js'
 import { executeWithFallback } from './render-with-fallback.js'
 
-const renderOpts = { textOnly: true, encodeEntities: true }
+const renderOpts = { textOnly: true }
 
 // This module returns an object that contains a single featured learning track
 // and an array of all the other learning tracks for the current version.

middleware/contextualizers/generic-toc.js

@@ -98,6 +98,9 @@ async function getTocItems(node, context, opts) {
         if (page.rawIntro) {
           // The intro can contain Markdown even though it might not
           // contain any Liquid.
+          // Deliberately don't use `textOnly:true` here because we intend
+          // to display the intro, in a table of contents component,
+          // with the HTML (dangerouslySetInnerHTML).
           intro = await page.renderProp('rawIntro', context)
         }
       }

middleware/featured-links.js

@@ -30,7 +30,6 @@ export default async function featuredLinks(req, res, next) {
           req.context,
           {
             textOnly: true,
-            encodeEntities: true,
           }
         )
         const item = { title, href: req.context.page.featuredLinks[key][i].href }