@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

Installation

You can install the plugin through NPM:

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):

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. 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:

---
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/.

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:

// .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 project. You can either download the sprites or you can just add the PokéSprite repository as a submodule:

git submodule add [email protected]:msikma/pokesprite.git

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

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

You can take a look at the example in 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 |