Pathfinder 2e manager

A manager for Pathfinder 2e that allows searching, saving and printing items and spells.

Deployed at https://emandm.github.io/pathfinder-2e-manager/

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Updates the database

npm run scraper

Custom theme

See src/styles/element/index.scss.

Project information

This project was bootstraped from element-plus-vite-starter. and inspired by Pathfinder-2e-Spell-DB.

Tooling

• Web framework - Vue
• Component library - Element Plus
• Page routing - Unplugin Vue Router
• Markdown - Unplugin Vue markdown
• CSS Utility - UnoCSS: provides composable css features following the idea of atomic css
• CSS - Sass and UnoCSS
• Bundler - Vite
• Linting - EsLint, configured by antfu
• Icons - Unplugin Icons using mainly Material Symbols Light

Using Icons

Search for the icon you want to use. Prefer the material symbols light icon set. If none match, search for any icon on Iconify.

Once chosen, copy the name of the icon (e.g. material-symbols-light:crown).

Note: You can change the dropdown to the option that shows (UnoCSS) to get the correct name with no change required.

Use the icon in HTML using the el-icon component from Element Plus. Add i as the prefix for the name, and swap the : for a -

The final name convention is i-{icon set name}-{icon name} (e.g. i-material-symbols-light-crown)

<el-icon size="18" color="hotpink">
  <i-material-symbols-light-crown />
</el-icon>

You can use msl as a shorthand for material-symbols-light

<el-icon size="18" color="hotpink">
  <i-msl-crown />
</el-icon>

You can also use the i html attribute to apply the icon. Note, this does not allow the msl shorthand.

<div inline-flex i="material-symbols-light-crown"></div>