Website: update article links on /testimonials page (#24850)

Closes: #24746

Changes:
- Replaced the hard-coded links to articles on the /testimonials page
with server-side rendered generated links to articles. These links are
now built using the website's markdown articles configuration.
- Added support for a new meta tag on articles:
`showOnTestimonialsPageWithEmoji` If provided and set to one of the four
supported emoji (🥀, 🔌, 🚪, or 🪟), a link to the article will be added to
the /testimonials page. Example: `<meta
name="showOnTestimonialsPageWithEmoji" value="🥀">`.
- Updated the build-static-content script to throw an error if an
article has an invalid `showOnTestimonialsPageWithEmoji` meta tag value.
- Updated recent case study articles to have a
`showOnTestimonialsPageWithEmoji` meta tag.


@Drew-P-drawers When this PR is merged, you can add links to the new
case studies articles to the /testimonials page with a
`showOnTestimonialsPageWithEmoji` meta tag. The definitions for each of
the supported emoji are in this [google
doc](https://docs.google.com/document/d/1-KWQa3uMIJzeitzDRmzT3SnUoFCfcFCb6K2lyVt-Gy0/edit?tab=t.0#heading=h.oskipmb8530l)

articles/consolidate-multiple-tools-with-fleet.md

@@ -88,3 +88,4 @@ To learn more about how Fleet can support your organization, visit [fleetdm.com/
 <meta name="publishedOn" value="2024-12-06">
 <meta name="articleTitle" value="Leading financial company consolidates multiple tools with Fleet">
 <meta name="description" value="Leading financial company consolidates multiple tools with Fleet">
+<meta name="showOnTestimonialsPageWithEmoji" value="🥀">

articles/foursquare-quickly-migrates-to-fleet.md

@@ -87,3 +87,4 @@ Foursquare’s migration to Fleet for device management highlights its commitmen
 <meta name="publishedOn" value="2024-12-13">
 <meta name="articleTitle" value="Foursquare quickly migrates to Fleet for Device Management">
 <meta name="description" value="Foursquare quickly migrates to Fleet for Device Management">
+<meta name="showOnTestimonialsPageWithEmoji" value="🚪">

articles/global-cloud-platform-simplifies-device-management-with-fleet.md

@@ -95,3 +95,4 @@ I love Fleet.
 <meta name="publishedOn" value="2024-12-09">
 <meta name="articleTitle" value="Global edge cloud platform simplifies device management with Fleet">
 <meta name="description" value="Global edge cloud platform simplifies device management">
+<meta name="showOnTestimonialsPageWithEmoji" value="🪟">

articles/global-social-media-platform-switches-to-fleet.md

@@ -77,3 +77,5 @@ Transitioning to Fleet provided the platform with a strategic solution that addr
 <meta name="publishedOn" value="2024-12-16">
 <meta name="articleTitle" value="Global social media platform migrates to Fleet">
 <meta name="description" value="Global social media platform migrates to Fleet">
+<meta name="showOnTestimonialsPageWithEmoji" value="🥀">
+

articles/large-gaming-company-enhances-server-observability-with-fleet.md

@@ -78,3 +78,4 @@ By adopting Fleet for server observability, they've successfully addressed scala
 <meta name="publishedOn" value="2024-12-11">
 <meta name="articleTitle" value="Large gaming company enhances server observability with Fleet">
 <meta name="description" value="Large gaming company enhances server observability with Fleet">
+<meta name="showOnTestimonialsPageWithEmoji" value="🔌">

articles/vehicle-manufacturer-transitions-to-fleet-for-endpoint-security.md

@@ -82,3 +82,4 @@ The decision to purchase Fleet was driven by the need for a more reliable, compr
 <meta name="publishedOn" value="2024-12-12">
 <meta name="articleTitle" value="Vehicle manufacturer transitions to Fleet for endpoint security">
 <meta name="description" value="Vehicle manufacturer transitions to Fleet for endpoint security">
+<meta name="showOnTestimonialsPageWithEmoji" value="🚪">

articles/worldwide-security-and-authentication-platform-chooses-fleet-for-linux.md

@@ -87,3 +87,4 @@ To learn more about how Fleet can support your organization, visit [fleetdm.com/
 <meta name="publishedOn" value="2024-12-10">
 <meta name="articleTitle" value="Worldwide security and authentication platform chooses Fleet for Linux management">
 <meta name="description" value="Worldwide security and authentication platform switches to Fleet for Linux device management">
+<meta name="showOnTestimonialsPageWithEmoji" value="🚪">

website/api/controllers/view-testimonials.js

@@ -21,7 +21,7 @@ module.exports = {
     if (!_.isObject(sails.config.builtStaticContent) || !_.isArray(sails.config.builtStaticContent.testimonials) || !sails.config.builtStaticContent.compiledPagePartialsAppPath) {
       throw {badConfig: 'builtStaticContent.testimonials'};
     }
-    // Get testimonials for the <scrolalble-tweets> component.
+    // Get testimonials for the page contents
     let testimonials = _.clone(sails.config.builtStaticContent.testimonials);
 
     // Filter the testimonials by product category
@@ -97,11 +97,27 @@ module.exports = {
       return testimonial.youtubeVideoUrl;
     });
 
+    // Get articles with a showOnTestimonialsPageWithEmoji meta tag to display on this page.
+    let articles = sails.config.builtStaticContent.markdownPages.filter((page)=>{
+      if(_.startsWith(page.htmlId, 'articles')) {
+        return page;
+      }
+    });
+    let articlesForThisPage = _.filter(articles, (article)=>{
+      return article.meta.showOnTestimonialsPageWithEmoji;
+    });
+    // Sort the articles by their publish date.
+    articlesForThisPage = _.sortBy(articlesForThisPage, 'meta.publishedOn');
+
+
+
+
     return {
       testimonialsForMdm,
       testimonialsForSoftwareManagement,
       testimonialsForObservability,
       testimonialsWithVideoLinks,
+      articlesForThisPage,
     };
 
   }

website/scripts/build-static-content.js

@@ -511,18 +511,24 @@ module.exports = {
                     if (!isExternal) { // If the image is hosted on fleetdm.com, we'll modify the meta value to reference the file directly in the `website/assets/` folder
                       embeddedMetadata.articleImageUrl = embeddedMetadata.articleImageUrl.replace(/https?:\/\//, '').replace(/^fleetdm\.com/, '');
                     } else { // If the value is a link to an image that will not be hosted on fleetdm.com, we'll throw an error.
-                      throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, change the value of the meta tag to be an image that will be hosted on fleetdm.com`);
+                      throw new Error(`Failed compiling markdown content: An article page has an invalid articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, change the value of the meta tag to be an image that will be hosted on fleetdm.com`);
                     }
                   } else if(inWebsiteAssetFolder) { // If the `articleImageUrl` value is a relative link to the `website/assets/` folder, we'll modify the value to link directly to that folder.
                     embeddedMetadata.articleImageUrl = embeddedMetadata.articleImageUrl.replace(/^\.\.\/website\/assets/g, '');
                   } else { // If the value is not a url and the relative link does not go to the 'website/assets/' folder, we'll throw an error.
-                    throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, change the value of the meta tag to be a URL or repo relative link to an image in the 'website/assets/images' folder`);
+                    throw new Error(`Failed compiling markdown content: An article page has an invalid articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, change the value of the meta tag to be a URL or repo relative link to an image in the 'website/assets/images' folder`);
                   }
                 }
                 if(embeddedMetadata.description && embeddedMetadata.description.length > 150) {
                   // Throwing an error if the article's description meta tag value is over 150 characters long
                   throw new Error(`Failed compiling markdown content: An article page has an invalid description meta tag (<meta name="description" value="${embeddedMetadata.description}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, make sure the value of the meta description is less than 150 characters long.`);
                 }
+                if(embeddedMetadata.showOnTestimonialsPageWithEmoji){
+                  // Throw an error if a showOnTestimonialsPageWithEmoji value is not one of: 🥀, 🔌, 🚪, or 🪟.
+                  if(!['🥀', '🔌', '🚪', '🪟'].includes(embeddedMetadata.showOnTestimonialsPageWithEmoji)){
+                    throw new Error(`Failed compiling markdown content: An article page has an invalid showOnTestimonialsPageWithEmoji meta tag (<meta name="showOnTestimonialsPageWithEmoji" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, change the value of the meta tag to be one of 🥀, 🔌, 🚪, or 🪟 and try running this script again.`);
+                  }
+                }
                 // For article pages, we'll attach the category to the `rootRelativeUrlPath`.
                 // If the article is categorized as 'product' we'll replace the category with 'use-cases', or if it is categorized as 'success story' we'll replace it with 'device-management'
                 rootRelativeUrlPath = (

website/views/pages/testimonials.ejs

@@ -117,26 +117,11 @@
           <p>Real-world stories of why the community and customers love Fleet.</p>
         </div>
         <div purpose="articles">
-          <div purpose="articles">
+          <%for(let article of articlesForThisPage) {%>
             <div purpose="article-link">
-              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/consolidate-multiple-tools-with-fleet">🥀 Leading financial company consolidates multiple tools with Fleet</animated-arrow-button>
+              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="<%= article.url%>"><%= article.meta.showOnTestimonialsPageWithEmoji %> <%= article.meta.articleTitle %></animated-arrow-button>
             </div>
-            <div purpose="article-link">
-              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/global-cloud-platform-simplifies-device-management-with-fleet">🪟 Global edge cloud platform simplifies device management with Fleet</animated-arrow-button>
-            </div>
-            <div purpose="article-link">
-              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/worldwide-security-and-authentication-platform-chooses-fleet-for-linux">🚪 Worldwide security and authentication platform chooses Fleet for Linux management</animated-arrow-button>
-            </div>
-            <div purpose="article-link">
-              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/large-gaming-company-enhances-server-observability-with-fleet">🔌 Large gaming company enhances server observability with Fleet</animated-arrow-button>
-            </div>
-            <div purpose="article-link">
-              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/vehicle-manufacturer-transitions-to-fleet-for-endpoint-security">🚪 Vehicle manufacturer transitions to Fleet for endpoint security</animated-arrow-button>
-            </div>
-            <div purpose="article-link">
-              <animated-arrow-button arrow-color="#3E4771" class="w-100" href="/announcements/foursquare-quickly-migrates-to-fleet">🚪 Foursquare quickly migrates to Fleet for Device Management</animated-arrow-button>
-            </div>
-          </div>
+          <% } %>
         </div>
         <div class="d-flex flex-row align-items-center justify-content-center">
           <a purpose="share-button" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml" target="_blank">Share your story</a>