pug-mixins

Installation

Manual

1. Download the project from https://github.com/mondeja/pug-mixins/archive/master.zip
2. Copy src folder in your project rename it as you want.

Command line

Linux

git clone https://github.com/mondeja/pug-mixins.git
cp -r pug-mixins/src mixins && rm -rf pug-mixins

You can see a directory named mixins, inside of which the library is located. You can rename it and copy inside your project and include the files.

Windows

git clone https://github.com/mondeja/pug-mixins.git
xcopy pug-mixins\src mixins
rmdir "pug-mixins" /S /Q

You can see a directory named mixins, inside of which the library is located. You can rename it and copy inside your project and include the files.

Basic usage

Only include a file for use mixins located inside. You can do this specyfing pug includes at the beggining of your template.

For example if I have a file called example.pug inside src/ folder and I need to use +script mixin located at src/html/script.pug:

include ./html/script.pug

See also

Pug documentation and Reference.

Custom contexts

Some mixins needs to pass specific locals at compilation script. For example, mixin +table-json() needs a context with require NodeJS function. The library includes some contexts in src/contexts.js which can be imported in your preprocessing script:

pug_mixins_context

All context included in contexts.js file merged in one context.

require_context

Context with only require NodeJS function: {require: require}.

Reference

View source code on Github

audio/ — Podcasts and playlists

ivoox.pug – Ivoox podcasts players

View source code on Github

---

Audios

mixin ivoox-audio(id)
  - src = `https://www.ivoox.com/player_ej_${id}_4_1.html?`
  - if ("c1" in attributes)
    - c1 = attributes.c1;
    - delete attributes.c1;
    - src = src + `c1=${c1}`
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(frameborder="0"
         allowfullscreen="true"
         scrolling="no"
         src=`${src}`
         width="100%"
         height="200")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+ivoox-audio(id)(c1=null, width="100%", height="200")

Embed an audio from Ivoox.

Arguments:

• id (string, integer) – Audio identificator. You can get it from the url of an audio page: https://www.ivoox.com/...audios-mp3_rf_<THIS_NUMBER>_1.html.
• c1 (string, optional) – Main color of the embedded player in HEX format without # character. As default null (default Ivoox main color will be used: "FF6600").

Usage

Input

+ivoox-audio(25288583)(c1="007300")

Output

<iframe frameborder="0" allowfullscreen="true" scrolling="no" src="https://www.ivoox.com/player_ej_25288583_4_1.html?c1=007300" width="100%" height="200"></iframe>

Render

---

Podcasts

mixin ivoox-podcast(id)
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src=`https://www.ivoox.com/player_es_podcast_${id}_1.html`
         frameborder="0"
         allowfullscreen="0"
         scrolling="no"
         width="100%"
         height="440")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+ivoox-podcast(id)(width="100%", height="440")

Embed a podcast from Ivoox.

Arguments:

• id (string) – Podcast identificator. You can get it from the url of a podcast page: https://www.ivoox.com/..._sq_f1<THIS_NUMBER>_1.html.

Usage

Input

+ivoox-podcast(70523)

Output

<iframe src="https://www.ivoox.com/player_es_podcast_70523_1.html" frameborder="0" allowfullscreen="0" scrolling="no" width="100%", height="440"></iframe>

Render

---

Playlists

mixin ivoox-playlist(id)
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src=`https://www.ivoox.com/player_es_channel_${id}_1.html`
         frameborder="0"
         allowfullscreen="0"
         scrolling="no"
         width="100%"
         height="440")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+ivoox-playlist(id)(width="100%", height="440")

Insert an Ivoox channel playlist.

Arguments:

• id (integer, string) – Your channel identificator. You can obtain it from your channel page url: https://www.ivoox.com/..._nq_<THIS_NUMBER>_1.html.

Usage

Input

+ivoox-playlist(40562)

Output

<iframe src="https://www.ivoox.com/player_es_channel_40562_1.html" frameborder="0" allowfullscreen="0" scrolling="no" width="100%" height="440"></iframe>

Render

---

Channel subscription widget

