feat(controls): add help text to API dropdown

app.js

@@ -44,38 +44,8 @@ app.use(function (req, res, next) {
 app.use(settings)
 
 // Make data available for our views to consume
-app.use(catchErrors(async function (request, response, next) {
+app.use(async function (request, response, next) {
   // Get enabled locales from Contentful
-  response.locals.locales = [{code: 'en-US', name: 'U.S. English'}]
-  response.locals.currentLocale = response.locals.locales[0]
-  // Inject custom helpers
-  response.locals.helpers = helpers
-
-  // Make query string available in templates to render links properly
-  const qs = querystring.stringify(request.query)
-  response.locals.queryString = qs ? `?${qs}` : ''
-  response.locals.query = request.query
-  response.locals.currentPath = request.path
-
-  // Initialize translations and include them on templates
-  initializeTranslations()
-  response.locals.translate = translate
-
-  // Set active api based on query parameter
-  const apis = [
-    {
-      id: 'cda',
-      label: translate('contentDeliveryApiLabel', response.locals.currentLocale.code)
-    },
-    {
-      id: 'cpa',
-      label: translate('contentPreviewApiLabel', response.locals.currentLocale.code)
-    }
-  ]
-
-  response.locals.currentApi = apis
-    .find((api) => api.id === (request.query.api || 'cda'))
-
   const space = await getSpace()
   response.locals.locales = space.locales
 
@@ -91,6 +61,34 @@ app.use(catchErrors(async function (request, response, next) {
     response.locals.currentLocale = defaultLocale
   }
 
+  // Initialize translations and include them on templates
+  initializeTranslations()
+  response.locals.translate = translate
+
+  // Set active api based on query parameter
+  const apis = [
+    {
+      id: 'cda',
+      label: translate('cdaApiLabel', response.locals.currentLocale.code)
+    },
+    {
+      id: 'cpa',
+      label: translate('cpaApiLabel', response.locals.currentLocale.code)
+    }
+  ]
+
+  response.locals.currentApi = apis
+    .find((api) => api.id === (request.query.api || 'cda'))
+
+  // Inject custom helpers
+  response.locals.helpers = helpers
+
+  // Make query string available in templates to render links properly
+  const qs = querystring.stringify(request.query)
+  response.locals.queryString = qs ? `?${qs}` : ''
+  response.locals.query = request.query
+  response.locals.currentPath = request.path
+
   next()
 }))
 

i18n/locales/de-DE.json

@@ -1,5 +1,5 @@
 {
-  "defaultTitle": "The Example App",
+  "defaultTitle": "Die Beispielanwendung",
   "whatIsThisApp": "Hilfe",
   "metaDescription": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
   "metaTwitterCard": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
@@ -7,10 +7,10 @@
   "metaImageDescription": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
   "viewOnGithub": "Auf GitHub ansehen",
   "apiSwitcherHelp": "Ansehen des veröffentlichten und unveröffentlichten Inhalts durch Wechsel von Delivery und Preview APIs.",
-  "contentDeliveryApiLabel": "Content Delivery API",
+  "cdaApiLabel": "Content Delivery API",
-  "contentDeliveryApiHelp": "Diese API zeigt veröffentlichte Inhalte",
+  "cdaApiHelp": "Diese API zeigt veröffentlichte Inhalte",
-  "contentPreviewApiLabel": "Content Preview API",
+  "cpaApiLabel": "Content Preview API",
-  "contentPreviewApiHelp": "Diese API zeigt unveröffentlichte Inhalte und Änderungen",
+  "cpaApiHelp": "Diese API zeigt unveröffentlichte Inhalte und Änderungen",
   "locale": "Sprache",
   "localeQuestion": "Sie arbeiten mit verschiedenen Sprachen? Dann können Sie die Sprache für Anfragen an die Content Delivery API definieren.",
   "settingsLabel": "Einstellungen",

i18n/locales/en-US.json

@@ -1,16 +1,16 @@
 {
   "defaultTitle": "The Example App",
   "whatIsThisApp": "Help",
-  "metaDescription": "This is \"The Example App\", a reference for building your own applications using Contentful.",
+  "metaDescription": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
-  "metaTwitterCard": "This is \"The Example App\", a reference for building your own applications using Contentful.",
+  "metaTwitterCard": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
-  "metaImageAlt": "This is \"The Example App\", a reference for building your own applications using Contentful.",
+  "metaImageAlt": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
-  "metaImageDescription": "This is \"The Example App\", a reference for building your own applications using Contentful.",
+  "metaImageDescription": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
-  "viewOnGithub": "View on GitHub",
+  "viewOnGithub": "View on Github",
   "apiSwitcherHelp": "View the published or draft content by simply switching between the Deliver and Preview APIs.",
-  "contentDeliveryApiLabel": "Content Delivery API",
+  "cdaApiLabel": "Content Delivery API",
-  "contentDeliveryApiHelp": "This API fetches published content from the Content Delivery API",
+  "cdaApiHelp": "This is just some dummy text for styling. Please change me @todo",
-  "contentPreviewApiLabel": "Content Preview API",
+  "cpaApiLabel": "Content Preview API",
-  "contentPreviewApiHelp": "This API fetches un-published content from the Content Preview API",
+  "cpaApiHelp": "This is just some dummy text for styling. Please change me @todo",
   "locale": "Locale",
   "localeQuestion": "Working with multiple languages? You can query the Content Delivery API for a specific locale.",
   "settingsLabel": "Settings",

views/layout.pug

@@ -27,41 +27,43 @@ html
         header.header
           .header__upper-wrapper
             .header__upper.layout-centered
-              .header__upper-title
+              .header__upper-first
-                a.header__upper-link#about-this-modal-trigger(href='#')
+                a#about-this-modal-trigger(href='#').header__title
                   svg.header__upper-icon
                     use(xlink:href='/icons/icons.svg#info')
                   span #{translate('whatIsThisApp', currentLocale.code)}
-              .header__upper-copy
+              .header__upper-second
-                a.header__upper-link(href='https://github.com/contentful/the-example-app.nodejs' target='_blank' rel='noopener')
+                .header__upper-copy
-                  svg.header__upper-icon
+                  a.header__upper-link(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener')
-                    use(xlink:href='/icons/icons.svg#github')
+                    svg.header__upper-icon
-                  | #{translate('viewOnGithub', currentLocale.code)}
+                      use(xlink:href='/icons/icons.svg#github')
-              .header__controls
+                    | #{translate('viewOnGithub', currentLocale.code)}
-                .header__controls_group
+
-                  form(action='' method='get')
+                .header__controls
-                    .header__controls_label API: #{currentApi.label}
+                    .header__controls_group
-                    .header__controls_dropdown
+                      form(action='' method='get')
-                      .header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
+                        .header__controls_label API: #{currentApi.label}
-                      button.header__controls_button(
+                        .header__controls_dropdown
-                        type='submit'
+                          .header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
-                        name='api'
+                          button.header__controls_button(
-                        value='cda'
+                            type='submit'
-                        class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
+                            name='api'
-                      )
+                            value='cda'
-                        | #{translate('contentDeliveryApiLabel', currentLocale.code)}:
+                            class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
-                        br
+                          )
-                        span.header__controls_button_help= translate('contentDeliveryApiHelp', currentLocale.code)
+                            | #{translate('cdaApiLabel', currentLocale.code)}:
-                      button.header__controls_button(
+                            br
-                        type='submit'
+                            span.header__controls_button_help= translate('cdaApiHelp', currentLocale.code)
-                        name='api'
+                          button.header__controls_button(
-                        value='cpa'
+                            type='submit'
-                        class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
+                            name='api'
-                      )
+                            value='cpa'
-                        | #{translate('contentPreviewApiLabel', currentLocale.code)}:
+                            class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
-                        br
+                          )
-                        span.header__controls_button_help= translate('contentPreviewApiHelp', currentLocale.code)
+                            | #{translate('cpaApiLabel', currentLocale.code)}:
-                    input(type='hidden' name='locale' value=currentLocale.code)
+                            br
+                            span.header__controls_button_help= translate('cpaApiHelp', currentLocale.code)
+                        input(type='hidden' name='locale' value=currentLocale.code)
 
                 .header__controls_group
                   form(action='' method='get')