feat(core): create the subscriptions sub-section

packages/@statusfy/core/client/assets/css/styles.css

@@ -457,3 +457,85 @@ main {
     }
   }
 }
+
+/* Header */
+.header {
+  @apply pt-4 my-2 flex flex-col items-center content-center flex-no-wrap;
+
+  @screen lg {
+    @apply flex-row items-stretch;
+  }
+
+  .logo-container {
+    @apply flex-none;
+  }
+
+  .logo {
+    @apply h-10;
+  }
+
+  .title {
+    @apply font-normal mx-4 my-2 text-xl flex-none;
+  }
+
+  .subscribe-container {
+    @apply flex-1 text-right my-2;
+
+    @screen lg {
+      @apply my-0;
+    }
+
+    .modal-container {
+      background-color: rgba(0, 0, 0, 0.5);
+
+      @apply fixed z-50 pin overflow-auto flex;
+    }
+
+    .modal-body {
+      background-color: var(--white);
+
+      /* @apply fixed shadow-inner max-w-md pin-b pin-x align-top m-auto justify-end p-8 w-full flex flex-col; */
+      @apply fixed shadow-inner max-w-md pin-b pin-x align-top m-auto justify-end w-full flex flex-col rounded-t;
+
+      @screen md {
+        @apply justify-center rounded h-auto shadow relative rounded;
+      }
+
+      .tabs-header {
+        @apply flex flex-col flex-no-wrap items-stretch content-center justify-between pt-2;
+
+        @screen md {
+          @apply flex-row;
+        }
+
+        > span {
+          color: var(--grey-dark);
+
+          @apply flex-1 text-center font-medium py-3 cursor-pointer mx-4;
+
+          &:hover {
+            color: var(--grey-darkest);
+          }
+
+          &.active {
+            color: var(--black);
+            @apply flex-1 text-center font-semibold;
+
+            @screen md {
+              border-bottom-color: var(--black);
+              @apply border-b-2;
+            }
+          }
+        }
+      }
+
+      .tabs-container {
+        @apply flex flex-col items-center my-6;
+
+        > div {
+          @apply flex items-center py-6 text-center;
+        }
+      }
+    }
+  }
+}

packages/@statusfy/core/client/components/Header.vue

@@ -1,21 +1,29 @@
 <template>
-  <div class="py-4 my-2 flex flex-col items-center md:flex-row">
-    <nuxt-link :to="localePath('index')">
+  <div class="header">
+    <nuxt-link
+      :to="localePath('index')"
+      class="logo-container">
       <img
         :alt="$t('title')"
         :src="$statusfy.assets.mainLogo"
-        class="h-10">
+        class="logo">
     </nuxt-link>
     <component
       :is="titleTag"
-      class="title font-normal mx-4 my-2 text-xl">
+      class="title">
       {{ $t('title') }}
     </component>
+    <Subscribe class="subscribe-container"/>
   </div>
 </template>
 
 <script>