mixin ivoox-channel-subscription(id)
  - src = `https://www.ivoox.com/_ns_${id}_0_.html?`
  - if ("c1" in attributes)
    - c1 = attributes.c1;
    - delete attributes.c1;
    - src = src + `c1=${c1}&`
  - if ("c2" in attributes)
    - c2 = attributes.c2;
    - delete attributes.c2;
    - src = src + `c2=${c2}&`
  - if ("r" in attributes)
    - r = attributes.r;
    - delete attributes.r;
    - src = src + `r=${r}&`
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src=`${src}`
         frameborder="0"
         scrolling="no"
         allowfullscreen="true"
         height="174")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+ivoox-channel-subscription(id)(c1="555555", c2="ffffff", r=null, height="174")

Insert an Ivoox subscription widget.

Arguments:

• id (integer, string) – Your channel identificator. You can obtain it from your channel page url: https://www.ivoox.com/..._nq_<THIS_NUMBER>_1.html.
• c1 (string) – Widget background color with HEX format without # character. As default "555555".
• c1 – Widget text color with HEX format without # character. As default "ffffff".

Usage

+ivoox-channel-subscription(40562)(c1="007300", c2="ffffff")

<iframe src="https://www.ivoox.com/_ns_40562_0_.html?c1=007300&c2=ffffff" frameborder="0" scrolling="no" allowfullscreen="true" height="174"></iframe>

soundcloud.pug – Soundcloud podcasts players

View source code on Github

---

Embed Soundcloud user

mixin soundcloud-user(id)
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  - if ("color" in attributes)
    - color = attributes.color;
    - delete attributes.color;
  - else
    - color = "ff8800";
  - if ("auto_play" in attributes)
    - auto_play = attributes.auto_play;
    - delete attributes.auto_play;
  - else
    - auto_play = false;
  - if ("hide_related" in attributes)
    - hide_related = attributes.hide_related;
    - delete attributes.hide_related;
  - else
    - hide_related = false;
  - if ("show_comments" in attributes)
    - show_comments = attributes.show_comments;
    - delete attributes.show_comments;
  - else
    - show_comments = true;
  - if ("show_user" in attributes)
    - show_user = attributes.show_user;
    - delete attributes.show_user;
  - else
    - show_user = true;
  - if ("show_reposts" in attributes)
    - show_reposts = attributes.show_reposts;
    - delete attributes.show_reposts;
  - else
    - show_reposts = false;
  - if ("show_teaser" in attributes)
    - show_teaser = attributes.show_teaser;
    - delete attributes.show_teaser;
  - else
    - show_teaser = true;
  iframe(src=`https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/${id}&color=%23${color}&auto_play=${auto_play}&hide_related=${hide_related}&show_comments=${show_comments}&show_user=${show_user}&show_reposts=${show_reposts}&show_teaser=${show_teaser}`
         width="100%"
         height="300"
         scrolling="no"
         frameborder="no"
         allow="autoplay")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+soundcloud-user(id)(color="ff8800", auto_play=false, hide_related=false, show_comments=true, show_user=true, show_reposts=false, show_teaser=true, width="100%", height="300")

Arguments:

• id (string) – Soundcloud user identificator. You can get it from an user Soundcloud page url.
• color (string) – Player color passed as HEX color withour # character.
• autoplay (bool) – Play tracklist when content is loaded. As default false.
• hide_related (bool) – Hide related content if true. As default false.
• show_comments (bool) – Show user comments on displayed tracks. As default true.
• show_user – Show uploader name. As default true.
• show_reposts (bool) – Show reposts. As default false.
• show_teaser (bool) – Show teaser. As default true.

Usage

Input

+soundcloud-user("alvaromondejar")(show_comments=false)

Output

<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/alvaromondejar&color=%23ff8800&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=true" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay"></iframe>

Render

blog/ — Blogging tools

storify.pug - Storify stories

View source code on Github

---

Embed stories

mixin storify(user, slug)
  - if ("border" in attributes)
    - border = attributes.border;
    - delete attributes.border;
  - else
    - border = false;
  - if ("post_title" in attributes)
    - post_title = attributes.post_title;
    delete attributes.post_title;
  - else
    - post_title = slug.replace("-", " ")
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  .storify
    iframe(src=`https://storify.com/${user}/${slug}/embed?border=${border}`
           width="100%" height="750" frameborder="no" allowtransparency="true")
    script(src=`https://storify.com/${user}/${slug}.js?border=${border}`)
    - if (alt)
      noscript
        | [
        a(href=`https://storify.com/${user}/${slug}` target="__blank") View the story "#{post_title}" on Storify
        | ]

