.branderrc.json

{
  "name": "NotNinja",
  "title": "!ninja",
  "email": "contact@not.ninja",
  "homepage": "https://not.ninja",
  "tasks": [
    {
      "task": "clean",
      "input": {
        "files": [
          "@(logo|tile)/**/*.ico",
          "@(banner|copyright|logo|tile)/**/*.min.svg",
          "@(banner|copyright|logo|social|tile)/**/*.png"
        ]
      }
    },
    {
      "task": "convert",
      "input": {
        "files": "banner/**/*.svg"
      },
      "output": {
        "format": "png"
      },
      "options": {
        "sizes": [
          "354x100"
        ]
      }
    },
    {
      "task": "convert",
      "input": {
        "files": "copyright/**/*.svg"
      },
      "output": {
        "format": "png"
      },
      "options": {
        "sizes": [
          "186x25",
          "372x50",
          "744x100"
        ]
      }
    },
    {
      "task": "convert",
      "input": {
        "files": "@(logo|tile)/**/!(*-mask).svg"
      },
      "output": {
        "format": "png"
      },
      "options": {
        "sizes": [
          16,
          32,
          36,
          48,
          64,
          70,
          72,
          76,
          96,
          120,
          144,
          150,
          152,
          167,
          168,
          180,
          192,
          250,
          256,
          300,
          310,
          512,
          2800
        ]
      }
    },
    {
      "task": "convert",
      "input": {
        "files": "social/**/*.svg"
      },
      "output": {
        "format": "png"
      }
    },
    {
      "task": "package",
      "input": {
        "files": "@(logo|tile)/**/*-256x256.png"
      },
      "output": {
        "files": "<%= file.base(true).replace('-256x256', '') %>.ico"
      },
      "options": {
        "groupBy": "<%= file.dir %>",
        "sizes": [
          16,
          32,
          48,
          256
        ]
      }
    },
    {
      "task": "optimize",
      "input": {
        "files": "@(banner|copyright|logo|tile)/**/*.svg"
      }
    }
  ],
  "docs": [
    {
      "doc": "README.md",
      "dir": ".",
      "sections": [
        {
          "type": "template",
          "content": [
            "    888 888b    888 888 888b    888        8888 8888b",
            "    888 8888b   888 888 8888b   888        8888 88888b",
            "    888 88888b  888 888 88888b  888         888 888Y88b",
            "    888 888Y88b 888 888 888Y88b 888         888 888 Y88b",
            "    888 888 Y88b888 888 888 Y88b888         888 888  Y88b",
            "        888  Y88888 888 888  Y88888 888     888 888   Y88b",
            "    8\"8 888   Y8888 888 888   Y8888 88888888888 888    Y88b",
            "    888 888    Y888 888 888    Y888 88888888888 888     Y88b",
            "",
            "This repository contains branding assets and guidelines for [<%= config.title %>](<%= config.homepage %>)."
          ]
        },
        {
          "type": "toc",
          "docs": [
            "guidelines.md",
            "colors.md",
            "assets.md"
          ],
          "minDepth": 0,
          "maxDepth": 1
        },
        {
          "title": "Using Assets",
          "type": "template",
          "content": [
            "All assets are owned by <%= config.title %> and intended for use by <%= config.title %>, however, we are an open organization so if you wish to use our assets, simply ask us for permission to do so, detailing who/what/when/where/why you intend to use them.",
            "",
            "The best way to get in touch with us is via [email](mailto:<%= config.email %>) or on [slack](https://slack.not.ninja)."
          ]
        },
        {
          "title": "Generating Assets",
          "type": "template",
          "content": [
            "The assets and documentation within this repository are generated using [Brander](https://github.com/NotNinja/brander) based on our `.branderrc.json` configuration file.",
            "",
            "To get started, first clone the repository:",
            "",
            "``` bash",
            "$ git clone <%= config.repository.url %>",
            "$ cd <%= config.repository.name %>",
            "```",
            "",
            "Then install all of the necessary dependencies:",
            "",
            "``` bash",
            "<%= config.repository.name %>$ npm install",
            "```",
            "",
            "Now you can easily generate all assets and documentation after making whatever changes you want to the configuration file or asset sources:",
            "",
            "``` bash",
            "<%= config.repository.name %>$ npm start",
            "```",
            "",
            "If successful, it should end with \"Done!\"."
          ]
        }
      ]
    },
    {
      "doc": "assets.md",
      "title": "Assets",
      "sections": [
        {
          "type": "template",
          "content": "This document contains references to all assets that are available to be used to represent the <%= config.title %> brand across all spaces."
        },
        {
          "type": "toc",
          "maxDepth": 1
        },
        {
          "title": "Banners",
          "type": "template",
          "content": [
            "The banner assets are the best way of getting our brand across. It contains the full organization name in our unique bespoke font as well as our recognizable ninja icon hidden away inside of it.",
            "",
            "These banners can be used everywhere, from website headers to letterheads to stickers and promotional material. Just ensure that you choose the version that shows best on the background of the target document."
          ]
        },
        {
          "type": "asset-feature",
          "dir": "banner/**/*/",
          "preview": "!(*.min).svg",
          "files": [
            "*.png",
            [ "!(*.min).svg", "*.min.svg" ]
          ],
          "sortBy": [ "<%= files[0].file.type %>", "asc" ],
          "titles": {
            "not-ninja-banner.svg": "Base",
            "not-ninja-banner-fill.svg": "Base, Fill",
            "not-ninja-banner-invert.svg": "Base, Invert",
            "not-ninja-banner-invert-fill.svg": "Base, Invert, Fill",
            "not-ninja-banner-pride.svg": "Pride",
            "not-ninja-banner-pride-fill.svg": "Pride, Fill"
          }
        },
        {
          "title": "Copyright",
          "type": "template",
          "content": [
            "The copyright assets are very similar to the banner except that it also contains a copyright symbol and the current year, also in our unique bespoke font.",
            "",
            "These copyright notices are intended for use on project pages (e.g. GitHub). It is recommended that pure text copyright notices are used on all !ninja websites, web-based applications, and printed material instead."
          ]
        },
        {
          "type": "asset-feature",
          "dir": "copyright/**/*/",
          "preview": "!(*.min).svg",
          "files": [
            "*.png",
            [ "!(*.min).svg", "*.min.svg" ]
          ],
          "sortBy": [ "<%= files[0].file.type %>", "asc" ],
          "titles": {
            "not-ninja-copyright.svg": "Base",
            "not-ninja-copyright-fill.svg": "Base, Fill",
            "not-ninja-copyright-invert.svg": "Base, Invert",
            "not-ninja-copyright-invert-fill.svg": "Base, Invert, Fill"
          }
        },
        {
          "title": "Logos",
          "type": "template",
          "content": [
            "The logo assets are a great way of getting our brand across. The base logo is usually preferred as it has an immediate impact since it consists entirely of our little ninja. Alternatively, since the text logo contains an (extremely) abbreviated name for our organization, \"!N\", in our unique bespoke font as well as our recognizable ninja icon hidden away inside of it, it is a great substitution for a full banner when space is tight as it's basically just the first 2 characters of our banner assets.",
            "",
            "These logos are ideal for many cases but should ideally only be used when the full organization name is included in at least one other location on the same document. We should not rely on brand recognition solely on our logos. That said; they can be used absolutely anywhere that the banner could be used. The base logo is especially suited for icons and stickers."
          ]
        },
        {
          "type": "asset-feature",
          "dir": "logo/**/*/",
          "preview": "!(*.min).svg",
          "files": [
            "*.ico",
            "*.png",
            [ "!(*.min).svg", "*.min.svg" ]
          ],
          "sortBy": [ "<%= files[0].file.type %>", "asc" ],
          "titles": {
            "not-ninja-logo.svg": "Base",
            "not-ninja-logo-fill.svg": "Base, Fill",
            "not-ninja-logo-invert.svg": "Base, Invert",
            "not-ninja-logo-invert-fill.svg": "Base, Invert, Fill",
            "not-ninja-logo-mask.svg": "Base, Mask",
            "not-ninja-logo-pride.svg": "Pride",
            "not-ninja-logo-pride-fill.svg": "Pride, Fill",
            "not-ninja-logo-pride-invert.svg": "Pride, Invert",
            "not-ninja-logo-pride-invert-fill.svg": "Pride, Invert, Fill",
            "not-ninja-logo-text.svg": "Text",
            "not-ninja-logo-text-fill.svg": "Text, Fill",
            "not-ninja-logo-text-invert.svg": "Text, Invert",
            "not-ninja-logo-text-invert-fill.svg": "Text, Invert, Fill",
            "not-ninja-logo-text-mask.svg": "Text, Mask"
          }
        },
        {
          "title": "Tiles",
          "type": "template",
          "content": "The tile assets share an almost identical usage to the logo assets, with the main difference being that they all fill a square, fitting with the concept of a tile. They are ideal for situations where transparency is not supported or may cause problems or rounded corners simply don't suit the use case. Logos are always preferred but tiles offer a useful alternative."
        },
        {
          "type": "asset-feature",
          "dir": "tile/**/*/",
          "preview": "!(*.min).svg",
          "files": [
            "*.ico",
            "*.png",
            [ "!(*.min).svg", "*.min.svg" ]
          ],
          "sortBy": [ "<%= files[0].file.type %>", "asc" ],
          "titles": {
            "not-ninja-tile.svg": "Base",
            "not-ninja-tile-invert.svg": "Base, Invert",
            "not-ninja-tile-pride.svg": "Pride",
            "not-ninja-tile-pride-invert.svg": "Pride, Invert",
            "not-ninja-tile-text.svg": "Text",
            "not-ninja-tile-text-invert.svg": "Text, Invert"
          }
        },
        {
          "title": "Social",
          "type": "template",
          "content": [
            "The social assets are simply those used to decorate profile pages across various social media platforms. They are all variations of the same theme to provided consistency.",
            "",
            "These images are only intended to be used on their respective platforms.",
            "",
            "The [background image](https://www.pexels.com/photo/bamboo-plant-129916/) used in each of the social images was taken by Erol Ahmed and was sourced from [Pexels](https://www.pexels.com) and used under the Creative Commons Zero (CC0) license."
          ]
        },
        {
          "type": "asset-feature",
          "dir": "social/**/*/",
          "preview": "*.png",
          "files": "*.png",
          "sortBy": [ "<%= files[0].file.type %>", "asc" ],
          "titles": {
            "not-ninja-facebook-cover.png": "Facebook Cover",
            "not-ninja-google-plus-cover.png": "Google+ Cover",
            "not-ninja-twitter-header.png": "Twitter Header"
          }
        }
      ]
    },
    {
      "doc": "colors.md",
      "title": "Colors",
      "sections": [
        {
          "type": "template",
          "content": "This document contains the colors that are to be used when representing the <%= config.title %> brand."
        },
        { "type": "toc" },
        {
          "title": "Palette",
          "type": "template",
          "content": "The following colors are recommended to be used:"
        },
        {
          "type": "color-table",
          "colors": [
            {
              "name": "Black",
              "format": "hex",
              "value": "#000000"
            },
            {
              "name": "White",
              "format": "hex",
              "value": "#FFFFFF"
            },
            {
              "name": "Primary",
              "format": "hex",
              "value": "#4B0082"
            },
            {
              "name": "Secondary",
              "format": "hex",
              "value": "#7700CF"
            }
          ],
          "columns": [
            {
              "header": "Color",
              "content": "<%= color.name %>"
            },
            {
              "header": "Hex",
              "content": "`<%= color.hex %>`"
            },
            {
              "header": "RGB",
              "content": "<%= color.rgb.join(', ') %>"
            },
            {
              "header": "CMYK",
              "content": "<%= color.cmyk.join(', ') %>"
            }
          ]
        }
      ]
    },
    {
      "doc": "guidelines.md",
      "title": "Guidelines",
      "sections": [
        {
          "type": "template",
          "content": "This document contains guidelines to be followed when representing the <%= config.title %> brand."
        },
        { "type": "toc" },
        {
          "type": "template",
          "title": "Fonts",
          "content": "The following fonts are recommended to be used when presenting text-based information, anywhere from websites to written letters:"
        },
        {
          "type": "table",
          "headers": [
            "Type",
            "Primary Font",
            "Fallback Fonts"
          ],
          "rows": [
            [
              "Heading",
              "TODO",
              "TODO"
            ],
            [
              "Body",
              "TODO",
              "TODO"
            ],
            [
              "Monospace",
              "TODO",
              "TODO"
            ]
          ]
        },
        {
          "type": "template",
          "content": "For all assets, our unique bespoke font should always be used. This does not exist as a standalone font (yet?) and, instead, SVG characters are currently simply being copied throughout the assets, as needed. We will attempt to improve this going forward to make it easier to reuse and widen its usage."
        }
      ]
    }
  ],
  "options": {
    "lineSeparator": "lf",
    "docs": {
      "footer": {
        "type": "template",
        "content": [
          "---",
          "",
          "[![Copyright <%= config.title %>](<%= config.assetURL([ config.assetsDir, 'copyright/base/not-ninja-copyright-372x50.png' ]) %>)](<%= config.homepage %>)"
        ]
      }
    }
  }
}