Merge branch 'feature/refactor-env-vars-to-es6-module' into develop

client/config/prod-my-kv.env.js

@@ -0,0 +1,17 @@
+'use strict'
+module.exports = {
+  /*
+  * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
+  * around strings
+  */
+  VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
+
+  /*
+   * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
+   */
+  // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
+  VUE_APP_FAVICON_32: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-fav.png',
+  VUE_APP_FAVICON_16: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-fav.png',
+  VUE_APP_TITLE: 'My KV'
+  // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
+}

client/config/prod.env.js

@@ -1,25 +1,34 @@
 'use strict'
-module.exports = {
+const { merge } = require('webpack-merge')
+
+const values = {
   NODE_ENV: '"production"',
   HEP_URL: JSON.stringify(process.env.HEP_URL),
   MATOMO_HOST: JSON.stringify(process.env.MATOMO_HOST),
   MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
   LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
+  VUE_APP_FLAVOR: JSON.stringify(process.env.APP_FLAVOR),
   /*
-  * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
+  * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
-  * around strings
+  * and JS needs quotes around strings
+  * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
   */
-  VUE_APP_LOGO: JSON.stringify(process.env.VUE_APP_LOGO) || '"/static/logo.png"',
-  VUE_APP_ENABLE_PORTFOLIO: process.env.ENABLE_PORTFOLIO || "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-  VUE_APP_JS_TITLE: JSON.stringify(process.env.VUE_APP_TITLE) || '"mySkillbox"',
+
-  VUE_APP_ENABLE_FOOTER: process.env.ENABLE_FOOTER || "true",
   /*
    * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
    */
   // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
-  VUE_APP_FAVICON_32: process.env.VUE_APP_FAVICON_32 || '/static/favicon-32x32.png',
+  VUE_APP_FAVICON_32: '/static/favicon-32x32.png',
-  VUE_APP_FAVICON_16: process.env.VUE_APP_FAVICON_16 || '/static/favicon-16x16.png',
+  VUE_APP_FAVICON_16: '/static/favicon-16x16.png',
-  VUE_APP_TITLE: process.env.VUE_APP_TITLE || 'mySkillbox'
+  VUE_APP_TITLE: 'mySkillbox'
   // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
 }
+
+if (process.env.APP_FLAVOR === 'my-kv') {
+  module.exports = merge(values, require('./prod-my-kv.env.js'));
+} else {
+  // we are on the skillbox APP_FLAVOR
+  module.exports = values;
+}
+

client/src/components/AssignmentWithSubmissions.vue

@@ -9,7 +9,7 @@
       <a
         class="button button--primary submissions-page__back"
         @click="$emit('back')"
-      >Aufgabe im Modul anzeigen</a>
+      >Aufgabe im {{ $flavor.textModule }} anzeigen</a>
     </div>
 
     <div
@@ -65,7 +65,7 @@
 <script>
   import StudentSubmission from '@/components/StudentSubmission';
 
-  import {meQuery} from '@/graphql/queries';
+  import { meQuery } from '@/graphql/queries';
 
   export default {
     props: ['assignment'],

client/src/components/BackLink.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script>
-  import {MODULE_PAGE} from '@/router/module.names';
+  import { MODULE_PAGE } from '@/router/module.names';
-  import {ROOMS_PAGE} from '@/router/room.names';
+  import { ROOMS_PAGE } from '@/router/room.names';
-  import {PROJECTS_PAGE} from '@/router/portfolio.names';
+  import { PROJECTS_PAGE } from '@/router/portfolio.names';
 
   const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
 
@@ -51,9 +51,9 @@
       fullTitle() {
         switch (this.type) {
           case 'topic':
-            return `Thema: ${this.title}`;
+            return `${this.$flavor.textTopic}: ${this.title}`;
           case 'module':
-            return `Modul: ${this.title}`;
+            return `${this.$flavor.textModule}: ${this.title}`;
           default:
             return this.title;
         }

client/src/components/ContentBlock.vue

@@ -81,11 +81,12 @@
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
   import me from '@/mixins/me';
-  import {hidden} from '@/helpers/visibility';
+
-  import {CONTENT_TYPE} from '@/consts/types';
+  import { hidden } from '@/helpers/visibility';
+  import { CONTENT_TYPE } from '@/consts/types';
   import PopoverLink from '@/components/ui/PopoverLink';
-  import {removeAtIndex} from '@/graphql/immutable-operations';
+  import { removeAtIndex } from '@/graphql/immutable-operations';
-  import {EDIT_CONTENT_BLOCK_PAGE} from '@/router/module.names';
+  import { EDIT_CONTENT_BLOCK_PAGE } from '@/router/module.names';
 
   const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
 
@@ -137,7 +138,7 @@
           return '';
         }
 
-        return `Instrument - ${instruments[contentType]}`;
+        return `${this.$flavor.textInstrument} - ${instruments[contentType]}`;
       },
       canEditContentBlock() {
         return this.contentBlock.mine && !this.contentBlock.indent;

client/src/components/book-navigation/ContentNavigation.vue

@@ -12,7 +12,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          Themen
+          {{ $flavor.textTopics }}
         </router-link>
 
         <book-topic-navigation
@@ -27,7 +27,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          Instrumente
+          {{ $flavor.textInstruments }}
         </router-link>
       </div>
 
@@ -120,7 +120,7 @@
 
     computed: {
       showPortfolio() {
-        return process.env.VUE_APP_ENABLE_PORTFOLIO;
+        return this.$flavor.showPortfolio;
       }
     },
 

client/src/components/content-blocks/InstrumentWidget.vue

@@ -9,14 +9,14 @@
       :to="{name: 'instrument', params: { slug: value.slug }}"
       class="instrument-widget__button button"
     >
-      Instrument anzeigen
+      {{ $flavor.textInstrument }} anzeigen
     </router-link>
   </div>
 </template>
 
 <script>
   export default {
-    props: ['value']
+    props: ['value'],
   };
 </script>
 

client/src/components/icons/Logo.vue

@@ -10,7 +10,7 @@
   export default {
     computed: {
       img() {
-        return process.env.VUE_APP_LOGO;
+        return this.$flavor.appLogo;
       }
     },
   };

client/src/components/instruments/InstrumentEntry.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-  import {INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
+  import { INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
   import instrumentType from '@/helpers/instrumentType';
 
   export default {
@@ -34,7 +34,11 @@
         };
       },
       categoryName() {
-        return instrumentType(this.instrument);
+        if (this.$flavor.appFlavor === 'my-kv') {
+          return this.$flavor.textInstruments;
+        } else {
+          return instrumentType(this.instrument);
+        }
       },
     },
   };

client/src/components/modules/Module.vue

@@ -40,7 +40,7 @@
     </div>
 
     <h3 id="objectives">
-      Lernziele
+      <span v-show="$flavor.showObjectivesTitle">Lernziele</span>
     </h3>
 
     <div class="module__objective-groups">
@@ -74,6 +74,7 @@
         default: () => ({}),
       },
     },