+storify(user, slug)(border=false, post_title=null, width="100%", height="750")

Embed a story from Storify.

Arguments:

• user (string) – Story publisher username.
• slug (string) – Story identificator. You can obtain it from a story page url.
• border (bool, optional) – Specify border parameter value in src endpoint of included iframe. As default false.
• post_title (string, optional) – Post title used if alt is true. Note that if user browser supports iframe tags, this title will not be shown. If you don’t pass this parameter, this will be calculated from slug using slug.replace("-", " "). As default null.

Usage

+storify("journalstarnews", "2018-lincoln-marathon")(alt=false)

<div class="storify">
  <iframe src="https://storify.com/journalstarnews/2018-lincoln-marathon/embed?border=false" width="100%" height="750" frameborder="no" allowtransparency="true"></iframe>
  <script src="https://storify.com/journalstarnews/2018-lincoln-marathon.js?border=false"></script>
</div>

board/ — Content-boards

livebinders.pug - Livebinders boards

View source code on Github

---

Binders by iframes

mixin livebinder(id)
  - if ("present" in attributes)
    - present = attributes.present;
    - delete attributes.present;
  - else
    - present = true;
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src=`https://www.livebinders.com/play/play?id=${id}&present=${present}`
         frameborder="0")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+livebinder(id)(present=true)

Insert a content-board from Livebinders.

Arguments:

• id (integer, string) – Identificator of the binder. You can obtain it from a binder page url.

Usage

Input

+livebinder(2368302)(width="100%", height="400")

Output

<iframe src="https://www.livebinders.com/play/play?id=2368302&present=true" frameborder="0" width="100%" height="400">Your browser does not support iframes.</iframe>

Render

padlet.pug – Content boards from Padlet

View source code on Github

---

Insert boards

mixin padlet(id)
  - if ("header" in attributes || "footer" in attributes)
    - iframe_only = false
  - else
    - iframe_only = true
  - if ("header" in attributes)
    - header = true;
    - delete attributes.header;
  - else
    - header = false;
  - if ("footer" in attributes)
    - footer = true;
    - delete attributes.footer;
  - else
    - footer = false;
  - if (iframe_only)
    iframe(src=`https://padlet.com/embed/${id}`
           frameborder="0")&attributes(attributes)
  - else
    - if (header)
      .padlet-embed(style="border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:border-box;overflow:hidden;position:relative;width:100%;background:#F4F4F4")&attributes(attributes)
    - else
      .padlet-embed(style="overflow:hidden;position:relative;")
        p(style="padding:0;margin:0")
          iframe(src=`https://padlet.com/embed/${id}`
             frameborder="0")&attributes(attributes)
        - if (footer)
          div(style="padding:8px;text-align:right;margin:0;")
            a(href="https://padlet.com?ref=embed"
              style="padding:0;margin:0;border:none;display:block;line-height:1;height:16px"
              target="_blank")
              img(src="https://resources.padletcdn.com/assets/made_with_padlet.png"
                  width="86" height="16"
                  style="padding:0;margin:0;background:none;border:none;display:inline;box-shadow:none"
                  alt="Made with Padlet")

+padlet(id)(header=false, footer=false)

Include a content board from Padlet.

Arguments:

• id (string) – Board identificator.
• header (bool, optional) – If true, include the header. As default false.
• footer (bool, optional) – If true, include the footer. As default false.

Usage

Input

+padlet("v8nee7607dvc")(width="100%", height="600")

Output

<iframe src="https://padlet.com/embed/v8nee7607dvc" frameborder="0" width="100%" height="600"></iframe>

Render

code/ — Programming tools

codepen.pug – Modern pens

View source code on Github

---

Embed pens

mixin codepen(id, user)
  - if ("default_tab" in attributes)
    - default_tab = attributes.default_tab;
    - delete attributes.default_tab;
  - else
    - default_tab = "result";
  - if ("embed_version" in attributes)
    - embed_version = attributes.embed_version;
    - delete attributes.embed_version;
  - else
    - embed_version = 2;
  - src = `http://codepen.io/${user}/embed/${id}/?default-tab=${default_tab}&embed-version=${embed_version}`
  - if ("theme_id" in attributes)
    - theme_id = attributes.theme_id;
    - delete attributes.theme_id;
    - src = src + `&theme-id=${theme_id}`
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(scrolling="no"
         frameborder="0"
         allowtransparency="true"
         allowfullscreen="true"
         src=`${src}`
         width="100%"
         height="300")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+codepen(id, user)(default_tab="result", embed_version=2, theme_id=null, width="100%", height="400")

