Project

mastalk

0.0
No commit activity in last 3 years
No release in over 3 years
Mastalk markdown extension language
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

>= 10.3.2, ~> 10.3.2
>= 3.1.0, ~> 3.1.0

Runtime

>= 4.3.2, ~> 4.3.2
>= 1.13, ~> 1.13
 Project Readme

MAStalk Build Status

The Money Advice Service's Markdown extension language.

Usage

gem install mastalk
Mastalk::Document.new("markdown").to_html

Components

Add Action

.add-action box

^[Help to Buy schemes FAQs](/en/articles/help-to-buy-schemes-faqs)^

Outputs:

<div class="add-action">
 <p><a href="/en/articles/help-to-buy-schemes-faqs">Help to Buy schemes FAQs</a></p>
</div>

Callout

.callout

$~callout
# Budgeting tips
In 1985, average first-time buyers needed a deposit of 5% to buy a home - in 2012, this had increased to 20%
*Source: HMS Treasury*
~$

Outputs:

<div class="callout">
  <h3>Budgeting tips</h3>
  <p>In 1985, average first-time buyers needed a deposit of 5% to buy a home - in 2012, this had increased to 20%
    <br><strong>Source: HM Treasury </strong>
  </p>
</div>

Collapsible header

$=
# Before you borrow
=$

$-
Find out if you need to borrow money and whether you can afford it. Learn how to work out the true cost of borrowing.

Taking control of debt

Where to get free debt advice, how to speak to the people you owe money to, and tips to help you pay back your debts in the right order.
-$

Outputs:

<div class="collapsible is-on">
  <button class="unstyled-button">
    <span class="icon icon--toggle"></span>
    <span class="visually-hidden js-collapsable-hidden">hide </span>
    Before you borrow
  </button>
</div>

<div class="collapsible-section is-on" aria-hidden="false">
  <p>Find out if you need to borrow money and whether you can afford it. Learn how to work out the true cost of borrowing.</p>
  <p>Taking control of debt</p>
  <p>Where to get free debt advice, how to speak to the people you owe money to, and tips to help you pay back your debts in the right order.</p>
</div>

Ticks

$yes-no
[y] You should do this [/y]
[y] and then do this [/y]
[y] and finally this [/y]
[n] You should not do this [/n]
[n] or this [/n]
[n] and definitely not do this [/n]
$end

Outputs:

<ul class="yes-no">
  <li class="yes">You should do this</li>
  <li class="yes">and then do this</li>
  <li class="yes">and finally this</li>
  <li class="no">You should not do this</li>
  <li class="no">or this</li>
  <li class="no">and definitely not do this</li>
</ul>

Bullets (inside tables)

$bullet
[%] You should do this [/%]
[%] and then do this [/%]
[%] and finally this [/%]
$point

Outputs:

<ul>
  <li>You should do this</li>
  <li>and then do this</li>
  <li>and finally this</li>
</ul>

Video

.video-wrapper

Embedding a YouTube video:

$~youtube_video
  5n1nixLSrQI
~$

Outputs:

<iframe
  frameborder="0"
  height="413"
  width="680"
  src= "https://www.youtube.com/embed/5n1nixLSrQI"
  title="Video">
</iframe>

Or with a custom title:

$~youtube_video
  5n1nixLSrQI
  The title of this video
~$

Outputs:

<iframe
  frameborder="0"
  height="413"
  width="680"
  src= "https://www.youtube.com/embed/5n1nixLSrQI"
  title="The title of this video">
</iframe>

Alternatively there is also this legacy format (just here for backward compatibility):

({5n1nixLSrQI})

Outputs:

<iframe
  frameborder="0"
  height="413"
  width="680"
  src= "https://www.youtube.com/embed/5n1nixLSrQI"
  title="Video">
</iframe>

Embedding a Brightcove video:

$~brightcove_video
  3739688349001
~$

Outputs:

<iframe src='//players.brightcove.net/3608769895001/b15c0e6a-51da-4bb1-b717-bccae778670d_default/index.html?videoId=3739688349001'
  frameBorder="0"
  allowfullscreen=""
  webkitallowfullscreen=""
  mozallowfullscreen=""
  height="413"
  width="680" >
