@mintmade/widgets NPM

Mintmade widgets

Widgets allow you to display information about the collection on the media side. Such as a list of recent mintings and information about the collectible of a particular article.

Installation

$ yarn add @mintmade/widgets

<!-- From local installation -->
<script
  async
  type="module"
  src="/node_modules/@mintmade/widgets/dist/article.min.js"
></script>
<script
  async
  type="module"
  src="/node_modules/@mintmade/widgets/dist/recentlyCollected.min.js"
></script>
<script
  async
  type="module"
  src="/node_modules/@mintmade/widgets/dist/appendix.min.js"
></script>

<!-- In a Module -->
<script type="module">
  import "/node_modules/@mintmade/widgets/dist/article.min.js";
  import "/node_modules/@mintmade/widgets/dist/recentlyCollected.min.js";
  import "/node_modules/@mintmade/widgets/dist/appendix.min.js";
  // ...
</script>

Usage

<mm-article
  title="Collect NFT"
  lang="fr"
  colorScheme="dark"
  attached="true"
  target="https://mint.cointelegraph.com/"
  articleURI="https://cointelegraph.com/news/bis-bank-of-england-concludes-blockchain-int-l-settlements-pilot"
  primaryColor="#14cc9e" 
  secondaryColor="#000"
></mm-article>

<mm-recently-collected 
  title="Recently collected"
  lang="fr"
  colorScheme="dark"
  target="https://mint.cointelegraph.com/"
  primaryColor="#14cc9e" 
  cardRatio="11:15"
></mm-recently-collected>

<mm-appendix 
  lang="fr" 
  target="https://mint.cointelegraph.com/"
  articleURI="https://cointelegraph.com/news/bis-bank-of-england-concludes-blockchain-int-l-settlements-pilot"
></mm-appendix>

Component inputs

title — Sets a custom title for the widget, if declared

attached — If true, border-top will be removed.

colorScheme — Specify the color scheme of the widget. Accepting light and dark. light by default

lang — Specify if localisation of widgets is required. Accepting ISO 639-1 codes. en by default

target* — Your minting page URL

articleURI — The article for which you want to get the widget. If you do not pass this parameter, it is generated automatically from the URI of the page on which the widget is called.

*Color — Colour parameters, accepting CSS colors

cardRatio — Aspect ratio of the cards

copyright — Removes the Mintmade logo, if set to false

*Required inputs

Inputs are reactive, so you can change them on the fly. For example, you can change color scheme or language of the widget.

Demo

Check example.html to see widgets in action.

Development

For developers looking to contribute or modify the code, use the following commands:

  git clone https://gitlab.com/damlab/mintmade-widgets.git
  cd mintmade-widgets
  yarn
  yarn start

Write an email to 002@mintmade.io to get access to the repository.

Development server

This project uses webpack for building and running a development server. Once the server starts, any changes made will trigger a rebuild after which those changes should be reflected in your browser.