Embed a pen from Codepen passing a pen identificator and their user.

Note

You can obtain identificator and user of a pen from the url of their page. For example: https://codepen.io/user/pen/id.

Arguments:

• id (string) – Pen id.
• user (string) – Pen user.
• default_tab (string, optional) – Tab shown after the pen is loaded. As default "result".
• embed_version (integer, string, optional) – Codepen embed API version used for current insertion. As default 2.
• theme_id (integer, string, optional) – Identificator of your customized theme. You can create your own theme from Codepen Embed Theme Builder.

Usage

Input

+codepen("ZameGP", "mondeja")(theme_id=33136)

Output

<iframe src="http://codepen.io/mondeja/embed/ZameGP/?default-tab=result&embed-version=2&theme-id=33136" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" width="100%" height="300"></iframe>

Render

console.pug – Insert consoles everywhere

View source code on Github

---

Brython console

mixin brython-console()
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src="http://brython.info/console.html"
         scrolling="no"
         width="75%"
         height="165")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+brython-console()(width="75%" height="165")

Embed a Python console iframe made with Brython for the browser.

Usage

Input

+brython-console()

Output

<iframe width="75%" height="165" src="http://brython.info/console.html"></iframe>

Render

---

Javascript console

mixin js-console()
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src="https://jsconsole.com/"
         width="75%"
         height="165")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+js-console()(width="75%" height="165")

Embed a Javascript console iframe from http://jsconsole.com/.

Usage

Input

+js-console()

Output

<iframe width="75%" height="165" src="https://jsconsole.com/"></iframe>

Render

gist.pug – Github gists mixins

View source code on Github

---

Embed gists

mixin gist(user, id)
  - if (id.length != 32)
    - throw new Error("Invalid gist id length. Must be 32 but is " + id.length)
  script(src=`https://gist.github.com/${user}/${id}.js`)&attributes(attributes)

+gist(user, id)

Embed a gist passing their user and identificator. You can obtain these parameters from the gist page url.

Arguments:

• user (string) – Gist owner username.
• id (string) – Gist identificator

Usage

Input

gist("mondeja", "2bd82917552ff2589ddffc4a92744825")

Output

<script src="https://gist.github.com/mondeja/2bd82917552ff2589ddffc4a92744825.js"></script>

Render

jsfiddle.pug – JsFiddle web editor

View source code on Github

---

Fiddles

mixin jsfiddle(user, id)
  - src = `https://jsfiddle.net/${user}/${id}/embedded/`
  - if ("tabs" in attributes)
    - tabs = attributes.tabs;
    - delete attributes.tabs;
  - else
    - tabs = "js,html,css,result";
  - src = src + tabs + "/"
  - if ("theme" in attributes)
    - theme = attributes.theme;
    - delete attributes.theme;
  - else
    - theme = "light";
  - src = src + theme + "/?";
  - _first_color_param = false;
  - if ("font_color" in attributes)
    - font_color = attributes.font_color;
    - delete attributes.font_color;
    - src = src + "fontColor=" + font_color;
    - _first_color_param = true;
  - if ("accent_color" in attributes)
    - accent_color = attributes.accent_color;
    - delete attributes.accent_color;
    - if (_first_color_param)
      - src = src + "&"
    - src = src + "accentColor=" + accent_color;
    - _first_color_param = true;
  - if ("code_background" in attributes)
    - code_background = attributes.code_background;
    - delete attributes.code_background;
    - if (_first_color_param)
      - src = src + "&"
    - src = src + "codeBackground=" + code_background;
    - _first_color_param = true;
  - if ("menu_background" in attributes)
    - menu_background = attributes.menu_background;
    - delete attributes.menu_background;
    - if (_first_color_param)
      - src = src + "&"
    - src = src + "menuBackground=" + menu_background;
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src=`${src}`
         allowpaymentrequest="true"
         allowfullscreen="true"
         width="100%"
         height="400"
         frameborder="0")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+jsfiddle(user, id)(tabs="js, html, css, result", theme="light", font_color=null, accent_color=null, code_background=null, menu_background=null, width="100%", height="400")

