Web Monetization Community

Cover image for ProgNovel Plugins
Radhy for ProgNovel

Posted on

ProgNovel Plugins

Hi guys.

I have bundled up some of components I use in my project ProgNovel and published it at github as Web Component. There are few problems I encountered during porting the plugins from Svelte to Web Components but I managed somehow. There are three of them for now, only one that's related to Web Monetization which is Instant Affiliate Link generator for imitating affiliate marketing with only Web Monetization and a little bit know how of JavaScript.

Here they are 🎉🎉🎉

GitHub logo prognoveljs / prognovel-plugins

Plugins inspired by ProgNovel components that are made in Web Component.

ProgNovel Plugins

A set of plugins inspired by ProgNovel components. Made with Svelte -> Web Component.

DEMO

ðŸ–Ĩïļ <novel-trivia></novel-trivia>

Takes only label attribute. Novel Trivia plugin is a component made as partially hidden box that can be revealed via user cursor hover. Good to create an auxiliary information that is not getting in the way of the main content.

Example:

<novel-trivia label="Trivia">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum accusamus cupiditate
  quaerat fuga ratione aperiam voluptates dolorem pariatur odio, quo voluptatem aspernatur nostrum
  quam? Quaerat, perferendis! Excepturi, minus obcaecati?
</novel-trivia>
<script src="/dist/prognovel-plugins.umd.js"></script>
Enter fullscreen mode Exit fullscreen mode

ðŸŠķ <authors-note></authors-note>

Takes only name attribute. Author's Note plugin is a typical quote box to highlight comments by author of the content.

<authors-note name="ProgNovel">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum accusamus cupiditate
â€Ķ
Enter fullscreen mode Exit fullscreen mode

Discussion (0)