View Source MBTA METRO

hex version npm version

This package contains function components, live components, and default styles.

To demo all of the mbta_metro components:

%> npm install --prefix assets
%> mix deps.get
%> mix phx.server

Now you can visit http://localhost:4000 from your browser.

Installation

Install Tailwind

If you have a clean, recent installation of Phoenix, you should already have Tailwind installed. If not, you can follow this guide.

Install MBTA METRO

Add this to your mix.exs:

def deps do
  [
    {:mbta_metro, ">= 0.0.0"}
  ]
end

If this is your first time using mbta_metro, copy its fonts into your project's static directory:

%> mix mbta_metro.install_fonts

Import mbta_metro's styles in your assets/css/app.css:

@import "../../deps/mbta_metro/priv/static/assets/default.css";

Make sure your assets are in line with the hex version of mbta_metro:

%> mix mbta_metro.update_assets

You can then use some defaults in your assets/tailwind.config.js:

const {colors, content, fontFamily, plugins, safelist} = require("mbta_metro")

module.exports = {
  content: [
    ...content,
  ],
  safelist: [
    ...safelist,
  ],
  plugins: [
    ...plugins(), // Note that this is a function
  ],
  theme: {
    extend: {
      colors: {
        ...colors
      }
    },
    fontFamily: {
      ...fontFamily,
    },
  }
}

If you want to use mbta_metro's LiveComponents, you'll need to add its hooks in your assets/js/app.js:

import {Hooks} from "mbta_metro"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: {
    ...Hooks
  }
})

If you want to include hooks individually, you can do so:

import {Map} from "mbta_metro"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: {
    Map
  }
})

LiveComponents

Some components, like the Map, take further configuration.

Map

config :mbta_metro, :map, api_key: System.get_env("MBTA_METRO_MAP_API_KEY")

You'll also have to add the following to your CSP (assuming you have one):

[
  "child-src blob: ;",
  "connect-src *.stadiamaps.com",
  "worker-src blob: ;"
]

Publishing

You can publish a new release with a single script:

%> ./release
Please enter a release level [patch | minor | major]: patch
...