Merge pull request #14 from mulesoft/connectors-article-page

Hook connector article pages to UI model
mulesoft · Jan 21, 2020 · c6b15a4 · c6b15a4
2 parents 105fcb8 + 45d99b9
commit c6b15a4
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 59 deletions.
diff --git a/gulp.d/tasks/build-preview-pages.js b/gulp.d/tasks/build-preview-pages.js
@@ -25,14 +25,13 @@ module.exports = (src, previewSrc, previewDest, sink = () => map(), layouts = {}
     toPromise(
       merge(
         compileLayouts(src, layouts),
-        registerPartials(src),
         registerHelpers(src),
+        registerPartials(src),
         copyImages(previewSrc, previewDest)
       )
     ),
   ])
-    .then(([baseUiModel]) => ({ ...baseUiModel, env: process.env }))
-    .then((baseUiModel) =>
+    .then(([baseUiModel]) =>
       merge(
         vfs.src('**/*.adoc', { base: previewSrc, cwd: previewSrc }).pipe(
           map((file, enc, next) => {
@@ -54,17 +53,19 @@ module.exports = (src, previewSrc, previewDest, sink = () => map(), layouts = {}
               const componentName = doc.getAttribute('page-component-name', pageModel.src.component)
               const versionString = doc.getAttribute('page-version',
                 (doc.hasAttribute('page-component-name') ? undefined : pageModel.src.version))
+              let componentVersion
               if (componentName) {
                 const component = pageModel.component = uiModel.site.components[componentName]
-                pageModel.componentVersion = versionString
+                componentVersion = pageModel.componentVersion = versionString
                   ? component.versions.find(({ version }) => version === versionString)
                   : component.latest
               } else {
                 const component = pageModel.component = Object.values(uiModel.site.components)[0]
-                pageModel.componentVersion = component.latest
+                componentVersion = pageModel.componentVersion = component.latest
               }
               pageModel.module = 'ROOT'
-              pageModel.version = pageModel.componentVersion.version
+              pageModel.version = componentVersion.version
+              pageModel.displayVersion = componentVersion.displayVersion
               pageModel.editUrl = pageModel.origin.editUrlPattern.replace('%s', file.relative)
               pageModel.breadcrumbs = [{ content: pageModel.title, url: pageModel.url, urlType: 'internal' }]
               pageModel.versions = pageModel.component.versions.map(({ version, displayVersion, url }, idx, arr) => {
@@ -77,8 +78,7 @@ module.exports = (src, previewSrc, previewDest, sink = () => map(), layouts = {}
                 }
                 return pageVersion
               })
-              const componentVersionAttributes = pageModel.componentVersion.asciidocConfig.attributes
-              pageModel.attributes = Object.entries(Object.assign(attributes, componentVersionAttributes))
+              pageModel.attributes = Object.entries({ ...attributes, ...componentVersion.asciidocConfig.attributes })
                 .filter(([name, val]) => name.startsWith('page-'))
                 .reduce((accum, [name, val]) => ({ ...accum, [name.substr(5)]: val }), {})
               pageModel.contents = Buffer.from(doc.convert())
@@ -115,6 +115,8 @@ module.exports = (src, previewSrc, previewDest, sink = () => map(), layouts = {}
 function loadSampleUiModel (src) {
   return fs.readFile(ospath.join(src, 'ui-model.yml'), 'utf8').then((contents) => {
     const uiModel = yaml.safeLoad(contents)
+    uiModel.env = process.env
+    uiModel.site.contentCatalog = { resolvePage, resolvePageUrl }
     Object.values(uiModel.site.components).forEach(({ versions }) => {
       versions.forEach((version) => {
         if (!('displayVersion' in version)) version.displayVersion = version.version
@@ -135,6 +137,8 @@ function registerPartials (src) {
 }
 
 function registerHelpers (src) {
+  handlebars.registerHelper('resolvePage', resolvePage)
+  handlebars.registerHelper('resolvePageUrl', resolvePageUrl)
   return vfs.src('helpers/*.js', { base: src, cwd: src }).pipe(
     map((file, enc, next) => {
       handlebars.registerHelper(file.stem, requireFromString(file.contents.toString()))
@@ -156,6 +160,14 @@ function copyImages (src, dest) {
   return vfs.src('**/*.{png,svg}', { base: src, cwd: src }).pipe(vfs.dest(dest))
 }
 
+function resolvePage (spec, context = {}) {
+  if (spec) return { pub: { url: resolvePageUrl(spec) } }
+}
+
+function resolvePageUrl (spec, context = {}) {
+  if (spec) return '/' + spec.slice(0, spec.lastIndexOf('.')) + '.html'
+}
+
 function toPromise (stream) {
   return new Promise((resolve, reject) => stream.on('error', reject).on('finish', resolve))
 }
diff --git a/preview-site-src/connector-relnotes.adoc b/preview-site-src/connector-relnotes.adoc
@@ -0,0 +1,5 @@
+= Salesforce Connector Release Notes
+:page-component-name: general
+
+This page contains the release notes for the Salesforce Connector.
+It's just a placeholder.
diff --git a/preview-site-src/ui-model.yml b/preview-site-src/ui-model.yml
@@ -1,4 +1,4 @@
-antoraVersion: '2.3.0-alpha.1'
+antoraVersion: '2.3.0-alpha.2'
 site:
   url: &home_url /home.html
   title: MuleSoft Documentation
@@ -70,7 +70,10 @@ site:
           attributes:
             page-component-desc: Connect to Anypoint MQ, MuleSoft's multi-tenant cloud messaging service for the enterprise.
             page-connector-type: Connector
-            page-exchange-url: https://www.anypoint.mulesoft.com/exchange/com.mulesoft.connectors/anypoint-mq-connector/
+            page-connector-tier: Select
+            page-exchange-asset-id: anypoint-mq-connector
+            page-exchange-group-id: com.mulesoft.connectors
+            page-mule-runtime-version: 4.1.1
             page-vendor-name: msmq
             page-vendor-title: MuleSoft
       versions:
@@ -87,7 +90,10 @@ site:
             page-component-desc: Connect to the Salesforce SOAP API, REST API, Bulk API, and Streaming API.
             page-connector-type: Connector
             page-connector-tier: Select
-            page-exchange-url: https://www.anypoint.mulesoft.com/exchange/com.mulesoft.connectors/mule-salesforce-connector/
+            page-exchange-asset-id: mule-salesforce-connector
+            page-exchange-group-id: com.mulesoft.connectors
+            page-mule-runtime-version: 4.1.1
+            page-release-notes-page: connector-relnotes.adoc
             page-vendor-name: salesforce
             page-vendor-title: Salesforce
         navigation:
@@ -99,6 +105,18 @@ site:
       - version: '0'
         displayVersion: 'Mule 3'
         url: '#'
+        asciidocConfig:
+          attributes:
+            page-component-desc: Connect to the Salesforce SOAP API, REST API, Bulk API, and Streaming API.
+            page-connector-type: Connector
+            page-connector-tier: Select
+            page-connector-versions: 5.4.10 to 8.9.x
+            page-exchange-asset-id: org.mule.modules
+            page-exchange-group-id: mule-module-sfdc
+            page-mule-runtime-version: 3.5.0
+            page-release-notes-page: connector-relnotes.adoc
+            page-vendor-name: salesforce
+            page-vendor-title: Salesforce
     connector-devkit: &component
       name: connector-devkit
       title: Connector DevKit

diff --git a/src/css/pages/connector-article.css b/src/css/pages/connector-article.css
@@ -54,6 +54,7 @@
   & .col:first-child,
   & .categories-header {
     color: var(--aluminum-5);
+    padding-right: var(--sm);
   }
 
   & .col:last-child {

diff --git a/src/helpers/resolvePageUrl.js b/src/helpers/resolvePageUrl.js
@@ -0,0 +1,7 @@
+'use strict'
+
+// NOTE override built-in resolvePageUrl to fix bug
+module.exports = function (spec, { data: { root }, hash: context }) {
+  const page = root.site.contentCatalog.resolvePage(spec, context)
+  if (page) return page.pub.url
+}
diff --git a/src/partials/connectors/connectors-article.hbs b/src/partials/connectors/connectors-article.hbs
@@ -1,20 +1,20 @@
 <header class="header-connectors">
   <div class="flex align-center header-connectors-title">
-    <a class="flex align-center link" href="#">
+    <a class="flex align-center link" href="{{relativize site.components.connectors.url}}">
       <svg class="icon icon-md icon-back-arrow"><use xlink:href="#icon-forward-arrow"/></svg>
       All Connectors
     </a>
   </div>
   <div class="flex align-center">
     <div class="flex align-center justify-center connector-avatar">
       <img
-        alt="Salesforce logo"
+        alt="{{{page.attributes.vendor-title}}} logo"
         class="connector-avatar-img"
-        src="{{uiRootPath}}/img/logos/salesforce.png"
+        src="{{uiRootPath}}/img/logos/{{page.attributes.vendor-name}}.png"
         width="75"
       >
     </div>
-    <h1 class="h1">Salesforce Connector</h1>
-  </div>
+    <h1 class="h1">{{{page.title}}}</h1>
+   </div>
 </header>
 {{> article}}
diff --git a/src/partials/connectors/connectors-menu.hbs b/src/partials/connectors/connectors-menu.hbs
diff --git a/src/partials/connectors/connectors-sidebar.hbs b/src/partials/connectors/connectors-sidebar.hbs
@@ -1,30 +1,42 @@
 <div class="connector-sidebar">
   <div class="flex align-center justify-justified row">
-    <div class="col">Version</div>
+    <div class="col">Versions</div>
+    {{!--
     <div class="col">
 {{> connectors-version-menu}}
     </div>
+    --}}
+    <div class="col">{{#with page.attributes.connector-versions}}{{this}}{{else}}{{page.version}}.x{{/with}}</div>
   </div>
   <div class="flex align-center justify-justified row">
     <div class="col">Runtime</div>
-    <div class="col">Mule 4</div>
+    {{#with page.attributes.mule-runtime-version}}
+    <div class="col">Mule {{this}} or later</div>
+    {{else}}
+    <div class="col">{{#if (eq page.version '0')}}Mule 3{{else}}Mule 4{{/if}}</div>
+    {{/with}}
   </div>
   <div class="flex align-center justify-justified row">
     <div class="col">Tier</div>
     <div class="col">
       <div class="flex align-center">
-        Select
-        <div class="flex align-center justify-center tier-help js-connector-tier-trigger" data-tier="select">
+        {{{page.attributes.connector-tier}}}
+        <div class="flex align-center justify-center tier-help js-connector-tier-trigger" data-tier="{{{page.attributes.connector-tier}}}">
           <svg class="icon icon-help"><use xlink:href="#icon-help"/></svg>
         </div>
       </div>
     </div>
   </div>
   <section class="flex col connector-sidebar-categories">
     <header class="row categories-header">Links</header>
-    <a class="flex align-center link" href="//docs.mulesoft.com/connectors/amazon/amazon-dynamodb-connector">Release notes</a>
-    <a class="flex align-center link" href="//docs.mulesoft.com/connectors/amazon/amazon-dynamodb-connector" target="_blank">View in Exchange
+    {{#with (resolvePageUrl page.attributes.release-notes-page)}}
+    <a class="flex align-center link" href="{{relativize this}}">Release notes</a>
+    {{else}}
+    {{/with}}
+    {{#if page.attributes.exchange-asset-id}}
+    <a class="flex align-center link" href="https://www.anypoint.mulesoft.com/exchange/{{page.attributes.exchange-group-id}}/{{page.attributes.exchange-asset-id}}" target="_blank">View in Exchange
       <svg class="icon icon-md icon-external"><use xlink:href="#icon-external"/></svg>
     </a>
+    {{/if}}
   </section>
 </div>
diff --git a/src/partials/connectors/connectors-table.hbs b/src/partials/connectors/connectors-table.hbs
@@ -30,7 +30,7 @@
             <a class="link js-connector-qlink-mule3" href="#">Mule 3</a>
           </li>
           <li>
-            <a class="link js-connector-qlink-release-notes" href="#">Release notes</a>
+            <a class="link js-connector-qlink-relnotes" href="#">Release notes</a>
           </li>
           <li>
             <a class="link js-connector-qlink-exchange" href="#" target="_blank">View in Exchange
@@ -58,8 +58,13 @@
     "title": "{{delete-suffix connector.title ' Connector'}}",
     "type": "{{attributes.page-connector-type}}",
     "iconUrl": "{{@root.uiRootPath}}/img/icons/connectors/icon-{{delete-suffix connector.name '-connector'}}.svg",
-    "pageUrl": "{{relativize connector.url}}",
-    "exchangeUrl": "{{attributes.page-exchange-url}}",
+    {{#if attributes.page-exchange-asset-id}}
+    "exchangeUrl": "https://www.anypoint.mulesoft.com/exchange/{{attributes.page-exchange-group-id}}/{{attributes.page-exchange-asset-id}}/",
+    {{/if}}
+    {{#with (resolvePageUrl attributes.page-release-notes-page)}}
+    "releaseNotesPageUrl": "{{relativize this}}",
+    {{else}}
+    {{/with}}
     {{#with connector.latest as |latest|}}
     "latestVersion": {
       "version": "{{latest.version}}",
@@ -132,6 +137,8 @@
         row.querySelector('.js-connector-qlinks').removeChild(row.querySelector('.js-connector-qlink-mule3').parentNode)
       }
       row.querySelector('.js-connector-qlink-exchange').href = connector.exchangeUrl
+      var relnotesQLink = row.querySelector('.js-connector-qlink-relnotes')
+      if (!(relnotesQLink.href = connector.releaseNotesPageUrl)) relnotesQLink.parentNode.style.display = 'none'
       return accum.concat(row)
     }, [])
     slot.innerHTML = ''

diff --git a/src/partials/connectors/connectors-version-menu.hbs b/src/partials/connectors/connectors-version-menu.hbs
@@ -1,23 +1,31 @@
 <div class="select-wrapper">
-  <span class="select js-connector-version-trigger">v5.4.0–4.0.1</span>
+  <span class="select js-connector-version-trigger">9.2.0 to 9.8.1</span>
 </div>
 <div class="js-connector-version" style="display: none;">
   <div class="popover popover-connector-version">
     <header class="flex header">
-      <div class="col">Runtime</div>
-      <div class="col">Connector version</div>
+      <div class="col">Mule Runtime</div>
+      <div class="col">Connector</div>
     </header>
     <ol class="list">
       <li>
         <a class="link" href="#">
-          <div class="col">4.0.0 and later</div>
-          <div class="col">3.4.0 and later</div>
+          <div class="col">&#8805; 4.1.1</div>
+          <div class="col">9.2.0 to 9.8.1</div>
         </a>
+      </li>
       <li>
         <a class="link" href="#">
-          <div class="col">4.0.1 to 5.4.0</div>
-          <div class="col">2.7.0 to 4.3.4</div>
+          <div class="col">&#8805; 4.1.0</div>
+          <div class="col">9.1.0 to 9.1.2</div>
         </a>
+      </li>
+      <li>
+        <a class="link" href="#">
+          <div class="col">&#8805; 3.5.0</div>
+          <div class="col">5.4.10 to 8.9.0</div>
+        </a>
+      </li>
     </ol>
   </div>
 </div>