Embed a fiddle from JsFiddle.

Arguments:

• user (string) – Owner username of the fiddle.
• id (string) – Fiddle identificator. You can extract it from url of the fiddle page.
• tabs (string) – Tabs shown in the fiddle, separated by commas. By default, all: "js,html,css,result".
• theme (string) – Fiddle theme. Valid are "light" and "dark". As default "light".

Note

Parameters font_color, accent_color, code_background and menu_background accept HEX colors string without # starting character.

Usage

Input

+jsfiddle("mondeja", "xf3tvvw0")(tabs="html,css,result", theme="dark")

Output

<iframe src="https://jsfiddle.net/mondeja/xf3tvvw0/embedded/html,css,result/dark/" allowpaymentrequest="true" allowfullscreen="true" frameborder="0" width="100%" height="400"></iframe>

Render

pastebin.pug – Clean Pastebin pastes

View source code on Github

---

Embed pastes

mixin pastebin(id)
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(src=`https://pastebin.com/embed_iframe/${id}`
         width="100%"
         height="315")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+pastebin(id)

Insert a paste from Pastebin.

Arguments:

• id (string) – Paste identificator, corresponds to some letters and numbers located at the end of a paste url. For example, if the url is https://pastebin.com/DHa6btr5, the identificator is DHa6btr5.

Usage

Input

+pastebin("DHa6btr5")(width="100%" height="315")

Output

<iframe width="100%" height="315" src="https://pastebin.com/embed_iframe/DHa6btr5"></iframe>

Render

pythontutor.pug – Code executions step by step

View source code on Github

---

Insert a PythonTutor iframe

mixin tutor(lang="python")
  - valid_langs = ["python", "c", "cpp", "java", "javascript", "ruby"];
  - if (valid_langs.indexOf(lang) > 0)
    - if (lang == "python")
      - endpoint = "visualize";
    - else
      - endpoint = lang;
  - else
    - throw new Error(lang + " is not a valid language. Valid languages: " + valid_langs);
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  iframe(width="100%"
         height="500"
         frameborder="0"
         src=`http://pythontutor.com/${endpoint}.html#cumulative=false&heapPrimitives=nevernest&mode=edit&origin=opt-frontend.js&py=3&rawInputLstJSON=%5B%5D&textReferences=false`)
    - if (alt)
      | Your browser does not support iframes.

+tutor(lang="python")(width="100%", height="500")

Insert a PythonTutor iframe passing a language name as first parameter.

Arguments:

• lang (string) – Code language. Valid languages are: "python", "c", "cpp", "java", "javascript", "ruby".

Usage

Input

+tutor()

Output

<iframe width="100%" height="500" frameborder="0" src="http://pythontutor.com/visualize.html#cumulative=false&heapPrimitives=nevernest&mode=edit&origin=opt-frontend.js&py=3&rawInputLstJSON=%5B%5D&textReferences=false">Your browser does not support iframes.</iframe>

Render

shield.pug – Developer shields

View source code on Github

---

Shields by urls

mixin shield-urls(image_url, target_url)
  a(href=target_url target="__blank")&attributes(attributes)
    img(src=image_url)

+shield-urls(image_url, target_url)

Insert a shield passing the image url and link href.

Arguments:

• image_url (string) – Image url of the shield.
• target_url (string) – Target url of the shield.

Usage

Input

+shield-urls("https://travis-ci.org/mondeja/pymarketcap.svg?branch=master", "https://cnhv.co/1xgw5")

Output

<a href="https://cnhv.co/1xgw5" target="__blank">
  <img src="https://travis-ci.org/mondeja/pymarketcap.svg?branch=master">
</a>

Render

---

Shields by services

