elderjs-plugin-blog-pagination's Introduction

Elder.js Plugin: elderjs-plugin-blog-pagination

Generate pagination from @elderjs/plugin-markdown

Prerequisite

Currently this plugin only support post generate by @elderjs/plugin-markdown

npm install --save @elderjs/plugin-markdown

Install

npm i -s elderjs-plugin-blog-pagination

Config

Once installed, open your elder.config.js and configure the plugin by adding elderjs-plugin-blog-pagination to your plugin object.

plugins: {
  // other plugins
  '@elderjs/plugin-markdown': {
    routes: ['blog'],
    // Your other settings
  },
  'elderjs-plugin-blog-pagination': {
    routes: ['blog'], // change to your blog route same as plugin-markdown route
    postPerPage: 5, // change to your preferred post per apge
    indexTemplate: 'BlogIndex' // change to your own Index.svelte template but without `.svelte`
  },
}

Blog route.js

As of current state, i have no idea how to override the permalink function, so you have to copy and paste this code into your route.js. If you figure out how, do make a pull request or create a new issue.

module.exports = {
  template: 'Blog.svelte',
  permalink: ({ request, settings }) => {
    const route = 'blog';
    if (request.slug.includes(route))
      return `${request.slug}`; // index pagination permalink
    return `/${route}/${request.slug}/`; // markdown blog permalink
  },
  all: () => [],
  data: {},
};

Using inside your BlogIndex.svelte and Pagination.svelte

<!-- BlogIndex.svelte -->
<script>
  import Pagination from '../../components/Pagination.svelte';
  export let data, request, helpers;
  let blogPost = data.markdown.blog.slice(request.postStart, request.postEnd);
</script>

<ul>
  {#each blogPost as blog}
    <PostList {blog} {helpers}/>
  {/each}
</ul>
<Pagination {data} {request} {helpers} />

<!-- Pagination.svelte -->
<script>
  export let request, helpers;
</script>

<div class="pagination">
  {#if request.hasPrevious }
    <a href="{helpers.permalinks.blog(request.previousPage)}" class="prev">&lsaquo;</a>
  {/if}
  Page {request.page} / {request.lastPage}
  {#if request.hasNext}
    <a href="{helpers.permalinks.blog(request.nextPage)}" class="next">&rsaquo;</a>
  {/if}
</div>

Pull Request

If you have any idea on how to support other than @elderjs/plugin-markdown output, feel free to create pull request.

TODO

add unit test
add github action

elderjs-plugin-blog-pagination's People

Contributors

Stargazers

Watchers

elderjs-plugin-blog-pagination's Issues

Default route should be empty

Config data use is not respecting use custom config

Add per route config support and fallback to default config

This will allow different post count and template for different index route

config: {
    routes: ['blog'],
    postPerPage: 5,
    indexTemplate: 'BlogIndex',
    routeConfig: [ // default is routeConfig: [],
      {
        routes: ['blog'],
        postPerPage: 5,
        indexTemplate: 'BlogIndex', // if not supply use config.indexTemplate
      },
      {
        routes: ['travel'],
        postPerPage: 5,
        indexTemplate: 'TravelIndex',
      },
    ]
  },

Request: Tests for the markdown plugin

Hey man, great work on the pagination plugin. As current markdown plugin doesn't have tests I'm afraid the integration may be brittle. If you're up for it, I wouldn't turn down tests to make sure the format stays consistent.

No pressure, just a note more than anything.

Great work. 👍