chore(website): support sharing on reddit the blog posts

packages/website/components/blog/AuthorCard.vue

@@ -21,13 +21,13 @@
     </div>
     <div
       v-else-if="mode === 'advanced'"
-      class="flex flex-wrap items-center text-grey-darker"
+      class="flex flex-wrap items-center justify-center text-grey-darker"
     >
       <img
         :src="post.author.avatar"
         class="rounded-full w-12 h-12" >
-      <div class="flex flex-col ml-4">
-        <span class="font-semibold mb-1">
+      <div class="flex flex-col mx-4 mt-2">
+        <span class="font-semibold mb-1 text-center sm:text-left">
           <a
             :href="
               `https://www.bazzite.com/blog/author/${post.author.username}`

packages/website/components/icons/fortawesome/index.js

@@ -8,5 +8,6 @@ import './language-solid'
 import './linkedin-brands'
 import './mobile-alt-solid'
 import './paint-roller-solid'
+import './reddit-square-brands'
 import './times-solid'
 import './twitter-square-brands'

packages/website/components/icons/fortawesome/reddit-square-brands.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'fortawesome/reddit-square-brands': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 448 512',
+    data: '<path pid="0" d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8s-11.9-26.8-26.8-26.8c-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"/>'
+  }
+})

packages/website/locales/en.js

@@ -118,7 +118,8 @@ export default {
     publishedAt: 'Originally published at',
     minRead: 'min read',
     comments: 'Comments',
-    noPosts: "We're currently creating new content.</br>Stay tuned."
+    noPosts: "We're currently creating new content.</br>Stay tuned.",
+    share: 'Share this post'
   },
   support: {
     title: 'Support',

packages/website/locales/es.js

@@ -118,7 +118,8 @@ export default {
     publishedAt: 'Publicado originalmente en',
     minRead: 'min de lectura',
     comments: 'Comentarios',
-    noPosts: 'Actualmente estamos creando nuevo contenido.</br>Visítanos luego.'
+    noPosts: 'Actualmente estamos creando nuevo contenido.</br>Visítanos luego.',
+    share: 'Comparte este artículo'
   },
   support: {
     title: 'Soporte',

packages/website/pages/blog/_slug.vue

@@ -39,7 +39,8 @@
               <AuthorCard
                 :post="post"
                 mode="advanced" />
-              <div class="py-4 text-center sm:text-right">
+              <div class="py-4 text-center sm:text-right w-full sm:w-auto">
+                <div class="mb-2 text-grey-darkest font-semibold">{{ $t('blog.share') }}</div>
                 <social-sharing
                   :url="parentBlogUrl"
                   :title="post.title"
@@ -75,6 +76,15 @@
                         height="32"
                       />
                     </network>
+
+                    <network network="reddit">
+                      <svgicon
+                        name="fortawesome/reddit-square-brands"
+                        class="svg-inline--fa fa-w-20 cursor-pointer"
+                        width="32"
+                        height="32"
+                      />
+                    </network>
                   </div>
                 </social-sharing>
               </div>
@@ -108,6 +118,7 @@ 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'
+import '~/components/icons/fortawesome/reddit-square-brands'
 
 export default {
   components: {