</iframe>

Or with a custom title:

$~brightcove_video
  3739688349001
  The title of this video
~$

Outputs:

<iframe src='//players.brightcove.net/3608769895001/b15c0e6a-51da-4bb1-b717-bccae778670d_default/index.html?videoId=3739688349001'
  title="The title of this video"
  frameBorder="0"
  allowfullscreen=""
  webkitallowfullscreen=""
  mozallowfullscreen=""
  height="413"
  width="680" >
</iframe>

Embedding a Vimeo video:

$~vimeo_video
  146226360
~$

Outputs:

<iframe src="https://player.vimeo.com/video/146226360?portrait=0&title=0&byline=0"
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
  allowfullscreen>
</iframe>

Or with a custom title:

$~vimeo_video
  146226360
  The title of this video
~$

Outputs:

<iframe src="https://player.vimeo.com/video/146226360?portrait=0&title=0&byline=0"
  title="The title of this video"
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
  allowfullscreen>
</iframe>

Action Item

.action-item

$action
## Header
$collapsable
$why
  ### Why?
  Your 'Cash ISA allowance
$why
$how
  ### How?
  If you already have an ISA
$how
$collapsable
$item

Outputs:

<div class="action-item">
  <h2 id="header" role="heading" aria-level="2">Header</h2>
  <div class="collapsable">
    <div class="why">
      <h3 id="why" role="heading" aria-level="3">Why?</h3>
      <p>Your ‘Cash ISA allowance</p>
    </div>
    <div class="how">
      <h3 id="how" role="heading" aria-level="3">How?</h3>
      <p>If you already have an ISA</p>
    </div>
  </div>
</div>

Line break

@~

Outputs:

<br />

Block

Creates a simple two column layout with content $bl_c on one side and $bl_m opposite.

  • $bl_c is intended to contain content of any type.
  • $bl_m is intended to contain images, i.e. ![Alt text](img.gif), or video, i.e. ({5n1nixLSrQI}) or (@3739688349001@).
$bl

$bl_c

bl_c$

$bl_m

bl_m$

bl$

Outputs:

<div class="l-block">
  <div class="l-block__content">
    <div class="panel panel--block"></div>
  </div>
  <div class="l-block__media"></div>
</div>

$bl_c $bl_m positioning can be swapped around to switch element positions.

FinCap Feedback Component

$fincap_feedback
  EMAIL@ADDRESS.com
$

Outputs:

<div class="feedback-box">
  <h3 class="feedback-box__title">
    Give us your feedback or ask a question
  </h3>
  <svg xmlns="http://www.w3.org/2000/svg" class="feedback-box__icon svg-icon svg-icon--speech" focusable="false">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon--speech"></use>
  </svg>
  <a href="mailto:EMAIL@ADDRESS.com" class="feedback-box__text">
    EMAIL@ADDRESS.com
  </a>
</div>

FinCap Primary Button

$~fincap_primary_button
  [Link Text](LINK_URL)
$

Outputs:

<span class="article__primary-button">
  <a href="LINK_URL">Link Text</a>
</span>

Profiling Mastalk

Inside of the project you can run:

ruby -Ilib ./bin/mastalk-profiling

This command will generate different types of graphs and the ruby stack for you investigate possible bottlenecks on performance.

Benchmarking Mastalk

Inside of the project you can run:

ruby -Ilib ./bin/mastalk-benchmarking

This command will print different benchmarking for Mastalk when parsing 10, 100, 200 and 500 documents.

Release the mastalk gem

Get a login for rubygems.org and get added as a contributor to the mastalk gem.

  1. Update the version number in mastalk.gemspec
  2. Run bundle
  3. On the master branch, commit the changes. (e.g 'Bump version 0.0.1 -> 0.0.2')
  4. Tag the git commit with the bump version: git tag -a v<version here>
  5. Build the gem: gem build mastalk.gemspec
  6. Publish the new gem to rubygems: `gem push mastalk-.gem