Statusfy Documentation

# Config Reference

# title

  • Type: string
  • Default: undefined

The Title for of Site. This will be the suffix for all page titles and displayed in the navbar. It is also used in the Manifest File.

# short_title

  • Type: string
  • Default: undefined

The Short Title of the Site. This will be used in the short_name attribute of the Manifest File.

TIP

If this parameter is not defined, the value of the title will be used by default.

# name

  • Type: string
  • Default: undefined

The Name of the Application. It is also used in the Manifest File and as id for assets caching with Service Worker.

WARNING

It should be an alphanumeric and lowercase value.

TIP

If this parameter is not defined, a value based on the title will be generated.

# description

  • Type: string
  • Default: undefined

The Description for the site. This will be rendered as a <meta> tag in the page HTML and used in the Manifest File.

# baseUrl

  • Type: string
  • Default: /

The base URL the site will be deployed at. It can be just a slash or a valid URL that shouldn't end with a slash.

WARNING

Since version v0.3.0, deployments under a subpath (e.g. https://example.com/status/) are no longer supported.

TIP

You should set the baseUrl field to your production domain in order to make Alternate URLs fully-qualified.

# theme

  • Type: Object

Provide config options to the be used by the theme.

# scheduled 0.3.0+

  • Type: Object
  • Default: { position: 'belowSystems' }

Define the position of the Section Scheduled Maintenance in the home page. The allowed values are: belowSystems, aboveSystems and aboveGlobalStatus.

  • Type: Object
  • Default: {}

The external links located at the Footer of each page. There only three links you can define: home, contact, support, legal and privacy and must be used the language code as the index of the object. For example:

module.exports = {
  theme: {
    links: {
      en: {
        contact: "https://statusfy.co/contact",
        support: "https://statusfy.co/support",
        home: "https://statusfy.co",
        privacy: "https://statusfy.co/data-privacy",
        legal: "https://statusfy.co/legal"
      },
      es: {
        contact: "https://statusfy.co/es/contact",
        support: "https://statusfy.co/es/support",
        home: "https://statusfy.co/es",
        privacy: "https://statusfy.co/es/data-privacy",
        legal: "https://statusfy.co/es/legal"
      }
    }
  }
}

# serviceWorker

  • Type: boolean
  • Default: true

If set to true, Statusfy will automatically generate and register a service worker that caches the content for offline use (only enabled production builds). For more details, see the guide on Progressive Web App (PWA).

Important

To make your site fully PWA-compliant, you will need to enable the Web App Manifest.

Also, only enable this if you are able to deploy your site with SSL since service worker can only be registered under HTTPS URLs.

# manifest

  • Type: boolean
  • Default: true

Generate a valid Web App Manifest. For more details, see the guide on Progressive Web App (PWA).

# analytics

  • Type: object
  • Default: undefined

The analytics services.

# ga

  • Type: string
  • Default: undefined

Provide the Google Analytics ID to enable integration.

# mixpanel

  • Type: string
  • Default: undefined

Provide the Mixpanel Token to enable integration.

# facebook

  • Type: string
  • Default: undefined

Provide the Facebook Pixel App ID to enable integration.

# segment

  • Type: string
  • Default: undefined

Provide the Segment Token to enable integration.

# notifications 0.2.0+

  • Type: object
  • Default: {}

The available notifications options.

# webpush 0.4.0+

  • Type: object
  • Default: undefined

Allow your users/customers to subscribe to Web Push notifications from their browsers. For more details, see the guide on Notifications.

In order to activate OneSignal, you must define your AppID:

...
  webpush: {
    onesignal: {
      appId: "yout-one-signal-app-id"
    }
  }
...

# icalendar 0.2.0+

  • Type: boolean
  • Default: true

Activate the calendar containing all of your upcoming and past Scheduled Maintenances. For more details, see the guide on Notifications.

# feeds 0.2.0+

  • Type: boolean
  • Default: true

Activate the feeds that include all past Incidents and Scheduled Maintenances. For more details, see the guide on Notifications.

# twitter 0.2.0+

  • Type: object
  • Default: undefined

Define Twitter accounts that your users can access in order to receive updates.

You must define a value for each language your system supports:

...
  notifications: {
    twitter: {
      en: "BazziteTech",
      es: "BazziteES"
    }
  }
...

For more details, see the guide on Notifications.

# support 0.2.0+

  • Type: object
  • Default: undefined

Define the external Support Sites your users can access in order to receive updates from other sources you may want to provide.

You must define a value for each language your system supports:

...
  notifications: {
    support: {
      en: "https://statusfy.co/support",
      es: "https://statusfy.co/es/support"
    }
  }
...

For more details, see the guide on Notifications.

# defaultLocale

  • Type: string
  • Default: en

The app's default locale, URLs for this locale won't have a prefix. It is also used in the Manifest File.

# locales

  • Type: [{ code: string, iso: string, name: string }]
  • Default: [{ code: 'en', iso: 'en-US', name: 'English' }]

Specify locales for i18n support. For more details, see the guide on Internationalization.

# content

  • Type: object
  • Default: { dir: 'content', systems: [ 'api', 'cdn', 'dns', 'site-delivery' ] }

Parameters that define some content considerations for your Incidents.

# dir

  • Type: string
  • Default: content

The path that defines the location of your incidents' markdown source files.

# frontMatterFormat

  • Type: string
  • Default: yaml

Define the default format of the Incidents' Front Matter used by the new-incident command (More info here). You can choose one of the following: yaml, yml, toml, json. For more details, see the guide on Incidents' Front Matter.

# systems

  • Type: Array
  • Default: ['api', 'cdn', 'dns', 'site-delivery']

Define the IDs of the Available Systems. These IDs will be used when you indicate the Affected Systems in your Incidents.

Important

You must define, in your locales files, the Human-Friendly titles of the defined IDs Systems.

  • Type: object
  • Default: undefined

Extra tags to be injected to the page HTML <head>. Each tag can be specified in the form of {tagCategory: [tagName, { attrName: attrValue }]}. For example, you can add a custom mask-icon:

module.exports = {
  head: {
    link: [
      { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3e4e88' }
    ]
  }
}

or define a meta tag site verification:

module.exports = {
  head: {
    meta: [
      { 
        name: 'google-site-verification', 
        content: '+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34=' 
      }
    ]
  }
}

To know the list of options you can give to head, take a look at vue-meta documentation.