+import Subscribe from './Subscribe'
+
 export default {
+  components: {
+    Subscribe
+  },
   props: {
     titleTag: {
       type: String,

packages/@statusfy/core/client/components/Subscribe.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <button
+      class="btn"
+      @click="toggleModal">{{ $t('notifications.subscribe') }}</button>
+
+    <div
+      v-show="isModalActive"
+      class="modal-container"
+      @click.self="toggleModal">
+      <div class="modal-body">
+        <div class="tabs-header">
+          <span
+            v-for="(tab, key) in tabs"
+            :key="key"
+            :class="{'active': selectedTab === key}"
+            @click="switchTab(key)">
+            {{ $t(`notifications.items.${key}.title`) }}
+          </span>
+          <span @click="toggleModal">{{ $t('notifications.close') }}</span>
+        </div>
+
+        <div class="tabs-container">
+          <div
+            v-if="tabs.twitter"
+            v-show="selectedTab === 'twitter'">
+            <a
+              :href="`https://twitter.com/${$statusfy.notifications.twitter[$i18n.locale]}?ref_src=twsrc%5Etfw`"
+              :data-lang="$i18n.locale"
+              data-size="large"
+              class="twitter-follow-button"
+              data-show-count="false">Follow @{{ $statusfy.notifications.twitter[$i18n.locale] }}</a>
+            <script
+              async
+              src="https://platform.twitter.com/widgets.js"
+              charset="utf-8"/>
+            &nbsp;
+            <span v-html="$t('notifications.items.twitter.description', { username: tabs.twitter[$i18n.locale] })"/>
+          </div>
+          <div
+            v-if="tabs.support"
+            v-show="selectedTab === 'support'">
+            <span v-html="$t('notifications.items.support.description', { url: tabs.support[$i18n.locale] })"/>
+          </div>
+          <div
+            v-if="tabs.icalendar && icalendarUrl"
+            v-show="selectedTab === 'icalendar'">
+            <span v-html="$t('notifications.items.icalendar.description', { url: icalendarUrl })"/>
+          </div>
+          <div
+            v-if="tabs.feeds"
+            v-show="selectedTab === 'feeds'">
+            <span v-html="$t('notifications.items.feeds.description', { atom_url: feedsUrls.atom, rss_url: feedsUrls.rss })"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isModalActive: false,
+      selectedTab: null
+    }
+  },
+  computed: {
+    tabs () {
+      const results = {}
+      const keys = Object.keys(this.$statusfy.notifications)
+
+      keys.forEach(key => {
+        if (this.$statusfy.notifications[key]) {
+          results[key] = this.$statusfy.notifications[key]
+        }
+      })
+
+      this.switchTab(Object.keys(results)[0])
+
+      return results
+    },
+    icalendarUrl () {
+      if (process.client) {
+        return `webcal://${window.location.hostname}/calendars/scheduled.${this.$i18n.locale}.ics`
+      } else {
+        return null
+      }
+    },
+    feedsUrls () {
+      const atom = `//${window.location.hostname}/feeds/incidents.${this.$i18n.locale}.atom`
+      const rss = `//${window.location.hostname}/feeds/incidents.${this.$i18n.locale}.xml`
+
+      return {
+        atom,
+        rss
+      }
+    }
+  },
+  methods: {
+    toggleModal () {
+      this.isModalActive = !this.isModalActive
+    },
+    switchTab (key) {
+      this.selectedTab = key
+    }
+  }
+}
+</script>

packages/@statusfy/core/client/components/icons/fortawesome/check-circle-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/chevron-left-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/chevron-right-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/clock-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/exclamation-circle-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/external-link-alt-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/minus-circle-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/question-circle-regular.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/times-circle-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/components/icons/fortawesome/unlink-solid.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable */
 /* tslint:disable */
 // @ts-ignore

packages/@statusfy/core/client/locales/en-default.json

@@ -75,5 +75,27 @@
         "description": "The API Endpoints any developers can access to"
       }
     }
+  },
+  "notifications": {
+    "subscribe": "Subscribe",
+    "close": "Close",
+    "items": {
+      "icalendar": {
+        "title": "Calendar",
+        "description": "Receive <strong>Scheduled Maintenances</strong> via <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">iCalendar</a>."
+      },
+      "feeds": {
+        "title": "Feeds",
+        "description": "Get <a href=\"{atom_url}\" target=\"_blank\" rel=\"noopener\">the Atom Feed</a> or <a href=\"{rss_url}\" target=\"_blank\" rel=\"noopener\">the RSS Feed</a>."
+      },
+      "twitter": {
+        "title": "Twitter",
+        "description": "or <a href=\"https://twitter.com/{username}\" target=\"_blank\" rel=\"noopener\">view our Profile</a>."
+      },
+      "support": {
+        "title": "Support",
+        "description": "Visit our <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Support Site</a>."
+      }
+    }
   }
 }

packages/@statusfy/core/client/locales/es-default.json

@@ -75,5 +75,27 @@
         "description": "Los puntos finales del API a los que cualquier desarrollador puede acceder"
       }
     }
+  },
+  "notifications": {
+    "subscribe": "Suscribirse",
+    "close": "Cerrar",
+    "items": {
+      "icalendar": {
+        "title": "Calendario",
+        "description": "Recibe <strong>Mantenimientos Programados</strong> a través de <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">iCalendar</a>."
+      },
+      "feeds": {
+        "title": "Feeds",
+        "description": "Obtén feeds <a href=\"{atom_url}\" target=\"_blank\" rel=\"noopener\">Atom</a> o <a href=\"{rss_url}\" target=\"_blank\" rel=\"noopener\">RSS</a>."
+      },
+      "twitter": {
+        "title": "Twitter",
+        "description": "o <a href=\"https://twitter.com/{username}\" target=\"_blank\" rel=\"noopener\">visita Nuestro Perfil</a>."
+      },
+      "support": {
+        "title": "Soporte",
+        "description": "Visita nuestro <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">Sitio de Soporte</a>."
+      }
+    }
   }
 }