npm package: @fec/eleventy-plugin-pokedex
Description: Eleventy plugin to add a Pokédex to your website.
Author: Florian Eckerstorfer
Latest version: 0.3.3

# @fec/eleventy-plugin-pokedex

> Eleventy plugin to add one or more Pokédex to your website. Gotta catch em
> all!

You can see an example on the authors website:
[Pokémon Sword Pokédex](https://florian.ec/pokedex/pokemon-sword-galar/)

## Installation

You can install the plugin through NPM:

```shell
npm install -D @fec/eleventy-plugin-pokedex
```

After installing the plugin you need configure it and setup your Pokédex:

1. Enable the plugin and configure it
2. Create a page that shows your Pokédex
3. Add CSS to give your Pokédex some styles
4. Setup sprites to include images in your Pokédex

### Enable the plugin and configure it

You can then add the plugin to your Eleventy configuration (`.eleventy.js` by
default):

```javascript
const PokedexPlugin = require("@fec/eleventy-plugin-pokedex");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(PokedexPlugin);
  // ...
};
```

## Create a page that shows your Pokédex

In your Eleventy web site you need to add a page where you use the
shortcodes provided by `@fec/eleventy-plugin-pokedex` and data configured in
the front matter or anywhere else in the
[Eleventy data cascade](https://www.11ty.dev/docs/data-cascade/). The data
structure is very simple: one field with the name of the Pokédex you want to
render and a list of all Pokémon in the Pokédex with `true`/`false` assigned
to it. For example, the following Nunjucks template renders the Sinnoh Pokédex
used in Shiny Pearl and Brilliant Diamond:

```nunjucks
---
pokedex: pokedex-sinnoh-bdsp
pokedex_entries:
  turtwig: true
  grotle: true
  torterra: false
  chimchar: false
  monferno: false
  # Abridged list for brevity
---
{% pokedex_progress pokedex, pokedex_entries %}

{% pokedex_list pokedex, pokedex_entries %}
```

You don't have to write the YAML list of all Pokémon in the Pokédex, you can
copy the pre-compiled list from the `.yaml` files in [data/](data/).

### Add CSS to give your Pokédex some styles

When you render the page you will see the Pokédex, but it is currently not
styled. You can manually define CSS for your Pokédex and you have the option
to set the class names which the plugin uses when generating the HTML. However,
the plugin also includes some CSS styles to get you started. You need to copy
it into your build directory:

```javascript
// .eleventy.js
// ...
eleventyConfig.addPassthroughCopy({
  "node_modules/@fec/eleventy-plugin-pokedex/css/*.css": "/css",
});
```

### Setup sprites to include images in your Pokédex

Lastly you want to include images of your Pokémon in your Pokédex. In this
plugin we are using the [PokéSprite](https://github.com/msikma/pokesprite)
project. You can either download the sprites or you can just add the PokéSprite
repository as a submodule:

```shell
git submodule add git@github.com:msikma/pokesprite.git
```

Then we can add another passthrough copy to our Eleventy configuration:

```javascript
eleventyConfig.addPassthroughCopy({
  "pokesprite/pokemon-gen8/regular/*.png": "/pokesprite",
});
```

At the moment (January 2024) the PokéSprite project does not contain any sprites
from Pokémon Scarlet and Violet (Paldea region), however, you can download
sprites from other places and easily combine them using another passthrough
copy command. You can find sprites from SV, for example, in this discussion
in the PokéSprite repository:
[#135 Add sprites from Pokemon Scarlet and Violet](https://github.com/msikma/pokesprite/issues/135)

You can take a look at the example in [example/](example/) to see how everything
works together.

## Shortcodes

- `pokedex_completion_perc`
- `pokedex_completion_missing`
- `pokedex_completion_count`
- `pokedex_total_count`
- `pokedex_pokemon_complete_class`
- `pokedex_entry`
- `pokedex_list`
- `pokedex_progress`
- `pokedex_progress_bar`

## Filters

- `pokedex_pokemon_list`
- `pokedex_pokemon_sprite`

## Supported Pokédexes

| Pokédex          | Name                   |
| ---------------- | ---------------------- |
| National         | pokedex-national       |
| Galar            | pokedex-galar          |
| Kanto (Let's Go) | pokedex-kanto-letsgo   |
| Kanto            | pokedex-kanto          |
| Alola (original) | pokedex-alola-original |
| Alola (updated)  | pokedex-alola-updated  |
| Hoenn            | pokedex-hoenn          |
| Hoenn (updated)  | pokedex-hoenn-updated  |
| National (BDSP)  | pokedex-national-bdsp  |
| Sinnoh (BDSP)    | pokedex-sinnoh-bdsp    |
| Hisui            | pokedex-hisui          |
| Paldea           | pokedex-paldea         |
| Kitakami         | pokedex-kitakami       |
| Blueberry        | pokedex-blueberry      |