View Source MBTA METRO
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