Pin post to top [SOLVED]

[Doogiemuc]

Summary

I would like to pin posts to the top of my blog.

Implementation suggestion

Add a pinned flag to the YAML at the top of a post's markdown file

---
title: Some post
author: Doogie
date: 2019-09-09T20:00:00Z
hero_image: "/src/assets/content/images/mandel-fractal.jpg"
pinned: true          // <====== THIS
---
Here comes the posts *markdown* ...

I already tried adding this. But somehow I cannot query it the page-query of Blog.vue. Error message: "Error: Cannot query field "pinned" on type "Blog". How can I add "metadata" fields to posts?

[Doogiemuc]

Ok, meanwhile I found out that Gridsome has its built-in GraphQL schema for a "Post". So this needs some more digging around ... maybe create a Gridsome plugin? I am not sure what's the right path to take. I'd be glad for any hint or suggestion...

[Doogiemuc]

[SOLVED] And suddenly it works.

Add the "pinned" variable to <page-query> of templates/Blog.vue

<page-query>
query getPostData ($path: String!) {
  post: blog(path: $path) {
    title
    date (format: "MMMM DD, YYYY")
    author
    content
    pinned     // <===== added
    hero_image (quality: 80)
}
all: allBlog { ... }

Then you can use it in components/BlogList.vue

<li v-if="post.node.pinned">

[hacknug]

You could also sort your query by pinned and date to get your posts sorted the way you want without any need to render conditionally on your template.