Merge pull request #3 from Ricardo-Silva91/feat/development

Feat/development

package-lock.json

@@ -18472,6 +18472,11 @@
         }
       }
     },
+    "vue-social-sharing": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/vue-social-sharing/-/vue-social-sharing-3.0.4.tgz",
+      "integrity": "sha512-noifuAgZIiNnsVEwGYz0kTVRdj80JkEIt1Qp1HRTLYPPQsyKVhrIMqJGVQGQjm9cp4UB51pUOxdGElMVyavvtw=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -75,6 +75,7 @@
     "vue-mq": "^1.0.1",
     "vue-multiselect": "^2.1.6",
     "vue-observe-visibility": "^0.4.6",
+    "vue-social-sharing": "^3.0.4",
     "vuepress-plugin-img-lazy": "^1.0.4",
     "vuex": "^3.5.1"
   }

src/.vuepress/theme/components/blog/PostHero.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="bg-gradient-6 text-white">
+      <div class="pt-24 pb-10 grid-margins">
+        <Breadcrumbs :crumbs="breadcrumbs" />
+        <div class="grid grid-cols-2 pt-4">
+          <div class="flex flex-col">
+            <h1 class="type-h1">{{ title }}</h1>
+            <div class="mt-4">{{ author.name }}</div>
+            <time
+              class="italic opacity-50"
+              pubdate
+              itemprop="datePublished"
+              :datetime="date"
+            >
+              {{ resolvedDate }}
+            </time>
+          </div>
+          <div v-if="image" class="">
+            <LazyImage
+              :alt="$page.title"
+              src-placeholder="/images/blog/og/default.png"
+              :src="`/header_images/${image ? image : 'blog-placeholder.png'}`"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="grid-margins pt-8 flex justify-between items-center">
+      <ul v-if="resolvedTags.length" class="tags flex mt-1" itemprop="keywords">
+        <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" />
+      </ul>
+      <div class="flex">
+        Share this item:
+        <PostSocials class="flex max-w-3xl" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import PostTag from '@theme/components/blog/PostTag'
+import PostSocials from '@theme/components/blog/PostSocials.vue'
+import Breadcrumbs from '@theme/components/Breadcrumbs'
+import LazyImage from '@theme/components/base/LazyImage'
+
+export default {
+  name: 'PostHero',
+  components: {
+    Breadcrumbs,
+    LazyImage,
+    PostTag,
+    PostSocials,
+  },
+  props: {
+    tags: {
+      type: [Array, String],
+      default: () => [],
+    },
+    author: {
+      type: Object,
+      default: null,
+    },
+    date: {
+      type: String,
+      default: null,
+    },
+    image: {
+      type: String,
+      default: null,
+    },
+    title: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    resolvedDate() {
+      return dayjs(this.date).format(
+        this.$themeConfig.dateFormat || 'YYYY-MM-DD'
+      )
+    },
+    resolvedTags() {
+      if (!this.tags || Array.isArray(this.tags)) return this.tags
+
+      return this.tags
+        .replace(/, /g, ',')
+        .split(',')
+        .filter((tag) => tag)
+    },
+    breadcrumbs() {
+      return [
+        { title: 'Home', link: 'https://ipfs.io/', external: true },
+        { title: 'Blog & News', link: '/' },
+        { title: this.title },
+      ]
+    },
+  },
+}
+</script>

src/.vuepress/theme/components/blog/PostSocials.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <ShareNetwork
+      v-for="social in socialLinks"
+      :key="social.text"
+      :network="social.network"
+      :url="url"
+      title=""
+      description=""
+      quote=""
+      hashtags=""
+    >
+      <SVGIcon
+        class="w-6 h-6 opacity-50 hover:opacity-100 transition transition-opacity duration-300 ease-in-out"
+        :name="social.icon"
+        :title="social.text"
+      />
+    </ShareNetwork>
+  </div>
+</template>
+<script>
+import SVGIcon from '@theme/components/base/SVGIcon'
+
+export default {
+  name: 'RSSSubscription',
+  components: { SVGIcon },
+  data: () => ({
+    socialLinks: [
+      {
+        text: 'Twitter',
+        network: 'twitter',
+        icon: 'twitter-icon',
+      },
+      {
+        text: 'Facebook',
+        network: 'facebook',
+        icon: 'facebook-icon',
+      },
+    ],
+    url: document.location.href,
+  }),
+}
+</script>

