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

feat(localization): add localization for static strings

Browse Source
This commit is contained in:
David Litvak
2017-11-01 15:37:15 +01:00
committed by Benedikt Rötsch
parent eaec09a594
commit 68a8052bdf
24 changed files with 333 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
views/course.pug
View File

@@ -10,12 +10,12 @@ block content
.layout-sidebar
section.layout-sidebar__sidebar
.layout-sidebar__sidebar-header
h2.layout-sidebar__sidebar-title Table of contents
h2.layout-sidebar__sidebar-title #{translate('tableOfContentsLabel', currentLocale.code)}
.layout-sidebar__sidebar-content
.table-of-contents
.table-of-contents__list
.table-of-contents__item
a.table-of-contents__link(href=`/courses/${course.fields.slug}${queryString}` class=(currentPath.endsWith(course.fields.slug) ? 'active' : '') class=(visitedLessons.includes(course.sys.id) ? 'visited' : '')) Course overview
a.table-of-contents__link(href=`/courses/${course.fields.slug}${queryString}` class=(currentPath.endsWith(course.fields.slug) ? 'active' : '') class=(visitedLessons.includes(course.sys.id) ? 'visited' : '')) #{translate('courseOverviewLabel', currentLocale.code)}
each l in course.fields.lessons
if l.fields
.table-of-contents__item
@@ -28,17 +28,17 @@ block content
h1.course__title= course.fields.title
+editorialFeatures(course)
.course__overview
h3.course__overview-title Overview
h3.course__overview-title #{translate('overviewLabel', currentLocale.code)}
if course.fields.duration
.course__overview-item
svg.course__overview-icon
use(xlink:href='/icons/icons.svg#duration')
.course__overview-value Duration: #{course.fields.duration} min
.course__overview-value #{translate('durationLabel', currentLocale.code)}: #{course.fields.duration} #{translate('minutesLabel', currentLocale.code)}
if course.fields.skillLevel
.course__overview-item
svg.course__overview-icon
use(xlink:href='/icons/icons.svg#skill-level')
.course__overview-value Skill level: #{course.fields.skillLevel}
.course__overview-value #{translate('skillLevelLabel', currentLocale.code)}: #{course.fields.skillLevel}
.course__overview-cta-wrapper
a.course__overview-cta.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}${queryString}`) Start course
a.course__overview-cta.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}${queryString}`) #{translate('startCourseLabel', currentLocale.code)}
.course__description !{helpers.markdown(course.fields.description)}

4
views/courses.pug
View File

@@ -9,12 +9,12 @@ block content
.layout-sidebar
section.layout-sidebar__sidebar
.layout-sidebar__sidebar-header
h2.layout-sidebar__sidebar-title Categories
h2.layout-sidebar__sidebar-title #{translate('categoriesLabel', currentLocale.code)}
.layout-sidebar__sidebar-content
.sidebar-menu
ul.sidebar-menu__list
li.sidebar-menu__item
a.sidebar-menu__link(href=`/courses${queryString}` class=(currentPath.endsWith('/courses') ? 'active' : '')) All courses
a.sidebar-menu__link(href=`/courses${queryString}` class=(currentPath.endsWith('/courses') ? 'active' : '')) #{translate('allCoursesLabel', currentLocale.code)}
each category in categories
li.sidebar-menu__item
a.sidebar-menu__link(href=`/courses/categories/${category.fields.slug}${queryString}` class=(currentPath.endsWith(category.fields.slug) ? 'active' : '')) #{category.fields.title}

18
views/error.pug
View File

