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

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
  }
})

Custom Icons

Along with all of the free Font Awesome icons, you can add custom icons by pointing to any directory you like. E.g.,

config :mbta_metro, custom_icons: "#{File.cwd!()}/priv/static/icons/your-directory/your-icon.svg"

SVGs in the above directory will be turned into icons and can be used as follows:

<.icon type="your-directory" name="your-icon" class="..." />

LiveComponents

Some components, like the Map, take further configuration.

Map

The map components uses maplibre-gl so you must pass in config with a valid style spec.

You can use an external style source.

@api_key = Application.compile_env!("MBTA_METRO_MAP_API_KEY")

config :mbta_metro, :map, %{
  style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json?api_key=#{@api_key}"
}

If you do use an external source you'll have to make sure it is defined in your CSP (assuming you have one):

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

Or, you can define your own style.

config :mbta_metro, :map, config: %{
  center: [-71.0589, 42.3601],
  style: %{
    "version" => 8,
    "sources" => %{...},
    "layers" => %{...}
  },
  zoom: 15
}

Publishing

You can publish a new release with a single script:

%> git checkout main
%> git pull origin main
%> ./release
Please enter a release level [patch | minor | major]: patch
...
%> git push origin main