feat(website): create the news subscription form

juliomrqz · Nov 15, 2018 · 6be629b · 6be629b
1 parent a7c468b
commit 6be629b
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 105 deletions.
diff --git a/packages/@statusfy/common/components/Subscribe.vue b/packages/@statusfy/common/components/Subscribe.vue
@@ -0,0 +1,56 @@
+
+<template>
+  <div>
+    <div>{{ text[lang].title }}</div>
+
+    <!-- <form
+      action="https://gridsome.us19.list-manage.com/subscribe/post?u=960a357f3405a688ff935a10e&id=42bbd30818"
+      method="post"
+      id="mc-embedded-subscribe-form"
+      name="mc-embedded-subscribe-form"
+      target="_blank"
+      novalidate="novalidate">
+
+      <div class="flex">
+        <div>
+          <input type="email" aria-label="Email" :placeholder="text[lang].placeholder" name="EMAIL" id="mce-EMAIL" class="email">
+        </div>
+
+        <div class="newsletter__button">
+          <input type="submit" :value="text[lang].button" name="subscribe" id="mc-embedded-subscribe" class="button">
+        </div>
+      </div>
+
+    </form> -->
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    lang: {
+      type: String,
+      default: 'en'
+    }
+  },
+  data() {
+    return {
+      text: {
+        en: {
+          title: 'Want to keep up with the latest news, tips & tricks from Statuffy?',
+          subtitle: 'Subscribe to the Newsletter!',
+          placeholder: 'your@email.com',
+          button: 'Subscribe'
+        },
+        es: {
+          title: '¿Desea mantenerse al día con las últimas noticias, consejos y trucos de Statuffy?',
+          subtitle: '¡Suscríbete al boletín!',
+          placeholder: 'tu@email.com',
+          button: 'Suscribirse'
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/packages/website/assets/css/styles.css b/packages/website/assets/css/styles.css
@@ -2,7 +2,7 @@
 @import '@statusfy/common/lib/style/base';
 
 .btn {
-  @apply inline-block px-6 py-3 leading-none border rounded whitespace-no-wrap text-lg;
+  @apply inline-block px-6 py-3 leading-none border rounded whitespace-no-wrap text-lg cursor-pointer;
 }
 
 .btn-blue {

diff --git a/packages/website/components/common/LatestPosts.vue b/packages/website/components/common/LatestPosts.vue
@@ -42,16 +42,20 @@
           {{ $t('blog.readMore') }}
         </nuxt-link>
       </div>
+
+      <Subscribe class="max-w-md mx-auto"/>
     </div>
   </section>
 </template>
 
 <script>
 import AticleCard from '~/components/blog/ArticleCard'
+import Subscribe from '~/components/common/Subscribe.vue'
 
 export default {
   components: {
-    AticleCard
+    AticleCard,
+    Subscribe
   },
   props: {
     posts: {

diff --git a/packages/website/components/common/Subscribe.vue b/packages/website/components/common/Subscribe.vue
@@ -0,0 +1,85 @@
+
+<template>
+  <div
+    id="subscribe"
+    class="p-8 mb-4 rounded leading-tight relative text-center w-full">
+    <div class="text-xl font-semibold mb-2">{{ text[$i18n.locale].title }}</div>
+    <div class="text-lg mb-4">{{ text[$i18n.locale].subtitle }}</div>
+
+    <form
+      id="mc-embedded-subscribe-form"
+      action="`https://bazzite.us11.list-manage.com/subscribe/post?u=34b09d915eae6d2857425420f&id=095eb8d814`"
+      method="post"
+      name="mc-embedded-subscribe-form"
+      class="validate"
+      target="_blank"
+      novalidate>
+
+      <input
+        type="text"
+        name="b_34b09d915eae6d2857425420f_095eb8d814"
+        tabindex="-1"
+        value=""
+        class="hidden">
+
+      <div class="flex flex-col sm:flex-row items-center flex-no-wrap">
+        <div class="flex-grow mb-4">
+          <input
+            id="mce-EMAIL"
+            :placeholder="text[$i18n.locale].placeholder"
+            type="email"
+            value=""
+            name="EMAIL"
+            class="appearance-none border rounded w-full py-3 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline leading-none"
+            required>
+        </div>
+
+        <div class="flex-none mb-4">
+          <input
+            id="mc-embedded-subscribe"
+            :value="text[$i18n.locale].button"
+            type="submit"
+            name="subscribe"
+            class="btn btn-blue sm:ml-4">
+        </div>
+      </div>
+    </form>
+
+    <div class="text-sm">
+      <a
+        :href="text[$i18n.locale].privacyLink"
+        target="_blank"
+        rel="noopener"
+        class="text-grey-dark">
+        {{ text[$i18n.locale].privacyText }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: {
+        en: {
+          title: 'Want to keep up with the latest news, tips and tricks from Statusfy?',
+          subtitle: 'Subscribe to our Newsletter!',
+          placeholder: 'your@email.com',
+          button: 'Subscribe',
+          privacyText: 'Privacy Policy',
+          privacyLink: 'https://www.bazzite.com/legal/privacy'
+        },
+        es: {
+          title: '¿Deseas mantenerte al día con las últimas noticias, consejos y trucos de Statusfy?',
+          subtitle: '¡Suscríbete a nuestro boletín!',
+          placeholder: 'tu@email.com',
+          button: 'Suscribirse',
+          privacyText: 'Política de Privacidad',
+          privacyLink: 'https://www.bazzite.com/es/legal/privacy'
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -23,6 +23,7 @@
     "@nuxtjs/google-analytics": "^2.0.2",
     "@nuxtjs/pwa": "^2.6.0",
     "@nuxtjs/sitemap": "^0.1.1",
+    "@statusfy/common": "^0.1.0",
     "animate.css": "^3.7.0",
     "date-fns": "1.29.0",
     "github-markdown-css": "^2.10.0",

diff --git a/packages/website/pages/blog/_slug.vue b/packages/website/pages/blog/_slug.vue
@@ -33,6 +33,8 @@
               {{ $t('blog.on') }} {{ formatDate(post.created) }}.
             </div>
 
+            <Subscribe class="max-w-md mx-auto"/>
+
             <div class="flex flex-wrap items-center justify-between mb-12">
               <AuthorCard
                 :post="post"
@@ -101,14 +103,16 @@
 <script>
 import AuthorCard from '~/components/blog/AuthorCard'
 import FormatDate from '~/components/mixins/FormatDate'
+import Subscribe from '~/components/common/Subscribe.vue'
 
 import '~/components/icons/fortawesome/twitter-square-brands'
 import '~/components/icons/fortawesome/facebook-square-brands'
 import '~/components/icons/fortawesome/linkedin-brands'
 
 export default {
   components: {
-    AuthorCard
+    AuthorCard,
+    Subscribe
   },
   mixins: [FormatDate],
   async asyncData({ app, params, payload }) {

diff --git a/packages/website/tailwind.js b/packages/website/tailwind.js
@@ -552,7 +552,7 @@ module.exports = {
   */
 
   modules: {
-    appearance: false,
+    appearance: [],
     backgroundAttachment: [],
     backgroundColors: ['responsive'],
     backgroundPosition: [],