new deployment (#59)

* Production (#44)

* test: Fix integration test

* fix: Fix Editorial feature

* chore(localization): move locales to i18n folder

* feat(modules): add image caption and shadow

* fix: clarify German translation🇩🇪

* chore(localization): fix typo (#47)

* Split first paragraph into sections (#46)

* feat(controls): add help text to API dropdown

* fix(style): simplify header and fix mobile design

* fix(style): simplify footer and fix mobile design

* fix(style): update stylesheet and scripts file

* test(e2e): adjust tests and make them fail on CI

* language fixes

* rename labels to use full api name

* Refactor entry state toggle (#48)

* chore(editorialFeatures): extract editorial features toggle

* chore(refactor): rename function to make more contextual sense

* Fix breadcrumb and add test for locales (#49)

* test(unit): add test to check for locale consistency

* fix(breadcrumb): translate lessons route

* Change readme url to http from https (#52)

* tests(e2e): expect only 2 courses

* fix(cookies): fix variable naming and extend to two days maxAge

* Change text on next lesson button (#54)

* Retranslate advancedLabel

* fix(translations): do not break on vim temp files. This is dedicated to JP

* fix(analytics): use correct app-id

* Add instructions to seed a space to readme (#61)

* Change modal text; add link to model's repo to localization files (#57)

* fix(links): link correct GH repository

* fix(i18n): adjust view on github link label

* fix(style): move GitHub link to the left

* new screenshot

README.md

@@ -6,7 +6,7 @@ We hope this app will give you a better understanding of how decoupling content
 
 Contentful is a content management platform for web applications, mobile apps and connected devices. It allows you to create, edit and manage content in the cloud and publish it anywhere via powerful API. Contentful offers tools for managing editorial teams and enabling cooperation between organizations.
 
-<a href="https://the-example-app-nodejs.herokuapp.com/" target="_blank"><img src="https://images.contentful.com/ft4tkuv7nwl0/31mTpJSgBigeueQyoSGKSg/be3b56dca256d20f5ee530d58bb6d90e/Screen_Shot_2017-11-08_at_15.32.36.png" alt="Screenshot of the example app"/></a>
+<a href="https://the-example-app-nodejs.herokuapp.com/" target="_blank"><img src="https://images.contentful.com/qz0n5cdakyl9/4GZmvrdodGM6CksMCkkAEq/700a527b8203d4d3ccd3c303c5b3e2aa/the-example-app.png" alt="Screenshot of the example app"/></a>
 
 ## Requirements
 
@@ -15,7 +15,15 @@ Contentful is a content management platform for web applications, mobile apps an
 
 Without any changes, this app is connected to a Contentful space that is not publicly accessible. The full end-to-end Contentful experience requires you to clone this space to your own Contentful account, and enables you to see how content editing in the Contentful web app and see those changes propagate to this running application. Signing up and getting started with our free plan is... free! 
 
-You can clone the space for this example app to your own Contentful account by following the instructions [here](https://github.com/contentful/content-models/tree/master/the-example-app/README.md). Once you’ve created a space, you can change the credentials in the variables.env. If you don’t feel like changing code immediately, you can also inject credentials via url parameters like so:
+You can clone the space for this example app to your own Contentful account by using our CLI tool.
+
+```
+contentful space seed -s '<SPACE_ID>' -t the-example-app
+```
+
+If you do not have the Contentful CLI installed you can find instructions on installation and usage [here](https://github.com/contentful/contentful-cli). For more information on the content model check out [this repo](https://github.com/contentful/content-models/tree/master/the-example-app/README.md). 
+
+Once you’ve created a space, you can change the credentials in the variables.env. If you don’t feel like changing code immediately, you can also inject credentials via url parameters like so:
 
 ```
 http://localhost:3000?space_id=<YOUR_CLONED_SPACE_ID>&delivery_token=<YOUR_DELIVERY_TOKEN>&preview_token=<YOUR_PREVIEW_TOKEN>

bin/vendor/analytics.html

@@ -16,7 +16,7 @@
   n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","//d1fc8wv8zag5ca.cloudfront.net/2.8.2/sp.js","snowplow"));
 
   snowplow('newTracker', 'defaultTracker', 'col.contentful.com', {
-    appId: 'the_example_app',
+    appId: 'the-example-app',
     platform: 'web',
     respectDoNotTrack: true,
     bufferSize: 1,

i18n/i18n.js

@@ -14,6 +14,7 @@ module.exports.initializeTranslations = () => {
 
   try {
     const files = fs.readdirSync(localesPath)
+      .filter((filename) => filename.endsWith('.json'))
 
     files.forEach((file) => {
       const localeDict = require(path.join(localesPath, file))

i18n/locales/de-DE.json

@@ -5,7 +5,7 @@
   "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": "GitHub",
+  "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",
@@ -21,9 +21,10 @@
   "footerDisclaimer": "Powered by Contentful. Diese Website und deren Materialien existieren nur für Demonstrationszwecken. Sie können diese benutzen, um den Inhalt ihres Contentful Kontos anzusehen.",
   "imprintLabel": "Impressum",
   "contactUsLabel": "Kontakt",
-  "modalTitle": "Ein referenzierbares Beispiel für Entwickler, die Contentful benutzen.",
+  "modalTitle": "Ein Beispiel für Entwickler, die Contentful benutzen.",
-  "modalIntro": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen. Sie stellt eine Plattform fürs online Lernen dar, die mithilfe von Contentful gebaut wurde. (sehr meta!)",
+  "modalIntro": "Dies ist \"The Example App\" in node.js. Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
-  "modalCodeIntro": "Wenn Sie es bevorzugen, sich die Hände schmutzig zu machen, sehen sie sich die Anwendung hier an",
+  "modalSpaceIntro": "Den Inhalt dieser Anwendung können Sie selbst bearbeiten. Dafür müssen Sie den \"The Example App\" space in Ihren Contentful Account importieren. Anleitung hierzu gibt es",
+  "modalSpaceLinkLabel": "hier",
   "modalCTALabel": "Gut, verstanden.",
   "editorialFeaturesHint": "Bearbeiten Sie diesen Eintrag in unserer Web App. Sie müssen sich eingelogged haben und Zugang zum Space haben, um diese Funktion nutzen zu können.",
   "draftLabel": "Entwurf",
@@ -78,5 +79,5 @@
   "previewKeyInvalidLabel": "Ihr Preview API Zugangsschlüssel ist ungültig.",
   "beginnerLabel": "Anfänger",
   "intermediateLabel": "Fortgeschrittener",
-  "advancedLabel": "Profi"
+  "advancedLabel": "Experte"
 }

i18n/locales/en-US.json

@@ -1,11 +1,11 @@
 {
   "defaultTitle": "The 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.",
+  "metaDescription": "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.",
+  "metaTwitterCard": "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.",
+  "metaImageAlt": "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.",
+  "metaImageDescription": "This is \"The Example App\", a reference for building your own applications using Contentful.",
-  "viewOnGithub": "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",
   "contentDeliveryApiHelp": "This API fetches published content from the Content Delivery API",
@@ -21,9 +21,10 @@
   "footerDisclaimer": "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.",
   "imprintLabel": "Imprint",
   "contactUsLabel": "Contact us",
-  "modalTitle": "A referenceable example for developers using Contentful",
+  "modalTitle": "A reference for developers using Contentful",
-  "modalIntro": "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)!",
+  "modalIntro": "This is \"The Example App\" in node.js. While building your own apps with Contentful, you can reference this app's code, found on",
-  "modalCodeIntro": "If you prefer to start by getting your hands dirty with code, check out this app on",
+  "modalSpaceIntro": "You can also edit the content in the app by cloning the Contentful space to your own Contentful account by following the instructions",
+  "modalSpaceLinkLabel": "here",
   "modalCTALabel": "Ok, got it.",
   "editorialFeaturesHint": "Edit this entry in our web app. You have to be logged in and have access to the connected space to use this feature.",
   "draftLabel": "draft",

test/e2e/specs/the-example-app-spec.js

@@ -6,9 +6,9 @@ describe('The Example App', () => {
 
     it('meta tags', () => {
       cy.title().should('equals', 'Home — The Example App', 'Home page should have correct meta title')
-      cy.get('meta[name="description"]').should('attr', 'content', 'This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
+      cy.get('meta[name="description"]').should('attr', 'content', 'This is "The Example App", a reference for building your own applications using Contentful.')
 
-      cy.get('meta[name="twitter:card"]').should('attr', 'content', 'This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
+      cy.get('meta[name="twitter:card"]').should('attr', 'content', 'This is "The Example App", a reference for building your own applications using Contentful.')
 
       cy.get('meta[property="og:title"]').should('attr', 'content', 'Home — The Example App')
       cy.get('meta[property="og:type"]').should('attr', 'content', 'article')
@@ -17,7 +17,7 @@ describe('The Example App', () => {
       cy.get('meta[property="og:image:type"]').should('attr', 'content', 'image/jpeg')
       cy.get('meta[property="og:image:width"]').should('attr', 'content', '1200')
       cy.get('meta[property="og:image:height"]').should('attr', 'content', '1200')
-      cy.get('meta[property="og:description"]').should('attr', 'content', 'This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
+      cy.get('meta[property="og:description"]').should('attr', 'content', 'This is "The Example App", a reference for building your own applications using Contentful.')
 
       cy.get('link[rel="apple-touch-icon"]')
         .should('attr', 'sizes', '120x120')
@@ -46,8 +46,8 @@ describe('The Example App', () => {
       cy.get('section.modal .modal__wrapper').should('hidden')
       cy.get('.header__upper-title a').click()
       cy.get('section.modal .modal__wrapper').should('visible')
-      cy.get('section.modal .modal__title').should('contain', 'A referenceable example for developers using Contentful')
+      cy.get('section.modal .modal__title').should('contain', 'A reference for developers using Contentful')
-      cy.get('section.modal .modal__content').should('contain', 'This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
+      cy.get('section.modal .modal__content').should('contain', 'This is "The Example App" in node.js. While building your own apps with Contentful,')
 
       // Close on background
       cy.get('section.modal .modal__overlay').click({force: true})

views/layout.pug

@@ -33,7 +33,7 @@ html
                     use(xlink:href='/icons/icons.svg#info')
                   span #{translate('whatIsThisApp', currentLocale.code)}
               .header__upper-copy
-                a.header__upper-link(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener')
+                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)}
@@ -109,7 +109,7 @@ html
               .footer__disclaimer
                 p.footer__disclaimer-text
                   | #{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='https://github.com/contentful/the-example-app.nodejs' target='_blank' rel='noopener') #{translate('viewOnGithub', currentLocale.code)}
                   | . 
                   a(href=`/imprint${queryString}` ) #{translate('imprintLabel', currentLocale.code)}
                   | . 
@@ -131,10 +131,12 @@ html
       .modal__wrapper
         h1.modal__title #{translate('modalTitle', currentLocale.code)}
         .modal__content
-          p #{translate('modalIntro', currentLocale.code)}
+          p #{translate('modalIntro', currentLocale.code)} 
+            a(href='https://github.com/contentful/the-example-app.nodejs' target='_blank' rel='noopener') GitHub
+            | .
           p
-          | #{translate('modalCodeIntro', currentLocale.code)} 
+            | #{translate('modalSpaceIntro', currentLocale.code)} 
-          a(href='https://github.com/contentful/the-example-app.nodejs' target='_blank' rel='noopener') Github
+            a(href='https://github.com/contentful/content-models/tree/master/the-example-app' target='_blank' rel='noopener')=translate('modalSpaceLinkLabel', currentLocale.code)
             | .
         .modal__cta-wrapper
           a(href='#').modal__cta.close #{translate('modalCTALabel', currentLocale.code)}