feat(website): migrate the blog section to local markdown files

packages/website/assets/css/styles.css

@@ -1,6 +1,15 @@
 /* Custom Styles */
 @import '@statusfy/common/lib/style/base';
 
+html {
+  @apply leading-normal;
+}
+
+code[class*=language-],
+pre[class*=language-] {
+  font-family: inherit;
+}
+
 .btn {
   @apply inline-block px-6 py-3 leading-none border rounded whitespace-no-wrap text-white text-lg cursor-pointer;
 }

packages/website/components/blog/ArticleCard.vue

@@ -1,27 +1,27 @@
 <template>
   <article
-    class="bg-white shadow hover:shadow-md p-8 mb-4 rounded leading-tight relative"
+    class="bg-white shadow hover:shadow-md p-8 mb-4 rounded relative"
   >
     <h2 class="text-2xl font-semibold leading-none">
       <nuxt-link
-        :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })"
+        :to="localePath({ name: 'blog-slug', params: { slug: attributes.slug } })"
         class="text-black"
       >
-        {{ post.title }}
+        {{ attributes.title }}
       </nuxt-link>
     </h2>
 
     <!-- eslint-disable vue/no-v-html -->
     <p
       class="my-4 text-lg text-grey-darkest font-open-sans"
-      v-html="post.description"
+      v-html="attributes.description"
     />
     <!-- eslint-enable -->
 
-    <AuthorCard :post="post" />
+    <AuthorCard :post="attributes" />
 
     <nuxt-link
-      :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })"
+      :to="localePath({ name: 'blog-slug', params: { slug: attributes.slug } })"
       class="absolute pin overflow-hidden whitespace-no-wrap text-transparent hover:text-transparent z-0"
     >
       {{ $t('blog.readMore') }}
