fix(home, subscriptions): remove subscriptions, lite code, ghost blog switch 🐛

Author: PierreBrisorgueil

src/config/defaults/development.js

@@ -18,7 +18,6 @@ module.exports = {
       home: 'home',
       auth: 'auth',
       users: 'users',
-      subscriptions: 'subscriptions',
       tasks: 'tasks',
     },
   },
@@ -133,7 +132,6 @@ module.exports = {
     ],
   },
   home: {
-    subscriptions: true, // disbale / enable
     temporalBackground: 'https://blog.weareopensource.me/content/images/size/w1600/2020/11', // one by hour 00.jpg, 01.jpg; 02.jpg ... set to null default background would be in @/assets/images/background.jpg
     abouts: [
       {
@@ -219,6 +217,7 @@ module.exports = {
       // actually dev for Ghost Blog
       title: 'Blog',
       url: 'https://blog.weareopensource.me',
+      subscribe: 'https://blog.weareopensource.me/#subscribe',
       key: '0415f48774e7c49c713204f787',
     },
     contact: {

src/modules/_app/app.router.js

@@ -9,11 +9,10 @@ import config from '@/config';
 import home from '@/modules/home/router/home.router';
 import auth from '@/modules/auth/router/auth.router';
 import users from '@/modules/users/router/users.router';
-import subscriptions from '@/modules/subscriptions/router/subscriptions.router';
 import secure from '@/modules/secure/router/secure.router';
 import tasks from '@/modules/tasks/router/tasks.router';
 
-const routes = [].concat(home, auth, users, subscriptions, secure, tasks);
+const routes = [].concat(home, auth, users, secure, tasks);
 
 /**
  * Router configuration

src/modules/_app/app.store.js

@@ -6,7 +6,6 @@ import Vuex from 'vuex';
 import core from '@/modules/_core/stores/core.store';
 import auth from '@/modules/auth/stores/auth.store';
 import users from '@/modules/users/stores/users.store';
-import subscriptions from '@/modules/subscriptions/stores/subscriptions.store';
 import home from '@/modules/home/stores/home.store';
 import tasks from '@/modules/tasks/stores/tasks.store';
 
@@ -25,7 +24,6 @@ export default new Vuex.Store({
     core,
     auth,
     users,
-    subscriptions,
     home,
     tasks,
   },

src/modules/home/components/home.banner.component.vue

@@ -2,15 +2,19 @@
   - Call example
     <homeBannerComponent
       v-bind:ratio="1"
-      v-bind:subscribe="true"
       v-bind:app="app"
     ></homeBannerComponent>
   - Data Example
   app: {
     title: 'WAOS Dev',
     logo: 'logo.png', // null to use title by default
     subtitle: 'welcome to demo.',
-    description: 'Vue - Boilerplate Front : Vuetify, Axios, Jest, Cypress (Alpha) '
+    description: 'Vue - Boilerplate Front : Vuetify, Axios, Jest, Cypress (Alpha)'
+    home: {
+      blog: {
+        subscribe: '...'
+      }
+    }
   },
 -->
 <template>
@@ -85,23 +89,17 @@
                 xl="5"
                 style="bottom: 5%; position: absolute; opacity: 75%;"
                 data-aos="fade-up"
-                v-if="config.home.subscriptions && subscribe"
+                v-if="config.home.blog && config.home.blog.subscribe"
               >
-                <v-text-field
-                  v-model="email"
-                  :flat="config.vuetify.theme.flat"
-                  :rules="[rules.email]"
-                  :append-icon="'fa-envelope'"
-                  @click:append="createSubscription"
-                  @keydown.enter="createSubscription"
+                <v-btn
+                  :href="config.home.blog.subscribe"
+                  target="_blank"
+                  class="px-10"
                   height="55"
-                  name="Mail"
-                  placeholder="Stay informed by email."
-                  class="centered-input"
-                  solo
+                  elevation="0"
                   rounded
                   light
-                ></v-text-field>
+                ><span style="color:gray;">Stay informed by email<v-icon class="pl-8">fa-paper-plane</v-icon></span></v-btn>
               </v-col>
             </v-row>
           </v-container>
@@ -112,16 +110,12 @@
 </template>
 
 <script>
-/**
- * Module dependencies.
- */
-import { mapGetters } from 'vuex';
 /**
  * Export default
  */
 export default {
   name: 'homeBannerComponent',
-  props: ['ratio', 'subscribe', 'app', 'statusMargin', 'banner'],
+  props: ['ratio', 'app', 'statusMargin', 'banner'],
   data() {
     return {
       valid: false,
@@ -131,29 +125,10 @@ export default {
       },
     };
   },
-  computed: {
-    ...mapGetters(['homeSubscription']),
-    email: {
-      get() {
-        return this.homeSubscription.email;
-      },
-      set(email) {
-        this.save = true;
-        this.$store.commit('subscription_update', { email });
-      },
-    },
-  },
   methods: {
     generateTemporalBackground() {
       return `${this.config.home.temporalBackground}/${`0${new Date().getHours()}`.slice(-2)}.jpg`;
     },
-    createSubscription() {
-      if (this.rules.email(this.homeSubscription.email)) {
-        this.$store
-          .dispatch('createSubscription', this.homeSubscription)
-          .catch((err) => console.log(err));
-      }
-    },
   },
 };
 </script>

src/modules/home/stores/home.store.js

@@ -4,12 +4,10 @@
 import Vue from 'vue';
 import _ from 'lodash';
 import config from '@/config';
-import model from '@/lib/middlewares/model';
 import tools from '@/lib/helpers/tools';
 import GhostContentAPI from '@tryghost/content-api';
 
 const api = `${config.api.protocol}://${config.api.host}:${config.api.port}/${config.api.base}`;
-const whitelists = ['email', 'news'];
 
 /**
  * Getters: get state
@@ -18,7 +16,6 @@ const getters = {
   team: (state) => state.team,
   contents: (state) => state.contents,
   news: (state) => state.news,
-  homeSubscription: (state) => state.subscription,
   contact: (state) => state.contact,
   statistics: (state) => state.statistics,
 };
@@ -84,19 +81,6 @@ const actions = {
       commit('error', err);
     }
   },
-  createSubscription: async ({ commit }, params) => {
-    try {
-      const obj = model.clean(params, whitelists);
-      obj.news = true;
-      const res = await Vue.prototype.axios.post(
-        `${api}/${config.api.endPoints.subscriptions}/`,
-        obj,
-      );
-      commit('subscription_set', res.data.data);
-    } catch (err) {
-      commit('error', err);
-    }
-  },
   getStatistics: async ({ commit }) => {
     try {
       const tasks = await Vue.prototype.axios.get(`${api}/${config.api.endPoints.tasks}/stats`);
@@ -135,13 +119,6 @@ const mutations = {
     state.news = data;
   },
   // mail
-  subscription_set(state, data) {
-    state.subscription = data;
-  },
-  subscription_update(state, data) {
-    _.merge(state.subscription, data);
-  },
-  // mail
   contact_set(state, data) {
     state.contact = data;
   },
@@ -172,7 +149,6 @@ const state = {
   team: [],
   contents: [],
   news: [],
-  subscription: {},
   contact: {},
   statistics: config.home.stats.data,
 };

src/modules/home/views/home.view.vue

@@ -2,7 +2,6 @@
   <div>
     <homeBannerComponent
       v-bind:ratio="1"
-      v-bind:subscribe="true"
       v-bind:app="config.app"
       v-bind:statusMargin="450"
     ></homeBannerComponent>

src/modules/home/views/pages.view.vue

@@ -2,7 +2,6 @@
   <div>
     <homeBannerComponent
       v-bind:ratio="3"
-      v-bind:subscribe="false"
       v-bind:app="{ subtitle: this.$route.meta.title || this._.startCase(this.$route.params.name) }"
       v-bind:banner="(contents.length == 1 && contents[0].banner) ? contents[0].banner : null"
     ></homeBannerComponent>

src/modules/home/views/team.view.vue

@@ -2,7 +2,6 @@
   <div>
     <homeBannerComponent
       v-bind:ratio="3"
-      v-bind:subscribe="false"
       v-bind:app="{ subtitle: this.$route.meta.title }"
     ></homeBannerComponent>
     <v-container fluid>