Merge pull request #18436 from github/version-product-landing-frontmatter

Support conditionals in product landing frontmatter values

Author: sarahs

layouts/product-landing.html

@@ -11,7 +11,7 @@
 
       <div class="container-xl px-3 px-md-6 pt-3 pb-2">
         <header class="d-lg-flex gutter-lg mb-6">
-          <div class="col-12 col-lg-6 mb-3 mb-lg-0">
+          <div class="{% if page.product_video and page.product_video != '' %}col-12 col-lg-6 mb-3 mb-lg-0{% endif %}">
             <span class="text-mono text-gray">Product</span>
             <h1 class="mb-3 font-mktg">
               {{ page.shortTitle }}
@@ -22,24 +22,26 @@ <h1 class="mb-3 font-mktg">
             </h1>
             <div class="lead-mktg text-gray">{{ page.intro }}</div>
 
-            <a href="{{ page.introLinks.quickstart }}" class="btn-mktg btn-large f4 mt-3 mr-3">
+            {% if page.introLinks.quickstart and page.introLinks.quickstart != '' %}
+            <a href="/{{ currentLanguage }}{% if currentVersion != 'free-pro-team@latest' %}/{{ currentVersion }}{% endif %}{{ page.introLinks.quickstart }}" class="btn-mktg btn-large f4 mt-3 mr-3">
               {% data ui.product_landing.quick_start %}
             </a>
+            {% endif %}
 
-            {% if page.introLinks.reference %}
-              <a href="{{ page.introLinks.reference }}" class="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3">
+            {% if page.introLinks.reference and page.introLinks.reference != '' %}
+              <a href="/{{ currentLanguage }}{% if currentVersion != 'free-pro-team@latest' %}/{{ currentVersion }}{% endif %}{{ page.introLinks.reference }}" class="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3">
                 {% data ui.product_landing.reference_guides %}
               </a>
             {% endif %}
 
-            {% if page.introLinks.overview %}
-              <a href="{{ page.introLinks.overview }}" class="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3">
+            {% if page.introLinks.overview and page.introLinks.overview != '' %}
+              <a href="/{{ currentLanguage }}{% if currentVersion != 'free-pro-team@latest' %}/{{ currentVersion }}{% endif %}{{ page.introLinks.overview }}" class="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3">
                 {% data ui.product_landing.overview %}
               </a>
             {% endif %}
           </div>
 
-          {% if page.product_video %}
+          {% if page.product_video and page.product_video != '' %}
             <div class="col-12 col-lg-6">
               <div class="position-relative" style="padding-bottom:56.25%;">
                 {% unless process.env.AIRGAP %}

lib/frontmatter.js

@@ -109,8 +109,7 @@ const schema = {
     },
     // Show in `product-landing.html`
     product_video: {
-      type: 'string',
-      format: 'url'
+      type: 'string'
     },
     interactive: {
       type: 'boolean'

lib/get-link-data.js

@@ -2,6 +2,7 @@ const path = require('path')
 const findPage = require('./find-page')
 const nonEnterpriseDefaultVersion = require('./non-enterprise-default-version')
 const removeFPTFromPath = require('./remove-fpt-from-path')
+const renderContent = require('./render-content')
 
 // rawLinks is an array of paths: [ '/foo' ]
 // we need to convert it to an array of localized objects: [ { href: '/en/foo', title: 'Foo', intro: 'Description here' } ]
@@ -27,15 +28,17 @@ module.exports = async (rawLinks, context, option = { title: true, intro: true }
 }
 
 const processLink = async (link, context, option) => {
-  const linkPath = link.href || link
+  const opts = { textOnly: true, encodeEntities: true }
+  // Parse the link in case it includes Liquid conditionals
+  const linkPath = await renderContent((link.href || link), context, opts)
+  if (!linkPath) return null
+
   const version = context.currentVersion === 'homepage' ? nonEnterpriseDefaultVersion : context.currentVersion
   const href = removeFPTFromPath(path.join('/', context.currentLanguage, version, linkPath))
 
   const linkedPage = findPage(href, context.pages, context.redirects)
   if (!linkedPage) return null
 
-  const opts = { textOnly: true, encodeEntities: true }
-
   const result = { href, page: linkedPage }
 
   if (option.title) {

lib/page.js

@@ -68,6 +68,13 @@ class Page {
     this.rawPermissions = this.permissions
     this.rawLearningTracks = this.learningTracks
     this.rawIncludeGuides = this.includeGuides
+    this.raw_product_video = this.product_video
+
+    if (this.introLinks) {
+      this.introLinks.rawQuickstart = this.introLinks.quickstart
+      this.introLinks.rawReference = this.introLinks.reference
+      this.introLinks.rawOverview = this.introLinks.overview
+    }
 
     // a page should only be available in versions that its parent product is available in
     const versionsParentProductIsNotAvailableIn = getApplicableVersions(this.versions, this.fullPath)
@@ -146,6 +153,13 @@ class Page {
     this.introPlainText = await renderContent(this.rawIntro, context, { textOnly: true })
     this.title = await renderContent(this.rawTitle, context, { textOnly: true, encodeEntities: true })
     this.shortTitle = await renderContent(this.shortTitle, context, { textOnly: true, encodeEntities: true })
+    this.product_video = await renderContent(this.raw_product_video, context, { textOnly: true })
+
+    if (this.introLinks) {
+      this.introLinks.quickstart = await renderContent(this.introLinks.rawQuickstart, context, { textOnly: true })
+      this.introLinks.reference = await renderContent(this.introLinks.rawReference, context, { textOnly: true })
+      this.introLinks.overview = await renderContent(this.introLinks.rawOverview, context, { textOnly: true })
+    }
 
     let markdown = this.mapTopic
       // get the map topic child articles from the siteTree