src/.vuepress/theme/enhanceApp.js

@@ -5,6 +5,7 @@ import VScrollLock from 'v-scroll-lock'
 import VueMq from 'vue-mq'
 import { VLazyImagePlugin } from 'v-lazy-image'
 import VueObserveVisibility from 'vue-observe-visibility'
+import VueSocialSharing from 'vue-social-sharing'
 
 import Transition from '@theme/components/directives/Transition.js'
 
@@ -30,6 +31,7 @@ export default ({ Vue, router, siteData }) => {
   Vue.use(VueMq, { breakpoints })
   Vue.use(VLazyImagePlugin)
   Vue.use(VueObserveVisibility)
+  Vue.use(VueSocialSharing)
 
   Vue.directive(Transition.name, Transition.directive)
 

src/.vuepress/theme/layouts/BlogPost.vue

@@ -1,26 +1,14 @@
 <template>
   <Layout>
     <article itemscope itemtype="https://schema.org/BlogPosting">
-      <Section
+      <PostHero
         :title="$page.title"
-        :background="{
-          type: 'gradient',
-          gradient: 'bg-gradient-2',
-        }"
-        :theme="{
-          grid: 'max-w-4xl lg:mx-auto',
-          text: 'text-white type-h1 lg:col-span-10',
-          textMeta: 'name headline',
-        }"
-        :component-index="0"
-        ><PostMeta
-          :author="$frontmatter.author"
-          :date="$frontmatter.date"
-          :tags="$frontmatter.tags"
-          class="type-p1 text-white my-4"
-        />
-      </Section>
-      <div class="max-w-4xl lg:mx-auto">
+        :author="$frontmatter.author"
+        :date="$frontmatter.date"
+        :tags="$frontmatter.tags"
+        :image="$frontmatter.header_image"
+      />
+      <div class="grid-margins">
         <div v-if="$frontmatter.image" class="blog type-rich my-12">
           <LazyImage
             :alt="$page.title"
@@ -28,8 +16,10 @@
             :src="$frontmatter.image"
           />
         </div>
-        <Content itemprop="articleBody" class="blog type-rich my-10" />
-        <RSSSubscription class="max-w-3xl mb-10 mx-5 lg:mx-auto" />
+        <Content
+          itemprop="articleBody"
+          class="blog type-rich mb-10 mt-4 pt-4 border-t-2 border-gray border-opacity-25"
+        />
       </div>
     </article>
   </Layout>
@@ -37,45 +27,23 @@
 
 <script>
 import Layout from '@theme/layouts/Layout.vue'
-import Section from '@theme/components/Section.vue'
 import LazyImage from '@theme/components/base/LazyImage'
-import RSSSubscription from '@theme/components/RSSSubscription.vue'
-
-import PostMeta from '@theme/components/blog/PostMeta'
+import PostHero from '@theme/components/blog/PostHero'
 
 export default {
   name: 'BlogPost',
   components: {
     Layout,
-    Section,
     LazyImage,
-    PostMeta,
-    RSSSubscription,
+    PostHero,
   },
 }
 </script>
 
 <style lang="postcss">
-.blog > *:not(.expand) {
-  @apply max-w-3xl mx-5;
-  @screen lg {
-    @apply mx-auto;
-  }
-}
-.blog > .expand {
-  @apply w-full;
-  > *,
-  > p > * {
-    @apply w-full;
-  }
-}
-/*
-TODO: find a better way to calculate this
-when a responsive ratio has a max-width
-*/
-@screen lg {
-  .blog .embed-responsive-16by9 {
-    padding-bottom: 43.25%;
-  }
+.blog > h1,
+.blog > h2 {
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #d1d1d663;
 }
 </style>

src/.vuepress/theme/svg-icon/facebook-icon.svg

@@ -0,0 +1 @@
+<svg data-v-5a8121a8="" xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-2 -2 35 35" class="mr2"><path data-v-5a8121a8="" d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"></path></svg>