feat: Blog posts (#6) (#8)

petedavisdev · web-flow · commit f1193a315666 · 2020-07-08T17:05:05.000+01:00
* Collection with directory filter

* Check if collections exists in themeConfig

* PostList as global-component

* Sort PostList

* simplify to just blog

* Post formatted date and image
diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
@@ -1,18 +1,9 @@
+const themeConfig = require('./themeConfig')
+
 module.exports = {
   title: 'Example Website',
   description: 'An example website built with vuepress-theme-base',
   base: '/vuepress-theme-base/',
   theme: require.resolve('../../theme'),
-  themeConfig: {
-    nav: [
-      { text: 'Docs', link: '/docs/' },
-      { text: 'Blog', link: '/blog/' },
-    ],
-    defaultLayouts: [
-      {
-        directory: 'blog',
-        layout: 'Post',
-      },
-    ],
-  },
+  themeConfig,
 }
diff --git a/example/.vuepress/themeConfig.js b/example/.vuepress/themeConfig.js
@@ -0,0 +1,13 @@
+module.exports = {
+  nav: [
+    { text: 'Blog', link: '/blog/' },
+    { text: 'About', link: '/about/' },
+    { text: 'Contact', link: '/contact/' },
+  ],
+  collections: [
+    {
+      directory: 'blog',
+      layout: 'Post',
+    },
+  ],
+}
diff --git a/example/about.md b/example/about.md
@@ -0,0 +1,3 @@
+# About
+
+Hello world!
diff --git a/example/blog.md b/example/blog.md
@@ -0,0 +1,3 @@
+# Blog
+
+<PostList directory="blog" />
diff --git a/example/blog/a-newer-blog-post.md b/example/blog/a-newer-blog-post.md
@@ -0,0 +1,7 @@
+---
+title: A newer blog post
+date: 2020-06-17 19:57:13 UTC
+image: https://picsum.photos/400/400
+---
+
+Lorem ipsum
diff --git a/example/blog/first-blog-post.md b/example/blog/first-blog-post.md
@@ -0,0 +1,7 @@
+---
+title: First blog post
+date: 2020-04-15 17:57:13 UTC
+image: https://picsum.photos/450/450
+---
+
+Lorem ipsum
diff --git a/example/blog/index.md b/example/blog/index.md
diff --git a/example/blog/post1.md b/example/blog/post1.md
diff --git a/example/blog/second-blog-post.md b/example/blog/second-blog-post.md
@@ -0,0 +1,7 @@
+---
+title: Second blog post
+date: 2020-05-16 18:57:13 UTC
+image: https://picsum.photos/300/300
+---
+
+Lorem ipsum
diff --git a/example/contact.md b/example/contact.md
@@ -0,0 +1 @@
+# Contact us
diff --git a/example/docs/index.md b/example/docs/index.md
diff --git a/example/index.md b/example/index.md
@@ -4,4 +4,4 @@ title: Home
 
 # Homepage test
 
-Welcome to a site
+Welcome to our site
diff --git a/theme/components/PageList.vue b/theme/components/PageList.vue
diff --git a/theme/components/PostListItem.vue b/theme/components/PostListItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <article>
+    <h2>
+      <RouterLink :to="post.path">{{ post.title }}</RouterLink>
+    </h2>
+    <time :datetime="post.frontmatter.date">{{ formattedDate }}</time>
+    <img :src="post.frontmatter.image" alt />
+  </article>
+</template>
+
+<script>
+export default {
+  props: {
+    post: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    formattedDate() {
+      const date = new Date(this.post.frontmatter.date)
+      return date.toLocaleString('en-GB', {
+        month: 'long',
+        year: 'numeric',
+        day: 'numeric',
+      })
+    },
+  },
+}
+</script>
diff --git a/theme/global-components/PostList.vue b/theme/global-components/PostList.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="PostList">
+    <section>
+      <PostListItem v-for="post in posts" :key="post.id" :post="post" />
+    </section>
+  </div>
+</template>
+
+<script>
+import PostListItem from '@theme/components/PostListItem.vue'
+
+export default {
+  components: {
+    PostListItem,
+  },
+  props: {
+    directory: String,
+    item: String,
+  },
+  computed: {
+    posts() {
+      const filteredPosts = this.filterByDirectory(this.$site.pages)
+      const sortedPosts = this.sortByDate(filteredPosts)
+      return sortedPosts
+    },
+  },
+  methods: {
+    filterByDirectory(posts) {
+      if (this.directory) {
+        return posts.filter((post) => {
+          if (
+            post.title &&
+            post.frontmatter.date &&
+            post.relativePath.startsWith(this.directory + '/')
+          ) {
+            return posts
+          }
+        })
+      }
+
+      return posts
+    },
+    sortByDate(posts) {
+      return posts.reverse((a, b) => {
+        const x = a.frontmatter.date.toLowerCase()
+        const y = b.frontmatter.date.toLowerCase()
+        if (x < y) {
+          return -1
+        }
+        if (x > y) {
+          return 1
+        }
+        return 0
+      })
+    },
+  },
+}
+</script>
+
+<style>
+.PostList {
+  display: grid;
+}
+</style>
diff --git a/theme/layouts/Collection.vue b/theme/layouts/Collection.vue
diff --git a/theme/layouts/GlobalLayout.vue b/theme/layouts/GlobalLayout.vue
@@ -9,24 +9,32 @@ export default {
   name: 'GlobalLayout',
   computed: {
     layout() {
-      return this.$page.path
-        ? this.isLayout(this.$page.frontmatter.layout) ||
-            this.hasDefaultLayout() ||
-            'Layout'
-        : 'NotFound'
+      if (this.$page.path) {
+        return (
+          this.isLayout(this.$page.frontmatter.layout) ||
+          this.hasDefaultLayout() ||
+          'Layout'
+        )
+      }
+
+      return 'NotFound'
     },
   },
   methods: {
     isLayout(layout) {
       return layout && this.$vuepress.getLayoutAsyncComponent(layout)
     },
     hasDefaultLayout() {
-      const { layout } =
-        this.$themeConfig.defaultLayouts.find(({ directory }) => {
-          return this.$page.relativePath.startsWith(directory)
-        }) || {}
+      if (this.$themeConfig.collections) {
+        const { layout } =
+          this.$themeConfig.collections.find(({ directory }) => {
+            return this.$page.relativePath.startsWith(directory + '/')
+          }) || {}
+
+        return layout && this.isLayout(layout)
+      }
 
-      return layout && this.isLayout(layout)
+      return false
     },
   },
 }
diff --git a/theme/layouts/Post.vue b/theme/layouts/Post.vue
@@ -1,7 +1,23 @@
 <template>
   <Layout>
     <template v-slot:mainStart>
-      <h1>I'm a post!</h1>
+      <h1>{{ $page.title }}</h1>
+      <small>{{ formattedDate }}</small>
     </template>
   </Layout>
 </template>
+
+<script>
+export default {
+  computed: {
+    formattedDate() {
+      const date = new Date(this.$page.frontmatter.date)
+      return date.toLocaleString('en-GB', {
+        month: 'long',
+        year: 'numeric',
+        day: 'numeric',
+      })
+    },
+  },
+}
+</script>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Blog`
	`2`	`+`
	`3`	`+<PostList directory="blog" />`