Packages
mbta_metro
0.0.15
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
```
Copy the fonts from `mbta_metro` into your project's static directory:
```
%> mix mbta_metro.install_fonts
```
Import the styles in your `assets/css/app.css`:
```css
@import "../../deps/mbta_metro/priv/static/assets/default.css";
```
The, follow the installation instructions for the [npm package](assets/README.md).
### LiveComponents
Some components, like the Map, take further configuration.
#### Map
```elixir
config :mbta_metro, :aws_location,
api_key: System.get_env("AWS_LOCATION_API_KEY"),
map_name: System.get_env("AWS_LOCATION_MAP_NAME"),
region: System.get_env("AWS_LOCATION_REGION")
```
You'll also have to add the following to your CSP (assuming you have one):
```elixir
[
"child-src blob: ;",
"connect-src *.amazonaws.com",
"worker-src blob: ;"
]
```
## Publishing
You need to export CSS before publishing a hex package.
This is because we process some CSS, but don't process Tailwind.
```
%> mix mbta_metro.export_css
```
Then publish to hex as normal:
```
%> mix hex.publish
```
Follow the publishing instructions for the [npm package](assets/README.md).