# elderjs-plugin-blog-pagination

> Easily Generate pagination from @elderjs/plugin-markdown for your Elder.js powered website.

Latest version **0.7.0** (published 2021-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install elderjs-plugin-blog-pagination
pnpm add elderjs-plugin-blog-pagination
yarn add elderjs-plugin-blog-pagination
bun add elderjs-plugin-blog-pagination
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2021-06-17 |
| First published | 2021-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alexander Dischberg |
| Maintainers | noxasch |
| Keywords | elder.js, elderjs, svelte, ssg, static, site, generator, pagination |

## Links

- npm: https://www.npmjs.com/package/elderjs-plugin-blog-pagination
- Repository: https://github.com/noxasch/elderjs-plugin-blog-pagination
- Issues: https://github.com/noxasch/elderjs-plugin-blog-pagination/issues
- npm.io page: https://npm.io/package/elderjs-plugin-blog-pagination

## Recent versions

- 0.7.0 (latest) — 2021-06-17
- 0.6.0 — 2021-06-05
- 0.5.0 — 2021-06-04
- 0.4.0 — 2021-06-04

## README

# 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

```bash
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.

```javascript
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.

```js
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

```html
<!-- 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} />
```


```html
<!-- 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

- [x] add unit test
- [ ] add github action

---
_Source: https://npm.io/package/elderjs-plugin-blog-pagination · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._