npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@alterjs/saber-plugin-query-posts

v0.12.2

Published

Query posts plugin for Saber app

Downloads

10

Readme

@alterjs/saber-plugin-query-posts

Query posts and inject them to specific pages. Useful when you're writing a blog.

Install

yarn add @alterjs/saber-plugin-query-posts

Usage

In your saber-config.yml:

plugins:
  - resolve: '@alterjs/saber-plugin-query-posts'

Then this plugin will inject all posts to pages whose attribute injectAllPosts is set to true, for instance you can create a pages/index.md:

---
layout: index
injectAllPosts: true
---

Welcome to my homepage.

Then in the layout component layouts/index.vue, page.posts and page.pagination will be available:

<template>
  <div>
    <slot name="default" />

    <ul>
      <li v-for="post in page.posts" :key="post.permalink">
        <a :href="post.permalink">
          {{ post.title }}
        </a>
      </li>
    </ul>

    <a :href="page.pagination.prevLink" v-if="page.pagination.hasPrev">
      ← Prev Page
    </a>
    <a :href="page.pagination.nextLink" v-if="page.pagination.hasNext">
      Next Page →
    </a>
  </div>
</template>

<script>
export default {
  props: ['page'],
}
</script>

Draft Posts

Posts with front matter draft: true will be excluded in page.posts, but they will still be built and accessible via permalink.

Tags

This plugin will automatically generate tag pages at /tags/:tag when you're using tags in page data, e.g. in a Markdown post:

---
title: hello
date: 2019-01-01
tags:
  - life
  - random
---

hello

Data Injected in Post Pages

You can access the detailed info of the tags of a post page via this.page.tagsInfo, for instance:

tags:
  - life
  - random

gives you:

;[
  {
    name: 'life',
    permalink: '/tags/life',
  },
  {
    name: 'random',
    permalink: '/tags/random',
  },
]

Tag Layout

Tag pages will use the tag layout or fallback to default layout.

You can access the tag name in the layout component via this.page.tag.

Categories

This plugin will automatically generate category pages at /categories/:tag when you're using categories in page data, e.g. in a Markdown post:

---
title: hello
date: 2019-01-01
categories:
  - sports
---

hello

Then there will be a /categories/sports page,categories is an array, so you can assign the post to multiple categories.

Data Injected in Post Pages

You can access the detailed info of the categories of a post page via this.page.categoriesInfo, for instance:

categories:
  - sports/football
  - hobby

gives you:

;[
  {
    name: 'sports',
    permalink: '/categories/sports',
  },
  {
    name: 'football',
    permalink: '/categories/sports/football',
  },
  {
    name: 'hobby',
    permalink: '/categories/hobby',
  },
]

Nesting Category

It also support nesting categories:

categories:
  - sports/football

In this way, it will generate two pages: /categories/sports and /categories/sports/football and both of them will include this post.

Category Layout

Category pages will use the category layout or fallback to default layout.

You can access the category name in the layout component via this.page.category.

Pagination

By default we show at most 30 posts per page, but you can configure this globally using perPage option in saber-config.yml:

plugins:
  - resolve: saber-plugin-query-posts
    options:
      perPage: 6

It's also possible to configure this behavior for each page separately, in a page like pages/index.md:

---
injectAllPosts:
  perPage: 20
---

Options

perPage

  • Type: number
  • Default: 30

The limit of posts to show per page.

firstPageOnly

  • Type: boolean
  • Default: false

Only generate the first page of posts.

tagsMap

  • Type: { [name: string]: string }

Map tag name to permalink's :tag part, by default :tag will be the tag name.

For example:

{
  tagsMap: {
    'c++': 'cpp'
  }
}

categoriesMap

Same as tagsMap but for categories.

permalinks

  • Type: { category?: string, tag?: string }
  • Default: { category: '/categories/:slug', tag: '/tags/:slug' }

The permalink templates for category and tag pages, available placeholders:

| placeholder | description | | ----------- | ------------------------------ | | slug | Slugified tag / category name. |

License

MIT.