npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

armory-embeds

v0.4.3

Published

Guild Wars 2 Armory Embeds

Downloads

51,146

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

madoumadou

Keywords

Readme

armory-embeds

NPM version NPM downloads Discord

Guild Wars 2 Armory is arming the GW2 community with powered up embeds for items, skills, and more.

Want something more low level? Want to integrate directly with your React app instead of this high level abstraction? Check out the armory-ui-components library.

Usage

First add the embeds to your html:

<body>
  <div data-armory-embed="skills" data-armory-ids="5507,5508,5510,5515"></div>
</body>

Then add the embed script after them:

<script async src="https://unpkg.com/armory-embeds@^0.x.x/armory-embeds.js"></script>

When the document has fully loaded the embeds will then be loaded.

Note the semvar range. When breaking changes are introduced, this will be incremented by one every time. For example from @^0.x.x to @^1.x.x.

Supplementary Libraries

Options

Global Settings

Entirely optional.

Create an object on the document object named GW2A_EMBED_OPTIONS. See below for an example. Make sure the assign this config before declaring the gw2a script.

| prop | type | required | description | |-|-|-|-| | lang | string | no | The language the embeds will be loaded in. Supported values are: en, fr, de, es, zh, ru | | persistToLocalStorage | boolean | no | Turns data persistence on or off. Default to true. | | forceCacheClearOnNextRun | string | no | Forces data cache to be cleared. Use wisely. Use a unique key every time you want to clear the cache. |

document.GW2A_EMBED_OPTIONS = {
  lang: 'en',
  persistToLocalStorage: true,
  forceCacheClearOnNextRun: '1',
};

Styles

Each embed has a class that you can target, each class follows the pattern .gw2a-{EMBED_NAME}-embed.

.gw2a-character-embed {}
.gw2a-skills-embed {}
.gw2a-items-embed {}
.gw2a-amulets-embed {}
.gw2a-traits-embed {}
.gw2a-specializations-embed {}

Embeds

Skills

<div
  data-armory-embed="skills"
  data-armory-ids="5507,5508,5510,5515">
</div>

<div
  data-armory-embed="skills"
  data-armory-ids="5508,332211,5510,-1"
  data-armory-size="40"
  data-armory-blank-text="This can be replaced with any text!"
>
</div>

| attribute | value | required | description | |-|-|-|-| | data-armory-embed | skills | yes | | | data-armory-ids | numbers delimited by commas | yes | The skill ids you want to load. If you pass -1 you will load an empty box instead of the skill. | | data-armory-size | number | no | The size of each skill in the embed. | | data-armory-blank-text | string | no | When loading an skill of id -1 you can override the tooltip text to be whatever you want. | | data-armory-inline-text | string | no | Optional inline text that will be displayed to the right of the icon. You can pass in wiki to use a gw2 wiki URL, or pass in any other text that will be used as the link. |

Items

<div
  data-armory-embed="items"
  data-armory-blank-text="Some other text can go here!"
  data-armory-size="60"
  data-armory-ids="24836,-1,74412,46774,39620,1379"
  data-armory-1379-upgrades="24615,24815"
  data-armory-1379-upgrade-count="{\"24815\": 3}"
  data-armory-1379-infusions="49426,49426"
>
</div>

<div
  data-armory-embed="items"
  data-armory-ids="77482"
  data-armory-77482-stat="656"
>
</div>

| attribute | value | required | description | |-|-|-|-| | data-armory-embed | items | yes | | | data-armory-ids | numbers delimited by commas | yes | The item ids you want to load. If you pass -1 you will load an empty box instead of the item. | | data-armory-size | number | no | The size of each item in the embed. | | data-armory-blank-text | string | no | When loading an item of id -1 you can override the tooltip text to be whatever you want. | | data-armory-{ITEM_ID}-stat | number | no | Loads the item with the stat of choice. | | data-armory-{ITEM_ID}-skin | number | no | Loads the item with the skin of choice. | | data-armory-{ITEM_ID}-upgrades | number | no | Loads the item with the upgrades of choice. | | data-armory-{ITEM_ID}-infusions | number | no | Loads the item with the infusions of choice. | | data-armory-{ITEM_ID}-upgrade-count | stringified { [number]: number } | no | Sets the upgrade counts. | | data-armory-inline-text | string | no | Optional inline text that will be displayed to the right of the icon. You can pass in wiki to use a gw2 wiki URL, gw2spidy to use a gw2spidy URL, or pass in any other text that will be used as the link. |

Specializations

<div
  data-armory-embed="specializations"
  data-armory-ids="3,332211"
  data-armory-3-traits="1761,1774,1749"
>
</div>

| attribute | value | required | description | |-|-|-|-| | data-armory-embed | specializations | yes | | | data-armory-ids | numbers delimited by commas | yes | The specialization ids you want to load. | | data-armory-{SPEC_ID}-traits | numbers delimited by commas | no | Traits you want to select for the specialization. Entirely optional, you can select any combination. |

Traits

<div
  data-armory-embed="traits"
  data-armory-ids="820,-1,1694"
  data-armory-blank-text="This could be anything you want!"
>
</div>

| attribute | value | required | description | |-|-|-|-| | data-armory-embed | traits | yes | | | data-armory-ids | numbers delimited by commas | yes | The trait ids you want to load. If you pass -1 you will load an empty box instead of the trait. | | data-armory-size | number | no | The size of each trait in the embed. | | data-armory-blank-text | string | no | When loading an trait of id -1 you can override the tooltip text to be whatever you want. | | data-armory-inline-text | string | no | Optional inline text that will be displayed to the right of the icon. You can pass in wiki to use a gw2 wiki URL, or pass in any other text that will be used as the link. |

Amulets

<div
  data-armory-embed="amulets"
  data-armory-ids="332211,-1"
  data-armory-size="30"
  data-armory-blank-text="This is a blank space!"
>
</div>

| attribute | value | required | description | |-|-|-|-| | data-armory-embed | amulets | yes | | | data-armory-ids | numbers delimited by commas | yes | The amulet ids you want to load. If you pass -1 you will load an empty box instead of the amulet. | | data-armory-size | number | no | The size of each amulet in the embed. | | data-armory-blank-text | string | no | When loading an amulet of id -1 you can override the tooltip text to be whatever you want. | | data-armory-inline-text | string | no | Optional inline text that will be displayed to the right of the icon. You can pass in wiki to use a gw2 wiki URL, or pass in any other text that will be used as the link. |

Finding IDs

Unfortunately you can't pass the embeds the item/skill etc names. You have to pass the specific ids.

Item IDs

Item IDs are easy enough, go look at https://www.gw2spidy.com.

Skill/Trait/Specialization IDs

Best bet is to look at the GW2 Wiki, for example: https://wiki.guildwars2.com/wiki/Virtue_of_Justice.

Who Is Using armory-embeds?

Don't see your site? Add it in a Pull Request!

Troubleshooting

Hit @itsmadou up on twitter, or post an issue if you think something is a bug.

Local Development

Getting started

git clone [email protected]:madou/armory-embeds.git
cd armory-embeds
yarn install
npm run tdd # Run tests in watch mode
npm start # Run react storybook for local development

© 2015-present gw2armory.com