make meta data configurable

backend/src/config/index.ts

@@ -7,7 +7,6 @@ import { config } from 'dotenv'
 import * as SMTPTransport from 'nodemailer/lib/smtp-pool'
 
 import emails from './emails'
-import metadata from './metadata'
 
 // Load env file
 config()
@@ -110,11 +109,15 @@ const s3 = {
     env.AWS_BUCKET,
 }
 
+const meta = {
+  APPLICATION_NAME: process.env.APPLICATION_NAME ?? 'ocelot.social',
+  ORGANIZATION_NAME: process.env.ORGANIZATION_NAME ?? 'ocelot.social Community',
+}
+
 const options = {
   EMAIL_DEFAULT_SENDER: env.EMAIL_DEFAULT_SENDER,
   SUPPORT_EMAIL: env.SUPPORT_EMAIL,
   SUPPORT_URL: emails.SUPPORT_LINK,
-  APPLICATION_NAME: metadata.APPLICATION_NAME,
   ORGANIZATION_URL: emails.ORGANIZATION_LINK,
   PUBLIC_REGISTRATION: env.PUBLIC_REGISTRATION === 'true' || false,
   INVITE_REGISTRATION: env.INVITE_REGISTRATION !== 'false', // default = true
@@ -147,6 +150,7 @@ export default {
   ...s3,
   ...options,
   ...language,
+  ...meta,
 }
 
 export { nodemailerTransportOptions }

backend/src/config/metadata.ts

@@ -1,10 +0,0 @@
-// this file is duplicated in `backend/src/config/metadata` and `webapp/constants/metadata.js` and replaced on rebranding
-export default {
-  APPLICATION_NAME: 'ocelot.social',
-  APPLICATION_SHORT_NAME: 'ocelot.social',
-  APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
-  COOKIE_NAME: 'ocelot-social-token',
-  ORGANIZATION_NAME: 'ocelot.social Community',
-  ORGANIZATION_JURISDICTION: 'City of Angels',
-  THEME_COLOR: 'rgb(23, 181, 63)', // $color-primary – as the main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
-}

backend/src/constants/categories.ts

@@ -1,4 +1,4 @@
-// this file is duplicated in `backend/src/constants/metadata` and `webapp/constants/metadata.js`
+// this file is duplicated in `backend/src/constants/categories` and `webapp/constants/categories.js`
 export const CATEGORIES_MIN = 1
 export const CATEGORIES_MAX = 3
 

backend/src/emails/sendEmail.ts

@@ -12,7 +12,6 @@ import { createTransport } from 'nodemailer'
 
 import CONFIG, { nodemailerTransportOptions } from '@config/index'
 import logosWebapp from '@config/logosBranded'
-import metadata from '@config/metadata'
 import { UserDbProperties } from '@db/types/User'
 
 const welcomeImageUrl = new URL(logosWebapp.LOGO_WELCOME_PATH, CONFIG.CLIENT_URI)
@@ -21,7 +20,7 @@ const settingsUrl = new URL('/settings/notifications', CONFIG.CLIENT_URI)
 export const defaultParams = {
   welcomeImageUrl,
   APPLICATION_NAME: CONFIG.APPLICATION_NAME,
-  ORGANIZATION_NAME: metadata.ORGANIZATION_NAME,
+  ORGANIZATION_NAME: CONFIG.ORGANIZATION_NAME,
   ORGANIZATION_URL: CONFIG.ORGANIZATION_URL,
   SUPPORT_EMAIL: CONFIG.SUPPORT_EMAIL,
   supportUrl: CONFIG.SUPPORT_URL,

backend/tools/replace-constants.sh

@@ -3,6 +3,5 @@
 # TODO: this is a hack, we should find a better way to share files between backend and webapp
 [ -f src/config/tmp/emails.js ] && mv src/config/tmp/emails.js src/config/emails.ts
 [ -f src/config/tmp/logos.js ] && mv src/config/tmp/logos.js src/config/logos.ts
-[ -f src/config/tmp/metadata.js ] && mv src/config/tmp/metadata.js src/config/metadata.ts
 [ -f src/constants/categories.js ] && mv src/constants/categories.js src/constants/categories.ts
 exit 0

webapp/components/LoginForm/LoginForm.vue

@@ -53,7 +53,7 @@
 
 <script>
 import links from '~/constants/links.js'
-import metadata from '~/constants/metadata.js'
+import CONFIG from '~/config'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
@@ -70,7 +70,9 @@ export default {
   },
   data() {
     return {
-      metadata,
+      metadata: {
+        APPLICATION_NAME: CONFIG.APPLICATION_NAME,
+      },
       links,
       form: {
         email: '',

webapp/components/Logo/Logo.vue

@@ -20,7 +20,7 @@
 
 <script>
 import logos from '~/constants/logosBranded.js'
-import metadata from '~/constants/metadata.js'
+import CONFIG from '~/config'
 
 /**
  * This component displays the brand's logo.
@@ -90,7 +90,9 @@ export default {
     }
     return {
       logo: logosObject[this.logoType],
-      metadata,
+      metadata: {
+        APPLICATION_NAME: CONFIG.APPLICATION_NAME,
+      },
     }
   },
   computed: {

webapp/components/Registration/RegistrationSlider.vue

@@ -44,7 +44,6 @@
 
 <script>
 import links from '~/constants/links.js'
-import metadata from '~/constants/metadata.js'
 import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
@@ -54,6 +53,7 @@ import RegistrationSlideEmail from './RegistrationSlideEmail'
 import RegistrationSlideInvite from './RegistrationSlideInvite'
 import RegistrationSlideNonce from './RegistrationSlideNonce'
 import RegistrationSlideNoPublic from './RegistrationSlideNoPublic'
+import CONFIG from '~/config'
 
 export default {
   name: 'RegistrationSlider',
@@ -89,7 +89,10 @@ export default {
       },
       enterInvite: {
         name: 'enter-invite',
-        titleIdent: { id: 'components.registration.signup.title', data: metadata },
+        titleIdent: {
+          id: 'components.registration.signup.title',
+          data: { APPLICATION_NAME: CONFIG.APPLICATION_NAME },
+        },
         validated: false,
         data: { request: null, response: { isValidInviteCode: false } },
         button: {
@@ -168,7 +171,9 @@ export default {
         query: this.$route.query,
       },
       links,
-      metadata,
+      metadata: {
+        APPLICATION_NAME: CONFIG.APPLICATION_NAME,
+      },
       sliderData: {
         collectedInputData: {
           inviteCode: null,

webapp/config/index.js

@@ -37,7 +37,16 @@ const options = {
   CATEGORIES_ACTIVE: process.env.CATEGORIES_ACTIVE === 'true' || false,
   BADGES_ENABLED: process.env.BADGES_ENABLED === 'true' || false,
   INVITE_LINK_LIMIT: process.env.INVITE_LINK_LIMIT || 7,
-  NETWORK_NAME: process.env.NETWORK_NAME || 'Ocelot.social',
+}
+
+const meta = {
+  APPLICATION_NAME: process.env.APPLICATION_NAME ?? 'ocelot.social',
+  APPLICATION_SHORT_NAME: process.env.APPLICATION_SHORT_NAME ?? 'ocelot.social',
+  APPLICATION_DESCRIPTION: process.env.APPLICATION_DESCRIPTION ?? 'ocelot.social Community Network',
+  COOKIE_NAME: process.env.COOKIE_NAME ?? 'ocelot-social-token',
+  ORGANIZATION_NAME: process.env.ORGANIZATION_NAME ?? 'ocelot.social Community',
+  ORGANIZATION_JURISDICTION: process.env.ORGANIZATION_JURISDICTION ?? 'City of Angels',
+  THEME_COLOR: process.env.THEME_COLOR ?? 'rgb(23, 181, 63)', // $color-primary – as the main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
 }
 
 const language = {
@@ -51,6 +60,7 @@ const CONFIG = {
   ...sentry,
   ...options,
   ...language,
+  ...meta,
 }
 
 // override process.env with the values here since they contain default values

webapp/constants/categories.js

@@ -1,3 +1,3 @@
-// this file is duplicated in `backend/src/constants/metadata.js` and `webapp/constants/metadata.js`
+// this file is duplicated in `backend/src/constants/categories.js` and `webapp/constants/categories.js`
 export const CATEGORIES_MIN = 1
 export const CATEGORIES_MAX = 3

webapp/constants/dateTime.js

@@ -1,4 +1,4 @@
-// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js`
+// this file is duplicated in `backend/src/config/dataTime.js` and `webapp/constants/dataTime.js`
 export default {
   RELATIVE_DATETIME: true,
   ABSOLUT_DATETIME_FORMAT: 'P',

webapp/constants/manifest.js

@@ -1,10 +1,9 @@
-import metadata from './metadata.js'
-const { APPLICATION_NAME, APPLICATION_SHORT_NAME, APPLICATION_DESCRIPTION, THEME_COLOR } = metadata
+import CONFIG from '~/config'
 
 export default {
-  name: APPLICATION_NAME,
-  short_name: APPLICATION_SHORT_NAME,
-  description: APPLICATION_DESCRIPTION,
-  theme_color: THEME_COLOR,
+  name: CONFIG.APPLICATION_NAME,
+  short_name: CONFIG.APPLICATION_SHORT_NAME,
+  description: CONFIG.APPLICATION_DESCRIPTION,
+  theme_color: CONFIG.THEME_COLOR,
   lang: 'en',
 }

webapp/constants/metadata.js

@@ -1,10 +0,0 @@
-// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js` and replaced on rebranding
-export default {
-  APPLICATION_NAME: 'ocelot.social',
-  APPLICATION_SHORT_NAME: 'ocelot.social',
-  APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
-  COOKIE_NAME: 'ocelot-social-token',
-  ORGANIZATION_NAME: 'ocelot.social Community',
-  ORGANIZATION_JURISDICTION: 'City of Angels',
-  THEME_COLOR: 'rgb(23, 181, 63)', // $color-primary – as the main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
-}

webapp/maintenance/source/pages/index.vue

@@ -45,10 +45,8 @@
 
 <script>
 import emails from '~/constants/emails.js'
-// import links from '~/constants/links.js'
-import metadata from '~/constants/metadata.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-// import Logo from '~/components/Logo/Logo'
+import CONFIG from '~/config'
 
 export default {
   layout: 'blank',
@@ -58,7 +56,9 @@ export default {
   },
   data() {
     // return { links, metadata, supportEmail: emails.SUPPORT_EMAIL }
-    return { metadata, supportEmail: emails.SUPPORT_EMAIL }
+    return { metadata: {
+      APPLICATION_NAME: CONFIG.APPLICATION_NAME,
+    }, supportEmail: emails.SUPPORT_EMAIL }
   },
 }
 </script>

webapp/nuxt.config.js

@@ -1,6 +1,5 @@
 import path from 'path'
 import manifest from './constants/manifest.js'
-import metadata from './constants/metadata.js'
 
 const CONFIG = require('./config').default // we need to use require since this is only evaluated at compile time.
 
@@ -211,7 +210,7 @@ export default {
 
   // Give apollo module options
   apollo: {
-    tokenName: metadata.COOKIE_NAME, // optional, default: apollo-token
+    tokenName: CONFIG.COOKIE_NAME, // optional, default: apollo-token
     cookieAttributes: {
       expires: CONFIG.COOKIE_EXPIRE_TIME, // optional, default: 7 (days)
       /** * Define the path where the cookie is available. Defaults to '/' */

webapp/pages/password-reset.vue

@@ -16,11 +16,11 @@
 
 <script>
 import links from '~/constants/links.js'
-import metadata from '~/constants/metadata.js'
 import loginConstants from '~/constants/loginBranded.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+import CONFIG from '~/config'
 
 export default {
   components: {
@@ -31,7 +31,9 @@ export default {
   layout: loginConstants.LAYOUT,
   data() {
     return {
-      metadata,
+      metadata: {
+        APPLICATION_NAME: CONFIG.APPLICATION_NAME,
+      },
       links,
     }
   },

webapp/plugins/apollo-config.js

@@ -1,6 +1,5 @@
 import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
 import introspectionQueryResultData from './apollo-config/fragmentTypes.json'
-import metadata from '~/constants/metadata'
 
 const fragmentMatcher = new IntrospectionFragmentMatcher({
   introspectionQueryResultData,
@@ -17,7 +16,7 @@ export default ({ req, nuxtState }) => {
       credentials: 'same-origin',
     },
     credentials: true,
-    tokenName: metadata.COOKIE_NAME,
+    tokenName: env.COOKIE_NAME,
     persisting: false,
     websocketsOnly: false,
     cache: new InMemoryCache({ fragmentMatcher }),

webapp/store/auth.js

@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import { currentUserQuery } from '~/graphql/User'
 import Cookie from 'universal-cookie'
-import metadata from '~/constants/metadata'
+import CONFIG from '~/config'
 
 const cookies = new Cookie()
 
@@ -106,7 +106,7 @@ export const actions = {
       await this.app.$apolloHelpers.onLogin(login)
       commit('SET_TOKEN', login)
       await dispatch('fetchCurrentUser')
-      if (cookies.get(metadata.COOKIE_NAME) === undefined) {
+      if (cookies.get(CONFIG.COOKIE_NAME) === undefined) {
         throw new Error('no-cookie')
       }
     } catch (err) {