+
     components: {
       BookmarkActions,
       ObjectiveGroups,

client/src/components/modules/SnapshotCreated.vue

@@ -25,7 +25,7 @@
         <a
           class="button"
           @click="close"
-        >Zurück zum Modul</a>
+        >Zurück zum {{ $flavor.textModule }}</a>
       </div>
     </template>
   </modal>
@@ -33,7 +33,7 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import {SNAPSHOT_LIST} from '@/router/module.names';
+  import { SNAPSHOT_LIST } from '@/router/module.names';
   import dateformat from '@/helpers/date-format';
 
   export default {

client/src/components/modules/SnapshotHeader.vue

@@ -37,7 +37,7 @@
         <checkbox
           :checked="agreement"
           data-cy="apply-checkbox"
-          label="Ich will die Anpassungen aus diesem Snapshot in das Modul kopieren."
+          :label="`Ich will die Anpassungen aus diesem Snapshot in das ${$flavor.textModule} kopieren.`"
           @input="agreement = $event"
         />
       </div>
@@ -70,7 +70,7 @@
   import me from '@/mixins/me';
 
   import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
-  import {MODULE_PAGE} from '@/router/module.names';
+  import { MODULE_PAGE } from '@/router/module.names';
 
   const _getChange = (snapshot, index) => {
     try {

client/src/components/profile/DeactivatePerson.vue

@@ -46,7 +46,7 @@
         <template v-else>
           Diese Person kann
         </template>
-        weiterhin Module und Instrumente lesen.
+        weiterhin {{ $flavor.textModules }} und {{ $flavor.textInstruments }} lesen.
       </li>
       <li class="deactivate-user__text deactivate-user__list-item">
         <template v-if="myself">

client/src/components/toggle-menu/ToggleEditing.vue

@@ -2,7 +2,7 @@
   <toggle
     :checked="module.inEditMode"
     data-cy="toggle-editing"
-    label="Modul anpassen"
+    :label="`${$flavor.textModule} anpassen`"
     @input="toggle"
   />
 </template>
@@ -10,8 +10,8 @@
 <script>
   import Toggle from '@/components/ui/Toggle';
   // import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {gql} from '@apollo/client/core';
+  import { gql } from '@apollo/client/core';
-  import {setModuleEditMode} from '@/graphql/cache-operations';
+  import { setModuleEditMode } from '@/graphql/cache-operations';
 
   const QUERY = gql`
           query ModuleEditModeQuery ($slug: String) {

client/src/helpers/app-flavor.js

@@ -0,0 +1,45 @@
+const defaultFlavorValues = {
+  appFlavor: 'skillbox',
+  appLogo: '/static/logo.png',
+
+  // mySkillbox texts
+  textAppName: 'mySkillbox',
+  textTopic: 'Thema',
+  textTopics: 'Themen',
+  textModule: 'Modul',
+  textModules: 'Module',
+  textInstrument: 'Instrument',
+  textInstruments: 'Instrumente',
+
+  // mySkillbox flags
+  showFooter: true,
+  showObjectivesTitle: true,
+  showInstrumentFilterSidebar: true,
+  showPortfolio: true,
+};
+
+let flavorValues = Object.assign({}, defaultFlavorValues);
+
+if (process.env.VUE_APP_FLAVOR === 'my-kv') {
+  flavorValues = Object.assign({}, defaultFlavorValues, {
+    appFlavor: 'my-kv',
+    appLogo: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png',
+
+    // myKV texts
+    textAppName: 'myKV',
+    textTopic: 'HKB',
+    textTopics: 'HKB',
+    textModule: 'Lernfeld',
+    textModules: 'Lernfelder',
+    textInstrument: 'Grundlagenwissen',
+    textInstruments: 'Grundlagenwissen',
+
+    // myKV flags
+    showFooter: false,
+    showObjectivesTitle: false,
+    showInstrumentFilterSidebar: false,
+    showPortfolio: true,
+  });
+}
+
+export default flavorValues;

client/src/helpers/footer.js

@@ -1,3 +0,0 @@
-const enableFooter = () => process.env.VUE_APP_ENABLE_FOOTER;
-
-export default enableFooter;

client/src/helpers/instrumentType.js

@@ -1,13 +1,13 @@
-import {LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
+import { LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
 
 const instrumentType = ({type: {category}}) => {
- if (category === LANGUAGE_COMMUNICATION) {
+  if (category === LANGUAGE_COMMUNICATION) {
-   return 'Sprache & Kommunikation';
+    return 'Sprache & Kommunikation';
- } else if (category === SOCIETY) {
+  } else if (category === SOCIETY) {
-   return 'Gesellschaft';
+    return 'Gesellschaft';
- } else {
+  } else {
-   return 'Überfachliches Instrument';
+    return 'Überfachliches Instrument';
- }
+  }
 };
 
 export default instrumentType;

client/src/layouts/DefaultLayout.vue

@@ -26,7 +26,6 @@
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
   import DefaultFooter from '@/layouts/DefaultFooter';
   import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
-  import enableFooter from '@/helpers/footer';
 
   export default {
     components: {
@@ -56,7 +55,7 @@
         return classes;
       },
       enableFooter() {
-        return enableFooter() && (!this.$route.meta || !this.$route.meta.hideFooter);
+        return this.$flavor.showFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
       }
     }
   };

client/src/layouts/PublicLayout.vue

@@ -11,13 +11,13 @@
     <router-view class="public__content layout__content" />
     <default-footer
       class="skillbox__footer public__footer footer"
-      v-if="enableFooter"
+      v-if="$flavor.showFooter"
     />
   </div>
 </template>
 <script>
   import DefaultFooter from '@/layouts/DefaultFooter';
-  import enableFooter from '@/helpers/footer';
+
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
@@ -25,10 +25,6 @@
       Logo,
       DefaultFooter
     },
-
-    computed: {
-      enableFooter: enableFooter
-    }
   };
 </script>
 

client/src/layouts/SimpleLayout.vue

@@ -19,7 +19,7 @@
 
 <script>
   import SimpleFooter from '@/layouts/SimpleFooter';
-  import enableFooter from '@/helpers/footer';
+
   const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
@@ -33,7 +33,7 @@
         if (this.$route.meta.hideFooter) {
           return false;
         }
-        return enableFooter();
+        return this.$flavor.showFooter;
       }
     },
 

client/src/main.js

@@ -4,7 +4,7 @@ import VueVimeoPlayer from 'vue-vimeo-player';
 import apolloClientFactory from './graphql/client';
 import VueApollo from 'vue-apollo';
 import App from './App.vue';
-import {postLoginRedirectUrlKey, router} from './router';
+import { postLoginRedirectUrlKey, router } from './router';
 import store from '@/store/index';
 import VueScrollTo from 'vue-scrollto';
 import autoGrow from '@/directives/auto-grow';
@@ -15,7 +15,8 @@ import VueRemoveEdges from '@/plugins/edges';
 import VueMatomo from 'vue-matomo';
 import VueToast from 'vue-toast-notification';
 import VueLogger from 'vuejs-logger';
-import {joiningClass, loginRequired, unauthorizedAccess} from "@/router/guards";
+import { joiningClass, loginRequired, unauthorizedAccess } from '@/router/guards';
+import flavorPlugin from '@/plugins/flavor';
 
 Vue.config.productionTip = false;
 const isProduction = process.env.NODE_ENV === 'production';
@@ -38,6 +39,8 @@ Vue.use(VueScrollTo, {
   offset: -50,
 });
 
+Vue.use(flavorPlugin);
+
 if (process.env.MATOMO_HOST) {
   Vue.use(VueMatomo, {
     host: process.env.MATOMO_HOST,

client/src/mixins/page-title.js

@@ -1,7 +0,0 @@
-export default {
-  data() {
-    return {
-      pageTitle: process.env.VUE_APP_JS_TITLE
-    };
-  }
-};

client/src/pages/hello.vue

@@ -19,7 +19,7 @@
         </a>
       </div>
       <p class="about__text">
-        mySkillbox ist ein Angebot des hep Verlags in
+        {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in
         Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
       </p>
     </div>
@@ -29,7 +29,7 @@
         class="login-actions__title"
         data-cy="hello-title"
       >
-        Wollen Sie {{ pageTitle }} im Unterricht verwenden?
+        Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
       </h2>
       <a
         class="button button--primary button--big actions__submit"
@@ -71,13 +71,11 @@
 </template>
 
 <script>
-  import pageTitleMixin from '@/mixins/page-title';
   const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
   const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-    mixins: [pageTitleMixin],
     components: {
       HepLogoNoClaim,
       EhbLogo,

client/src/pages/index.vue

@@ -14,7 +14,7 @@
       </li>
       <li>
         <router-link to="/module">
-          Modul
+          {{ $flavor.textModule }}
         </router-link>
       </li>
       <li>

client/src/pages/instrumentOverview.vue

@@ -2,8 +2,13 @@
   <div class="instrument-overview">
     <instrument-filter
       class="instrument-overview__filter"
+      v-if="$flavor.showInstrumentFilterSidebar"
       @filter="updateFilter"
     />
+    <div
+      class="instrument-overview__filter"
+      v-else
+    />
     <div class="instrument-overview__list">
       <router-link
         :to="{name: 'instrument', params: {slug: instrument.slug}}"

client/src/pages/license-activation.vue

@@ -50,13 +50,13 @@
           <a
             :href="teacherEditionUrl"
             class="hep-link"
-          >{{ pageTitle }} für Lehrpersonen</a>
+          >{{ flavorPageTitle }} für Lehrpersonen</a>
         </li>
         <li class="license-links__item">
           <a
             :href="studentEditionUrl"
             class="hep-link"
-          >{{ pageTitle }} für Lernende</a>
+          >{{ flavorPageTitle }} für Lernende</a>
         </li>
       </ul>
     </section>
@@ -68,16 +68,15 @@
   import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import LoadingButton from '@/components/LoadingButton';
-  import {ValidationObserver} from 'vee-validate';
+  import { ValidationObserver } from 'vee-validate';
 
   import me from '@/mixins/me';
   import logout from '@/mixins/logout';
-  import pageTitleMixin from '@/mixins/page-title';
 
   const ValidatedInput = () => import('@/components/validation/ValidatedInput');
 
   export default {
-    mixins: [me, logout, pageTitleMixin],
+    mixins: [me, logout],
     components: {
       LoadingButton,
       ValidationObserver,

client/src/pages/module/moduleSettings.vue

@@ -8,7 +8,7 @@
         Lösungen
       </h2>
       <p class="module-settings__paragraph">
-        Wollen Sie die Lösungen in diesem Modul für die Lernenden der ausgewählten Klasse anzeigen?
+        Wollen Sie die Lösungen in diesem {{ $flavor.textModule }} für die Lernenden der ausgewählten Klasse anzeigen?
       </p>
       <toggle-solutions-for-module />
     </section>

client/src/pages/onboarding/start.vue

@@ -6,19 +6,15 @@
     </h1>
 
     <p class="onboarding__claim">
-      Schauen Sie sich die Einführung an und lernen Sie {{ pageTitle }} kennen.
+      Schauen Sie sich die Einführung an und lernen Sie {{ flavorPageTitle }} kennen.
     </p>
   </div>
 </template>
 
 <script>
-  import pageTitleMixin from '@/mixins/page-title';
-
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-
-    mixins: [pageTitleMixin],
     components: {
       Logo
     },

client/src/pages/onboarding/step1.vue

@@ -7,16 +7,16 @@
       Ihr Lernbereich
     </h1>
     <h2 class="onboarding__heading">
-      Themen
+      {{ $flavor.textTopics }}
     </h2>
     <p class="onboarding__paragraph">
-      In den «Themen» finden Sie aktuelle Module mit Aufträgen und Situationen.
+      In den «{{ $flavor.textTopics }}» finden Sie aktuelle {{ $flavor.textModules }} mit Aufträgen und Situationen.
     </p>
     <h2 class="onboarding__heading">
-      Instrumente
+      {{ $flavor.textInstruments }}
     </h2>
     <p class="onboarding__paragraph">
-      Die «Instrumente» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
+      Die «{{ $flavor.textInstruments }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
     </p>
     <h2 class="onboarding__heading">
       News

client/src/pages/snapshot/snapshots.vue

@@ -2,7 +2,7 @@
   <div class="snapshots">
     <h1>Snapshots</h1>
     <p class="snapshots__details">
-      Thema: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
+      {{ $flavor.textTopic }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
     </p>
     <snapshot-team-menu
       :selected="selectedLink"
@@ -24,7 +24,6 @@
 
 <script>
   import SnapshotListItem from '@/components/modules/SnapshotListItem';
-
   import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
   import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
 

client/src/pages/start.vue

@@ -9,14 +9,14 @@
           class="start-page__heading"
           data-cy="start-page-heading"
         >
-          Letzte Module
+          Letzte {{ $flavor.textModules }}
         </h2>
         <h3
           class="start-page__no-modules"
           data-cy="no-modules-yet"
           v-if="!me.recentModules.length"
         >
-          Sie haben sich noch kein Modul angeschaut. Legen Sie jetzt los!
+          Sie haben sich noch kein {{ $flavor.textModule }} angeschaut. Legen Sie jetzt los!
         </h3>
         <div class="start-page__modules-list">
           <module-teaser
@@ -34,7 +34,7 @@
           tag="div"
           class="button"
         >
-          Alle Module anzeigen
+          Alle {{ $flavor.textModules }} anzeigen
         </router-link>
       </div>
       <div
@@ -63,10 +63,10 @@
 
       <div class="start-page__onboarding">
         <h2 class="start-page__heading">
-          Kennen Sie schon alle Bereiche von {{ pageTitle }}?
+          Kennen Sie schon alle Bereiche von {{ flavorPageTitle }}?
         </h2>
         <p class="start-page__paragraph">
-          Schauen Sie sich jetzt die Einführung zu {{ pageTitle }} an.
+          Schauen Sie sich jetzt die Einführung zu {{ flavorPageTitle }} an.
         </p>
         <router-link
           :to="{name: 'onboarding-start'}"
@@ -82,15 +82,12 @@
   import NewsTeaser from '@/components/news/NewsTeaser.vue';
   import ModuleTeaser from '@/components/modules/ModuleTeaser';
 
-
   import meQuery from '@/mixins/me';
   import news from '@/mixins/news';
 
-  import pageTitleMixin from '@/mixins/page-title';
-
   export default {
 
-    mixins: [meQuery, news, pageTitleMixin],
+    mixins: [meQuery, news],
 
     components: {
       NewsTeaser,
@@ -106,7 +103,7 @@
       },
       moduleText() {
         if (this.me.lastModule && this.me.lastModule.slug) {
-          return 'Aktuelles Modul anzeigen';
+          return `Aktuelles ${this.$flavor.textModule} anzeigen`;
         }
         return 'Alle Inhalte anzeigen';
       },

client/src/pages/topic-page.vue

@@ -30,7 +30,7 @@
           v-if="me.isTeacher && topic.instructions"
         >
           <bulb-icon class="topic__instruction-icon topic__link-icon" />
-          <span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
+          <span class="topic__link-description">Anweisungen zum {{ $flavor.textTopic }} anzeigen</span>
         </a>
       </div>
       <div class="topic__modules">
@@ -52,6 +52,7 @@
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+
   const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
   const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
 

client/src/plugins/flavor.js

@@ -0,0 +1,7 @@
+import flavorValues from '@/helpers/app-flavor';
+
+export default {
+  install: (Vue) => {
+    Vue.prototype.$flavor = Object.assign({}, flavorValues);
+  }
+};

client/src/router/portfolio.routes.js

@@ -1,4 +1,6 @@
-import {NEW_PROJECT_PAGE, PROJECTS_PAGE} from '@/router/portfolio.names';
+import { NEW_PROJECT_PAGE, PROJECTS_PAGE } from '@/router/portfolio.names';
+import flavorValues from '@/helpers/app-flavor';
+
 const portfolio = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/portfolio');
 const project = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/project');
 const newProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/newProject');
@@ -11,6 +13,6 @@ const portfolioRoutes = [
   {path: '/edit-project/:slug', name: 'edit-project', component: editProject, props: true},
 ];
 
-const routes = process.env.VUE_APP_ENABLE_PORTFOLIO ? portfolioRoutes : [];
+const routes = flavorValues.showPortfolio ? portfolioRoutes : [];
 
 export default routes;