npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fountainer-browser

v1.0.4

Published

Render fountain files as HTML

Downloads

1

Readme

Fountainer (Browser)

Render Fountain script as HTML.

A CLI version of Fountainer is available here

Installation

You have the following two options:

Option 1: Install via npm

You can either install the package as follows.

npm install fountainer-browser --save

then in you HTML, you can embed the file as:

<script src="../node_modules/fountainer-browser/dist.js"></script>

Option 2: Load file from CDN

You can directly load the bundle file from CDN as follows.

<script src="//cdn.jsdelivr.net/npm/fountainer-browser@latest/dist/bundle.js"></script>

Usage

Embed the fountainer bundle file in your HTML body using the script tag as shown above. Then you can place your fountain script directly withn an element. Then call the fountainer method and pass the reference to the element containing the fountain script.

Simple Usage Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello World -- An Example</title>
</head>
<body>
  <div id="hello-world">
Title: Hello world!
Credit: Written By
Author: Foo Bar

# ACT ONE
= Setup characters and the inciting incident

INT. SERVER ROOM - NIGHT

Two robots are moving servers. One old and blocky, another shiny and sharp.
Suddenly the old robot's arm FALLS OFF!

OLD ROBOT
Uh oh!

NEW ROBOT
You should be deprecated.
  </div>
  <script src="//cdn.jsdelivr.net/npm/fountainer-browser@latest/dist/bundle.js"></script>
  <script>
    (function(){
      fountainer(
        document.getElementById('hello-world'),
        { responsive: true, notes: true }
      )
    })()
  </script>
</body>
</html>

Advanced Usage Example

The example below uses jQuery to fetch the fountain file via an HTTP request, however you can use any library to fetch the fountain file content.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello World -- An Example</title>
</head>
<body>
  <div id="hello-world"></div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/fountainer-browser@latest/dist/bundle.js"></script>
  <script>
    $(document).ready(function() {
      $.get('/hello-world.fountain', function (data) {
        fountainer(
          $('#hello-world')[0],
          { 
            fountainString: data,
            responsive: true,
            notes: true,
            styles: {
              // these will be interpreted as percentages
              // as we have set `responsive: true` above
              left: 5,
              right: 5,
              transitionLeft: 80,
            }
          }
        )
      })
    })
  </script>
</body>
</html>

API

The fountainer method takes two arguments shown below

fountainer(el, settings)

el is a reference to the element containing the fountain script. All the textual content of the el element will be interpreted as fountain text.

settings is an object with the following properties

{
  fountainString: '', // you can provide the fountain script text here
  // when provided, the contents of the element are ignored
  notes: false, // notes will be rendered when set to true
  responsive: false,
  // when responsive is set to true the script will be rendered
  // with percentage based widths and all values provided in the
  // `styles` object will be interpreted as percentages.
  // When responsive is set to false, script will be rendered in
  // inches and all values provided in the `styles` object will be
  // interpreted as inches.
  styles: {
    // object containing styling overrides, default values are shown below
    pageWidth: 8.5, // width of the fountainer element
    left: 1.5, // left margin for scenes and actions 
    right: 1, // right margin for scenes and actions
    transitionLeft: 5.5, // left margin for transitions
    transitionRight: 1, // right margin for transitions
    characterLeft: 3.5, // left margin for character
    characterRight: 1, // right margin for character
    parenLeft: 3, // left margin for parentheticals
    parenRight: 3.25, // right margin for parentheticals
    dialogueLeft: 2.5, // left margin for dialogues
    dialogueRight: 2.5, // right margin for dialogues
    notesLeft: 1, // left margin for sections and synopses
    notesRight: 1, // right margin for sections and synopses
    dualLeft: 2, // left margin for dual dialogues
    dualRight: 1, // right margin for dual dialogues
    dualGutter: 0.25, // column gutter for dual dialogues
    dualDialogueLeft: 2, // left margin for dual dialogueslines
    dialDialogueRight: 1, // right margin for dual dialogue lines
    dualCharacterLeft: 0.75, // left margin for dual dialogue character
    dualCharacterRight: 0.25, // right margin for dual dialogue character
    dualParenLeft: 0.25, // left margin for dual dialogue parentheticals
    dualParentRight: 0.25, // right margin for dual dialogue parentheticals
    fontFamily: 'Courier Prime', // font for the script
    fontSize: '12pt', // font size for the script
    lineHeight: '14pt', // line height for the script
    bgColor: '#FFFFFF', // background color of the script
    color: '#333333', // foreground color of the script
    notesColor: '#AAAAA' // color for the notes (only applicable when `notes` is true)
  }
}