1.1.2 • Published 1 year ago

ifeeds v1.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

ifeeds

One of the most useful features of Blogger is its ability to generate feeds, and based on this, I developed a plugin that creates widgets, allowing visitors with their own blogs and who enjoy your content to display your latest posts as a sign of appreciation.

Install

npm

npm i ifeeds

cdn

<script href="https://cdn.jsdelivr.net/npm/ifeeds@1/dist/js/feeds.min.js"></script>

Basic Usage

Builder Mode

It provides controls for users to configure the plugin, this would be the minimum structure:

<!-- Customizer -->
<div id="dev-customizer">
  <label>
    <input type="radio" name="direction" value="column" checked=""/> Column
  </label>
  <label>
    <input type="radio" name="direction" value="row"/> Row
  </label> 
  <input class="dev-input" type="number" value="4" min="3" max="9" name="max"/>
  <input class="dev-input" type="text" value="#ffffff" name="background"/>
  <input class="dev-input" type="text" value="#212121" name="title"/>
  <input class="dev-input" type="text" value="#212121" name="category"/>
  <input class="dev-input" type="text" value="#f1f1f1" name="categorybg"/>
  <input class="dev-input" type="text" value="#e6e6e6" name="border"/>
  <input class="dev-input" type="text" value="" name="label"/>
</div>

<!-- Preview -->
<div class="widget-feeds"></div>

<!-- Result -->
<div id="dev-results">
  <textarea spellcheck="false"></textarea>
  <button>Copy code</button>
</div>

Finally (after including feeds.js), use the initCustomizer method to use the script in "Creator" mode:

Feeds.initCustomizer()

Example: codepen.io/zkreations/pen/poOvXVY Custom example: codepen.io/zkreations/pen/zYJxZyR

Plugin Mode

In this mode, only the container is required:

<div class="widget-feeds"></div>

Now you need to initialize it using the initPlugin method to display the feed:

Feeds.initPlugin()

Options

Both previously mentioned methods share the same options, here is a table with more information:

OptionTypeDefault
urlstringorigin
maxnumber5
directionstringcolumn
imagestringhttps://i.imgur.com/snnjdGS.png
imageSizestringw300-h240-c
titlestring#212121
categorystring#212121
categorybgstring#f1f1f1
borderstring#e6e6e6
backgroundstring#ffffff
labelstring#ffffff
stylesbooleantrue

License

feeds.js is licensed under the MIT License

Inspiration: somoskudasai

1.1.1

1 year ago

1.1.0

1 year ago

1.1.2

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago