Packages
mbta_metro
0.0.20
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
0.0.65
0.0.64
0.0.62
0.0.61
0.0.60
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.34
0.0.30
0.0.27
0.0.20
0.0.19
0.0.18
0.0.17
0.0.16
0.0.15
0.0.14
0.0.13
0.0.12
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1
0.0.1-alpha
A Phoenix LiveView component library
Current section
Files
Jump to
Current section
Files
mbta_metro
README.md
README.md
# MBTA METRO
To demo all of the MBTA METRO components:
```
%> mix setup
%> mix phx.server
```
Now you can visit [`localhost:4000`](http://localhost:4000/storybook) 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](https://tailwindcss.com/docs/guides/phoenix).
### Install MBTA METRO
Add this to your `mix.exs`:
```elixir
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
```
Make sure the JS assets are in line with the hex version of `mbta_metro`:
```
%> mix mbta_metro.update_assets
```
Import its styles in your `assets/css/app.css`:
```css
@import "../../deps/mbta_metro/priv/static/assets/default.css";
```
### LiveComponents
Some components, like the Map, take further configuration.
#### Map
```elixir
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):
```elixir
[
"child-src blob: ;",
"connect-src *.stadiamaps.com",
"worker-src blob: ;"
]
```
## Publishing
If any CSS assets have changed, export a new CSS file.
```
%> mix mbta_metro.export_css
```
If any JS assets have changed, publish a new [npm package](assets/README.md#publishing).
Then, bump the hex version:
```
%> mix mbta_metro.version [patch | minor | major]
```
You can now publish to hex:
```
%> mix hex.publish
```