project-banner

Adds a nice simple banner to your project

elis

424

1

0.3.3

MIT

GitHub

Project Banner for Atom Editor

With Project Banner you can easily and simply add informative banners to your projects.

New in version 0.3! Executables! CSON! Coffee!

In the latest version there is now support for CSON bannerfiles, js, and even coffee script files!

Example

If you're like me, you are working on many projects, and sometimes with similar names, similar file structure, and other confusing similarities that sometimes make me edit the wrong file.

The answer is a simple and unique banner at the bottom of the layout that you can use to identify the particular project you're working on quickly and easily avoiding mistakes and many lost hours figuring out why our changes don't apply...

Screenshot

This package is my first foray into atom custom packages and might not be very optimized. It's also a product of a couple of nights of passion rather than a methodical development and rigorous testing. It's fragile. It's very basic in its features at the moment as well.

Project Banner on atom.io

Settings

package.json

configPath - provide Project Banner with a config path (relative to the project path) of the banner files

.bannerfile.json or .bannerfile.cson

In project path (or relative as configured in configPath) these files will be loaded and processed according to the settings.

.banerfile.js or .bannerfile.coffee

Same as json or cson but exected to have exports = {...} as the resulting output of the file. Content will be merged with content from static file.

Setting Options

Examples for a .bannerfile.json flavor can be seen in this project.

Settings will automatically reload when changed - this makes it easy to configure the banner, and allows creating dynamic banners with some clever configuration.

items

Array of Objects (or sometimes strings, using the shorthand method) containing some details about the element to be displayed.

type

String to indicate type of element.

Currently supported types are:

classList

Array of strings to be applied to the element as its class-names. Useful to style later.

onClick

Executable function - either pass in an expected function (like state.actions.doSomething) or a function string (e.g. "event => alert('Fired!')").

events

Array of events to attach to the element, pass in executable function - either pass in an expected function (like state.actions.doSomething) or a function string (e.g. "event => alert('Fired!')").

styles

Array of strings to be applied to the banners stylesheet.

Example:

{
  "items": [
    "Project Banner",
    {
      "type": "text",
      "content": "My first banner!"
    },
    {
      "type": "icon",
      "icon": "code",
      "classList": ["code-icon"]
    },
    {
      "type": "svg",
      "path": "static/html5.svg"
    }
  ],
  "styles": [
    ".code-icon { color: green; }",
    ".dark .code-icon { color: blue; }"
  ]
}

Use .dark classname for styles that only need to be applied for dark themes (if project banner identifies the theme as dark).

Troubleshooting

Banner not showing

Uses

Project Banner was designed to solve a problem for me - easily identify within which project I currently am in.

If Project Banner solved a problem for you, or simply looks good with your project please share it us!

What is it even good for?

Here are some examples of project banners:

Project Banner's own banner

TMS Self Service v2

TMS Self Service v1

Share your configurations with us and we'll put them up for everyone to marvel!

Future possibilities

Ideally Project Banner would support dynamic configuration - loading js modules instead of static json files.

Support for LESS integrated with built-in variables and imports would be essential feature moving forward.

Perhaps a more evolved templating solution could be developed instead of or additionally to the items mechanism.

More features that would be nice to have: