Nimble Pirate Monitor

    nodebb-plugin-magicblock

    0.1.8 • Public • Published

    NodeBB MagicBlock plugin

    NodeBB Plugin for macros, format, embeding.

    Updates

    • v0.1.7 : support hackIframely. One can enable nodebb-plugin-iframely only in {{..}} without modifications of the iframely plugin.

    Usage

    Magic

    {{ Any Link }}
    {{ http://imgur.com/gallery/BxHKr }}
    

    Imgur gallery

    • If you put any link in MagicBlock then MagicBlock will take care How show it With full customization.
    • image, imgur gallery are built in, and you can add more or override them.
    • Support iFramely( Enable iFramely only in {{..}} ) We have three options.
      • Option 1) With modified iframely plugin
        • set magicTagADefaultClass: [ iframely ] in MagicBlock admin UI
        • remove original iframely plugin
        • install the modified iframely plugin manualy from github.
        • set iframely Class to iframely in modified iframely admin UI
      • Option 2) Client side load : this doesn't implemented yet until somebody wants :)
      • Option 3) With an official iframely plugin. ( RECOMENDED )
        • set hackIframely: true in YAML. ( Of course, you need nodebb-plugin-iframely installed )
        • That's it.

    AttrString

    {{.class1.class2#color1#color2 BODY }}

    • When a block begins with AttrString( begin with . or # and before a first white space )

    Coloring

    • A first color is for forground , a second is for backgoround color.
    • Also rgb codes are possible. ( #eee or #e1e1e1 )
    {{#red This is red letters}}
    {{#red#green This is red letters on green background}}
    

    Coloring

    Class

    {{.class1 [link](http://example.com)}}` will become `<a href="http://example.com" class="class1">link</a>
    
    • YES, class can make things messy, may be too much, usually useless BUT it's disabled by default. Solved!! :)

    Wraping with <span> or <div>

    • <div> : If an AttrString is ended with double colons (::), followed text will be wraped by <div>
    • <span> : If an AttrString is ended with a colon (:), followed text will be wraped by <span>
    • These are usually too much also, just turn it off !! ( by default )
    {{.cls1#red:: Any text or link}} will become <div class="cls" style="color:red;">Any text or link</div>
    {{.cls1#red: Any text or link}} will become <span class="cls" style="color:red;">Any text or link</span>
    
    • Implicit way : If no colon(s) end of an AttrString
      • If begins of BODY is any html tag, MagicBlock insert classes and colors into it
        • NOTE : MagicBlock knows nothing of Markdown, but just manage htmls which are already converted by MarkdownIt.
        • With {{ [link](url) }}, what actually MagicBlock will see is {{ <a href="url">link</a> }}
        • With {{ http://a.com }}, what actually MagicBlock will see is {{ <a href="http://a.com">a.com</a>}}
      • If begins of BODY is not a html tag, MagicBlock will wrap BODY with <span>
    {{.cls1#red ![txt](url)}} will become <img src="url" alt="txt" class="cls" style="color:red;">
    {{.cls1#red  text}} will become <span class="cls" style="color:red;">text</span>
    

    And,,

    • Except #color, this AttrString can easily be too much. Recently I played wiki engins and I may be infected by wiki syntax and macros. Actually, I also plan to split magicblock as a standalone module from the nodeBB plugin, and they will be useful in other project ( At least for mine ).

    Macros

    • A forum admin can add custom macros via admin UI
    • examples ( built in )
    {{br}} -> <br/>
    {{ ALERT(info): This Info Box }}
    {{ ALERT: This is default alert Box }}
    {{ PANEL(success):  Body Only Panel }}
    {{ PANEL(warning, This is title): Panel with title }}
    

    Macros

    Nested Block

    MagicBlock also support nested blocks. Always innder block will be manipulated first.

    {{ALERT: These are {{#blue blue letters}} In the Alert Box}}
    {{ALERT: This is {{ALERT(info): an Another Alert Box}} in the Alert Box }}
    

    Installation

    npm install nodebb-plugin-magicblock
    

    Configuratoin

    Currently single YAML string is only supported.

    • In macros, a number in (..) means number of arguments. Arguments will replace each <<1>> <<2>>.
      • BODY of block will replace <<BODY>>
    • Currently, only <a> tag can go thourgh magic. Others will come later ( but what will be useful after <a> and <img> ? )
    • If you don't want macros or magicTagA then just false will be better then empty array or dictionary
      • macros: false

    Example

    ---
    attrStrAllowClass: false
    attrStrAllowColor: true
    attrStrAllowColon: false
    attrStrAllowTwoColon: false
    macros:
      br(0): '<br/>'
      ALERT(1): '<div class="alert alert-<<1>>"><<BODY>></div>'
      ALERT(0): '<div class="alert alert-warning"><<BODY>></div>'
      PANEL(1): '<div class="panel panel-<<1>>"><div class="panel-body"><<BODY>></div></div>'
      PANEL(2): '<div class="panel panel-<<1>>"><div class="panel-heading"><<2>></div><div class="panel-body"><<BODY>></div></div>'
    magicTagA:
      - [ '.*(jpg|png|gif|svg)$' , true , '<img src="<<URL>>">' ]
      - - '^(?:http:)?//imgur.com/(?:a|gallery)/(\w+)'
        - true
        - '<blockquote class="imgur-embed-pub" lang="en" data-id="a/<<1>>"><a href="<<URL>>">View post on imgur.com</a></blockquote><script async src=s.imgur.com/min/embed.js" charset="utf-8"></script>'
    magicTagADefaultClass: [ iframely ]
    hackIframely: false
    

    Acknowledge

    • This plugin is based on nodebb-mega-colors
    • Thanks to frissdiegurke for a lot of comments and guiding.

    Install

    npm i nodebb-plugin-magicblock

    DownloadsWeekly Downloads

    1

    Version

    0.1.8

    License

    MIT

    Last publish

    Collaborators

    • qgp9