Configuring Panther

When initializing Panther, you must pass a configuration object into the init method. Here’s a sample configuration:

var panther = require("panther-engine");
var packageJSON = require("./package.json");

var config = {
  packageVersion: packageJSON.version,
  pagesDir: path.resolve("pages"),
  pageStaticAssetsDir: path.resolve("page-images"),
  patternsDir: path.resolve("patterns"),
  specimenAssetsDir: path.resolve("specimen-assets"),
  publicDir: path.resolve("public"),
  siteTitle: "Pattern Library",
  siteMetaTitle: "Our Company's Pattern Library",
  siteTemplateNavigationTop: `${__dirname}/navigation-top.hbs`,
  environment: "local",
  basePath: "",
  serverPort: 3000, // Express
  syncPort: 3001,   // BrowserSync
  onBuildComplete: function(){},
  themeColors: {
    "Theme 1": {
      "#FFFFFF": "Backdrop color 1",
      "#CCCCCC": "Backdrop color 2"
    },
    "Theme 2": {
      "#333333": "Backdrop color 1",
      "#999999": "Backdrop color 2"
    }
  }
};

panther.init(config);
panther.launch();

Configuration object properties

packageVersion: This number represents your pattern library’s current version/build. It will be displayed on the static website. In the above example, the Panther client’s package.json version number is being used.
pagesDir: The name of the directory where your page templates will reside. See the Working with Panther page for more information.
pageStaticAssetsDir: Sometimes you need to add images to your page templates in order to better document your specimens. The pageStaticAssetsDir property tells Panther where to find these files. All files inside this directory will be copied into the public/assets/pages/ directory when Panther generates the static website. You can reference the static files like this, in your pages: <img src="/assets/pages/my-image.png">.
patternsDir: The name of the directory where your patterns will reside. See the Working with Panther page for more information.
specimenAssetsDir: The name of the directory where your specimen asset bundles will reside. See the Working with Panther page for more information.
publicDir: The name of the directory where the generated static website files will reside. The contents of this directory can be deployed to a web server, but should not be committed. It’s recommended to add this directory to your .gitignore file. See the Working with Panther page for more information.
siteTitle: This title will appear inside the static website’s <h1> heading, inside the document’s <body>.
siteMetaTitle: This title will appear inside the static website’s <title> element, inside the document’s <head>.
siteTemplateNavigationTop: A path to a Handlebars template file. If provided, Panther will compile this template and inject the HTML markup into the static website (it will appear above the navigation menu, in the sidebar).
environment: Valid values are local, staging and production.
basePath: Specifies the path for scenarios where it’s not possible to upload the contents of the public directory to the server’s web root and the website must be deployed to a subdirectory instead. The path should be either an empty string (if deploying to the web root) or a string with a leading slash and no trailing slash (if deploying to a subdirectory).
serverPort: When running Panther locally, the Express web server will use this port.
syncPort: When running Panther locally, BrowserSync will use this port.
onBuildComplete: This callback function will execute whenever Panther finishes generating the static website.
themeColors: This object is used to populate the “backdrop” select box in the specimen settings panel. This select box allows you to preview what the component looks like on different background colours. The expected format is {"Theme label": {"Hex colour": "Colour label"}}.

API

Methods

init: Initializes Panther with a configuration object.
build: Generates the static website files.
serve: Generates the static website files then starts up a local Express web server to serve them on the port specified by the serverPort configuration option (see above).
launch: Generates the static website files, starts up a local Express web server, then starts up a BrowserSync instance on the port specified by the syncPort configuration option (see above). BrowserSync will monitor your source files for changes and automatically refresh your web browser while you work.
testSASS: An automated test that individually compiles each SASS file in your [patternsDir]/stylesheets directory to verify that it contains all of its necessary dependencies.
printFontData: Logs information about all of the font files inside your [patternsDir]/fonts directory to your console (i.e. the font’s PostScript name, etc.).