use same frontmatter as Dev.to

Author: tomtev

content/posts/a-post-with-a-poster.md

@@ -1,9 +1,12 @@
 ---
 title: A post with a poster
 date: 2019-01-07
+published: true
 tags: ['Markdown']
-poster: ./images/alexandr-podvalny-220262-unsplash.jpg
-excerpt: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
+series: false
+cover_image: ./images/alexandr-podvalny-220262-unsplash.jpg
+canonical_url: false
+description: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
 ---
 
 ## Overview

content/posts/markdown-test-file.md

@@ -1,8 +1,10 @@
 ---
 title: Markdown test files
 date: 2019-02-06
+published: true
 tags: ['Markdown']
-excerpt: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
+canonical_url: false
+description: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
 ---
 
 ## Overview

content/posts/say-hello-to-gridsome.md

@@ -2,7 +2,9 @@
 title: Say hello to Gridsome 🎉
 date: 2019-02-07
 tags: ['Markdown', 'Releases']
-excerpt: "A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!"
+canonical_url: false
+description: "A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!"
+
 ---
 
 We think **Gridsome** is a missing piece to the Vue.js ecosystem. What Gatsby.js does for React.js is a game changer in how we build websites.  React.js is excellent, but we think Vue.js is more approachable for most web designers and devs getting started with JAMstack. Gridsome is the Vue.js alternative to Gatsby.

src/assets/style/_base.scss

@@ -30,4 +30,9 @@ img {
 h1,h2,h3,h4,h5,h6 {
 	transition: color .6s;
 	color: var(--title-color);
+}
+
+
+li {
+	list-style: disc;
 }

src/components/PostCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}">
     <div class="post-card__header">
-      <g-image v-if="post.poster" class="post-card__image" :src="post.poster" />
+      <g-image v-if="post.coverImage" class="post-card__image" :src="post.coverImage" />
     </div>
     <div class="post-card__content">
       <h2 class="post-card__title" v-html="post.title" />
-      <p class="post-card__excerpt" v-html="post.excerpt" />
+      <p class="post-card__description" v-html="post.description" />
       <PostMeta class="post-card__meta" :post="post" />
       <g-link class="post-card__link" :to="post.path">Link</g-link>
     </div>

src/pages/Index.vue

@@ -29,8 +29,8 @@ query {
         path
         date (format: "D. MMMM YYYY")
         timeToRead
-        excerpt
-        poster (width: 770, height: 380, blur: 10)
+        description
+        coverImage (width: 770, height: 380, blur: 10)
       }
     }
   }

src/templates/Post.vue

@@ -10,9 +10,8 @@
 
     <div class="post content-box">
       <div class="post__header">
-        <g-image v-if="$page.post.poster" :src="$page.post.poster" />
+        <g-image v-if="$page.post.coverImage" :src="$page.post.coverImage" />
       </div>
-      <p v-if="$page.post.excerpt" class="post__excerpt" v-html="$page.post.excerpt" />
       <div class="post__content" v-html="$page.post.content" />
       <div class="post__footer">
         <!-- Add anything here -->
@@ -46,9 +45,9 @@ query Post ($path: String!) {
     path
     date (format: "D. MMMM YYYY")
     timeToRead
-    excerpt
+    description
     content
-    poster (width: 860, blur: 10)
+    coverImage (width: 860, blur: 10)
   }
 }
 </page-query>

src/templates/Tag.vue

@@ -20,7 +20,8 @@ query Tag ($id: String!) {
             path
             date (format: "D. MMMM YYYY")
             timeToRead
-            excerpt
+            description
+            coverImage (width: 860, blur: 10)
             content
           }
         }