mixin shield(service, project_id)
  - if (attributes)
    - if ("branch" in attributes)
      - branch = attributes.branch;
      - delete attributes.branch;
    - else
      - branch = "master";
    - if ("version" in attributes)
      - version = attributes.version;
      - delete attributes.version;
    - else
      - version = "latest";
    - if ("url" in attributes)
      - url = attributes.url;
      - delete attributes.url;
    - else
      - url = null;
  - else
    - attributes = {};
  - if (service == "travis")
    - url = url || `https://travis-ci.org/${project_id}`;
    +shield-urls(
      `https://travis-ci.org/${project_id}.svg?branch=${branch}`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "pypi-version")
    - url = url || `https://pypi.org/project/${project_id}`;
    +shield-urls(
      `https://img.shields.io/pypi/v/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "pypi-py-versions")
    - url = url || `https://pypi.org/project/${project_id}`;
    +shield-urls(
      `https://img.shields.io/pypi/pyversions/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "pypi-status")
    - url = url || `https://pypi.org/project/${project_id}`;
    +shield-urls(
      `https://img.shields.io/pypi/status/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "pypi-license")
    - url = url || `https://pypi.org/project/${project_id}`;
    +shield-urls(
      `https://img.shields.io/pypi/l/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "binder")
    - url = url || `https://mybinder.org/v2/gh/${project_id}/${branch}`;
    +shield-urls(
      `https://mybinder.org/badge.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "readthedocs" || service == "rtd")
    - url = url || `http://${project_id}.readthedocs.io/`;
    +shield-urls(
      `https://readthedocs.org/projects/${project_id}/badge/?version=${version}`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "ask-me-anything")
    - url = url || project_id;
    +shield-urls(
      `https://camo.githubusercontent.com/d52b9239d76d77ebff4fc954745ee8ba555338ee/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f41736b2532306d652d616e797468696e672d3161626339632e737667`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "github-issues")
    - url = url || `https://github.com/${project_id}/issues`;
    +shield-urls(
      `https://img.shields.io/github/issues/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "github-issues-closed")
    - url = url || `https://github.com/${project_id}/issues?q=is%3Aissue+is%3Aclosed`;
    +shield-urls(
      `https://img.shields.io/github/issues-closed/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "github-issues-closed-in")
    - url = url || `https://github.com/${project_id}/issues`;
    +shield-urls(
      `https://img.shields.io/issuestats/i/long/github/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "github-last-commit")
    - url = url || `https://github.com/${project_id}/commits`;
    +shield-urls(
      `https://img.shields.io/github/last-commit/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "github-contributors")
    - url = url || `https://github.com/${project_id}/graphs/contributors`;
    +shield-urls(
      `https://img.shields.io/github/contributors/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "isitmaintained-issues-open-perc")
    - url = url || `http://isitmaintained.com/project/${project_id}`;
    +shield-urls(
      `http://isitmaintained.com/badge/open/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)
  - else if (service == "isitmaintained-issues-closed-in")
    - url = url || `http://isitmaintained.com/project/${project_id}`;
    +shield-urls(
      `http://isitmaintained.com/badge/resolution/${project_id}.svg`,
      `${url}`
    )&attributes(attributes)

+shield(service, project_id, url=null, branch=null, version=null)

Include shields passing, as minimum, their service and project id.

Arguments:

• service (string) –

  Shield service. Valid services are:

  • "travis": Insert a travis shield. Pass the parameter branch with a valid project branch or the branch used will be "master".
  • "pypi-version": Shield that shows version of a project hosted at Pypi defined by project_id parameter.
  • "pypi-py-version": Shows versions defined by a python project setup’s classifiers param hosted at Pypi.
  • "pypi-status": Shows a shield with status information of a project hosted at Pypi.
  • "pypi-license": Shows a shield with the license of a project hosted at Pypi.
  • "binder": Inserts a Binderhub shield that links to an IPython console for a repository. Pass the parameter branch with a valid project branch or the branch used will be "master". Only works for Github projects.
  • "readthedocs"/"rtd": Insert a Readthedocs shield. You need to pass the optional argument version, by default "latest" will be used.
  • "ask-me-anything": Insert an “Ask me anything” shield. You need to pass the url link target in the optional parameter url.
  • "github-issues": Shows number of issues opened in a Github project.
  • "github-issues-closed": Shows number of issues closed in a Github project.
  • "github-issues-closed-in": Shows mean time spended closing a issue in a Github project.
  • "github-last-commit": Shows a shield with how many time has elapsed since last commit in a project.
  • "github-contributors": Shows number of contributors that have been participated in a project.
  • "isitmaintained-issues-open-perc": Shows the percentage of issues open against total issues. This data is provided by Isitmaintained and is useful to know if a project are currently been maintained.
  • "isitmaintained-issues-closed-in": Shows mean time spended closing a issue in a Github project provided by Isitmaintained.
• project_id (string) – Identificator of the project. Depends of service, some needs only a project name like the Pypi shields, but others like Github shields need a string including the repository author like "mondeja/pug-mixins". Only ask yourself, this service works identificating their hosted projects by an author and project name or only needs the project name?
• url (string, optional) – Target url of a shield. Can be used to replace manually default shields link targets. As default null.
• branch (string, optional) – Branch of a project. As default "master".
• version (string, optional) – Version of the project. Is used only by "readthedocs" service for now. As default latest.

Usage

Input

+shield("readthedocs", "pymarketcap")(version="latest")

Output

<a href="http://pymarketcap.readthedocs.io/" target="__blank">
  <img src="https://readthedocs.org/projects/pymarketcap/badge/?version=latest">
</a>

Render

crypto/ — Blockchain utils

coinbase.pug – Cryptocurrencies payment processor

View source code on Github

---

Coinbase allows customized easy payments processing with some cryptocurrencies like Bitcoin (BTC), Ethereum (ETH), Bitcoin Cash (BCH) and Litecoin (LTC).

In order to use all mixins explained in this page, you need to follow next steps:

1. Go to Coinbase Commerce page, sign up and/or sign in.
2. Go to Dashboard. At left-bottom corner of your screen must be a button with the text Accept payments, click it.
3. You can select between sell a product or accept donations. This option will change the process of payment.
4. Customize your product or organization for donations and Coinbase will show you some code for embed it in your page. Search in the code the line href="https://coinbase.commerce.com... and copy the identificator located after checkout/. This one must look like 05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7. Use this identification to pass it at first parameter of +coinbase and +coinbase-default mixins.
5. Go to Settings section and add the index url of your documentation to whitelisted domains list.

---

Coinbase Commerce script

mixin coinbase-script()
  script(src="https://commerce.coinbase.com/v1/checkout.js")&attributes(attributes)

+coinbase-script()

All coinbase commerce mixins doesn’t includes by default the necessary script that make works these payment implementations. You can include where you want with this mixin.

Usage

Input

+coinbase-script()

Output

<script src="https://commerce.coinbase.com/v1/checkout.js">

---

Custom links

mixin coinbase(id, span_text, include_script=false)
  a(href=`https://commerce.coinbase.com/checkout/${id}`)&attributes(attributes)
    span #{span_text}
  - if (include_script)
    script(src="https://commerce.coinbase.com/v1/checkout.js")

+coinbase(id, span_text, include_script=false)

Insert a link to your product/organization without any style.

Arguments:

• id (string) – Your product indentificator, as explained above.
• span_text (string) – Text of the link.
• include_script (bool, string) – Interaction with coinbase commerce only is possible including a script. You can pass include_script=true to include it after the link, but maybe you prefer include inside in your head scripts section (see +coinbase-script() mixin above). As default, "false".

Usage

Input

+coinbase("05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7", "Siglo25 donations")

Output

<a href="https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7"><span>Siglo25 donations</span></a>

Render

Siglo25 donations

---

Without mixins

Input

a(href=`https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7`) My basic link

Output

<a href="https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7">My basic link</a>

Render

My basic link

---

Default links

mixin coinbase-default(id, span_text, include_script=false)
  a.donate-with-crypto(href=`https://commerce.coinbase.com/checkout/${id}`)&attributes(attributes)
    span #{span_text}
  - if (include_script)
    script(src="https://commerce.coinbase.com/v1/checkout.js")

+coinbase-default(id, span_text, include_script=false)

Insert a link that will be styled like a button with Coinbase colors palette.

Arguments:

• id (string) – Your product indentificator, as explained above.
• span_text (string) – Text of the button.
• include_script (bool, string) – Interaction with coinbase commerce only is possible including a script. You can pass include_script=true to include it after the link, but maybe you prefer include inside in your head scripts section (see +coinbase-script() mixin above). As default, "false".

Usage

Input

+coinbase-default("05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7", "Siglo25 donations", include_script="true")

Output

<a class="donate-with-crypto" href="https://commerce.coinbase.com/checkout/05bc9951-75aa-4c8a-b0f4-aadc0f9ad3e7">
  <span>Siglo25 donations</span>
</a>
<script src="https://commerce.coinbase.com/v1/checkout.js">

Render

Siglo25 donations