🌐 Adds theses/emphasis/results pages to CMS

bin/admin.js

@@ -29,12 +29,54 @@ const configTree = {
   collections: [
     category({
       meta: {
-        name: 'euromat',
-        label: 'Euromat',
-        description: 'Theses, parties, ..., everything for the actual app.',
-        folder: 'src/app/euromat/content'
+        name: 'euromat-theses',
+        label: '[Euromat] Theses',
+        description: 'The theses selection pages for the EUROMAT.',
+        folder: 'src/app/euromat/content/theses'
       },
-      fields: []
+      fields: [
+        pageUrl(),
+        siteName(),
+        stringField('backBtn', 'Label for back button'),
+        stringField('positive', 'Label for positive'),
+        stringField('neutral', 'Label for neutral'),
+        stringField('negative', 'Label for negative'),
+        stringField('skipped', 'Label for skipping thesis')
+      ]
+    }),
+    category({
+      meta: {
+        name: 'euromat-emphasis',
+        label: '[Euromat] Emphasis',
+        description: 'The emphasis page which comes after the theses.',
+        folder: 'src/app/euromat/content/emphasis'
+      },
+      fields: [
+        pageUrl(),
+        siteName(),
+        stringField('headline', 'Headline'),
+        stringField('content', 'Description under headline'),
+        stringField('skip', 'Skip emphasis page'),
+        stringField('button', '[Label] Button to continue')
+      ]
+    }),
+    category({
+      meta: {
+        name: 'euromat-results',
+        label: '[Euromat] Results',
+        description: 'The EUROMAT result page.',
+        folder: 'src/app/euromat/content/results'
+      },
+      fields: [
+        pageUrl(),
+        siteName(),
+        stringField('headline', 'Headline for results'),
+        stringField('entry', 'Description under headline'),
+        stringField('hint', 'A short hint for users to know they can click the parties'),
+        stringField('thanks', 'Final words'),
+        stringField('startoverBtn', '[Label] Button to start over'),
+        stringField('indexBtn', '[Label] Button to go back to index')
+      ]
     }),
     category({
       meta: {

public/admin/config.yml

@@ -1,6 +1,6 @@
 backend:
   name: git-gateway
-  branch: next
+  branch: master
   squash_merges: true
   accept_roles:
     - admin
@@ -9,10 +9,10 @@ publish_mode: editorial_workflow
 media_folder: static/img/uploads
 public_folder: /img/uploads
 collections:
-  - name: euromat
-    label: Euromat
-    description: 'Theses, parties, ..., everything for the actual app.'
-    folder: src/app/euromat/content
+  - name: euromat-theses
+    label: '[Euromat] Theses'
+    description: The theses selection pages for the EUROMAT.
+    folder: src/app/euromat/content/theses
     format: json
     create: true
     slug: '{{fields.language}}'
@@ -30,6 +30,126 @@ collections:
             value: fr
           - label: Polski
             value: pl
+      - label: '[Meta] Page URL'
+        name: url
+        widget: string
+        hint: >-
+          An optional, localised URL which will be used for this page (e.g.
+          https://euromat.info/#/<PAGE_URL>)
+        optional: true
+      - label: '[Meta] Site Name'
+        name: title
+        widget: string
+        hint: The name for the page that will appear in the browser tab.
+      - label: Label for back button
+        name: backBtn
+        widget: string
+      - label: Label for positive
+        name: positive
+        widget: string
+      - label: Label for neutral
+        name: neutral
+        widget: string
+      - label: Label for negative
+        name: negative
+        widget: string
+      - label: Label for skipping thesis
+        name: skipped
+        widget: string
+  - name: euromat-emphasis
+    label: '[Euromat] Emphasis'
+    description: The emphasis page which comes after the theses.
+    folder: src/app/euromat/content/emphasis
+    format: json
+    create: true
+    slug: '{{fields.language}}'
+    fields:
+      - label: '[Meta] Language'
+        name: language
+        hint: Select the language for this page.
+        widget: select
+        options:
+          - label: English
+            value: en
+          - label: Deutsch
+            value: de
+          - label: Français
+            value: fr
+          - label: Polski
+            value: pl
+      - label: '[Meta] Page URL'
+        name: url
+        widget: string
+        hint: >-
+          An optional, localised URL which will be used for this page (e.g.
+          https://euromat.info/#/<PAGE_URL>)
+        optional: true
+      - label: '[Meta] Site Name'
+        name: title
+        widget: string
+        hint: The name for the page that will appear in the browser tab.
+      - label: Headline
+        name: headline
+        widget: string
+      - label: Description under headline
+        name: content
+        widget: string
+      - label: Skip emphasis page
+        name: skip
+        widget: string
+      - label: '[Label] Button to continue'
+        name: button
+        widget: string
+  - name: euromat-results
+    label: '[Euromat] Results'
+    description: The EUROMAT result page.
+    folder: src/app/euromat/content/results
+    format: json
+    create: true
+    slug: '{{fields.language}}'
+    fields:
+      - label: '[Meta] Language'
+        name: language
+        hint: Select the language for this page.
+        widget: select
+        options:
+          - label: English
+            value: en
+          - label: Deutsch
+            value: de
+          - label: Français
+            value: fr
+          - label: Polski
+            value: pl
+      - label: '[Meta] Page URL'
+        name: url
+        widget: string
+        hint: >-
+          An optional, localised URL which will be used for this page (e.g.
+          https://euromat.info/#/<PAGE_URL>)
+        optional: true
+      - label: '[Meta] Site Name'
+        name: title
+        widget: string
+        hint: The name for the page that will appear in the browser tab.
+      - label: Headline for results
+        name: headline
+        widget: string
+      - label: Description under headline
+        name: entry
+        widget: string
+      - label: A short hint for users to know they can click the parties
+        name: hint
+        widget: string
+      - label: Final words
+        name: thanks
+        widget: string
+      - label: '[Label] Button to start over'
+        name: startoverBtn
+        widget: string
+      - label: '[Label] Button to go back to index'
+        name: indexBtn
+        widget: string
   - name: introduction
     label: '[Page] Introduction'
     description: The introduction page of Euromat.

src/app/euromat/components/emphasis.vue

@@ -1,14 +1,14 @@
 <template>
   <section>
-    <h1>{{ $t('euromat.emphasis.headline') }}</h1>
+    <h1>{{ $t('emphasis.headline') }}</h1>
 
     <div class="emphasis-content">
-      <p>{{ $t('euromat.emphasis.content') }}</p>
+      <p>{{ $t('emphasis.content') }}</p>
       <button type="button"
         class="btn-dark btn-small"
         @click="submitEmphasis()"
       >
-        {{ $t('euromat.emphasis.skip') }}
+        {{ $t('emphasis.skip') }}
         <feather-corner-up-right />
       </button>
     </div>
@@ -30,7 +30,7 @@
 
     <div class="emphasis-controls">
       <button type="button" @click="submitEmphasis()">
-        {{ $t('euromat.emphasis.button') }} <feather-arrow-right />
+        {{ $t('emphasis.button') }} <feather-arrow-right />
       </button>
     </div>
   </section>
@@ -65,10 +65,10 @@
     created () {
       if (this.$browser.supports('sessionStorage')) {
         if (!sessionStorage.getItem('euromat-answers')) {
-          this.$router.push({ path: this.isGermanLocale ? '/thesen' : '/theses' })
+          this.$router.push({ path: this.isGermanLocale ? '/de/thesen' : '/en/theses' })
         }
       } else if (this.$root.$data.backupStorage.answers === undefined) {
-        this.$router.push({ path: this.isGermanLocale ? '/thesen' : '/theses' })
+        this.$router.push({ path: this.isGermanLocale ? '/de/thesen' : '/en/theses' })
       }
     },
 
@@ -97,8 +97,8 @@
         }
 
         this.$router.push({ path: this.isGermanLocale
-          ? '/thesen/ergebnis'
-          : '/theses/results'
+          ? '/de/thesen/ergebnis'
+          : '/en/theses/results'
         })
       }
     }

src/app/euromat/components/euromat.vue

@@ -11,7 +11,7 @@
         type="button"
         @click="goBack"
       >
-        {{ $t('euromat.euromat.back') }}
+        {{ $t('theses.backBtn') }}
       </button>
     </div>
 
@@ -45,6 +45,7 @@
 
 <script>
   import { options, theses } from '@/data'
+  // import { getTranslatedUrl } from '@/i18n/helper'
 
   export default {
     name: 'EuroMat',
@@ -61,6 +62,7 @@
     },
 
     data () {
+      console.log(this.$i18n)
       return {
         currentThesis: 0,
         thesesCount: theses.length,
@@ -90,13 +92,16 @@
       options () {
         return options.map(option =>
           Object.assign({}, option, {
-            label: this.$t(`euromat.options.${option.position}`),
+            label: this.$t(`theses.${option.position}`),
             icon: this.getIconName(option.position)
           }))
         .filter(option => option.position !== 'skipped')
       },
       optionSkip () {
-        return this.options[this.options.length - 1]
+        const skipped = options.find(option => option.position === 'skipped')
+        return Object.assign({}, skipped, {
+          label: this.$t('theses.skipped')
+        })
       }
     },
 
@@ -145,8 +150,8 @@
         }
 
         this.$router.push({ path: this.isGermanLocale
-          ? '/thesen/gewichtung'
-          : '/theses/emphasis'
+          ? '/de/thesen/gewichtung'
+          : '/en/theses/emphasis'
         })
       }
     }

src/app/euromat/components/results.vue

@@ -1,12 +1,12 @@
 <template>
   <section>
     <header class="results-header">
-      <h1>{{ $t('euromat.results.headline') }}</h1>
+      <h1>{{ $t('results.headline') }}</h1>
     </header>
 
     <div class="results-content">
-      <p>{{ $t('euromat.results.entry') }}</p>
-      <span>{{ $t('euromat.results.hint') }}</span>
+      <p>{{ $t('results.entry') }}</p>
+      <span>{{ $t('results.hint') }}</span>
     </div>
 
     <ul class="party-results">
@@ -36,19 +36,19 @@
     </ul>
 
     <div class="results-ctrls">
-      <p>{{ $t('euromat.results.thanks') }}</p>
+      <p>{{ $t('results.thanks') }}</p>
       <router-link tag="a"
         class="btn"
-        :to="{ path: '/' }"
+        :to="{ path: `/${$i18n.locale}/` }"
       >
-        {{ $t('euromat.results.buttons.index') }}
+        {{ $t('results.indexBtn') }}
       </router-link>
       <router-link
         tag="a"
         class="btn btn-dark btn-small"
-        :to="{ path: isGermanLocale ? '/thesen' : '/theses' }"
+        :to="{ path: startOverUrl }"
       >
-        {{ $t('euromat.results.buttons.startover') }}
+        {{ $t('results.startoverBtn') }}
         <feather-rotate-cw />
       </router-link>
     </div>
@@ -56,6 +56,7 @@
 </template>
 
 <script>
+  import { getTranslatedUrl } from '@/i18n/helper'
   import {
     MAX_POINTS,
     BASE_POINTS,
@@ -91,6 +92,9 @@
     computed: {
       isGermanLocale () {
         return this.$i18n.locale === 'de'
+      },
+      startOverUrl () {
+        return getTranslatedUrl('theses')
       }
     },
 
@@ -107,7 +111,7 @@
       }
 
       if (!emphasized) {
-        this.$router.push({ path: this.isGermanLocale ? '/thesen' : '/theses' })
+        this.$router.push({ path: this.isGermanLocale ? '/de/thesen' : '/en/theses' })
       }
 
       this.emphasized = emphasized
@@ -126,9 +130,7 @@
 
     methods: {
       getPartyPath (token) {
-        return this.isGermanLocale
-          ? `/partei/${token}`
-          : `/party/${token}`
+        return `${getTranslatedUrl('party')}/${token}`
       },
       getPartyLogo (token) {
         return require(`@/assets/svg/${token.toLowerCase()}-logo.svg`)

src/app/euromat/content/emphasis/de.json

@@ -0,0 +1,9 @@
+{
+  "language": "de",
+  "url": "gewichtung",
+  "title": "Gewichtung",
+  "headline": "Welche Thesen sind dir wichtig?",
+  "content": "Markiere Thesen die doppelt gewertet sollen.",
+  "skip": "Gewichtung überspringen",
+  "button": "Weiter"
+}

src/app/euromat/content/emphasis/en.json

@@ -0,0 +1,9 @@
+{
+  "language": "en",
+  "url": "emphasis",
+  "title": "Emphasis",
+  "headline": "Which theses are important for you?",
+  "content": "Mark the theses which should count double.",
+  "skip": "Skip emphasis",
+  "button": "Continue"
+}

src/app/euromat/content/results/de.json

@@ -0,0 +1,11 @@
+{
+  "language": "de",
+  "url": "ergebnis",
+  "title": "Ergebnis",
+  "headline": "Dein Ergebnis",
+  "entry": "Super, Sie haben es geschafft! Gespannt, wie ihr Ergebnis ausfällt? Hier ist es auch schon:",
+  "hint": "Übrigens: Mit Klick auf die Partei gelangen Sie zur Übersicht der einzelnen Thesen. Vergleichen Sie Ihre Auswahl mit den direkten Antworten der jeweiligen Partei.",
+  "thanks": "Danke, dass Sie den EUROMAT genutzt haben. Wir hoffen es hat Ihnen Freude bereitet und vergessen Sie nicht: am 24. September ist Bundestagswahl!",
+  "startoverBtn": "EUROMAT wiederholen",
+  "indexBtn": "Zur Startseite"
+}

src/app/euromat/content/results/en.json

@@ -0,0 +1,11 @@
+{
+  "language": "en",
+  "url": "results",
+  "title": "Results",
+  "headline": "Your results",
+  "entry": "Great, you made it! Curious about your result? We won't keep you any longer, here it is:",
+  "hint": "Oh, by the way: Clicking on each party will get you to an overview of all individual statements. Take a look at what the parties answered and how your choice compares.",
+  "thanks": "Thanks for using EUROMAT. We hope you enjoyed it and don't forget: 24. September is election day!",
+  "startoverBtn": "Start over",
+  "indexBtn": "Back to landing page"
+}

src/app/euromat/content/theses/de.json

@@ -0,0 +1,10 @@
+{
+  "language": "de",
+  "url": "thesen",
+  "title": "Thesen",
+  "backBtn": "Zurück",
+  "positive": "Ich bin dafür",
+  "neutral": "Neutral",
+  "negative": "Ich bin dagegen",
+  "skipped": "These überspringen"
+}

src/app/euromat/content/theses/en.json

@@ -0,0 +1,10 @@
+{
+  "language": "en",
+  "url": "theses",
+  "title": "Theses",
+  "backBtn": "Back",
+  "positive": "I agree",
+  "neutral": "Neutral",
+  "negative": "I disagree",
+  "skipped": "Skip thesis"
+}

src/app/euromat/i18n.js

@@ -1,66 +1,38 @@
-export default {
-  de: {
-    euromat: {
-      options: {
-        positive: 'Ich bin dafür',
-        neutral: 'Neutral',
-        negative: 'Ich bin dagegen',
-        skipped: 'These überspringen'
-      },
-      euromat: {
-        pageTitle: 'Thesen',
-        back: 'Zurück'
-      },
-      results: {
-        pageTitle: 'Ergebnis',
-        headline: 'Dein Ergebnis',
-        entry: 'Super, Sie haben es geschafft! Gespannt, wie ihr Ergebnis ausfällt? Hier ist es auch schon:',
-        hint: 'Übrigens: Mit Klick auf die Partei gelangen Sie zur Übersicht der einzelnen Thesen. Vergleichen Sie Ihre Auswahl mit den direkten Antworten der jeweiligen Partei.',
-        thanks: 'Danke, dass Sie den EUROMAT genutzt haben. Wir hoffen es hat Ihnen Freude bereitet und vergessen Sie nicht: am 24. September ist Bundestagswahl!',
-        buttons: {
-          startover: 'EUROMAT wiederholen',
-          index: 'Zur Startseite'
-        }
-      },
-      emphasis: {
-        pageTitle: 'Thesengewichtung',
-        headline: 'Welche Thesen sind dir wichtig?',
-        content: 'Markiere Thesen die doppelt gewertet sollen.',
-        skip: 'Gewichtung überspringen',
-        button: 'Weiter'
-      }
-    }
-  },
-  en: {
-    euromat: {
-      options: {
-        positive: 'I agree',
-        neutral: 'Neutral',
-        negative: 'I disagree',
-        skipped: 'Skip thesis'
-      },
-      euromat: {
-        pageTitle: 'Theses',
-        back: 'Back'
-      },
-      results: {
-        pageTitle: 'Results',
-        headline: 'Your results',
-        entry: 'Great, you made it! Curious about your result? We won\'t keep you any longer, here it is:',
-        hint: 'Oh, by the way: Clicking on each party will get you to an overview of all individual statements. Take a look at what the parties answered and how your choice compares.',
-        thanks: 'Thanks for using EUROMAT. We hope you enjoyed it and don\'t forget: 24. September is election day!',
-        buttons: {
-          startover: 'Start over',
-          index: 'Back to landing page'
-        }
-      },
-      emphasis: {
-        pageTitle: 'Emphasis',
-        headline: 'Which theses are important for you?',
-        content: 'Mark the theses which should count double.',
-        skip: 'Skip emphasis',
-        button: 'Continue'
-      }
-    }
+import { loadContent } from '@/helper/content'
+
+const theses = loadContent(
+  'theses',
+  require.context('./content/theses', false, /\.json$/)
+)
+const emphasis = loadContent(
+  'emphasis',
+  require.context('./content/emphasis', false, /\.json$/)
+)
+const results = loadContent(
+  'results',
+  require.context('./content/results', false, /\.json$/)
+)
+
+const availablesLanguages =
+  [...new Set(
+    [theses, emphasis, results]
+      .map(Object.keys)
+      .reduce((acc, cur) => acc.concat(cur), []))]
+
+const i18n = availablesLanguages.reduce((acc, cur) => {
+  acc[cur] = {}
+
+  if (cur in theses) {
+    acc[cur] = { ...acc[cur], ...theses[cur] }
   }
-}
+  if (cur in emphasis) {
+    acc[cur] = { ...acc[cur], ...emphasis[cur] }
+  }
+  if (cur in results) {
+    acc[cur] = { ...acc[cur], ...results[cur] }
+  }
+
+  return acc
+}, {})
+
+export default i18n

src/app/euromat/routes.js

@@ -1,17 +1,20 @@
-import i18n from './i18n'
+import { DEFAULT_LOCALE } from '@/config'
+import i18n from '@/i18n'
+import localI18n from './i18n'
 import { storageAvailable } from '@/helper/storage'
+import { getTranslatedAliases, getTranslatedTitles } from '@/i18n/helper'
 
 function hasAnswers (to, from, next) {
   if (storageAvailable('sessionStorage') && !sessionStorage.getItem('euromat-answers')) {
-    next({ path: '/' })
+    next({ path: `/${i18n.locale}/` })
   }
   next()
 }
 
 export default [
   {
-    path: 'thesen',
-    alias: 'theses',
+    path: localI18n[DEFAULT_LOCALE].theses.url,
+    alias: getTranslatedAliases(localI18n, 'theses'),
     component: () => import('./components/index' /* webpackChunkName: "euromat" */),
     children: [
       {
@@ -19,36 +22,27 @@ export default [
         name: 'euromat',
         component: () => import('./components/euromat' /* webpackChunkName: "euromat" */),
         meta: {
-          title: {
-            de: i18n.de.euromat.euromat.pageTitle,
-            en: i18n.en.euromat.euromat.pageTitle
-          }
+          title: getTranslatedTitles(localI18n, 'theses')
         }
       },
       {
-        path: 'gewichtung',
-        alias: 'emphasis',
+        path: 'emphasis',
+        alias: getTranslatedAliases(localI18n, 'emphasis'),
         name: 'emphasis',
         component: () => import('./components/emphasis' /* webpackChunkName: "euromat" */),
         beforeEnter: hasAnswers,
         meta: {
-          title: {
-            de: i18n.de.euromat.emphasis.pageTitle,
-            en: i18n.en.euromat.emphasis.pageTitle
-          }
+          title: getTranslatedTitles(localI18n, 'emphasis')
         }
       },
       {
-        path: 'ergebnis',
-        alias: 'results',
+        path: 'results',
+        alias: getTranslatedAliases(localI18n, 'results'),
         name: 'results',
         component: () => import('./components/results' /* webpackChunkName: "euromat" */),
         beforeEnter: hasAnswers,
         meta: {
-          title: {
-            de: i18n.de.euromat.results.pageTitle,
-            en: i18n.en.euromat.results.pageTitle
-          }
+          title: getTranslatedTitles(localI18n, 'results')
         }
       }
     ]

src/app/intro/content/de.json

@@ -2,6 +2,6 @@
   "language": "de",
   "title": "Startseite",
   "headline": "Willkommen beim EUROMAT zur Bundestagswahl 2017!",
-  "content": "Sie fragen sich, was ein EUROMAT ist? Der EUROMAT ist nicht einfach nur ein Wahlomat. Sondern Ihr digitaler Wahl-Freund, der Ihnen einen Eindruck von den europapolitischen Positionen der Parteien vermittelt.\n\n\n\nSie fragen sich, was die deutschen Parteien zu Europa sagen? Wir haben für Sie bei CDU/CSU, SPD, Bündnis90/Die Grünen, DIE LINKE und FDP nachgefragt.\n\n\n\nMit welcher Partei haben Sie die größte Übereinstimmung bei Fragen zum Thema Europa? Finden Sie es heraus!\n\n\n\nZu guter Letzt: Wie immer Ihr Ergebnis ausfällt, der EUROMAT stellt keine Wahlempfehlung dar. Unser EUROMAT soll vor allem eines: Ihnen vor der Wahl Spaß bereiten und dabei die wichtigsten Informationen zur Europapolitik der Parteien liefern",
+  "content": "Sie fragen sich, was ein **EUROMAT** ist? Der EUROMAT ist nicht einfach nur ein Wahlomat. Sondern Ihr digitaler Wahl-Freund, der Ihnen einen Eindruck von den europapolitischen Positionen der Parteien vermittelt.\n\n\n\nSie fragen sich, was die deutschen Parteien zu Europa sagen? Wir haben für Sie bei CDU/CSU, SPD, Bündnis90/Die Grünen, DIE LINKE und FDP nachgefragt.\n\n\n\nMit welcher Partei haben Sie die größte Übereinstimmung bei Fragen zum Thema Europa? Finden Sie es heraus!\n\n\n\nZu guter Letzt: Wie immer Ihr Ergebnis ausfällt, der EUROMAT stellt keine Wahlempfehlung dar. Unser EUROMAT soll vor allem eines: Ihnen vor der Wahl Spaß bereiten und dabei die wichtigsten Informationen zur Europapolitik der Parteien liefern",
   "button": "Los geht's"
 }

src/components/app-menu.vue

@@ -77,8 +77,10 @@
         this.languageMenuSelected = false
       },
       changeLanguage (locale) {
+        // console.log('this.$router.currentRoute', this.$router.currentRoute)
+        // const currentRoute = this.$router.currentRoute.name
         setCurrentLocale(locale)
-        // this.$i18n.locale = locale
+        // this.$router.replace(getTranslatedUrl(currentRoute))
         this.hideLanguageSelection()
       }
     }