Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(controls): add help text to API dropdown

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-11-08 15:28:45 +01:00
committed by Khaled Garbaya
parent 1406faed97
commit 21b7a9dd1f
4 changed files with 77 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app.js
View File

@@ -44,38 +44,8 @@ app.use(function (req, res, next) {
app.use(settings) app.use(settings)
// Make data available for our views to consume // 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 // 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() const space = await getSpace()
response.locals.locales = space.locales response.locals.locales = space.locales
@@ -91,6 +61,34 @@ app.use(catchErrors(async function (request, response, next) {
response.locals.currentLocale = defaultLocale 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() next()
})) }))

10
i18n/locales/de-DE.json
View File

@@ -1,5 +1,5 @@
{ {
"defaultTitle": "The Example App", "defaultTitle": "Die Beispielanwendung",
"whatIsThisApp": "Hilfe", "whatIsThisApp": "Hilfe",
"metaDescription": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.", "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.", "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.", "metaImageDescription": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
"viewOnGithub": "Auf GitHub ansehen", "viewOnGithub": "Auf GitHub ansehen",
"apiSwitcherHelp": "Ansehen des veröffentlichten und unveröffentlichten Inhalts durch Wechsel von Delivery und Preview APIs.", "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", "locale": "Sprache",
"localeQuestion": "Sie arbeiten mit verschiedenen Sprachen? Dann können Sie die Sprache für Anfragen an die Content Delivery API definieren.", "localeQuestion": "Sie arbeiten mit verschiedenen Sprachen? Dann können Sie die Sprache für Anfragen an die Content Delivery API definieren.",
"settingsLabel": "Einstellungen", "settingsLabel": "Einstellungen",

18
i18n/locales/en-US.json
View File

@@ -1,16 +1,16 @@
{ {
"defaultTitle": "The Example App", "defaultTitle": "The Example App",
"whatIsThisApp": "Help", "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.", "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", "locale": "Locale",
"localeQuestion": "Working with multiple languages? You can query the Content Delivery API for a specific locale.", "localeQuestion": "Working with multiple languages? You can query the Content Delivery API for a specific locale.",
"settingsLabel": "Settings", "settingsLabel": "Settings",

16
views/layout.pug
View File

@@ -27,16 +27,18 @@ html
header.header header.header
.header__upper-wrapper .header__upper-wrapper
.header__upper.layout-centered .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 svg.header__upper-icon
use(xlink:href='/icons/icons.svg#info') use(xlink:href='/icons/icons.svg#info')
span #{translate('whatIsThisApp', currentLocale.code)} span #{translate('whatIsThisApp', currentLocale.code)}
.header__upper-second
.header__upper-copy .header__upper-copy
a.header__upper-link(href='https://github.com/contentful/the-example-app.nodejs' target='_blank' rel='noopener') 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 svg.header__upper-icon
use(xlink:href='/icons/icons.svg#github') use(xlink:href='/icons/icons.svg#github')
| #{translate('viewOnGithub', currentLocale.code)} | #{translate('viewOnGithub', currentLocale.code)}
.header__controls .header__controls
.header__controls_group .header__controls_group
form(action='' method='get') form(action='' method='get')
@@ -49,18 +51,18 @@ html
value='cda' value='cda'
class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}` class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
) )
| #{translate('contentDeliveryApiLabel', currentLocale.code)}: | #{translate('cdaApiLabel', currentLocale.code)}:
br br
span.header__controls_button_help= translate('contentDeliveryApiHelp', currentLocale.code) span.header__controls_button_help= translate('cdaApiHelp', currentLocale.code)
button.header__controls_button( button.header__controls_button(
type='submit' type='submit'
name='api' name='api'
value='cpa' value='cpa'
class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}` class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
) )
| #{translate('contentPreviewApiLabel', currentLocale.code)}: | #{translate('cpaApiLabel', currentLocale.code)}:
br br
span.header__controls_button_help= translate('contentPreviewApiHelp', currentLocale.code) span.header__controls_button_help= translate('cpaApiHelp', currentLocale.code)
input(type='hidden' name='locale' value=currentLocale.code) input(type='hidden' name='locale' value=currentLocale.code)
.header__controls_group .header__controls_group