@@ -37,7 +37,7 @@ export default {
     AuthorCard
   },
   props: {
-    post: {
+    attributes: {
       type: Object,
       require: true,
       default: () => {}

packages/website/components/blog/AuthorCard.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div v-if="post.author">
     <div
       v-if="mode === 'simple'"
       class="flex flex-wrap items-center text-grey-darker"
     >
       <img
-        :src="post.author.avatar"
+        :src="require(`~/assets/img/avatars/${post.author.username}.jpg`)"
         class="rounded-full w-10 h-10"
       >
       <span class="ml-4 font-semibold relative z-10">
@@ -14,7 +14,7 @@
           target="_blank"
           rel="noopener"
         >
-          {{ post.author.first_name }} {{ post.author.last_name }}
+          {{ post.author.name }}
         </a>
       </span>
       <span>&nbsp;{{ $t('blog.on') }}&nbsp;</span>
@@ -25,7 +25,7 @@
       class="flex flex-wrap flex-col items-center justify-center text-grey-darker sm:justify-start sm:flex-row"
     >
       <img
-        :src="post.author.avatar"
+        :src="require(`~/assets/img/avatars/${post.author.username}.jpg`)"
         class="rounded-full w-12 h-12"
       >
       <div class="flex flex-col mx-4 mt-2">
@@ -35,13 +35,13 @@
             target="_blank"
             rel="noopener"
           >
-            {{ post.author.first_name }} {{ post.author.last_name }}
+            {{ post.author.name }}
           </a>
         </span>
         <div>
           <time :datetime="post.created">{{ formatDate(post.created) }}</time>
           <span class="dot-divider" />
-          <span>{{ post.reading_time }} {{ $t('blog.minRead') }}</span>
+          <span>{{ post.readingTime }} {{ $t('blog.minRead') }}</span>
         </div>
       </div>
     </div>
@@ -56,7 +56,8 @@ export default {
   props: {
     post: {
       type: Object,
-      required: true
+      required: true,
+      default: () => {}
     },
     mode: {
       type: String,

packages/website/components/blog/DynamicMarkdown.vue

@@ -0,0 +1,17 @@
+<script lang="js">
+/* eslint-disable vue/require-prop-types, no-unused-expressions, no-new-func */
+
+export default {
+  props: ['renderFunc', 'staticRenderFuncs'],
+  mounted() {
+    this.initHighlightJs
+  },
+  created: function () {
+    this.templateRender = new Function(this.renderFunc)()
+    this.$options.staticRenderFns = new Function(this.staticRenderFuncs)()
+  },
+  render: function (createElement) {
+    return this.templateRender ? this.templateRender() : createElement('div', 'Rendering')
+  }
+}
+</script>

packages/website/components/common/LatestPosts.vue

@@ -20,8 +20,8 @@
       <div class="max-w-md mx-auto">
         <AticleCard
           v-for="post in posts"
-          :key="post.slug"
-          :post="post"
+          :key="post.attributes.slug"
+          :attributes="post.attributes"
         />
 
         <div

packages/website/content/blog/en/introducing-statusfy-marvelous-open-source-status-page-system.md

@@ -0,0 +1,117 @@
+---
+title: "Introducing Statusfy: A Marvelous Open Source Status Page System"
+slug: "introducing-statusfy-marvelous-open-source-status-page-system"
+author: juliomrqz
+description: "Statusfy is a Status Page System, easy to use and completely Open Source. You can easily create a fast System either Static Generated or Server Rendered and easily deploy it to a variety of hosting services."
+published: "2018-11-14T14:58:34Z"
+created: "2018-11-14T14:58:34.140255Z"
+canonical: https://www.bazzite.com/blog/introducing-statusfy-marvelous-open-source-status-page-system
+---
+
+[Statusfy][statusfy-home] is a Status Page System, easy to use and completely Open Source. You can easily create a fast System either **Static Generated** or **Server Rendered** and easily deploy it to a variety of hosting services. The goal behind is to lower costs and complexity providing a simpler and versatile Open Source alternative.
+
+But, you may be thinking: Why do I need a Status Page System?. These systems are pretty simple and have one main task: communicate the status of an application or service. Nowadays, every single SaaS product should have a Status Page System, they allow us to increase customer confidence and reduce customer frustration about any service disruptions by giving retrospectives (also called Root Cause Analysis). With these systems, you can notify about service disruptions, planned maintenance or possible outages through multiple channels: email, SMS, Push, Webhooks, etc.
+
+
+## Another Status Page System. Why?
+
+Currently, you can find several paid and open source Status Page Systems, but Statusfy is different, it was designed to generate one of these Systems that acts as a Web Application with the [JAMstack][jamstack] and  [Serverless][serverless] architecture in mind. It can  also be created an [Isomorphic][isomorphic] application with Server Side Rendering if static contents are not a suitable choice. With these approaches, we wanted to enjoy a Status Page System that gives us better performance, higher security, cheaper hosting, and a better user experience.
+
+## Technology Behind
+
+A Statusfy site is a Web Application, created with [Vue][vue], [Nuxt.js][nuxt] and [Tailwind CSS][tailwindcss]: we use **Vue** to dynamically define the interfaces that represent the data, **Nuxt.js** to make a quick and useful abstraction of the client and server logic, and **Tailwind CSS** to rapidly define the style of the default theme.
+
+Besides, the System Incidents are created using **Markdown** and Statusfy generates all the needed logic of your Status Page. The final Web Application can be generated from a single CLI, can be easily configured or customized with your Style requirements.
+
+On the other hand, you can serve your Status Page System created with Statusfy in two different ways: 
+
+1. **Static Generated:** you can generate the HTML for every one of the routes and store it in a file. With this, you can host the generated web application on any static hosting!.
+2. **Server Rendered:** If you want to reduce your deployment time or just not want to use a Static Hosting, you may consider rendering the pages on both the server and client side.
+
+For these two ways of delivering your Statusfy Application, you can use great Hosting services. We created examples projects so you can start playing around right away with different popular hosting services you may want to use:
+
+
+|                                                              |                       Example Project                        |                       Example Project                        |
+| ------------------------------------------------------------ | :----------------------------------------------------------: | :----------------------------------------------------------: |
+| **Service**                                                  |                     **Static Generated**                     |                     **Server Rendered**                      |
+| [GitHub Pages](https://docs.statusfy.co/guide/deploy.html#github-pages) | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/github-pages/static-generated) |                              No                              |
+| [GitLab Pages](https://docs.statusfy.co/guide/deploy.html#gitlab-pages-and-gitlab-ci) | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/gitlab-pages/static-generated) |                              No                              |
+| [Netlify](https://docs.statusfy.co/guide/deploy.html#netlify) | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/netlify/static-generated) |                              No                              |
+| [Firebase](https://docs.statusfy.co/guide/deploy.html#firebase) | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/firebase/static-generated) | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/firebase/server-rendered) |
+| [Surge](https://docs.statusfy.co/guide/deploy.html#surge)    | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/surge/static-generated) |                              No                              |
+| [Heroku](https://docs.statusfy.co/guide/deploy.html#heroku)  | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/heroku/static-generated) | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/heroku/server-rendered) |
+| [Now](https://docs.statusfy.co/guide/deploy.html#now)        | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/now/static-generated) | [Yes](https://github.com/bazzite/statusfy-examples/blob/master/heroku/server-rendered) |
+{.table .table-striped .table-bordered}
+
+## Creating a Status Page System
+
+It’s pretty easy to get started with Statusfy. Install it globally with npm:
+
+***Make sure you have [npx][npx] installed (`npx` is shipped by default since [npm][npm] `5.2.0`)***
+
+```bash
+# change the working directory
+cd existing_folder
+
+# run the initialization command
+npx statusfy init
+
+# and install your local dependencies
+npm install  # OR yarn install
+```
+
+Create a new incident with this command:
+
+```bash
+npm run new-incident # OR yarn new-incident
+```
+
+and launch the development server with:
+
+```bash
+npm run dev # OR yarn dev
+```
+
+You can also generate a Static Generated Website with:
+
+```bash
+npm run generate # OR yarn generate
+```
+
+or generate a Server Rendered Website with:
+
+```bash
+# generate static assets
+npm run build # OR yarn build
+
+# launch the server
+npm run start # OR yarn start
+```
+
+
+## What's next
+
+In the next couple of months, we're going to continue to improve the [documentation][statusy-docs], [create tutorials][statusy-blog], [fix bugs][statusy-github], create a Project Editor, and add [extra features][statusy-docs-todo].
+
+
+## Contribute to Statusfy
+
+Statusfy is a completely open source project, sponsored by [Bazzite][bazzite-home]. It's still a work in progress, so any contribution is very welcome. We're passionate about building a versatile and a lower cost solution.
+
+You can also support us by giving a [GitHub star ★][statusy-github] and spread the word 🤓.
+
+
+[statusfy-home]: https://statusfy.co/
+[statusy-docs]: https://docs.statusfy.co
+[statusy-docs-todo]: https://docs.statusfy.co/guide/#todo
+[statusy-blog]: https://statusfy.co/blog
+[statusy-github]: https://github.com/bazzite/statusfy
+[bazzite-home]: https://www.bazzite.com
+[jamstack]: https://jamstack.org/
+[serverless]: https://serverless.com/learn/overview/
+[isomorphic]: https://www.netlify.com/blog/2017/06/06/jamstack-vs-isomorphic-server-side-rendering/
+[vue]: http://vuejs.org/
+[nuxt]: https://nuxtjs.org/
+[tailwindcss]: https://tailwindcss.com/
+[npx]: https://www.npmjs.com/package/npx
+[npm]: https://www.npmjs.com/get-npm

packages/website/content/blog/en/statusfy-release-0-2-0.md

@@ -0,0 +1,57 @@
+---
+title: "Statusfy: Release v0.2.0"
+slug: "statusfy-release-0-2-0"
+author: patriciajumper
+description: "We just released a new version of Statusfy with new big features that can improve the users/customer experience of your Status Page System: Scheduled Maintenance, Notifications and Sitemap."
+published: "2018-12-11T16:25:29Z"
+created: "2018-12-11T16:25:29.723915Z"
+canonical: https://www.bazzite.com/blog/statusfy-release-0-2-0
+---
+
+We just released a [new version][github-release] of Statusfy with new big features that can improve the user experience of your Status Page System: ***Scheduled Maintenance***, ***Notifications***, and ***Sitemap***.
+
+
+## Scheduled Maintenance
+
+<p class="text-center">
+  <img src="https://media.bazzite.com/blog/2018/12/statusfy-release-v-0-2-0-scheduled-maintenance-en.jpg" width="879" height="278" class="img-fluid" alt="Statusfy - Scheduled Maintenance" />
+</p>
+
+[Scheduled Maintenances][docs-scheduled-maintenance] definition is a way to let your users know ahead of time when your system(s) cannot handle requests due to a temporary maintenance update.
+
+We tried to keep the definition of Scheduled Maintenance as simple as possible sharing the same parameters as regular incidents but adding two new parameters: [***scheduled***][docs-scheduled-maintenance] and [***duration***][docs-scheduled-maintenance].
+
+
+## Notifications
+
+With the new [Notifications feature][docs-notifications], you can keep your users notified with any Incidents update your System may have. Viewers of your Status Page can access the Choices bellow by clicking a Subscribe button.
+
+- **Atom and RSS Feed:** These feeds include all past Incidents and Scheduled Maintenances. Your users can use Feeds Readers or tools like [IFTT][iftt-rss] and [Zapier][zapier-rss] to receive updates from these feeds.
+- **iCalendar:** Your users can subscribe to a calendar containing all of your upcoming and past Scheduled Maintenances. The calendar is published using iCalendar, a popular format which is supported by most modern calendar applications.
+- **Twitter:** Define Twitter accounts that your users can access in order to receive updates.
+- **Support Site:** Define an external Support Site your users can access in order to receive updates from other sources you may want to provide.
+
+***Most of these Notifications Choices are enabled by default but you can disable them in your config file. More info [here][docs-docs-notifications].***
+
+## Sitemap
+
+Now you can notify to  the search engine bots the available pages in your Status Page System with a **Sitemap**. This can help all the pages in your system to be found more easily.
+
+
+## Contribute to Statusfy
+
+Statusfy is a completely open source project, created and maintained by [Bazzite][bazzite-home]. It's still a work in progress, so any contribution is very welcome. We're passionate about building a versatile and a lower cost solution.
+
+You can also support us by giving a [GitHub star ★][statusy-github] , spreading the word or [donating][statusfy-sponsoring]  🤓.
+
+
+
+[bazzite-home]: https://www.bazzite.com
+[statusy-github]: https://github.com/bazzite/statusfy
+[statusfy-sponsoring]: https://statusfy.co/support#sponsoring
+[docs-scheduled-maintenance]: https://docs.statusfy.co/guide/incidents.html#scheduled-maintenance
+[docs-notifications]: https://docs.statusfy.co/guide/notifications.html
+[docs-docs-notifications]: https://docs.statusfy.co/config/#notifications
+[github-release]: https://github.com/bazzite/statusfy/releases/tag/v0.2.0
+[iftt-rss]: https://ifttt.com/feed
+[zapier-rss]: https://zapier.com/apps/rss/integrations