Tools and credits

By PxLab | 20 July, 2017

Boxxd comes packed with several utilities to make life easier. This page lists them, their function within Boxxd, with source URL, the authors and other links.

Word of thanks

Boxxd wouldn’t work without these magical scripts which have been crafted by “great” contributors.

We would like to say a big thanks to them all!!

Functions

There are several generic Boxxd functions - each of which is supported by a certain utility package i.e. Javascript. The packages are described below.

Documentation

Tools for creating browser readable documentation, with TOC, from a markdown file.

  • markdeep.js

Help

The inbuilt Help.

  • Built using remark.js

Home

The home page for the team, project, etc.

  • remark.js

Slideshow

Scripts for creating slideshows in progression of getting more complex:

  • remark.js
  • reveal.js
  • impress.js

Website

  • Hugo
  • Hugo theme boxxd-uni
  • cookieconsent.js

To generate the site the user needs the Hugo software.

Packages

cookieconsent.js

Description

To inform users that cookies are being used (EU law). Is configurable and only pops up for countries as needed.

Use in Boxxd

Used in the Boxxd-Uni template. Is switchable for EU use via the template.

Configuration

If you don’t like the colours you will need to generate the values you want and put them into the template per hand.

Info

Homepage: https://github.com/insites/cookieconsent

Authors: Alex Morley-Finch - JavaScript, Piiu Pilt - JavaScript, Oliver Emberton (@oliveremberton) - CSS

Configuration: https://cookieconsent.insites.com/download/

impress.js

Description

Quote:

“It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.””

Boxxd included demos:

Use your direction keys to browse. Depending on your browser you might have to go back to the first slide when you start it. Also if the pages aren’t rendering properly, you might need to reset the zoom of your browser with 0.

Use in Boxxd

As a framework for complex slideshows.

It has been adapted to be used within Boxxd.

Components: Including extra functions such as markdown.js (text markup), Mermaid.js (for making drawings), mathjax.js (for maths notation), highlight.js (for highlighting code).

Info

Source: https://github.com/impress/impress.js

Author: Henrik Ingo

Doc:

Test

File to run to see if files are in their place: .wiring/lib/impress.js/index.html

markdeep.js

Description

Markdeep is a script that converts plain text documents in Markdown to html.

It supports diagrams, calendars, equations, gantt charts, table of contents and the automatic numbering of contents, and other features as extensions of Markdown syntax - all using plain text.

Demo

A couple of diagram examples: Graph with Large Nodes, Small Nodes, Flow Chart, Trees, Circuits, Graphics

Use in Boxxd

Authors can just write their documents in plain text, copy a couple of lines into their document and the document can be read in a browser.

The js has been modified for use within Boxxd.

What’s nice:

  • General: Write your doc in Markdown and let it be shown in a browser
  • Document authors: Writing complex documents in Markdown and having it auto-numbered.

Info

Author: Morgan McGuire

Doc: https://casual-effects.com/markdeep/

Source: https://casual-effects.com/markdeep/starter.md.html (Link to code is embedded in file)

Test

File to run to see if files are in their place locally: .wiring/lib/markdeep.js/example-features.md.html

TODO

  • Offline/Online use - The js has to be loaded from somewhere - either locally or online. If Boxxd is being used via Dropbox, and a file is clicked, then the js has to be loaded online. Both links can be embedded in the file, but the file will not be rendered if the user is offline.

remark.js

Description

A simple, in-browser, markdown-driven slideshow tool.

Use in Boxxd

As a simple way of creating slideshows, for offline use, with presentation console.

It has been adapted to be used within Boxxd.

Info

Homepage: http://remarkjs.com

Source: https://github.com/gnab/remark

Author: Ole Petter Bang, Alias gnab, https://github.com/gnab, http://gnab.org

Test

File to run to see if files are in their place locally: Home.html

reveal.js

Description

A framework for easily creating beautiful presentations using HTML. reveal.js comes with a broad range of features including nested slides, Markdown contents, PDF export, speaker notes and a JavaScript API.

Check out the live demo

Use in Boxxd

reveal.js is being used as an alternative slideshow script.

It has been adapted to be used within Boxxd.

Info

Homepage: http://lab.hakim.se/reveal-js/

Source: https://github.com/hakimel/reveal.js

Author: Hakim El Hattab, Alias hakimel, https://github.com/hakimel

Test

File to run to see if files are in their place locally: .wiring/lib/reveal.js/demo.html

Hugo

Description

Hugo is a fast and modern static site generator and designed to make website creation fun again.

Hugo is a general-purpose website framework and is a static site generator. Sites are fast and secure and run without MySQL, Ruby or PHP.

To build the site extra software is needed. Hugo can be easily installed, runs fast and is easy to use.

Use in Boxxd

Hugo is for people who want to build a blog, a company site, a portfolio site, documentation, a single landing page, or a website with thousands of pages.

Using Boxxd, the website for the project can also be contained in the project and be easily edited with Markdown.

Info

Authors:

Docs:

Source:

Hugo theme boxxd-uni

Description

A universal theme with slider, possibility to show sponsors, blogs, newest articles, features.

Info

Original theme…

Name: Bootstrapious

Homepage: http://bootstrapious.com/p/universal-business-e-commerce-template

Conversion to HUGO…

Author: adrianmo

Homepage: http://github.com/adrianmo

For Boxxd…

Source homepage: http://github.com/devcows/hugo-universal-theme

and modified for Boxxd by the Boxxd team.

API Specifications

Frontmatter

TOML

Description

Used to describe the way data can be written. TOML written data is used for .wiring and describing objects for HUGO websites.

Info

Name: Toms’s obvious, minimal language

Homepage: https://github.com/toml-lang/toml

Author: Tom Preston-Werner

It might have been a long night…

If something is missing on this list, please let us know.

What's on this page

Search

Categories

Tags