@nfthorizon/embeds v0.0.5

🧩 Usage

Package manager

1. Type in the terminal:

    $ npm i @nfthorizon/embeds

2. Include in your javascript file:

import '@nfthorizon/embeds';

3. Place in your HTML where you want to embed the market:

<nfthorizon-widget></nfthorizon-widget>

CDN

1. Add where you want the widget to appear:

<nfthorizon-widget></nfthorizon-widget>

<script type="module">
    import 'https://cdn.jsdelivr.net/npm/@nfthorizon/embeds@latest';
</script>

Custom Config

You can customize the content of your widget.

1. Create your configuration in json format:

{
  //Main title (default: NFT News)
  "title":"",
  "box1":{
    //Box1 title (default: Marketplace News)
    "title":"",
    //Box 1 content source (default: tags=322)
    "src":""
  },
  "box2" {...},
  "box3" {...},
}

2. Define a attribute named config on the element and place the json format you created in step 1 in the value of the config attribute as string:

<nfthorizon-widget config='{"title":"Custom Main Title","box1":{"title":"Custom Box1 Title","src":"categories=51"}} ...'></nfthorizon-widget>

<script type="module">
    import 'https://cdn.jsdelivr.net/npm/@nfthorizon/embeds@latest';
</script>

Custom Style

You can customize the style of your widget using css variables.

   :root {
            /* background color of content boxes */
            --nfthorizon-post-card-bg: #f6f6f6;
           
            /* color of main title */
            --nfthorizon-main-title-text-color:#000;

            /* color of box title */
            --nfthorizon-box-title-text-color:#000;

            /* color of post title */
            --nfthorizon-post-title-text-color:#000;

            /* color of post date */
            --nfthorizon-post-date-text-color:#000;
            
            /* the color of the "nft horizon" part of the logo */
            --nfthorizon-logotext-color: #484848;
            
            /* color of "read more" text */
            --nfthorizon-readonmore-text-color: #595959;
            
             /* color of link icons */
            --nfthorizon-readonmore-link-color: #7e7e7e;
            
            /* whether to show the vertical line between the boxes */
            --nfthorizon-verticalline-display:none;
            
            /* the color of the vertical line between the boxes */
            --nfthorizon-col-line-color:#dedede;
            
            /* color of loading animation */
            --nfthorizon-layz-load-bg:#dedede;
            
            /* border radius of boxes (use em unit for responsive) */
            --nfthorizon-border-radius:0em;
        
   }         

If your page has dark and light modes; Check out the example below to make the widget responsive.

   /* Suppose you have the class "light" on the body element of your page */
   body.light {
            /* background color of content boxes */
            --nfthorizon-post-card-bg: #f6f6f6;
            
            /* color of all texts */
            --nfthorizon-text-color:#000;
            
            /* color of link icons */
            --nfthorizon-linkicon-text-color: #595959;
            
            /* the color of the icon in the logo */
            --nfthorizon-logoicon-color:#f3ba2c;
            
            /* the color of the "nft horizon" part of the logo */
            --nfthorizon-logotext-color: #484848;
            
            /* color of "read more" text */
            --nfthorizon-readonmore-text-color: #595959;
            
            /* whether to show the vertical line between the boxes */
            --nfthorizon-verticalline-display:none;
            
            /* the color of the vertical line between the boxes */
            --nfthorizon-col-line-color:#dedede;
            
            /* color of loading animation */
            --nfthorizon-layz-load-bg:#dedede;
            
            /* border radius of boxes (use em unit for responsive) */
            --nfthorizon-border-radius:0em;
        
   } 
   
    /* Suppose you have the class "dark" on the body element of your page */
    body.dark {
            /* background color of content boxes */
            --nfthorizon-post-card-bg: #f6f6f6;
            
            .
            .
            .
    }