@@ -6,18 +6,18 @@ block content
.layout-centered
+breadcrumb
.error
h1 Oops Something went wrong (#{error.status})
h2 Try:
h1 #{translate('somethingWentWrongLabel', currentLocale.code)} (#{error.status})
h2 #{translate('tryLabel', currentLocale.code)}:
ul
li Check if the content model has changed
li Check the selection has content in draft or published state (for Preview or Delivery)
li Check if there's any content for this locale
li Verify credentials are correct and up to date
li Check the stack trace below
li #{translate('contentModelChangedErrorLabel', currentLocale.code)}
li #{translate('draftOrPublishedErrorLabel', currentLocale.code)}
li #{translate('localeContentErrorLabel', currentLocale.code)}
li #{translate('verifyCredentialsErrorLabel', currentLocale.code)}
li #{translate('stackTraceErrorLabel', currentLocale.code)}
if error.response
h2 Error
h2 #{translate('errorLabel', currentLocale.code)}
pre.error__stack-trace
code.shell #{helpers.dump(error.response.data)}
h2 Stack trace
h2 #{translate('stackTraceLabel', currentLocale.code)}
pre.error__stack-trace
code.shell #{error.stack}

12
views/imprint.pug
View File

@@ -13,22 +13,22 @@ block content
table
tbody
tr
th Company:
th #{translate('companyLabel', currentLocale.code)}:
td Contentful GmbH
tr
th Office Berlin:
th #{translate('officeLabel', currentLocale.code)}:
td
| Ritterstr. 12-14
br
| 10969 Berlin
br
| Germany
| #{translate('germanyLabel', currentLocale.code)}
tr
th Registration Court:
th #{translate('registrationCourtLabel', currentLocale.code)}:
td Berlin-Charlottenburg HRB 155607 B
tr
th Managing Director:
th #{translate('managingDirectorLabel', currentLocale.code)}:
td Sascha Konietzke
tr
th VAT Number:
th #{translate('vatNumberLabel', currentLocale.code)}:
td DE275148225

56
views/layout.pug
View File

@@ -1,20 +1,20 @@
doctype html
html
head
title= helpers.formatMetaTitle(title)
title= helpers.formatMetaTitle(title, currentLocale.code)
link(rel='stylesheet', href='/stylesheets/style.css')
meta(name='viewport' content='width=device-width, initial-scale=1')
meta(name='description' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
meta(name='twitter:card' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
meta(property='og:title' content=helpers.formatMetaTitle(title))
meta(name='description' content=translate('metaDescription', currentLocale.code))
meta(name='twitter:card' content=translate('metaTwitterCard', currentLocale.code))
meta(property='og:title' content=helpers.formatMetaTitle(title, currentLocale.code))
meta(property='og:type' content='article')
meta(property='og:url' content=`http://contentful-example-app.herokuapp.com${currentPath}`)
meta(property='og:image' content='http://contentful-example-app.herokuapp.com/og-image.jpg')
meta(property='og:image:type' content='image/jpeg')
meta(property='og:image:width' content='1200')
meta(property='og:image:height' content='1200')
meta(property='og:image:alt' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
meta(property='og:description' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
meta(property='og:image:alt' content=translate('metaImageAlt', currentLocale.code))
meta(property='og:description' content=translate('metaImageDescription', currentLocale.code))
link(rel='apple-touch-icon' sizes='120x120' href='/apple-touch-icon.png')
link(rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png')
link(rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png')
@@ -31,55 +31,55 @@ html
a#about-this-modal-trigger(href='#').header__title
svg.course__overview-icon
use(xlink:href='/icons/icons.svg#info')
span What is this example app?
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')
svg.header__upper-icon
use(xlink:href='/icons/icons.svg#github')
| View on Github
| #{translate('viewOnGithub', currentLocale.code)}
.header__controls
.header__controls_group
form(action='' method='get')
.header__controls_label API: #{currentApi.label}
.header__controls_label API: #{currentApi.label} #{translate(`apiLabelHelp${currentApi.id}`, currentLocale.code)}
.header__controls_dropdown
.header__controls_help_text View the published or draft content by simply switching between the Deliver and Preview APIs.
.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' : ''}`
) Delivery (published content)
) Delivery #{translate('apiLabelHelpcda', currentLocale.code)}
button.header__controls_button(
type='submit'
name='api'
value='cpa'
class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
) Preview (draft content)
) Preview #{translate('apiLabelHelpcpa', currentLocale.code)}
input(type='hidden' name='locale' value=currentLocale.code)
.header__controls_group
form(action='' method='get')
input(type='hidden' name='api' value=currentApi.id)
.header__controls_label Locale: #{currentLocale.name}
.header__controls_label #{translate('locale', currentLocale.code)}: #{currentLocale.name}
.header__controls_dropdown
.header__controls_help_text Working with multiple languages? You can query the Content Delivery API for a specific locale.
.header__controls_help_text #{translate('localeQuestion', currentLocale.code)}
each locale in locales
button.header__controls_button(type='submit' name='locale' value=locale.code class=`${locale.code === currentLocale.code ? 'header__controls_button--active' : ''}`)= `${locale.name} (${locale.code})`
.header__upper-menu
a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) #{translate('settingsLabel', currentLocale.code)}
.header__lower-wrapper
.header__lower.layout-centered
.header__logo
a.header__logo-link(href=`/${queryString}`)
img(src='/images/logo-node.svg' alt='Contentful Example App')
img(src='/images/logo-node.svg' alt=translate('logoAlt', currentLocale.code))
nav.header__navigation.main-navigation
ul
li
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) #{translate('homeLabel', currentLocale.code)}
li
a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) Courses
a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) #{translate('coursesLabel', currentLocale.code)}
.main__content
block content
@@ -90,9 +90,9 @@ html
nav.footer__navigation.main-navigation
ul
li
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) #{translate('homeLabel', currentLocale.code)}
li
a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) Courses
a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) #{translate('coursesLabel', currentLocale.code)}
.footer__apps
//- a(href='#')
//- img(src='/images/badge-app-store.svg')
@@ -103,12 +103,12 @@ html
a(href='https://www.contentful.com/' target='_blank' rel='noopener')
img.footer__disclaimer-logo(src='/images/contentful-logo.svg')
p.footer__disclaimer-text
| Powered by Contentful. This website and the materials found on it are for demo purposes. You can use this to preview the content created on your Contentful account. 
a(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener') View on Github
| #{translate('footerDisclaimer', currentLocale.code)} 
a(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener') #{translate('viewOnGithub', currentLocale.code)}
| . 
a(href=`/imprint${queryString}` ) Imprint
a(href=`/imprint${queryString}` ) #{translate('imprintLabel', currentLocale.code)}
| . 
a(href=`https://www.contentful.com/contact/` ) Contact us
a(href=`https://www.contentful.com/contact/` ) #{translate('contactUsLabel', currentLocale.code)}
| .
.footer__social
p
@@ -124,15 +124,15 @@ html
section.modal#about-this-modal
.modal__overlay.close
.modal__wrapper
h1.modal__title A referenceable example for developers using Contentful
h1.modal__title #{translate('modalTitle', currentLocale.code)}
.modal__content
p This is The Example App, an application built to serve you as a reference while building your own applications using Contentful. This app is an online learning platform which teaches you how Contentful was used to build this app (so meta)!
p #{translate('modalIntro', currentLocale.code)}
p
| If you prefer to start by getting your hands dirty with code, check out this app on 
| #{translate('modalCodeIntro', currentLocale.code)} 
a(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener') Github
| .
.modal__cta-wrapper
a(href='#').modal__cta.close Ok, got it.
a(href='#').modal__cta.close #{translate('modalCTALabel', currentLocale.code)}
.modal__close-wrapper
a(href='#').modal__close-button.close
svg

3
views/mixins/_courseCard.pug
View File

@@ -13,5 +13,4 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
+entryState(course)
p.course-card__description= course.fields.shortDescription
.course-card__link-wrapper
a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) view course
a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) #{translate("viewCourseLabel", currentLocale.code)}

2
views/mixins/_editorialFeatures.pug
View File

@@ -15,4 +15,4 @@ mixin editorialFeatures(entry)
.editorial-features__hint-wrapper
svg.editorial-features__hint-icon
use(xlink:href='/icons/icons.svg#info')
.editorial-features__hint-message Edit this entry in our web app. You have to be logged in and have access to the connected space to use this feature.
.editorial-features__hint-message #{translate('editorialFeaturesHint', currentLocale.code)}

4
views/mixins/_entryState.pug
View File

@@ -1,5 +1,5 @@
mixin entryState(entry)
if entry.draft
.pill.pill--draft draft
.pill.pill--draft #{translate('draftLabel', currentLocale.code)}
if entry.pendingChanges
.pill.pill--pending-changes pending changes
.pill.pill--pending-changes #{translate('pendingChangesLabel', currentLocale.code)}

6
views/mixins/_lesson.pug
View File

@@ -20,10 +20,10 @@ mixin lesson(lesson, course, nextLesson)
when 'lessonImage'
+lessonModuleImage(module)
else
h2 ️️⚠️ Invalid lesson module
h2 ️️#{translate('lessonModuleErrorTitle', currentLocale.code)}
p
span Could not determine type of
span #{translate('lessonModuleErrorBody', currentLocale.code)}
strong #{module.sys.id}
if nextLesson
a.lesson__cta.cta(href=`/courses/${course.fields.slug}/lessons/${nextLesson.fields.slug}${queryString}`) View next lesson
a.lesson__cta.cta(href=`/courses/${course.fields.slug}/lessons/${nextLesson.fields.slug}${queryString}`) #{translate('nextLessonLabel', currentLocale.code)}

2
views/mixins/_lessonModuleImage.pug
View File

@@ -3,4 +3,4 @@ mixin lessonModuleImage(module)
if module.fields.image && module.fields.image.fields.file && module.fields.image.fields.file.url
img.lesson-module-image__image(src=module.fields.image.fields.file.url alt=module.fields.image.fields.title)
else
h3 ⚠️ Image missing
h3 #{translate('imageErrorTitle', currentLocale.code)}

2
views/mixins/_moduleHighlightedCourse.pug
View File

@@ -14,4 +14,4 @@ mixin moduleHighlightedCourse(module, course)
.module-higlighted-course__description-wrapper
p !{helpers.markdown(course.fields.shortDescription)}
.module-higlighted-course__link-wrapper
a.module-higlighted-course__link(href=`/courses/${course.fields.slug}${queryString}`) view course
a.module-higlighted-course__link(href=`/courses/${course.fields.slug}${queryString}`) #{translate('viewCourseLabel', currentLocale.code)}

28
views/settings.pug
View File

@@ -13,60 +13,60 @@ block content
.layout-centered-small
+breadcrumb
h1= title
p To query and get content using the APIs, client applications need to authenticate with both the Space ID and an access token.
p #{translate('settingsIntroLabel', currentLocale.code)}
if success
.status-block.status-block--success
svg.status-block__icon.status-block__icon--success
use(xlink:href='/icons/icons.svg#success')
.status-block__content
.status-block__title Changes saved successfully!
.status-block__title #{translate('changesSavedLabel', currentLocale.code)}
if hasErrors
.status-block.status-block--error
svg.status-block__icon.status-block__icon--error
use(xlink:href='/icons/icons.svg#error')
.status-block__content
.status-block__title Error occurred
.status-block__message Some errors occurred. Please check the error messages next to the fields.
.status-block__title #{translate('errorOcurredTitleLabel', currentLocale.code)}
.status-block__message #{translate('errorOcurredMessageLabel', currentLocale.code)}
if space && !hasErrors
.status-block.status-block--info
svg.status-block__icon.status-block__icon--info
use(xlink:href='/icons/icons.svg#info')
.status-block__content
.status-block__message Connected to space “#{space.name}”
.status-block__message #{translate('connectedToSpaceLabel', currentLocale.code)} “#{space.name}”
form(action=`/settings` method="POST" class="form")
.form-item
label(for="input-space-id") Space ID
label(for="input-space-id") #{translate('spaceIdLabel', currentLocale.code)}
input(type="text" name="spaceId" id="input-space-id" value=settings.spaceId)
if 'spaceId' in errors
+renderErrors(errors.spaceId)
.form-item__help-text The Space ID is a unique identifier for your space.
.form-item__help-text #{translate('spaceIdHelpText', currentLocale.code)}
.form-item
label(for="input-delivery-token") Content Delivery API - access token
label(for="input-delivery-token") Content Delivery API - #{translate('accessTokenLabel', currentLocale.code)}
input(type="text" name="deliveryToken" id="input-delivery-token" value=settings.deliveryToken)
if 'deliveryToken' in errors
+renderErrors(errors.deliveryToken)
.form-item__help-text
| View published content using this API. 
| #{translate('contentDeliveryApiHelpText', currentLocale.code)} 
a(href='https://www.contentful.com/developers/docs/references/content-delivery-api/' target='_blank' rel='noopener') Content Delivery API.
.form-item
label(for="input-preview-token") Content Preview API - access token
label(for="input-preview-token") Content Preview API - #{translate('accessTokenLabel', currentLocale.code)}
input(type="text" name="previewToken" id="input-preview-token" value=settings.previewToken)
if 'previewToken' in errors
+renderErrors(errors.previewToken)
.form-item__help-text
| Preview unpublished content using this API (i.e. content with “Draft” status). 
| #{translate('contentPreviewApiHelpText', currentLocale.code)} 
a(href='https://www.contentful.com/developers/docs/references/content-preview-api/' target='_blank' rel='noopener') Content Preview API.
.form-item
input(type="checkbox" name="editorialFeatures" id="input-editorial-features" checked=settings.editorialFeatures)
label(for="input-editorial-features") Enable editorial features
.form-item__help-text Enable to display an edit link and other contextual helpers for authors. You need to have access to the connected space to make this work.
label(for="input-editorial-features") #{translate('enableEditorialFeaturesLabel', currentLocale.code)}
.form-item__help-text #{translate('enableEditorialFeaturesHelpText', currentLocale.code)}
.form-item
input.cta(type="submit" value="Save settings")
input.cta(type="submit" value=translate('saveSettingsButtonLabel', currentLocale.code))