chevron_leftGo Back list TOC

Table of Contents

• Go to Top
• Music Player
  • Sample Tracks
  • Example Markdown
• Lightbox
  • Samples
  • Example Markdown
• Folders
  • Sample
  • Example Markdown
• Table of Contents
  • Sample

Sometimes, you want something a little fancier. These components all continue to use the same simple and intuitive shortcodes markdown-wise, but behind the scenes use JavaScript "plugins" to work!

Music Player

Plays music!

• Requirements: js/plugins/musicPlayer.js and css/plugins/musicPlayer.css loaded
• Features:
  • Works in any page
  • Inline progress bar and full-size progress bar in popup
  • Supports volume adjustments, rewinding, and toggling repeat
  • Built-in visualizer! (Customizable colors and background -- see below)
  • Also works as a static component -- if you call it without the CSS/JS files, it'll render as a native inline audio player

Sample Tracks

A Tall Ship and In A World by Jason Shaw

(Intentionally low quality. Find the full, high-quality tracks on Audionautix! (Creative Commons))

Sunset Breeze by Lockyn

This track's recommended if you're trying out the visualizer!

(Also intentionally low quality (96kpbs), please support the artist directly (Youtube/Bandcamp) if you like it!)

Want to try your own track?

Example Markdown

{{ musicPlayer( src="/music/ATallShip.mp3", name="A Tall Ship" ) }} 
{{ musicPlayer( src="/music/InAWorld.mp3", name="In A World",bk="/bk/world.jpg", hue=240) }} 
{{ musicPlayer( src="/music/SunsetBreeze.mp3", name="Sunset Breeze", bk="/bk/sunset.jpg", hue=30) }} 

Lightbox

Generate quick, simple, and interactable galleries of images.

Samples

Aspect ratio is preserved in the first two images, 1:1 aspect ratio is used for the second two.

A custom width/height can also be specified.

Example Markdown

Note that if you specify width/height, the image will always be constrained by the lower of the two values.

{{ lightbox(path="example-1.jpg") }} <!-- No caption, keeping aspect ratio -->
{{ lightbox(path="example-1.jpg", caption="Hello World!", square=1) }} <!-- Caption + cropping to 1:1 -->
{{ lightbox(path="example-3.jpg", fullwidth=1, height=480) }} <!-- Use "fullwidth=1" to specify 100% width -->

Folders

Separate images/multimedia/anything else by categories ("folders").

• Requirements: js/plugins/folders.js and css/plugins/folders.css
• Features:
  • Works with any element, just add a class name to it! (i.e., <div class='(className)'> ... </div>)
  • Built in support with lightbox (no extra HTML needed, just add class="classname")
  • Supports icons via the icon:(iconName) abbreviation
• Use Cases:
  • Separate desktop and mobile screenshots
  • Separate final product images and mockups/drafts
  • Categorize different types of images (see example below)

Sample

Five images have been put into three "folders", which you can interact with below.

Example Markdown

Each "folder" is separated by a line, and each line is formatted as (class name), (visible name)

{% folder() %}
dog, icon:pets Dogs
cat, icon:local_cafe Cats
fish, icon:water_drop Fish
{% end %}

{{ lightbox(path="dog-1.jpg", class="dog") }}
{{ lightbox(path="dog-2.jpg", class="dog") }}
...

Table of Contents

Always a useful tool for long pages.

• Requirements: No additional plugins needed, but does require JavaScript to function.
• Features:
  • Generated completely automatically, requires no additional code from you!
    (based on the headers in your markdown file, top two levels only by default)
  • Sticky popup that stays out of your way when not being used
  • Scroll offset is automaticallly calculated to account for sticky header

Sample

Look at the top right corner of your screen to see Table of Contents in action!