feat(blog): images and credit (#626)

* chore(Blog): create how-to-choose-the-best-front-end-framework

* feat(blog): images

Co-authored-by: Damien Robinson <damien.robinson@xcommedia.com.au>

components/sections/BlogHero.vue

@@ -14,7 +14,10 @@
           <v-card-subtitle v-if="summary">{{ summary }}</v-card-subtitle>
         </v-card>
       </v-col>
-      <v-col v-if="credit" class="d-flex text-right align-end justify-end">
+      <v-col
+        v-if="credit && credit.by"
+        class="d-flex text-right align-end justify-end"
+      >
         <span>
           Photo by
           <a

content/blog/how-to-build-a-static-site-blog.md → content/blog/build-a-static-site-blog.md

@@ -1,5 +1,5 @@
 ---
-title: How to build a static site blog
+title: How to build a static site blog?
 date: 2020-09-22T08:09:37.548Z
 description: Have you ever tried to set up a personal blog?
 

content/blog/choose-the-best-front-end-framework.md

@@ -0,0 +1,57 @@
+---
+title: How to choose the best front end framework?
+date: 2020-09-25T02:07:05.543Z
+description: Are you overwhelmed by the choice of Javascript frameworks?
+image: './blog/best-front-end-framework.jpg'
+---
+## Introduction
+
+Building a complex front end application is hard and it can be even harder when you are using the wrong front end framework? As a developer, you know that it's difficult to keep up with the Javascript ecosystem. So what do you do? Many people started out using [jQuery](https://jquery.com/) to make website more reactive. But there are a few things you should know before you choosing a framework to ensure an enjoyable developer experience. This post will tell you what you need to know to make sure you choose the right framework that will let you build and maintain web applications with ease.
+
+## Features
+
+If you're looking for a front end framework, the best method to ensure you end up with something that lets you keep up with the ever changing web is to look for these things:
+
+Make sure your framework has best practice baked in. If it doesn't, you'll have trouble getting good SEO and writing maintainable code. [](https://content.nuxtjs.org/)Frameworks like [Vue.js](https://vuejs.org/) are carefully designed with developers in mind to make sure it is hard to make mistakes. The options API makes it simple to product high quality components with very few lines of code. Other frameworks like [Angular](https://angular.io/) require lots of complex boiler plate to even get components to compile. Vue is so easy to get started with you can even import it from a cdn and sprink powerful reactivity into existing websites just like [jQuery](https://jquery.com/).
+
+### Angular
+
+Due to TypeScript the project code becomes clear, convenient for developers’ understanding and contains fewer errors. Angular strong points are remarkable documentation and references, Google company support and a great set of development tools and components (Material UI, CLI, etc.) All of these "batteries included" tools make the framework powerfull but also create a lot of boilerplate. Having to use a CLI command to add new features to an app really shows how much boilerplate code there is. Angular dictates the way an application is structured making it hard to create small nimble apps and quick prototyes.
+
+One of the week points of Angular is the high learning curve for the projects because a javascript developer should, for instance, know TypeScript to start working with the framework. It consequently makes the project fulfillment more difficult, especially if the work is passed from one team to another.
+
+Another drawback of the Angular framework is the frequent release on the new versions, In June 2019 angular latest version, the 8th one, was already released. This fact also means that it is difficult to support. These major breaking changes often leave apps stuck on unsupported legacy versions due to the amount of pain staking work to upgrade and audit large apps.
+
+### React
+
+React is still being developed and supported by Facebook and Instagram. It can be used not only for browser-based web-apps but also for mobile apps. The aim of the framework is to provide high speed, simplicity, and operability of the apps on various platforms.
+
+However, React — is not a full-fledged framework, but a function library. To use it as a framework, other third-party libraries should be attached.
+React strengths are speed, lightweightness, cross-platform format, and big community.
+
+The weakness is the necessity to use third-party libraries for complete work, which complicates the development process. Another drawback of the library is that it does not follow the standards in HTML or CSS code creation as Angular and Vue.js do.
+
+### Vue
+
+Vue was made fit for gradual implementation, unlike Angular or React. It means that you can implement this framework gradually starting from certain pages, which makes development easier.
+
+The framework is widely used by Chinese companies: for instance, Alibaba, Baidu, Xiaomi and others. Not so long ago the repository management system GitLab also switched to Vue.js.
+
+Vue coopted the best features of Angular and React — the speed and lightweightness and the possibility to support such technologies as TypeScript and JSX. However, along with this, the Vue frame remained true to the principles of HTML and CSS code writing. It facilitates quick web application development and makes the processes of project development and support easier.
+
+Thus, for any developer, who knows the basics of the front-end technologies will not be a problem to develop or support the projects on Vue. The large independant open source community around Vue means the future of the framework is not subject to the whims of a big companies like Facebooks and Google.
+
+Supposing you have chosen one framework, but then made up your mind to switch it to another one. Vue.js is your best choice in this case because re-writing the projects on Angular or React will mean that the developers will most likely need to switch TypeScript or JSX code to classical JavaScript and HTML correspondingly.
+
+One more important aspect to consider is the frequency of Frameworks update. Angular has serious updates issued every 6 months, React — less frequently, approximately once a year. Vue is more stable in this sense and has serious updates once in several years.
+
+## Conclusion
+
+Now that you know how what to look for in a front end framework, you're ready to build maintainable, scalable feature rich, reactive web apps.
+
+Taking all the above-mentioned factors into consideration, we prefer to use Vue.js for speedy and qualitative development. In such a case your apps will be quick in work, simple to support and most friendly to the implementation of the new features further on.
+
+Sources:
+
+- <https://medium.com/@stfalconcom/most-used-javascript-frameworks-for-quick-software-development-which-to-choose-590275226003>
+- <https://hackr.io/blog/best-javascript-frameworks>

content/blog/nuxt.md

@@ -1,7 +1,7 @@
 ---
-title: Nuxt.js
+title: What is Nuxt?
 date: 2020-09-28T01:40:37.548Z
-description: Build your next Vue.js application with confidence using NuxtJS. An open source framework making web development simple and powerful.
+description: The open source framework making web development simple and powerful. Build your next Vue.js application with confidence using NuxtJS.
 image: './blog/nuxt.png'
 ---
 
@@ -57,4 +57,4 @@ The application is now running on <http://localhost:3000>.
 
 ## Summary
 
-Now you know what makes Nuxt so awesome and how to get started. You can check out my other post about [setting up a static site blog using Nuxt](/blog/how-to-build-a-static-site-blog).
+Now you know what makes Nuxt so awesome and how to get started. You can check out my other post [Build a Static Site Blog with Nuxt](/blog/how-to-build-a-static-site-blog).

images.js

@@ -21,7 +21,7 @@ async function* getFiles(dir) {
 const file = 'assets/img/header-bg.jpg';
 sharp(file)
   .resize(4686)
-  .toFile(`assets/img/header-bg-1.jpg`, (err, info) => {
+  .toFile(file, (err, info) => {
     console.log(err, info);
   });
 
@@ -51,8 +51,8 @@ sharp(file)
       .resize({
         width: 4686,
         height: 2636,
-        fit: 'contain',
-        background: { r: 255, g: 255, b: 255 },
+        // fit: 'contain',
+        // background: { r: 255, g: 255, b: 255 },
       })
       .toBuffer();
     sharp(buffer).toFile(filename);

pages/blog/_slug.vue

@@ -4,6 +4,7 @@
       :title="item.title"
       :summary="item.description"
       :src="item.image"
+      :credit="item.image && credit ? credit : {}"
     ></BlogHero>
     <v-container>
       <v-row>

pages/blog/index.vue

@@ -8,9 +8,8 @@
           :key="slug"
           class="d-flex flex-column"
           cols="12"
-          sm="6"
-          md="4"
-          lg="3"
+          md="6"
+          lg="4"
         >
           <v-card
             :to="`/blog/${encodeURIComponent(slug)}`"
@@ -32,7 +31,7 @@
                 >{{ readTime(JSON.stringify(body)) }} min read</time
               >
             </v-card-subtitle>
-            <v-card-text class="body-1 align-self-end">
+            <v-card-text class="body-1 text--primary">
               {{ description }}
             </v-card-text>
           </v-card>