feat(controls): add help text to API dropdown

app.js

@@ -44,21 +44,6 @@ app.use(settings)
 
 // Make data available for our views to consume
 app.use(async function (request, response, next) {
-  // Set active api based on query parameter
-  const apis = [
-    {
-      id: 'cda',
-      label: 'Delivery'
-    },
-    {
-      id: 'cpa',
-      label: 'Preview'
-    }
-  ]
-
-  response.locals.currentApi = apis
-    .find((api) => api.id === (request.query.api || 'cda'))
-
   // Get enabled locales from Contentful
   const space = await getSpace()
   response.locals.locales = space.locales
@@ -79,6 +64,21 @@ app.use(async function (request, response, next) {
   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
 

i18n/locales/de-DE.json

@@ -1,14 +1,16 @@
 {
   "defaultTitle": "Die Beispielanwendung",
-  "whatIsThisApp": "Was ist 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.",
   "metaImageAlt": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
   "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.",
-  "apiLabelHelpcda": "(veröffentlichter Inhalt)",
+  "cdaApiLabel": "Content Delivery API",
-  "apiLabelHelpcpa": "(unveröffentlichter Inhalt)",
+  "cdaApiHelp": "Diese API zeigt veröffentlichte Inhalte",
+  "cpaApiLabel": "Content Preview API",
+  "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,14 +1,16 @@
 {
   "defaultTitle": "The Example App",
-  "whatIsThisApp": "What is this example app?",
+  "whatIsThisApp": "Help",
   "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, an application built to serve you as a reference while 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, an application built to serve you as a reference while building your own applications using Contentful.",
   "viewOnGithub": "View on Github",
   "apiSwitcherHelp": "View the published or draft content by simply switching between the Deliver and Preview APIs.",
-  "apiLabelHelpcda": "(published content)",
+  "cdaApiLabel": "Content Delivery API",
-  "apiLabelHelpcpa": "(draft content)",
+  "cdaApiHelp": "This is just some dummy text for styling. Please change me @todo",
+  "cpaApiLabel": "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

@@ -29,9 +29,9 @@ html
             .header__upper.layout-centered
               .header__upper-first
                 a#about-this-modal-trigger(href='#').header__title
-                  svg.course__overview-icon
+                  svg.header__upper-icon
                     use(xlink:href='/icons/icons.svg#info')
-                span #{translate('whatIsThisApp', currentLocale.code)}
+                  span #{translate('whatIsThisApp', currentLocale.code)}
               .header__upper-second
                 .header__upper-copy
                   a.header__upper-link(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener')
@@ -42,7 +42,7 @@ html
                 .header__controls
                     .header__controls_group
                       form(action='' method='get')
-                        .header__controls_label API: #{currentApi.label} #{translate(`apiLabelHelp${currentApi.id}`, currentLocale.code)}
+                        .header__controls_label API: #{currentApi.label}
                         .header__controls_dropdown
                           .header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
                           button.header__controls_button(
@@ -50,13 +50,19 @@ html
                             name='api'
                             value='cda'
                             class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
-                          ) Delivery #{translate('apiLabelHelpcda', currentLocale.code)}
+                          )
+                            | #{translate('cdaApiLabel', currentLocale.code)}:
+                            br
+                            span.header__controls_button_help= translate('cdaApiHelp', currentLocale.code)
                           button.header__controls_button(
                             type='submit'
                             name='api'
                             value='cpa'
                             class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
-                          ) Preview #{translate('apiLabelHelpcpa', currentLocale.code)}
+                          )
+                            | #{translate('cpaApiLabel', currentLocale.code)}:
+                            br
+                            span.header__controls_button_help= translate('cpaApiHelp', currentLocale.code)
                         input(type='hidden' name='locale' value=currentLocale.code)
 
                     .header__controls_group