feat(controls): add help text to API dropdown
This commit is contained in:
Benedikt Rötsch
committed by
Khaled Garbaya
Khaled Garbaya
parent
1406faed97
commit
21b7a9dd1f
60
app.js
60
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()
|
||||
}))
|
||||
|
||||
|
||||
@@ -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",
|
||||
"contentDeliveryApiHelp": "Diese API zeigt veröffentlichte Inhalte",
|
||||
"contentPreviewApiLabel": "Content Preview API",
|
||||
"contentPreviewApiHelp": "Diese API zeigt unveröffentlichte Inhalte und Änderungen",
|
||||
"cdaApiLabel": "Content Delivery API",
|
||||
"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",
|
||||
|
||||
@@ -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.",
|
||||
"metaTwitterCard": "This is \"The Example App\", a reference for building your own applications using Contentful.",
|
||||
"metaImageAlt": "This is \"The Example App\", a reference for building your own applications using Contentful.",
|
||||
"metaImageDescription": "This is \"The Example App\", a reference for building your own applications using Contentful.",
|
||||
"viewOnGithub": "View on GitHub",
|
||||
"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.",
|
||||
"contentDeliveryApiLabel": "Content Delivery API",
|
||||
"contentDeliveryApiHelp": "This API fetches published content from the Content Delivery API",
|
||||
"contentPreviewApiLabel": "Content Preview API",
|
||||
"contentPreviewApiHelp": "This API fetches un-published content from the Content Preview API",
|
||||
"cdaApiLabel": "Content Delivery API",
|
||||
"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",
|
||||
|
||||
@@ -27,41 +27,43 @@ html
|
||||
header.header
|
||||
.header__upper-wrapper
|
||||
.header__upper.layout-centered
|
||||
.header__upper-title
|
||||
a.header__upper-link#about-this-modal-trigger(href='#')
|
||||
.header__upper-first
|
||||
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
|
||||
a.header__upper-link(href='https://github.com/contentful/the-example-app.nodejs' target='_blank' rel='noopener')
|
||||
svg.header__upper-icon
|
||||
use(xlink:href='/icons/icons.svg#github')
|
||||
| #{translate('viewOnGithub', currentLocale.code)}
|
||||
.header__controls
|
||||
.header__controls_group
|
||||
form(action='' method='get')
|
||||
.header__controls_label API: #{currentApi.label}
|
||||
.header__controls_dropdown
|
||||
.header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
|
||||
button.header__controls_button(
|
||||
type='submit'
|
||||
name='api'
|
||||
value='cda'
|
||||
class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
|
||||
)
|
||||
| #{translate('contentDeliveryApiLabel', currentLocale.code)}:
|
||||
br
|
||||
span.header__controls_button_help= translate('contentDeliveryApiHelp', currentLocale.code)
|
||||
button.header__controls_button(
|
||||
type='submit'
|
||||
name='api'
|
||||
value='cpa'
|
||||
class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
|
||||
)
|
||||
| #{translate('contentPreviewApiLabel', currentLocale.code)}:
|
||||
br
|
||||
span.header__controls_button_help= translate('contentPreviewApiHelp', currentLocale.code)
|
||||
input(type='hidden' name='locale' value=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')
|
||||
svg.header__upper-icon
|
||||
use(xlink:href='/icons/icons.svg#github')
|
||||
| #{translate('viewOnGithub', currentLocale.code)}
|
||||
|
||||
.header__controls
|
||||
.header__controls_group
|
||||
form(action='' method='get')
|
||||
.header__controls_label API: #{currentApi.label}
|
||||
.header__controls_dropdown
|
||||
.header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
|
||||
button.header__controls_button(
|
||||
type='submit'
|
||||
name='api'
|
||||
value='cda'
|
||||
class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
|
||||
)
|
||||
| #{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' : ''}`
|
||||
)
|
||||
| #{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
|
||||
form(action='' method='get')
|
||||
|
||||
Reference in New Issue
Block a user